/*  ==========================================
    00. POTENTIALLY REMOVE
    ==========================================  */


    /* LINE HEIGHT */
    .half {line-height: 1.2;}

    /* MARGIN */
    .margin-btm-54px {margin-bottom: 54px;} /* space between <p> and btn's */
    .margin-btm-05px {margin-bottom: 0.5px} /* space between <h> and <p> on group booking carousel */
    .margin-zero {margin: 0px} 





/*  ==========================================
    01. BASE SETTINGS
    ==========================================  */

    /* ---------- COLOURS ---------- */
    :root {
        --teal:             #26798e;
        --teal-dark:        #136576;
        --cream:            #FBF4EC;
        --cream-dark:       #f7ede1;
        --black:            #333;
    }

    .teal       {color: var(--teal);}
    .teal-dark  {color: var(--teal-dark);}
    .cream      {color: var(--cream);}
    .cream-dark {color: var(--cream-dark);}
    .black      {color: var(--black);}

    /* ---------- FONTS ---------- */
@font-face {
  font-family: 'CaviarDreamsBold';
  src: url('./fonts/CaviarDreams_Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}





/*  ==========================================
    02. UTILITIES
    ==========================================  */

    /* ---------- FONT WEIGHTS ---------- */
    .FW100 {font-weight: 100};
    .FW200 {font-weight: 200};
    .FW300 {font-weight: 300};
    .FW400 {font-weight: 400};
    .FW500 {font-weight: 500};
    .FW600 {font-weight: 600};
    .FW700 {font-weight: 700};
    .FW800 {font-weight: 800};
    .FW900 {font-weight: 900};


    /* ---------- TEXT ALIGNMENT ---------- */
    .left   {text-align: left;}
    .center {text-align: center;}
    .right  {text-align: right;}

    /* ---------- TEXT BALANCE ---------- */
    .balance    {text-wrap: balance;}

    /* ---------- TEXT TRANSFORM ---------- */
    .uppercase {text-transform: uppercase;}
    .lowercase {text-transform: lowercase;}

    /* ---------- BUTTON ALIGNMENT ---------- */
    .btn-container.btn-left     {justify-content: flex-start;}
    .btn-container.btn-center   {justify-content: center;}
    .btn-container.btn-right    {justify-content: flex-end;}

    /* ---------- HIDES CODE BLOCK MESSAGE ---------- */
    html.squarespace-damask .sqs-blockStatus,
    .sqs-block .removed-script {
        display: none !important;
    }





/*  ==========================================
    03. TYPOGRAPHY
    ==========================================  */

    :root {
        /* H1 */
        --h1-font-size:             clamp(45px, calc(40.714px + 1.339vw), 60px);
        --h1-line-height:           clamp(56px, calc(51.429px + 1.429vw), 72px);
        --h1-space-after:           64px;

        /* H2 */
        --h2-font-size:             clamp(40px, calc(37.714px + 0.714vw), 48px);
        --h2-line-height:           clamp(48px, calc(45.714px + 0.714vw), 56px);
        --h2-space-after:           clamp(48px, calc(68.571px - 1.429vw), 64px);

        /* H3 */
        --h3-font-size:             clamp(32px, calc(29.714px + 0.714vw), 40px);
        --h3-line-height:           clamp(40px, calc(37.714px + 0.714vw), 48px);
        --h3-space-after:           clamp(32px, calc(73.143px - 2.857vw), 64px);

        /* H4 */
        --h4-font-size:             clamp(28px, calc(26.857px + 0.357vw), 32px);
        --h4-line-height:           clamp(32px, calc(29.714px + 0.714vw), 40px);
        --h4-space-after:           20px;

        /* H5 */
        --h5-font-size:             24px;
        --h5-line-height:           28px;
        --h5-space-after:           20px;

        /* H6 */
        --h6-font-size:             20px;
        --h6-line-height:           24px;
        --h6-space-after:           20px;

        /* Paragraph Large */
        --p-large-font-size:        20px;
        --p-large-line-height:      24px;
        --p-large-space-after:      20px;

        /* Paragraph Medium */
        --p-medium-font-size:       16px;
        --p-medium-line-height:     24px;
        --p-medium-space-after:     20px;

        /* Paragraph Small */
        --p-small-font-size:        14px;
        --p-small-line-height:      16px;
        --p-small-space-after:      20px;
    }


    .h1 { 
        font-family: 'CaviarDreamsBold', sans-serif;
        text-transform: uppercase;
        text-wrap: balance;
        font-size: var(--h1-font-size); 
        line-height: var(--h1-line-height); 
        margin-bottom: var(--h1-space-after); 
    }

    .h2 { 
        font-family: 'CaviarDreamsBold', sans-serif;
        text-transform: uppercase;
        text-wrap: balance;
        font-size: var(--h2-font-size); 
        line-height: var(--h2-line-height); 
        margin-bottom: var(--h2-space-after); 
    }

    .h3 { 
        font-family: 'CaviarDreamsBold', sans-serif;
        text-transform: uppercase;
        text-wrap: balance;
        font-size: var(--h3-font-size); 
        line-height: var(--h3-line-height); 
        margin-bottom: var(--h3-space-after); 
    }

    .h4 { 
        font-size: var(--h4-font-size); 
        line-height: var(--h4-line-height); 
        margin-bottom: var(--h4-space-after); 
    }

    .h5 { 
        font-size: var(--h5-font-size); 
        line-height: var(--h5-line-height); 
        margin-bottom: var(--h5-space-after); 
    }

    .h6 { 
        font-size: var(--h6-font-size); 
        line-height: var(--h6-line-height); 
        margin-bottom: var(--h6-space-after); 
    }

    .p-large  { 
        font-size: var(--p-large-font-size);  
        line-height: var(--p-large-line-height);  
        margin-bottom: var(--p-large-space-after); 
    }

    .p-medium { 
        font-size: var(--p-medium-font-size); 
        line-height: var(--p-medium-line-height); 
        margin-bottom: var(--p-medium-space-after); 
    }

    .p-small  { 
        font-size: var(--p-small-font-size);  
        line-height: var(--p-small-line-height);  
        margin-bottom: var(--p-small-space-after); 
    }





    /*  ==========================================
    04. BUTTONS
    ==========================================  */

    /* ---------- BUTTON CONTAINER ---------- */
    .btn-container {
        display: flex;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
        width: 100%;
    }

    /* ---------- BUTTON BASE STYLE ---------- */ 
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        font-weight: 700;
        padding: 12px 18px;
        border-radius: 8px;
        box-sizing: border-box;
        border: 2px solid transparent;
        font-size: 15px;
        line-height: 1;
        white-space: nowrap;
        transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
    }

    .btn-container, .btn {margin: 0;}

    /* ---------- DEFAULT STATE ---------- */ 
    /* PRIMARY */
    .btn--solid {
        background: var(--teal);
        color: var(--cream);
    }

    /* SECONDARY */
    .btn--outline {
        background: var(--cream);
        color: var(--teal);
        border-color: var(--teal);
    }

    /* TERTIARY */
    .btn--tertiary {
        background: transparent; 
        border-color: transparent; 
        color: var(--teal);
        border-radius: 0;
        position: relative; 
        transition: color 180ms ease;
    }

    .btn--tertiary::after {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 8px;
        height: 2px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 220ms ease;
    }

    /* ---------- HOVER STATE ---------- */
    .btn--solid:hover{
        background: color-mix(in srgb, var(--teal) 85%, black);
    }

    .btn--outline:hover{
        background: color-mix(in srgb, var(--teal) 90%, black);
        color: var(--cream);
        border-color: color-mix(in srgb, var(--teal) 90%, black);
    }

    .btn--tertiary:hover::after{
        transform: scaleX(1);
    }

    /* ---------- FOCUS STATE ---------- */ 
    .btn:focus-visible{
        outline: 2px solid var(--teal);
        outline-offset: 3px;
    }

    /* ---------- RESPONSIVE ---------- */ 
    @media (max-width: 675px) {
        .btn-container {
            flex-direction: column;
            align-items: stretch;
        }

        a.btn {
            padding-left: 10px !important;
            padding-right: 10px !important;
            font-size: 14px !important;
            width: 100%;
        }

        .btn            {width: 100%;}
        .btn--solid     {order: 1;}
        .btn--outline   {order: 2;}
        .btn--tertiary  {text-align: center;}
    }

    /* ---------- NAV BAR BUTTON ---------- */

    .header-actions-action--cta a.btn {
        font-weight: 700!important;
        border-radius: 8px;
        letter-spacing: 0.6px !important;
        padding: 12px 18px !important;
        text-transform: !important;
        font-size: 15px !important;
    }


    /* ---------- MOBILE NAV MENU ---------- */
    .header-menu-nav-folder-content {
        background-color: var(--cream);
    }

    .header--menu-open .header-menu .header-menu-actions, .header--menu-open .header-menu .header-menu-cta {
        background-color: var(--cream);
    }

    .header-menu-cta a {
        visibility: hidden !important;
        display: none !important;
    }

    @media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px) {
        .tweak-fixed-header:not(.sqs-edit-mode-active):not(.sqs-site-styles-active) .header.shrink .header-announcement-bar-wrapper {
            background-color: var(--cream);
        }
    }

    @media only screen and (max-width: 645px) {
        .header-menu-nav-item a {
            font-size: 2rem;
        }
    }





    /*  ==========================================
    04. NAVIGATION BAR
    ==========================================  */

    /* ---------- NAV BAR 2ND BUTTON ON MOBILE ---------- */
    @media screen and (max-width:991px) {
        .header-actions.header-actions--right,
        .header-actions-action.header-actions-action--cta {
            display: flex !important;
        }

        .header-title-nav-wrapper {
            flex: 1 0 30% !important;
        }

        a.btn {
            padding-left: 10px !important;
            padding-right: 10px !important;
            font-size: 14px !important;
        }

        div.header-burger {
            position: relative;
            right: -2vw;
        }
    }