/* #region GLOBAL */

    :root {
        --burgundy: rgb(51, 17, 18);
        --burgundy-dark: #2e0d15;
        --burgundy-light: rgb(107, 40, 56);

        --rose: rgba(133, 77, 80, 1);
        --rose-light: rgb(216, 166, 171);

        --cream: rgba(251, 238, 221);
        --cream-dark: rgb(243, 228, 210);
        --warm-white: #fcfaf7;

        --heading-font: "Cormorant Garamond", serif;
        --body-font: "Montserrat", sans-serif;

        --transition: 0.3s ease;
    }

    .circle-image {
        display: block;

        width: 100%;
        aspect-ratio: 1 / 1;

        object-fit: cover;
        object-position: center;

        border-radius: 50%;
    }

    .circle-image-fade {
        -webkit-mask-image:
            radial-gradient(
                circle closest-side at center,
                #000 0%,
                #000 78%,
                rgba(0, 0, 0, 0.9) 84%,
                rgba(0, 0, 0, 0.65) 90%,
                rgba(0, 0, 0, 0.3) 96%,
                transparent 100%
            );

        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: 100% 100%;

        mask-image:
            radial-gradient(
                circle closest-side at center,
                #000 0%,
                #000 78%,
                rgba(0, 0, 0, 0.9) 84%,
                rgba(0, 0, 0, 0.65) 90%,
                rgba(0, 0, 0, 0.3) 96%,
                transparent 100%
            );

        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 100% 100%;
    }

    .circle-image-double-ring {
        box-sizing: content-box;

        padding: 0px;

        border: 3px solid var(--rose-light);

        outline: 3px solid var(--rose);
        outline-offset: 0px;
    }

    .double-border-divider {
        width: 100%;
        height: 6px;

        background:
            linear-gradient(
                to bottom,
                var(--rose-light) 0 3px,
                var(--rose) 3px 6px
            );
    }


    .double-border-divider-reverse {
        width: 100%;
        height: 6px;

        background:
            linear-gradient(
                to bottom,
                var(--burgundy-light) 0 3px,
                var(--rose-light) 3px 6px
            );
    }

/* #endregion */

/* #region RESET */

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        margin: 0;
        padding: 0;

        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        padding: 0;

        background: var(--burgundy);

        font-family: var(--body-font);
    }

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

    a {
        color: inherit;
        text-decoration: none;
    }

    /* #endregion */

/* #region TYPOGRAPHY */

    h1,
    h2,
    h3,
    h4 {
        margin-top: 0;

        font-family: var(--heading-font);
        font-weight: 500;
    }

    p {
        margin-top: 0;
    }

/* #endregion */

/* #region BUTTONS */

    .button {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        min-height: 46px;

        padding: 0 28px;

        border: 1px solid transparent;

        font-size: 0.82rem;
        font-weight: 500;

        cursor: pointer;

        transition:
            background var(--transition),
            color var(--transition),
            border-color var(--transition),
            transform var(--transition);
    }


    .button-primary {
        background: var(--rose);

        color: white;
    }


    .button-primary:hover {
        background: var(--rose-light);

        color: var(--burgundy);

        transform: translateY(-2px);
    }


    .button-secondary {
        background: transparent;

        border-color: rgba(255, 255, 255, 0.6);

        color: white;
    }


    .button-secondary:hover {
        background: var(--cream);

        border-color: var(--cream);

        color: var(--burgundy);

        transform: translateY(-2px);
    }

/* #endregion */

/* #region UNIVERSAL OPTION SLIDER */

    .options-section {
        position: relative;

        overflow: hidden;

        padding:
            clamp(24px, 2.5vw, 34px)
            0
            clamp(26px, 2.7vw, 36px);
    }


    .options-section-inner {
        width: min(
            1320px,
            calc(100% - clamp(40px, 6vw, 90px))
        );

        margin: 0 auto;
    }


    /* =========================
    HEADING
    ========================= */

    .options-section-heading {
        margin-bottom: clamp(14px, 1.6vw, 20px);

        text-align: center;
    }


    .options-section-heading h2 {
        margin: 0;

        font-family: var(--heading-font);

        font-size: clamp(2rem, 3.1vw, 3rem);
        font-weight: 500;

        line-height: 1;
    }


    .options-title-divider {
        display: flex;

        align-items: center;
        justify-content: center;

        gap: 9px;

        margin:
            7px
            0
            8px;
    }


    .options-title-divider span {
        width: 48px;
        height: 1px;
    }


    .options-title-divider img {
        display: block;

        width: 22px;
        height: auto;
    }


    .options-section-heading p {
        max-width: 780px;

        margin: 0 auto;

        font-size: clamp(0.72rem, 0.82vw, 0.82rem);

        line-height: 1.35;
    }


    /* =========================
    SLIDER
    ========================= */

    .options-slider-wrap {
        position: relative;

        padding:
            0
            clamp(40px, 4vw, 54px);
    }


    .options-slider {
        display: flex;

        gap: clamp(12px, 1.3vw, 16px);

        overflow-x: auto;

        padding:
            2px
            0
            4px;

        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;

        scrollbar-width: none;
    }


    .options-slider::-webkit-scrollbar {
        display: none;
    }


    /* =========================
    CARD
    ========================= */

    .option-card {
        display: flex;

        flex:
            0
            0
            clamp(210px, 20vw, 250px);

        flex-direction: column;

        overflow: hidden;

        border-radius: 8px;

        scroll-snap-align: start;
    }


    .option-card-image {
        display: block;

        width: calc(100% - 12px);
        height: clamp(92px, 8vw, 112px);

        margin:
            6px
            auto
            0;

        border-radius: 6px;

        object-fit: cover;
        object-position: center;
    }


    .option-card-content {
        display: grid;

        grid-template-rows:
            30px
            1px
            44px
            24px;

        align-items: center;

        padding:
            8px
            12px
            9px;

        text-align: center;
    }


    .option-card-content h3 {
        margin: 0;

        font-family: var(--body-font);

        font-size: clamp(0.68rem, 0.78vw, 0.78rem);
        font-weight: 600;

        letter-spacing: 0.13em;

        line-height: 1.15;

        text-transform: uppercase;
    }


    .option-card-divider {
        width: 34px;
        height: 1px;

        margin: 0 auto;
    }


    .option-card-content p {
        display: flex;

        align-items: center;
        justify-content: center;

        margin: 0;

        font-size: clamp(0.66rem, 0.72vw, 0.74rem);

        line-height: 1.25;
    }


    .option-card-price {
        align-self: end;

        font-family: var(--body-font);

        font-size: clamp(0.72rem, 0.82vw, 0.82rem);
        font-weight: 600;

        letter-spacing: 0.08em;
    }


    /* =========================
    ARROWS
    ========================= */

    .options-arrow {
        position: absolute;

        top: 50%;

        z-index: 5;

        display: flex;

        align-items: center;
        justify-content: center;

        width: 34px;
        height: 34px;

        padding: 0;

        border-radius: 50%;

        font-size: 0.8rem;

        cursor: pointer;

        transform: translateY(-50%);

        transition:
            color var(--transition),
            border-color var(--transition),
            background var(--transition);
    }


    .options-arrow-left {
        left: 0;
    }


    .options-arrow-right {
        right: 0;
    }

/* #endregion */

/* #region HEADER */

    .site-header {
        position: absolute;

        top: clamp(24px, 2.5vw, 40px);
        left: 0;

        z-index: 20;

        width: 100%;
    }


    /* =========================
    HEADER BACKGROUND
    ========================= */

    .site-header::before,
    .site-header::after {
        content: "";

        position: absolute;

        top: 0;
        bottom: 0;

        width: 50%;

        pointer-events: none;
    }


    .site-header::before {
        left: 0;

        background:
            linear-gradient(
                to right,
                rgba(51, 17, 18, 0.82) 0%,
                rgba(51, 17, 18, 0.82) 55%,
                rgba(51, 17, 18, 0.72) 65%,
                rgba(51, 17, 18, 0.42) 72%,
                rgba(51, 17, 18, 0.12) 78%,
                rgba(51, 17, 18, 0) 82%
            );
    }


    .site-header::after {
        right: 0;

        background:
            linear-gradient(
                to left,
                rgba(51, 17, 18, 0.82) 0%,
                rgba(51, 17, 18, 0.82) 55%,
                rgba(51, 17, 18, 0.72) 65%,
                rgba(51, 17, 18, 0.42) 72%,
                rgba(51, 17, 18, 0.12) 78%,
                rgba(51, 17, 18, 0) 82%
            );
    }


    /* =========================
    FULL-WIDTH BORDERS
    ========================= */

    .header-borders {
        position: absolute;

        inset: 0;

        z-index: 1;

        pointer-events: none;
    }


    .header-borders::before,
    .header-borders::after {
        content: "";

        position: absolute;

        left: 0;

        width: 100%;
        height: 1px;
    }


    .header-borders::before {
        top: 0;

        background:
            linear-gradient(
                to right,
                var(--rose) 0%,
                var(--rose) 22%,
                rgba(133, 77, 80, 0.65) 30%,
                rgba(133, 77, 80, 0.25) 36%,
                transparent 41%,
                transparent 59%,
                rgba(133, 77, 80, 0.25) 64%,
                rgba(133, 77, 80, 0.65) 70%,
                var(--rose) 78%,
                var(--rose) 100%
            );
    }


    .header-borders::after {
        bottom: 0;

        background:
            linear-gradient(
                to right,
                var(--rose) 0%,
                var(--rose) 25%,
                rgba(133, 77, 80, 0.65) 33%,
                rgba(133, 77, 80, 0.25) 39%,
                transparent 44%,
                transparent 56%,
                rgba(133, 77, 80, 0.25) 61%,
                rgba(133, 77, 80, 0.65) 67%,
                var(--rose) 75%,
                var(--rose) 100%
            );
    }


    /* =========================
    HEADER INNER
    ========================= */

    .header-inner {
        position: relative;

        z-index: 2;

        width: min(
            1450px,
            calc(100% - clamp(40px, 4vw, 80px))
        );

        height: clamp(110px, 7vw, 135px);

        margin: 0 auto;
    }


    .menu-toggle {
        display: none;
    }


    /* =========================
    MAIN NAV
    ========================= */

    .main-nav {
        position: relative;

        z-index: 3;

        display: flex;

        align-items: center;

        width: 100%;
        height: 100%;
    }


    .main-nav a {
        position: relative;

        display: flex;

        align-items: center;
        justify-content: center;

        flex: 1;

        height: 100%;

        padding:
            0
            clamp(10px, 1vw, 18px);

        color: var(--cream);

        font-family: var(--body-font);

        font-size: clamp(0.82rem, 0.82vw, 0.96rem);
        font-weight: 500;

        letter-spacing:
            clamp(0.1em, 0.12vw, 0.15em);

        text-align: center;
        text-decoration: none;
        text-transform: uppercase;

        white-space: nowrap;

        transition:
            color var(--transition);
    }


    /* =========================
    LOGO SPACE
    ========================= */

    .nav-logo-space {
        flex:
            0
            0
            clamp(280px, 21vw, 340px);
    }


    /* =========================
    NAV UNDERLINE
    ========================= */

    .main-nav a::before {
        content: "";

        position: absolute;

        left: 50%;
        top: calc(50% + 11px);

        width: 0;
        height: 1px;

        background: var(--rose);

        transform: translateX(-50%);

        transition:
            width var(--transition);
    }


    /* =========================
    NAV LEAF
    ========================= */

    .main-nav a::after {
        content: "";

        position: absolute;

        left: 50%;
        top: calc(50% + 16px);

        width: 28px;
        height: 12px;

        background:
            url("../images/leafborder.png")
            center / contain
            no-repeat;

        opacity: 0;

        transform:
            translateX(-50%)
            translateY(3px);

        transition:
            opacity var(--transition),
            transform var(--transition);
    }


    .main-nav a:hover {
        color: var(--rose);
    }


    .main-nav a:hover::before {
        width: calc(100% - 28px);
    }


    .main-nav a:hover::after {
        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0);
    }


    /* =========================
    CENTER LOGO
    ========================= */

    .header-logo-link {
        position: absolute;

        top: 50%;
        left: 50%;

        z-index: 5;

        display: block;

        transform: translate(-50%, -50%);
    }


    .header-logo {
        display: block;

        width: clamp(245px, 18vw, 305px);

        height: auto;
    }


    /* =========================
    CONSULTATION BUTTON
    ========================= */

    .main-nav .consultation-button {
        flex: 0 0 auto;

        height: auto;

        padding:
            12px
            clamp(16px, 1.3vw, 22px);

        border: 1px solid var(--cream);

        color: var(--cream);

        background: transparent;

        line-height: 1;

        transition:
            color var(--transition),
            border-color var(--transition);
    }


    .main-nav .consultation-button::before,
    .main-nav .consultation-button::after {
        display: none;
    }


    .main-nav .consultation-button:hover {
        color: var(--rose);

        border-color: var(--rose);
    }

/* #endregion */

/* #region HERO */

    .hero {
        position: relative;

        height: clamp(540px, 44vw, 680px);

        overflow: hidden;

        background: var(--burgundy);

        transition: height 0.4s ease;
    }


    /* =========================
    HERO INNER
    ========================= */

    .hero-inner {
        position: relative;

        z-index: 4;

        display: flex;
        align-items: flex-start;

        width: min(
            1320px,
            calc(100% - clamp(48px, 6vw, 110px))
        );

        height: 100%;

        box-sizing: border-box;

        margin: 0 auto;

        padding-top: clamp(210px, 15vw, 245px);
        padding-bottom: clamp(50px, 4vw, 65px);

        transition: padding-top 0.4s ease;
    }


    /* =========================
    HERO CONTENT
    ========================= */

    .hero-content {
        width: min(560px, 46%);

        margin-left: clamp(10px, 2vw, 34px);
    }

    .hero-eyebrow {
        margin:
            0
            0
            14px;

        color: var(--rose-light);

        font-size: clamp(0.72rem, 0.65vw, 0.84rem);
        font-weight: 500;

        letter-spacing: 0.22em;

        text-transform: uppercase;

        opacity: 0;

        animation:
            heroFadeIn
            1.7s
            ease-out
            0.1s
            forwards;
    }


    .hero-title {
        margin:
            0
            0
            22px;

        color: var(--cream);

        font-family: var(--heading-font);

        font-size: clamp(3rem, 5vw, 5rem);
        font-style: italic;
        font-weight: 300;

        line-height: 0.92;

        opacity: 0;

        animation:
            heroFadeIn
            1.9s
            ease-out
            0.25s
            forwards;
    }


    .hero-title span {
        display: block;

        margin-left: clamp(14px, 1.8vw, 28px);

        color: var(--rose-light);

        font-size: clamp(3.3rem, 4.5vw, 5rem);
        font-style: italic;
        font-weight: 300;

        line-height: 0.95;
    }


    /* =========================
    DESCRIPTION
    ========================= */

    .hero-description {
        max-width: 520px;

        margin: 0;

        color: rgba(251, 238, 221, 0.9);

        font-size: clamp(0.96rem, 0.86vw, 1.05rem);

        line-height: 1.7;

        opacity: 0;

        animation:
            heroFadeIn
            1.9s
            ease-out
            0.45s
            forwards;
    }


    .hero-button {
        display: flex;

        margin-top: 26px;
    }


    /* =========================
    HERO IMAGE
    ========================= */

    .hero-image-wrap {
        position: absolute;

        top: 0;
        right: 0;
        bottom: 0;

        z-index: 1;

        width: 50%;

        overflow: hidden;
    }


    .hero-image {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }


    /* =========================
    IMAGE FADE
    ========================= */

    .hero-image-wrap::before {
        content: "";

        position: absolute;

        inset: 0;

        z-index: 2;

        background:
            linear-gradient(
                to right,
                var(--burgundy) 0%,
                rgba(51, 17, 18, 0.95) 10%,
                rgba(51, 17, 18, 0.75) 22%,
                rgba(51, 17, 18, 0.45) 36%,
                rgba(51, 17, 18, 0.18) 50%,
                rgba(51, 17, 18, 0) 64%
            );

        pointer-events: none;
    }


    /* =========================
    UPPER IMAGE DARKENING
    ========================= */

    .hero-image-wrap::after {
        content: "";

        position: absolute;

        inset: 0;

        z-index: 1;

        background:
            linear-gradient(
                to bottom,
                rgba(20, 6, 7, 0.16) 0%,
                rgba(20, 6, 7, 0.05) 28%,
                rgba(20, 6, 7, 0) 55%
            );

        pointer-events: none;
    }


    /* =========================
    LOGO WATERMARK
    ========================= */

    .hero-watermark {
        position: absolute;

        left: 0;
        bottom: 0;

        z-index: 2;

        width: clamp(260px, 26vw, 390px);
        height: auto;

        filter: invert(1);

        opacity: 0.06;

        pointer-events: none;
        user-select: none;
    }


    /* =========================
    HERO ANIMATION
    ========================= */

    @keyframes heroFadeIn {

        from {
            opacity: 0;

            transform: translateY(12px);
        }

        to {
            opacity: 1;

            transform: translateY(0);
        }

    }

/* #endregion */

/* #region FOOTER */

    .site-footer {
        position: relative;

        width: 100%;

        padding:
            28px
            20px
            26px;

        background: var(--burgundy);

        border-bottom:
            1px solid rgba(133, 77, 80, 0.7);

        color: var(--cream);
    }


    .footer-inner {
        display: flex;

        flex-direction: column;

        align-items: center;
        justify-content: center;

        width: min(
            1180px,
            calc(100% - clamp(40px, 6vw, 90px))
        );

        margin: 0 auto;
    }


    /* =========================
    LOGO
    ========================= */

    .footer-logo-link {
        display: block;

        margin-bottom: 18px;
    }


    .footer-logo {
        display: block;

        width:
            clamp(150px, 13vw, 190px);

        height: auto;
    }


    /* =========================
    MENU TOGGLE
    ========================= */

    .footer-menu-toggle {
        display: none;
    }


    /* =========================
    NAV
    ========================= */

    .footer-nav {
        display: flex;

        align-items: center;
        justify-content: center;

        gap:
            clamp(26px, 3vw, 46px);

        margin-bottom: 22px;
    }


    .footer-nav a {
        position: relative;

        display: flex;

        align-items: center;
        justify-content: center;

        padding:
            0
            4px
            22px;

        color: var(--cream);

        font-family: var(--body-font);

        font-size:
            clamp(0.78rem, 0.8vw, 0.92rem);

        font-weight: 500;

        letter-spacing:
            clamp(0.1em, 0.12vw, 0.15em);

        text-align: center;
        text-decoration: none;
        text-transform: uppercase;

        white-space: nowrap;

        transition:
            color var(--transition);
    }


    /* =========================
    NAV UNDERLINE
    ========================= */

    .footer-nav a::before {
        content: "";

        position: absolute;

        left: 50%;
        bottom: 14px;

        width: 0;
        height: 1px;

        background: var(--rose);

        transform:
            translateX(-50%);

        transition:
            width var(--transition);
    }


    /* =========================
    NAV LEAF
    ========================= */

    .footer-nav a::after {
        content: "";

        position: absolute;

        left: 50%;
        bottom: 0;

        width: 34px;
        height: 14px;

        background:
            url("../images/leafborder.png")
            center / contain
            no-repeat;

        opacity: 0;

        transform:
            translateX(-50%)
            translateY(3px);

        transition:
            opacity var(--transition),
            transform var(--transition);
    }


    .footer-nav a:hover {
        color: var(--rose);
    }


    .footer-nav a:hover::before {
        width:
            calc(100% - 8px);
    }


    .footer-nav a:hover::after {
        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0);
    }


    /* =========================
    CONTACT ICONS
    ========================= */

    .footer-contact-icons {
        display: flex;

        align-items: center;
        justify-content: center;

        gap:
            clamp(18px, 2vw, 28px);

        margin-bottom: 22px;
    }


    .footer-contact-link {
        position: relative;

        display: block;

        width:
            clamp(38px, 3vw, 46px);

        height:
            clamp(38px, 3vw, 46px);

        line-height: 0;
    }


    /* BOTH ICON STATES */

    .footer-contact-icon {
        position: absolute;

        inset: 0;

        display: block;

        width: 100%;
        height: 100%;

        object-fit: contain;

        transition:
            opacity var(--transition);
    }


    /* DEFAULT */

    .footer-contact-icon-default {
        opacity: 1;
    }


    /* HOVER VERSION */

    .footer-contact-icon-hover {
        opacity: 0;
    }


    /* SWAP */

    .footer-contact-link:hover
    .footer-contact-icon-default {
        opacity: 0;
    }


    .footer-contact-link:hover
    .footer-contact-icon-hover {
        opacity: 1;
    }


    /* =========================
    CONSULTATION BUTTON
    ========================= */

    .footer-consultation-button {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        min-width: 190px;
        min-height: 42px;

        padding:
            0
            22px;

        border:
            1px solid var(--rose);

        background: transparent;

        color: var(--rose);

        font-family: var(--body-font);

        font-size: 0.68rem;
        font-weight: 500;

        line-height: 1;

        letter-spacing: 0.14em;

        text-decoration: none;
        text-transform: uppercase;

        transition:
            color var(--transition),
            border-color var(--transition),
            background var(--transition),
            transform var(--transition);
    }


    .footer-consultation-button:hover {
        background: var(--rose);

        border-color: var(--rose);

        color: var(--cream);

        transform:
            translateY(-2px);
    }


    /* =========================
    COPYRIGHT
    ========================= */

    .footer-copyright {
        width: 100%;

        padding:
            7px
            20px;

        background: var(--burgundy);

        text-align: center;
    }


    .footer-copyright p {
        margin: 0;

        color:
            rgba(251, 238, 221, 0.58);

        font-family: var(--body-font);

        font-size:
            clamp(0.5rem, 0.6vw, 0.58rem);

        letter-spacing: 0.16em;

        text-transform: uppercase;
    }

/* #endregion */



 /* #region HEADER + HERO RESPONSIVE */


    @media (max-width: 1025px) {

        /* =========================
        RESPONSIVE VARIABLES
        ========================= */

        :root {
            --responsive-hero-height: 620px;
            --responsive-hero-top: 250px;
            --responsive-nav-extra: 245px;
        }


        /* =========================
        HEADER
        ========================= */

        .site-header {
            top: 18px;
        }


        .header-inner {
            display: flex;
            flex-direction: column;
            align-items: center;

            width: calc(100% - 28px);

            height: auto;
            min-height: 118px;

            padding:
                10px
                16px
                12px;
        }


        /* =========================
        LOGO
        ========================= */

        .header-logo-link {
            position: relative;

            top: auto;
            left: auto;

            order: 1;

            transform: none;
        }


        .header-logo {
            width: 210px;
        }


        /* =========================
        HAMBURGER
        ========================= */

        .menu-toggle {
            position: relative;

            top: auto;
            right: auto;

            z-index: 10;

            order: 2;

            display: flex;

            flex-direction: column;
            align-items: center;
            justify-content: center;

            gap: 6px;

            width: 44px;
            height: 36px;

            margin:
                3px
                auto
                0;

            padding: 0;

            border: 0;

            background: transparent;

            cursor: pointer;

            transform: none;
        }


        .menu-toggle span {
            display: block;

            width: 26px;
            height: 1px;

            background: var(--cream);

            transition:
                transform var(--transition),
                opacity var(--transition),
                background var(--transition);
        }


        .menu-toggle:hover span {
            background: var(--rose);
        }


        .menu-toggle.is-open span:nth-child(1) {
            transform:
                translateY(7px)
                rotate(45deg);
        }


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


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


        /* =========================
        NAV
        ========================= */

        .main-nav {
            position: relative;

            top: auto;
            right: auto;

            order: 3;

            display: flex;

            flex-direction: column;
            align-items: center;

            width: 100%;
            height: auto;

            max-height: 0;

            margin: 0;
            padding: 0;

            overflow: hidden;

            opacity: 0;

            pointer-events: none;

            transition:
                max-height 0.4s ease,
                opacity 0.3s ease,
                padding 0.4s ease;
        }


        .main-nav.is-open {
            max-height: 310px;

            padding:
                6px
                0
                10px;

            opacity: 1;

            pointer-events: auto;
        }


        .nav-logo-space {
            display: none;
        }


        /* =========================
        NAV LINKS
        ========================= */

        .main-nav a {
            flex: none;

            width: min(360px, 100%);
            height: auto;

            padding:
                9px
                10px
                16px;

            font-size: 0.76rem;

            letter-spacing: 0.11em;

            text-align: center;
        }


        .main-nav a::before {
            top: auto;
            bottom: 10px;
        }


        .main-nav a:hover::before {
            width:
                min(
                    185px,
                    calc(100% - 60px)
                );
        }


        .main-nav a::after {
            top: auto;
            bottom: -1px;
        }


        /* =========================
        CONSULTATION BUTTON
        ========================= */

        .main-nav .consultation-button {
            width:
                min(
                    300px,
                    calc(100% - 36px)
                );

            margin-top: 6px;

            padding:
                12px
                16px;

            font-size: 0.74rem;
        }


        /* =========================
        HERO
        ========================= */

        .hero {
            height: var(--responsive-hero-height);
        }


        .hero-inner {
            width: calc(100% - 48px);

            padding-top: var(--responsive-hero-top);
            padding-bottom: 42px;
        }


        .hero-content {
            width: min(500px, 52%);

            margin-left: 0;
        }


        .hero-eyebrow {
            margin-bottom: 12px;

            font-size: 0.72rem;

            letter-spacing: 0.2em;
        }


        .hero-title {
            margin-bottom: 20px;

            font-size: clamp(2.8rem, 6vw, 4.2rem);

            line-height: 0.94;
        }


        .hero-title span {
            margin-left: 14px;

            font-size: clamp(3rem, 5.5vw, 4.3rem);

            line-height: 0.96;
        }


        .hero-description {
            max-width: 460px;

            font-size: 0.95rem;

            line-height: 1.65;
        }


        .hero-button {
            margin-top: 24px;
        }


        .hero-image-wrap {
            width: 48%;
        }


        .hero-watermark {
            width: clamp(230px, 28vw, 320px);
        }


        /* =========================
        HERO WHEN NAV IS OPEN
        ========================= */

        body:has(.main-nav.is-open) .hero {
            height:
                calc(
                    var(--responsive-hero-height)
                    + var(--responsive-nav-extra)
                );
        }


        body:has(.main-nav.is-open) .hero-inner {
            padding-top:
                calc(
                    var(--responsive-hero-top)
                    + var(--responsive-nav-extra)
                );
        }

    }

    @media (max-width: 768px) {

        :root {
            --responsive-hero-height: 600px;
            --responsive-hero-top: 240px;
            --responsive-nav-extra: 235px;
        }


        /* =========================
        HEADER
        ========================= */

        .site-header {
            top: 14px;
        }


        .header-inner {
            width: calc(100% - 24px);

            min-height: 110px;

            padding:
                9px
                14px
                11px;
        }


        .header-logo {
            width: 190px;
        }


        /* =========================
        HAMBURGER
        ========================= */

        .menu-toggle {
            width: 42px;
            height: 34px;

            gap: 5px;
        }


        .menu-toggle span {
            width: 24px;
        }


        .menu-toggle.is-open span:nth-child(1) {
            transform:
                translateY(6px)
                rotate(45deg);
        }


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


        /* =========================
        NAV
        ========================= */

        .main-nav a {
            padding:
                8px
                8px
                15px;

            font-size: 0.74rem;
        }


        .main-nav .consultation-button {
            width:
                min(
                    290px,
                    calc(100% - 32px)
                );

            padding:
                11px
                14px;
        }


        /* =========================
        HERO
        ========================= */

        .hero-inner {
            width: calc(100% - 40px);

            padding-bottom: 38px;
        }


        .hero-content {
            width: min(420px, 58%);
        }


        .hero-eyebrow {
            margin-bottom: 10px;

            font-size: 0.66rem;

            letter-spacing: 0.16em;
        }


        .hero-title {
            margin-bottom: 17px;

            font-size: clamp(2.35rem, 7vw, 3.6rem);

            line-height: 0.94;
        }


        .hero-title span {
            margin-left: 8px;

            font-size: clamp(2.55rem, 7.5vw, 3.8rem);

            line-height: 0.96;
        }


        .hero-description {
            max-width: 380px;

            font-size: 0.88rem;

            line-height: 1.6;
        }


        .hero-button {
            margin-top: 20px;
        }


        .hero-image-wrap {
            width: 50%;
        }


        .hero-image-wrap::before {
            background:
                linear-gradient(
                    to right,
                    var(--burgundy) 0%,
                    rgba(51, 17, 18, 0.96) 14%,
                    rgba(51, 17, 18, 0.82) 29%,
                    rgba(51, 17, 18, 0.55) 44%,
                    rgba(51, 17, 18, 0.2) 60%,
                    rgba(51, 17, 18, 0) 74%
                );
        }


        .hero-watermark {
            width: 225px;

            opacity: 0.045;
        }

    }

    @media (max-width: 480px) {

        :root {
            --responsive-hero-height: 540px;
            --responsive-hero-top: 225px;
            --responsive-nav-extra: 225px;
        }


        /* =========================
        HEADER
        ========================= */

        .site-header {
            top: 12px;
        }


        .header-inner {
            width: calc(100% - 24px);

            min-height: 118px;

            padding:
                8px
                12px
                10px;
        }


        /* =========================
        LOGO
        ========================= */

        .header-logo {
            width:
                clamp(
                    170px,
                    48vw,
                    200px
                );
        }


        /* =========================
        HAMBURGER
        ========================= */

        .menu-toggle {
            width: 40px;
            height: 32px;

            margin-top: 2px;

            gap: 5px;
        }


        .menu-toggle span {
            width: 24px;
        }


        /* =========================
        NAV
        ========================= */

        .main-nav.is-open {
            max-height: 290px;

            padding:
                5px
                0
                8px;
        }


        .main-nav a {
            width: 100%;

            padding:
                8px
                8px
                15px;

            font-size: 0.72rem;

            letter-spacing: 0.1em;
        }


        .main-nav a::before {
            bottom: 9px;
        }


        .main-nav a:hover::before {
            width:
                min(
                    175px,
                    calc(100% - 60px)
                );
        }


        .main-nav a::after {
            bottom: -2px;
        }


        .main-nav .consultation-button {
            width: calc(100% - 28px);

            margin-top: 5px;

            padding:
                11px
                12px;

            font-size: 0.71rem;
        }


        /* =========================
        HERO
        ========================= */

        .hero-inner {
            width: calc(100% - 30px);

            padding-bottom: 30px;
        }


        .hero-content {
            width: 100%;

            margin-left: 0;

            text-align: center;
        }


        .hero-eyebrow {
            margin:
                0
                0
                9px;

            font-size: 0.63rem;

            letter-spacing: 0.15em;
        }


        .hero-title {
            margin:
                0
                0
                15px;

            font-size:
                clamp(
                    2.35rem,
                    11vw,
                    3.15rem
                );

            line-height: 0.94;
        }


        .hero-title span {
            margin-left: 0;

            font-size:
                clamp(
                    2.55rem,
                    12vw,
                    3.4rem
                );

            line-height: 0.96;
        }


        .hero-description {
            max-width: 350px;

            margin:
                0
                auto;

            font-size: 0.86rem;

            line-height: 1.55;
        }


        .hero-button {
            justify-content: center;

            margin-top: 18px;
        }


        /* =========================
        HERO IMAGE
        ========================= */

        .hero-image-wrap {
            top: auto;
            right: 0;
            bottom: 0;

            width: 100%;
            height: 45%;
        }


        .hero-image {
            object-position: center;
        }


        .hero-image-wrap::before {
            background:
                linear-gradient(
                    to bottom,
                    var(--burgundy) 0%,
                    rgba(51, 17, 18, 0.96) 12%,
                    rgba(51, 17, 18, 0.78) 28%,
                    rgba(51, 17, 18, 0.38) 48%,
                    rgba(51, 17, 18, 0.08) 70%,
                    rgba(51, 17, 18, 0) 100%
                );
        }


        .hero-image-wrap::after {
            background:
                linear-gradient(
                    to bottom,
                    rgba(20, 6, 7, 0) 0%,
                    rgba(20, 6, 7, 0.08) 60%,
                    rgba(20, 6, 7, 0.18) 100%
                );
        }


        .hero-watermark {
            left: 50%;
            bottom: 12px;

            width:
                min(
                    220px,
                    60vw
                );

            transform:
                translateX(-50%);

            opacity: 0.035;
        }

    }


/* #endregion HEADER + HERO RESPONSIVE */

/* #region UNIVERSAL OPTION SLIDER RESPONSIVE */


/* =========================================================
   1025PX AND BELOW
   ========================================================= */

@media (max-width: 1025px) {

    .options-section {
        padding:
            28px
            0
            32px;
    }


    .options-section-inner {
        width: calc(100% - 56px);
    }


    /* =========================
       HEADING
       ========================= */

    .options-section-heading {
        margin-bottom: 18px;
    }


    .options-section-heading h2 {
        font-size:
            clamp(
                1.9rem,
                3.5vw,
                2.7rem
            );
    }


    .options-title-divider {
        gap: 8px;

        margin:
            7px
            0
            8px;
    }


    .options-title-divider span {
        width: 44px;
    }


    .options-title-divider img {
        width: 21px;
    }


    .options-section-heading p {
        max-width: 680px;

        font-size: 0.76rem;

        line-height: 1.4;
    }


    /* =========================
       SLIDER
       ========================= */

    .options-slider-wrap {
        padding:
            0
            44px;
    }


    .options-slider {
        gap: 14px;
    }


    /* =========================
       CARD
       ========================= */

    .option-card {
        flex:
            0
            0
            225px;
    }


    .option-card-image {
        height: 102px;
    }


    .option-card-content {
        padding:
            8px
            11px
            9px;
    }


    .option-card-content h3 {
        font-size: 0.72rem;
    }


    .option-card-content p {
        font-size: 0.69rem;
    }


    .option-card-price {
        font-size: 0.76rem;
    }


    /* =========================
       ARROWS
       ========================= */

    .options-arrow {
        width: 32px;
        height: 32px;

        font-size: 0.76rem;
    }

}


/* =========================================================
   768PX AND BELOW
   ========================================================= */

@media (max-width: 768px) {

    .options-section {
        padding:
            26px
            0
            30px;
    }


    .options-section-inner {
        width: calc(100% - 40px);
    }


    /* =========================
       HEADING
       ========================= */

    .options-section-heading {
        margin-bottom: 17px;
    }


    .options-section-heading h2 {
        font-size:
            clamp(
                1.8rem,
                5vw,
                2.4rem
            );
    }


    .options-title-divider {
        gap: 8px;

        margin:
            6px
            0
            8px;
    }


    .options-title-divider span {
        width: 42px;
    }


    .options-title-divider img {
        width: 21px;
    }


    .options-section-heading p {
        max-width: 520px;

        font-size: 0.74rem;

        line-height: 1.4;
    }


    /* =========================
       SLIDER
       ========================= */

    .options-slider-wrap {
        padding:
            0
            40px;
    }


    .options-slider {
        gap: 12px;
    }


    /* =========================
       CARD
       ========================= */

    .option-card {
        flex:
            0
            0
            215px;
    }


    .option-card-image {
        height: 100px;
    }


    .option-card-content {
        grid-template-rows:
            30px
            1px
            44px
            24px;

        padding:
            8px
            11px
            9px;
    }


    .option-card-content h3 {
        font-size: 0.7rem;
    }


    .option-card-content p {
        font-size: 0.67rem;
    }


    .option-card-price {
        font-size: 0.74rem;
    }


    /* =========================
       ARROWS
       ========================= */

    .options-arrow {
        width: 31px;
        height: 31px;

        font-size: 0.74rem;
    }

}


/* =========================================================
   480PX AND BELOW
   ========================================================= */

@media (max-width: 480px) {

    .options-section {
        padding:
            24px
            0
            28px;
    }


    .options-section-inner {
        width: calc(100% - 30px);
    }


    /* =========================
       HEADING
       ========================= */

    .options-section-heading {
        margin-bottom: 16px;
    }


    .options-section-heading h2 {
        font-size:
            clamp(
                1.7rem,
                7vw,
                2.1rem
            );
    }


    .options-title-divider {
        gap: 7px;

        margin:
            6px
            0
            8px;
    }


    .options-title-divider span {
        width: 38px;
    }


    .options-title-divider img {
        width: 20px;
    }


    .options-section-heading p {
        max-width: 330px;

        font-size: 0.7rem;

        line-height: 1.4;
    }


    /* =========================
       SLIDER
       ========================= */

    .options-slider-wrap {
        padding:
            0
            34px;
    }


    .options-slider {
        gap: 10px;
    }


    /* =========================
       CARD
       ========================= */

    .option-card {
        flex:
            0
            0
            min(
                230px,
                calc(100vw - 100px)
            );
    }


    .option-card-image {
        width: calc(100% - 10px);

        height: 96px;

        margin-top: 5px;
    }


    .option-card-content {
        grid-template-rows:
            28px
            1px
            42px
            23px;

        padding:
            7px
            10px
            8px;
    }


    .option-card-content h3 {
        font-size: 0.68rem;

        letter-spacing: 0.11em;
    }


    .option-card-content p {
        font-size: 0.65rem;
    }


    .option-card-price {
        font-size: 0.72rem;
    }


    /* =========================
       ARROWS
       ========================= */

    .options-arrow {
        width: 30px;
        height: 30px;

        font-size: 0.72rem;
    }

}


/* #endregion UNIVERSAL OPTION SLIDER RESPONSIVE */

    /* #region FOOTER RESPONSIVE */


    /* =========================================================
    1025PX AND BELOW
    ========================================================= */

    @media (max-width: 1025px) {

        .site-footer {
            padding:
                26px
                20px
                24px;
        }


        .footer-inner {
            width: calc(100% - 36px);
        }


        /* =========================
        LOGO
        ========================= */

        .footer-logo-link {
            margin-bottom: 8px;
        }


        .footer-logo {
            width: 175px;
        }


        /* =========================
        HAMBURGER
        ========================= */

        .footer-menu-toggle {
            display: flex;

            flex-direction: column;
            align-items: center;
            justify-content: center;

            gap: 6px;

            width: 44px;
            height: 36px;

            margin:
                0
                auto
                8px;

            padding: 0;

            border: 0;

            background: transparent;

            cursor: pointer;
        }


        .footer-menu-toggle span {
            display: block;

            width: 26px;
            height: 1px;

            background: var(--cream);

            transition:
                transform var(--transition),
                opacity var(--transition),
                background var(--transition);
        }


        .footer-menu-toggle:hover span {
            background: var(--rose);
        }


        /* =========================
        HAMBURGER OPEN
        ========================= */

        .footer-menu-toggle.is-open span:nth-child(1) {
            transform:
                translateY(7px)
                rotate(45deg);
        }


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


        .footer-menu-toggle.is-open span:nth-child(3) {
            transform:
                translateY(-7px)
                rotate(-45deg);
        }


        /* =========================
        NAV CLOSED
        ========================= */

        .footer-nav {
            display: flex;

            flex-direction: column;
            align-items: center;
            justify-content: center;

            width: 100%;

            max-height: 0;

            gap: 0;

            margin-bottom: 0;

            padding: 0;

            overflow: hidden;

            opacity: 0;

            pointer-events: none;

            transition:
                max-height 0.4s ease,
                opacity 0.3s ease,
                padding 0.4s ease,
                margin 0.4s ease;
        }


        /* =========================
        NAV OPEN
        ========================= */

        .footer-nav.is-open {
            max-height: 320px;

            margin-bottom: 20px;

            padding:
                8px
                0
                10px;

            opacity: 1;

            pointer-events: auto;
        }


        /* =========================
        NAV LINKS
        ========================= */

        .footer-nav a {
            width:
                min(
                    360px,
                    100%
                );

            padding:
                9px
                8px
                17px;

            font-size: 0.76rem;

            letter-spacing: 0.11em;

            text-align: center;
        }


        .footer-nav a::before {
            bottom: 10px;
        }


        .footer-nav a:hover::before {
            width:
                min(
                    180px,
                    calc(100% - 60px)
                );
        }


        .footer-nav a::after {
            bottom: -1px;
        }


        /* =========================
        CONTACT ICONS
        ========================= */

        .footer-contact-icons {
            margin-bottom: 18px;
        }


        /* =========================
        CONSULTATION BUTTON
        ========================= */

        .footer-consultation-button {
            min-width: 185px;

            min-height: 40px;
        }

    }


    /* =========================================================
    768PX AND BELOW
    ========================================================= */

    @media (max-width: 768px) {

        .site-footer {
            padding:
                24px
                18px
                22px;
        }


        .footer-inner {
            width: calc(100% - 28px);
        }


        .footer-logo {
            width: 165px;
        }


        .footer-menu-toggle {
            width: 42px;
            height: 34px;

            gap: 5px;
        }


        .footer-menu-toggle span {
            width: 24px;
        }


        .footer-menu-toggle.is-open span:nth-child(1) {
            transform:
                translateY(6px)
                rotate(45deg);
        }


        .footer-menu-toggle.is-open span:nth-child(3) {
            transform:
                translateY(-6px)
                rotate(-45deg);
        }


        .footer-nav.is-open {
            max-height: 300px;

            margin-bottom: 18px;

            padding:
                6px
                0
                8px;
        }


        .footer-nav a {
            padding:
                8px
                8px
                16px;

            font-size: 0.74rem;
        }


        .footer-contact-icons {
            gap: 18px;

            margin-bottom: 16px;
        }


        .footer-consultation-button {
            min-width: 180px;

            font-size: 0.66rem;
        }

    }


    /* =========================================================
    480PX AND BELOW
    ========================================================= */

    @media (max-width: 480px) {

        .site-footer {
            padding:
                22px
                14px
                20px;
        }


        .footer-inner {
            width: calc(100% - 20px);
        }


        .footer-logo {
            width: 155px;
        }


        .footer-menu-toggle {
            width: 40px;
            height: 32px;

            margin-bottom: 6px;
        }


        .footer-nav.is-open {
            max-height: 290px;

            margin-bottom: 16px;

            padding:
                5px
                0
                7px;
        }


        .footer-nav a {
            width: 100%;

            padding:
                8px
                6px
                15px;

            font-size: 0.72rem;

            letter-spacing: 0.1em;
        }


        .footer-nav a::before {
            bottom: 9px;
        }


        .footer-nav a:hover::before {
            width:
                min(
                    170px,
                    calc(100% - 50px)
                );
        }


        .footer-nav a::after {
            bottom: -2px;
        }


        .footer-contact-icons {
            gap: 16px;

            margin-bottom: 15px;
        }


        .footer-contact-link {
            width: 38px;
            height: 38px;
        }


        .footer-consultation-button {
            min-width: 175px;

            min-height: 39px;

            padding:
                0
                18px;

            font-size: 0.64rem;
        }


        .footer-copyright {
            padding:
                7px
                14px;
        }


        .footer-copyright p {
            font-size: 0.5rem;

            line-height: 1.5;

            letter-spacing: 0.12em;
        }

    }


    /* #endregion FOOTER RESPONSIVE */



/* #region DIVIDER TEMPLATE */
/* #endregion */