/* Custom CSS by CCloud Media */
/* Main styles */

/* ========================================================================
   Google Fonts Import (Editorial Serif, Script & Modern Sans)
   ======================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Imperial+Script&family=Pinyon+Script&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Italiana&family=Montserrat:wght@400;500;600;700;800&display=swap');

/* ========================================================================
   Global Viewport & Menubar Dimensions
   ======================================================================== */
:root {
    --hs-menubar-height: 80px;
    --hs-section-height: calc(100vh - var(--hs-menubar-height, 80px));
}

@supports (height: 100dvh) {
    :root {
        --hs-section-height: calc(100dvh - var(--hs-menubar-height, 80px));
    }
}

/* ========================================================================
   Looping Hero Background Video (Scoped Strictly to Hero Section)
   ======================================================================== */

.site-bg-video-wrapper {
    display: none; /* Hidden by default until mounted inside .hs-hero-section */
}

.hs-hero-section .site-bg-video-wrapper {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.site-bg-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.site-bg-video-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.52) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Persistent Header: persists throughout full page scroll */
.tm-header,
.tm-header-mobile {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 990 !important;
    background: transparent !important;
    --hs-nav-progress: 0;
}

.tm-header .uk-navbar-container,
.tm-header-mobile .uk-navbar-container {
    background: transparent !important;
}

/* Translucent backdrop (#f9f2f1) that fades in smoothly with scroll progress */
.tm-header::before,
.tm-header-mobile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f9f2f1;
    backdrop-filter: blur(calc(var(--hs-nav-progress, 0) * 12px));
    -webkit-backdrop-filter: blur(calc(var(--hs-nav-progress, 0) * 12px));
    box-shadow: 0 4px 20px rgba(0, 0, 0, calc(var(--hs-nav-progress, 0) * 0.08));
    opacity: var(--hs-nav-progress, 0);
    pointer-events: none;
    z-index: -1;
    will-change: opacity, backdrop-filter;
    transition: opacity 0.25s ease-out;
}

/* Fallback state if toggled */
.tm-header.tm-header-scrolled::before,
.tm-header-mobile.tm-header-scrolled::before {
    opacity: 1;
}

/* Modern native scroll-driven animation: smooth compositor-driven interpolation */
@supports (animation-timeline: scroll()) {
    @keyframes hs-nav-bg-fade {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes hs-nav-links-fade {
        from {
            color: #ffffff;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
        }
        to {
            color: #037753;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0);
        }
    }

    .tm-header::before,
    .tm-header-mobile::before {
        animation: hs-nav-bg-fade linear both;
        animation-timeline: scroll();
        animation-range: 30vh 85vh;
    }

    .tm-header .uk-navbar-nav > li > a,
    .tm-header-overlay .uk-navbar-nav > li > a,
    .tm-header-mobile .uk-navbar-toggle {
        animation: hs-nav-links-fade linear both;
        animation-timeline: scroll();
        animation-range: 30vh 85vh;
    }
}

/* ========================================================================
   Hero Section: Strictly Transparent Container & Dead-Centered in Window
   ======================================================================== */

.hs-hero-section {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: 100vh !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.hs-hero-section > .uk-width-1-1 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    position: relative;
    z-index: 2;
}

/* Hero section container must remain transparent so its background video is visible */
.hs-hero-section,
.uk-section.hs-hero-section,
div.hs-hero-section {
    background-color: transparent !important;
    background-image: none !important;
    background: transparent !important;
}

/* ========================================================================
   Content Sections: Original Theme Background Colours
   ======================================================================== */

.hs-hero-section ~ .uk-section,
.hs-hero-section ~ .el-section,
.hs-hero-section ~ footer,
.tm-page > footer,
footer,
.uk-section,
.el-section,
.tm-page,
.tm-main,
main#tm-main {
    position: relative;
}

/* Hide vertical sidebar section title badges (e.g. 'Portfolio 1') */
.tm-section-title {
    display: none !important;
}

/* Original section background colours from theme */
.uk-section-default {
    background-color: #fef9ec !important;
}

.uk-section-primary {
    background-color: #f9f2f1 !important;
}

.uk-section-secondary {
    background-color: #004651 !important;
}

.uk-section-muted {
    background-color: #ebc9d6 !important;
}

/* Fallback for sections without a specific variant */
.hs-hero-section ~ .uk-section:not([class*="uk-section-"]) {
    background-color: #fef9ec !important;
}

/* Ensure non-hero pages keep their original solid section backgrounds */
body:not(:has(.hs-hero-section)) .uk-section:not([class*="uk-section-"]) {
    background-color: #fef9ec !important;
}

/* Full-viewport sections: 100vh minus menu bar height */
.uk-section.uk-height-viewport {
    min-height: calc(100vh - var(--hs-menubar-height, 80px)) !important;
    min-height: var(--hs-section-height) !important;
    scroll-margin-top: var(--hs-menubar-height, 80px) !important;
}

/* ========================================================================
   Hero Title Block (Shrinks into persistent menu bar on scroll)
   ======================================================================== */

.hs-hero-title-block {
    text-align: center;
    color: #F2BB16;
    padding: 0;
    width: 90vw;
    max-width: 90vw;
    margin: 0;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center !important;
    z-index: 9999 !important;
    user-select: none;
    box-sizing: border-box;
    pointer-events: none;
    will-change: transform;
    transition: text-shadow 0.3s ease;
}

.hs-hero-title-block.hs-title-in-navbar {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.hs-hero-title-block.hs-title-in-navbar .hs-hero-title {
    text-shadow: none !important;
}

.hs-hero-title-block.hs-title-in-navbar .hs-hero-subtitle {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Container that wraps Title and Subtitle so they share exact width */
.hs-hero-brand-wrap {
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    max-width: 100%;
}

/* Single unified font for 'Holiday Story' (Imperial Script) spanning 2/3rds of viewport width */
.hs-hero-title {
    font-family: 'Imperial Script', cursive;
    font-size: clamp(2rem, 12.6vw, 20rem);
    line-height: 1.05;
    margin: 0;
    color: #F2BB16;
    text-shadow: none !important;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    white-space: nowrap;
    display: block;
}

/* Photography Subtitle: 75% of title width, centered, refined medium weight */
.hs-hero-subtitle {
    font-family: 'Montserrat', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(0.95rem, 1.8vw, 2rem);
    font-weight: 500; /* Refined lighter weight (Medium 500) */
    text-transform: uppercase;
    color: #F2BB16;
    text-shadow: none !important;
    margin: clamp(0.9rem, 1.8vw, 2.2rem) auto 0 auto; /* Reduced gap between title and subtitle */
    width: 75%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.hs-hero-subtitle > span {
    display: inline-block;
    line-height: 1;
}

/* Menu item typography: matches landing page subtitle (Montserrat uppercase) */
.tm-header .uk-navbar-nav > li > a,
.tm-header-overlay .uk-navbar-nav > li > a,
.tm-header-mobile .uk-navbar-nav > li > a,
#tm-dialog .uk-nav > li > a,
#tm-dialog-mobile .uk-nav > li > a {
    font-family: 'Montserrat', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    font-size: 0.9em !important;
}

/* Ensure navbar links are crisp and bright across all sections with smooth color mixing */
.tm-header .uk-navbar-nav > li > a,
.tm-header-overlay .uk-navbar-nav > li > a,
.tm-header-mobile .uk-navbar-toggle {
    color: #ffffff;
    color: color-mix(in srgb, #037753 calc(var(--hs-nav-progress, 0) * 100%), #ffffff);
    text-shadow: 0 2px 8px rgba(0, 0, 0, calc((1 - var(--hs-nav-progress, 0)) * 0.6));
    transition: color 0.3s ease-out, text-shadow 0.3s ease-out;
}

/* Explicit rule when menu bar is coloured in: unselected text is forest green with zero text shadow */
.tm-header.tm-header-scrolled .uk-navbar-nav > li > a,
.tm-header.tm-header-scrolled .uk-navbar-toggle,
.tm-header-mobile.tm-header-scrolled .uk-navbar-toggle {
    color: #037753 !important;
    text-shadow: none !important;
}

/* Selected (active) item & on hover: ALWAYS brand gold (#F2BB16) */
.tm-header .uk-navbar-nav > li.uk-active > a,
.tm-header .uk-navbar-nav > li > a:hover,
.tm-header .uk-navbar-nav > li > a:focus,
.tm-header .uk-navbar-nav > li > a.uk-active,
.tm-header-overlay .uk-navbar-nav > li.uk-active > a,
.tm-header-overlay .uk-navbar-nav > li > a:hover,
.tm-header-overlay .uk-navbar-nav > li > a:focus,
.tm-header-mobile .uk-navbar-toggle:hover,
.tm-header.tm-header-scrolled .uk-navbar-nav > li.uk-active > a,
.tm-header.tm-header-scrolled .uk-navbar-nav > li > a:hover,
.tm-header.tm-header-scrolled .uk-navbar-nav > li > a:focus,
.tm-header.tm-header-scrolled .uk-navbar-nav > li > a.uk-active,
.tm-header.tm-header-scrolled .uk-navbar-toggle:hover,
.tm-header-mobile.tm-header-scrolled .uk-navbar-toggle:hover {
    color: #F2BB16 !important;
}

/* ========================================================================
   Corner-Split Navbar (Half Left Corner, Half Right Corner)
   ======================================================================== */

.tm-header .uk-navbar-container .uk-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: clamp(1.5rem, 3.5vw, 4rem) !important;
    padding-right: clamp(1.5rem, 3.5vw, 4rem) !important;
    box-sizing: border-box !important;
}

.tm-header .uk-navbar {
    width: 100% !important;
    display: flex !important;
}

.tm-header .uk-navbar-right {
    flex: 1 1 auto !important;
    margin-left: 0 !important;
    width: 100% !important;
    display: flex !important;
}

.tm-header .uk-navbar-nav {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/* Split: 1st half in left corner, 2nd half in right corner */
.tm-header .uk-navbar-nav > li:nth-child(2) {
    margin-right: auto !important;
}

.tm-header .uk-navbar-nav > li:first-child > a {
    padding-left: 0 !important;
}

.tm-header .uk-navbar-nav > li:last-child > a {
    padding-right: 0 !important;
}

/* ========================================================================
   Custom Scrollbar: Transparent Track & Gold Accent
   ======================================================================== */

/* Prevent Windows/browser from using default light-theme white scrollbars */
html {
    color-scheme: dark;
}

/* Firefox standard scrollbars */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: rgba(242, 187, 22, 0.6) transparent;
    }
}

/* Chromium / WebKit (Opera, Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #F2BB16;
}

/* ========================================================================
   Portfolio Sections (Portraits, Interior, Events): Vintage Postcard Layout
   ======================================================================== */

/* Ensure background decorative SVGs never block hover or click interactions */
img[src*="line-"],
svg.el-image,
[uk-svg],
.uk-position-absolute:has(img[src*="line-"]),
.uk-position-absolute:has(svg) {
    pointer-events: none !important;
}

/* Make full-width absolute wrapper divs transparent to mouse events */
div#page\#5,
div#page\#6,
div#page\#7,
div#page\#8,
div#page\#9,
div#page\#10,
div#page\#11,
div#page\#12,
div#page\#14,
div#page\#15,
div#page\#16,
div#page\#18,
div#page\#19,
div#page\#20,
div#page\#22,
div#page\#23,
div[id^="page#"].uk-position-absolute {
    pointer-events: none !important;
}

/* Allow mouse events to pass through section layout, containers, and headings to cards */
.uk-section-default .uk-container,
.uk-section-default .uk-grid,
.uk-section-default .uk-panel,
.uk-section-default article,
.uk-section-default h1,
.uk-section-default h2,
.uk-section-default h3,
.uk-section-primary .uk-container,
.uk-section-primary .uk-grid,
.uk-section-primary .uk-panel,
.uk-section-primary article,
.uk-section-primary h1,
.uk-section-primary h2,
.uk-section-primary h3,
.uk-section-secondary .uk-container,
.uk-section-secondary .uk-grid,
.uk-section-secondary .uk-panel,
.uk-section-secondary article,
.uk-section-secondary h1,
.uk-section-secondary h2,
.uk-section-secondary h3,
.uk-heading-large {
    pointer-events: none !important;
}

.uk-section a,
.uk-section button {
    pointer-events: auto;
}

/* Postcard Outer Card (The Cream Paper Frame) */
#page\#5 picture,
#page\#6 picture,
#page\#7 picture,
#page\#8 picture,
#page\#9 picture,
#page\#10 picture,
#page\#11 picture,
#page\#12 picture,
#page\#14 picture,
#page\#15 picture,
#page\#16 picture,
#page\#18 picture,
#page\#19 picture,
#page\#20 picture,
#page\#22 picture,
#page\#23 picture,
.hs-postcard picture,
.hs-postcard-frame {
    display: inline-flex !important;
    flex-direction: column !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
    background: #FAF6EE !important; /* Authentic vintage cream paper */
    padding: 10px !important; /* Uniform outer postcard border - perfectly centered */
    border-radius: 2px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.12),
        0 14px 28px -4px rgba(0, 0, 0, 0.26) !important;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease !important;
    transform-origin: center center !important;
    will-change: transform, box-shadow;
    margin: 0 !important;
    pointer-events: auto !important; /* Entire postcard area responds to hover & clicks */
    cursor: pointer;
}

/* Postcard Inner Photograph (Strictly 100% locked inside frame) */
#page\#5 picture > img,
#page\#6 picture > img,
#page\#7 picture > img,
#page\#8 picture > img,
#page\#9 picture > img,
#page\#10 picture > img,
#page\#11 picture > img,
#page\#12 picture > img,
#page\#14 picture > img,
#page\#15 picture > img,
#page\#16 picture > img,
#page\#18 picture > img,
#page\#19 picture > img,
#page\#20 picture > img,
#page\#22 picture > img,
#page\#23 picture > img,
.hs-postcard picture > img,
.hs-postcard-frame > img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    object-fit: cover !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important; /* Fine inner photo border */
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* ========================================================================
   Sidescrolling Article Gallery & Vintage Postcard Styling (Issue #6)
   ======================================================================== */

/* Legacy scattered cards hidden when gallery mounts */
.hs-legacy-card-hidden {
    display: none !important;
}

/* Ensure the section is a full-width container matching 100vh minus menu bar height */
.uk-section:has(.hs-gallery-wrapper),
.uk-section-default:has(.hs-gallery-wrapper),
.uk-section-primary:has(.hs-gallery-wrapper),
.uk-section-secondary:has(.hs-gallery-wrapper) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: calc(100vh - var(--hs-menubar-height, 80px)) !important;
    min-height: var(--hs-section-height) !important;
    height: calc(100vh - var(--hs-menubar-height, 80px)) !important;
    height: var(--hs-section-height) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
    scroll-margin-top: var(--hs-menubar-height, 80px) !important;
}

/* Section Title in Bodoni Moda with #B48908 */
.hs-section-heading {
    font-family: 'Bodoni Moda', serif !important;
    color: #B48908 !important;
    font-size: clamp(3rem, 5vw, 5rem) !important;
    text-align: center !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    margin: 0 auto 1.5rem auto !important;
    line-height: 1.1 !important;
    display: block !important;
    text-shadow: none !important;
}

/* Gallery Wrapper - 100% Full Width and 100vh minus menu bar height */
.hs-gallery-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100vh - var(--hs-menubar-height, 80px)) !important;
    height: var(--hs-section-height) !important;
    min-height: calc(100vh - var(--hs-menubar-height, 80px)) !important;
    min-height: var(--hs-section-height) !important;
    margin: 0 !important;
    padding: 20px 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 10 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.hs-gallery-slider {
    --hs-gallery-gap: 32px;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* Slider Container: Holds responsive viewport margins on both sides and enables horizontal scrolling */
.hs-gallery-slider .uk-slider-container {
    padding-left: var(--hs-gallery-gap, 32px) !important;
    padding-right: var(--hs-gallery-gap, 32px) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
}

.hs-gallery-slider .uk-slider-container::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Sidescroller Track: Uses negative margin matching item gutters so UIkit's getWidth/getMax accounts for all spaces */
.hs-slider-items {
    display: flex !important;
    align-items: center !important;
    padding-top: 50px !important;
    padding-bottom: 125px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 0 0 calc(-1 * var(--hs-gallery-gap, 32px)) !important;
    list-style: none !important;
    gap: 0 !important;
    will-change: transform;
}

/* Postcard Item in Gallery Track (Uniform Height, Aspect-Ratio Width + Exact Gutter) */
.hs-slider-item {
    flex: 0 0 auto !important;
    height: 420px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: var(--hs-gallery-gap, 32px) !important;
    padding-right: 0 !important;
    box-sizing: content-box !important;
    transition: opacity 0.35s ease, filter 0.35s ease !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 5 !important;
    user-select: none !important;
}

/* Postcard Frame */
.hs-postcard-frame {
    height: 100% !important;
    width: auto !important;
    display: inline-flex !important;
    flex-direction: column !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
    background: #FAF6EE !important; /* Authentic vintage cream paper */
    padding: 10px !important; /* Uniform outer postcard border */
    border-radius: 2px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 12px 24px -4px rgba(0, 0, 0, 0.22) !important;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease !important;
    margin: 0 !important;
    pointer-events: auto !important;
}

/* Postcard Inner Image */
.hs-postcard-frame > img {
    height: 100% !important;
    width: auto !important;
    max-height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    display: block !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Sibling Dimming: When ANY card is hovered, dim all non-hovered siblings */
.hs-slider-items.hs-has-hovered-item .hs-slider-item:not(.hs-item-is-hovered),
.hs-slider-items:has(.hs-slider-item:hover) .hs-slider-item:not(:hover) {
    opacity: 0.55 !important;
    filter: brightness(0.92) !important;
}

/* Hovered Card: Always 100% full opacity, bright, pop to front */
.hs-slider-item.hs-item-is-hovered,
.hs-slider-item:hover {
    opacity: 1 !important;
    filter: brightness(1) !important;
    z-index: 35 !important;
}

.hs-slider-item.hs-item-is-hovered .hs-postcard-frame,
.hs-slider-item:hover .hs-postcard-frame {
    transform: scale(1.1) !important;
    box-shadow:
        0 16px 32px -4px rgba(0, 0, 0, 0.25),
        0 28px 56px -8px rgba(0, 0, 0, 0.38) !important;
}

/* Slender Navigation Arrows Below Gallery */
.hs-slider-nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: -70px 0 0 0 !important;
    padding: 0 var(--hs-gallery-gap, 32px) !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 20 !important;
}

.hs-slider-arrow {
    color: #B48908 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.25s ease, transform 0.25s ease, opacity 0.25s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    padding: 8px 0 !important;
}

.hs-arrow-svg {
    width: 32px !important;
    height: 32px !important;
    stroke: currentColor !important;
    overflow: visible !important;
    display: block !important;
}

.hs-slider-prev:hover {
    color: #F2BB16 !important;
    transform: translateX(-5px) !important;
}

.hs-slider-next:hover {
    color: #F2BB16 !important;
    transform: translateX(5px) !important;
}

.hs-slider-arrow.uk-invisible,
.hs-slider-arrow[disabled],
.hs-slider-arrow[aria-disabled="true"] {
    opacity: 0.25 !important;
    pointer-events: none !important;
    cursor: default !important;
}

/* Fluid Responsiveness for Desktop, Tablet, Mobile */
@media (max-width: 1024px) {
    .hs-gallery-slider {
        --hs-gallery-gap: 24px;
    }
    .hs-slider-item {
        height: 340px !important;
    }
    .hs-slider-items {
        padding-top: 40px !important;
        padding-bottom: 100px !important;
    }
    .hs-slider-nav {
        margin: -55px 0 0 0 !important;
        padding: 0 var(--hs-gallery-gap, 24px) !important;
    }
}

@media (max-width: 767px) {
    .hs-gallery-slider {
        --hs-gallery-gap: 16px;
    }
    .hs-slider-item {
        height: 260px !important;
    }
    .hs-slider-items {
        padding-top: 30px !important;
        padding-bottom: 80px !important;
    }
    .hs-slider-nav {
        margin: -40px 0 0 0 !important;
        padding: 0 var(--hs-gallery-gap, 16px) !important;
    }
    .hs-arrow-svg {
        width: 26px !important;
        height: 26px !important;
    }
}

/* ========================================================================
   Vintage Moodboard Lightbox & Exploding Postcard Collage
   ======================================================================== */

.hs-moodboard-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: auto;
}

.hs-moodboard-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(140, 130, 122, 0.44) 0%, rgba(55, 48, 44, 0.48) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity 0.45s ease;
    cursor: pointer;
}

.hs-moodboard-overlay.hs-active .hs-moodboard-backdrop {
    opacity: 1;
}

.hs-moodboard-overlay.hs-closing .hs-moodboard-backdrop {
    opacity: 0;
}

.hs-moodboard-close {
    position: absolute;
    top: 28px;
    right: 32px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    color: #FAF6EE;
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: background 0.2s ease, transform 0.2s ease;
}

.hs-moodboard-close:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.08);
}

.hs-moodboard-stage {
    position: relative;
    width: 100%;
    max-width: 1100px;
    height: 640px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
    pointer-events: none;
}

/* --- Central Horizontal Postcard --- */
.hs-central-postcard {
    position: relative;
    width: 550px;
    max-width: 88vw;
    height: 350px;
    max-height: 60vh;
    background: #FAF6EE;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.5), 0 5px 15px rgba(0, 0, 0, 0.2);
    padding: 14px;
    box-sizing: border-box;
    z-index: 10;
    opacity: 0;
    transform: scale(0.35) rotate(-18deg);
    transform-origin: center center;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    pointer-events: auto;
}

.hs-moodboard-overlay.hs-active .hs-central-postcard {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.hs-moodboard-overlay.hs-closing .hs-central-postcard {
    opacity: 0;
    transform: scale(0.4) rotate(15deg);
}

.hs-postcard-inner {
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    gap: 14px;
}

.hs-postcard-photo-col {
    flex: 1 1 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hs-postcard-stamp-frame {
    width: 100%;
    height: 100%;
    background: #fff;
    padding: 6px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.hs-postcard-stamp-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hs-postcard-divider {
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(90, 80, 72, 0.25) 15%, rgba(90, 80, 72, 0.25) 85%, transparent);
    height: 90%;
    margin: auto 0;
}

.hs-postcard-message-col {
    flex: 1 1 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 10px 8px 10px 4px;
    box-sizing: border-box;
    position: relative;
    color: #4a4039;
}

.hs-postcard-note {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.hs-postcard-title {
    font-family: 'Imperial Script', cursive;
    font-size: 2.4rem;
    color: #2b2420;
    margin: 0 0 10px 0;
    line-height: 1.05;
}

.hs-postcard-lines {
    font-family: 'Noto Sans', 'Noto Serif', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.55;
    color: #4a4039;
    margin: 0 0 auto 0;
    overflow-y: auto;
    scrollbar-width: none;
    letter-spacing: 0.01em;
}

.hs-postcard-lines::-webkit-scrollbar {
    display: none;
}

.hs-postcard-lines p {
    margin: 0 0 10px 0;
    line-height: 1.55;
}

.hs-postcard-lines p:first-child {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #7a6e65;
    margin-bottom: 8px;
}

.hs-postcard-empty-space {
    flex: 1 1 auto;
    min-height: 120px;
}

/* --- Exploding Collage Cards --- */
.hs-moodboard-extras {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hs-exploding-card {
    position: absolute;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
    transform-origin: center center;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease-out;
    transition-delay: var(--delay);
    pointer-events: auto !important;
    cursor: default;
    will-change: transform, opacity;
}

.hs-moodboard-overlay.hs-active .hs-exploding-card {
    opacity: 1;
    transform: translate(calc(-50% + var(--target-x)), calc(-50% + var(--target-y))) rotate(var(--target-tilt)) scale(1);
}

.hs-moodboard-overlay.hs-closing .hs-exploding-card {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
}

.hs-exploding-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 1px;
}

/* Card Style: Photo */
.hs-card-photo {
    background: #FAF6EE;
    padding: 8px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.4);
    z-index: 3;
}

/* Card Style: Polaroid */
.hs-card-polaroid {
    background: #FAF6EE;
    padding: 8px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 18px 40px -6px rgba(0, 0, 0, 0.45);
    z-index: 4;
}

/* Card Style: Postage Stamp */
.hs-card-stamp {
    background: #FAF6EE;
    padding: 8px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.4);
    z-index: 2;
}