/* 
Theme Name: Gary Wallage Wedding Pro
Theme URI: https://garywallage.com/
Author: Gary Wallage
Author URI: https://garywallage.com/
Description: Boutique Editorial Photography Theme
Version: 3003.54
Text Domain: gary-wedding
*/

/* 
 * BOUTIQUE EDITORIAL MANDATE (NON-NEGOTIABLE ARCHITECTURE)
 * 1. LAYOUT: Strict 10-80-10 Percentage column (10% White Space | 80% Site Content | 10% White Space).
 * 2. PALETTE: Pure White (#ffffff) Margins and Backgrounds for a high-fidelity editorial frame.
 * 3. IMAGERY: The "Never-Crop" Cardinal Rule. Preserve all artistic aspect ratios.
 * 4. HEADERS: Central Focal Logo overlap (25% top offset / 150% relative height) 'Bring to Front' priority.
 */

:root {
    --editorial-width: 80%;
    --site-max-width: none;
    --brand-bg: #ffffff;
    --brand-gold-light: #C5A059;
    --brand-crimson: #630000;
    --brand-white: #ffffff;
    --brand-black: #11110e;
    --font-primary: 'Lato', sans-serif;
    --font-script: 'Blacksword', cursive;
    --shadow-soft: 0 5px 15px rgba(0,0,0,0.05);
    --shadow-deep: 0 15px 35px rgba(0,0,0,0.1);
    --header-height: 82px; /* Desktop: 80px container + 2px gold border */
}

body { padding-top: var(--header-actual-height, 82px) !important; background-color: var(--brand-bg) !important; margin: 0; overflow-x: clip; width: 100%; }
*, *::before, *::after { box-sizing: border-box !important; }

/* 10-80-10 EDITORIAL MANDATE (STRICT PERCENTAGE) */
.container, 
#primary, 
.site-main, 
.page-header,
.header-focal-container { 
    width: 80% !important; 
    max-width: none !important; /* Fully dynamic 80% span */
    margin-left: 10% !important; 
    margin-right: 10% !important; 
    clear: both;
}

/* Prevent double-squeezing of nested containers (e.g., .container inside #primary) */
#primary .container,
.site-main .container,
.container .container,
#primary .site-main {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* FULL-WIDTH EXCEPTIONS */
.site-header, 
.hero-peek-carousel, 
.site-footer { 
    width: 100% !important; 
    max-width: none !important; 
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* SCOPED IMAGE FIDELITY (THE NEVER-CROP RULE) */
.service-card-image img, 
.gw-z-image img, 
.gw-trio-gallery img { 
    object-fit: contain !important; 
    max-width: 100% !important; 
    height: auto !important; 
} 


@font-face {
    font-family: 'Blacksword';
    src: url('fonts/Blacksword.woff2') format('woff2'),
        url('fonts/Blacksword.woff') format('woff'),
        url('fonts/Blacksword.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('fonts/lato-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('fonts/lato-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* 1. LAYOUT & CONTAINERS */
    --editorial-width: 80%;
    /* Primary constraint */
    --site-max-width: none;
    --grid-gap: 40px;

    /* 2. COLORS (BRAND DNA) */
    --brand-bg: #ffffff; /* PURE WHITE MANDATE */
    --brand-black: #11110e;
    /* Gold-tinted Boutique Black */
    --brand-text: var(--brand-black);
    --brand-accent: #B08D55;
    --brand-gold-light: #C5A059;
    --brand-gold-text: #8A6B32;
    /* High-contrast Gold for WCAG AA on white */
    --brand-crimson: #630000;
    --brand-white: #ffffff;

    /* 3. TYPOGRAPHY */
    --font-primary: 'Lato', sans-serif;
    --font-script: 'Blacksword', cursive;

    /* Typography Scale (Paragraph base-up) */
    --font-size-base: 1rem; /* 16px base paragraph size */
    --font-size-h3: calc(var(--font-size-base) + 2px); /* 18px */
    --font-size-h2: calc(var(--font-size-h3) + 2px); /* 20px */
    --font-size-h1: calc(var(--font-size-h2) + 12px); /* 32px */
    --font-size-h4: var(--font-size-base); /* 16px */
    --font-size-h5: calc(var(--font-size-base) - 2px); /* 14px */
    --font-size-h6: calc(var(--font-size-base) - 4px); /* 12px */
    --margin-bottom-standard: 18px; /* Universal margin between all blocks */

    /* 4. VISUAL EFFECTS */
    --gold-frame-border: 8px;
    --gold-gradient: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-gold-light) 50%, var(--brand-accent) 100%);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
    --shadow-deep: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* --- GLOBAL DEFAULTS --- */
body,
html {
    background-color: var(--brand-bg);
    color: var(--brand-text);
    font-family: var(--font-primary);
    margin: 0;
    overflow-x: clip;
    width: 100%;
    max-width: 100vw;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s ease;
}

img {
    max-width: 100%;
    height: auto;
    max-height: 70vh; /* HIGH FIDELITY CONSTRAINT: No stretched images */
    object-fit: cover;
}

.container,
.site-main.container {
    width: var(--editorial-width) !important;
    max-width: var(--site-max-width) !important;
    margin: 0 auto !important;
    clear: both;
}

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

/* Enforce Script Weights (Site Title and Signatures) */
.site-title-blacksword,
.hero-title,
.footer-branding h3,
.about-sig span {
    font-family: var(--font-script) !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--brand-black);
}

/* --- GLOBAL TYPOGRAPHY SPACING & LINE-HEIGHTS --- */
h1,
.entry-title {
    font-family: var(--font-script) !important;
    font-weight: normal !important;
    color: var(--brand-accent) !important;
    font-size: var(--font-size-h1) !important;
    margin-top: 0 !important;
    padding-top: 6px !important;
    margin-bottom: var(--margin-bottom-standard) !important;
    line-height: 1.1 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

h2 {
    font-family: var(--font-primary) !important;
    font-weight: normal !important;
    color: var(--brand-accent) !important;
    font-size: var(--font-size-h2) !important;
    margin-top: 0 !important;
    margin-bottom: var(--margin-bottom-standard) !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 3px !important;
}

h3 {
    font-family: var(--font-primary) !important;
    font-weight: normal !important;
    color: var(--brand-accent) !important;
    font-size: var(--font-size-h3) !important;
    margin-top: 0 !important;
    margin-bottom: var(--margin-bottom-standard) !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 2px !important;
}

h4 {
    font-family: var(--font-primary) !important;
    font-weight: normal !important;
    color: var(--brand-accent) !important;
    font-size: var(--font-size-h4) !important;
    margin-top: 0 !important;
    margin-bottom: var(--margin-bottom-standard) !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: 2px !important;
}

h5 {
    font-family: var(--font-primary) !important;
    font-weight: normal !important;
    color: var(--brand-accent) !important;
    font-size: var(--font-size-h5) !important;
    margin-top: 0 !important;
    margin-bottom: var(--margin-bottom-standard) !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: 2px !important;
}

h6 {
    font-family: var(--font-primary) !important;
    font-weight: normal !important;
    color: var(--brand-accent) !important;
    font-size: var(--font-size-h6) !important;
    margin-top: 0 !important;
    margin-bottom: var(--margin-bottom-standard) !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: 2px !important;
}

p {
    font-size: var(--font-size-base);
    margin-top: 0;
    margin-bottom: var(--margin-bottom-standard) !important;
    line-height: 1.5;
}


h1.entry-title {
    text-align: center;
    margin-top: 0 !important;
    padding-top: 6px !important;
}

body:not(.home) h1.entry-title {
    margin-top: 0 !important;
    padding-top: 6px !important;
}
/* --- 1. HEADER & MENU (COMPACTED) --- */
.site-header {
    width: 100%;
    z-index: 5000;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--brand-white);
    border-bottom: 2px solid var(--brand-gold-light) !important;
    box-shadow: none;
}

.header-focal-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 0 !important; /* Compressed for 50% logo overlap */
    min-height: 60px !important; /* Total height = 60 + 10 + 10 = 80px */
    position: relative;
    z-index: 3000;
}

/* Accessibility: Ensure menu text and buttons have sufficient contrast */
.menu-text {
    color: var(--brand-black) !important;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-left: 12px;
    font-weight: 700;
}

.wp-block-button__link {
    color: var(--brand-black) !important;
    font-weight: 700 !important;
}

.whatsapp-link {
    color: var(--brand-black) !important;
    font-weight: 700;
}

.gw-service-looking-for {
    color: var(--brand-black) !important;
    font-weight: 700;
}

.footer-meta p {
    opacity: 1 !important;
    color: #fff !important;
}

.focal-side {
    flex: 1;
    display: flex;
    align-items: center;
    margin-top: 0;
    padding-bottom: 0; /* Removed bottom padding to fix menu alignment */
}

.focal-left {
    justify-content: flex-start;
}

.focal-right {
    justify-content: flex-end;
}

.focal-center {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 4000 !important; /* 'Bring to Front' absolute priority */
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

.focal-center .custom-logo-link img {
    height: 60px !important; /* Constrain to fit 100% height of header */
    width: auto !important;
    display: block !important;
    margin: 0 auto !important;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)); /* Enhanced elevation */
    transition: transform 0.3s ease;
}

.site-title-blacksword {
    color: var(--brand-accent);
    font-size: 1.9rem;
    margin: 0;
    line-height: 1.1;
}

.site-tagline-lato {
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: none;
    opacity: 0.7;
    margin-top: 8px;
}


.menu-toggle {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    gap: 10px !important; /* Tightened for boutique precision */
}

.hamburger-box {
    width: 24px;
    height: 14px;
    position: relative;
    flex-shrink: 0 !important;
    margin-right: 0 !important; /* Removed redundant margin (now handled by gap) */
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 24px;
    height: 2px;
    background-color: var(--brand-accent);
    position: absolute;
    transition: 0.3s;
}

.hamburger-inner {
    top: 50%;
    margin-top: -1px;
}

.hamburger-inner::before {
    content: "";
    top: -6px;
    left: 0;
}

.hamburger-inner::after {
    content: "";
    top: 6px;
    left: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger-inner {
    background-color: transparent;
}

.menu-toggle[aria-expanded="true"] .hamburger-inner::before {
    transform: rotate(45deg);
    top: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger-inner::after {
    transform: rotate(-45deg);
    top: 0;
}

/* 
 * BOUTIQUE MENU MANDATE (NON-NEGOTIABLE):
 * 1. NATURE: Floating 80% wide / 80% tall modal panel (Never Fullscreen).
 * 2. STYLE: Pure White panel with gold border and deep soft shadows.
 * 3. TYPOGRAPHY: Large (2rem) high-contrast LATO with 5px editorial spacing.
 * 4. DISMISSAL: Permanent 'X' Box anchored to the top-right of the floating panel.
 */

.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    /* Dark scrim behind the panel */
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.45s ease, visibility 0.45s ease;
    backdrop-filter: blur(2px);
}

.menu-overlay[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

/* The inner panel — the actual 80×80 floating box */
.menu-overlay-inner {
    position: relative !important;
    width: 80% !important;
    max-width: 900px !important;
    min-height: 100px !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    background: #ffffff !important; /* Pure White Locked */
    border: 1px solid var(--brand-gold-light) !important;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(10px, 2vh, 30px) 20px !important;
    box-sizing: border-box !important;
    transform: scale(0.92) translateY(20px);
    transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.45s ease;
    opacity: 0;
    visibility: hidden;
}

.menu-overlay[aria-hidden="false"] .menu-overlay-inner {
    transform: scale(1) translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

.menu-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--brand-accent);
    line-height: 1;
    transition: color 0.3s;
}

.menu-close:hover {
    color: var(--brand-gold-light);
}

.nav-menu-overlay {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.nav-menu-overlay li {
    margin-bottom: clamp(5px, 1.5vh, 15px);
}

.nav-menu-overlay li a {
    font-size: clamp(0.9rem, 2.5vh, 1.5rem);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 3px;
    color: var(--brand-text);
    transition: 0.4s;
}

.nav-menu-overlay li a:hover {
    color: var(--brand-accent);
}

.btn-black:hover {
    background: var(--brand-gold-light);
    color: var(--brand-white);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* --- JETPACK SHARING CENTERING --- */
.sharedaddy, .sharedaddy .sd-sharing-enabled { text-align: center !important; margin: 20px auto !important; width: 100% !important; }
.sharedaddy .sd-content { display: block !important; margin: 0 auto !important; float: none !important; }
.sharedaddy .sd-content ul { display: flex !important; justify-content: center !important; flex-wrap: wrap !important; list-style: none !important; padding: 0 !important; gap: 10px !important; }
.sharedaddy .sd-content li { float: none !important; margin: 0 !important; }

/* --- MOBILE HEADER OVERRIDE --- */
@media (max-width: 1024px) {
    .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 5000 !important;
        background: var(--brand-bg, #F9F9F7) !important;
        box-shadow: none !important;
        height: 70px !important;
        border-bottom: 2px solid var(--brand-gold-light) !important;
    }

    body {
        padding-top: var(--header-actual-height, 72px) !important;
    }

    /* Admin Bar Correction */
    .admin-bar .site-header {
        margin-top: 0 !important;
        top: 46px !important;
    }

    @media (min-width: 783px) {
        .admin-bar .site-header {
            top: 32px !important;
        }
    }

    .header-focal-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 5% !important; /* 5% padding on left and right */
        height: 70px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .focal-side {
        width: auto !important;
        margin: 0 !important;
        flex: none !important;
    }

    .focal-left {
        order: 2 !important; /* Branding in the center */
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 0 10px !important;
    }

    .branding-group {
        text-align: center !important;
        width: 100% !important;
    }

    .focal-center {
        order: 1 !important; /* Logo on the left */
        padding: 0 !important;
        margin: 0 !important;
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        background: var(--brand-white) !important;
        border: 2px solid var(--brand-gold-light) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 3px 10px rgba(0,0,0,0.1) !important;
        z-index: 1000 !important;
        position: relative !important;
        top: 0 !important;
        left: auto !important;
        transform: none !important;
    }

    .focal-center .custom-logo-link img {
        max-width: 44px !important;
        max-height: 44px !important;
        width: auto !important;
        height: auto !important;
        border-radius: 50% !important;
        filter: none !important;
    }

    .nav-toggle-container {
        order: 3 !important; /* Menu on the right */
        margin: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
        width: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: none !important;
    }

    .menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 6px 14px !important;
        font-size: 0.8rem !important;
        border: 2px solid var(--brand-gold-light) !important;
        background: var(--brand-white) !important;
        color: var(--brand-black) !important;
        z-index: 1200 !important;
        min-height: 34px !important;
        align-items: center;
        justify-content: center;
    }

    .site-title-blacksword {
        font-size: clamp(1.1rem, 4vw, 1.4rem) !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    .site-tagline-lato {
        display: none !important;
    }

    /* Mobile H1 Adjustment (Closer to Logo) */
    body:not(.home) h1.entry-title,
    body:not(.home) .page-content h1:first-of-type {
        margin-top: 0 !important;
        padding-top: 6px !important;
        margin-bottom: var(--margin-bottom-standard) !important;
    }

    /* Mobile overlay: narrower panel */
    .menu-overlay-inner {
        width: 94% !important;
        padding: clamp(10px, 2vh, 25px) 15px !important;
        max-height: 85vh !important;
    }

    .nav-menu-overlay li a {
        font-size: clamp(0.85rem, 3vh, 1.2rem) !important;
        letter-spacing: 2px !important;
    }
}


/* --- TESSALLATED GRID STYLES --- */
.gw-tessellated-wall {
    width: 100%;
    height: var(--wall-height);
    padding: 40px 0;
    overflow: hidden;
    background: var(--brand-black);
}

.gw-tessellation-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: calc(var(--wall-height) / 2);
    gap: 15px;
    height: 100%;
}

.gw-wall-tile {
    position: relative;
    overflow: hidden;
    display: block;
    height: 100%;
    min-height: 200px;
}

.gw-wall-tile.span-2-2 {
    grid-column: span 2;
    grid-row: span 2;
}

.gw-wall-tile.span-2-1 {
    grid-column: span 2;
}

.gw-wall-tile.span-1-2 {
    grid-row: span 2;
}

.tile-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.tile-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.5s ease;
    padding: 20px;
}

.gw-wall-tile:hover .tile-image {
    transform: scale(1.12);
}

.gw-wall-tile:hover .tile-overlay {
    opacity: 1;
}

.tile-content {
    text-align: center;
    color: #fff;
    transform: translateY(20px);
    transition: 0.5s ease 0.1s;
}

.gw-wall-tile:hover .tile-content {
    transform: translateY(0);
}

.tile-subtitle {
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
    color: var(--brand-gold-light);
}

.tile-title {
    font-family: var(--font-primary) !important;
    font-size: 2.8rem;
    margin: 0 0 15px 0;
    font-weight: normal !important;
    line-height: 1.2;
}

.tile-btn {
    font-size: 0.75rem;
    border: 1px solid var(--brand-gold-light);
    color: var(--brand-gold-light);
    padding: 10px 24px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: 0.3s;
}

.tile-btn:hover {
    background: var(--brand-gold-light);
    color: #fff;
}

@media (max-width: 1024px) {
    .gw-tessellation-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: calc(var(--wall-height) / 3);
    }

    .gw-wall-tile.span-2-2,
    .gw-wall-tile.span-2-1 {
        grid-column: span 2;
        grid-row: span 1;
    }

    .tile-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 600px) {
    .gw-tessellation-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 300px;
    }

    .gw-wall-tile {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
}

.dynamic-booking-wrapper,
.dynamic-booking-wrapper *,
.view-button,
.bookly-form-button,
.bookly-appointment-form-button {
    opacity: 1 !important;
    visibility: visible !important;
}

.dynamic-booking-wrapper .bookly-booking-button,
.dynamic-booking-wrapper .bookly-appointment-booking-button,
.dynamic-booking-wrapper div[class*="bookly-form"] button:not([class*="day"]):not([class*="calendar"]):not([class*="picker"]):not([class*="arrow"]):not([class*="month"]):not([class*="year"]),
.dynamic-booking-wrapper button:not([class*="day"]):not([class*="calendar"]):not([class*="picker"]):not([class*="arrow"]):not([class*="month"]):not([class*="year"]),
.dynamic-booking-wrapper input[type="submit"],
.view-button,
.bookly-form-button,
.bookly-appointment-form-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 0 !important;
    /* Removes fixed constraint */
    background: var(--brand-gold-light) !important;
    /* Standard Gold */
    border: none !important;
    padding: 15px !important;
    text-transform: none !important;
    letter-spacing: 2px !important;
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    font-family: var(--font-primary) !important;
    cursor: pointer !important;
    transition: 0.3s ease !important;
    text-align: center !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

/* NO HOVER COLOR SHIFT (Stay Gold) */
.dynamic-booking-wrapper .bookly-booking-button:hover,
.dynamic-booking-wrapper button:not([class*="day"]):not([class*="calendar"]):not([class*="picker"]):not([class*="arrow"]):not([class*="month"]):not([class*="year"]):hover,
.bookly-appointment-booking-button:hover {
    background: var(--brand-gold-light) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Modal Positioning Fix */
.bookly-modal,
.bookly-form-overlay {
    padding-top: 80px !important;
}

.bookly-modal-inner {
    margin-top: 0 !important;
    transform: translateY(0) !important;
}

/* --- 2. HERO SLIDER MODULE (ISO-SCOPED) --- */
.hero-peek-carousel { 
    position: relative !important; 
    width: 100vw !important; 
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    height: 65vh; /* Proportional balance for 'Great Wedding...' visibility */
    min-height: 400px; 
    overflow: hidden; 
    background: var(--brand-white);
    margin-top: 0 !important; 
    border: none !important;
    box-sizing: border-box !important;
}
.hero-peek-track { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    overflow: visible; 
}
.hero-peek-track::-webkit-scrollbar { display: none; }

.hero-peek-slide { 
    position: absolute; 
    top: 0;
    left: 50%;
    transform: translateX(-50%) scale(0.7);
    width: 75vw; 
    height: 100%; 
    opacity: 0; 
    visibility: hidden;
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

.hero-peek-slide.active { 
    opacity: 1; 
    visibility: visible;
    transform: translateX(-50%) scale(1);
    z-index: 50;
}

.hero-peek-slide.prev {
    opacity: 0.6; /* Tier 1 Peek */
    visibility: visible;
    transform: translateX(-110%) scale(0.85); /* 60% Peek, 40% Overlap */
    z-index: 20;
}

.hero-peek-slide.next {
    opacity: 0.6; /* Tier 1 Peek */
    visibility: visible;
    transform: translateX(10%) scale(0.85); /* 60% Peek, 40% Overlap */
    z-index: 20;
}

.hero-peek-slide.far-prev {
    opacity: 0.3; /* Tier 2 Peek */
    visibility: visible;
    transform: translateX(-170%) scale(0.7); /* 60% of S2 Peek, 40% behind S1 */
    z-index: 15;
}

.hero-peek-slide.far-next {
    opacity: 0.3; /* Tier 2 Peek */
    visibility: visible;
    transform: translateX(70%) scale(0.7); /* 60% of S2 Peek, 40% behind S1 */
    z-index: 15;
}

.hero-peek-img { 
    display: block !important; 
    width: auto !important; 
    max-width: 100% !important; 
    height: auto !important; 
    max-height: 100% !important; 
    object-fit: contain !important; 
    margin: 0 auto !important; 
    border: none !important; 
    outline: none !important;
    box-shadow: none !important;
}

.hero-peek-caption-stable { 
    position: absolute; 
    bottom: 60px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 1100px; /* Expanded cinematic width */
    max-width: 95vw; /* Responsive safety */
    min-height: 280px; 
    padding: 50px 80px; 
    background: rgba(0, 0, 0, 0.65); 
    backdrop-filter: blur(12px); 
    border-radius: 12px; 
    text-align: center; 
    opacity: 1 !important; 
    transition: opacity 0.4s; 
    z-index: 100;
    border: none !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.hero-peek-title { 
    font-family: var(--font-script) !important; 
    color: var(--brand-gold-light) !important; 
    font-size: 3.5rem !important; 
    margin: 0 0 15px 0 !important; 
    line-height: 1.1 !important;
    /* Removed white-space: nowrap to allow for wider cinematic titles */
}

.hero-peek-subtitle { 
    color: #fff; 
    text-transform: uppercase; 
    letter-spacing: 4px; 
    font-size: 0.85rem !important; /* Rigid font size */
    margin: 0 0 25px 0 !important; 
    opacity: 0.85;
    max-width: 100%;
}

.hero-peek-cta { 
    display: inline-block; 
    border: 1px solid var(--brand-gold-light); 
    color: var(--brand-gold-light); 
    padding: 12px 35px; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-size: 0.75rem !important; 
    letter-spacing: 2px;
    font-weight: 700;
    transition: all 0.3s ease;
}


.gw-global-grid-wrapper {
    width: 100%;
    margin: 0 auto;
    overflow: visible !important;
}

/* --- 3. SERVICES GRID MODULE (GRID-SCOPED) --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 40px;
    row-gap: 60px;
    width: 100%;
    padding: 0;
}

/* Unbox Gutenberg Wrapper so cards fill grid cells correctly */
.wp-block-gw-single-service { display: contents !important; }
.wp-block-gw-single-service > div { display: contents !important; }

/* Confine the Gutenberg block wrapper to ensure visual parity with the services template */
.wp-block-gw-service-grid {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.service-card-link { display: block !important; width: 100% !important; text-decoration: none !important; height: 100%; }
.service-card { width: 100% !important; background: #fff; border: 8px solid var(--brand-gold-light); display: flex; flex-direction: column; }
.service-card-image { width: 100% !important; aspect-ratio: 1/1 !important; border: none !important; background: #f9f9f9; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.service-card-image img { object-fit: contain !important; max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; }

.investment-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 160px;
    z-index: 100;
}

.investment-summary-box {
    background: #fbfbfb;
    border: 1px solid #f0f0f0;
    padding: 20px;
    margin: 20px 0;
}

.investment-summary-box span:first-child {
    font-weight: 500;
    opacity: 0.7;
}

.investment-summary-box span:last-child {
    font-weight: 700;
    letter-spacing: 0.5px;
}

.service-card {
    position: relative;
    background: var(--brand-white);
    border: var(--gold-frame-border) solid var(--brand-gold-light);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    transition: 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
    padding-bottom: 25px;
    height: 100%;
    min-height: 520px;
    overflow: hidden; /* Removed !important to allow flexibility if needed */
    border-radius: 0 !important;
}

.service-card:hover {
    transform: translateY(-12px);
    box-shadow: var(--shadow-deep);
    z-index: 100;
}

.service-card-ribbon {
    position: absolute;
    top: 20px;
    right: -35px;
    width: 150px;
    text-align: center;
    background: #630000 !important; /* Force Brand Crimson */
    color: #fff !important;
    padding: 5px 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    transform: rotate(45deg) !important;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.investment-plaque .investment-savings-ribbon {
    background: #630000 !important; /* Force Brand Crimson */
    color: #fff !important;
    z-index: 100 !important;
    position: absolute;
    top: 20px;
    right: -65px;
    width: 250px;
    padding: 10px 0;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    transform: rotate(45deg);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.service-card-ribbon span {
    display: block;
    filter: brightness(1.2);
}

/* THE MEDALLION FORMAT (High Fidelity) */
.service-card-image {
    width: 100%;
    margin: 0 auto 25px;
    position: relative;
    border-radius: 0 !important; /* Reset to square container to fill card width */
    overflow: hidden;
    aspect-ratio: 1/1 !important;
    border: none !important; /* Kill the double border */
    box-shadow: none !important;
    background: transparent;
}

.service-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

/* REMOVED: High Specificity Reset that was destroying the circles */

/* Redundant block removed */

.service-card-content {
    padding: 0 30px;
    text-align: center;
}

.service-card-title {
    font-family: var(--font-script) !important;
    font-weight: normal !important;
    font-size: var(--font-size-h2) !important;
    color: var(--brand-accent) !important;
    margin: 0 0 15px 0 !important;
    white-space: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.5rem;
    text-align: center;
    text-transform: none !important;
}

/* PRICE BLOCK (GOLD RESTORED) */
.service-card-price {
    background: var(--brand-gold-light);
    padding: 22px 10px;
    border: none;
    margin-bottom: 30px;
    color: var(--brand-black);
    text-align: center;
    position: relative;
    border-bottom: 3px solid rgba(0, 0, 0, 0.1);
}

.service-card-price span {
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--brand-black);
    letter-spacing: 1px;
    font-family: var(--font-primary);
}

.service-card-price.is-free {
    background: var(--brand-gold-light);
}

.service-card-price.is-free span {
    color: var(--brand-black) !important;
    font-size: 1.25rem;
}

.duration-label,
.service-duration-text {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--brand-gold-text);
    margin: 5px 0 15px;
    font-weight: 700;
    text-align: center;
}

.service-card-price .duration-label {
    display: none !important;
}

/* Safeguard against transition */

/* Bullet Lists */
.gw-bullet-list,
.card-included-items {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    text-align: left;
}

.gw-bullet-list li,
.card-included-items li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--brand-text);
}

.gw-bullet-list li::before,
.card-included-items li::before {
    content: '✵';
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: var(--brand-gold-light);
}

/* --- 4. ABOUT PAGE PORTRAIT FRAME (SPECIFICITY BOOST) --- */
.page-template-page-about .portrait-frame {
    position: relative !important;
    border: var(--gold-frame-border) solid var(--brand-gold-light) !important;
    background: var(--brand-white) !important;
    padding: 15px !important;
    box-shadow: var(--shadow-deep) !important;
    transform: rotate(-3deg) !important;
    transition: 0.5s ease;
    display: block !important;
}

.page-template-page-about .portrait-frame:hover {
    transform: rotate(0deg) !important;
}

.page-template-page-about .portrait-frame img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    filter: sepia(0.1);
}

.page-template-page-about .frame-plaque {
    position: absolute !important;
    bottom: -20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: var(--brand-gold-light) !important;
    color: var(--brand-white) !important;
    padding: 8px 30px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    white-space: nowrap !important;
    z-index: 50 !important;
}

/* --- 5. EDITORIAL BLOCKS (Z-PATTERN FULL FRAME - ID NUKE) --- */

body #primary .gw-z-pattern,
main#primary .gw-z-pattern,
.gw-z-pattern {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important; /* Children stretch to same height */
    width: 100% !important;          /* Explicitly fill the editorial column */
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 40px !important;
    padding: 40px 0 !important;
}

/* Image wrapper — shrinks to actual img width so text column sits immediately adjacent.
   flex: 0 0 auto means the div is sized by its content (the img), not a fixed %. */
body #primary .gw-z-image,
.gw-z-image {
    flex: 0 0 auto !important;   /* Shrink-wrap the actual image width */
    max-width: 50% !important;   /* Cap: image can't dominate more than half the row */
    min-width: 0 !important;
    border: none !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    display: block !important;   /* Simple block — no flex needed when div = img size */
}

/* Gold frame — natural sizing, no letterboxing */
.gw-z-image img {
    border: 2px solid var(--brand-gold-light) !important;
    box-shadow: none !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 50vh !important;
    display: block !important;
    background: var(--brand-bg);
    box-sizing: border-box !important;
}

body #primary .gw-z-content,
main#primary .gw-z-content,
.gw-z-content {
    flex: 1 !important;
    min-width: 0 !important;
    background: var(--brand-white) !important;
    padding: 30px 40px !important;
    box-shadow: none !important;
    margin-left: 0 !important;
    z-index: 10 !important;
    position: relative !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

body #primary .gw-z-pattern.is-right {
    flex-direction: row-reverse !important;
}

/* is-right: no extra alignment needed — div shrinks to img width,
   so the img naturally sits at the right edge via row-reverse */

body #primary .gw-z-pattern.is-right .gw-z-content,
.gw-z-pattern.is-right .gw-z-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* --- 6. GALLERY WALL TRIO (EDITORIAL GRID - ID NUKE) --- */
body #primary .gw-trio-gallery-wrapper,
main#primary .gw-trio-gallery-wrapper,
.gw-trio-gallery-wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    margin-top: 80px !important;
    margin-bottom: 80px !important;
    padding: 0 10vw !important; /* 10-80-10 Full Width Layout Constraint */
    box-sizing: border-box !important;
}

body #primary .gw-trio-gallery,
main#primary .gw-trio-gallery,
.gw-trio-gallery {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Prevent column fallback on desktop */
    gap: 20px !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 55vh !important; /* Relative scaling aspect ratio for editorial layout */
    min-height: 400px !important;
}

body #primary .gw-trio-main,
.gw-trio-main {
    flex: 0 0 48% !important;
}

body #primary .gw-trio-side,
.gw-trio-side {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

body #primary .gw-trio-top,
body #primary .gw-trio-bottom,
.gw-trio-top,
.gw-trio-bottom {
    flex: 1 !important;
    overflow: hidden !important;
}

.gw-trio-main img,
.gw-trio-top img,
.gw-trio-bottom img {
    border-radius: 0 !important;
    border: 3px solid var(--brand-gold-light, #C5A059) !important; /* Elegant Fine Gold Border */
    box-shadow: var(--shadow-soft) !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* --- 7. SERVICE CARDS RECTANGULAR RESET (ID NUKE) --- */
#primary .services-grid .service-card-image,
#primary .services-grid .service-card-image img,
.service-card .service-card-image,
.service-card .service-card-image img {
    border-radius: 0 !important;
    aspect-ratio: 1/1 !important;
    overflow: hidden !important;
}

@media (max-width: 1024px) {
    /* Stack Z-pattern vertically; container class handles 80% width already */
    body #primary .gw-z-pattern {
        flex-direction: column !important;
        margin-top: 40px !important;
        margin-bottom: 40px !important;
        gap: 20px !important;
    }

    /* is-right: also column on tablet/mobile — image always above text */
    body #primary .gw-z-pattern.is-right {
        flex-direction: column !important;
    }

    /* Override desktop flex size — must beat body #primary .gw-z-image specificity */
    body #primary .gw-z-pattern .gw-z-image {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        order: -1 !important; /* Image always first regardless of is-right */
    }

    body #primary .gw-z-pattern .gw-z-image img {
        max-height: 55vh !important;
        width: 100% !important;
    }

    body #primary .gw-z-pattern .gw-z-content {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 10px !important;
        border: none !important;
        box-shadow: none !important;
    }
}

/* 
 * BOUTIQUE FOOTER MANDATE (NON-NEGOTIABLE):
 * 1. STRUCTURE: Strict 3-column grid with vertical dividers separating Legal, Branding, and Contact.
 * 2. SPACING: Ultra-compact vertical flow. No excessive margins above 'Follow the Story'.
 * 3. SOCIAL: Official SVG icons only, colored in Boutique Gold with high-contrast hover effects.
 * 4. WHATSAPP: Permanent green CTA button anchored in the right column.
 */

.site-footer {
    background: #1a1a1a;
    color: var(--brand-white);
    padding: 30px 0 20px; /* Squeezed vertically */
    margin-top: 40px !important; /* Half of previous height for tighter transition */
    font-size: 0.9rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    width: var(--editorial-width);
    max-width: none !important;
    margin: 0 auto;
    gap: 40px; /* Reduced gap */
    align-items: start;
}

.footer-col-left,
.footer-col-right {
    padding-top: 10px;
}

.footer-col-center {
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0 40px;
}

/* Footer Branding */
.footer-branding h3 {
    font-size: 2.2rem;
    color: var(--brand-gold-light) !important;
    margin: 0 0 20px 0;
    font-family: var(--font-script) !important;
    font-weight: normal !important;
}

.footer-branding p {
    font-size: 0.8rem;
    line-height: 1.5; /* Cap at 1.5 per user spacing rules */
    opacity: 0.6;
    letter-spacing: 0.5px;
    margin-bottom: 0 !important; /* Removed space below tagline */
}

/* Footer Legal & Nav Lists */
.footer-legal-list,
.footer-nav-list {
    list-style: none !important;
    padding: 0;
    margin: 0;
}
.footer-legal-list li {
    list-style-type: none !important;
    background: none !important;
    padding-left: 0 !important;
}
.footer-legal-list li::marker,
.footer-legal-list li::before {
    content: none !important;
    display: none !important;
}

.footer-nav-list li {
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
    font-size: 0.8rem;
}

.footer-legal-list li {
    margin-bottom: 12px;
    font-size: 0.8rem;
}

.footer-nav-list li::before {
    content: '✧';
    position: absolute;
    left: 0;
    color: var(--brand-gold-light);
    font-size: 0.7rem;
    top: 2px;
}

.footer-legal-list a,
.footer-nav-list a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.footer-legal-list a:hover,
.footer-nav-list a:hover {
    color: var(--brand-gold-light);
}

/* Footer Contact */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.82rem;
}

.contact-row {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5; /* Cap at 1.5 per user spacing rules */
}

.contact-row a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.contact-row a:hover {
    color: var(--brand-gold-light);
}

/* WhatsApp Button */
.whatsapp-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #25D366;
    color: #fff;
    padding: 8px 18px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    margin-top: 8px;
    transition: opacity 0.3s;
}

.whatsapp-link:hover {
    opacity: 0.85;
    color: #fff;
}

.footer-social {
    margin-top: 0 !important;
    text-align: center !important;
    border-top: none !important;
    padding-top: 10px !important; /* Minimal breathing room */
}

.footer-social-label {
    font-size: 0.65rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.5;
    margin-bottom: 12px;
}

.footer-social-icons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(197, 160, 89, 0.4);
    border-radius: 50%;
    color: var(--brand-gold-light);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-social-link svg {
    fill: var(--brand-gold-light);
    transition: fill 0.3s ease;
}

.footer-social-link:hover {
    background: var(--brand-gold-light);
    border-color: var(--brand-gold-light);
}

.footer-social-link:hover svg {
    fill: var(--brand-black); /* High contrast on hover */
}

/* Footer Meta */
.footer-meta {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    margin-top: 40px;
    text-align: center;
    font-size: 0.68rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.65;
    width: var(--editorial-width);
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* --- 7. FAQ ACCORDION --- */
.faq-trigger {
    cursor: pointer;
    padding: 18px 20px;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
    padding-right: 50px;
    font-family: var(--font-primary);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand-text);
    letter-spacing: 0.5px;
    transition: color 0.3s;
    background: var(--brand-white);
    user-select: none;
}

.faq-trigger:hover {
    color: var(--brand-accent);
}

.faq-trigger::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--brand-gold-light);
    transition: transform 0.3s;
}

.faq-trigger.active::after {
    content: '−';
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-answer.open {
    max-height: 600px;
}

.faq-answer>* {
    padding: 20px 20px 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* --- 8. PAGE HERO BANNER (ALL PAGES) --- */
.page-hero-banner {
    width: 100%;
    height: 38vh;
    min-height: 220px;
    background-size: cover;
    background-position: center top;
    position: relative;
    overflow: hidden;
}

.page-hero-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.45) 100%);
}

.page-hero-banner-inner {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-hero-banner-title {
    font-family: var(--font-script);
    font-size: 3.5rem;
    color: var(--brand-white);
    text-align: center;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
    font-weight: normal;
    border: 1px solid rgba(197, 160, 89, 0.6);
    padding: 20px 60px;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4px);
}


/* --- 9. ABOUT ME LAYOUT (50/50 SPLIT) --- */
.about-grid {
    display: flex;
    gap: 80px;
    align-items: flex-start;
    margin-bottom: 100px;
}

.about-image {
    flex: 0 0 32%;
}

.about-content {
    flex: 1;
}

.about-sig {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 30px;
}

/* --- 10. INVESTMENT SIDEBAR (SERVICE DETAIL) --- */
.investment-sidebar {
    position: sticky;
    top: 40px;
}

@media (max-width: 1024px) {
    .investment-sidebar {
        flex: none !important;
        width: 100% !important;
        margin-top: 40px !important;
    }
}

@media (max-width: 1024px) {
    .investment-sidebar {
        flex: none !important;
        width: 100% !important;
        margin-top: 40px !important;
    }
}

.plaque-rendering-context {
    margin: 40px auto;
}

.wp-block-column .plaque-rendering-context {
    margin-top: 0 !important;
}

.investment-plaque {
    background: var(--brand-white);
    border: 2px solid var(--brand-gold-light);
    padding: 40px;
    text-align: center;
    box-shadow: var(--shadow-deep);
    position: relative;
    overflow: hidden;
}

.investment-plaque .subtitle {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.6;
    margin-bottom: 8px;
    font-weight: 700;
}

.investment-plaque .price-wrap {
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.investment-plaque .price-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.6;
    margin-bottom: 2px;
    font-weight: 700;
}

.investment-plaque .price-val {
    font-size: 2.8rem;
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--brand-black);
    line-height: 1;
}

.investment-summary-box {
    background: rgba(0, 0, 0, 0.02);
    padding: 12px;
    margin-top: 15px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    opacity: 0.8;
}

.summary-row .val {
    font-weight: 700;
}

.summary-row.is-savings {
    color: var(--brand-crimson);
    margin-bottom: 0;
}

.investment-plaque .duration-val {
    margin-bottom: 15px;
    font-size: 0.65rem;
    letter-spacing: 1px;
    font-weight: 700;
    opacity: 0.7;
}

.investment-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-black {
    background: var(--brand-black);
    color: var(--brand-white);
    padding: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.75rem;
    transition: 0.3s;
    text-align: center;
    border: none;
}

.btn-black.is-accent {
    background: var(--brand-accent);
}

.btn-black:hover {
    background: var(--brand-gold-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

/* High-Impact Gold Button (CTA/Enquiry) */
.btn-black-gold {
    background: var(--brand-gold-light);
    color: var(--brand-white);
    padding: 16px 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.8rem;
    transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-align: center;
    border: none;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(197, 160, 89, 0.3);
    position: relative;
}

.btn-black-gold::after {
    content: ' \2709';
    opacity: 0.7;
    margin-left: 10px;
    font-size: 1rem;
    vertical-align: middle;
}

.btn-black-gold:hover {
    background: var(--brand-black);
    color: var(--brand-gold-light);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}


/* --- 11. COMPONENT CARDS (SUB-SERVICES) --- */
.detailed-components-section {
    margin-top: 40px !important; /* Reduced from 80px to save space */
    padding-top: 30px !important; /* Reduced from 60px */
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.component-grid,
.components-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important; /* Tighter spacing */
}

.component-card {
    display: flex !important;
    align-items: center !important;
    background: var(--brand-white) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 10px 14px !important; /* Snug padding to make boxes much smaller */
    box-shadow: none !important;
    transition: border-color 0.2s ease !important; /* Clean static transition for click signifier */
}

.component-card:hover {
    border-color: var(--brand-gold-light, #C5A059) !important;
    box-shadow: none !important; /* Completely removed hover box-shadow animations */
    transform: none !important; /* No floating scale */
}

.coin-icon-wrap {
    flex: 0 0 32px !important; /* Tiny inline icon size */
    width: 32px !important;
    height: 32px !important;
    border-radius: 0 !important; /* Zero roundness */
    border: 1px solid var(--brand-gold-light, #C5A059) !important;
    margin-right: 12px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.coin-icon-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.component-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.component-info h4 {
    font-family: var(--font-primary, 'Lato', sans-serif) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important; /* Significantly smaller, structured title */
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    color: var(--brand-black, #111111) !important;
}

.component-info p {
    margin: 3px 0 0 0 !important;
    font-size: 0.75rem !important; /* Smaller description copy */
    opacity: 0.7 !important;
    line-height: 1.3 !important;
}

/* Price tags/inclusion labels inside component info */
.component-info > div {
    font-size: 0.65rem !important; /* Tighter metadata font */
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--brand-gold-light, #C5A059) !important;
    font-weight: 700 !important;
    margin-top: 2px !important;
    line-height: 1.0 !important;
}

/* --- 11B. FEATURED AND NATIVE SERVICE GRIDS (SUB-SERVICES IN PACKAGE DETAILS) --- */
.featured-shortcode-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
    max-width: 100% !important;
    margin: 30px 0 !important;
}

.page-template-page-service-detail .service-card-link,
.components-grid .service-card-link,
.featured-shortcode-grid .service-card-link {
    max-width: 100% !important;
    margin: 0 !important;
}

.page-template-page-service-detail .components-grid .container,
.page-template-page-service-detail .featured-shortcode-grid .container,
.components-grid .container,
.featured-shortcode-grid .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.page-template-page-service-detail .service-card,
.components-grid .service-card,
.featured-shortcode-grid .service-card {
    display: flex !important;
    flex-direction: row !important; /* Horizontal layout inline */
    align-items: flex-start !important; /* Align icon and header to the top row */
    background: var(--brand-white) !important;
    border: 2px solid var(--brand-gold-light, #C5A059) !important; /* Fine Gold Frame */
    padding: 12px 18px !important; /* Snug padding to keep box small */
    min-height: 0 !important; /* Remove standard huge vertical limits */
    height: auto !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease !important;
}

/* Static hover behavior - clickability without float/animations */
.page-template-page-service-detail .service-card:hover,
.components-grid .service-card:hover,
.featured-shortcode-grid .service-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--brand-black, #111111) !important;
}

/* Sizing and alignment of the medallion coin */
.page-template-page-service-detail .service-card-image,
.components-grid .service-card-image,
.featured-shortcode-grid .service-card-image {
    flex: 0 0 50px !important; /* Tiny inline icon size */
    width: 50px !important;
    height: 50px !important;
    aspect-ratio: 1/1 !important;
    margin: 0 15px 0 0 !important; /* Push text right, no bottom margin */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.page-template-page-service-detail .service-card-image img,
.components-grid .service-card-image img,
.featured-shortcode-grid .service-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Keep medallion aspect ratio perfect */
}

/* Content layout next to the coin */
.page-template-page-service-detail .service-card-content,
.components-grid .service-card-content,
.featured-shortcode-grid .service-card-content {
    flex: 1 !important;
    padding: 0 !important; /* Strip default vertical padding */
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* Header line (Title + Price inline next to Icon) */
.page-template-page-service-detail .service-card-header,
.components-grid .service-card-header,
.featured-shortcode-grid .service-card-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; /* Vertically center title and price */
    flex-wrap: wrap !important; /* Wrap on smaller screens */
    gap: 12px !important;
    margin-bottom: 6px !important;
    width: 100% !important;
}

/* Smaller inline title next to icon */
.page-template-page-service-detail .service-card-title,
.components-grid .service-card-title,
.featured-shortcode-grid .service-card-title {
    font-family: var(--font-script) !important;
    font-weight: normal !important;
    font-size: var(--font-size-h2) !important;
    color: var(--brand-accent) !important;
    margin: 0 !important;
    height: auto !important; /* Remove large vertical text container height */
    line-height: 1.25 !important;
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Small, clean price labels */
.page-template-page-service-detail .service-card-price,
.components-grid .service-card-price,
.featured-shortcode-grid .service-card-price {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    text-align: left !important;
}

.page-template-page-service-detail .service-card-price span,
.components-grid .service-card-price span,
.featured-shortcode-grid .service-card-price span {
    font-size: 0.72rem !important;
    color: var(--brand-gold-light, #C5A059) !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.page-template-page-service-detail .service-card-price .duration-label,
.components-grid .service-card-price .duration-label,
.featured-shortcode-grid .service-card-price .duration-label {
    display: none !important;
}

/* Small description copy */
.page-template-page-service-detail .service-card-inclusions,
.components-grid .service-card-inclusions,
.featured-shortcode-grid .service-card-inclusions {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    color: #555555 !important;
    opacity: 0.9 !important;
    text-align: left !important;
}

.page-template-page-service-detail .service-card-inclusions p,
.components-grid .service-card-inclusions p,
.featured-shortcode-grid .service-card-inclusions p {
    margin: 0 0 5px 0 !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
}

.page-template-page-service-detail .service-card-inclusions p:last-child,
.components-grid .service-card-inclusions p:last-child,
.featured-shortcode-grid .service-card-inclusions p:last-child {
    margin-bottom: 0 !important;
}

.page-template-page-service-detail .service-card-ribbon,
.components-grid .service-card-ribbon,
.featured-shortcode-grid .service-card-ribbon {
    display: none !important; /* Keep layout modest */
}

@media (max-width: 768px) {
    .featured-shortcode-grid,
    .components-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 1024px) {

    .container,
    .gw-global-grid-wrapper,
    .home-intro.container {
        width: 100% !important;
        padding: 0 5%;
    }



    .services-grid,
    .component-grid,
    .components-grid,
    .footer-grid,
    .gw-z-pattern,
    .about-grid {
        grid-template-columns: 1fr !important;
        flex-direction: column;
        width: 100% !important;
    }

    .gw-z-image,
    .gw-z-content {
        flex: 1 1 auto;
        width: 100%;
        margin: 0;
    }

    .gw-z-content {
        padding: 40px;
    }

    .portrait-frame {
        transform: rotate(0);
    }
}

/* ----------------------------------------------------------------------------------- */
/* 9. CUSTOM EDITORIAL BLOCKS (BLACK & GOLD) */
/* ----------------------------------------------------------------------------------- */

.gw-chapter-break {
    text-align: center;
    padding: 100px 0;
    max-width: 800px;
    margin: 0 auto;
}

.gw-gold-sep {
    border: 0;
    border-top: 2px solid var(--brand-gold-light);
    width: 60px;
    margin: 0 auto 30px;
}

.gw-chapter-title {
    font-family: var(--font-script);
    font-size: 3.5rem;
    color: var(--brand-gold-light);
    font-weight: normal;
    letter-spacing: 2px;
    margin: 0;
}

.gw-cta-plaque {
    background: var(--brand-black);
    border: 2px solid var(--brand-gold-light);
    color: var(--brand-white);
    padding: 80px 40px;
    text-align: center;
    margin: 60px auto;
    max-width: 1000px;
}

.gw-cta-plaque h3 {
    font-family: var(--font-primary);
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--brand-gold-light);
    margin-bottom: 20px;
}

.gw-cta-plaque p {
    font-size: 1.1rem;
    opacity: 0.8;
    margin-bottom: 40px;
}

.btn-black-gold {
    padding: 18px 45px;
    background: var(--brand-gold-light);
    color: var(--brand-white) !important;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: inline-block;
    border: 2px solid var(--brand-gold-light);
    font-size: 0.8rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-black-gold::after {
    content: ' \2709';
    font-size: 1.1rem;
    vertical-align: middle;
    margin-left: 8px;
}

.btn-black-gold:hover {
    background: var(--brand-black);
    border-color: var(--brand-black);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.gw-trust-bar {
    background: var(--brand-black) !important;
    padding: 30px 0;
    border-top: 1px solid rgba(197, 160, 89, 0.15);
    border-bottom: 1px solid rgba(197, 160, 89, 0.15);
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;
    display: block !important;
    z-index: 5;
    clear: both;
}

.gw-trust-bar p {
    color: var(--brand-gold-light);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    margin: 0 auto;
    font-weight: 700;
    max-width: 80%;
}

.gw-usps-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    padding: 16px 0;
}

.gw-usps-block.container {
    padding-top: 5px;
    padding-bottom: 5px;
}

.gw-block-main-title {
    margin-bottom: 20px !important;
}

.gw-usp-col {
    text-align: center;
}

.gw-usp-col h4 {
    font-family: var(--font-primary);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--brand-gold-light);
    margin-bottom: 10px;
}

.gw-usp-col p {
    font-size: 0.9rem;
    line-height: 1.5; /* Cap at 1.5 per user spacing rules */
    opacity: 0.7;
    margin: 0;
}

.gw-process-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    padding: 80px 0;
    border-top: 1px solid #eee;
}

.gw-process-col {
    position: relative;
}

.step-num {
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--brand-gold-light);
    display: block;
    margin-bottom: 15px;
    font-family: var(--font-primary);
    opacity: 0.6;
}

.gw-process-col h4 {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1rem;
    margin-bottom: 15px;
}

/* Universal Hover Animation Extension */
.gw-usp-col,
.gw-process-col,
.gw-z-pattern,
.btn-black-gold {
    transition: 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.gw-usp-col:hover,
.gw-process-col:hover {
    transform: translateY(-10px);
}

.btn-black-gold:hover {
    transform: translateY(-3px) scale(1.02);
}

.gw-process-col p,
.gw-usp-col p,
.gw-z-content p {
    font-family: var(--font-primary) !important;
}

/* Editorial Titles */
.gw-block-main-title {
    font-family: var(--font-primary) !important;
    font-size: 2.2rem !important; /* Elegant section title sizing */
    color: var(--brand-accent) !important;
    text-align: center;
    margin-bottom: 40px;
    font-weight: normal !important;
}

/* --- COMPONENT: BOUTIQUE GOLD BOX --- */
.gw-editorial-gold-box {
    background: var(--brand-white) !important;
    border: 2px solid var(--brand-gold-light) !important;
    padding: 40px !important; /* Increased for breathing room */
    box-shadow: 0 15px 45px rgba(189, 161, 114, 0.15) !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    border-radius: 2px;
}

.gw-editorial-gold-box:hover {
    box-shadow: var(--shadow-deep);
}

.gw-process-block.gw-atomic-check-wrap {
    margin: 20px auto;
    width: 100%;
    display: flex;
    justify-content: center;
}

.is-atomic-check.gw-editorial-gold-box {
    max-width: 500px;
    margin: 0 auto !important;
    text-align: center !important;
}

.atomic-title {
    margin-top: 0;
    font-family: var(--font-primary);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--brand-accent);
    margin-bottom: 8px !important;
}

.atomic-desc {
    margin-bottom: 15px;
    opacity: 0.8;
    font-size: 0.95rem;
    line-height: 1.5;
}

.gw-availability-box-inner {
    display: inline-block;
    width: 100%;
    max-width: 340px;
    border-top: 1px solid rgba(197, 160, 89, 0.15);
    padding-top: 15px;
}

.gw-service-looking-for {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--brand-accent);
    margin-bottom: 8px;
    opacity: 0.6;
}

.gw-input-with-icon {
    position: relative;
    margin-bottom: 12px;
}

.gw-atomic-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

@media (max-width: 600px) {
    .gw-editorial-gold-box {
        padding: 25px 20px;
    }
}


/* --- 10. NATIVE CONTROL CONVERTED BLOCKS --- */

.gw-hero-bleed {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 150px 20px;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gw-hero-bleed-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.gw-hero-bleed-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.gw-hero-bleed h2 {
    color: #fff !important;
    font-size: 3.5rem;
    font-weight: normal;
}

.gw-storyteller-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    margin: 40px auto;
}

.gw-story-item img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
}

.gw-testimonial-quote-block {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    text-align: center;
}

.gw-testimonial-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1;
    pointer-events: none;
}

.gw-testimonial-inner {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

.gw-testimonial-inner blockquote {
    border: none;
    padding: 0;
    margin: 0;
    color: #fff;
}

.gw-polaroid-frame {
    background: #fff;
    padding: 5% 5% 15% 5%;
    box-shadow: var(--shadow-deep);
    margin: 40px auto;
    max-width: 500px;
}

.gw-cta-fullwidth {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 120px 20px;
    text-align: center;
}

.gw-cta-fullwidth-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1;
    pointer-events: none;
}

.gw-cta-fullwidth-content {
    position: relative;
    z-index: 2;
    color: #fff;
}

.gw-cta-fullwidth h2 {
    color: var(--brand-gold-light) !important;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.gw-cta-fullwidth p {
    color: #ccc;
    max-width: 700px;
    margin: 0 auto 40px;
}

.gw-list-box {
    padding: 30px;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: var(--brand-white) !important;
    border: 2px solid var(--brand-gold-light) !important;
    box-shadow: var(--shadow-soft) !important;
}

.gw-list-box.is-style-highlights {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.gw-list-box.is-style-included {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.gw-list-box.is-style-perfect-for {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.gw-list-box h4 {
    font-family: var(--font-primary);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--brand-accent);
    margin-bottom: 25px;
    opacity: 0.9;
}

.gw-list-box p {
    font-size: 1.05rem;
    line-height: 1.5; /* Cap at 1.5 per user spacing rules */
    opacity: 0.8;
    margin-bottom: 25px;
}

/* --- DUAL COLUMN OVERVIEW (NEW) --- */
.gw-dual-column-overview {
    margin: 80px auto;
    border: none !important;
    padding: 0;
}

.gw-dual-column-row {
    display: flex;
    align-items: stretch !important;
    /* Force equal heights */
    position: relative;
    border: none !important;
}

.gw-dual-column-row>* {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.gw-dual-column-row>*:nth-child(2) {
    border: none !important;
}

@media (max-width: 900px) {
    .gw-dual-column-row {
        flex-direction: column;
    }

    .gw-dual-column-row>*:nth-child(2) {
        border: none !important;
    }

    .gw-list-box {
        padding: 40px 0;
    }
}

/* RE-ENFORCING LIST STYLES (GOLD ICONS) */
.is-style-gw-highlights,
.is-style-gw-included,
.is-style-gw-perfect-for {
    list-style: none !important;
    padding: 0 !important;
}

.is-style-gw-highlights li,
.is-style-gw-included li,
.is-style-gw-perfect-for li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    line-height: 1.5; /* Cap at 1.5 per user spacing rules */
    text-align: left;
}

.is-style-gw-highlights li:not(:empty)::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--brand-gold-light);
    font-weight: 700;
    font-size: 1rem;
}

.is-style-gw-included li:not(:empty)::before {
    content: '+';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--brand-gold-light);
    font-weight: 700;
    font-size: 1rem;
}

.is-style-gw-perfect-for li:not(:empty)::before {
    content: '◆';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--brand-gold-light);
    font-weight: 700;
    font-size: 0.8rem;
}

/* --- GW BULLET LISTS (Cards & Detail) --- */
.gw-bullet-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
}

.gw-bullet-list li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    line-height: 1.4;
    text-align: left;
    font-size: 0.95rem;
}

.gw-bullet-list li::before {
    content: '✳';
    /* The Editorial Star/Sun */
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--brand-gold-light);
    font-size: 1.2rem;
    line-height: 1;
}

/* Specific list tweaks */
.gw-bullet-list.is-inclusions {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
}

.gw-bullet-list.is-highlights {
    opacity: 0.85;
}

/* --- CONDENSED SUB-SERVICE GRID --- */
.condensed-service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.condensed-service-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 15px !important;
    padding: 12px 16px !important;
    text-align: left !important;
    min-height: 0 !important;
    height: auto !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.condensed-service-card * {
    text-align: left !important;
}

.condensed-service-card:hover {
    transform: none !important;
    border-color: var(--brand-black) !important;
}

.condensed-coin {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1.5px solid var(--brand-gold-light);
    overflow: hidden;
    flex-shrink: 0;
    background: #f9f9f9;
}

.condensed-coin img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 900px) {
    .condensed-service-grid {
        grid-template-columns: 1fr;
    }
}

/* --- BOOKLY BUTTON BRIDGE (3.8.7) --- */
.dynamic-booking-wrapper .bookly-booking-button,
.dynamic-booking-wrapper button:not([class*="day"]):not([class*="calendar"]):not([class*="picker"]):not([class*="arrow"]):not([class*="month"]):not([class*="year"]),
.dynamic-booking-wrapper input[type="submit"] {
    display: block !important;
    width: 100% !important;
    background: var(--brand-accent) !important;
    color: #fff !important;
    border: none !important;
    padding: 18px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    font-family: var(--font-primary) !important;
    cursor: pointer !important;
    transition: 0.3s ease !important;
    text-align: center !important;
    text-decoration: none !important;
}

.dynamic-booking-wrapper .bookly-booking-button:hover,
.dynamic-booking-wrapper button:not([class*="day"]):not([class*="calendar"]):not([class*="picker"]):not([class*="arrow"]):not([class*="month"]):not([class*="year"]):hover,
.dynamic-booking-wrapper input[type="submit"]:hover {
    background: var(--brand-gold-light) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

/* --- 12. BOUTIQUE MOBILE OVERHAUL (v4.5.0) --- */
@media (max-width: 1024px) {

    /* 1. Global Overflow & Stability */
    html,
    body {
        overflow-x: clip !important;
        position: relative;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    /* CORE RULE: 5-90-5 on Mobile (10-80-10 on Desktop) */
    .container,
    #primary,
    .site-main,
    .page-header,
    .header-focal-container,
    .gw-global-grid-wrapper,
    .home-intro.container {
        width: 90% !important;
        max-width: 90% !important;
        margin: 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Prevent double-squeezing on mobile: nested containers must be 100% of the 90% parent */
    #primary .container,
    .site-main .container,
    .container .container,
    #primary .site-main {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Z-pattern must NOT inherit any side padding — its children fill 100% of the block */
    .gw-z-pattern.container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 2. Grid Stacking Fixes */
    .services-grid,
    .featured-shortcode-grid,
    .component-grid,
    .components-grid,
    .footer-grid,
    .gw-usps-row,
    .gw-process-row,
    .gw-editorial-split,
    .gw-editorial-grid,
    .condensed-service-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Z-Pattern mobile: flex column, image-first, properly centered */
    .gw-z-pattern {
        display: flex !important;
        flex-direction: column !important;
        width: 80% !important;
        max-width: 80% !important;
        margin: 0 auto !important; /* Perfect centering */
        gap: 0 !important;
    }

    /* Force image to come before text regardless of is-right / is-left */
    .gw-z-pattern .gw-z-image {
        order: -1 !important;
        justify-content: center !important; /* Center the image instead of sticking to left/right */
        width: 100% !important;
    }

    .service-card {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. Hero Slider Refinement (tablet) */
    .hero-peek-carousel {
        height: 55vh !important;
        min-height: 380px !important;
        margin-top: 20px !important;
    }

    .hero-peek-caption-stable {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding: 40px 20px 90px !important;
        background: linear-gradient(to top, rgba(17, 17, 14, 0.85) 0%, rgba(17, 17, 14, 0.0) 100%) !important;
        backdrop-filter: none !important;
        border-radius: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }

    /* Scrollytelling Mobile Offsets — handled in the @media (max-width: 1024px) block below */

    /* 6. Pricing Mobile Adjustments */
    .service-card-price {
        padding: 15px 10px !important;
    }
    
    .service-card-price span {
        font-size: 1rem !important; /* Scale down heavily from 1.4rem on mobile */
    }

    .service-card-price.is-free span {
        font-size: 0.9rem !important;
    }

    /* Duplicate removed — admin-bar scrollytelling corrections live in the @media (max-width: 1024px) block */

    .hero-peek-title {
        font-size: 1.8rem !important;
        margin-bottom: 8px !important;
    }

    .hero-peek-subtitle {
        display: block !important;
        font-size: 0.65rem !important;
        opacity: 0.7;
        margin-bottom: 20px !important;
    }

    .hero-peek-cta {
        margin-bottom: 0 !important;
    }

    /* Caption padding handles spacing */

    /* Dedicated Nav Bar for Mobile */
    .hero-peek-nav {
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: rgba(17, 17, 14, 0.95) !important;
        padding: 15px 0 !important;
        border-top: 1px solid rgba(197, 160, 89, 0.2);
        width: 100% !important;
        border-radius: 0 !important;
        z-index: 50 !important;
    }

    .hero-peek-arrow {
        width: 35px !important;
        height: 35px !important;
        border-radius: 50% !important;
    }

    .hero-peek-dot {
        width: 6px !important;
        height: 6px !important;
    }

/* 4. Service Card Adjustments */
.service-card {
    margin-bottom: 20px;
}

.service-card-image {
    aspect-ratio: 16/9 !important;
}

.service-card-ribbon {
    font-size: 0.65rem !important;
    right: -45px !important;
    top: 20px !important;
    width: 180px !important;
    text-align: center !important;
    padding: 5px 0 !important;
}

/* 5. Typography Scaling */

.section-divider-title {
    font-size: 1.6rem !important;
    margin-top: 60px !important;
    margin-bottom: 30px !important;
}

.services-intro {
    font-size: 1rem !important;
    line-height: 1.5 !important; /* Cap at 1.5 per user spacing rules */
    margin-bottom: var(--margin-bottom-standard) !important;
}

/* 6. Z-Pattern mobile stack — applies globally below 1024px via earlier media query,
   and as base style for all sizes (mobile-first). Container class handles 80% width. */
body #primary .gw-z-pattern {
    flex-direction: column !important;
    display: flex !important;
    gap: 20px !important;
}

/* CRITICAL: is-right has specificity 31 (row-reverse), this must also be 31+ to win */
body #primary .gw-z-pattern.is-right {
    flex-direction: column !important; /* Force column on mobile — image always above text */
}

/* Image always appears first regardless of is-right/is-left */
body #primary .gw-z-pattern .gw-z-image {
    order: -1 !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: none !important;  /* Border lives on the img element */
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* Gold border directly on image — natural sizing, no letterbox white bars */
body #primary .gw-z-pattern .gw-z-image img {
    border: 2px solid var(--brand-gold-light) !important;
    max-height: 55vh !important;
    width: auto !important;       /* Natural width — no letterboxing */
    max-width: 100% !important;   /* Don't overflow container */
    height: auto !important;
    display: block !important;
    box-shadow: none !important;
    display: block !important;
}

body #primary .gw-z-pattern .gw-z-content {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 20px 0 !important;
    box-sizing: border-box !important;
    border: none !important;
    box-shadow: none !important;
}

/* 7. Trio Gallery Mobile Stack - Moved to 768px for better tablet experience */
/* Removed from 1024px block */

/* --- TABLET REFINEMENT (769px - 1024px): side-by-side, container handles 80% */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Restore side-by-side row on tablet */
    body #primary .gw-z-pattern {
        flex-direction: row !important;
        gap: 30px !important;
        align-items: center !important;
    }

    /* Restore row-reverse for is-right on tablet */
    body #primary .gw-z-pattern.is-right {
        flex-direction: row-reverse !important;
    }

    /* Restore 45% image on tablet */
    body #primary .gw-z-pattern .gw-z-image {
        order: unset !important;
        flex: 0 0 45% !important;
        max-width: 45% !important;
    }

    body #primary .gw-z-pattern.is-right .gw-z-image {
        order: unset !important;
    }

    .gw-z-content {
        flex: 1 !important;
        padding: 20px !important;
        margin: 0 !important;
    }
}

@media (max-width: 600px) {
    .hero-peek-track {
        height: 40vh !important;
    }

    .hero-peek-title {
        font-size: 1.6rem !important;
    }

    .hero-peek-cta {
        font-size: 0.6rem !important;
        padding: 6px 15px !important;
    }

    .hero-peek-nav {
        display: none !important;
    }

    /* Hide arrows on tiny screens, rely on swipe */
}

} /* END @media (max-width: 1024px) */


/* --- 14. ACTION STEP BLOCKS (The Journey Refactored) --- */
.gw-process-block {
    padding: 20px 0;
}

.gw-process-row {
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: stretch;
}

.gw-process-col {
    flex: 1;
    text-align: center;
    background: #fff;
    padding: 40px 30px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.gw-process-col:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-deep);
    border-color: var(--brand-gold-light);
}

.step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid var(--brand-gold-light);
    color: var(--brand-gold-light);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 25px;
    background: #fff;
}

.gw-process-col h4 {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    color: var(--brand-accent);
}

.gw-process-col p {
    font-size: 0.9rem;
    line-height: 1.5; /* Cap at 1.5 per user spacing rules */
    opacity: 0.7;
    margin-bottom: 0;
    flex-grow: 1;
}

.gw-step-action-wrap {
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 25px;
}

/* Availability Dialogue */
.gw-availability-check {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.gw-date-picker-input {
    width: 100%;
    max-width: 200px;
    text-align: center;
    border: 1px solid #ddd;
    padding: 12px;
    font-family: var(--font-primary);
    color: var(--brand-black);
    border-radius: 0;
}

.gw-avail-result {
    min-height: 20px;
    line-height: 1.4;
    color: var(--brand-accent);
}

.gw-avail-result.is-available {
    color: #2ecc71;
}

.gw-avail-result.is-tentative {
    color: #f39c12;
}

.gw-avail-result.is-busy {
    color: #e74c3c;
}

/* Responsive Actions */
@media (max-width: 1024px) {
    .gw-process-row {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    /* Prevent container overrides from breaking the layout width */
    body #primary .gw-trio-gallery-wrapper,
    main#primary .gw-trio-gallery-wrapper,
    .gw-trio-gallery-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        left: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }

    /* Force row layout and lock height to prevent vertical stack and text overrun */
    body #primary .gw-trio-gallery,
    main#primary .gw-trio-gallery,
    .gw-trio-gallery {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 10px !important; /* Elegant tighter gap on mobile */
        width: 100% !important;
        height: 35vh !important;
        min-height: 250px !important;
    }

    body #primary .gw-trio-main,
    .gw-trio-main {
        flex: 0 0 48% !important;
        width: 48% !important;
        max-width: 48% !important;
        display: block !important;
    }

    body #primary .gw-trio-side,
    .gw-trio-side {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important; /* Elegant tighter gap on mobile */
        width: auto !important;
        min-width: 0 !important;
    }
    
    body #primary .gw-trio-top,
    body #primary .gw-trio-bottom,
    .gw-trio-top,
    .gw-trio-bottom {
        flex: 1 !important;
        overflow: hidden !important;
        display: block !important;
    }
    
    .gw-trio-main img,
    .gw-trio-top img,
    .gw-trio-bottom img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    .gw-process-row {
        flex-direction: column;
        align-items: center;
    }

    .gw-process-col {
        width: 100%;
        max-width: 400px;
    }
}

/* Constrain Individual Service Cards Outside Grid */
.service-card-link {
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* But inside grid, let them fill the grid column */
.services-grid .service-card-link {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Atomic Availability Block (Horizontal Style) */
.gw-process-col.is-atomic-check {
    max-width: 800px !important; /* COMPACT & CENTERED */
    width: 100% !important;
    margin: 30px auto !important;
    border: 2px solid var(--brand-gold-light) !important;
    padding: 30px 40px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background: #fff !important;
    border-radius: 4px;
}

.gw-process-col.is-atomic-check h4 {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    font-family: var(--font-primary, Georgia, serif) !important;
    font-size: 1.4rem !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--brand-black);
}

.gw-process-col.is-atomic-check p {
    margin-bottom: 20px !important;
    opacity: 0.8 !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important; /* Cap at 1.5 per user spacing rules */
    color: #555 !important;
}

/* Two-Column Spacing centered */
.gw-availability-box-inner {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    align-items: center !important;
    justify-content: center !important; /* CENTER BOTH FIELDS */
    border-top: 1px solid rgba(197, 160, 89, 0.15) !important;
    padding-top: 25px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.gw-availability-box-inner .col-input {
    flex: 0 1 320px !important; /* MAX 320px */
    width: 100% !important;
    box-sizing: border-box !important;
}

.gw-availability-box-inner .col-input input.gw-date-picker-input {
    width: 100% !important;
    background: #fafafa !important;
    color: #111 !important;
    border: 1px solid #ddd !important;
    padding: 12px !important; /* REMOVED 40px LEFT SHIFT (NO EXTRA CALENDAR GAP) */
    font-family: inherit !important;
    font-size: 0.95rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
}

.gw-availability-box-inner .col-input input.gw-date-picker-input:focus {
    background: #fff !important;
    border-color: var(--brand-gold, #B08D55) !important;
    outline: none !important;
    box-shadow: 0 0 5px rgba(197, 160, 89, 0.3) !important;
}

.gw-availability-box-inner .col-btn {
    flex: 0 1 320px !important; /* MAX 320px */
    width: 100% !important;
    box-sizing: border-box !important;
}

.gw-availability-box-inner .col-btn button,
.gw-availability-box-inner .col-btn a {
    width: 100% !important;
    padding: 14px 20px !important;
    box-sizing: border-box !important;
    font-size: 0.8rem !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    background: var(--brand-gold-light, #C5A059) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(197, 160, 89, 0.2) !important;
}

.gw-availability-box-inner .col-btn button:hover,
.gw-availability-box-inner .col-btn a:hover {
    background: #000 !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* Remove envelope icon from check date button */
.gw-availability-box-inner .col-btn button::after,
.gw-availability-box-inner .col-btn a::after {
    content: none !important;
}

#gw-atomic-booking-cta.btn-black-gold {
    display: none;
    background: #000 !important;
    color: #fff !important;
    text-decoration: none !important;
    align-items: center !important;
    justify-content: center !important;
}

#gw-atomic-booking-cta.btn-black-gold:hover {
    background: var(--brand-gold) !important;
    color: #000 !important;
}

/* Mobile Responsiveness for Horizontal Date Checker */
@media (max-width: 1024px) {
    .gw-process-col.is-atomic-check {
        padding: 30px 20px !important;
    }
    .gw-availability-box-inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important; /* Fix big gap */
        align-items: center !important;
        margin-top: 25px !important; /* Prevent blending into text above */
        padding-top: 25px !important;
    }
    .gw-availability-box-inner .col-input,
    .gw-availability-box-inner .col-btn {
        flex: none !important;
        width: 100% !important;
        text-align: center !important;
    }
    .gw-availability-box-inner .col-btn button,
    .gw-availability-box-inner .col-btn a {
        margin-bottom: 0 !important;
        margin-top: 5px !important;
    }
}

/* --- EDITORIAL TRIPLET SYSTEM --- */
.gw-editorial-triplet-wrap {
    margin: 30px auto;
    width: 100%;
}

.gw-triplet-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important; /* Strict 3 columns as requested */
    gap: 30px;
    /* Restored gap for separation */
    align-items: stretch;
    border: none !important;
    background: transparent !important;
    width: 100%;
    margin: 20px auto;
}



.gw-triplet-item {
    padding: 25px 30px;
    /* Reduced vertical padding */
    background: var(--brand-white) !important;
    border: 2px solid var(--brand-gold-light) !important;
    box-shadow: var(--shadow-soft) !important;
    position: relative;
    display: flex;
    flex-direction: column;
}

.gw-triplet-item:hover {
    box-shadow: var(--shadow-deep);
    transition: 0.3s ease;
}

/* Special spanning for item 3 (Overview) */
.gw-triplet-item:nth-child(3) {
    grid-column: 1 / span 2;
}




.triplet-heading {
    font-family: var(--font-primary) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 1rem !important;
    color: var(--brand-accent) !important;
    margin-bottom: 10px !important;
}

.triplet-h-rule {
    width: 30px;
    height: 1px;
    background: var(--brand-gold-light);
    opacity: 0.3;
    margin-bottom: 15px;
}

.triplet-body-text {
    font-size: 0.95rem;
    line-height: 1.5; /* Cap at 1.5 per user spacing rules */
    opacity: 0.8;
    margin-bottom: 15px;
}

/* GLOBAL BULLET SUPPRESSION FOR EDITORIAL BLOCKS */
.gw-list-box ul,
.gw-triplet-row ul,
.triplet-list-content ul {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Block Style Pizazz (Gutenberg styles) */
.is-style-gw-included,
.is-style-gw-perfect-for,
.is-style-gw-highlights {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    list-style: none !important;
    position: relative;
    height: 100% !important;
    /* Force fill for height matching */
}

/* --- HEIGHT MATCHING ENGINE (DESKTOP ONLY) --- */
@media (min-width: 1025px) {

    .wp-block-columns,
    .gw-triplet-row,
    .gw-dual-column-row {
        align-items: stretch !important;
    }

    .wp-block-column,
    .gw-triplet-item,
    .gw-list-box {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .gw-list-box,
    .gw-triplet-item {
        flex: 1 !important;
    }
}

.gw-list-box li,
.gw-triplet-row li {
    list-style: none !important;
    list-style-type: none !important;
}

/* Explicitly kill markers for all list items in these containers */
.gw-list-box li::marker,
.gw-triplet-row li::marker,
.is-style-gw-highlights li::marker,
.is-style-gw-included li::marker,
.is-style-gw-perfect-for li::marker {
    content: none !important;
    display: none !important;
}

/* --- GLOBAL PAGE HEADER (H1) --- */
.entry-header,
.service-hero-header,
.archive-header {
    text-align: center !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 10px !important;
    width: 100% !important;
}

.entry-header .entry-title,
.service-hero-header .entry-title,
.archive-header .entry-title {
    margin: 0 !important;
    padding-top: 6px !important;
}

@media (max-width: 1024px) {
    .entry-title {
        font-size: 2.2rem !important;
    }
}

.triplet-list-content li::before,
.is-style-gw-highlights li::before,
.is-style-gw-included li::before,
.is-style-gw-perfect-for li::before {
    /* Common editorial icon styles */
    position: absolute !important;
    left: 0 !important;
    top: 2px !important;
    font-weight: 700 !important;
}

.is-style-gw-highlights li:not(:empty)::before {
    content: '✓' !important;
    color: var(--brand-gold-light) !important;
    font-size: 1rem !important;
}

.is-style-gw-included li:not(:empty)::before {
    content: '+' !important;
    color: var(--brand-gold-light) !important;
    font-size: 1rem !important;
}

.is-style-gw-perfect-for li:not(:empty)::before {
    content: '◆' !important;
    color: var(--brand-gold-light) !important;
    font-size: 0.8rem !important;
}

.triplet-list-content li::before {
    content: '✧' !important;
    color: #C5A059 !important;
    font-size: 0.9rem !important;
}





/* --- NUCLEAR RESET FOR SERVICE PAGE WRAPPERS --- */
.page-template-page-service-detail .wp-block-group,
.page-template-page-service-detail .wp-block-column,
.page-template-page-service-detail .wp-block-columns {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    outline: none !important;
}

@media (max-width: 1024px) {
    .gw-triplet-row {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* MUST stay 3 columns on mobile */
        gap: 10px !important; /* Tighter gap for small screens */
        border: none !important;
        background: transparent !important;
    }

    .gw-triplet-item {
        width: 100% !important;
        border: 2px solid var(--brand-gold-light) !important;
        margin-bottom: 0 !important;
        padding: 15px 5px !important; /* Smaller padding to fit 3 items */
        grid-column: auto !important;
    }
}

/* --- 15. LIGHTBOX SYSTEM --- */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(17, 17, 14, 0.98); /* Deep Gold-tinted Black Overlay */
    z-index: 1000000 !important; /* Ultra high priority */
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.menu-overlay.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.menu-overlay-inner {
    position: relative;
    width: 100%;
    max-width: 900px;
    text-align: center;
    padding: 60px 40px;
    z-index: 1000001 !important;
    transform: scale(0.95) translateY(20px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.menu-overlay.active .menu-overlay-inner {
    transform: scale(1) translateY(0);
}

.menu-close {
    position: absolute;
    top: 30px;
    right: 30px;
    background: none;
    border: none;
    color: var(--brand-gold-light);
    font-size: 3.5rem;
    cursor: pointer;
    line-height: 1;
    z-index: 1000002 !important;
    transition: color 0.3s ease;
}

.menu-close:hover {
    color: #fff;
}

.nav-menu-overlay {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.nav-menu-overlay li a {
    font-family: var(--font-primary);
    font-size: 2.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: #ffffff !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav-menu-overlay li a:hover {
    color: var(--brand-gold-light) !important;
    letter-spacing: 10px;
}

#gw-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000005;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
    cursor: zoom-out;
}

#gw-lightbox.active {
    display: flex;
}

#gw-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border: 2px solid var(--brand-gold-light);
}

#gw-lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #fff;
    font-size: 50px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s;
}

#gw-lightbox-close:hover {
    color: var(--brand-gold);
}

/* --- 25. BOUTIQUE SCROLLYTELLING MODULE --- */
/* Enable 100vw edge-to-edge breakout for ALL full-width layout blocks */
.alignfull {
    position: relative !important;
    width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;
}

/* Ensure sticky parent containers do not truncate sticky positioning */
.site,
.site-content,
.site-main,
article,
.entry-content,
.wp-block-post-content,
.wp-block-group,
.wp-block-columns,
.wp-block-column,
.wp-block-gw-scrollytelling-container,
.wp-block-gw-scrollytelling-twocol-container {
    overflow: visible !important;
    contain: none !important;
}

.scrollytelling-wrapper {
    position: relative !important;
    background-color: #ffffff !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box;
    overflow: visible;
    display: flow-root !important; /* Establishes BFC to prevent margin collapse gap */
}

/* Strip ALL Gutenberg outer-wrapper margins/padding so the scrollytelling block
   sits flush with the header — Gutenberg wraps every block in wp-block-{name} div
   and also applies .is-layout-flow gap rules that create unwanted top spacing. */
.wp-block-gw-scrollytelling-container,
.wp-block-gw-scrollytelling-twocol-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Kill any Gutenberg is-layout-flow vertical gap on the scrollytelling blocks */
.wp-block-gw-scrollytelling-container.is-layout-flow > *,
.wp-block-gw-scrollytelling-twocol-container.is-layout-flow > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* Placement-specific layout adjustments for Single-Column Scrollytelling */
body.has-scrolly-at-top .site-main,
body.has-scrolly-at-top #primary,
body.has-scrolly-at-top .entry-content,
body.has-scrolly-at-top .services-intro,
body.has-scrolly-at-top article,
body.has-scrolly-at-top .container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.has-scrolly-at-top .scrollytelling-wrapper.is-at-top {
    margin-top: -3px !important;
}

body.has-scrolly-at-bottom .site-main,
body.has-scrolly-at-bottom #primary,
body.has-scrolly-at-bottom .entry-content,
body.has-scrolly-at-bottom .services-intro,
body.has-scrolly-at-bottom article,
body.has-scrolly-at-bottom .container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
body.has-scrolly-at-bottom .site-footer {
    margin-top: 0 !important;
}
body.has-scrolly-at-bottom .scrollytelling-wrapper.is-at-bottom {
    margin-bottom: 0 !important;
}

/* Background container: position:sticky allows it to scroll on, stick, and scroll off.
   Comprehensive ancestor overflow overrides ensure this sticks reliably across browsers. */
.sticky-background-container {
    position: sticky !important;
    top: calc(var(--header-height) - 3px) !important;
    left: 5vw;
    width: 90vw;
    z-index: 1;
    overflow: hidden;
    background-color: transparent;
    height: calc(100vh - var(--header-height) + 3px) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Stacked background wrappers for simple opacity crossfade */
.scroll-bg-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 1;
    opacity: 0 !important;
    transition: opacity 0.6s ease-in-out;
    background-color: transparent !important; /* Let page background show through */
    margin: 0 !important;
    padding: 0 !important;
}

/* Slide active: fades in the wrapper */
.scroll-bg-wrapper.is-active {
    opacity: 1 !important;
    z-index: 2;
}

/* Step 1 background wrappers should never fade in on load, but simply scroll in with the page */
.scroll-bg-wrapper[data-step="1"] {
    opacity: 1 !important;
    z-index: 2;
    transition: none !important;
}

.scroll-bg-wrapper[data-step="1"]:not(.is-active) {
    opacity: 0 !important;
    z-index: 1;
    transition: opacity 0.6s ease-in-out !important;
}

/* Base image — full bleed background fill. Covers the container completely, top-to-bottom.
   These are cinematic background images (not editorial content), so cover is intentional. */
.scroll-bg-image {
    position: absolute !important;
    bottom: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    opacity: 1 !important; /* Always fully opaque inside the mask wrapper */
    margin: 0 !important;
    padding: 0 !important;

    /* Fine Gold Frame Wrapping Image Edge */
    border: 3px solid var(--brand-gold-light, #C5A059) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    box-sizing: border-box !important;
}

/* Image Alignment options following the 10-80-10 rule */
.scroll-bg-image.align-img-left {
    left: 10% !important;
    transform: none !important;
    max-width: 90% !important; /* Ensure image + 10% offset doesn't exceed wrapper boundaries */
}

.scroll-bg-image.align-img-right {
    left: auto !important;
    right: 10% !important;
    transform: none !important;
    max-width: 90% !important; /* Ensure image + 10% offset doesn't exceed wrapper boundaries */
}

.scroll-bg-image.align-img-center {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Fade active background image (redundant since wrapper controls display, but kept clean) */
.scroll-bg-image.is-active {
    opacity: 1;
}

/* Showcase Mode: No dark overlays or filters on the photos */
.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none !important;
    z-index: 3;
}

/* Symmetrical Breakout for the Front-Page Gutenberg Trust Bar Group Block */
.wp-block-group[style*="background-color:#1a1a1a"],
.wp-block-group[style*="background-color: #1a1a1a"] {
    position: relative !important;
    width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;
    max-width: 100vw !important;
}

/* Scrolling text container */
.scrolling-text-container {
    position: relative;
    z-index: 4;
    width: 90vw !important;
    margin-left: 5vw !important;
    margin-top: calc(-100vh + var(--header-height) - 3px) !important; /* Pull content exactly over sticky background */
    padding-bottom: 25vh;
    display: flow-root !important; /* Prevent child margins from spilling out */
}

/* Hide auto-injected empty paragraphs from wpautop to prevent container spacing shift */
.scrolling-text-container > p {
    display: none !important;
}

/* Admin-bar margin corrections — JS measurement already includes admin bar, so no addition needed */
body.admin-bar .scrolling-text-container {
    margin-top: calc(-100vh + var(--header-height) - 3px) !important;
}

@media (max-width: 782px) {
    body.admin-bar .scrolling-text-container {
        margin-top: calc(-100vh + var(--header-height) - 3px) !important;
    }
}

/* Scrolling slides */
.scroll-step {
    min-height: calc(100vh - var(--header-height) + 3px) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 5% !important;
    box-sizing: border-box;
    pointer-events: none; /* Let clicks pass through to background if needed */
}

/* Mobile responsive override for full-height contained image - force center on mobile */


.scroll-step.align-box-left { justify-content: flex-start; }
.scroll-step.align-box-right { justify-content: flex-end; }
.scroll-step.align-box-center { justify-content: center; }

/* Premium Gold Frame Text Box — 15% smaller dimensions, smooth GPU transitions */
.step-content-box {
    background: rgba(17, 17, 17, 0.55) !important; /* Increased transparency to let photos show through beautifully */
    border: 2px solid var(--brand-gold-light, #C5A059) !important;
    color: #ffffff !important;
    padding: 2.5rem !important;
    max-width: 380px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: auto; /* Re-enable pointer events for text container */
    will-change: opacity, transform;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.step-content-box h2 {
    color: #ffffff !important;
    font-family: var(--font-primary) !important;
    font-size: 1.85rem !important; /* -15% from 2.2rem */
    margin-top: 0 !important; /* Reset global h2 margin-top override */
    margin-bottom: 1.25rem !important; /* -15% from 1.5rem */
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: normal;
}

.step-content-box p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 0.8rem !important; /* -15% from 0.95rem */
    line-height: 1.5 !important; /* Cap at 1.5 per user spacing rules */
    margin-bottom: 0 !important;
    letter-spacing: 1px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .step-content-box {
        padding: 1.7rem 1.25rem !important; /* -15% from 2rem 1.5rem */
        margin: 0 10px;
    }
    .step-content-box h2 {
        font-size: 1.35rem !important; /* -15% from 1.6rem */
        letter-spacing: 2px;
    }
    .step-content-box p {
        font-size: 0.72rem !important; /* -15% from 0.85rem */
        line-height: 1.5 !important; /* Cap at 1.5 per user spacing rules */
    }
}

/* Initial state: invisible and shifted down slightly — transitions in when JS adds .is-active */
.scrolly-initialized .step-content-box {
    opacity: 0;
    transform: translateY(18px);
}

.scrolly-initialized .step-content-box.is-active {
    opacity: 1;
    transform: translateY(0);
}

/* Two-Column Scrollytelling CSS Layout */
.twocol-scrolly .twocol-bg-grid {
    display: grid;
    grid-template-columns: 44.44% 44.44%; /* 40% of viewport width inside 90% width container */
    column-gap: 11.11%; /* 10% of viewport width inside 90% container */
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.twocol-bg-column {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.twocol-bg-column .scroll-bg-wrapper {
    position: absolute;
    top: 0 !important;
    left: 0;
    width: 100%;
    height: 100% !important;
}

.twocol-bg-column .scroll-bg-image {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important; /* Respect Never-Crop */
    position: absolute !important;
    top: 50% !important; /* Align to the middle height */
    bottom: auto !important;
    border: 3px solid var(--brand-gold-light, #C5A059) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Image positioning snug inside the column with vertical centering */
.twocol-bg-column .scroll-bg-image.align-img-left {
    left: 0 !important;
    right: auto !important;
    transform: translateY(-50%) !important;
}
.twocol-bg-column .scroll-bg-image.align-img-right {
    right: 0 !important;
    left: auto !important;
    transform: translateY(-50%) !important;
}
.twocol-bg-column .scroll-bg-image.align-img-center {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Step Layout for Two Columns */
.twocol-step {
    min-height: calc(100vh - var(--header-height) + 3px) !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.twocol-step-grid {
    display: grid;
    grid-template-columns: 44.44% 44.44%;
    column-gap: 11.11%;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    pointer-events: none; /* Let clicks pass to background if needed */
}

.twocol-step-column {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 !important;
    box-sizing: border-box;
    pointer-events: none;
}

.twocol-step-column.align-box-left { justify-content: flex-start !important; }
.twocol-step-column.align-box-right { justify-content: flex-end !important; }
.twocol-step-column.align-box-center { justify-content: center !important; }

/* Styling for the half-sized text box — 15% smaller */
.twocol-step-column .step-content-box {
    max-width: 255px !important; /* -15% from 300px */
    width: 85% !important;
    padding: 1.5rem 1rem !important; /* -15% from 1.8rem 1.2rem */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}

.twocol-step-column .step-content-box h2 {
    font-size: 1.1rem !important; /* -15% from 1.3rem */
    margin-bottom: 0.65rem !important; /* -15% from 0.8rem */
    letter-spacing: 2px !important;
}

.twocol-step-column .step-content-box p {
    font-size: 0.68rem !important; /* -15% from 0.8rem */
    line-height: 1.5 !important;
    letter-spacing: 0.5px !important;
}

/* Mobile responsive layout: Stack columns side-by-side → full-width & cover-fill images */
@media (max-width: 1024px) {
    /* --header-height is set dynamically by JS (getBoundingClientRect().bottom) on all screen sizes.
       No CSS fallback needed here — JS runs before first paint on DOMContentLoaded. */

    /* Mobile/tablet: full-bleed (left:0, 100vw) — left/right crop is acceptable */
    .scrollytelling-wrapper:not(.twocol-scrolly) .sticky-background-container,
    .twocol-scrolly .sticky-background-container {
        position: sticky !important;
        left: 0 !important;
        width: 100vw !important;
        top: calc(var(--header-height) - 3px) !important;
        height: calc(100vh - var(--header-height) + 3px) !important;
    }

    .scrollytelling-wrapper:not(.twocol-scrolly) .scrolling-text-container,
    .twocol-scrolly .scrolling-text-container {
        width: 100vw !important;
        left: 50% !important;
        margin-left: -50vw !important;
        margin-top: calc(-100vh + var(--header-height) - 3px) !important;
    }

    /* Admin bar: JS measurement already includes admin bar offset, no extra offset needed */
    body.admin-bar .scrollytelling-wrapper:not(.twocol-scrolly) .sticky-background-container,
    body.admin-bar .twocol-scrolly .sticky-background-container {
        position: sticky !important;
        top: calc(var(--header-height) - 3px) !important;
        height: calc(100vh - var(--header-height) + 3px) !important;
    }

    body.admin-bar .scrollytelling-wrapper:not(.twocol-scrolly) .scrolling-text-container,
    body.admin-bar .twocol-scrolly .scrolling-text-container {
        margin-top: calc(-100vh + var(--header-height) - 3px) !important;
    }

    /* Scrollytelling background images on mobile: full-bleed cover fill, no border */
    .scroll-bg-image,
    .scroll-bg-image.align-img-center,
    .scroll-bg-image.align-img-left,
    .scroll-bg-image.align-img-right,
    .twocol-scrolly .twocol-bg-column .scroll-bg-image,
    .twocol-scrolly .twocol-bg-column .scroll-bg-image.align-img-center,
    .twocol-scrolly .twocol-bg-column .scroll-bg-image.align-img-left,
    .twocol-scrolly .twocol-bg-column .scroll-bg-image.align-img-right {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        transform: none !important;
        border: none !important;
        box-shadow: none !important;
        background: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. Two-Column Scrollytelling Sequential Stacking */
    .twocol-scrolly .twocol-bg-grid {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .twocol-scrolly .twocol-bg-column {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 1 !important; /* Always visible on mobile, inner wrappers will crossfade */
        z-index: 1 !important;
        transition: none !important;
    }

    /* Left column active by default in CSS, no JS dependency on initial load */
    .twocol-scrolly .twocol-bg-column:first-child {
        opacity: 1 !important;
        z-index: 2 !important;
    }

    /* Active column overlaps default left column using z-index: 3 */
    .twocol-scrolly .twocol-bg-column.is-column-active {
        opacity: 1 !important;
        z-index: 3 !important;
    }

    .twocol-scrolly .twocol-step-grid {
        display: block !important;
    }

    .twocol-scrolly .twocol-step-column {
        min-height: calc(100vh - var(--header-height) + 3px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 20px !important;
        box-sizing: border-box !important;
    }
}

/* ── COLUMN PARALLAX WINDOW PHOTO ───────────────────────── */

/* Force parent columns to be flexbox containers when they contain our block */
.wp-block-columns:has(.gw-column-window-photo) {
    align-items: stretch !important;
}

.wp-block-column:has(.gw-column-window-photo) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-self: stretch !important;
    height: auto !important; /* Override desktop height: 100% !important to allow stretching */
}

/* Control margins of elements within this flex column to prevent margin inflation */
.wp-block-column:has(.gw-column-window-photo) > *:not(.gw-column-window-photo) {
    margin-top: 0 !important;
    margin-bottom: 1.25rem !important;
}

.gw-column-window-photo {
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    flex-basis: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    margin-top: auto !important; /* Push block to the bottom of the stretched column */
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    background-color: #fafafa !important;
    
    /* Hardware-accelerated clip-path window (completely wobble-free) */
    -webkit-clip-path: inset(0px) !important;
    clip-path: inset(0px) !important;
    background-size: 0px 0px !important; /* Prevent parent rendering image to optimize resources */
}

/* Pseudo-element with position: fixed spans viewport, clipped by parent's clip-path */
.gw-column-window-photo::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: var(--col-left, 0) !important;
    width: var(--col-width, 100%) !important;
    height: 100% !important;
    background-image: inherit !important; /* Inherit dynamic image URL from parent style */
    background-repeat: no-repeat !important;
    background-size: auto 100% !important;
    background-position: center center !important;
    will-change: transform !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* Fallback to standard scroll layout on touch devices and small screens where fixed viewport elements are buggy */
@media (max-width: 1024px) {
    .gw-column-window-photo {
        -webkit-clip-path: none !important;
        clip-path: none !important;
        background-size: cover !important;
        background-attachment: scroll !important;
    }
    .gw-column-window-photo::before {
        display: none !important;
    }
}

.gw-column-window-parallax-img {
    display: none !important; /* Hide image tag as we render via CSS background-image for smooth parallax */
}

/* Maintain block size inside editor wrapper so user can customize it, and use scroll attachment */
.editor-styles-wrapper .gw-column-window-photo {
    flex-grow: 0 !important;
    flex-basis: 150px !important;
    height: 150px !important;
    min-height: 150px !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    background-size: cover !important;
    background-attachment: scroll !important;
}
.editor-styles-wrapper .gw-column-window-photo::before {
    display: none !important;
}

/* --- MOBILE RESPONSIVENESS FIXES (v4.6.0) --- */

/* Page Hero Banner: reduce oversized title + padding on mobile */
@media (max-width: 1024px) {
    .page-hero-banner-title {
        font-size: clamp(1.5rem, 5vw, 3.5rem) !important;
        padding: 15px clamp(15px, 4vw, 60px) !important;
    }
}

/* About Grid: reduce 80px gap + 100px bottom margin on mobile */
@media (max-width: 1024px) {
    .about-grid {
        gap: 30px !important;
        margin-bottom: 40px !important;
    }
}

/* --- THIRD-PARTY PLUGIN OVERRIDES (Bookly) --- */
/* These live in the theme CSS to survive plugin updates */

/* Bookly Pro: Customer Profile table — prevent overflow on mobile */
@media (max-width: 768px) {
    .bookly-customer-appointment-list {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .bookly-appointments-table {
        max-width: 100% !important;
        font-size: 0.85rem !important;
    }
    .bookly-appointments-table th {
        white-space: normal !important;
        font-size: 0.8rem !important;
    }
    .bookly-appointments-table .bookly-btn-default {
        min-width: auto !important;
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
    }
}

/* Bookly: Modal dialog — fix width gap between 400–768px */
@media (max-width: 768px) {
    .bookly-modal .bookly-modal-dialog {
        width: 90% !important;
        max-width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        left: 5% !important;
        right: 5% !important;
    }
}