/*
Theme Name: Night Noise
Theme URI: https://nightnoise.com/
Author: Hello Hello Studio
Author URI: https://hellohellostudio.com
Description: A custom theme with heavy Gutenberg support.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
Text Domain: nightnoise
*/

html #wpadminbar {
    display: none;
}
html {
    margin-top: 0 !important;
    overscroll-behavior-y: none;
}
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: 1s ease-out both fadeOut;
}

::view-transition-new(root) {
    animation: 1s cubic-bezier(.645, .045, .355, 1) fadeIn;
}

@keyframes fadeOut {
    0% {
        opacity: 100%;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }
}

/* FONT IMPORTS */


/* ===================================
   CSS Variables
   =================================== */
:root {
    /* Colors */
    --color-oak: 147, 131, 111;
    --color-charcoal: 51, 50, 50;
    --color-dunegrass: 181, 176, 159;
    --color-cream: 252, 249, 247;
    --color-white: 255, 255, 255;

    /* Typography */
    --font-primary: "indivisible-variable", sans-serif;
    --font-primary-variation-settings: "wght" 450;

    --font-size-base: 16px;
    --font-size-body: clamp(0.81rem, 0.13vi + 0.78rem, 0.94rem);
    --font-size-small: 0.875rem;
    --font-size-extra-small: 0.625rem;
    --font-size-large: 1.25rem;
    --font-size-h0: clamp(2.5rem, 1.25vi + 2.19rem, 3.75rem);
    --font-size-h1: clamp(1.75rem, 1.25vi + 1.44rem, 3rem);
    --font-size-h2: clamp(1.38rem, 0.63vi + 1.22rem, 2rem);
    --font-size-h3: clamp(1.06rem, 0.31vi + 0.98rem, 1.38rem);
    --font-size-h4: clamp(0.81rem, 0.19vi + 0.77rem, 1rem);
    --font-size-h5: 0.75rem;
    --line-height-base: 1.3;
    --line-height-heading: 0.95;

    --font-slope: 0.16vw;
    --font-intercept: 11.2px;

    /* Spacing */
    --spacing-xs: 0.75rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;

    --spacing-post-image: clamp(4rem, 9.33vi + 1.67rem, 7.5rem);

    --spacing-exhibition-offset: clamp(5.31rem, 2.81vi + 4.61rem, 8.13rem);
    --spacing-exhibition-list-header: calc((var(--line-height-base) * var(--font-size-body)) + (2 * var(--spacing-xs)));
    --spacing-exhibition-list-h4: calc((var(--line-height-heading) * var(--font-size-body)) + (2 * var(--spacing-xs)));

    /* Layout */
    --border-radius: 4px;

    /* Transitions */
    --transition-speed: 0.3s;
    --transition-timing: ease-in-out;

    /* Video Player */
    --plyr-color-main: #ffffff;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ===================================
   Reset & Base Styles
   =================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base);
}

body {
    font-family: var(--font-primary);
    font-variation-settings: var(--font-primary-variation-settings);
    font-size: var(--font-size-body);
    line-height: var(--line-height-base);
    background-color: rgba(var(--color-cream),1);
    color: rgba(var(--color-oak),1);
    -webkit-font-smoothing: antialiased;
}

.wp-block-preformatted,
pre {
    font-family: var(--font-primary);
    font-variation-settings: var(--font-primary-variation-settings);
    font-size: var(--font-size-body);
    line-height: var(--line-height-base);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
}


input {
    font-family: var(--font-primary);
    font-variation-settings: var(--font-primary-variation-settings);
    color: rgba(var(--color-oak),1);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(var(--color-oak),1);
    border-radius: var(--spacing-md);
    font-size: var(--font-size-body);
    background-color: transparent;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-width: 1px;
    border-style: solid;
    line-height: 1;
    position: relative;
    border-radius: calc(((var(--font-size-body) * 1) + (var(--spacing-xs) * 2) + 2px) / 2);
    transition: all 0.3s ease;
    &:focus, &:focus-within, &:focus-visible {
        box-shadow: none;
        border-color: rgba(var(--color-oak),0.6);
        border-width: 1px;
        outline: 0;
    }
    @media screen and (max-width: 749px) {
        font-size: var(--font-size-base);
        border-radius: calc(((var(--font-size-base) * 1) + (var(--spacing-xs) * 2) + 2px) / 2);
    }

    &::placeholder {
        color: rgba(var(--color-oak),0.7);
        @media screen and (max-width: 749px) {
            font-size: var(--font-size-body);
        }
    }
}
.form-style {
    font-family: var(--font-primary);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(var(--color-oak),1);
    border-radius: var(--spacing-md);
    font-size: var(--font-size-body);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-width: 1px;
    border-style: solid;
    line-height: 1;
    position: relative;
    border-radius: calc(((var(--font-size-body) * 1) + (var(--spacing-xs) * 2) + 2px) / 2);
    transition: all 0.3s ease;
}
/* ===================================
   Posts & Content
   =================================== */

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
    @media screen and (min-width:750px) {
        padding: 0 var(--spacing-md);
    }
}
.entry-content {
    max-width: 700px;
    margin: 0 auto;
    &:has(.fluentform) {
        max-width: 100%;
    }
    & > .wp-block-heading:first-child {
        padding-top: var(--spacing-md);
    }
}
/* ===================================
Section Themes
   =================================== */
.theme-cream {
    background-color: rgba(var(--color-cream),1);
    color: rgba(var(--color-oak),1);
    * {
        color: rgba(var(--color-oak),1);
    }
}
.theme-dunegrass {
    background-color: rgba(var(--color-dunegrass),1);
    color: rgba(var(--color-cream),1);
    * {
        color: rgba(var(--color-cream),1);
    }
}
.theme-oak {
    background-color: rgba(var(--color-oak),1);
    color: rgba(var(--color-cream),1);
    * {
        color: rgba(var(--color-cream),1);
    }
}
.theme-charcoal {
    background-color: rgba(var(--color-charcoal),1);
    color: rgba(var(--color-cream),1);
    * {
        color: rgba(var(--color-cream),1);
    }
}
.theme-white {
    background-color: rgba(var(--color-white),1);
    color: rgba(var(--color-oak),1);
    * {
        color: rgba(var(--color-oak),1);
    }
}
.theme-hero {
    background-color: rgba(var(--color-white),0);
    color: rgba(var(--color-cream),1);
    * {
        color: rgba(var(--color-cream),1);
    }
}
[class^="theme-"] {
    transition: background-color 0.3 ease, color 0.3s ease;
    will-change: background-color, color;
}
/* ===================================
   Typography
   =================================== */
h1,
h2,
h3,
h4,
h5,
h6,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-primary);
    font-variation-settings: var(--font-primary-variation-settings);
    line-height: var(--line-height-heading);
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: var(--spacing-sm);
}

.h0 {
    font-size: var(--font-size-h0);
    text-transform: none;
}

h1,
.h1 {
    font-size: var(--font-size-h1);
    text-transform: none;
}

h2,
.h2 {
    font-size: var(--font-size-h2);
    text-transform: none;
    line-height: 1.3;
}

h3,
.h3 {
    font-size: var(--font-size-h3);
    text-transform: none;
    line-height: 1.3;
}

h4,
.h4 {
    font-size: var(--font-size-h4);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

h5,
.h5 {
    font-size: var(--font-size-extra-small);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

p {
    margin-bottom: 0;

    em {
        font-style: normal;
    }

    strong {
        font-variation-settings: "wght" 600;
    }

    strong em,
    em strong {
        font-weight: 400;
    }
}

a {
    color: rgba(var(--color-oak),1);
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-timing);

    &:hover {
        color: rgba(var(--color-oak),0.85);
    }
}

.entry {
    p {
        margin-bottom: var(--spacing-sm);
    }
}

.rte {
    *:not(:last-child) {
        margin-bottom: var(--spacing-sm);
    }
    * + h1,
    * + h2,
    * + h3,
    * + h4 {
        &:not(:last-child) {
            margin-top: var(--spacing-lg);
        }
    }
    ul {
        padding-left: var(--spacing-lg);
    }
}
/* ===================================
   Button
   =================================== */
.button {
    display: inline-flex;
    font-size: var(--font-size-body);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-width: 1px;
    border-style: solid;
    line-height: 1;
    position: relative;
    border-radius: calc(((var(--font-size-body) * 1) + (var(--spacing-xs) * 2) + 2px) / 2);
    transition: all 0.3s ease;
    background-color: rgba(var(--color-oak),1);
    border-color: rgba(var(--color-oak),1);
    color: rgba(var(--color-cream),1);
    &.button--large {
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: var(--font-size-h3);
        border-radius: calc(((var(--font-size-h3) * 1) + (var(--spacing-xs) * 2) + 2px) / 2);
    }
    &:hover {
        background-color: rgba(var(--color-oak),0.8);
        border-color: rgba(var(--color-oak),0.8);
    }
    .theme-charcoal & {
        background-color: rgba(var(--color-cream),1);
        border-color: rgba(var(--color-cream),1);
        color: rgba(var(--color-charcoal),1);
        &:hover {
            background-color: rgba(var(--color-cream),0.8);
            border-color: rgba(var(--color-cream),0.8);
        }
        &.button--secondary {
            background-color: rgba(var(--color-cream),0);
            border-color: rgba(var(--color-cream),1);
            color: rgba(var(--color-cream),1);
            &:hover {
                background-color: rgba(var(--color-cream),1);
                color: rgba(var(--color-charcoal),1);
            }
        }
    }
    .theme-oak & {
        background-color: rgba(var(--color-cream),1);
        border-color: rgba(var(--color-cream),1);
        color: rgba(var(--color-oak),1);
        &:hover {
            background-color: rgba(var(--color-cream),0.85);
            border-color: rgba(var(--color-cream),0.85);
        }
        &.button--secondary {
            background-color: rgba(var(--color-cream),0);
            border-color: rgba(var(--color-cream),1);
            color: rgba(var(--color-cream),1);
            &:hover {
                background-color: rgba(var(--color-cream),1);
                color: rgba(var(--color-oak),1);
            }
        }
    }
    .theme-dunegrass & {
        background-color: rgba(var(--color-cream),1);
        border-color: rgba(var(--color-cream),1);
        color: rgba(var(--color-dunegrass),1);
        &:hover {
            background-color: rgba(var(--color-cream),0.85);
            border-color: rgba(var(--color-cream),0.85);
        }
        &.button--secondary {
            background-color: rgba(var(--color-cream),0);
            border-color: rgba(var(--color-cream),1);
            color: rgba(var(--color-cream),1);
            &:hover {
                background-color: rgba(var(--color-cream),1);
                color: rgba(var(--color-dunegrass),1);
            }
        }
    }
    .theme-cream & {
        background-color: rgba(var(--color-oak),1);
        border-color: rgba(var(--color-oak),1);
        color: rgba(var(--color-cream),1);
        &:hover {
            background-color: rgba(var(--color-oak),0.85);
            border-color: rgba(var(--color-oak),0.85);
        }
        &.button--secondary {
            background-color: rgba(var(--color-oak),0);
            border-color: rgba(var(--color-oak),1);
            color: rgba(var(--color-oak),1);
            &:hover {
                background-color: rgba(var(--color-oak),1);
                color: rgba(var(--color-cream),1);
            }
        }
    }
    .theme-hero & {
        background-color: rgba(var(--color-cream),1);
        border-color: rgba(var(--color-cream),1);
        color: rgba(var(--color-oak),1);
        &:hover {
            background-color: rgba(var(--color-cream),0.9);
            border-color: rgba(var(--color-cream),0.9);
        }
        &.button--secondary {
            background-color: rgba(var(--color-cream),0);
            border-color: rgba(var(--color-cream),1);
            color: rgba(var(--color-cream),1);
            &:hover {
                background-color: rgba(var(--color-cream),0.2);
                border-color: rgba(var(--color-cream),0);
                backdrop-filter: blur(var(--spacing-sm));
                color: rgba(var(--color-cream),1);
            }
        }
    }
}

/* ===================================
   Layout
   =================================== */
.site-main,
.site>.content-area {
    min-height: 60vh;
}

/* ===================================
   Header Styles
   =================================== */
.site-header {
    position: fixed;
    z-index: 10;
    top: 0;
    width: 100%;
    left: 0;
    padding: var(--spacing-sm) 0;
    a:not(.button):hover {
        opacity: 0.85;
    }
    .home.is-resizing-hero & {
        &.theme-cream {
            background-color: rgba(var(--color-cream),0);
        }
    }
    &[class*="theme-"] * {
      transition: all 0.6s ease;
    }
}

.header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);

}

/* Header Left Section */
.header-left {
    width: 33%;
    @media screen and (min-width: 750px) {
        display: none;
    }
}

.header-icon {
    display: inline-flex;
    justify-content: center;
    align-self: flex-start;
    border: 0 none;
    background-color: transparent;
    transition: opacity var(--transition-speed) var(--transition-timing);
    cursor: pointer;

    svg {
        display: block;
    }
}

/* Header Center - Navigation */
.site-navigation {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    @media screen and (min-width:750px) {
        width: 33%;
        justify-content: flex-start;
    }
    .button {
        position: absolute;
        z-index: 1;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: all 1s ease;
        @media screen and (min-width:750px) {
            display: none;
        }
        .menu-open & {
            opacity: 1;
        }
    }
    .main-nav {
        list-style: none;
        display: flex;
        gap: var(--spacing-lg);
        margin: 0;
        padding: 0;

        li {
            margin: 0;

            &.current-menu-item {
                a {
                    &::before {
                        width: 100%;
                    }

                    &:hover {
                        &::before {
                            bottom: -2px;
                        }
                    }
                }
            }

            a {
                text-decoration: none;
                display: block;
                position: relative;
                transition: color var(--transition-speed) var(--transition-timing);
                .theme-cream & {
                    color: rgba(var(--color-oak),1);
                    &::before {
                      background-color: rgba(var(--color-oak),1);
                    }

                }
                .theme-oak & {
                    color: rgba(var(--color-cream),1);
                    &::before {
                      background-color: rgba(var(--color-cream),1);
                    }
                }
                .theme-hero & {
                    color: rgba(var(--color-cream),1);
                    &::before {
                      background-color: rgba(var(--color-cream),1);
                    }
                    &:hover {
                        color: rgba(var(--color-cream),0.7);
                        &::before {
                          background-color: rgba(var(--color-cream),0.7);
                        }
                    }
                }
                @media screen and (max-width: 749px) {
                    color: rgba(var(--color-cream),1) !important;
                }
                &::before {
                    content: "";
                    position: absolute;
                    bottom: -5px;
                    left: 0;
                    width: 0;
                    height: 1px;
                    transition: width var(--transition-speed) var(--transition-timing), bottom var(--transition-speed) var(--transition-timing);
                }

                &:hover::before {
                    width: 100%;
                }

                &.current-menu-item::before {
                    width: 100%;
                }
            }

            &:last-child a:after {
                content: "";
            }
        }
    }
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 7px 0;

    .menu-toggle-bar {
        width: 24px;
        height: 1px;

        transition: all var(--transition-speed) var(--transition-timing);
        .theme-cream & {
            background-color: rgba(var(--color-oak),1);
        }
        .theme-oak &,
        .theme-charcoal &,
        .theme-dunegrass &,
        .theme-hero & {
            background-color: rgba(var(--color-cream),1);
        }
        .menu-open & {
            background-color: rgba(var(--color-cream),1);
        }
    }

    &[aria-expanded="true"] {
        .menu-toggle-bar:nth-child(1) {
            transform: rotate(45deg) translate(2px, 2px);
        }

        .menu-toggle-bar:nth-child(2) {
            transform: rotate(-45deg) translate(1px, -2px);
        }
    }
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Header Right - Gallery Logo */
.header-right {
    width: 33%;
    display: flex;
    justify-content: flex-end;
    .book-btn-short {
        display: none;
    }
    @media screen and (max-width: 749px) {
        .book-btn-full {
            display: none;
        }
        .book-btn-short {
            display: inline;
        }
    }
}
.header-logo {
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 2;
    .logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        width: 190px;
        height: 21px;
        @media screen and (max-width: 749px) {
            width: 170px;
            height: 17px;
        }
    }
    svg {
        .theme-cream & {
            fill: rgba(var(--color-oak),1);
        }
        .theme-oak & ,
        .theme-charcoal & ,
        .theme-dunegrass & ,
        .theme-hero & {
            fill: rgba(var(--color-cream),1);
        }
        .menu-open & {
            fill: rgba(var(--color-cream),1);
        }
    }
}

/* ===================================
    MOBILE MENU
   =================================== */
@media screen and (max-width: 749px) {
    .menu-toggle {
        display: flex;
    }

    .header-left,
    .header-right {
        position: relative;
        z-index: 2;
    }
    .site-navigation {
        visibility: hidden;
        transition: all 1s ease;
        top: 0;
        margin-top: 0;
        left: 0;
        position: absolute;
        width: 100%;
        height: 100svh;
        z-index: 1;
        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(160, 160, 154, 0);
            backdrop-filter: blur(0);
            transition: all 1s ease;
        }

        .main-nav {
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: var(--spacing-xs);
            position: relative;
            z-index: 2;
            text-align: center;
            align-items: center;
            justify-content: center;
            padding: var(--spacing-xs);

            li {
                width: 100%;

                a {
                    font-size: clamp(2rem, 0.75vi + 1.81rem, 2.75rem);
                    line-height: 1.2;

                    &::before {
                        display: none;
                    }
                }

                &.current-menu-item {
                    position: relative;
                    &::after {
                        content: '';
                        background: rgba(var(--color-cream),1);
                        position: absolute;
                        bottom: -5px;
                        height: 5px;
                        width: 5px;
                        border-radius: 50%;
                        left: 50%;
                        transform: translateX(-50%);
                    }
                }
            }
        }



        .main-nav {
            opacity: 0;
            transition: opacity 1s ease;
        }


    }

    .menu-open {
        .header-wrapper {
            mix-blend-mode: normal;
            transition: all 1s ease;
        }

        .site-navigation {
            visibility: visible;

            &::after {
                background-color: rgba(160, 160, 154, 0.5);
                backdrop-filter: blur(15px);
            }

            .main-nav {
                opacity: 1;
            }
        }
    }
}

@media screen and (min-width: 1050px) {
    .site-header {
        .header-left {
            width: 220px;
        }
    }
}



/* ===================================
   Footer Styles
   =================================== */
.site-footer {
    padding: var(--spacing-md) 0;
    @media screen and (min-width: 750px) {
        padding: var(--spacing-lg) 0;
    }
    .nav-title {
        opacity: 0.7;
        margin-bottom: var(--spacing-sm);
        @media screen and (min-width: 750px) {
            margin-bottom: var(--spacing-md);
        }
    }
    nav {
        ul {
            list-style: none;
            li {
                margin-bottom: 5px;
                a {
                    position: relative;

                    &::before {
                        content: "";
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 0;
                        height: 1px;
                        background-color: var(--color-text);
                        transition: width var(--transition-speed) var(--transition-timing);

                    }

                    &:hover {
                        &::before {
                            width: 100%;
                        }
                    }
                }

                &.current-menu-item a:before {
                    width: 100%;
                }
            }
        }
    }
}

.footer-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg) var(--spacing-sm);

    @media screen and (min-width: 750px) {
        grid-template-columns: repeat(6, 1fr);
    }
}



.footer-newsletter {
    grid-column: span 3;
    button {
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        svg {
            width: 30px;
            height: 16px;
            fill: rgba(var(--color-oak),1);
            display: block;
        }
    }
    .newsletter-signup {
        position: relative;
        @media screen and (min-width: 750px) {
            max-width: 75%;
        }
        input {
            width: 100%;
        }
        button {
            position: absolute;
            right: var(--spacing-xs);
            top: 50%;
            transform: translateY(-50%);
        }
    }
}

.footer-credits {
    a {
        text-decoration: underline;
    }

    @media screen and (max-width: 749px) {
        grid-column: span 2;
    }
}

/* Footer Bottom Bar */
.footer-bottom {
    font-size: var(--font-size-h5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5vh;
    svg {
        height: 36px;
        width: 36px;
        fill: rgba(var(--color-oak),1);
    }
    p {
        margin: 0;
    }
    .footer-group {
        text-align: right;
    }

    @media screen and (min-width: 750px) and (max-width: 1199px) {
        row-gap: 0;
    }
}
/* ===================================
IMAGE AREA
   =================================== */
.image-area {
    &.landscape {
        aspect-ratio: 6 / 4;
        position: relative;
        img {
            position: absolute;
        }
    }
    &.square {
        aspect-ratio: 1 / 1;
        position: relative;
        img {
            position: absolute;
        }
    }
    &.portrait {
        aspect-ratio: 4 / 5;
        position: relative;
        img {
            position: absolute;
        }
    }
    &.rounded {
        border-radius: var(--spacing-md);
        overflow: hidden;
        position: relative;
    }
    &.circle {
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        img {
            left: 0;
            top: 0;
        }
    }
    img {
        object-fit: cover;
        height: 100%;
        width: 100%;
    }
}
/* ===================================
    HERO
   =================================== */
.hero {
    min-height: 100svh;
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    &.hero--xs {
        min-height: 33svh;
    }
    &.hero--sm {
        min-height: 50svh;
    }
    &.hero--md {
        min-height: 70svh;
    }
    &.hero--lg {
        min-height: 80svh;
    }
    &.hero--xl {
        min-height: 100svh;
    }
    &.aspect-ratio-mobile {
        min-height: 0;
        .hero-image {
            position: relative;
        }
        .hero-content {
            @media screen and (max-width: 749px) {
                padding-left: 0;
                padding-right: 0;
                .card--glass {
                    border: 1px solid rgba(var(--color-oak),1);
                    justify-content: center;
                    * {
                        color: rgba(var(--color-oak),1);
                    }

                }
            }
             @media screen and (min-width: 750px) {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);
             }
        }
    }
    .hero-image {
        height: 100%;
        width: 100%;
        position: absolute;
        .home-hero & {
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }
        img {
            object-fit: cover;
            height: 100%;
            width: 100%;
        }
        &.overlay {
            &:after {
                height: 100%;
                width: 100%;
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                background-color: rgba(var(--color-charcoal),0.1);
                z-index: 1;
            }
            &.overlay--10:after {
                background-color: rgba(var(--color-charcoal),0.1);
            }
            &.overlay--15:after {
                background-color: rgba(var(--color-charcoal),0.15);
            }
            &.overlay--20:after {
                background-color: rgba(var(--color-charcoal),0.20);
            }
            &.overlay--25:after {
                background-color: rgba(var(--color-charcoal),0.25);
            }
        }
    }
    .hero-content {
        height: 100%;
        display: flex;
        align-items: center;
        text-align: center;
        width: 100%;
        justify-content: center;
        z-index: 2;
        position: relative;
        flex-direction: column;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
        @media screen and (min-width: 750px) {
            padding: var(--spacing-md);
        }
        .hero-content--title {
            @media screen and (min-width: 750px) {
                max-width: 50%;
            }

            margin-left: auto;
            margin-right: auto;
            &:last-child {
                margin-bottom: 0;
            }
        }
        .home-hero & h1 {
            padding: 10vw;
            border-radius: 10.5vw;
            background: rgba(var(--color-white),0.2);
            backdrop-filter: blur(20px);
            min-width: 75%;
            text-align: center;
            margin: 0;
            @media screen and (max-width: 749px) {
                width: 50vw;
                padding: 25vh 10vw;
                border-radius: 50vw;
            }
        }
    }
    .hero-content--secondary {
        position: absolute;
        bottom: 30px;
        width: 100%;
        text-align: center;
        left: 0;
        z-index: 2;
        * {
            padding-left: var(--spacing-sm);
            padding-right: var(--spacing-sm);
            margin-bottom: 0;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
    }
    &.hero--overlay .hero-image:after {
        content:'';
        background: rgba(0,0,0,0.1);
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;

    }
    &.home-hero {
        position: sticky;
        top: 0;
        z-index: 1;
        background: transparent;
        h1 {
            color: rgba(var(--color-white),1);
        }
        .hero-image {
            overflow: hidden;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }


    }
    .section--overview & {
        min-height: 66vh;
        @media screen and (max-width: 749px) {
            min-height: 50vh;
        }
        .container {
            position: relative;
            height: 100%;
        }
        h2 {
            margin: 0 auto;
            line-height: 1.05;
            @media screen and (min-width: 750px) {
                max-width:50%;
            }
        }
        .hero-content {
            @media screen and (max-width: 749px) {
                padding: var(--spacing-sm);
            }
        }
    }
}
.secondary-hero-images {
    height: 100svh;
    margin-top: 30svh;
    position: relative;
    .image-wrapper {
        position: absolute;
        &:nth-child(1) {
            width: 15vw;
            top: 10vh;
            left: 5vw;
            @media screen and (max-width:749px) {
                width: 33vw;
            }
        }
        &:nth-child(2) {
            width: 7.5vw;
            left: 66vw;
            top: 5vh;
            @media screen and (max-width:749px) {
                width: 25vw;
            }
        }
        &:nth-child(3) {
            width: 12.5vw;
            left: 10vw;
            top: 80vh;
            @media screen and (max-width:749px) {
                width: 30vw;
                left: var(--spacing-sm);
            }
        }
        &:nth-child(4) {
            width: 15vw;
            left: 78vw;
            top: 55vh;
            @media screen and (max-width:749px) {
                width: 33vw;
                top: 70vh;
                left: auto;
                right: var(--spacing-sm);
            }
        }
        .image-area {
            position: relative;
            img {
                position: absolute;
            }
        }
    }

}
/* ===================================
   HOME SECTIONS
   =================================== */
.section--overview {
    padding: 5vh 0;
}
.hero-scroll {
    padding: 0;
    background-color: rgba(var(--color-cream),1);
}
#primary section:first-child:not(.theme-hero) .section-header {
    padding-top: 5vh;
}
section {
    padding: 7.5vh 0;
    @media screen and (min-width:750px) {
        padding: 10vh 0;
    }
    .section-header {
        display: flex;
        flex-direction:column;
        gap: var(--spacing-xs);
        padding-bottom: 5vh;
        *:last-child {
            margin-bottom: 0;
        }
        * + p {
            margin-top: var(--spacing-xl);
        }
        @media screen and (min-width:750px) {
            padding-bottom: 7.5vh;
            max-width: 50%;
            gap: var(--spacing-sm);
        }
        &.section-header--center {
            text-align: center;
            margin: 0 auto;
            @media screen and (min-width:750px) {
                max-width: 50%;
            }
        }
    }
    .section-footer {
        margin-top: 5vh;
        @media screen and (min-width: 750px) {
            margin-top: 7.5vh;
        }
        *:last-child {
            margin-bottom: 0;
        }
    }
}
.section--problem {
    .section-header {
        padding-bottom: 10vh;
        @media screen and (max-width:749px) {
            padding-bottom: 10vh;
        }
    }
    .section-content {
        padding-bottom: var(--spacing-xl);
        @media screen and (min-width:750px) {
            width: 25%;
        }
    }
}
.section--sleep-environment {
    .hero-content--bottom {
        display: flex;
        flex-direction: column;
        position: absolute;
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
        bottom: var(--spacing-md);
        gap: var(--spacing-xs);
        z-index: 2;
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
        @media screen and (min-width: 750px) {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
        }
        svg {
            width: 96px;
            height:96px;
            @media screen and (min-width: 750px) {
                grid-column: 1/2;
            }
        }
        p {
            @media screen and (min-width: 750px) {
                grid-column: 2/6;
            }
        }
        .cta {
            @media screen and (min-width: 750px) {
                grid-column: 11/-1;
                align-content: right;
                display: flex;
                align-items: flex-end;
                justify-content: flex-end;
            }
        }
    }
}
.section--benefits {
    .container {
        @media screen and (min-width: 750px) {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
    }
    .section-header {
        @media screen and (min-width: 750px) {
            max-width: 80%;
            align-self: flex-start;
            top: calc(10vh + 72px);
            justify-content: flex-start;
            padding-bottom: 0;
            position: sticky;
        }
        .section-nav {
            @media screen and (max-width: 749px) {
                display: none;
            }
            margin-top: 5vh;
            ul {
                list-style: none;
                padding: 0;
                li {
                    margin-bottom: var(--spacing-xs);
                    opacity: 0.5;
                    &.active {
                        opacity: 1;
                    }
                }
            }
        }
    }
    .card {
        opacity: 0.5;
        &.active {
            opacity: 1;
        }
    }
}
.section--two-features {
    text-align: center;
    .section-header {
        margin: 0 auto;
        gap: var(--spacing-md);
        @media screen and (min-width: 750px) {
            padding-bottom: 7.5vh;
        }
    }
    .cards {
        .card {
            gap: var(--spacing-md);
            display: flex;
            flex-direction: column;
            .content-group {
                @media screen and (max-width: 749px) {
                    gap: 8px;
                }
            }

        }
        @media screen and (min-width: 750px) {
            max-width: 66.666%;
            grid-template-columns: repeat(2, 1fr);
            margin: 0 auto;
            .card {
                padding: var(--spacing-xl);
                gap: var(--spacing-md);
                display: flex;
                flex-direction: column;
                .card-content {
                    gap: var(--spacing-md);
                }
            }
        }
    }
}
.section--steps {
    .hero-content {
        flex-direction: column;
        @media screen and (max-width: 749px) {
            padding-left: var(--spacing-sm);
            padding-right: var(--spacing-sm);
        }
    }
    .section-header {
        max-width: 100%;
    }
    .cards {
        width: 100%;
        text-align: left;
    }
    @media screen and (min-width: 750px) {
        .cards {
            gap: var(--spacing-md);
        }
        .hero-content {
            padding-left: 16.6667%;
            padding-right: 16.6667%;
        }
        .card {
            padding: var(--spacing-lg);
        }
    }
}

/* ===================================
   CARDS
   =================================== */
.cards {
    display: grid;
    gap: var(--spacing-xs);
    @media screen and (min-width:750px) {
        grid-template-columns: repeat(4, 1fr);

    }
    &.cards--columns-2 {
        @media screen and (min-width:750px) {
            grid-template-columns: repeat(2, 1fr);

        }
    }
    &.cards--columns-3 {
        @media screen and (min-width:750px) {
            grid-template-columns: repeat(3, 1fr);

        }
    }
    &.cards--columns-5 {
        @media screen and (min-width:750px) {
            grid-template-columns: repeat(5, 1fr);

        }
    }
    &.cards--columns-6 {
        @media screen and (min-width:750px) {
            grid-template-columns: repeat(6, 1fr);

        }
    }
    &.cards--vertical-md {
        @media screen and (min-width: 750px) {
            grid-template-columns: repeat(1, 1fr);
        }
    }
    &.cards--horizontal-xs {
        @media screen and (max-width: 749px) {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    &.card--row-small {
        @media screen and (min-width: 750px) {
            max-width: 66.666%;
            margin: 0 auto;
        }
    }
    &.card--arrows {
        gap: var(--spacing-lg);
        .card {
            align-items: center;
            display: flex;
        }
        .card:not(:last-child)::after {
            content: '';
            background-color: rgba(var(--color-oak),1);
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M7 4L13 10L7 16' /%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M7 4L13 10L7 16' /%3E%3C/svg%3E");
            mask-size: contain;
            position: absolute;
            right: calc(var(--spacing-lg)* -1); /* Halfway into the 40px gap */
            top: 50%;
            transform: translateY(-50%);
            height: var(--spacing-lg);
            width: var(--spacing-lg);
            @media screen and (max-width:749px) {
                transform: translateX(-50%) translateY(0) rotate(90deg);
                top: auto;
                right: auto;
                bottom: calc(var(--spacing-lg)* -1);
                left: 50%;
            }
        }
        .theme-oak &,
        .theme-charcoal &,
        .theme-dunegrass &,
        .theme-hero & {
            .card:not(:last-child)::after {
                background-color: rgba(var(--color-cream),1);

            }
        }
        .aspect-ratio-mobile & {
            @media screen and (max-width: 749px) {
                .card:not(:last-child)::after {
                    background-color: rgba(var(--color-oak),1);

                }
            }

        }

    }
}
.card {
    padding: var(--spacing-md);
    border-radius: var(--spacing-md);
    transition: all 0.6s ease;
    &.card--outline {
        border-width: 1px;
        border-style: solid;
        border-color: rgba(var(--color-oak), 1);
        .theme-oak & ,
        .theme-charcoal & ,
        .theme-dunegrass & ,
        .theme-hero & {
            border-color: rgba(var(--color-cream),0.2);
        }
        &:hover {
            background: rgba(var(--color-cream),0.04);
        }
    }
    &.card--glass {
        background: rgba(var(--color-white), 0.2);
        backdrop-filter: blur(var(--spacing-xs));
    }
    &.card--featured-icons {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xl);
        svg {
            height: 40px;
            width: 40px;
        }
    }
    &.card--featured-icons--horizontal {
        flex-direction: row;
        display: flex;
        gap: var(--spacing-sm);
        .card-content {
            flex: 1;
        }
        svg {
            height: 40px;
            width: 40px;
        }
    }
    &.card--featured-button {
        display: flex;
        flex-direction: row;
        gap: var(--spacing-md);
        justify-content: space-between;
        align-items: center;
        .button {
            white-space: nowrap;
        }
        @media screen and (max-width: 749px) {
            flex-direction: column;
            gap: var(--spacing-sm);
            justify-content: flex-start;
            align-items: flex-start;
        }
    }
    &.card--featured-image {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        @media screen and (min-width: 750px) {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
        &:hover {
            img {
                transform: scale(1.02);

            }
        }
        .card-content {
            justify-content: space-between;
        }
        .h4:before {
            height: var(--spacing-xs);
            width: var(--spacing-xs);
            background-color: rgba(var(--color-cream),1);
            content: '';
            display: inline-block;
            margin-right: 10px;
            border-radius: 50%;


        }
        img {
            transition: all 1s ease;
        }
    }

    .card-content {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
        .content-group {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xs);
        }
    }
}

/* ===================================
PAGE: FEATURES
   =================================== */
.section--timeline {
    .section-header.section-header--center {
        @media screen and (min-width: 750px) {
            min-width: 600px;
            max-width: 33%;
            margin: 0 auto;
        }
    }
    .cards {
        gap: 10vh;
        @media screen and (min-width: 750px) {
            min-width: 600px;
            max-width: 55%;
            margin: 0 auto;
        }
        @media screen and (min-width: 1500px) {
            max-width: 650px;
            margin: 0 auto;
        }
    }
    .card {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        position: relative;
        backdrop-filter: none;
        transition: all 0.75s ease;
        background: rgba(var(--color-white), 0.05);
        gap: var(--spacing-md);
        @media screen and (max-width: 749px) {
            grid-template-columns: repeat(1, 1fr);
            gap: var(--spacing-sm);
            background: rgba(var(--color-white), 0.2);
        }
        &:before {
            content: "";
            position: absolute;
            inset: 0;
            backdrop-filter: blur(15px);
            z-index: 0;
            pointer-events: none;
            border-radius: var(--spacing-md);
        }
        &:not(:last-child):after {
            content: '';
            width: 1px;
            position: absolute;
            transform: translateX(-50%);
            left: 50%;
            background: rgba(var(--color-white), 0.4);
            height: 10vh;
            bottom: -10vh;
        }
        .card-content {
            position: relative;
            z-index: 1;
            gap: var(--spacing-lg);
            opacity: 0.5;
            transition: all 0.75s ease;
            @media screen and (max-width: 749px) {
                gap: var(--spacing-sm);
            }
        }
        ul {
          list-style: none;
          padding-left: 1.3rem;
        }

        ul li {
          position: relative;
          margin-bottom: 0.3rem;
        }

        ul li::before {
          content: "✓";
          position: absolute;
          left: -1.3rem;
        }
        .image-area:not(:last-child) {
            opacity: 0.5;
            transition: all 0.75s ease;
        }
        .image-area:last-child {
            position: fixed;
            width: 100%;
            height: 100svh;
            top: 0;
            left: 0;
            z-index: -1;
            visibility: hidden;
            opacity: 0;
            filter: blur(15px);
            transition: all 1.1s ease;
            &:after {
                content: '';
                position: fixed;
                background: rgba(var(--color-charcoal),0.2);
                height: 100%;
                width: 100%;
                left: 0;
                top: 0;
                z-index: 0;
            }
        }
        &.active {
            background: rgba(var(--color-white), 0.2);
            @media screen and (max-width: 749px) {
                background: rgba(var(--color-white), 0.4);
            }
            .image-area:last-child {
                visibility: visible;
                opacity: 1;

            }
            .card-content {
                opacity: 1;
            }
            .image-area:not(:last-child) {
                opacity: 1;
            }
        }
    }
}
.feature-panels {
    display: flex;
    flex-direction: column;
    gap: 7.5vh;
}
.feature {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    row-gap: var(--spacing-lg);
    @media screen and (min-width: 750px) {
        grid-template-columns: repeat(2, 1fr);
    }
    .info {
        display: flex;
        flex-direction: column;
        row-gap: var(--spacing-lg);
        @media screen and (min-width: 750px) {
            padding-right: 20%;
        }
    }
}
.section--pattern-bg {
    position: relative;
    & > div:not(.pattern-bg) {
        position: relative;
        z-index: 1;
    }
}
.section--faq {
    padding-top: 20vh;
    min-height: 80svh;
    background-image: url('assets/images/pattern-cream.svg');
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.pattern-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    svg {
        position: absolute;
        top: 50%;
        height: 110%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        opacity: 0.3;
        .theme-charcoal & {
            opacity: 0.1;
        }
        @media screen and (min-width: 750px) {
            height: auto;
            width: 100%;
        }
    }
}
.testimonials-wrapper {
    gap: var(--spacing-xl);
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    padding-bottom: 10vh;
    @media screen and (min-width: 750px) {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xl);
        padding-bottom: 10vh;
    }
    .testimonial {
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        h3 {
            margin-bottom: 0;
        }
        @media screen and (min-width: 750px) {
        gap: var(--spacing-lg);
        }
        .profile {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-sm);
            align-items: center;
            @media screen and (min-width: 750px) {
                gap: var(--spacing-md);
            }
            .image-area {
                width: 110px;
                @media screen and (min-width: 750px) {
                width: 160px;
                }
                margin: 0 auto;
            }
        }
    }
}
.feature-checklist {
    opacity: 0.6;
}
.feature-checklist {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs) var(--spacing-md);
    flex-wrap: wrap;
    p {
        display: inline-flex;
        gap: 6px;
        align-items: center;
    }
    svg {
        flex: 1;
        height: 24px;
        width: 24px;
    }
}

/* ACCORDION */
.accordion-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    @media screen and (min-width: 750px) {
        gap: var(--spacing-lg);
        max-width: 66%;
        margin: 0 auto;
    }
    .accordion {
        background: rgba(var(--color-white), 0.2);
        backdrop-filter: blur(var(--spacing-xs));
        border-radius: var(--spacing-md);
        .accordion-title {
            display: flex;
            justify-content: space-between;
            padding: var(--spacing-md);
            align-items: center;
            gap: var(--spacing-md);
            svg {
                height: 25px;
                width: 25px;
                transition: all 0.5s ease;
            }
        }
        .accordion-content {
            overflow: hidden;
            transition: height 0.5s ease;
            .rte {
                max-width: 85%;
                padding: 0 var(--spacing-md) var(--spacing-md);
                @media screen and (min-width: 750px) {
                    max-width: 60%;
                }
            }
        }
        &.open {
            .accordion-title {
                svg {
                    transform: rotate(180deg);
                }
            }
        }
    }
}
/* ===================================
   Posts & Content
   =================================== */
.entry {
    width: clamp(500px, 50%, 700px);
    margin: 0 auto;

    @media screen and (max-width: 749px) {
        width: 100%;
        padding-left: var(--spacing-xs);
        padding-right: var(--spacing-xs);
    }

    .entry-title {
        margin-bottom: var(--spacing-xl);
    }

    .entry-content {
        margin-bottom: var(--spacing-md);

        img {
            max-width: 100%;
            height: auto;
        }
        && > .wp-block-heading:first-child {
            padding-top: var(--spacing-md);
        }
    }
    ul {
        margin-left: 12px;
        margin-bottom: 20px;
        list-style: square;
    }
    * + h1,
    * + h2,
    * + h3 {
        margin-top: 40px;
    }

}


/* ===================================
   Post Footer
   =================================== */
.post-footer {
    padding: 0 var(--spacing-xs) 10vh;
}




/* ===================================
   Gutenberg Block Styles
   =================================== */
.wp-block-group {
    margin-bottom: var(--spacing-lg);
}

.wp-block-image {
    margin-bottom: var(--spacing-md);

    img {
        border-radius: var(--border-radius);
    }
}

.wp-block-gallery {
    margin-bottom: var(--spacing-lg);
}

.wp-block-quote {
    border-left: 4px solid var(--color-secondary);
    padding-left: var(--spacing-md);
    margin: var(--spacing-lg) 0;
    font-style: italic;
    color: var(--color-text-light);
}


/* ===================================
   Utility Classes
   =================================== */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.mt-0 {
    margin-top: 0;
}

.mb-0 {
    margin-bottom: 0;
}

.hidden {
    display: none;
}

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

@media (max-width: 749px) {
  .mobile-horizontal-scroll {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: var(--spacing-sm) !important;

    /* 1. Crucial Fixes: Tells the container where the "snap boundary" is */
    scroll-padding-left: var(--spacing-sm);
    padding: 0 var(--spacing-sm) var(--spacing-sm);

    mask-image: linear-gradient(to right, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 95%, transparent 100%);
  }

  .container:has(.mobile-horizontal-scroll) {
      padding-left: 0;
      padding-right: 0;
  }

  /* 2. Updated Item Logic */
  .mobile-horizontal-scroll > * {
    flex: 0 0 90%;
    scroll-snap-align: start; /* Cleanly snaps exactly where scroll-padding-left dictates */

    /* Removed padding-left and margin-left:first-child to prevent broken layouts */
    view-timeline-name: --item-visible;
    view-timeline-axis: inline;
    animation-name: fade-in-out;
    animation-fill-mode: both;
    animation-timeline: --item-visible;
    animation-range: cover 0% cover 100%;
  }

  /* 3. Simplified Keyframes for Clean Visibility */
  @keyframes fade-in-out {
    0% { opacity: 0.4; }
    15%, 85% { opacity: 1; }
    100% { opacity: 0.4; }
  }
}

/* FLUENT FORM */
.page-template-page-booking {
    .hero-content {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}
#primary .fluentform {
    .page-template-page-booking & {
        padding: var(--spacing-xl);
        border-radius: var(--spacing-md);
        transition: all 0.6s ease;
        background: rgba(var(--color-white), 0.2);
        backdrop-filter: blur(var(--spacing-xs));
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        @media screen and (max-width:749px) {
            padding: var(--spacing-sm);
        }
        --fluentform-danger: #ffb2b2;
    }

    #fluentform_1 {
        width: 66%;
        margin: var(--spacing-xl) auto 0;
        @media screen and (max-width:749px) {
            width: 100%;
        }
    }
    .fluentform-step {
        padding: 0;
    }
    .frm-fluent-form {
        max-width: 100%;
    }
    .ff-step-container {
        @media screen and (min-width: 750px) {
            max-width: 680px;
        }
    }
    .ff-el-group {
        margin-bottom: var(--spacing-md);
        padding: 0;
        .page-template-page-booking & {
            margin-bottom: 0;
            padding: var(--spacing-xl) 0 ;
            @media screen and (max-width: 749px) {
                padding: var(--spacing-md) 0 0;
                margin-bottom: var(--spacing-md);
            }
        }
        .your-details & {
            padding: 0;
        }

        &.ff_submit_btn_wrapper_custom {
            margin-bottom: 0;
        }
        .theme-cream & {
            &.ff_submit_btn_wrapper {
                padding: var(--spacing-md) 0;
                text-align: center;
            }
        }
    }
    .ff-el-input--label {
        font-size: var(--font-size-body);
        margin-bottom: var(--spacing-xs);
        text-align: left;
        display: block;
        line-height: 1;
        .page-template-page-booking & {
            font-size: var(--font-size-h1);
            margin-bottom: var(--spacing-xl);
            text-align: center;
            @media screen and (max-width: 749px) {
                margin-bottom: var(--spacing-md);
                font-size: var(--font-size-h2);
            }
        }
        .your-details & {
            font-size: var(--font-size-body);
            margin-bottom: var(--spacing-xs);
            text-align: left;
        }

    }
    .your-details {
        padding: var(--spacing-xl) 0 ;
        @media screen and (max-width: 749px) {
            padding: var(--spacing-sm) 0 0;
        }
        .ff-t-cell {
            gap: var(--spacing-md);
        }
    }
    .fluent-address {
        & > .ff-el-input--label {
            display: none;
        }
        .ff-el-input--content {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
            @media screen and (max-width: 749px) {
                gap: 0;
            }
        }
    }
    .ff-el-form-control {
        border-radius: calc(((var(--font-size-base) * 1) + (var(--spacing-xs) * 2) + 2px) / 2);
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-base);
        line-height: 1;
        color: rgba(var(--color-cream), 1);
        background-color: transparent;
        &:-webkit-autofill,
        &:-webkit-autofill:hover,
        &:-webkit-autofill:active,
        &:-internal-autofill-selected {
            -webkit-box-shadow: none !important;
            -webkit-text-fill-color: rgba(var(--color-cream), 1) !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            transition: none !important;
        }
        &:focus,
        &:-webkit-autofill:focus,
        &:-internal-autofill-selected:focus {
            border-color: rgba(var(--color-cream), 0.2);
            background-color: rgba(var(--color-cream), 0.2) !important;
            backdrop-filter: blur(15px);
            transition: background-color 0s, color 0s, border-color 0s !important;
        }

        &::placeholder {
            color: rgba(var(--color-cream), 0.3);
        }
        .theme-cream & {
            color: rgba(var(--color-oak), 1);
            border-color: rgba(var(--color-oak), 1);
        }
    }


    .ff-step-titles {
        li {
            color: rgba(var(--color-cream),1);
            line-height: 1;
            opacity: 0.6;
            &.ff_active,
            &.ff_completed {
                opacity: 1;
            }
        }
        li:before {
            border-radius: 50%;
            background: transparent;
            border: 1px solid rgba(var(--color-cream),1);
            color: rgba(var(--color-cream),1);
        }
        li:after {
            background-color: transparent;
            height: 1px;
        }
        .ff-step-title-text {
            @media screen and (max-width: 749px) {
                display: none;
            }
        }
        li.ff_active:before,
        li.ff_completed:before {
          background-color: rgba(var(--color-cream),1);
          color: rgba(var(--color-charcoal),1);
        }
        li:first-child {
            &.ff_active:after {
                background-color: transparent;
            }
        }
        li.ff_active:after,
        li.ff_completed:after {
            background-color: rgba(var(--color-cream),1);
        }
    }
    .ff-el-group {
        &.ff_list_buttons {
            .ff_el_checkable_photo_holders {
                display: flex;
                flex-direction: column;
                gap: var(--spacing-md);
                margin: 0;
                @media screen and (max-width: 749px) {
                    gap: var(--spacing-xs);
                }
            }
            .ff-el-form-check {
                margin-bottom: 0;
                &.ff-el-image-holder {
                    border: 1px solid rgba(var(--color-cream),1);
                    border-radius: var(--spacing-md);
                    padding: var(--spacing-md);
                    display: flex;
                    gap: var(--spacing-md);
                    align-items: center;
                    position: relative;
                    @media screen and (max-width: 749px) {
                        padding: var(--spacing-sm);
                        gap: var(--spacing-sm);
                    }

                }
                &:hover {
                    @media screen and (min-width: 750px) {
                        opacity: 0.9;
                    }
                }
                label>span {
                    background: none;
                    padding: 0;
                    color: rgba(var(--color-cream),1);
                    font-size: var(--font-size-h3);
                    line-height: 1;
                    box-shadow: none;
                    white-space: normal;
                    text-align: left;

                    small, p {
                        font-size: var(--font-size-body);
                        line-height: 1.3;
                    }
                    h1, h2, h3, h4 {
                        margin-bottom: 0;
                    }
                }

                &.ff_item_selected {
                    background-color: rgba(var(--color-cream),1);
                    label>span, label>span small {
                        color: rgba(var(--color-charcoal),1);
                        * {
                            color: rgba(var(--color-charcoal),1);
                        }
                    }
                    .ff-el-image-input-src {
                        background-color: rgba(var(--color-dunegrass),1);
                    }
                }
            }
            .ff-el-form-check-label {
                flex: 1;
                span {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;


                }
                &:after {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top: 0;
                }
            }
        }

    }
    .pricing-options {
        &.ff-el-group.ff_list_buttons .ff_el_checkable_photo_holders {
            @media screen and (min-width: 750px) {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
            }
            .ff-el-image-input-src {
                display: none;
            }
            h2 + p {
                opacity: 0.7;
            }
            p:last-child {
                line-height: 2;
                margin-top: var(--spacing-lg);
                @media screen and (max-width: 749px) {
                    margin-top: var(--spacing-sm);
                }
            }
        }
    }
    .ff-el-is-error .text-danger {
        margin-top: var(--spacing-sm);
    }
    .ff-el-input--label.ff-el-is-required.asterisk-right label:after {
        color: rgba(var(--color-cream),1);
    }
    label.ff-el-image-input-src {
        width: 44px;
        height: 44px;
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: 50%;
        background-color: rgba(var(--color-cream),1);
        border-radius: 50%;
    }
    .ff-btn-secondary:not(.ff_btn_no_style),
    .ff-btn-submit {
        display: inline-flex;
        font-size: var(--font-size-body);
        padding: var(--spacing-xs) var(--spacing-sm);
        border-width: 1px;
        border-style: solid;
        line-height: 1;
        position: relative;
        border-radius: calc(((var(--font-size-body) * 1) + (var(--spacing-xs) * 2) + 2px) / 2);
        transition: all 0.3s ease;
        background-color: rgba(var(--color-cream),1);
        border-color: rgba(var(--color-cream),1);
        color: rgba(var(--color-charcoal),1);
        cursor:pointer;

        &.ff-btn-next {
            padding: var(--spacing-xs) var(--spacing-md);
            font-size: var(--font-size-h3);
            border-radius: calc(((var(--font-size-h3) * 1) + (var(--spacing-xs) * 2) + 2px) / 2);
        }
        &.ff-btn-prev {
            background: none;
            border-color: rgba(var(--color-cream),0);
            color: rgba(var(--color-cream),1);
            font-size: var(--font-size-small);
            &:hover {
                background-color: transparent;
                border-color: rgba(var(--color-cream),0.8);
                color: rgba(var(--color-cream),1);
            }
        }
        &:hover {
            background-color: rgba(var(--color-cream),0.8);
            border-color: rgba(var(--color-cream),0.8);
        }
        .theme-cream & {
            background-color: rgba(var(--color-oak),1);
            border-color: rgba(var(--color-oak),1);
            color: rgba(var(--color-cream),1);
            &:hover {
                background-color: rgba(var(--color-oak),0.8);
                border-color: rgba(var(--color-oak),0.8);
                color: rgba(var(--color-cream),1);
            }
        }
    }
    .ff-el-tooltip svg {
        fill: rgba(var(--color-cream),1);
    }
    .ff-btn-submit {
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: var(--font-size-h3);
        border-radius: calc(((var(--font-size-h3) * 1) + (var(--spacing-xs) * 2) + 2px) / 2);
        justify-content: center;
    }
    .ff-step-t-container {
        justify-content: center;
        flex-direction: column;
    }
    .step-nav {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
        align-items: center;
        padding: var(--spacing-lg);
        justify-content: center;
        @media screen and (max-width: 749px) {
            padding: var(--spacing-sm) 0 0;
            gap: var(--spacing-sm);
        }
        .ff-btn {
            float: none !important;
            &.ff-btn-prev {
                order: 2;
            }
            &.ff-btn-next {
                order: 1;
            }
        }
    }
    .helper-section {
        background-color: rgba(var(--color-cream),1);
        padding: var(--spacing-md) !important;
        margin-top: var(--spacing-lg);
        .page-template-page-booking & {
            border-radius: var(--spacing-md);
        }
        * {
            color: rgba(var(--color-oak),1);
        }
        .card {
            border-color: rgba(var(--color-oak),1);
            h4 {
                margin: 0;
            }
        }
        .cards {
            margin: var(--spacing-lg) 0;
        }
        p + p {
            margin-top: 10px;
        }
        .helper {
            margin-top: var(--spacing-md);
            opacity: 0.7;
        }
    }
    .install-day, .construction-pricing {
        padding: var(--spacing-sm) 0;
        border-top: 1px solid rgba(var(--color-cream),1);
        border-bottom: 1px solid rgba(var(--color-cream),1);
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: var(--spacing-sm);
        @media screen and (min-width:750px) {
            grid-template-columns: repeat(2, 1fr);
            padding: var(--spacing-xl) 0;
        }
        h4 {
            grid-column: 1 / -1;
            margin: 0;
        }
        p {
            text-align: left;
        }
    }
    .construction-pricing {
        @media screen and (min-width:750px) {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    .booking-terms {
         padding: var(--spacing-lg);
         background-color: rgba(var(--color-cream),1);
         border-radius: var(--spacing-md);
         height: 200px;
         overflow-y:scroll;
         color: rgba(var(--color-oak),1);
         margin-top: var(--spacing-xl);
         text-align: left;
         @media screen and (max-width:749px) {
            margin-top: var(--spacing-md);
            padding: var(--spacing-md);
         }
         * {
             color: rgba(var(--color-oak),1);
         }
    }
    .terms-checkbox {
        padding: 0;
        .ff-el-input--label {
            display: none;
        }
        .ff-el-form-check {
            background: transparent;
            .ff-el-form-check-label > span {
                padding: var(--spacing-md);
                border-radius: var(--spacing-md);
                display: flex;
                align-items: center;
                gap: var(--spacing-sm);
                flex-direction: row;
                border-color: transparent !important;
                &:before {
                    content: '';
                    background-size: 30px 30px;
                    background-position: center;
                    border-radius: 50%;
                    height: 30px;
                    width: 30px;
                    font-size: var(--font-size-body);
                    text-align: center;
                    border: 1px solid rgba(var(--color-cream),1);
                    color: rgba(var(--color-oak),0);
                    box-sizing: border-box;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-grow: 0;
                    flex-shrink: 0;
                }
            }
            &.ff_item_selected {
                background: transparent !important;
                .ff-el-form-check-label > span {
                    border-color: transparent;
                    color: rgba(var(--color-cream),1) !important;
                    &:before {
                        background-image: url('assets/images/tick.svg');
                    }
                }
            }
        }

    }
    /* FLUENT BOOKING */
    .fcal_wrap .fcal_holder {
        @media screen and (max-width:749px) {
            border-top: 1px solid rgba(var(--color-cream),1);
        }
    }
    .fcal_wrap .fcal_calendar_inner {
        background-color: transparent;
        .fcal_icon_item {
            &:last-child {
                margin-bottom: 0;
            }
            img {
                filter: brightness(0) invert(1);
            }
            svg {
                fill: rgba(var(--color-cream),1);
            }
        }
        .fcal_side {
            background-color: transparent;
            text-align: left;
            @media screen and (max-width:749px) {
                border-bottom: 1px solid rgba(var(--color-cream),1);
            }
            .fcal_author {
                display: none;
            }
            .fcal_slot_heading {
              color: rgba(var(--color-cream),1);
              line-height: 1.1;
              @media screen and (max-width:749px) {
                  font-size: var(--font-size-h3);
              }
            }
        }
        .calendar-container {
            * {
              color: rgba(var(--color-cream),1);
            }
        }
        .fcal_date_wrapper {
            .calendar {
                @media screen and (max-width:749px) {
                    padding: var(--spacing-xs);
                    border-radius: var(--spacing-md);
                    margin-top: var(--spacing-xs);
                    border: 1px solid rgba(var(--color-cream),1);
                }
                .day{
                    &>span {
                        border-radius: 50%;
                    }
                    &.day-disabled {
                        span {
                            background: transparent;
                            opacity: 0.4;
                        }
                    }
                    &.day-enabled {
                        span {
                            background: transparent;
                        }
                        &:hover {
                            span {
                                background-color: rgba(var(--color-cream),1);
                                color: rgba(var(--color-charcoal),1);
                            }
                        }
                    }
                    .is-today:before {
                        background-color: rgba(var(--color-cream),1);
                    }
                }
            }
        }
    }
    .fcal_slot_picker {
        background-color: transparent;
        @media screen and (max-width:749px) {
            padding: 0;
        }
        .fcal_slot_picker_header {
            background-color: rgba(var(--color-cream),0);
            color: rgba(var(--color-cream),1);
            .fcal_slot_date_info {
                color: rgba(var(--color-cream),1);
            }
        }
        .fcal_slot_picker_header_action .format-hour button {
            color: rgba(var(--color-cream),1);
            &.active {
                background-color: rgba(var(--color-cream),1);
                color: rgba(var(--color-charcoal),1);
            }
        }
        .fcal_spot_lists {
            .fcal_spot {
                background-color: rgba(var(--color-cream),0);
                border-color: rgba(var(--color-cream),1);
                color: rgba(var(--color-cream),1);
                &:hover {
                    background-color: rgba(var(--color-cream),0.2);
                    backdrop-filter: blur(15px);
                    border-color: rgba(var(--color-cream),0.2);
                }
                 .fcal_spot_confirm {
                     background-color: rgba(var(--color-white),1);
                     color: rgba(var(--color-charcoal),1);
                 }
            }
        }
    }
    .fcal_back button.fcal_svg {
        border-color: rgba(var(--color-cream),1) !important;
        svg, path:last-child {
            fill: rgba(var(--color-cream),1) !important;
        }
        &:hover {
            border-color: rgba(var(--color-cream),1) !important;
            background-color: rgba(var(--color-cream),1) !important;
            svg, path:last-child {
                fill: rgba(var(--color-charcoal),1) !important;
            }
        }
    }
    .fcal_date_event_details {
        background-color: rgba(var(--color-cream),0);
        color: rgba(var(--color-cream),1);
        .fcal_date_event_details_header {
            h3 {
                color: rgba(var(--color-cream),1);
            }

        }
        .fcal_form_booking_details table tr th {
            background-color: rgba(var(--color-cream),0);
            color: rgba(var(--color-cream),1);
        }
        .fcal_booking_form .fcal_form_item .fcal_input_content {
            text-align: left;
            .fcal_input_label {
               color: rgba(var(--color-cream),1);
            }
        }
    }
    .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content input,
    .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content select,
    .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content textarea {
        background-color: rgba(var(--color-cream),0);
        border-color: rgba(var(--color-cream),1);
        color: rgba(var(--color-cream),1);
        &::placeholder {
            color: rgba(var(--color-cream),0.4);
        }
        &:hover {
            background-color: rgba(var(--color-cream),0.2);
            backdrop-filter: blur(15px);
            border-color: rgba(var(--color-cream),0.2);
        }
    }
    .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_input_wrap.fcal_field_name_address svg circle,
    .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_input_wrap.fcal_field_name_address svg path {
        fill: rgba(var(--color-cream),1);
    }
    .svelte-select {
        background: transparent !important;
        text-align: left;
        &.focused {
            border-color: rgba(var(--color-cream),1) !important;
        }
        &.list-open:before {
            border-left-color: rgba(var(--color-cream),1);
            border-bottom-color: rgba(var(--color-cream),1);
        }
        .svelte-select-list {
            .item {
                &.active {
                    background-color: rgba(var(--color-oak),1) !important;
                }
                &.hover, &:hover {
                    background-color: rgba(var(--color-oak),0.2) !important;
                    color:  rgba(var(--color-charcoal),1) !important;
                }
            }
        }
    }
    .fcal_calendar_inner.fcal_on_xs.fcal_form_calendar .fcal_date_wrapper .fcal_day_picker_wrap {
        position: relative !important;
    }

}