/**
 *  _____ ____    ____ _______    ___  _______  _________    _      ____  _____ _________  
 * |_   _|_   \  /   _|_   __ \ .'   `|_   __ \|  _   _  |  / \    |_   \|_   _|  _   _  | 
 *   | |   |   \/   |   | |__) /  .-.  \| |__) |_/ | | \_| / _ \     |   \ | | |_/ | | \_| 
 *   | |   | |\  /| |   |  ___/| |   | ||  __ /    | |    / ___ \    | |\ \| |     | |     
 *  _| |_ _| |_\/_| |_ _| |_   \  `-'  _| |  \ \_ _| |_ _/ /   \ \_ _| |_\   |_   _| |_    
 * |_____|_____||_____|_____|   `.___.|____| |___|_____|____| |____|_____|\____| |_____|  
 *
 * Some styles have been moved to the a separate chunk. This is so they can
 * be put in the head and override bootstrap styles prevent style layout jank.
 * So if there are styles that are inside of the inline style tag in the head,
 * they can be found inside of the chunk $critical-css
 */
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(''),
        url('barlow-400-2.woff2') format('woff2'),
        url('barlow-400.woff') format('woff');
}

@font-face {
    font-family: 'Barlow';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local(''),
        url('barlow-400i-2.woff2') format('woff2'),
        url('barlow-400i.woff') format('woff');
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local(''),
        url('barlow-500-2.woff2') format('woff2'),
        url('barlow-500.woff') format('woff');
}

@font-face {
    font-family: 'Barlow';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: local(''),
        url('barlow-500i-2.woff2') format('woff2'),
        url('barlow-500i.woff') format('woff');
}

@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local('PlayfairDisplay-Italic'),
        url('playfair-display-regular-ttf.ttf') format('ttf');
}

@font-face {
    font-family: 'Playfair Display';
    font-style: regular;
    font-weight: 400;
    font-display: swap;
    src: local('PlayfairDisplay-Regular'),
        url('playfair-display-italic-ttf.ttf') format('ttf');
}

@font-face {
    font-family: 'Playfair Display';
    font-style: regular;
    font-weight: 900;
    font-display: swap;
    src: local('PlayfairDisplay-Black'),
        url('playfair-display-black-ttf.ttf') format('ttf');
}

@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: local('PlayfairDisplay-BlackItalic'),
        url('playfair-display-black-italic-ttf.ttf') format('ttf');
}

/**
 
 
 
 
 
 
*/

:root {
    /** Bootstrap overrides */
    --bs-black-rgb: 9, 21, 33;
    --bs-black-hsl: 210 57.1% 8.2%;
    --bs-black-hex: #091521;
    --bs-black: rgb(9, 21, 33);
    --bs-dark-rgb: 94, 96, 98;
    --bs-dark-hsl: 210 2.1% 37.6%;
    --bs-dark-hex: #5e6062;
    --bs-dark: rgb(94, 96, 98);
    --bs-gray-rgb: 118, 129, 139;
    --bs-gray-hsl: 209 8.3% 50.4%;
    --bs-gray-hex: #76818b;
    --bs-gray: rgb(118, 129, 139);
    --bs-light-rgb: 229, 236, 241;
    --bs-light-hsl: 205 30% 92.2%;
    --bs-light-hex: #e5ecf1;
    --bs-light: rgb(229, 236, 241);
    --bs-primary-rgb: 171, 208, 43;
    --bs-primary-hsl: 73 65.7% 49.2%;
    --bs-primary-hex: #abd02b;
    --bs-primary: rgb(171, 208, 43);
    --bs-light-gray-rgb: 164, 167, 169;
    --bs-light-gray-hsl: 204 2.8% 65.3%;
    --bs-light-gray-hex: #a4a7a9;
    --bs-light-gray: rgb(164, 167, 169);
    --bs-green: var(--bs-primary);
    --bs-light-green: rgb(var(--bs-primary-rgb), 0.1);
    --bs-dark-gray: var(--bs-dark);
    /** Bootstrap Body Overrides */
    --bs-font-sans-serif: 'Barlow', sans-serif;
    --bs-font-serif: 'Playfair Display', serif;
    --bs-body-line-height: 1.8;
    --bs-body-font-size: 16px;
    --bs-body-font-weight: 400;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-color: var(--bs-black);
    /** Color Palette */
    --green: var(--bs-green); /* L: 49 */
    --light-gray-900: var(--bs-light);
    --light-gray: var(--bs-light-gray); /* L: 65 */ /** No Bootstrap analogue */
    --gray: var(--bs-gray); /* L: 50 */
    --dark-gray: var(--bs-dark-gray); /* L: 38 */
    --black: var(--bs-black); /* L: 8 */
    --black-transparent: rgba(var(--bs-black-rgb) / 0);
    --black-shadow: 0 0 0 0.25rem rgb(var(--bs-black-rgb) / 0.5);
    --white: var(--bs-white); /** #fff */
    --primary: var(--bs-primary);
    --ls-link: 0.05em;
    --t-ease: all 0.25s ease;
    --t-ease-out: all 0.25s ease-out;
    --t-ease-in: all 0.25s ease-in;
    --t-linear: all 0.25s linear;
    height: -webkit-fill-available;
    height: 100%;
}

body {
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body > main {
    flex-grow: 1;
}

body > nav {
    background-color: transparent;
    transition: var(--t-linear);
    transition-property: background-color;
}

body > nav[data-sticky="true"] {
    background-color: var(--black);
}

body > header {
    background-color: var(--black);
}

@media (max-width: 768px) {
    /** Prevent screen zoom on input focus */
    /* Extreme but useful */
    input[type="color"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="month"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="time"],
    input[type="url"],
    input[type="week"],
    select:focus,
    textarea {
        font-size: 16px !important;
    }
}

/** Skiplink Styles (moved to head) */

[id] {
    scroll-margin-top: 1ex;
}

a {
    transition: var(--t-ease);
    transition-property: color;
}

a:hover {
    color: var(--green);
}

hr {
    margin-top: 30px;
    margin-bottom: 30px;
    border-color: var(--bs-light);
    background-color: var(--bs-light);
    opacity: 1;
}

/** Aspect ratio can help prevent a lot of reflow issues flagged by pagespeed insights */
img[style*="--aspect-ratio"] {
    aspect-ratio: var(--aspect-ratio);
}

/** 
 * Aspect ratio hack for box elements, like div, that hav
 * a direct element child that is an img
 * https://css-tricks.com/aspect-ratio-boxes/#aa-using-custom-properties
 */
[style*="--aspect-ratio"]:not(img) > :first-child {
    width: 100%;
}

[style*="--aspect-ratio"]:not(img) > img {
    height: auto;
}

@supports (--custom:property) {
    [style*="--aspect-ratio"] {
        position: relative;
    }
    [style*="--aspect-ratio"]::before {
        content: "";
        display: block;
        padding-bottom: calc(100% / (var(--aspect-ratio)));
    }
    [style*="--aspect-ratio"] > :first-child {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
    }
}


 :-moz-any(h1,h2,.h1,.h2) {
    
    font-family: var(--bs-font-serif);
    font-style: italic;
    line-height: 1.2;

}

 :-webkit-any(h1,h2,.h1,.h2) {
    
    font-family: var(--bs-font-serif);
    font-style: italic;
    line-height: 1.2;

}

 :matches(h1,h2,.h1,.h2) {
    
    font-family: var(--bs-font-serif);
    font-style: italic;
    line-height: 1.2;

}

 :is(h1,h2,.h1,.h2) {
    
    font-family: var(--bs-font-serif);
    font-style: italic;
    line-height: 1.2;

}


h2,.h2 {
    font-size: min(36px, 1.5rem + 1vw);
    margin-bottom: 0.5em;
}

h5,.h5 {
    font-size: min(20px, 1.25rem + 1vw);
}

/** Utilities */
/**
 * Expect to see these classes wrapped with brackets on elements
 * 
 * e.g. <a class="[ color-blue text-decoration-none ] nav-item" href="...">...</a>
 */
.bg-light-green {
    background-color: var(--bs-light-green);
}
.h-inherit {
    height: inherit !important;
}
.min-h-inherit {
    min-height: inherit !important;
}

:root {
    /** 
     * These min functions will set the sizes to be
     * the first value for most screen sizes,
     * but at smaller screen sizes will begin 
     * to shrink slightly to make spacing slightly
     * more accessible for smaller screens
     */
    --sm: min(35px, 1rem + 2.5vw);
    --md: min(60px, 2rem + 3vw);
    --lg: min(100px, 3rem + 5vw);
}

.pt-sm,
.py-sm {
    padding-top: var(--sm);
}
.pb-sm,
.py-sm {
    padding-bottom: var(--sm);
}
.pt-md,
.py-md {
    padding-top: var(--md);
}
.pb-md,
.py-md {
    padding-bottom: var(--md);
}
.pt-lg,
.py-lg {
    padding-top: var(--lg);
}
.pb-lg,
.py-lg {
    padding-bottom: var(--lg);
}
.mt-sm,
.my-sm {
    margin-top: var(--sm);
}
.mb-sm,
.my-sm {
    margin-bottom: var(--sm);
}    
.mt-md,
.my-md {
    margin-top: var(--md);
}
.mb-md,
.my-md {
    margin-bottom: var(--md);
}
.mt-lg,
.my-lg {
    margin-top: var(--lg);
}
.mb-lg,
.my-lg {
    margin-bottom: var(--lg);
}
@media (min-width: 576px) {
    .pt-sm-mob,
    .py-sm-mob {
        padding-top: var(--sm);
    }
    .pb-sm-mob,
    .py-sm-mob {
        padding-bottom: var(--sm);
    }
    .pt-md-mob,
    .py-md-mob {
        padding-top: var(--md);
    }
    .pb-md-mob,
    .py-md-mob {
        padding-bottom: var(--md);
    }
    .pt-lg-mob,
    .py-lg-mob {
        padding-top: var(--lg);
    }
    .pb-lg-mob,
    .py-lg-mob {
        padding-bottom: var(--lg);
    }
    .mt-sm-mob,
    .my-sm-mob {
        margin-top: var(--sm);
    }
    .mb-sm-mob,
    .my-sm-mob {
        margin-bottom: var(--sm);
    }    
    .mt-md-mob,
    .my-md-mob {
        margin-top: var(--md);
    }
    .mb-md-mob,
    .my-md-mob {
        margin-bottom: var(--md);
    }
    .mt-lg-mob,
    .my-lg-mob {
        margin-top: var(--lg);
    }
    .mb-lg-mob,
    .my-lg-mob {
        margin-bottom: var(--lg);
    }
}
@media (min-width: 768px) {
    .pt-sm-tab,
    .py-sm-tab {
        padding-top: var(--sm);
    }
    .pb-sm-tab,
    .py-sm-tab {
        padding-bottom: var(--sm);
    }
    .pt-md-tab,
    .py-md-tab {
        padding-top: var(--md);
    }
    .pb-md-tab,
    .py-md-tab {
        padding-bottom: var(--md);
    }
    .pt-lg-tab,
    .py-lg-tab {
        padding-top: var(--lg);
    }
    .pb-lg-tab,
    .py-lg-tab {
        padding-bottom: var(--lg);
    }
    .mt-sm-tab,
    .my-sm-tab {
        margin-top: var(--sm);
    }
    .mb-sm-tab,
    .my-sm-tab {
        margin-bottom: var(--sm);
    }    
    .mt-md-tab,
    .my-md-tab {
        margin-top: var(--md);
    }
    .mb-md-tab,
    .my-md-tab {
        margin-bottom: var(--md);
    }
    .mt-lg-tab,
    .my-lg-tab {
        margin-top: var(--lg);
    }
    .mb-lg-tab,
    .my-lg-tab {
        margin-bottom: var(--lg);
    }
}
@media (min-width: 992px) {
    .pt-sm-lap,
    .py-sm-lap {
        padding-top: var(--sm);
    }
    .pb-sm-lap,
    .py-sm-lap {
        padding-bottom: var(--sm);
    }
    .pt-md-lap,
    .py-md-lap {
        padding-top: var(--md);
    }
    .pb-md-lap,
    .py-md-lap {
        padding-bottom: var(--md);
    }
    .pt-lg-lap,
    .py-lg-lap {
        padding-top: var(--lg);
    }
    .pb-lg-lap,
    .py-lg-lap {
        padding-bottom: var(--lg);
    }
    .mt-sm-lap,
    .my-sm-lap {
        margin-top: var(--sm);
    }
    .mb-sm-lap,
    .my-sm-lap {
        margin-bottom: var(--sm);
    }    
    .mt-md-lap,
    .my-md-lap {
        margin-top: var(--md);
    }
    .mb-md-lap,
    .my-md-lap {
        margin-bottom: var(--md);
    }
    .mt-lg-lap,
    .my-lg-lap {
        margin-top: var(--lg);
    }
    .mb-lg-lap,
    .my-lg-lap {
        margin-bottom: var(--lg);
    }
}
@media (min-width: 1200px) {
    .pt-sm-desk,
    .py-sm-desk {
        padding-top: var(--sm);
    }
    .pb-sm-desk,
    .py-sm-desk {
        padding-bottom: var(--sm);
    }
    .pt-md-desk,
    .py-md-desk {
        padding-top: var(--md);
    }
    .pb-md-desk,
    .py-md-desk {
        padding-bottom: var(--md);
    }
    .pt-lg-desk,
    .py-lg-desk {
        padding-top: var(--lg);
    }
    .pb-lg-desk,
    .py-lg-desk {
        padding-bottom: var(--lg);
    }
    .mt-sm-desk,
    .my-sm-desk {
        margin-top: var(--sm);
    }
    .mb-sm-desk,
    .my-sm-desk {
        margin-bottom: var(--sm);
    }    
    .mt-md-desk,
    .my-md-desk {
        margin-top: var(--md);
    }
    .mb-md-desk,
    .my-md-desk {
        margin-bottom: var(--md);
    }
    .mt-lg-desk,
    .my-lg-desk {
        margin-top: var(--lg);
    }
    .mb-lg-desk,
    .my-lg-desk {
        margin-bottom: var(--lg);
    }
}

.nav-item__btn-override > .nav-link {
    background-color: transparent;
    border: unset;
}
.nav-item__btn-override > .nav-link:focus {
    outline: 1px solid transparent;
}
/** Row & Container */
/**
 * Bootstrap 5 reworked how the .row class handled margins,
 * this resets it to work more like Bootstrap 4
 */
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    /**
     * .row class calcs the --bs-gutter-x var to be calc(0.5 * --bs-gutter-x)
     * .container does not
     */
    --bs-gutter-x: 15px;
}
.row {
    --bs-gutter-x: 30px;
}

/** Video Background */
/** .video-bkg-wrapper is the direct parent of the iframe/video element */
.bkg--wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
/** .video-bkg should be an iframe/video element and a direct descendant of .video-bkg-wrapper */
.bkg--wrapper .video-bkg {
    height: 56.25vw;
    min-width: 177.77vh;
    width: 100vw;
    min-height: 100vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bkg--wrapper > picture {
    height: inherit;
}

.bkg--wrapper .video-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    background-color: #000000;
    opacity: 0.4;
    z-index: 1;
}

.bkg--wrapper .img-bkg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    right: 0;
}

nav:not(.navbar-light) ~ header img {
    opacity: 0.75;
}


/** Header */
.header {}

.header--hero-content {
    position: relative;
    color: var(--white);
    padding-bottom: max(10vh, 120px);
    z-index: 1;
}

.header--hero-content__dark {
    color: var(--black);
}

.header--hero-container {
    position: relative;
}

.header--hero-content > *:not(.btn) {
    color: inherit;
}

.header--hero-content p {
    font-size: 18px;
    margin-top: 1.2em;
}

.header--hero-content .header--hero-title {
    font-size: min(60px, 2.5rem + 1.5vw);
}

/** Header Height Utilities */
/** Found in the $critical-css chunk */

/** Call To Action (CTA) */
.cta {
    --title-color: var(--black);
    --content-color: var(--black);
}

.cta--title {
    color: var(--title-color);
}

.cta--title + * {
    margin-top: 1.25rem;
}
.cta--content {
    display: inline-block;
}
.cta--content,
.cta--content > * {
    color: var(--content-color);
}

.cta-testimonials {
    overflow-y: hidden;
    position: relative;
}

.cta-testimonials--quote-wrapper {
    display: flex;
    position: relative;
    height: 100%;
}

.cta-testimonials--quote-wrapper__right {
    justify-content: end;
}

.cta-testimonials--quote {
    position: absolute;
    font-family: var(--bs-font-serif);
    font-size: clamp(400px, 50vw, 600px);
    font-weight: 900;
    font-style: italic;
    line-height: 42px;
    opacity: 0.1;
    color: var(--title-color);
}

.cta-testimonials--quote-wrapper__left .cta-testimonials--quote {
    bottom: -0.4ch;
    /** I'm not a fan of using both negative margins and absolute positioning, but this was the fastest/easiest way to get it done -cw */
    margin-left: -0.15ch;
}

.cta-testimonials--quote-wrapper__right .cta-testimonials--quote {
    top: 0.2ch;
    right: 0.075ch;
}

.section--dark {
    --title-color: var(--green);
    --content-color: var(--light-gray);
    background-color: var(--black);
}

.section--primary {
    --title-color: var(--white);
    --content-color: var(--black);
    background-color: var(--primary);
}


/** Content */
.content {}

.content--container * + *:not(.col):not([class*="col-"]) {
    margin-top: 0.25em;
}

.content--container .row * + *:not(.col):not([class*="col-"]) {
    margin-top: 0;
}


.content--container p + :-moz-any(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) {
    
    margin-top: 1.5em;

}

.content--container p + :-webkit-any(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) {
    
    margin-top: 1.5em;

}

.content--container p + :matches(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) {
    
    margin-top: 1.5em;

}

.content--container p + :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) {
    
    margin-top: 1.5em;

}

/** Sliders / Swiper */
.swiper-buttons {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
[class*="swiper-button-"] {
    border: unset;
    opacity: 0.8;
    transition: var(--t-linear);
    transition-property: opacity, transform;
}
[class*="swiper-button-"]:hover,
[class*="swiper-button-"]:focus {
    opacity: 1;
}
[class*="swiper-button-"]:active {
    transform: scale(0.95);
}
.swiper-lazy-preloader {
    height: 100%;
    width: 100%;
    max-height: 500px;
}
.swiper-type--treatments img,
.swiper-type--treatments {
    max-height: 500px;
}

.swiper-type--treatments [class*="swiper-button-"] {
    --size: 40px;
    font-size: 18px;
    width: var(--size);
    height: var(--size);
    color: var(--white);
    background-color: var(--primary);
    border-radius: calc(2 * var(--size));
}
.swiper-type--treatments [class*="swiper-button-"]::after {
    content: unset;
}
.swiper-type--treatments .swiper-wrappper,
.swiper-type--treatments .swiper-slide,
.swiper-type--treatments img {
    max-height: 500px;
}

.swiper-type--treatments .swiper-slide {
    /* max-width: 85vw; */
    max-width: fit-content;
}

.swiper-type--treatments .swiper-slide img {
    width: auto;
    height: 100%;
    object-fit: contain;
    object-position: center center;
}
/*
@media (min-width: 992px) {
    .swiper-type--treatments .swiper-slide {
        max-width: clamp(576px, 25vw, 768px);
    }
}

@media (min-width: 1200px) {
    .swiper-type--treatments .swiper-slide {
        max-width: clamp(768px, 65vw, 900px);
    }
}*/

.swiper-type--testimonials {
    height: 100%;
}

.swiper-slide--testimonial {
    color: var(--content-color);
    text-align: center;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}

.swiper-slide--testimonial__attribute {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.05em;
}

.swiper-type--testimonials + .swiper-pagination-bullets .swiper-pagination-bullet {
    --swiper-pagination-bullet-horizontal-gap: 1.5px;
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-inactive-color: transparent;
    --swiper-pagination-bullet-size: 10px;
    --swiper-pagination-color: var(--title-color);
    border: 2px solid var(--title-color);
}
/** Buttons */
.btn {
    display: inline-flex;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: var(--ls-link);
    line-height: 1;
    padding: 20px 40px;
    border-width: 2px;
    border-radius: 0;
}

.btn:focus {
    box-shadow: var(--black-shadow);
}

.btn-primary {
    color: var(--black);
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary:focus,
.btn-primary:hover {
    color: var(--white);
    background-color: var(--black);
    border-color: var(--black);
}

.btn-primary:focus {
    border-style: dashed;
    border-color: currentcolor;
}

.btn-black {
    background-color: var(--black);
    color: var(--white);
    border-color: var(--black);
}

.btn-black:hover {
    background-color: var(--primary);
    color: var(--black);
    border-color: var(--primary);
}
.btn-black:focus {
    background-color: var(--primary);
    color: var(--black);
    border-color: currentcolor;
    border-style: dashed;
}

.btn-icon {
    --fa-display: inline;
    justify-content: space-between;
    gap: 1ch;
}

/** Grid Types */
.grid {
    display: grid;
}

.grid--hero-icons {
    grid-template-columns: repeat(auto-fit, minmax(calc(100% / 8), 1fr));
    align-items: end;
}


/** Card Utilities */
/** Gives the card the ability to contain a link while being clickable */
.card-block {
    position: relative;
}

.card-block + .card-block {
    margin-top: 1.5rem;
}

.card-block .card-block--link::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.card-block .card--img {
    transition: var(--t-ease-out);
    transition-property: transform;
}
.card-block:hover .card--img {
    transform: scale(1.05);
}

/** Card  */
.card {
    border-color: transparent;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}
.card--img {
    max-width: 100%;
    /*width: 100%;*/
    height: auto;
    object-fit: contain;
}
.card--link {
    text-transform: uppercase;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: var(--ls-link);
    color: var(--black);
}
.card--img-wrapper {
    overflow: hidden;
}
.card--link-wrapper {
    margin-top: 1rem;
}
.card--content-wrapper {
    margin-top: 1rem;
}
.card--content-wrapper * {
    color: var(--dark-gray);
    margin: 0;
}
.card--content-wrapper * + * {
    margin-top: 1em;
}

/** Card Icon (Grid Hero Icons) */
.card-icon {
    --color: white;
    --bg-opacity: 0;
    position: relative;
    display: flex;
    gap: 12px;
    flex-direction: column;
    align-items: center;
    text-transform: uppercase;
    padding-bottom: 1.75rem;
}
.card-icon:hover {
    --color: var(--green);
    --bg-opacity: 1;
}
.card-icon::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    background-image: linear-gradient( 0deg, var(--black), var(--black-transparent));
    opacity: var(--bg-opacity);
    transition: var(--t-ease);
    transition-property: opacity;
}
.card-icon--link {
    color: var(--color);
    text-align: center;
    z-index: 1;
    text-decoration: none;
    letter-spacing: var(--ls-link);
}
.card-icon > .card-icon--img {
    flex-grow: 1;
    position: relative;
    z-index: 1;
}
.card-icon > .card-icon--img path {
    fill: var(--color);
}
.card-icon > .card-icon--img path[fill="unset"] {
    stroke: var(--color);
    fill: transparent;
}
.card-icon > .card-icon--link::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/** Navbar & items*/
.navbar:not(.navbar-light):hover,
.nav-open {
    background-color: var(--black);
}
.nav-link {
    letter-spacing: 0.01em;
}
.navbar-dark .nav-link {
    color: var(--white);
}
.dropdown-menu .nav-link,
.navbar-light .nav-link,
.navbar-light .nav--social {
    color: var(--black);
}
.navbar-dark .nav-link.active,
.navbar-light .nav-link.active,
.dropdown.active .nav-link{
    text-decoration:underline;
}
.navbar-light ~ header {
    background-color: transparent;
}
.navbar-light[data-sticky="true"] .nav-link {
    color: var(--white);
}
.navbar-light.nav-open .nav-link {
    color: var(--white);
}
nav.navbar-light .nav-link:hover,
nav .nav-link:focus,
nav .nav-link:hover {
    color: var(--bs-primary);
}
nav .nav-link:focus {
    opacity: 0.75;
}
.navbar-brand--logo {
    transition: var(--t-ease);
    transition-property: color;
    color: var(--white);
    max-width: max(250px, 150px + 1vmax);
}
.navbar-light .navbar-brand--logo:not([data-sticky="true"]) {
    color: var(--black);
}
.navbar-light.nav-open .navbar-brand--logo {
    color: var(--white);
}
.nav--social {
    font-size: 14px;
    gap: 1em;
    justify-content: end;
    padding-right: 1rem;
    color: var(--bs-primary);
}
.navbar-light[data-sticky="true"] .nav--social {
    color: var(--bs-primary);
}
.nav--social-link {
    color: currentcolor;
}
.navbar-light .nav--social a {
    color: currentcolor;
}
.navbar .nav--social a:hover {
    color: var(--bs-primary);
}
.navbar-dark .nav--social a:hover {
    color: var(--white);
}
li > .dropdown-menu {
    border-radius: 0;
    border: 1px transparent;
    padding-top: 0;
    padding-bottom: 0;
    background-color: var(--bs-light);
}
.dropdown-menu a {
    color: var(--black);
}
.dropdown-menu .nav-link {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.dropdown-menu a:hover {
    background-color: var(--green);
    color: var(--black);
}
/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 *
 * Altered from the source material here
 */
nav .hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }
  .hamburger.is-active:hover {
    opacity: 0.7; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: var(--primary); }

.hamburger-box {
  width: 40px;
  height: 20px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: var(--primary);
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }

/*
   * Spring
   */
.hamburger--spring .hamburger-inner {
  top: 2px;
  transition: background-color 0s 0.13s linear; }
  .hamburger--spring .hamburger-inner::before {
    top: 10px;
    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spring .hamburger-inner::after {
    top: 20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spring.is-active .hamburger-inner {
  transition-delay: 0.22s;
  background-color: transparent !important; }
  .hamburger--spring.is-active .hamburger-inner::before {
    top: 0;
    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 10px, 0) rotate(45deg); }
  .hamburger--spring.is-active .hamburger-inner::after {
    top: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 10px, 0) rotate(-45deg); }

/** Logo */
.logo--link {
    display: block;
    max-width: fit-content;
}

/** Footer */
.footer {
    padding-top: var(--sm);
    padding-bottom: var(--sm);
}
.footer .logo--link {
    /** Center the logo in the footer */
    margin: 0 auto;
}

.footer--row {
    gap: 1.25rem;
    justify-content: center;
}

.footer--copyright {
    font-size: 10px;
    color: var(--gray);
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.footer--copyright > * {
    color: currentcolor;
}


/** Instagram section */
.instagram--row {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
}

.instagram--title {
    padding-bottom: var(--sm);
    text-align: center;
}


.instagram--title :-moz-any(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,p) {
    
    margin: 0;

}

.instagram--title :-webkit-any(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,p) {
    
    margin: 0;

}

.instagram--title :matches(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,p) {
    
    margin: 0;

}

.instagram--title :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,p) {
    
    margin: 0;

}

.instagram--title *:not(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) {
    color: var(--dark-gray);
}

.instagram--row img {
    height: 100%;
    object-fit: cover;
}

/** Accordion */
.accordion {
    /*
    padding-right: calc(0.5 * var(--bs-gutter-x));
    padding-left: calc(0.5 * var(--bs-gutter-x));
    */
}
.accordion-item {
    border-color: transparent;
    border-bottom-color: var(--light-gray-900);
    /*
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
    */
}
.accordion-button {
    font-size: 18px;
    padding: 1rem;
    padding-top: 1.3rem;
    padding-bottom: 0.5rem;
    justify-content: space-between;
    color: var(--black);
    font-weight: 500;
}
.accordion-button:not(.collapsed) {
    background-color: unset;
    color: var(--primary);
    box-shadow: unset;
}
.accordion-button::after {
    content: unset;
}
.accordion-button:focus {
    box-shadow: unset;
}
.accordion-icon {
    font-size: 10px;
    float: right;
}
.accordion-button .accordion-icon {
    transform: rotate(180deg);
    transition: var(--t-ease);
    transition-property: transform;
}
.accordion-button:not(.collapsed) .accordion-icon {
    transform: rotate(360deg);
}
.accordion-body {
    padding-top: 0;
    padding-right: 1rem;
    padding-left: 1rem;
}
.accordion-body > * {
    color: var(--dark-gray);
}
.accordion-body > :last-child {
    margin-bottom: 0;
}

/** Pricing List */
.pricing-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    /** Matches the pading of the accordion buttons on the treatments pages */
    padding-top: 1.3rem;
}
.pricing-list--item + .pricing-list--item {
    margin-top: 1.5em;
}
.pricing-list--item > * {
    margin: 0;
}
.pricing-item--name {
    font-size: 18px;
    color: var(--black);
    font-weight: 500;
}
.pricing-item--starting,
.pricing-item--price {
    display: inline-block;
    font-size: 0.95rem;
    padding-left: 0.5ch;
}

.pricing-item--starting {
    padding-left: 1ch;
}
.pricing-item--price::before {
    content: '$';
    font-size: 0.85rem;
}
.pricing-item--description {
    color: var(--dark-gray);
}

/** Stylist Headshot & Information */
.stylist--headshot {
    width: 100%;
}
.stylist--name,
.stylist--job,
.stylist--profile > * {
    margin: 0;
}
.stylist--profile > * + * {
    margin-top: 0.75em;
}
.stylist--job {
    margin-top: 1.25em;
}
.stylist--profile {
    padding-top: var(--sm);
    color: var(--dark-gray);
}

/** Masonry Styles */

.masonry--item > .masonry--img {
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
}


/**************************\
  Basic Modal Styles
\**************************/

.modal {
  font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--bs-black-rgb) / 55%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__container {
  background-color: #fff;
  padding: 30px;
  max-width: 500px;
  max-height: 100vh;
  border-radius: 0;
  overflow-y: auto;
  box-sizing: border-box;
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.modal__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
  line-height: 1.25;
  color: var(--bs-black);
  box-sizing: border-box;
}

.modal__close {
  background: transparent;
  border: 0;
}

.modal__header .modal__close:before { content: "\2715"; }

.modal__header + .modal__footer {
    margin-top: 2rem;
}

.modal__content {
  margin-top: 2rem;
  margin-bottom: 2rem;
  line-height: 1.5;
  color: var(--bs-black);
}

.modal__content--hours > li {
    display: grid;
    grid-template-columns: 1fr max-content;
}

.modal__btn {
  font-size: 14px;
  letter-spacing: var(--ls-link);
  padding: 20px 40px;
  background-color: var(--bs-primary);
  color: var(--bs-black);
  font-family: var(--bs-body-font-family);
  border: unset;
  border-radius: 0;
  cursor: pointer;
  -webkit-appearance: button;
  text-transform: none;
  overflow: visible;
  line-height: 1.15;
  margin: 0;
  will-change: transform;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  text-transform: uppercase;
  /*
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: -webkit-transform .25s ease-out;
  transition: transform .25s ease-out;
  transition: transform .25s ease-out,-webkit-transform .25s ease-out;
  */
}

.modal__btn:focus, .modal__btn:hover {
  /*
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  */
}

.modal__btn-primary {
  background-color: #00449e;
  color: #fff;
}



/**************************\
  Demo Animation Style
\**************************/
@keyframes mmfadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@keyframes mmfadeOut {
    from { opacity: 1; }
      to { opacity: 0; }
}

@keyframes mmslideIn {
  from { transform: translateY(15%); }
    to { transform: translateY(0); }
}

@keyframes mmslideOut {
    from { transform: translateY(0); }
    to { transform: translateY(-10%); }
}

.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}