@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /*light*/
    --color-light-primary: hsl(187, 100%, 23%);
  --color-light-surface-tint: rgb(0 104 118);
  --color-light-on-primary: rgb(255 255 255);
  --color-light-primary-container: hsl(190, 100%, 81%);
  --color-light-on-primary-container: rgb(0 78 89);
  --color-light-secondary: rgb(74 98 103);
  --color-light-on-secondary: rgb(255 255 255);
  --color-light-secondary-container: rgb(205 231 237);
  --color-light-on-secondary-container: rgb(51 75 79);
  --color-light-tertiary: #904b3b;
  --color-light-on-tertiary: rgb(255 255 255);
  --color-light-tertiary-container: rgb(219 225 255);
  --color-light-on-tertiary-container: rgb(60 70 101);
  --color-light-error: rgb(186 26 26);
  --color-light-on-error: rgb(255 255 255);
  --color-light-error-container: rgb(255 218 214);
  --color-light-on-error-container: rgb(147 0 10);
  --color-light-background: rgb(245 250 252);
  --color-light-on-background: rgb(23 29 30);
  --color-light-surface: #f5fafc;
  --color-light-on-surface: #171c1e;
  --color-light-surface-variant: rgb(219 228 230);
  --color-light-on-surface-variant: rgb(63 72 74);
  --color-light-outline: rgb(111 121 123);
  --color-light-outline-variant: rgb(191 200 202);
  --color-light-shadow: rgb(0 0 0);
  --color-light-scrim: rgb(0 0 0);
  --color-light-inverse-surface: rgb(43 49 51);
  --color-light-inverse-on-surface: #ecf2f4;
  --color-light-inverse-primary: rgb(130 211 226);
  --color-light-primary-fixed: rgb(159 239 255);
  --color-light-on-primary-fixed: rgb(0 31 37);
  --color-light-primary-fixed-dim: rgb(130 211 226);
  --color-light-on-primary-fixed-variant: rgb(0 78 89);
  --color-light-secondary-fixed: rgb(205 231 237);
  --color-light-on-secondary-fixed: rgb(5 31 35);
  --color-light-secondary-fixed-dim: rgb(177 203 209);
  --color-light-on-secondary-fixed-variant: rgb(51 75 79);
  --color-light-tertiary-fixed: rgb(219 225 255);
  --color-light-on-tertiary-fixed: rgb(16 26 55);
  --color-light-tertiary-fixed-dim: rgb(188 197 235);
  --color-light-on-tertiary-fixed-variant: rgb(60 70 101);
  --color-light-surface-dim: rgb(213 219 221);
  --color-light-surface-bright: rgb(245 250 252);
  --color-light-surface-container-lowest: rgb(255 255 255);
  --color-light-surface-container-low: rgb(239 244 246);
  --color-light-surface-container: rgb(233 239 241);
  --color-light-surface-container-high: rgb(228 233 235);
  --color-light-surface-container-highest: rgb(222 227 229);

  /* dark */
  --brand-dark: var(--cyan-3);
  --text-1-dark: var(--gray-3);
  --text-2-dark: var(--gray-5);
  --surface-1-dark: var(--gray-12);
  --surface-2-dark: var(--gray-11);
  --surface-3-dark: var(--gray-10);
  --surface-4-dark: var(--gray-9);
  --surface-shadow-dark: var(--gray-12-hsl);
  --shadow-strength-dark: 80%;

  color-scheme: light;

    /* set defaults */
    --color-primary: var(--color-light-primary);
    --color-surface-tint: var(--color-light-surface-tint);
    --color-on-primary: var(--color-light-on-primary);
    --color-primary-container: var(--color-light-primary-container);
    --color-on-primary-container: var(--color-light-on-primary-container);
    --color-secondary: var(--color-light-secondary);
    --color-on-secondary: rgb(255 255 255);
    --color-secondary-container: var(--color-light-secondary-container);
    --color-on-secondary-container: var(--color-light-on-secondary-container);
    --color-tertiary: var(--color-light-tertiary);
    --color-on-tertiary: rgb(255 255 255);
    --color-tertiary-container: rgb(145 97 171);
    --color-light-on-tertiary-container: rgb(255 251 255);
    --color-light-error: rgb(186 26 26);
    --color-light-on-error: rgb(255 255 255);
    --color-light-error-container: rgb(255 218 214);
    --color-light-on-error-container: rgb(147 0 10);
    --color-light-background: rgb(245 250 251);
    --color-light-on-background: rgb(23 28 30);
    --color-surface: var(--color-light-surface);
    --color-on-surface: var(--color-light-on-surface);
    --color-light-surface-variant: rgb(216 229 232);
    --color-on-surface-variant: var(--color-light-on-surface-variant);
    --color-light-outline: rgb(109 121 124);
    --color-outline-variant: var(--color-light-outline-variant);
    --color-light-shadow: rgb(0 0 0);
    --color-light-scrim: rgb(0 0 0);
    --color-light-inverse-surface: rgb(49 48 48);
    --color-light-inverse-on-surface: rgb(243 240 239);
    --color-light-inverse-primary: rgb(97 214 235);
    --color-light-primary-fixed: rgb(159 239 255);
    --color-light-on-primary-fixed: rgb(0 31 37);
    --color-light-primary-fixed-dim: rgb(97 214 235);
    --color-light-on-primary-fixed-variant: rgb(0 78 89);
    --color-light-secondary-fixed: rgb(192 234 243);
    --color-light-on-secondary-fixed: rgb(0 31 37);
    --color-light-secondary-fixed-dim: rgb(165 205 214);
    --color-light-on-secondary-fixed-variant: rgb(36 76 84);
    --color-light-tertiary-fixed: rgb(245 217 255);
    --color-light-on-tertiary-fixed: rgb(48 0 74);
    --color-light-tertiary-fixed-dim: rgb(230 180 255);
    --color-light-on-tertiary-fixed-variant: rgb(96 51 121);
    --color-light-surface-dim: rgb(220 217 217);
    --color-light-surface-bright: rgb(252 249 248);
    --color-light-surface-container-lowest: rgb(255 255 255);
    --color-light-surface-container-low: rgb(246 243 242);
    --color-surface-container: var(--color-light-surface-container);
    --color-light-surface-container-high: rgb(234 231 231);
    --color-surface-container-highest: var(--color-light-surface-container-highest);
}


@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --brand: var(--brand-dark);
    --text-1: var(--text-1-dark);
    --text-2: var(--text-2-dark);
    --surface-1: var(--surface-1-dark);
    --surface-2: var(--surface-2-dark);
    --surface-3: var(--surface-3-dark);
    --surface-4: var(--surface-4-dark);
    --surface-shadow: var(--surface-shadow-dark);
    --shadow-strength: var(--shadow-strength-dark);
  }
}

[color-scheme="light"] {
  color-scheme: light;

  --brand: var(--brand-light);
  --text-1: var(--text-1-light);
  --text-2: var(--text-2-light);
  --surface-1: var(--surface-1-light);
  --surface-2: var(--surface-2-light);
  --surface-3: var(--surface-3-light);
  --surface-4: var(--surface-4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

[color-scheme="dark"] {
  color-scheme: dark;
  
  --brand: var(--brand-dark);
  --text-1: var(--text-1-dark);
  --text-2: var(--text-2-dark);
  --surface-1: var(--surface-1-dark);
  --surface-2: var(--surface-2-dark);
  --surface-3: var(--surface-3-dark);
  --surface-4: var(--surface-4-dark);
  --surface-shadow: var(--surface-shadow-dark);
  --shadow-strength: var(--shadow-strength-dark);
}
    
    
:root {
    --fs-300: clamp(0.8rem, 0.17vi + 0.76rem, 0.89rem);
    --fs-400: clamp(1rem, 0.34vi + 0.91rem, 1.19rem);
    --fs-500: clamp(1.25rem, 0.61vi + 1.1rem, 1.58rem);
    --fs-600: clamp(1.56rem, 1vi + 1.31rem, 2.11rem);
    --fs-700: clamp(1.95rem, 1.56vi + 1.56rem, 2.81rem);

    --fw-400: 400;
    --fw-500: 500;
}

.primary-color {
    color: var(--color-primary);
}

.tertiary-color {
    color: var(--color-tertiary);
}



.primary-heading, .secondary-heading, .tertiary-heading, .text, .label {
    --color: var(--color-on-surface);

    color: var(--color);
    
}

.primary-heading, .secondary-heading, .tertiary-heading {
    font-family: "Montserrat";
    
}

.primary-heading {
    font-size: var(--fs-700);
    font-weight: var(--font-weight-4);
    
}

.secondary-heading {
    font-size: var(--fs-600);
    font-weight: var(--font-weight-4);
}

.tertiary-heading {
    font-size: var(--fs-500);
    font-weight: var(--font-weight-5);
    
}

.text, .label {
    font-family: "Roboto";
}

.text {
    font-size: var(--fs-400);
    font-weight: var(--font-weight-4);
}

.label {
    font-size: var(--fs-300);
    font-weight: var(--font-weight-5);
}

.flow > * + * {
    --flow-space: var(--size-fluid-2);

  margin-block-start: var(--flow-space, 1em);
  
}

.prose > * {
  --flow-space: clamp(1em, 3vw, 1.5em);
}


body {
    --_background: var(--background, var(--color-surface));

    background-color: var(--_background);
}

header {
    --_background: var(--background, var(--color-light-inverse-surface));

    background-color: var(--_background);
    padding-block: clamp(2rem, 6vw, 3rem);
}

.logo-grid {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.logomark {
    width: 46px;
    @media (width >= 768px) {
        display: none;
    }
}

.combined-logo {
    width: 250px;
    @media (width < 768px) {
        display: none; 
    }
}

g {
    fill: var(--color-light-inverse-on-surface);
}

.p1 {
        --background: var(--color-light-inverse-surface);
        color: var(--color-light-inverse-on-surface);
    }


a {
    --color: var(--color-on-surface-variant);

    color: var(--color);
    text-decoration: none;
}

.content-grid {
    --padding-inline: clamp(1rem, 3vw, 1.5rem);
    --content-max-width: 1024px;

    display: grid;
    grid-template-columns: [full-start] var(--padding-inline) minmax(0, 1fr) [breakout-start] minmax(0, 1.5rem) [content-start] min(var(--content-max-width), 100% - (var(--padding-inline) * 2)) [content-end] minmax(0, 1.5rem) [breakout-end] minmax(0, 1fr) var(--padding-inline) [full-end];
}

.content-grid > *,
.full > * {
    grid-column: content;
}

.content-grid > .breakout {
    grid-column: breakout;
}

.content-grid > .full {
    grid-column: full;
}

.progress {
    --background: var(--color-secondary-container);

    height: clamp(0.25rem, 1vw, 0.5rem);
    background-color: var(--background);
    border-radius: 0.25rem;
}


.progress-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.25rem;
}



.progress-wrapper span:nth-child(3) {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

.progress-active, .progress-stop {
    --background: var(--color-primary);

    background-color: var(--background);
}

.progress-stop {
    grid-column: 3 / 4;
    width: clamp(0.25rem, 1vw, 0.5rem);

    
    grid-row: 1 / 2;    /* ensure it's on the same row */
    justify-self: end; /* keep it aligned left inside the cell */
    
    
    z-index: 1; /* brings it above the normal .progress */
    position: relative; /* required for z-index to apply */
}

.cards-grid {
  --min: 45ch;
  --gap: 0.5rem;

  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.cards-grid > * {
  flex: 1 1 var(--min);
}

.card {
    --background: #eff4f6;

    position: relative;
    background-color: var(--background);
    
    border-radius: 0.75rem;
    box-shadow: var(--shadow-1);
    padding: var(--size-fluid-2);

    
        & .title.massage {
    --color: #006876;

    
    color: var(--color);

    & a {
        color: #006876;
    }
    }

    & .title.therapy {
        color: #904b3b;   

        & a {
            color: #904b3b;
        }   
       
        
    }

    

    
    }

    

    & .price-text-cta {
        padding: var(--size-fluid-2);
        border: none;
        
    }

.thirty-mins {
    display: none;
}

.card:hover {
    --background: hsla(300, 4%, 11%, 0.078);
    --shadow: var(--shadow-1);

    background-color: var(--background);
    box-shadow: var(--shadow);
}

.card a::after {
    content: '';
    position: absolute;
    inset: 0;
}



.tag-grid {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fill, 200px);
}

.tag-flex {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.chip {
    --background: var(--color-secondary-container);
    

    background-color: var(--background);
    width: fit-content;
    border-radius: 0.5rem;
    padding-inline: 1rem; 
    padding-block: 0.5rem;

    & .label {
        --color: var(--color-on-secondary-container);

        color: var(--color);
        text-transform: uppercase;
    }
}


.pseudo-button {
    --border: var(--color-outline-variant);
    --label: var(--color-on-surface-variant);

    display: inline-flex;
    color: var(--label);
    padding-inline: 1rem;
    padding-block: 0.5rem;
    border-radius: 1rem;
    text-align: center;
    align-items: center;

    &.outlined {
        border: 1px solid var(--border);
        color: var(--label);
    }
}

.pseudo-button {
    
    font-weight: var(--fw-500);
    font-size: var(--font-size-fluid-0);
}

.cta-wrapper:hover {
    --background: var(--color-on-surface-variant);
    --border: var(--color-outline-variant);

    background-color: var(--background);
    border: medium solid var(--border);
}

.price {
    color: #006876;

    &.therapy {
        color: #904b3b;
        background-color: var(--color-surface-container-low);
    }

    & .label {
        color: var(--color-on-surface-variant);
    }

    & .strike {
        text-decoration: line-through;
        color: var(--color-on-surface-variant);
    }
}

iframe {
    --background: #ffffff;

    background-color: var(--background);
    border-radius: 1rem;
}

footer {
    --background: var(--color-surface-container);
    --color: var(--color-on-surface-container);

    background-color: var(--background);
    color: var(--color);
    height: 10vh;
}