/*! CSS Used from: Embedded */
*, *::before, *::after {
    box-sizing: border-box
}

* {
    margin: 0
}

:root {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    scroll-behavior: smooth;
    interpolate-size: allow-keywords
}

body {
    min-height: 100dvh;
    overflow-x: clip;
    line-height: 1.5;
    font-synthesis: unset
}

:target {
    scroll-margin-block: 5ex
}

p {
    text-wrap: pretty
}

h1 {
    text-wrap: balance
}

.header-right .header-button-text, .logo svg path, .header, .booking-mask .booking-field .search-dropdown .search-results .search-results-list .search-result-item .search-result-item-title, .booking-mask .booking-field .search-dropdown, .booking-mask .booking-field .booking-field-select {
    transition: all .3s ease-out
}

:root {
    --color-dark-grey: #676A6A;
    --color-dark-grey-a75: color-mix(in srgb, var(--color-dark-grey), transparent 25%);
    --color-dark-grey-a50: color-mix(in srgb, var(--color-dark-grey), transparent 50%);
    --color-dark-grey-a25: color-mix(in srgb, var(--color-dark-grey), transparent 75%);
    --color-dark-grey-a10: color-mix(in srgb, var(--color-dark-grey), transparent 90%);
    --color-dark-grey-a5: color-mix(in srgb, var(--color-dark-grey), transparent 95%);
    --color-dark-grey-a1: color-mix(in srgb, var(--color-dark-grey), transparent 99%);
    --color-black: #000;
    --color-black-a75: color-mix(in srgb, var(--color-black), transparent 25%);
    --color-black-a50: color-mix(in srgb, var(--color-black), transparent 50%);
    --color-black-a25: color-mix(in srgb, var(--color-black), transparent 75%);
    --color-black-a10: color-mix(in srgb, var(--color-black), transparent 90%);
    --color-black-a5: color-mix(in srgb, var(--color-black), transparent 95%);
    --color-black-a1: color-mix(in srgb, var(--color-black), transparent 99%);
    --color-white: #FFFFFF;
    --color-white-a75: color-mix(in srgb, var(--color-white), transparent 25%);
    --color-white-a50: color-mix(in srgb, var(--color-white), transparent 50%);
    --color-white-a25: color-mix(in srgb, var(--color-white), transparent 75%);
    --color-white-a10: color-mix(in srgb, var(--color-white), transparent 90%);
    --color-white-a5: color-mix(in srgb, var(--color-white), transparent 95%);
    --color-white-a1: color-mix(in srgb, var(--color-white), transparent 99%);
    --color-gray-950: color-mix(in srgb, var(--color-black), var(--color-white) 5%);
    --color-gray-900: color-mix(in srgb, var(--color-black), var(--color-white) 10%);
    --color-gray-800: color-mix(in srgb, var(--color-black), var(--color-white) 20%);
    --color-gray-700: color-mix(in srgb, var(--color-black), var(--color-white) 30%);
    --color-gray-600: color-mix(in srgb, var(--color-black), var(--color-white) 40%);
    --color-gray-500: color-mix(in srgb, var(--color-black), var(--color-white) 50%);
    --color-gray-400: color-mix(in srgb, var(--color-black), var(--color-white) 60%);
    --color-gray-300: color-mix(in srgb, var(--color-black), var(--color-white) 70%);
    --color-gray-200: color-mix(in srgb, var(--color-black), var(--color-white) 80%);
    --color-gray-100: color-mix(in srgb, var(--color-black), var(--color-white) 90%);
    --color-gray-50: color-mix(in srgb, var(--color-black), var(--color-white) 95%);
    --color-primary: #C7135D;
    --color-primary-reverse: var(--color-white);
    --color-primary-lightest: color-mix(in srgb, var(--color-primary), white 87.5%);
    --color-primary-lighter: color-mix(in srgb, var(--color-primary), white 50%);
    --color-primary-light: color-mix(in srgb, var(--color-primary), white 25%);
    --color-primary-dark: color-mix(in srgb, var(--color-primary), black 25%);
    --color-primary-darker: color-mix(in srgb, var(--color-primary), black 50%);
    --color-primary-darkest: color-mix(in srgb, var(--color-primary), black 87.5%);
    --color-secondary: #C2B59B;
    --color-secondary-reverse: var(--color-white);
    --color-secondary-lightest: color-mix(in srgb, var(--color-secondary), white 87.5%);
    --color-secondary-lighter: color-mix(in srgb, var(--color-secondary), white 50%);
    --color-secondary-light: color-mix(in srgb, var(--color-secondary), white 25%);
    --color-secondary-dark: color-mix(in srgb, var(--color-secondary), black 25%);
    --color-secondary-darker: color-mix(in srgb, var(--color-secondary), black 50%);
    --color-secondary-darkest: color-mix(in srgb, var(--color-secondary), black 87.5%);
    --color-success: #4CC27B;
    --color-success-reverse: var(--color-white);
    --color-success-lightest: color-mix(in srgb, var(--color-success), white 87.5%);
    --color-success-lighter: color-mix(in srgb, var(--color-success), white 50%);
    --color-success-light: color-mix(in srgb, var(--color-success), white 25%);
    --color-success-dark: color-mix(in srgb, var(--color-success), black 25%);
    --color-success-darker: color-mix(in srgb, var(--color-success), black 50%);
    --color-success-darkest: color-mix(in srgb, var(--color-success), black 87.5%);
    --color-warning: #EEBE43;
    --color-warning-reverse: var(--color-black);
    --color-warning-lightest: color-mix(in srgb, var(--color-warning), white 87.5%);
    --color-warning-lighter: color-mix(in srgb, var(--color-warning), white 50%);
    --color-warning-light: color-mix(in srgb, var(--color-warning), white 25%);
    --color-warning-dark: color-mix(in srgb, var(--color-warning), black 25%);
    --color-warning-darker: color-mix(in srgb, var(--color-warning), black 50%);
    --color-warning-darkest: color-mix(in srgb, var(--color-warning), black 87.5%);
    --color-danger: #DE3C4B;
    --color-danger-reverse: var(--color-white);
    --color-danger-lightest: color-mix(in srgb, var(--color-danger), white 87.5%);
    --color-danger-lighter: color-mix(in srgb, var(--color-danger), white 50%);
    --color-danger-light: color-mix(in srgb, var(--color-danger), white 25%);
    --color-danger-dark: color-mix(in srgb, var(--color-danger), black 25%);
    --color-danger-darker: color-mix(in srgb, var(--color-danger), black 50%);
    --color-danger-darkest: color-mix(in srgb, var(--color-danger), black 87.5%)
}

:root, .theme--default {
    color-scheme: light
}

:root, .theme--default {
    --color-body: light-dark(var(--color-dark-grey), var(--color-white));
    --color-body-a75: light-dark(var(--color-dark-grey-a75), var(--color-white-a75));
    --color-body-a50: light-dark(var(--color-dark-grey-a50), var(--color-white-a50));
    --color-body-a25: light-dark(var(--color-dark-grey-a25), var(--color-white-a25));
    --color-body-a10: light-dark(var(--color-dark-grey-a10), var(--color-white-a10));
    --color-body-a5: light-dark(var(--color-dark-grey-a5), var(--color-white-a5));
    --color-body-a1: light-dark(var(--color-dark-grey-a1), var(--color-white-a1));
    --color-background: light-dark(var(--color-white), var(--color-dark-grey));
    --color-background-alt: light-dark(var(--color-gray-50), var(--color-gray-900));
    --color-background-a75: light-dark(var(--color-white-a75), var(--color-dark-grey-a75));
    --color-background-a50: light-dark(var(--color-white-a50), var(--color-dark-grey-a50));
    --color-background-a25: light-dark(var(--color-white-a25), var(--color-dark-grey-a25));
    --color-background-a10: light-dark(var(--color-white-a10), var(--color-dark-grey-a10));
    --color-background-a5: light-dark(var(--color-white-a5), var(--color-dark-grey-a5));
    --color-background-a1: light-dark(var(--color-white-a1), var(--color-dark-grey-a1));
    --color-accent-primary: light-dark(var(--color-primary), var(--color-primary));
    --color-accent-primary-reverse: light-dark(var(--color-primary-reverse), var(--color-primary-reverse));
    --color-accent-primary-lightest: light-dark(var(--color-primary-lightest), var(--color-primary-darkest));
    --color-accent-primary-lighter: light-dark(var(--color-primary-lighter), var(--color-primary-darker));
    --color-accent-primary-light: light-dark(var(--color-primary-light), var(--color-primary-dark));
    --color-accent-primary-dark: light-dark(var(--color-primary-dark), var(--color-primary-light));
    --color-accent-primary-darker: light-dark(var(--color-primary-darker), var(--color-primary-lighter));
    --color-accent-primary-darkest: light-dark(var(--color-primary-darkest), var(--color-primary-lightest))
}

:where(:root,.theme--default,.theme--light) {
    color: var(--color-body)
}

:where(:root,.theme--default,.theme--light) {
    color: var(--color-body)
}

:where(:root,.theme--default,.theme--light) {
    color: var(--color-body)
}

:where(:root,.theme--default,.theme--light) {
    color: var(--color-body)
}

.theme--dark {
    color-scheme: dark
}

.theme--dark {
    --color-body: light-dark(var(--color-dark-grey), var(--color-white));
    --color-body-a75: light-dark(var(--color-dark-grey-a75), var(--color-white-a75));
    --color-body-a50: light-dark(var(--color-dark-grey-a50), var(--color-white-a50));
    --color-body-a25: light-dark(var(--color-dark-grey-a25), var(--color-white-a25));
    --color-body-a10: light-dark(var(--color-dark-grey-a10), var(--color-white-a10));
    --color-body-a5: light-dark(var(--color-dark-grey-a5), var(--color-white-a5));
    --color-body-a1: light-dark(var(--color-dark-grey-a1), var(--color-white-a1));
    --color-background: light-dark(var(--color-white), var(--color-dark-grey));
    --color-background-alt: light-dark(var(--color-gray-50), var(--color-gray-900));
    --color-background-a75: light-dark(var(--color-white-a75), var(--color-dark-grey-a75));
    --color-background-a50: light-dark(var(--color-white-a50), var(--color-dark-grey-a50));
    --color-background-a25: light-dark(var(--color-white-a25), var(--color-dark-grey-a25));
    --color-background-a10: light-dark(var(--color-white-a10), var(--color-dark-grey-a10));
    --color-background-a5: light-dark(var(--color-white-a5), var(--color-dark-grey-a5));
    --color-background-a1: light-dark(var(--color-white-a1), var(--color-dark-grey-a1));
    --color-accent-primary: light-dark(var(--color-primary), var(--color-primary));
    --color-accent-primary-reverse: light-dark(var(--color-primary-reverse), var(--color-primary-reverse));
    --color-accent-primary-lightest: light-dark(var(--color-primary-lightest), var(--color-primary-darkest));
    --color-accent-primary-lighter: light-dark(var(--color-primary-lighter), var(--color-primary-darker));
    --color-accent-primary-light: light-dark(var(--color-primary-light), var(--color-primary-dark));
    --color-accent-primary-dark: light-dark(var(--color-primary-dark), var(--color-primary-light));
    --color-accent-primary-darker: light-dark(var(--color-primary-darker), var(--color-primary-lighter));
    --color-accent-primary-darkest: light-dark(var(--color-primary-darkest), var(--color-primary-lightest))
}

:where(.theme--dark) {
    color: var(--color-body)
}

:where(.theme--dark) {
    color: var(--color-body)
}

:where(.theme--dark) {
    color: var(--color-body)
}

:where(.theme--dark) {
    color: var(--color-body)
}

.theme--accent {
    color-scheme: dark
}

.theme--accent {
    --color-body: var(--color-primary-reverse);
    --color-body-a75: color-mix(in srgb, var(--color-primary-reverse), transparent 25%);
    --color-body-a50: color-mix(in srgb, var(--color-primary-reverse), transparent 50%);
    --color-body-a25: color-mix(in srgb, var(--color-primary-reverse), transparent 75%);
    --color-body-a10: color-mix(in srgb, var(--color-primary-reverse), transparent 90%);
    --color-body-a5: color-mix(in srgb, var(--color-primary-reverse), transparent 95%);
    --color-body-a1: color-mix(in srgb, var(--color-primary-reverse), transparent 99%);
    --color-background: var(--color-primary);
    --color-background-alt: var(--color-primary-light);
    --color-background-a75: var(--color-black-a75);
    --color-background-a50: var(--color-black-a50);
    --color-background-a25: var(--color-black-a25);
    --color-background-a10: var(--color-black-a10);
    --color-background-a5: var(--color-black-a5);
    --color-background-a1: var(--color-black-a1);
    --color-accent-primary: var(--color-primary-reverse);
    --color-accent-primary-reverse: var(--color-primary);
    --color-accent-primary-lightest: var(--color-white-a25);
    --color-accent-primary-lighter: var(--color-white-a50);
    --color-accent-primary-light: var(--color-white-a75);
    --color-accent-primary-dark: var(--color-black-a25);
    --color-accent-primary-darker: var(--color-black-a50);
    --color-accent-primary-darkest: var(--color-black-a1)
}

:where(.theme--accent) {
    color: var(--color-body)
}

:where(.theme--accent) {
    color: var(--color-body)
}

:where(.theme--accent) {
    color: var(--color-body)
}

:where(.theme--accent) {
    color: var(--color-body)
}

:root {
    --base-unit-desktop: 16
}

:root {
    --base-unit-mobile: 14
}

:root {
    --width-viewport-desktop: 1440;
    --width-viewport-desktop-rem: calc(var(--width-viewport-desktop) / var(--base-unit-desktop) * 1rem);
    --width-viewport-mobile: 375;
    --width-viewport-mobile-rem: calc(var(--width-viewport-mobile) / var(--base-unit-mobile) * 1rem);
    --width-content-desktop: 788;
    --width-content-desktop-rem: calc(var(--width-content-desktop) / var(--base-unit-desktop) * 1rem);
    --width-content-mobile: 319;
    --width-content-mobile-rem: calc(var(--width-content-mobile) / var(--base-unit-mobile) * 1rem);
    --width-viewport: var(--width-viewport-desktop-rem);
    --width-content: Min(100%, var(--width-content-desktop-rem))
}

@media only screen and (max-width: 48rem) {
    :root {
        --width-viewport: var(--width-viewport-mobile-rem)
    }
}

:root {
    --size-s-1-desktop: 1;
    --size-s-1: calc(var(--size-s-1-desktop) / var(--base-unit-desktop) * 1rem);
    --size-s-2-desktop: 2;
    --size-s-2: calc(var(--size-s-2-desktop) / var(--base-unit-desktop) * 1rem);
    --size-s-3-desktop: 4;
    --size-s-3: calc(var(--size-s-3-desktop) / var(--base-unit-desktop) * 1rem);
    --size-s-4-desktop: 8;
    --size-s-4: calc(var(--size-s-4-desktop) / var(--base-unit-desktop) * 1rem);
    --size-s-5-desktop: 12;
    --size-s-5: calc(var(--size-s-5-desktop) / var(--base-unit-desktop) * 1rem);
    --size-m-1-desktop: 16;
    --size-m-1: calc(var(--size-m-1-desktop) / var(--base-unit-desktop) * 1rem);
    --size-m-2-desktop: 20;
    --size-m-2: calc(var(--size-m-2-desktop) / var(--base-unit-desktop) * 1rem);
    --size-m-3-desktop: 24;
    --size-m-3: calc(var(--size-m-3-desktop) / var(--base-unit-desktop) * 1rem);
    --size-m-4-desktop: 28;
    --size-m-4: calc(var(--size-m-4-desktop) / var(--base-unit-desktop) * 1rem);
    --size-m-5-desktop: 32;
    --size-m-5: calc(var(--size-m-5-desktop) / var(--base-unit-desktop) * 1rem);
    --size-l-1-desktop: 40;
    --size-l-1: calc(var(--size-l-1-desktop) / var(--base-unit-desktop) * 1rem);
    --size-l-2-desktop: 48;
    --size-l-2: calc(var(--size-l-2-desktop) / var(--base-unit-desktop) * 1rem);
    --size-l-3-desktop: 56;
    --size-l-3: calc(var(--size-l-3-desktop) / var(--base-unit-desktop) * 1rem);
    --size-l-4-desktop: 64;
    --size-l-4: calc(var(--size-l-4-desktop) / var(--base-unit-desktop) * 1rem);
    --size-l-5-desktop: 72;
    --size-l-5: calc(var(--size-l-5-desktop) / var(--base-unit-desktop) * 1rem);
    --size-xl-1-desktop: 80;
    --size-xl-1: calc(var(--size-xl-1-desktop) / var(--base-unit-desktop) * 1rem);
    --size-xl-2-desktop: 96;
    --size-xl-2: calc(var(--size-xl-2-desktop) / var(--base-unit-desktop) * 1rem);
    --size-xl-3-desktop: 112;
    --size-xl-3: calc(var(--size-xl-3-desktop) / var(--base-unit-desktop) * 1rem);
    --size-xl-4-desktop: 120;
    --size-xl-4: calc(var(--size-xl-4-desktop) / var(--base-unit-desktop) * 1rem);
    --size-xl-4m-desktop: 128;
    --size-xl-4m: calc(var(--size-xl-4m-desktop) / var(--base-unit-desktop) * 1rem);
    --size-xl-5-desktop: 144;
    --size-xl-5: calc(var(--size-xl-5-desktop) / var(--base-unit-desktop) * 1rem);
    --size-2xl-1-desktop: 160;
    --size-2xl-1: calc(var(--size-2xl-1-desktop) / var(--base-unit-desktop) * 1rem);
    --size-2xl-2-desktop: 192;
    --size-2xl-2: calc(var(--size-2xl-2-desktop) / var(--base-unit-desktop) * 1rem);
    --size-2xl-3-desktop: 224;
    --size-2xl-3: calc(var(--size-2xl-3-desktop) / var(--base-unit-desktop) * 1rem);
    --size-2xl-4-desktop: 256;
    --size-2xl-4: calc(var(--size-2xl-4-desktop) / var(--base-unit-desktop) * 1rem);
    --size-2xl-5-desktop: 288;
    --size-2xl-5: calc(var(--size-2xl-5-desktop) / var(--base-unit-desktop) * 1rem);
    --size-s-1-mobile: 1;
    --size-s-2-mobile: 2;
    --size-s-3-mobile: 3.5;
    --size-s-4-mobile: 7;
    --size-s-5-mobile: 10.5;
    --size-m-1-mobile: 14;
    --size-m-2-mobile: 17.5;
    --size-m-3-mobile: 21;
    --size-m-4-mobile: 24.5;
    --size-m-5-mobile: 28;
    --size-l-1-mobile: 31.5;
    --size-l-2-mobile: 35;
    --size-l-3-mobile: 42;
    --size-l-4-mobile: 49;
    --size-l-5-mobile: 56;
    --size-xl-1-mobile: 63;
    --size-xl-2-mobile: 70;
    --size-xl-3-mobile: 77;
    --size-xl-4-mobile: 84;
    --size-xl-5-mobile: 91;
    --size-2xl-1-mobile: 98;
    --size-2xl-2-mobile: 112;
    --size-2xl-3-mobile: 126;
    --size-2xl-4-mobile: 140;
    --size-2xl-5-mobile: 154
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-s-1: calc(var(--size-s-1-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-s-2: calc(var(--size-s-2-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-s-3: calc(var(--size-s-3-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-s-4: calc(var(--size-s-4-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-s-5: calc(var(--size-s-5-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-m-1: calc(var(--size-m-1-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-m-2: calc(var(--size-m-2-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-m-3: calc(var(--size-m-3-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-m-4: calc(var(--size-m-4-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-m-5: calc(var(--size-m-5-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-l-1: calc(var(--size-l-1-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-l-2: calc(var(--size-l-2-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-l-3: calc(var(--size-l-3-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-l-4: calc(var(--size-l-4-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-l-5: calc(var(--size-l-5-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-xl-1: calc(var(--size-xl-1-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-xl-2: calc(var(--size-xl-2-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-xl-3: calc(var(--size-xl-3-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-xl-4: calc(var(--size-xl-4-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-xl-5: calc(var(--size-xl-5-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-2xl-1: calc(var(--size-2xl-1-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-2xl-2: calc(var(--size-2xl-2-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-2xl-3: calc(var(--size-2xl-3-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-2xl-4: calc(var(--size-2xl-4-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --size-2xl-5: calc(var(--size-2xl-5-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

:root {
    --space-3xs-desktop: var(--size-s-3-desktop);
    --space-3xs: calc(var(--space-3xs-desktop) / var(--base-unit-desktop) * 1rem);
    --space-2xs-desktop: var(--size-s-4-desktop);
    --space-2xs: calc(var(--space-2xs-desktop) / var(--base-unit-desktop) * 1rem);
    --space-xs-desktop: var(--size-s-5-desktop);
    --space-xs: calc(var(--space-xs-desktop) / var(--base-unit-desktop) * 1rem);
    --space-s-desktop: var(--size-m-1-desktop);
    --space-s: calc(var(--space-s-desktop) / var(--base-unit-desktop) * 1rem);
    --space-m-desktop: var(--size-m-3-desktop);
    --space-m: calc(var(--space-m-desktop) / var(--base-unit-desktop) * 1rem);
    --space-l-desktop: var(--size-m-5-desktop);
    --space-l: calc(var(--space-l-desktop) / var(--base-unit-desktop) * 1rem);
    --space-xl-desktop: var(--size-l-2-desktop);
    --space-xl: calc(var(--space-xl-desktop) / var(--base-unit-desktop) * 1rem);
    --space-2xl-desktop: var(--size-l-4-desktop);
    --space-2xl: calc(var(--space-2xl-desktop) / var(--base-unit-desktop) * 1rem);
    --space-3xl-desktop: var(--size-xl-2-desktop);
    --space-3xl: calc(var(--space-3xl-desktop) / var(--base-unit-desktop) * 1rem);
    --space-4xl-desktop: var(--size-xl-4-desktop);
    --space-4xl: calc(var(--space-4xl-desktop) / var(--base-unit-desktop) * 1rem);
    --space-3xs-mobile: var(--size-s-3-mobile);
    --space-2xs-mobile: var(--size-s-4-mobile);
    --space-xs-mobile: var(--size-s-5-mobile);
    --space-s-mobile: var(--size-m-1-mobile);
    --space-m-mobile: var(--size-m-3-mobile);
    --space-l-mobile: var(--size-m-5-mobile);
    --space-xl-mobile: var(--size-l-1-mobile);
    --space-2xl-mobile: var(--size-l-3-mobile);
    --space-3xl-mobile: var(--size-xl-1-mobile);
    --space-4xl-mobile: var(--size-xl-2-mobile)
}

@media only screen and (max-width: 48rem) {
    :root {
        --space-3xs: calc(var(--space-3xs-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --space-2xs: calc(var(--space-2xs-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --space-xs: calc(var(--space-xs-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --space-s: calc(var(--space-s-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --space-m: calc(var(--space-m-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --space-l: calc(var(--space-l-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --space-xl: calc(var(--space-xl-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --space-2xl: calc(var(--space-2xl-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --space-3xl: calc(var(--space-3xl-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --space-4xl: calc(var(--space-4xl-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

:root {
    --row-0-desktop: 0;
    --row-0: calc(var(--row-0-desktop) / var(--base-unit-desktop) * 1rem);
    --row-xs-desktop: var(--space-m-desktop);
    --row-xs: calc(var(--row-xs-desktop) / var(--base-unit-desktop) * 1rem);
    --row-s-desktop: var(--space-l-desktop);
    --row-s: calc(var(--row-s-desktop) / var(--base-unit-desktop) * 1rem);
    --row-m-desktop: var(--space-xl-desktop);
    --row-m: calc(var(--row-m-desktop) / var(--base-unit-desktop) * 1rem);
    --row-l-desktop: var(--space-2xl-desktop);
    --row-l: calc(var(--row-l-desktop) / var(--base-unit-desktop) * 1rem);
    --row-xl-desktop: var(--space-3xl-desktop);
    --row-xl: calc(var(--row-xl-desktop) / var(--base-unit-desktop) * 1rem);
    --row-2xl-desktop: var(--space-4xl-desktop);
    --row-2xl: calc(var(--row-2xl-desktop) / var(--base-unit-desktop) * 1rem);
    --row-0-mobile: 0;
    --row-xs-mobile: var(--space-m-mobile);
    --row-s-mobile: var(--space-l-mobile);
    --row-m-mobile: var(--space-xl-mobile);
    --row-l-mobile: var(--space-2xl-mobile);
    --row-xl-mobile: var(--space-3xl-mobile);
    --row-2xl-mobile: var(--space-4xl-mobile)
}

@media only screen and (max-width: 48rem) {
    :root {
        --row-0: calc(var(--row-0-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --row-xs: calc(var(--row-xs-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --row-s: calc(var(--row-s-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --row-m: calc(var(--row-m-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --row-l: calc(var(--row-l-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --row-xl: calc(var(--row-xl-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

@media only screen and (max-width: 48rem) {
    :root {
        --row-2xl: calc(var(--row-2xl-mobile) / var(--base-unit-mobile) * 1rem)
    }
}

:root {
    --container-narrow-desktop: var(--size-2xl-2-desktop);
    --container-narrow-desktop-rem: calc(var(--container-narrow-desktop) / var(--base-unit-desktop) * 1rem);
    --container-narrow-fluid: calc(var(--container-narrow-desktop) / var(--width-viewport-desktop) * 100vw);
    --container-narrow: clamp(var(--container-narrow-mobile-rem), var(--container-narrow-fluid), Max(var(--container-narrow-desktop-rem), var(--container-narrow-fluid)));
    --container-standard-desktop: var(--size-xl-4-desktop);
    --container-standard-desktop-rem: calc(var(--container-standard-desktop) / var(--base-unit-desktop) * 1rem);
    --container-standard-fluid: calc(var(--container-standard-desktop) / var(--width-viewport-desktop) * 100vw);
    --container-standard: clamp(var(--container-standard-mobile-rem), var(--container-standard-fluid), Max(var(--container-standard-desktop-rem), var(--container-standard-fluid)));
    --container-wide-desktop: var(--size-l-2-desktop);
    --container-wide-desktop-rem: calc(var(--container-wide-desktop) / var(--base-unit-desktop) * 1rem);
    --container-wide-fluid: calc(var(--container-wide-desktop) / var(--width-viewport-desktop) * 100vw);
    --container-wide: clamp(var(--container-wide-mobile-rem), var(--container-wide-fluid), Max(var(--container-wide-desktop-rem), var(--container-wide-fluid)));
    --container-narrow-mobile: var(--size-l-2-mobile);
    --container-narrow-mobile-rem: calc(var(--container-narrow-mobile) / var(--base-unit-mobile) * 1rem);
    --container-standard-mobile: var(--size-m-5-mobile);
    --container-standard-mobile-rem: calc(var(--container-standard-mobile) / var(--base-unit-mobile) * 1rem);
    --container-wide-mobile: var(--size-m-3-mobile);
    --container-wide-mobile-rem: calc(var(--container-wide-mobile) / var(--base-unit-mobile) * 1rem)
}

:root {
    --font-size-3xs-desktop: 8;
    --font-size-3xs-desktop-rem: calc(var(--font-size-3xs-desktop) / var(--base-unit-desktop) * 1rem);
    --font-size-3xs-slope: calc((var(--font-size-3xs-desktop) - var(--font-size-3xs-mobile)) / (var(--width-viewport-desktop) - var(--width-viewport-mobile)));
    --font-size-3xs-intercept: calc(var(--font-size-3xs-mobile) - (var(--font-size-3xs-slope) * var(--width-viewport-mobile)));
    --font-size-3xs-fluid: calc((var(--font-size-3xs-slope) * 100vw) + (var(--font-size-3xs-intercept) / var(--base-unit-desktop) * 1rem));
    --font-size-3xs: clamp(var(--font-size-3xs-mobile-rem), var(--font-size-3xs-fluid), var(--font-size-3xs-desktop-rem));
    --font-size-2xs-desktop: 10;
    --font-size-2xs-desktop-rem: calc(var(--font-size-2xs-desktop) / var(--base-unit-desktop) * 1rem);
    --font-size-2xs-slope: calc((var(--font-size-2xs-desktop) - var(--font-size-2xs-mobile)) / (var(--width-viewport-desktop) - var(--width-viewport-mobile)));
    --font-size-2xs-intercept: calc(var(--font-size-2xs-mobile) - (var(--font-size-2xs-slope) * var(--width-viewport-mobile)));
    --font-size-2xs-fluid: calc((var(--font-size-2xs-slope) * 100vw) + (var(--font-size-2xs-intercept) / var(--base-unit-desktop) * 1rem));
    --font-size-2xs: clamp(var(--font-size-2xs-mobile-rem), var(--font-size-2xs-fluid), var(--font-size-2xs-desktop-rem));
    --font-size-xs-desktop: 12;
    --font-size-xs-desktop-rem: calc(var(--font-size-xs-desktop) / var(--base-unit-desktop) * 1rem);
    --font-size-xs-slope: calc((var(--font-size-xs-desktop) - var(--font-size-xs-mobile)) / (var(--width-viewport-desktop) - var(--width-viewport-mobile)));
    --font-size-xs-intercept: calc(var(--font-size-xs-mobile) - (var(--font-size-xs-slope) * var(--width-viewport-mobile)));
    --font-size-xs-fluid: calc((var(--font-size-xs-slope) * 100vw) + (var(--font-size-xs-intercept) / var(--base-unit-desktop) * 1rem));
    --font-size-xs: clamp(var(--font-size-xs-mobile-rem), var(--font-size-xs-fluid), var(--font-size-xs-desktop-rem));
    --font-size-s-desktop: 14;
    --font-size-s-desktop-rem: calc(var(--font-size-s-desktop) / var(--base-unit-desktop) * 1rem);
    --font-size-s-slope: calc((var(--font-size-s-desktop) - var(--font-size-s-mobile)) / (var(--width-viewport-desktop) - var(--width-viewport-mobile)));
    --font-size-s-intercept: calc(var(--font-size-s-mobile) - (var(--font-size-s-slope) * var(--width-viewport-mobile)));
    --font-size-s-fluid: calc((var(--font-size-s-slope) * 100vw) + (var(--font-size-s-intercept) / var(--base-unit-desktop) * 1rem));
    --font-size-s: clamp(var(--font-size-s-mobile-rem), var(--font-size-s-fluid), var(--font-size-s-desktop-rem));
    --font-size-m-desktop: 16;
    --font-size-m-desktop-rem: calc(var(--font-size-m-desktop) / var(--base-unit-desktop) * 1rem);
    --font-size-m-slope: calc((var(--font-size-m-desktop) - var(--font-size-m-mobile)) / (var(--width-viewport-desktop) - var(--width-viewport-mobile)));
    --font-size-m-intercept: calc(var(--font-size-m-mobile) - (var(--font-size-m-slope) * var(--width-viewport-mobile)));
    --font-size-m-fluid: calc((var(--font-size-m-slope) * 100vw) + (var(--font-size-m-intercept) / var(--base-unit-desktop) * 1rem));
    --font-size-m: clamp(var(--font-size-m-mobile-rem), var(--font-size-m-fluid), var(--font-size-m-desktop-rem));
    --font-size-l-desktop: 21;
    --font-size-l-desktop-rem: calc(var(--font-size-l-desktop) / var(--base-unit-desktop) * 1rem);
    --font-size-l-slope: calc((var(--font-size-l-desktop) - var(--font-size-l-mobile)) / (var(--width-viewport-desktop) - var(--width-viewport-mobile)));
    --font-size-l-intercept: calc(var(--font-size-l-mobile) - (var(--font-size-l-slope) * var(--width-viewport-mobile)));
    --font-size-l-fluid: calc((var(--font-size-l-slope) * 100vw) + (var(--font-size-l-intercept) / var(--base-unit-desktop) * 1rem));
    --font-size-l: clamp(var(--font-size-l-mobile-rem), var(--font-size-l-fluid), var(--font-size-l-desktop-rem));
    --font-size-xl-desktop: 28;
    --font-size-xl-desktop-rem: calc(var(--font-size-xl-desktop) / var(--base-unit-desktop) * 1rem);
    --font-size-xl-slope: calc((var(--font-size-xl-desktop) - var(--font-size-xl-mobile)) / (var(--width-viewport-desktop) - var(--width-viewport-mobile)));
    --font-size-xl-intercept: calc(var(--font-size-xl-mobile) - (var(--font-size-xl-slope) * var(--width-viewport-mobile)));
    --font-size-xl-fluid: calc((var(--font-size-xl-slope) * 100vw) + (var(--font-size-xl-intercept) / var(--base-unit-desktop) * 1rem));
    --font-size-xl: clamp(var(--font-size-xl-mobile-rem), var(--font-size-xl-fluid), var(--font-size-xl-desktop-rem));
    --font-size-2xl-desktop: 38;
    --font-size-2xl-desktop-rem: calc(var(--font-size-2xl-desktop) / var(--base-unit-desktop) * 1rem);
    --font-size-2xl-slope: calc((var(--font-size-2xl-desktop) - var(--font-size-2xl-mobile)) / (var(--width-viewport-desktop) - var(--width-viewport-mobile)));
    --font-size-2xl-intercept: calc(var(--font-size-2xl-mobile) - (var(--font-size-2xl-slope) * var(--width-viewport-mobile)));
    --font-size-2xl-fluid: calc((var(--font-size-2xl-slope) * 100vw) + (var(--font-size-2xl-intercept) / var(--base-unit-desktop) * 1rem));
    --font-size-2xl: clamp(var(--font-size-2xl-mobile-rem), var(--font-size-2xl-fluid), var(--font-size-2xl-desktop-rem));
    --font-size-3xl-desktop: 51;
    --font-size-3xl-desktop-rem: calc(var(--font-size-3xl-desktop) / var(--base-unit-desktop) * 1rem);
    --font-size-3xl-slope: calc((var(--font-size-3xl-desktop) - var(--font-size-3xl-mobile)) / (var(--width-viewport-desktop) - var(--width-viewport-mobile)));
    --font-size-3xl-intercept: calc(var(--font-size-3xl-mobile) - (var(--font-size-3xl-slope) * var(--width-viewport-mobile)));
    --font-size-3xl-fluid: calc((var(--font-size-3xl-slope) * 100vw) + (var(--font-size-3xl-intercept) / var(--base-unit-desktop) * 1rem));
    --font-size-3xl: clamp(var(--font-size-3xl-mobile-rem), var(--font-size-3xl-fluid), var(--font-size-3xl-desktop-rem));
    --font-size-4xl-desktop: 67;
    --font-size-4xl-desktop-rem: calc(var(--font-size-4xl-desktop) / var(--base-unit-desktop) * 1rem);
    --font-size-4xl-slope: calc((var(--font-size-4xl-desktop) - var(--font-size-4xl-mobile)) / (var(--width-viewport-desktop) - var(--width-viewport-mobile)));
    --font-size-4xl-intercept: calc(var(--font-size-4xl-mobile) - (var(--font-size-4xl-slope) * var(--width-viewport-mobile)));
    --font-size-4xl-fluid: calc((var(--font-size-4xl-slope) * 100vw) + (var(--font-size-4xl-intercept) / var(--base-unit-desktop) * 1rem));
    --font-size-4xl: clamp(var(--font-size-4xl-mobile-rem), var(--font-size-4xl-fluid), var(--font-size-4xl-desktop-rem));
    --font-size-5xl-desktop: 90;
    --font-size-5xl-desktop-rem: calc(var(--font-size-5xl-desktop) / var(--base-unit-desktop) * 1rem);
    --font-size-5xl-slope: calc((var(--font-size-5xl-desktop) - var(--font-size-5xl-mobile)) / (var(--width-viewport-desktop) - var(--width-viewport-mobile)));
    --font-size-5xl-intercept: calc(var(--font-size-5xl-mobile) - (var(--font-size-5xl-slope) * var(--width-viewport-mobile)));
    --font-size-5xl-fluid: calc((var(--font-size-5xl-slope) * 100vw) + (var(--font-size-5xl-intercept) / var(--base-unit-desktop) * 1rem));
    --font-size-5xl: clamp(var(--font-size-5xl-mobile-rem), var(--font-size-5xl-fluid), var(--font-size-5xl-desktop-rem));
    --font-size-3xs-mobile: 7;
    --font-size-3xs-mobile-rem: calc(var(--font-size-3xs-mobile) / var(--base-unit-mobile) * 1rem);
    --font-size-2xs-mobile: 8;
    --font-size-2xs-mobile-rem: calc(var(--font-size-2xs-mobile) / var(--base-unit-mobile) * 1rem);
    --font-size-xs-mobile: 10;
    --font-size-xs-mobile-rem: calc(var(--font-size-xs-mobile) / var(--base-unit-mobile) * 1rem);
    --font-size-s-mobile: 12;
    --font-size-s-mobile-rem: calc(var(--font-size-s-mobile) / var(--base-unit-mobile) * 1rem);
    --font-size-m-mobile: 14;
    --font-size-m-mobile-rem: calc(var(--font-size-m-mobile) / var(--base-unit-mobile) * 1rem);
    --font-size-l-mobile: 18;
    --font-size-l-mobile-rem: calc(var(--font-size-l-mobile) / var(--base-unit-mobile) * 1rem);
    --font-size-xl-mobile: 22;
    --font-size-xl-mobile-rem: calc(var(--font-size-xl-mobile) / var(--base-unit-mobile) * 1rem);
    --font-size-2xl-mobile: 27;
    --font-size-2xl-mobile-rem: calc(var(--font-size-2xl-mobile) / var(--base-unit-mobile) * 1rem);
    --font-size-3xl-mobile: 34;
    --font-size-3xl-mobile-rem: calc(var(--font-size-3xl-mobile) / var(--base-unit-mobile) * 1rem);
    --font-size-4xl-mobile: 40;
    --font-size-4xl-mobile-rem: calc(var(--font-size-4xl-mobile) / var(--base-unit-mobile) * 1rem);
    --font-size-5xl-mobile: 48;
    --font-size-5xl-mobile-rem: calc(var(--font-size-5xl-mobile) / var(--base-unit-mobile) * 1rem)
}

:root {
    --gutter-x-tight-desktop: var(--size-m-1-desktop);
    --gutter-x-tight-desktop-rem: calc(var(--gutter-x-tight-desktop) / var(--base-unit-desktop) * 1rem);
    --gutter-x-tight-slope: calc((var(--gutter-x-tight-desktop) - var(--gutter-x-tight-mobile)) / (var(--width-viewport-desktop) - var(--width-viewport-mobile)));
    --gutter-x-tight-intercept: calc(var(--gutter-x-tight-mobile) - (var(--gutter-x-tight-slope) * var(--width-viewport-mobile)));
    --gutter-x-tight-fluid: calc((var(--gutter-x-tight-slope) * 100vw) + (var(--gutter-x-tight-intercept) / var(--base-unit-desktop) * 1rem));
    --gutter-x-tight: clamp(var(--gutter-x-tight-mobile-rem), var(--gutter-x-tight-fluid), var(--gutter-x-tight-desktop-rem));
    --gutter-tight-desktop: var(--size-m-3-desktop);
    --gutter-tight-desktop-rem: calc(var(--gutter-tight-desktop) / var(--base-unit-desktop) * 1rem);
    --gutter-tight-slope: calc((var(--gutter-tight-desktop) - var(--gutter-tight-mobile)) / (var(--width-viewport-desktop) - var(--width-viewport-mobile)));
    --gutter-tight-intercept: calc(var(--gutter-tight-mobile) - (var(--gutter-tight-slope) * var(--width-viewport-mobile)));
    --gutter-tight-fluid: calc((var(--gutter-tight-slope) * 100vw) + (var(--gutter-tight-intercept) / var(--base-unit-desktop) * 1rem));
    --gutter-tight: clamp(var(--gutter-tight-mobile-rem), var(--gutter-tight-fluid), var(--gutter-tight-desktop-rem));
    --gutter-standard-desktop: var(--size-m-5-desktop);
    --gutter-standard-desktop-rem: calc(var(--gutter-standard-desktop) / var(--base-unit-desktop) * 1rem);
    --gutter-standard-slope: calc((var(--gutter-standard-desktop) - var(--gutter-standard-mobile)) / (var(--width-viewport-desktop) - var(--width-viewport-mobile)));
    --gutter-standard-intercept: calc(var(--gutter-standard-mobile) - (var(--gutter-standard-slope) * var(--width-viewport-mobile)));
    --gutter-standard-fluid: calc((var(--gutter-standard-slope) * 100vw) + (var(--gutter-standard-intercept) / var(--base-unit-desktop) * 1rem));
    --gutter-standard: clamp(var(--gutter-standard-mobile-rem), var(--gutter-standard-fluid), var(--gutter-standard-desktop-rem));
    --gutter-loose-desktop: var(--size-l-4-desktop);
    --gutter-loose-desktop-rem: calc(var(--gutter-loose-desktop) / var(--base-unit-desktop) * 1rem);
    --gutter-loose-slope: calc((var(--gutter-loose-desktop) - var(--gutter-loose-mobile)) / (var(--width-viewport-desktop) - var(--width-viewport-mobile)));
    --gutter-loose-intercept: calc(var(--gutter-loose-mobile) - (var(--gutter-loose-slope) * var(--width-viewport-mobile)));
    --gutter-loose-fluid: calc((var(--gutter-loose-slope) * 100vw) + (var(--gutter-loose-intercept) / var(--base-unit-desktop) * 1rem));
    --gutter-loose: clamp(var(--gutter-loose-mobile-rem), var(--gutter-loose-fluid), var(--gutter-loose-desktop-rem));
    --gutter-x-loose-desktop: var(--size-xl-3-desktop);
    --gutter-x-loose-desktop-rem: calc(var(--gutter-x-loose-desktop) / var(--base-unit-desktop) * 1rem);
    --gutter-x-loose-slope: calc((var(--gutter-x-loose-desktop) - var(--gutter-x-loose-mobile)) / (var(--width-viewport-desktop) - var(--width-viewport-mobile)));
    --gutter-x-loose-intercept: calc(var(--gutter-x-loose-mobile) - (var(--gutter-x-loose-slope) * var(--width-viewport-mobile)));
    --gutter-x-loose-fluid: calc((var(--gutter-x-loose-slope) * 100vw) + (var(--gutter-x-loose-intercept) / var(--base-unit-desktop) * 1rem));
    --gutter-x-loose: clamp(var(--gutter-x-loose-mobile-rem), var(--gutter-x-loose-fluid), var(--gutter-x-loose-desktop-rem));
    --gutter-x-tight-mobile: var(--size-s-4-mobile);
    --gutter-x-tight-mobile-rem: calc(var(--gutter-x-tight-mobile) / var(--base-unit-mobile) * 1rem);
    --gutter-tight-mobile: var(--size-m-1-mobile);
    --gutter-tight-mobile-rem: calc(var(--gutter-tight-mobile) / var(--base-unit-mobile) * 1rem);
    --gutter-standard-mobile: var(--size-m-5-mobile);
    --gutter-standard-mobile-rem: calc(var(--gutter-standard-mobile) / var(--base-unit-mobile) * 1rem);
    --gutter-loose-mobile: var(--size-l-2-mobile);
    --gutter-loose-mobile-rem: calc(var(--gutter-loose-mobile) / var(--base-unit-mobile) * 1rem);
    --gutter-x-loose-mobile: var(--size-l-4-mobile);
    --gutter-x-loose-mobile-rem: calc(var(--gutter-x-loose-mobile) / var(--base-unit-mobile) * 1rem)
}

:root {
    --font-family-primary: Effra, system-ui, sans-serif;
    --font-family-secondary: Effra, system-ui, sans-serif
}

:root {
    --line-height-1: 1;
    --line-height-2x-tight: 1.1;
    --line-height-x-tight: 1.2;
    --line-height-tight: 1.333;
    --line-height-standard: 1.5;
    --line-height-loose: 1.66
}

:root {
    --letter-spacing-x-tight: -0.06em;
    --letter-spacing-tight: -0.03em;
    --letter-spacing-0: 0em;
    --letter-spacing-loose: 0.03em;
    --letter-spacing-x-loose: 0.06em;
    --letter-spacing-2x-loose: 0.13em;
    --letter-spacing-3x-loose: 0.25em
}

:root {
    --font-family-body: var(--font-family-primary);
    --font-weight-body: 400;
    --font-style-body: regular;
    --text-transform-body: none;
    --font-size-body-l: var(--font-size-l);
    --line-height-body-l: var(--line-height-standard);
    --letter-spacing-body-l: var(--letter-spacing-0);
    --font-size-body-m: var(--font-size-m);
    --line-height-body-m: var(--line-height-standard);
    --letter-spacing-body-m: var(--letter-spacing-0);
    --font-size-body-s: var(--font-size-s);
    --line-height-body-s: var(--line-height-standard);
    --letter-spacing-body-s: var(--letter-spacing-0);
    --font-size-body-xs: var(--font-size-xs);
    --line-height-body-xs: var(--line-height-standard);
    --letter-spacing-body-xs: var(--letter-spacing-0);
    --font-family-large-heading: var(--font-family-secondary);
    --font-weight-large-heading: 700;
    --font-style-large-heading: regular;
    --text-transform-large-heading: uppercase;
    --font-size-large-heading-1: var(--font-size-3xl);
    --line-height-large-heading-1: var(--line-height-2x-tight);
    --letter-spacing-large-heading-1: var(--letter-spacing-loose);
    --font-size-large-heading-2: var(--font-size-2xl);
    --line-height-large-heading-2: var(--line-height-x-tight);
    --letter-spacing-large-heading-2: var(--letter-spacing-loose);
    --font-size-large-heading-3: var(--font-size-xl);
    --line-height-large-heading-3: var(--line-height-tight);
    --letter-spacing-large-heading-3: var(--letter-spacing-loose);
    --font-family-small-heading: var(--font-family-primary);
    --font-weight-small-heading: 700;
    --font-style-small-heading: regular;
    --text-transform-small-heading: uppercase;
    --font-size-small-heading-1: var(--font-size-l);
    --line-height-small-heading-1: var(--line-height-tight);
    --letter-spacing-small-heading-1: var(--letter-spacing-x-loose);
    --font-size-small-heading-2: var(--font-size-m);
    --line-height-small-heading-2: var(--line-height-tight);
    --letter-spacing-small-heading-2: var(--letter-spacing-x-loose);
    --font-size-small-heading-3: var(--font-size-s);
    --line-height-small-heading-3: var(--line-height-tight);
    --letter-spacing-small-heading-3: var(--letter-spacing-x-loose);
    --font-family-subtitle: var(--font-family-secondary);
    --font-weight-subtitle: 400;
    --font-style-subtitle: regular;
    --text-transform-subtitle: none;
    --font-size-subtitle-1: var(--font-size-l);
    --line-height-subtitle-1: var(--line-height-tight);
    --letter-spacing-subtitle-1: var(--letter-spacing-0);
    --font-size-subtitle-2: var(--font-size-m);
    --line-height-subtitle-2: var(--line-height-tight);
    --letter-spacing-subtitle-2: var(--letter-spacing-0);
    --font-family-button-text: var(--font-family-secondary);
    --font-weight-button-text: 400;
    --font-style-button-text: regular;
    --text-transform-button-text: uppercase;
    --font-size-button-text-l: var(--font-size-m);
    --line-height-button-text-l: var(--line-height-x-tight);
    --letter-spacing-button-text-l: var(--letter-spacing-2x-loose);
    --font-size-button-text-m: var(--font-size-s);
    --line-height-button-text-m: var(--line-height-x-tight);
    --letter-spacing-button-text-m: var(--letter-spacing-2x-loose);
    --font-size-button-text-s: var(--font-size-xs);
    --line-height-button-text-s: var(--line-height-x-tight);
    --letter-spacing-button-text-s: var(--letter-spacing-2x-loose);
    --font-family-label: var(--font-family-primary);
    --font-weight-label: 700;
    --font-style-label: regular;
    --text-transform-label: none;
    --font-size-label-1: var(--font-size-xs);
    --line-height-label-1: var(--line-height-x-tight);
    --letter-spacing-label-1: var(--letter-spacing-loose);
    --font-size-label-2: var(--font-size-2xs);
    --line-height-label-2: var(--line-height-x-tight);
    --letter-spacing-label-2: var(--letter-spacing-loose);
    --font-size-label-3: var(--font-size-3xs);
    --line-height-label-3: var(--line-height-x-tight);
    --letter-spacing-label-3: var(--letter-spacing-x-loose);
    --font-family-overline: var(--font-family-primary);
    --font-weight-overline: 700;
    --font-style-overline: regular;
    --text-transform-overline: uppercase;
    --font-size-overline-1: var(--font-size-xs);
    --line-height-overline-1: var(--line-height-x-tight);
    --letter-spacing-overline-1: var(--letter-spacing-2x-loose);
    --font-size-overline-2: var(--font-size-2xs);
    --line-height-overline-2: var(--line-height-x-tight);
    --letter-spacing-overline-2: var(--letter-spacing-2x-loose);
    --font-size-overline-3: var(--font-size-3xs);
    --line-height-overline-3: var(--line-height-x-tight);
    --letter-spacing-overline-3: var(--letter-spacing-2x-loose)
}

.overline-1 {
    font-family: var(--font-family-overline), sans-serif;
    font-weight: var(--font-weight-overline);
    text-transform: var(--text-transform-overline);
    font-size: var(--font-size-overline-1);
    line-height: var(--line-height-overline-1);
    letter-spacing: var(--letter-spacing-overline-1);
    font-style: var(--font-style-overline)
}

h1 {
    font-family: var(--font-family-large-heading), sans-serif;
    font-weight: var(--font-weight-large-heading);
    text-transform: var(--text-transform-large-heading);
    font-size: var(--font-size-large-heading-1);
    line-height: var(--line-height-large-heading-1);
    letter-spacing: var(--letter-spacing-large-heading-1);
    font-style: var(--font-style-large-heading);
    margin-bottom: var(--space-m);
    display: block;
    color: var(--color-body)
}

p {
    font-family: var(--font-family-body), sans-serif;
    font-weight: var(--font-weight-body);
    text-transform: var(--text-transform-body);
    font-size: var(--font-size-body-m);
    line-height: var(--line-height-body-m);
    letter-spacing: var(--letter-spacing-body-m);
    font-style: var(--font-style-body);
    margin-bottom: var(--space-s);
    color: var(--color-body)
}

html {
    font-size: calc(var(--base-unit-desktop) * 6.25 * 1%);
    font-variant-numeric: lining-nums
}

@media only screen and (max-width: 48rem) {
    html {
        font-size: calc(var(--base-unit-mobile) * 6.25 * 1%)
    }
}

@media only screen and (min-width: calc(112rem + 1px)) {
    html {
        font-size: 112.5%
    }
}

body {
    font-family: var(--font-family-body), sans-serif;
    font-weight: var(--font-weight-body);
    text-transform: var(--text-transform-body);
    font-size: var(--font-size-body-m);
    line-height: var(--line-height-body-m);
    letter-spacing: var(--letter-spacing-body-m);
    font-style: var(--font-style-body)
}

.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s)
}

.up-button {
    border: 0;
    background: rgba(0, 0, 0, 0);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    width: auto;
    position: relative;
    text-align: center;
    z-index: 1;
    font-family: var(--font-family-button-text), sans-serif;
    font-weight: var(--font-weight-button-text);
    text-transform: var(--text-transform-button-text);
    font-size: var(--font-size-button-text-m);
    font-style: var(--font-style-button-text);
    align-items: center;
    display: flex;
    padding: var(--space-xs) var(--space-m);
    min-height: var(--size-l-2);
    border-radius: 4px;
    letter-spacing: 1.75px;
    box-sizing: border-box;
    line-height: normal
}

.up-button:before {
    content: "";
    background: rgba(0, 0, 0, 0);
    position: absolute;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border-radius: 4px;
    box-shadow: 0 0 18px var(--color-success), 0 0 18px var(--color-success);
    opacity: 0;
    visibility: hidden
}

.buttons .up-button, .up-button {
    color: var(--color-accent-primary-reverse);
    background-color: var(--color-accent-primary);
    border: 1px solid;
    border-color: var(--color-accent-primary)
}

.buttons .up-button svg, .up-button svg {
    color: var(--color-accent-primary-reverse)
}

.buttons .up-button:after, .up-button:after {
    display: none
}

.buttons .up-button:hover, .up-button:hover {
    color: var(--color-accent-primary-reverse);
    background-color: var(--color-accent-primary-light);
    border-color: var(--color-accent-primary-light)
}

.buttons .up-button:hover svg, .up-button:hover svg {
    color: var(--color-accent-primary-reverse)
}

.up-button.minor, button.minor {
    color: var(--color-body);
    background: none;
    border: 1px solid rgba(0, 0, 0, 0)
}

.up-button.minor svg, button.minor svg {
    color: var(--color-body)
}

.up-button.minor:hover, button.minor:hover {
    transform: none;
    background-color: unset;
    border-color: rgba(0, 0, 0, 0);
    color: var(--color-accent-primary)
}

.up-button.minor:hover svg, button.minor:hover svg {
    color: var(--color-accent-primary)
}

.up-button.minor:hover:after, button.minor:hover:after {
    opacity: 1;
    transform: scaleX(1)
}

.up-button.icon, .up-button.primary.icon {
    min-width: 0;
    padding: 0;
    border-radius: 100%;
    width: var(--size-l-2);
    height: var(--size-l-2);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0
}

.up-button.icon svg, .up-button.primary.icon svg {
    width: var(--size-m-3);
    height: var(--size-m-3);
    display: block
}

.up-button.icon.size-s, .up-button.primary.icon.size-s {
    width: var(--size-m-5);
    height: var(--size-m-5)
}

.up-button.icon.size-s svg, .up-button.primary.icon.size-s svg {
    width: var(--size-m-1);
    height: var(--size-m-1)
}

.up-button.icon:before, .up-button.primary.icon:before {
    border-radius: 100%
}

:where(.has-background) {
    background-color: var(--color-background);
    color: var(--color-body)
}

.flex {
    display: flex
}

.items-center {
    align-items: center
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

ul.list-reset {
    margin: 0;
    padding: 0
}

ul.list-reset li {
    margin: 0;
    padding: 0;
    list-style: none
}

ul.list-reset li:before {
    display: none
}

.mb-0 {
    margin-bottom: 0
}

.size-s {
    font-size: var(--font-size-s)
}

.overline-1 {
    color: var(--color-accent-primary)
}

body {
    background-color: var(--color-background);
    color: var(--color-body);
    accent-color: var(--color-accent-primary)
}

html#html {
    margin-top: 0 !important
}

ul.list-reset {
    margin: 0;
    padding: 0
}

ul.list-reset li {
    margin: 0;
    padding: 0;
    list-style: none
}

ul.list-reset li:before {
    display: none
}

::-webkit-scrollbar-thumb {
    background: #c2316e
}

::-webkit-scrollbar-thumb:hover {
    background: #c7135d
}

.booking-mask-modal-button {
    display: none
}

.booking-mask {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    font-family: var(--font-family-body), sans-serif;
    font-weight: var(--font-weight-body);
    text-transform: var(--text-transform-body);
    font-style: var(--font-style-body)
}

.booking-mask .booking-field[data-type=search] {
    padding-right: var(--space-s)
}

.booking-mask .booking-mask-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: var(--space-s)
}

.booking-mask input {
    padding: var(--space-xs)
}

.booking-mask .booking-fields-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: unset
}

.booking-mask .booking-fields-container .booking-field-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-s);
    padding-left: var(--space-s);
    background-color: var(--color-background)
}

.booking-mask .booking-fields-container .booking-field-divider {
    width: 1px;
    background-color: var(--color-body-a25)
}

.booking-mask input[type=text] {
    background-color: rgba(0, 0, 0, 0);
    border: unset;
    padding-inline: unset;
    width: 100%
}

.booking-mask input[type=text]::placeholder {
    color: var(--color-body-a50)
}

.booking-mask .booking-field {
    display: flex;
    flex-direction: row;
    gap: var(--space-xs);
    align-items: center;
    position: relative
}

.booking-mask .booking-field.selector-type {
    cursor: pointer
}

.booking-mask .booking-field svg {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    object-fit: contain
}

.booking-mask .booking-field .booking-field-input-wrap {
    display: flex;
    flex-direction: row;
    gap: var(--space-3xs);
    align-items: center
}

.booking-mask .booking-field .booking-field-input-wrap .booking-field-dropdown {
    width: var(--size-m-3);
    height: var(--size-m-3);
    position: relative
}

.booking-mask .booking-field .booking-field-icon {
    width: var(--size-m-3);
    height: var(--size-m-3);
    position: relative
}

.booking-mask .booking-field .booking-field-select {
    position: absolute;
    padding: var(--space-s);
    display: flex;
    gap: var(--space-m);
    flex-direction: column;
    width: 100%;
    border-radius: 8px;
    box-shadow: 4px 8px 24px rgba(0, 10, 44, .075);
    background-color: var(--color-background);
    min-width: 20rem;
    z-index: 5;
    top: calc(100% + var(--space-s) + var(--space-xs));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    left: 50%;
    transform: translateX(-50%)
}

.booking-mask .booking-field .booking-field-select .booking-field-select-wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid 1px var(--color-body-a10);
    padding-bottom: var(--space-s)
}

.booking-mask .booking-field .booking-field-select .booking-field-select-wrap .select-desc {
    display: flex;
    flex-direction: column;
    margin-bottom: unset;
    font-family: var(--font-family-body), sans-serif;
    font-weight: var(--font-weight-body);
    text-transform: var(--text-transform-body);
    font-style: var(--font-style-body)
}

.booking-mask .booking-field .booking-field-select .booking-field-select-wrap .select-desc span {
    font-family: var(--font-family-body), sans-serif;
    font-weight: var(--font-weight-body);
    text-transform: var(--text-transform-body);
    font-size: var(--font-size-body-xs);
    line-height: var(--line-height-body-xs);
    letter-spacing: var(--letter-spacing-body-xs);
    font-style: var(--font-style-body);
    color: var(--color-body-a50)
}

.booking-mask .booking-field .booking-field-select .booking-field-select-wrap .selector {
    display: flex;
    flex-direction: row;
    align-items: center
}

.booking-mask .booking-field .booking-field-select .booking-field-select-wrap .selector button {
    width: var(--size-m-5);
    height: var(--size-m-5);
    padding: unset;
    margin: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    color: var(--color-body);
    border-color: var(--color-body);
    min-height: unset
}

.booking-mask .booking-field .booking-field-select .booking-field-select-wrap .selector button svg {
    width: var(--size-m-1);
    height: var(--size-m-1);
    position: relative
}

.booking-mask .booking-field .booking-field-select .booking-field-select-wrap .selector .selector-value {
    margin: unset;
    font-family: var(--font-family-body), sans-serif;
    font-weight: var(--font-weight-body);
    text-transform: var(--text-transform-body);
    font-style: var(--font-style-body);
    width: 3rem;
    text-align: center
}

.booking-mask .booking-field .booking-field-select .select-confirm {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    align-self: end
}

.booking-mask .booking-field .search-dropdown {
    padding: var(--space-s);
    position: absolute;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background-color: var(--color-background);
    border-radius: 8px;
    left: 0;
    top: calc(100% + var(--space-s) + var(--space-xs));
    min-width: 22.5rem;
    z-index: 1
}

.booking-mask .booking-field .search-dropdown .search-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-s)
}

.booking-mask .booking-field .search-dropdown .search-results .overline-1 {
    margin-bottom: unset;
    font-family: var(--font-family-overline), sans-serif;
    font-weight: var(--font-weight-overline);
    text-transform: var(--text-transform-overline);
    font-size: var(--font-size-overline-1);
    line-height: var(--line-height-overline-1);
    letter-spacing: var(--letter-spacing-overline-1);
    font-style: var(--font-style-overline);
    color: var(--color-body)
}

.booking-mask .booking-field .search-dropdown .search-results .search-results-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-s)
}

.booking-mask .booking-field .search-dropdown .search-results .search-results-list .search-result-item {
    padding: unset;
    min-height: unset;
    margin: unset;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-s);
    background-color: unset;
    border: unset
}

.booking-mask .booking-field .search-dropdown .search-results .search-results-list .search-result-item .search-result-item-title {
    font-family: var(--font-family-body), sans-serif;
    font-weight: var(--font-weight-body);
    text-transform: var(--text-transform-body);
    font-size: var(--font-size-body-s);
    line-height: var(--line-height-body-s);
    letter-spacing: var(--letter-spacing-body-s);
    font-style: var(--font-style-body);
    color: var(--color-body);
    text-align: left
}

.booking-mask .booking-field .search-dropdown .search-results .search-results-list .search-result-item .search-result-item-icon {
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--color-body-a25)
}

.booking-mask .booking-field .search-dropdown .search-results .search-results-list .search-result-item .search-result-item-icon svg {
    width: 20px;
    height: 20px;
    position: relative;
    color: var(--color-accent-primary)
}

.booking-mask .booking-field .search-dropdown .search-results .search-results-list .search-result-item:hover .search-result-item-title {
    color: var(--color-accent-primary)
}

.js-rates-modal {
    cursor: pointer
}

.nav-toggle {
    margin: 0;
    padding: var(--space-xs);
    background-color: var(--color-accent-primary);
    border-radius: 4px
}

.nav-toggle:hover {
    background-color: var(--color-accent-primary-light)
}

.nav-toggle .menu-icon {
    position: relative;
    height: var(--size-m-3);
    width: var(--size-m-3)
}

.nav-toggle .menu-icon svg {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: contain
}

@media only screen and (max-width: 40rem) {
    .nav-toggle .menu-icon {
        margin-left: 0
    }
}

:root, html {
    --header-height: var(--size-xl-4m);
    --booking-mask-height: var(--size-xl-1);
    --header-highlight-height: var(--size-l-2);
    --hotel-menu-header: var(--size-xl-1)
}

@media only screen and (max-width: 64rem) {
    :root, html {
        --header-highlight-height: 4.5rem;
        --header-height: 5.25rem
    }
}

body {
    padding-top: calc(var(--booking-mask-height) + var(--header-height))
}

@media only screen and (max-width: 64rem) {
    body {
        padding-top: var(--header-height)
    }
}

.header-container {
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: column;
    top: 0;
    z-index: 20
}

.header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    height: var(--header-height);
    padding: var(--row-s) var(--space-l);
    background-color: var(--color-background)
}

@media only screen and (max-width: 64rem) {
    .header {
        padding: var(--row-xs) var(--space-s);
        height: unset
    }
}

.header .light-logo {
    display: none
}

.header .standard-logo {
    display: flex
}

.logo {
    margin-left: 0;
    margin-right: var(--space-l)
}

.logo svg {
    display: block;
    margin: 0
}

@media only screen and (max-width: 40rem) {
    .logo svg {
        width: var(--size-xl-2)
    }
}

.header-left {
    display: flex;
    flex-direction: row;
    gap: var(--space-m);
    align-items: center
}

.header-left .logo svg {
    width: 302.6px;
    height: 64.042px
}

@media only screen and (max-width: 64rem) {
    .header-left .logo {
        height: unset
    }

    .header-left .logo svg {
        width: 148.837px;
        height: 31.5px
    }
}

.header-right-mobile {
    display: none
}

@media only screen and (max-width: 64rem) {
    .header-right-mobile {
        display: flex
    }
}

.header-right-mobile .up-button {
    padding: var(--space-xs);
    min-height: unset
}

.header-right-mobile .up-button svg {
    width: var(--size-m-3);
    height: var(--size-m-3)
}

.header-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end
}

@media only screen and (max-width: 64rem) {
    .header-right {
        display: none
    }
}

.header-right .header-button-text {
    font-family: var(--font-family-body), sans-serif;
    font-weight: var(--font-weight-body);
    text-transform: var(--text-transform-body);
    font-size: var(--font-size-body-xs);
    line-height: var(--line-height-body-xs);
    letter-spacing: var(--letter-spacing-body-xs);
    font-style: var(--font-style-body);
    color: var(--color-body);
    margin: unset;
    position: absolute;
    top: .75rem
}

.header-right .header-button-text:hover {
    color: var(--color-accent-primary)
}

@media only screen and (max-width: 300px) {
    .header-right .up-button.primary {
        font-size: var(--font-size-xs);
        padding: var(--space-2xs) var(--space-xs)
    }
}

.nav-toggle {
    color: var(--color-body);
    background-color: var(--color-accent-primary)
}

.header-booking-mask {
    position: relative;
    height: var(--booking-mask-height);
    z-index: 20;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

@media only screen and (max-width: 64rem) {
    .header-booking-mask {
        display: none
    }
}

/*! CSS Used from: https://www.mayfieldhotels.com/wp-content/themes/mayfield/assets/css/mayfield.css?ver=1.0 ; media=all */
@media all {
    :root {
        --font-family-primary: Effra, system-ui, sans-serif;
        --font-family-secondary: Effra, system-ui, sans-serif
    }

    .mayfield button.minor {
        color: var(--color-body)
    }

    .mayfield button.minor:hover {
        color: var(--color-accent-primary)
    }

    .mayfield .theme--default {
        color-scheme: light
    }

    .mayfield .theme--default {
        --color-body: light-dark(var(--color-black), var(--color-white));
        --color-body-a75: light-dark(var(--color-black-a75), var(--color-white-a75));
        --color-body-a50: light-dark(var(--color-black-a50), var(--color-white-a50));
        --color-body-a25: light-dark(var(--color-black-a25), var(--color-white-a25));
        --color-body-a10: light-dark(var(--color-black-a10), var(--color-white-a10));
        --color-body-a5: light-dark(var(--color-black-a5), var(--color-white-a5));
        --color-body-a1: light-dark(var(--color-black-a1), var(--color-white-a1));
        --color-background: light-dark(var(--color-white), var(--color-black));
        --color-background-alt: light-dark(var(--color-gray-50), var(--color-gray-900));
        --color-background-a75: light-dark(var(--color-white-a75), var(--color-black-a75));
        --color-background-a50: light-dark(var(--color-white-a50), var(--color-black-a50));
        --color-background-a25: light-dark(var(--color-white-a25), var(--color-black-a25));
        --color-background-a10: light-dark(var(--color-white-a10), var(--color-black-a10));
        --color-background-a5: light-dark(var(--color-white-a5), var(--color-black-a5));
        --color-background-a1: light-dark(var(--color-white-a1), var(--color-black-a1));
        --color-accent-primary: light-dark(var(--color-primary), var(--color-primary));
        --color-accent-primary-reverse: light-dark(var(--color-black), var(--color-black));
        --color-accent-primary-lightest: light-dark(var(--color-primary-lightest), var(--color-primary-darkest));
        --color-accent-primary-lighter: light-dark(var(--color-primary-lighter), var(--color-primary-darker));
        --color-accent-primary-light: light-dark(var(--color-primary-light), var(--color-primary-dark));
        --color-accent-primary-dark: light-dark(var(--color-primary-dark), var(--color-primary-light));
        --color-accent-primary-darker: light-dark(var(--color-primary-darker), var(--color-primary-lighter));
        --color-accent-primary-darkest: light-dark(var(--color-primary-darkest), var(--color-primary-lightest))
    }

    :where(.mayfield :root,.mayfield .theme--default,.mayfield .theme--light) {
        color: var(--color-body)
    }

    :where(.mayfield :root,.mayfield .theme--default,.mayfield .theme--light) {
        color: var(--color-body)
    }

    :where(.mayfield :root,.mayfield .theme--default,.mayfield .theme--light) {
        color: var(--color-body)
    }

    :where(.mayfield :root,.mayfield .theme--default,.mayfield .theme--light) {
        color: var(--color-body)
    }

    .mayfield .theme--dark {
        color-scheme: dark
    }

    .mayfield .theme--dark {
        --color-body: light-dark(var(--color-black), var(--color-white));
        --color-body-a75: light-dark(var(--color-black-a75), var(--color-white-a75));
        --color-body-a50: light-dark(var(--color-black-a50), var(--color-white-a50));
        --color-body-a25: light-dark(var(--color-black-a25), var(--color-white-a25));
        --color-body-a10: light-dark(var(--color-black-a10), var(--color-white-a10));
        --color-body-a5: light-dark(var(--color-black-a5), var(--color-white-a5));
        --color-body-a1: light-dark(var(--color-black-a1), var(--color-white-a1));
        --color-background: light-dark(var(--color-white), var(--color-black));
        --color-background-alt: light-dark(var(--color-gray-50), var(--color-gray-900));
        --color-background-a75: light-dark(var(--color-white-a75), var(--color-black-a75));
        --color-background-a50: light-dark(var(--color-white-a50), var(--color-black-a50));
        --color-background-a25: light-dark(var(--color-white-a25), var(--color-black-a25));
        --color-background-a10: light-dark(var(--color-white-a10), var(--color-black-a10));
        --color-background-a5: light-dark(var(--color-white-a5), var(--color-black-a5));
        --color-background-a1: light-dark(var(--color-white-a1), var(--color-black-a1));
        --color-accent-primary: light-dark(var(--color-primary), var(--color-primary));
        --color-accent-primary-reverse: light-dark(var(--color-black), var(--color-black));
        --color-accent-primary-lightest: light-dark(var(--color-primary-lightest), var(--color-primary-darkest));
        --color-accent-primary-lighter: light-dark(var(--color-primary-lighter), var(--color-primary-darker));
        --color-accent-primary-light: light-dark(var(--color-primary-light), var(--color-primary-dark));
        --color-accent-primary-dark: light-dark(var(--color-primary-dark), var(--color-primary-light));
        --color-accent-primary-darker: light-dark(var(--color-primary-darker), var(--color-primary-lighter));
        --color-accent-primary-darkest: light-dark(var(--color-primary-darkest), var(--color-primary-lightest))
    }

    :where(.mayfield .theme--dark) {
        color: var(--color-body)
    }

    :where(.mayfield .theme--dark) {
        color: var(--color-body)
    }

    :where(.mayfield .theme--dark) {
        color: var(--color-body)
    }

    :where(.mayfield .theme--dark) {
        color: var(--color-body)
    }

    .mayfield .theme--accent {
        color-scheme: dark
    }

    .mayfield .theme--accent {
        --color-body: var(--color-black);
        --color-body-a75: color-mix(in srgb, var(--color-primary-reverse), transparent 25%);
        --color-body-a50: color-mix(in srgb, var(--color-primary-reverse), transparent 50%);
        --color-body-a25: color-mix(in srgb, var(--color-primary-reverse), transparent 75%);
        --color-body-a10: color-mix(in srgb, var(--color-primary-reverse), transparent 90%);
        --color-body-a5: color-mix(in srgb, var(--color-primary-reverse), transparent 95%);
        --color-body-a1: color-mix(in srgb, var(--color-primary-reverse), transparent 99%);
        --color-background: var(--color-primary);
        --color-background-alt: var(--color-primary-light);
        --color-background-a75: var(--color-black-a75);
        --color-background-a50: var(--color-black-a50);
        --color-background-a25: var(--color-black-a25);
        --color-background-a10: var(--color-black-a10);
        --color-background-a5: var(--color-black-a5);
        --color-background-a1: var(--color-black-a1);
        --color-accent-primary: var(--color-white);
        --color-accent-primary-reverse: #786F00;
        --color-accent-primary-lightest: var(--color-white-a25);
        --color-accent-primary-lighter: var(--color-white-a50);
        --color-accent-primary-light: var(--color-white-a75);
        --color-accent-primary-dark: var(--color-black-a25);
        --color-accent-primary-darker: var(--color-black-a50);
        --color-accent-primary-darkest: var(--color-black-a1)
    }

    :where(.mayfield .theme--accent) {
        color: var(--color-body)
    }

    :where(.mayfield .theme--accent) {
        color: var(--color-body)
    }

    :where(.mayfield .theme--accent) {
        color: var(--color-body)
    }

    :where(.mayfield .theme--accent) {
        color: var(--color-body)
    }

    .mayfield .overline-1 {
        font-family: var(--font-family-overline), sans-serif;
        font-weight: var(--font-weight-overline);
        text-transform: var(--text-transform-overline);
        font-size: var(--font-size-overline-1);
        line-height: var(--line-height-overline-1);
        letter-spacing: var(--letter-spacing-overline-1);
        font-style: var(--font-style-overline)
    }

    .mayfield .booking-mask-button {
        border-radius: 0 8px 8px 0
    }

    .mayfield .header-container .header .up-button {
        background-color: var(--color-background);
        color: var(--color-body);
        border-color: var(--color-background)
    }

    .mayfield .header .nav-toggle {
        background-color: var(--color-background)
    }

    .mayfield .header .nav-toggle svg path {
        fill: var(--color-body)
    }

    .mayfield .header .logo {
        position: absolute;
        left: 0;
        right: 0;
        width: 7.688rem;
        height: var(--size-l-5);
        margin: 0 auto
    }

    .mayfield .header .logo svg {
        height: var(--size-l-5);
        width: 139px;
        -webkit-box-flex: 0;
        flex: none
    }

    .mayfield .header-booking-mask input::placeholder {
        color: var(--color-accent-a50) !important
    }

    .mayfield .footer .footer-main .footer-social a.up-button svg {
        width: var(--size-m-5);
        height: var(--size-m-5)
    }
}

@media only screen and (max-width: 40rem) {
    .mayfield .footer .footer-main .footer-logo {
        height: auto
    }
}

@media all {
    .mayfield .footer .footer-main .footer-logo svg {
        width: 184.755px;
        height: var(--size-xl-2)
    }
}

@media only screen and (max-width: 40rem) {
    .mayfield .footer .footer-main .footer-logo svg {
        height: auto;
        position: relative
    }
}

@media all {
    .mayfield .footer .footer-main .footer-logo svg path {
        fill: var(--color-accent-primary)
    }

    .mayfield .booking-mask .booking-fields-container .booking-field-wrapper {
        border-radius: 8px 0 0 8px
    }

    html {
        font-size: calc(var(--base-unit-desktop) * 6.25 * 1%);
        font-variant-numeric: lining-nums
    }
}

@media only screen and (max-width: 48rem) {
    html {
        font-size: calc(var(--base-unit-mobile) * 6.25 * 1%)
    }
}

@media only screen and (min-width: calc(112rem + 1px)) {
    html {
        font-size: 112.5%
    }
}

@media all {
    body {
        font-family: var(--font-family-body), sans-serif;
        font-weight: var(--font-weight-body);
        text-transform: var(--text-transform-body);
        font-size: var(--font-size-body-m);
        line-height: var(--line-height-body-m);
        letter-spacing: var(--letter-spacing-body-m);
        font-style: var(--font-style-body)
    }

    :root {
        --color-dark-grey: #ececec;
        --color-dark-grey-a75: color-mix(in srgb, var(--color-dark-grey), transparent 25%);
        --color-dark-grey-a50: color-mix(in srgb, var(--color-dark-grey), transparent 50%);
        --color-dark-grey-a25: color-mix(in srgb, var(--color-dark-grey), transparent 75%);
        --color-dark-grey-a10: color-mix(in srgb, var(--color-dark-grey), transparent 90%);
        --color-dark-grey-a5: color-mix(in srgb, var(--color-dark-grey), transparent 95%);
        --color-dark-grey-a1: color-mix(in srgb, var(--color-dark-grey), transparent 99%);
        --color-black: #191919;
        --color-black-a75: color-mix(in srgb, var(--color-black), transparent 25%);
        --color-black-a50: color-mix(in srgb, var(--color-black), transparent 50%);
        --color-black-a25: color-mix(in srgb, var(--color-black), transparent 75%);
        --color-black-a10: color-mix(in srgb, var(--color-black), transparent 90%);
        --color-black-a5: color-mix(in srgb, var(--color-black), transparent 95%);
        --color-black-a1: color-mix(in srgb, var(--color-black), transparent 99%);
        --color-white: #FFFFFF;
        --color-white-a75: color-mix(in srgb, var(--color-white), transparent 25%);
        --color-white-a50: color-mix(in srgb, var(--color-white), transparent 50%);
        --color-white-a25: color-mix(in srgb, var(--color-white), transparent 75%);
        --color-white-a10: color-mix(in srgb, var(--color-white), transparent 90%);
        --color-white-a5: color-mix(in srgb, var(--color-white), transparent 95%);
        --color-white-a1: color-mix(in srgb, var(--color-white), transparent 99%);
        --color-gray-950: color-mix(in srgb, var(--color-black), var(--color-white) 5%);
        --color-gray-900: color-mix(in srgb, var(--color-black), var(--color-white) 10%);
        --color-gray-800: color-mix(in srgb, var(--color-black), var(--color-white) 20%);
        --color-gray-700: color-mix(in srgb, var(--color-black), var(--color-white) 30%);
        --color-gray-600: color-mix(in srgb, var(--color-black), var(--color-white) 40%);
        --color-gray-500: color-mix(in srgb, var(--color-black), var(--color-white) 50%);
        --color-gray-400: color-mix(in srgb, var(--color-black), var(--color-white) 60%);
        --color-gray-300: color-mix(in srgb, var(--color-black), var(--color-white) 70%);
        --color-gray-200: color-mix(in srgb, var(--color-black), var(--color-white) 80%);
        --color-gray-100: color-mix(in srgb, var(--color-black), var(--color-white) 90%);
        --color-gray-50: color-mix(in srgb, var(--color-black), var(--color-white) 95%);
        --color-primary: #f0de00;
        --color-primary-reverse: var(--color-white);
        --color-primary-lightest: color-mix(in srgb, var(--color-primary), white 87.5%);
        --color-primary-lighter: color-mix(in srgb, var(--color-primary), white 50%);
        --color-primary-light: color-mix(in srgb, var(--color-primary), white 25%);
        --color-primary-dark: color-mix(in srgb, var(--color-primary), black 25%);
        --color-primary-darker: color-mix(in srgb, var(--color-primary), black 50%);
        --color-primary-darkest: color-mix(in srgb, var(--color-primary), black 87.5%);
        --color-secondary: #f0de00;
        --color-secondary-reverse: var(--color-white);
        --color-secondary-lightest: color-mix(in srgb, var(--color-secondary), white 87.5%);
        --color-secondary-lighter: color-mix(in srgb, var(--color-secondary), white 50%);
        --color-secondary-light: color-mix(in srgb, var(--color-secondary), white 25%);
        --color-secondary-dark: color-mix(in srgb, var(--color-secondary), black 25%);
        --color-secondary-darker: color-mix(in srgb, var(--color-secondary), black 50%);
        --color-secondary-darkest: color-mix(in srgb, var(--color-secondary), black 87.5%);
        --color-success: #4CC27B;
        --color-success-reverse: var(--color-white);
        --color-success-lightest: color-mix(in srgb, var(--color-success), white 87.5%);
        --color-success-lighter: color-mix(in srgb, var(--color-success), white 50%);
        --color-success-light: color-mix(in srgb, var(--color-success), white 25%);
        --color-success-dark: color-mix(in srgb, var(--color-success), black 25%);
        --color-success-darker: color-mix(in srgb, var(--color-success), black 50%);
        --color-success-darkest: color-mix(in srgb, var(--color-success), black 87.5%);
        --color-warning: #EEBE43;
        --color-warning-reverse: var(--color-black);
        --color-warning-lightest: color-mix(in srgb, var(--color-warning), white 87.5%);
        --color-warning-lighter: color-mix(in srgb, var(--color-warning), white 50%);
        --color-warning-light: color-mix(in srgb, var(--color-warning), white 25%);
        --color-warning-dark: color-mix(in srgb, var(--color-warning), black 25%);
        --color-warning-darker: color-mix(in srgb, var(--color-warning), black 50%);
        --color-warning-darkest: color-mix(in srgb, var(--color-warning), black 87.5%);
        --color-danger: #DE3C4B;
        --color-danger-reverse: var(--color-white);
        --color-danger-lightest: color-mix(in srgb, var(--color-danger), white 87.5%);
        --color-danger-lighter: color-mix(in srgb, var(--color-danger), white 50%);
        --color-danger-light: color-mix(in srgb, var(--color-danger), white 25%);
        --color-danger-dark: color-mix(in srgb, var(--color-danger), black 25%);
        --color-danger-darker: color-mix(in srgb, var(--color-danger), black 50%);
        --color-danger-darkest: color-mix(in srgb, var(--color-danger), black 87.5%)
    }

    :root, .theme--default {
        color-scheme: light
    }

    :root, .theme--default {
        --color-body: light-dark(var(--color-black), var(--color-white));
        --color-body-a75: light-dark(var(--color-black-a75), var(--color-white-a75));
        --color-body-a50: light-dark(var(--color-black-a50), var(--color-white-a50));
        --color-body-a25: light-dark(var(--color-black-a25), var(--color-white-a25));
        --color-body-a10: light-dark(var(--color-black-a10), var(--color-white-a10));
        --color-body-a5: light-dark(var(--color-black-a5), var(--color-white-a5));
        --color-body-a1: light-dark(var(--color-black-a1), var(--color-white-a1));
        --color-background: light-dark(var(--color-white), var(--color-black));
        --color-background-alt: light-dark(var(--color-gray-50), var(--color-gray-900));
        --color-background-a75: light-dark(var(--color-white-a75), var(--color-black-a75));
        --color-background-a50: light-dark(var(--color-white-a50), var(--color-black-a50));
        --color-background-a25: light-dark(var(--color-white-a25), var(--color-black-a25));
        --color-background-a10: light-dark(var(--color-white-a10), var(--color-black-a10));
        --color-background-a5: light-dark(var(--color-white-a5), var(--color-black-a5));
        --color-background-a1: light-dark(var(--color-white-a1), var(--color-black-a1));
        --color-accent-primary: light-dark(var(--color-primary), var(--color-primary));
        --color-accent-primary-reverse: light-dark(var(--color-black), var(--color-black));
        --color-accent-primary-lightest: light-dark(var(--color-primary-lightest), var(--color-primary-darkest));
        --color-accent-primary-lighter: light-dark(var(--color-primary-lighter), var(--color-primary-darker));
        --color-accent-primary-light: light-dark(var(--color-primary-light), var(--color-primary-dark));
        --color-accent-primary-dark: light-dark(var(--color-primary-dark), var(--color-primary-light));
        --color-accent-primary-darker: light-dark(var(--color-primary-darker), var(--color-primary-lighter));
        --color-accent-primary-darkest: light-dark(var(--color-primary-darkest), var(--color-primary-lightest))
    }

    :where(:root,.theme--default,.theme--light) {
        color: var(--color-body)
    }

    :where(:root,.theme--default,.theme--light) {
        color: var(--color-body)
    }

    :where(:root,.theme--default,.theme--light) {
        color: var(--color-body)
    }

    :where(:root,.theme--default,.theme--light) {
        color: var(--color-body)
    }

    .theme--dark {
        color-scheme: dark
    }

    .theme--dark {
        --color-body: light-dark(var(--color-black), var(--color-white));
        --color-body-a75: light-dark(var(--color-black-a75), var(--color-white-a75));
        --color-body-a50: light-dark(var(--color-black-a50), var(--color-white-a50));
        --color-body-a25: light-dark(var(--color-black-a25), var(--color-white-a25));
        --color-body-a10: light-dark(var(--color-black-a10), var(--color-white-a10));
        --color-body-a5: light-dark(var(--color-black-a5), var(--color-white-a5));
        --color-body-a1: light-dark(var(--color-black-a1), var(--color-white-a1));
        --color-background: light-dark(var(--color-white), var(--color-black));
        --color-background-alt: light-dark(var(--color-gray-50), var(--color-gray-900));
        --color-background-a75: light-dark(var(--color-white-a75), var(--color-black-a75));
        --color-background-a50: light-dark(var(--color-white-a50), var(--color-black-a50));
        --color-background-a25: light-dark(var(--color-white-a25), var(--color-black-a25));
        --color-background-a10: light-dark(var(--color-white-a10), var(--color-black-a10));
        --color-background-a5: light-dark(var(--color-white-a5), var(--color-black-a5));
        --color-background-a1: light-dark(var(--color-white-a1), var(--color-black-a1));
        --color-accent-primary: light-dark(var(--color-primary), var(--color-primary));
        --color-accent-primary-reverse: light-dark(var(--color-black), var(--color-black));
        --color-accent-primary-lightest: light-dark(var(--color-primary-lightest), var(--color-primary-darkest));
        --color-accent-primary-lighter: light-dark(var(--color-primary-lighter), var(--color-primary-darker));
        --color-accent-primary-light: light-dark(var(--color-primary-light), var(--color-primary-dark));
        --color-accent-primary-dark: light-dark(var(--color-primary-dark), var(--color-primary-light));
        --color-accent-primary-darker: light-dark(var(--color-primary-darker), var(--color-primary-lighter));
        --color-accent-primary-darkest: light-dark(var(--color-primary-darkest), var(--color-primary-lightest))
    }

    :where(.theme--dark) {
        color: var(--color-body)
    }

    :where(.theme--dark) {
        color: var(--color-body)
    }

    :where(.theme--dark) {
        color: var(--color-body)
    }

    :where(.theme--dark) {
        color: var(--color-body)
    }

    .theme--accent {
        color-scheme: dark
    }

    .theme--accent {
        --color-body: var(--color-black);
        --color-body-a75: color-mix(in srgb, var(--color-primary-reverse), transparent 25%);
        --color-body-a50: color-mix(in srgb, var(--color-primary-reverse), transparent 50%);
        --color-body-a25: color-mix(in srgb, var(--color-primary-reverse), transparent 75%);
        --color-body-a10: color-mix(in srgb, var(--color-primary-reverse), transparent 90%);
        --color-body-a5: color-mix(in srgb, var(--color-primary-reverse), transparent 95%);
        --color-body-a1: color-mix(in srgb, var(--color-primary-reverse), transparent 99%);
        --color-background: var(--color-primary);
        --color-background-alt: var(--color-primary-light);
        --color-background-a75: var(--color-black-a75);
        --color-background-a50: var(--color-black-a50);
        --color-background-a25: var(--color-black-a25);
        --color-background-a10: var(--color-black-a10);
        --color-background-a5: var(--color-black-a5);
        --color-background-a1: var(--color-black-a1);
        --color-accent-primary: var(--color-white);
        --color-accent-primary-reverse: #786F00;
        --color-accent-primary-lightest: var(--color-white-a25);
        --color-accent-primary-lighter: var(--color-white-a50);
        --color-accent-primary-light: var(--color-white-a75);
        --color-accent-primary-dark: var(--color-black-a25);
        --color-accent-primary-darker: var(--color-black-a50);
        --color-accent-primary-darkest: var(--color-black-a1)
    }

    :where(.theme--accent) {
        color: var(--color-body)
    }

    :where(.theme--accent) {
        color: var(--color-body)
    }

    :where(.theme--accent) {
        color: var(--color-body)
    }

    :where(.theme--accent) {
        color: var(--color-body)
    }

    :root {
        --font-family-primary: Figtree, system-ui, sans-serif;
        --font-family-secondary: Manuka, system-ui, sans-serif
    }

    :root {
        --line-height-1: 1;
        --line-height-2x-tight: 1.1;
        --line-height-x-tight: 1.2;
        --line-height-tight: 1.333;
        --line-height-standard: 1.5;
        --line-height-loose: 1.66
    }

    :root {
        --letter-spacing-x-tight: -0.06em;
        --letter-spacing-tight: -0.03em;
        --letter-spacing-0: 0em;
        --letter-spacing-loose: 0.03em;
        --letter-spacing-x-loose: 0.06em;
        --letter-spacing-2x-loose: 0.13em;
        --letter-spacing-3x-loose: 0.25em
    }

    :root {
        --font-family-body: var(--font-family-primary);
        --font-weight-body: 400;
        --font-style-body: regular;
        --text-transform-body: none;
        --font-size-body-l: var(--font-size-l);
        --line-height-body-l: var(--line-height-standard);
        --letter-spacing-body-l: var(--letter-spacing-0);
        --font-size-body-m: var(--font-size-m);
        --line-height-body-m: var(--line-height-standard);
        --letter-spacing-body-m: var(--letter-spacing-0);
        --font-size-body-s: var(--font-size-s);
        --line-height-body-s: var(--line-height-standard);
        --letter-spacing-body-s: var(--letter-spacing-0);
        --font-size-body-xs: var(--font-size-xs);
        --line-height-body-xs: var(--line-height-standard);
        --letter-spacing-body-xs: var(--letter-spacing-loose);
        --font-family-large-heading: var(--font-family-secondary);
        --font-weight-large-heading: 400;
        --font-style-large-heading: regular;
        --text-transform-large-heading: normal;
        --font-size-large-heading-1: var(--font-size-5xl);
        --line-height-large-heading-1: var(--line-height-2x-tight);
        --letter-spacing-large-heading-1: var(--letter-spacing-loose);
        --font-size-large-heading-2: var(--font-size-4xl);
        --line-height-large-heading-2: var(--line-height-x-tight);
        --letter-spacing-large-heading-2: var(--letter-spacing-loose);
        --font-size-large-heading-3: var(--font-size-3xl);
        --line-height-large-heading-3: var(--line-height-tight);
        --letter-spacing-large-heading-3: var(--letter-spacing-loose);
        --font-family-small-heading: var(--font-family-primary);
        --font-weight-small-heading: 700;
        --font-style-small-heading: bold;
        --text-transform-small-heading: uppercase;
        --font-size-small-heading-1: var(--font-size-l);
        --line-height-small-heading-1: var(--line-height-tight);
        --letter-spacing-small-heading-1: var(--letter-spacing-loose);
        --font-size-small-heading-2: var(--font-size-m);
        --line-height-small-heading-2: var(--line-height-tight);
        --letter-spacing-small-heading-2: var(--letter-spacing-loose);
        --font-size-small-heading-3: var(--font-size-s);
        --line-height-small-heading-3: var(--line-height-tight);
        --letter-spacing-small-heading-3: var(--letter-spacing-loose);
        --font-family-subtitle: var(--font-family-primary);
        --font-weight-subtitle: 400;
        --font-style-subtitle: regular;
        --text-transform-subtitle: none;
        --font-size-subtitle-1: var(--font-size-l);
        --line-height-subtitle-1: var(--line-height-tight);
        --letter-spacing-subtitle-1: var(--letter-spacing-0);
        --font-size-subtitle-2: var(--font-size-m);
        --line-height-subtitle-2: var(--line-height-tight);
        --letter-spacing-subtitle-2: var(--letter-spacing-0);
        --font-family-button-text: var(--font-family-primary);
        --font-weight-button-text: 400;
        --font-style-button-text: regular;
        --text-transform-button-text: uppercase;
        --font-size-button-text-l: var(--font-size-m);
        --line-height-button-text-l: var(--line-height-x-tight);
        --letter-spacing-button-text-l: var(--letter-spacing-x-loose);
        --font-size-button-text-m: var(--font-size-s);
        --line-height-button-text-m: var(--line-height-x-tight);
        --letter-spacing-button-text-m: var(--letter-spacing-x-loose);
        --font-size-button-text-s: var(--font-size-xs);
        --line-height-button-text-s: var(--line-height-x-tight);
        --letter-spacing-button-text-s: var(--letter-spacing-x-loose);
        --font-family-label: var(--font-family-primary);
        --font-weight-label: 700;
        --font-style-label: bold;
        --text-transform-label: none;
        --font-size-label-1: var(--font-size-xs);
        --line-height-label-1: var(--line-height-x-tight);
        --letter-spacing-label-1: var(--letter-spacing-loose);
        --font-size-label-2: var(--font-size-2xs);
        --line-height-label-2: var(--line-height-x-tight);
        --letter-spacing-label-2: var(--letter-spacing-loose);
        --font-size-label-3: var(--font-size-3xs);
        --line-height-label-3: var(--line-height-x-tight);
        --letter-spacing-label-3: var(--letter-spacing-x-loose);
        --font-family-overline: var(--font-family-primary);
        --font-weight-overline: 600;
        --font-style-overline: regular;
        --text-transform-overline: uppercase;
        --font-size-overline-1: var(--font-size-xs);
        --line-height-overline-1: var(--line-height-x-tight);
        --letter-spacing-overline-1: var(--letter-spacing-x-loose);
        --font-size-overline-2: var(--font-size-2xs);
        --line-height-overline-2: var(--line-height-x-tight);
        --letter-spacing-overline-2: var(--letter-spacing-x-loose);
        --font-size-overline-3: var(--font-size-3xs);
        --line-height-overline-3: var(--line-height-x-tight);
        --letter-spacing-overline-3: var(--letter-spacing-x-loose)
    }

    .overline-1 {
        font-family: var(--font-family-overline), sans-serif;
        font-weight: var(--font-weight-overline);
        text-transform: var(--text-transform-overline);
        font-size: var(--font-size-overline-1);
        line-height: var(--line-height-overline-1);
        letter-spacing: var(--letter-spacing-overline-1);
        font-style: var(--font-style-overline)
    }
}

/*! CSS Used from: https://www.mayfieldhotels.com/wp-content/themes/magnuson/assets/css/global.css?ver=6.8.3 ; media=all */
@media all {
    .booking-mask .booking-field .search-dropdown .search-results .search-results-list .search-result-item .search-result-item-title, .booking-mask .booking-field .search-dropdown, .booking-mask .booking-field .booking-field-select {
        transition: all .3s ease-out
    }
}

@media all {
    :where(.has-background) {
        background-color: var(--color-background);
        color: var(--color-body)
    }

    .footer {
        padding: var(--space-s)
    }

    .footer .footer-container {
        padding: var(--space-xl);
        display: flex;
        flex-direction: column;
        gap: var(--space-xl);
        border-radius: 8px
    }

    .footer .footer-main {
        display: flex;
        flex-direction: row;
        gap: var(--gutter-loose)
    }

    .footer .footer-main .footer-logo {
        width: 14.188rem;
        height: 4rem;
        position: relative
    }

    .footer .footer-main .footer-logo svg {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: contain
    }

    .footer .footer-main .footer-menu {
        flex: 1
    }

    .footer .footer-main .footer-menu a {
        color: var(--color-body)
    }

    .footer .footer-main .footer-menu a:hover {
        color: var(--color-accent-primary)
    }

    .footer .footer-main .footer-menu ul {
        display: flex;
        flex-direction: column;
        gap: var(--space-s);
        text-align: left
    }

    .footer .footer-main .footer-menu ul a {
        font-family: var(--font-family-small-heading), sans-serif;
        font-weight: var(--font-weight-small-heading);
        text-transform: var(--text-transform-small-heading);
        font-size: var(--font-size-small-heading-3);
        line-height: var(--line-height-small-heading-3);
        letter-spacing: var(--letter-spacing-small-heading-3);
        font-style: var(--font-style-small-heading)
    }

    .footer .footer-main .footer-menu ul .sub-menu {
        display: flex;
        flex-direction: column;
        padding-top: var(--space-s);
        gap: var(--space-2xs)
    }

    .footer .footer-main .footer-menu ul .sub-menu a {
        font-family: var(--font-family-body), sans-serif;
        font-weight: var(--font-weight-body);
        text-transform: var(--text-transform-body);
        font-size: var(--font-size-body-xs);
        line-height: var(--line-height-body-xs);
        letter-spacing: var(--letter-spacing-body-xs);
        font-style: var(--font-style-body)
    }

    .footer .footer-main .footer-menu ul, .footer .footer-main .footer-menu li, .footer .footer-main .footer-menu a {
        padding: unset;
        margin: unset
    }

    .footer .footer-main .footer-social {
        display: flex;
        flex-direction: row;
        align-items: end;
        gap: var(--space-s)
    }

    .footer .footer-main .footer-social a.up-button {
        border-radius: 4px;
        padding: var(--space-2xs);
        aspect-ratio: 1/1;
        width: unset;
        height: unset
    }

    .footer .footer-main .footer-social a.up-button svg {
        width: var(--size-m-2);
        height: var(--size-m-2)
    }
}

@media only screen and (max-width: 64rem) {
    .footer .footer-main {
        flex-direction: column
    }

    .footer .footer-main .footer-logo {
        width: 227px;
        height: 48px
    }
}

@media all {
    .footer .footer-divider {
        height: 1px;
        background-color: var(--color-body-a25)
    }

    .footer .footer-copyright {
        display: flex;
        flex-direction: row;
        gap: var(--space-l);
        align-items: center
    }

    .footer .footer-copyright .copyright-text {
        font-family: var(--font-family-body), sans-serif;
        font-weight: var(--font-weight-body);
        text-transform: var(--text-transform-body);
        font-size: var(--font-size-body-s);
        line-height: var(--line-height-body-s);
        letter-spacing: var(--letter-spacing-body-s);
        font-style: var(--font-style-body);
        margin-bottom: unset
    }

    .footer .footer-copyright ul, .footer .footer-copyright li, .footer .footer-copyright a {
        margin: unset;
        padding: unset
    }

    .footer .footer-copyright ul {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-s)
    }

    .footer .footer-copyright ul a {
        font-family: var(--font-family-body), sans-serif;
        font-weight: var(--font-weight-body);
        text-transform: var(--text-transform-body);
        font-size: var(--font-size-body-s);
        line-height: var(--line-height-body-s);
        letter-spacing: var(--letter-spacing-body-s);
        font-style: var(--font-style-body)
    }
}

@media only screen and (max-width: 64rem) {
    .footer .footer-copyright {
        flex-direction: column;
        justify-content: start;
        align-items: start
    }
}

@media all {
    .booking-mask-modal-button {
        display: none
    }

    .booking-mask {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        font-family: var(--font-family-body), sans-serif;
        font-weight: var(--font-weight-body);
        text-transform: var(--text-transform-body);
        font-style: var(--font-style-body)
    }

    .booking-mask .booking-field[data-type=search] {
        padding-right: var(--space-s)
    }

    .booking-mask .booking-mask-button {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-inline: var(--space-s)
    }

    .booking-mask input {
        padding: var(--space-xs)
    }

    .booking-mask .booking-fields-container {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: unset
    }

    .booking-mask .booking-fields-container .booking-field-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: var(--space-s);
        padding-left: var(--space-s);
        background-color: var(--color-background)
    }

    .booking-mask .booking-fields-container .booking-field-divider {
        width: 1px;
        background-color: var(--color-body-a25)
    }

    .booking-mask input[type=text] {
        background-color: rgba(0, 0, 0, 0);
        border: unset;
        padding-inline: unset;
        width: 100%
    }

    .booking-mask input[type=text]::placeholder {
        color: var(--color-body-a50)
    }

    .booking-mask .booking-field {
        display: flex;
        flex-direction: row;
        gap: var(--space-xs);
        align-items: center;
        position: relative
    }

    .booking-mask .booking-field.selector-type {
        cursor: pointer
    }

    .booking-mask .booking-field svg {
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 0;
        object-fit: contain
    }

    .booking-mask .booking-field .booking-field-input-wrap {
        display: flex;
        flex-direction: row;
        gap: var(--space-3xs);
        align-items: center
    }

    .booking-mask .booking-field .booking-field-input-wrap .booking-field-dropdown {
        width: var(--size-m-3);
        height: var(--size-m-3);
        position: relative
    }

    .booking-mask .booking-field .booking-field-icon {
        width: var(--size-m-3);
        height: var(--size-m-3);
        position: relative
    }

    .booking-mask .booking-field .booking-field-select {
        position: absolute;
        padding: var(--space-s);
        display: flex;
        gap: var(--space-m);
        flex-direction: column;
        width: 100%;
        border-radius: 8px;
        box-shadow: 4px 8px 24px rgba(0, 10, 44, .075);
        background-color: var(--color-background);
        min-width: 20rem;
        z-index: 5;
        top: calc(100% + var(--space-s) + var(--space-xs));
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        left: 50%;
        transform: translateX(-50%)
    }

    .booking-mask .booking-field .booking-field-select .booking-field-select-wrap {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-bottom: solid 1px var(--color-body-a10);
        padding-bottom: var(--space-s)
    }

    .booking-mask .booking-field .booking-field-select .booking-field-select-wrap .select-desc {
        display: flex;
        flex-direction: column;
        margin-bottom: unset;
        font-family: var(--font-family-body), sans-serif;
        font-weight: var(--font-weight-body);
        text-transform: var(--text-transform-body);
        font-style: var(--font-style-body)
    }

    .booking-mask .booking-field .booking-field-select .booking-field-select-wrap .select-desc span {
        font-family: var(--font-family-body), sans-serif;
        font-weight: var(--font-weight-body);
        text-transform: var(--text-transform-body);
        font-size: var(--font-size-body-xs);
        line-height: var(--line-height-body-xs);
        letter-spacing: var(--letter-spacing-body-xs);
        font-style: var(--font-style-body);
        color: var(--color-body-a50)
    }

    .booking-mask .booking-field .booking-field-select .booking-field-select-wrap .selector {
        display: flex;
        flex-direction: row;
        align-items: center
    }

    .booking-mask .booking-field .booking-field-select .booking-field-select-wrap .selector button {
        width: var(--size-m-5);
        height: var(--size-m-5);
        padding: unset;
        margin: unset;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
        color: var(--color-body);
        border-color: var(--color-body);
        min-height: unset
    }

    .booking-mask .booking-field .booking-field-select .booking-field-select-wrap .selector button svg {
        width: var(--size-m-1);
        height: var(--size-m-1);
        position: relative
    }

    .booking-mask .booking-field .booking-field-select .booking-field-select-wrap .selector .selector-value {
        margin: unset;
        font-family: var(--font-family-body), sans-serif;
        font-weight: var(--font-weight-body);
        text-transform: var(--text-transform-body);
        font-style: var(--font-style-body);
        width: 3rem;
        text-align: center
    }

    .booking-mask .booking-field .booking-field-select .select-confirm {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        align-self: end
    }

    .booking-mask .booking-field .search-dropdown {
        padding: var(--space-s);
        position: absolute;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        background-color: var(--color-background);
        border-radius: 8px;
        left: 0;
        top: calc(100% + var(--space-s) + var(--space-xs));
        min-width: 22.5rem;
        z-index: 1
    }

    .booking-mask .booking-field .search-dropdown .search-results {
        display: flex;
        flex-direction: column;
        gap: var(--space-s)
    }

    .booking-mask .booking-field .search-dropdown .search-results .overline-1 {
        margin-bottom: unset;
        font-family: var(--font-family-overline), sans-serif;
        font-weight: var(--font-weight-overline);
        text-transform: var(--text-transform-overline);
        font-size: var(--font-size-overline-1);
        line-height: var(--line-height-overline-1);
        letter-spacing: var(--letter-spacing-overline-1);
        font-style: var(--font-style-overline);
        color: var(--color-body)
    }

    .booking-mask .booking-field .search-dropdown .search-results .search-results-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-s)
    }

    .booking-mask .booking-field .search-dropdown .search-results .search-results-list .search-result-item {
        padding: unset;
        min-height: unset;
        margin: unset;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-s);
        background-color: unset;
        border: unset
    }

    .booking-mask .booking-field .search-dropdown .search-results .search-results-list .search-result-item .search-result-item-title {
        font-family: var(--font-family-body), sans-serif;
        font-weight: var(--font-weight-body);
        text-transform: var(--text-transform-body);
        font-size: var(--font-size-body-s);
        line-height: var(--line-height-body-s);
        letter-spacing: var(--letter-spacing-body-s);
        font-style: var(--font-style-body);
        color: var(--color-body);
        text-align: left
    }

    .booking-mask .booking-field .search-dropdown .search-results .search-results-list .search-result-item .search-result-item-icon {
        padding: 10px;
        border-radius: 4px;
        border: 1px solid var(--color-body-a25)
    }

    .booking-mask .booking-field .search-dropdown .search-results .search-results-list .search-result-item .search-result-item-icon svg {
        width: 20px;
        height: 20px;
        position: relative;
        color: var(--color-accent-primary)
    }

    .booking-mask .booking-field .search-dropdown .search-results .search-results-list .search-result-item:hover .search-result-item-title {
        color: var(--color-accent-primary)
    }

    .js-rates-modal {
        cursor: pointer
    }
}