/*
 * Author: S.Sangeethan
 * Version: 1.0
 */

/*

479px - Mobile (Portrait)
639px - Mobile (Landscape)
767px - Tablet (Portrait)
1023px - Tablet (Landscape)
1279px - Small Desktop
1440px - Large Desktop
>1441px - Extra Large Desktop
*/

@font-face {
  font-family: "Glovia";
  src:
    url("../fonts/glovia.woff2") format("woff2"),
    url("../fonts/glovia.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

::-webkit-scrollbar {
  display: none;
}

/**************-------------------------------------**************/
/*                           VARIABLES                           */
/**************-------------------------------------**************/
/* COLORS */
:root {
  --evergreen-100: #cddad4;
  --evergreen-200: #9bb5aa;
  --evergreen-300: #69917f;
  --evergreen-400: #376c55;
  --evergreen-500: #05472a;
  --evergreen-600: #043922;
  --evergreen-700: #032b19;
  --evergreen-800: #021c11;
  --evergreen-900: #010e08;

  --timber-100: #e3d9d4;
  --timber-200: #c7b4aa;
  --timber-300: #ac8e7f;
  --timber-400: #906955;
  --timber-500: #74432a;
  --timber-600: #5d3622;
  --timber-700: #462819;
  --timber-800: #2e1b11;
  --timber-900: #170d08;

  --sandstone-100: #f9f5ee;
  --sandstone-200: #f2ebde;
  --sandstone-300: #ece1cd;
  --sandstone-400: #e5d7bd;
  --sandstone-500: #dfcdac;
  --sandstone-600: #b2a48a;
  --sandstone-700: #867b67;
  --sandstone-800: #595245;
  --sandstone-900: #2d2922;

  --chasenut-100: #dbd2d0;
  --chasenut-200: #b7a6a1;
  --chasenut-300: #937971;
  --chasenut-400: #6f4d42;
  --chasenut-500: #4b2013;
  --chasenut-600: ;
  --chasenut-700: ;
  --chasenut-800: ;
  --chasenut-900: ;

  /* ===== SEMANTIC ALIASES ===== */
  --color-bg: var(--evergreen-800);
  --color-surface: var(--evergreen-700);
  --color-surface-2: var(--evergreen-600);

  --color-primary: var(--sandstone-500);
  --color-accent: var(--timber-400);

  --color-text: var(--sandstone-100);
  --color-text-muted: var(--sandstone-300);

  --color-border-1: rgba(223, 205, 172, 0.22);
  --color-border-2: rgba(223, 205, 172, 0.12);
}

/* SHADOWS */

:root {
  --shadow-xs: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --shadow-sm:
    rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
  --shadow-md:
    rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  --shadow-lg:
    rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
  --shadow-xl:
    rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
    rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

/* FONTS */
:root {
  --heading-font: "Glovia", "Cormorant Garamond", serif;
  --body-font: "Plus Jakarta Sans", sans-serif;
}

/* FONT SIZE*/

/* Clamp */
:root {
  --font-size-xs: clamp(10px, calc(9.33px + 0.19vw), 12px);
  --font-size-sm: clamp(12px, calc(11.33px + 0.19vw), 14px);
  --font-size-md: clamp(14px, calc(13.33px + 0.19vw), 16px);
  --font-size-lg: clamp(16px, calc(15.33px + 0.19vw), 18px);
  --font-size-xl: clamp(18px, calc(17.33px + 0.19vw), 20px);

  --font-size-2xl: clamp(20px, calc(18.67px + 0.37vw), 24px);
  --font-size-3xl: clamp(22px, calc(20px + 0.56vw), 28px);
  --font-size-4xl: clamp(24px, calc(21.33px + 0.74vw), 32px);
  --font-size-5xl: clamp(26px, calc(21.33px + 1.3vw), 40px);
  --font-size-6xl: clamp(28px, calc(21.33px + 1.85vw), 48px);
  --font-size-7xl: clamp(36px, calc(23.79px + 3.21vw), 72px);
  --font-size-8xl: clamp(40px, calc(26.43px + 3.57vw), 80px);
  --font-size-9xl: clamp(44px, calc(25px + 5vw), 100px);

  --font-size-nav: clamp(40px, calc(30.67px + 2.59vw), 68px);
  --font-size-cta: clamp(32px, calc(25.33px + 1.85vw), 52px);
}

/* SPACING */
:root {
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-ms: 0.75rem;
  --spacing-md: 1rem;
  --spacing-ml: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
  --spacing-3xl: 5rem;
  --spacing-4xl: 6rem;
  --spacing-5xl: 7rem;
  --spacing-6xl: 10rem;
  --spacing-7xl: 13rem;
  --spacing-8xl: 16rem;
  --spacing-9xl: 19rem;
  --spacing-10xl: 22rem;
  --spacing-11xl: 25rem;
  --spacing-12xl: 28rem;
}

@media screen and (max-width: 1440px) {
  :root {
    --spacing-xs: calc(0.25rem * 0.9);
    --spacing-sm: calc(0.5rem * 0.9);
    --spacing-ms: calc(0.75rem * 0.9);
    --spacing-md: calc(1rem * 0.9);
    --spacing-ml: calc(1.5rem * 0.9);
    --spacing-lg: calc(2rem * 0.9);
    --spacing-xl: calc(3rem * 0.9);
    --spacing-2xl: calc(4rem * 0.9);
    --spacing-3xl: calc(5rem * 0.9);
    --spacing-4xl: calc(6rem * 0.9);
    --spacing-5xl: calc(7rem * 0.9);
    --spacing-6xl: calc(8rem * 0.9);
    --spacing-7xl: calc(10rem * 0.9);
    --spacing-8xl: calc(12rem * 0.9);
    --spacing-9xl: calc(14rem * 0.9);
    --spacing-10xl: calc(16rem * 0.9);
    --spacing-11xl: calc(18rem * 0.9);
    --spacing-12xl: calc(20rem * 0.9);
  }
}

@media screen and (max-width: 1279px) {
  :root {
    --spacing-xs: calc(0.25rem * 0.8);
    --spacing-sm: calc(0.5rem * 0.8);
    --spacing-ms: calc(0.75rem * 0.8);
    --spacing-md: calc(1rem * 0.8);
    --spacing-ml: calc(1.5rem * 0.8);
    --spacing-lg: calc(2rem * 0.8);
    --spacing-xl: calc(3rem * 0.8);
    --spacing-2xl: calc(4rem * 0.8);
    --spacing-3xl: calc(5rem * 0.8);
    --spacing-4xl: calc(6rem * 0.8);
    --spacing-5xl: calc(7rem * 0.8);
    --spacing-6xl: calc(8rem * 0.8);
    --spacing-7xl: calc(10rem * 0.8);
    --spacing-8xl: calc(12rem * 0.8);
    --spacing-9xl: calc(14rem * 0.8);
    --spacing-10xl: calc(16rem * 0.8);
    --spacing-11xl: calc(18rem * 0.8);
    --spacing-12xl: calc(20rem * 0.8);
  }
}

@media screen and (max-width: 1023px) {
  :root {
    --spacing-md: calc(1rem * 0.7);
    --spacing-ml: calc(1.5rem * 0.7);
    --spacing-lg: calc(2rem * 0.7);
    --spacing-xl: calc(3rem * 0.7);
    --spacing-2xl: calc(4rem * 0.7);
    --spacing-3xl: calc(5rem * 0.7);
    --spacing-4xl: calc(6rem * 0.7);
    --spacing-5xl: calc(7rem * 0.7);
    --spacing-6xl: calc(8rem * 0.7);
    --spacing-7xl: calc(10rem * 0.7);
    --spacing-8xl: calc(12rem * 0.7);
    --spacing-9xl: calc(14rem * 0.7);
    --spacing-10xl: calc(16rem * 0.7);
    --spacing-11xl: calc(18rem * 0.7);
    --spacing-12xl: calc(20rem * 0.7);
  }
}

@media screen and (max-width: 767px) {
  :root {
    --spacing-lg: calc(2rem * 0.6);
    --spacing-xl: calc(3rem * 0.6);
    --spacing-2xl: calc(4rem * 0.6);
    --spacing-3xl: calc(5rem * 0.6);
    --spacing-4xl: calc(6rem * 0.6);
    --spacing-5xl: calc(7rem * 0.6);
    --spacing-6xl: calc(8rem * 0.6);
    --spacing-7xl: calc(10rem * 0.6);
    --spacing-8xl: calc(12rem * 0.6);
    --spacing-9xl: calc(14rem * 0.6);
    --spacing-10xl: calc(16rem * 0.6);
    --spacing-11xl: calc(18rem * 0.6);
    --spacing-12xl: calc(20rem * 0.6);
  }
}

@media screen and (max-width: 639px) {
  :root {
    --spacing-xl: calc(3rem * 0.5);
    --spacing-2xl: calc(4rem * 0.5);
    --spacing-3xl: calc(5rem * 0.5);
    --spacing-4xl: calc(6rem * 0.5);
    --spacing-5xl: calc(7rem * 0.5);
    --spacing-6xl: calc(8rem * 0.5);
    --spacing-7xl: calc(10rem * 0.5);
    --spacing-8xl: calc(12rem * 0.5);
    --spacing-9xl: calc(14rem * 0.5);
    --spacing-10xl: calc(16rem * 0.5);
    --spacing-11xl: calc(18rem * 0.5);
    --spacing-12xl: calc(20rem * 0.5);
  }
}

/* MAX WIDTH */
:root {
  --max-width-xs: 360px;
  --max-width-sm: 480px;
  --max-width-md: 640px;
  --max-width-lg: 760px;
  --max-width-xl: 920px;
  --max-width-2xl: 1024px;
  --max-width-3xl: 1440px;
  --max-width-4xl: 1680px;
}

/* CONTAINERS */
:root {
  --container-sm: 700px;
  --container-md: 900px;
  --container-lg: 1100px;
}

@media screen and (max-width: 1279px) {
  :root {
    --container-sm: 70vw;
    --container-md: 80vw;
    --container-lg: 80vw;
  }
}

@media screen and (max-width: 1023px) {
  :root {
    --container-sm: 80vw;
    --container-md: 80vw;
    --container-lg: 80vw;
  }
}

@media screen and (max-width: 639px) {
  :root {
    --container-sm: 100%;
    --container-md: 100%;
    --container-lg: 100%;
  }
}

/* BORDER RADIUS */
:root {
  --rounded-xs: 2px;
  --rounded-sm: 4px;
  --rounded-md: 6px;
  --rounded-lg: 8px;
  --rounded-xl: 12px;
  --rounded-2xl: 16px;
  --rounded-3xl: 24px;
  --rounded-4xl: 28px;
  --rounded-5xl: 32px;
  --rounded-6xl: 40px;
  --rounded-full: 999px;
}

@media screen and (max-width: 1023px) {
  :root {
    --rounded-md: 4px;
    --rounded-lg: 6px;
    --rounded-xl: 10px;
    --rounded-2xl: 14px;
    --rounded-3xl: 22px;
    --rounded-4xl: 24px;
    --rounded-5xl: 28px;
    --rounded-6xl: 32px;
  }
}

@media screen and (max-width: 639px) {
  :root {
    --rounded-xl: 8px;
    --rounded-2xl: 12px;
    --rounded-3xl: 18px;
    --rounded-4xl: 20px;
    --rounded-5xl: 24px;
    --rounded-6xl: 28px;
  }
}

/**************-------------------------------------**************/
/*                           SMOOTH SCROLL                       */
/**************-------------------------------------**************/

html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: clip;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/**************-------------------------------------**************/
/*                           GLOBAL                              */
/**************-------------------------------------**************/

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

a,
a:link {
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  -webkit-tap-highlight-color: transparent;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a:hover,
a:active,
a:visited {
}

html {
  font-size: var(--font-size-md);
  scroll-behavior: smooth;
  /* Reserve the scrollbar space so toggling scroll-lock never shifts layout. */
  scrollbar-gutter: stable;
}

body {
  box-sizing: border-box;
  background-color: var(--evergreen-700);
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-family: var(--body-font);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

.container {
  max-width: var(--max-width-4xl);
  margin-inline: auto;
  padding-inline: 60px;
}

@media screen and (max-width: 1679px) {
  .container {
    max-width: var(--max-width-3xl);
  }
}

@media screen and (max-width: 1439px) {
  .container {
    padding-inline: 20px;
  }
}

@media screen and (max-width: 639px) {
  .container {
    padding-inline: 15px;
  }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
  -webkit-text-fill-color: var(--color-black) !important;
  -webkit-box-shadow: 0 0 0px 1000px #fafafa inset !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
  color: var(--color-black) !important;
  background-clip: content-box !important;
}

/**************-------------------------------------**************/
/*                           TYPOGRAPHY                          */
/**************-------------------------------------**************/
.heading-xs {
  font-size: var(--font-size-xl);
  font-family: var(--heading-font);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -2px;
}

.heading-sm {
  font-size: var(--font-size-2xl);
  font-family: var(--heading-font);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -2px;
}

.heading-md {
  font-size: var(--font-size-4xl);
  font-family: var(--heading-font);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -2px;
}

.heading-lg {
  font-size: var(--font-size-6xl);
  font-family: var(--heading-font);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -2px;
}

.heading-xl {
  font-size: var(--font-size-8xl);
  font-family: var(--heading-font);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -2px;
}

.heading-2xl {
  font-size: var(--font-size-9xl);
  font-family: var(--heading-font);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -2px;
}

/**************-------------------------------------**************/
/*                       UTILITY CLASSES                         */
/**************-------------------------------------**************/

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.bg-cover {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hidden {
  display: none !important;
}

/* RESPONSIVE SHOW */
.show-desktop {
  display: block;
}

.show-tablet,
.show-mobile {
  display: none;
}

@media screen and (max-width: 1023px) and (min-width: 768px) {
  .show-desktop {
    display: none !important;
  }
  .show-tablet {
    display: block !important;
  }
  .show-mobile {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .show-desktop,
  .show-tablet {
    display: none !important;
  }
  .show-mobile {
    display: block !important;
  }
}

/**************-------------------------------------**************/
/*                           ANIMATIONS                          */
/**************-------------------------------------**************/

/**************-------------------------------------**************/
/*                  TEXT REVEAL (reusable)                       */
/**************-------------------------------------**************/
/* Add class "js-reveal" (+ optional data-split / data-reveal) to any element;
   the JS splits it into words/chars/lines and toggles .is-inview on scroll. */
:root {
  --tr-duration: 1s;
  --tr-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  --tr-blur: 20px;
  --tr-y: 40%;
}

.tr {
  --length: 1;
  --delay: 0s;
}

.tr .tr-line,
.tr .tr-word,
.tr .tr-char {
  display: inline-block;
  vertical-align: top;
  /* the item padding gives the blur room; the wrapper's matching negative
     margin (below) cancels it in layout, so word spacing is preserved */
  padding: 0.15em 0.1em;
}

/* lines are full-width — no horizontal padding (it would indent them) */
.tr .tr-line {
  padding-inline: 0;
}

.tr .tr-wrap {
  display: inline-block;
  overflow: visible;
  vertical-align: top;
  margin: -0.15em -0.1em;
}

/* line mode wraps are full-width so each line stacks */
.tr .tr-wrap.block {
  display: block;
  margin: -0.15em 0;
}

/* ---- initial (hidden) state ---- */
.tr .tr-word,
.tr .tr-line,
.tr .tr-char {
  opacity: 0;
  filter: blur(var(--tr-blur));
  transform: translate3d(0, var(--tr-y), 0);
  transition:
    transform var(--tr-duration) var(--tr-ease),
    opacity var(--tr-duration) var(--tr-ease),
    filter var(--tr-duration) var(--tr-ease);
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}

/* ---- revealed state ---- */
.tr.is-inview .tr-word,
.tr.is-inview .tr-line,
.tr.is-inview .tr-char {
  opacity: 1;
  filter: blur(0px);
  transform: translate3d(0, 0%, 0);
}

/* ---- adaptive stagger per reveal type (balanced across text length) ---- */
.tr[data-reveal="hero"] .tr-word {
  transition-delay: calc(
    0.2s + (1.3s / var(--length) * var(--index)) + var(--delay)
  );
}

.tr[data-reveal="heading"] .tr-word {
  transition-delay: calc(0.08s * var(--index) + var(--delay));
}

.tr[data-reveal="paragraph"] .tr-word {
  transition-delay: calc(0.5s / var(--length) * var(--index) + var(--delay));
}

.tr[data-reveal="feature"] .tr-word {
  transition-delay: calc(
    0.2s + (1s / var(--length) * var(--index)) + var(--delay)
  );
}

.tr[data-split="chars"] .tr-char {
  transition-delay: calc(0.015s * var(--index) + var(--delay));
}

.tr[data-split="lines"] .tr-line {
  transition-delay: calc(0.12s * var(--index) + var(--delay));
}

/* ---- mobile: drop blur, use a taller rise for a cleaner, cheaper reveal ---- */
@media screen and (max-width: 767px) {
}

/* ---- accessibility: no motion ---- */
@media (prefers-reduced-motion: reduce) {
  .tr .tr-word,
  .tr .tr-line,
  .tr .tr-char {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/*-----------------------------------------------------------*/
/* SVG Draw Reveal  (same in-view trigger as the text reveal) */
/*-----------------------------------------------------------*/
/*
  Add `js-draw` to any inline <svg> of a STROKED icon. On scroll-in the
  outline draws itself. JS measures each shape and sets --draw-len (dash
  length) + --index (order); the CSS below animates stroke-dashoffset
  from len -> 0. Multi-shape icons stagger by --index. Tune the feel with
  the :root vars; add `style="--delay:.2s"` for a per-icon head start.
*/
:root {
  --draw-duration: 1.3s;
  --draw-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --draw-stagger: 0.14s;
}

/* hidden state: the dash is offset by its own length (outline invisible),
   and any fill starts transparent so the stroke draws onto nothing first.
   (--draw-len is set inline by JS; the 0 fallback is only used pre-JS.)
   fill-opacity has no effect on fill="none" icons, so pure-line icons are
   unaffected — it only matters for filled icons like this one. */
.js-draw :is(path, line, polyline, polygon, circle, ellipse, rect) {
  stroke-dashoffset: var(--draw-len, 0);
  fill-opacity: 0;
  transition:
    stroke-dashoffset var(--draw-duration) var(--draw-ease)
      calc(var(--draw-stagger) * var(--index, 0) + var(--delay, 0s)),
    fill-opacity calc(var(--draw-duration) * 0.6) ease
      calc(var(--draw-duration) * 0.85 + var(--delay, 0s));
}

/* opt out of the fill fade — keep the fill visible from the start
   (still draws the stroke). Put data-draw="stroke" on the .js-draw element. */
.js-draw[data-draw="stroke"]
  :is(path, line, polyline, polygon, circle, ellipse, rect) {
  fill-opacity: 1;
}

/* drawn state: outline completes, then the fill fades in */
.js-draw.is-inview :is(path, line, polyline, polygon, circle, ellipse, rect) {
  stroke-dashoffset: 0;
  fill-opacity: 1;
}

/* accessibility: no motion — show the icon fully, no draw */
@media (prefers-reduced-motion: reduce) {
  .js-draw :is(path, line, polyline, polygon, circle, ellipse, rect) {
    stroke-dashoffset: 0;
    fill-opacity: 1;
    transition: none;
  }
}

/*-----------------------------------------------------------*/
/* Block Reveal — bottom rise + blur for whole elements       */
/* (cards, images, blocks). Same in-view trigger as the text  */
/* reveal; add `js-fade` to any element.                      */
/*-----------------------------------------------------------*/
/*
  .js-fade                     reveals as it enters view
  data-fade="up|down|left|right|in|zoom"   direction (default up = rise)
  style="--delay:.2s"          per-element head start
  .js-fade-stagger (wrapper)   children cascade together on scroll-in
*/
:root {
  --fade-duration: 1s;
  --fade-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  --fade-blur: 12px;
  --fade-dist: 40px;
  --fade-stagger: 0.12s;
}

/* hidden state (default: rise from below) */
.js-fade {
  opacity: 0;
  filter: blur(var(--fade-blur));
  transform: translate3d(0, var(--fade-dist), 0);
  transition:
    opacity var(--fade-duration) var(--fade-ease),
    filter var(--fade-duration) var(--fade-ease),
    transform var(--fade-duration) var(--fade-ease);
  transition-delay: var(--delay, 0s);
  will-change: transform, opacity, filter;
}

/* direction variants */
.js-fade[data-fade="down"] {
  transform: translate3d(0, calc(-1 * var(--fade-dist)), 0);
}
.js-fade[data-fade="left"] {
  transform: translate3d(var(--fade-dist), 0, 0);
}
.js-fade[data-fade="right"] {
  transform: translate3d(calc(-1 * var(--fade-dist)), 0, 0);
}
.js-fade[data-fade="in"] {
  transform: none; /* pure blur + fade, no movement */
}
.js-fade[data-fade="zoom"] {
  transform: scale(0.94);
}

/* group stagger: children get their delay from --index (set by JS) */
.js-fade-stagger .js-fade {
  transition-delay: calc(
    var(--fade-stagger) * var(--index, 0) + var(--delay, 0s)
  );
}

/* revealed — both the standalone item and the staggered children */
.js-fade.is-inview,
.js-fade-stagger.is-inview .js-fade {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* mobile: lighter blur for smoother compositing */
@media screen and (max-width: 767px) {
  :root {
    --fade-blur: 6px;
    --fade-dist: 28px;
  }
}

/* accessibility: no motion — show everything, no reveal */
@media (prefers-reduced-motion: reduce) {
  .js-fade {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/**************-------------------------------------**************/
/*                           COMMON                             */
/**************-------------------------------------**************/
.socials-wrapper {
}
.follow-label {
  display: block;
  font-size: var(--font-size-md);
  color: var(--evergreen-200);
  margin-bottom: var(--spacing-md);
}
.socials {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
}

.socials a {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sandstone-200);
}
.socials a svg {
  width: 28px;
  height: 28px;
  display: block;
}

.socials a svg path {
  stroke: currentColor;
  fill: none;
}

@media screen and (max-width: 639px) {
  .socials {
    display: flex;
    gap: 8px;
  }

  .socials a,
  .socials a svg {
    width: 20px;
    height: 20px;
  }
}

/* SCROLL DOWN 1 */

.scroll-down-1 svg {
  width: 38px;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
  }
}

/* LINE */
.scroll-down-1 .line {
  stroke-dasharray: 98;
  stroke-dashoffset: 98;

  animation: lineDraw 2.8s ease-in-out infinite;
}

@keyframes lineDraw {
  0% {
    stroke-dashoffset: 98;
    opacity: 1;
  }

  /* line grows */
  45% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  /* hold visible briefly */
  58% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  /* fade out after completed */
  78% {
    stroke-dashoffset: 0;
    opacity: 0;
  }

  100% {
    stroke-dashoffset: 98;
    opacity: 0;
  }
}

/* CHEVRONS */
.scroll-down-1 svg {
  width: 38px;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
  }
}

/* LINE */
.scroll-down-1 .line {
  stroke-dasharray: 98;
  stroke-dashoffset: 98;

  animation: lineDraw 2.8s ease-in-out infinite;
}

@keyframes lineDraw {
  0% {
    stroke-dashoffset: 98;
    opacity: 1;
  }

  45% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  60% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  /* line fade starts */
  80% {
    stroke-dashoffset: 0;
    opacity: 0;
  }

  100% {
    stroke-dashoffset: 98;
    opacity: 0;
  }
}

.scroll-down-1 .chev {
  opacity: 0;

  transform-box: fill-box;
  transform-origin: center;

  animation: chev 2.8s ease-in-out infinite;
}

.scroll-down-1 .chev-top {
  animation-delay: 0.55s;
}

.scroll-down-1 .chev-mid {
  animation-delay: 0.72s;
}

.scroll-down-1 .chev-bot {
  animation-delay: 0.89s;
}

@keyframes chev {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }

  20% {
    opacity: 1;
    transform: translateY(0);
  }

  55% {
    opacity: 1;
    transform: translateY(0);
  }

  80% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media screen and (max-width: 1279px) {
  .scroll-down-1 svg {
    width: 32px;
    overflow: visible;
  }
}

@media screen and (max-width: 639px) {
  .scroll-down-1 svg {
    width: 26px;
    overflow: visible;
  }
}

/* SCROLL DOWN 2 */

.scroll-down-2 svg {
  width: 38px;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
  }
}

/* CHEVRONS */
.scroll-down-2 svg {
  width: 36px;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
  }
}

.scroll-down-2 .chev {
  opacity: 0;

  transform-box: fill-box;
  transform-origin: center;

  animation: chev 2.8s ease-in-out infinite;
}

.scroll-down-2 .chev-top {
  animation-delay: 0.55s;
}

.scroll-down-2 .chev-mid {
  animation-delay: 0.72s;
}

.scroll-down-2 .chev-bot {
  animation-delay: 0.89s;
}

@keyframes chev {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }

  20% {
    opacity: 1;
    transform: translateY(0);
  }

  55% {
    opacity: 1;
    transform: translateY(0);
  }

  80% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media screen and (max-width: 1279px) {
  .scroll-down-2 svg {
    width: 30px;
    overflow: visible;
  }
}

@media screen and (max-width: 639px) {
  .scroll-down-2 svg {
    width: 24px;
    overflow: visible;
  }
}

/**************-------------------------------------**************/
/*                           BUTTONS                             */
/**************-------------------------------------**************/
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--body-font);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--sandstone-500);
  padding: 16px 18px;
  border: 0.5px solid var(--sandstone-500);
  border-radius: var(--rounded-full);
  white-space: nowrap;
  line-height: 1.2;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.btn-primary:hover {
  background: var(--sandstone-500);
  color: var(--evergreen-600);
  border-color: var(--sandstone-500);
}

.btn-consult {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--body-font);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--sandstone-500);
  padding: 12px 18px;
  border: 0.5px solid var(--sandstone-500);
  border-radius: var(--rounded-full);
  white-space: nowrap;
  line-height: 1.2;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.btn-consult:hover {
  background: var(--sandstone-500);
  color: var(--evergreen-600);
  border-color: var(--sandstone-500);
}

.btn-double-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-ms);
  font-family: var(--body-font);
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--sandstone-400);
  padding: 18px 18px;
  border: 1px solid var(--sandstone-400);
  border-radius: var(--rounded-full);
  white-space: nowrap;
  line-height: 1.2;
  transition:
    color 0.4s ease,
    border-color 0.4s ease;
}

.btn-double-arrow:hover {
}

.btn-double-arrow .btn-arrow {
  transition: all 0.4s ease;
}

.btn-double-arrow:hover .btn-arrow--left {
  transform: translateX(-3px);
}

.btn-double-arrow:hover .btn-arrow--right {
  transform: translateX(3px);
}

.btn-double-arrow .btn-label {
}

.btn-double-arrow .btn-arrow,
.btn-single-arrow .btn-arrow {
  height: 22px;
  width: auto;
}

.btn-double-arrow .btn-arrow svg,
.btn-single-arrow .btn-arrow svg {
  width: auto;
  height: 100%;
}

.btn-double-arrow .btn-arrow--right {
}

.btn-double-arrow .btn-arrow svg {
}

/* Button */
.heading-wrapper .btn-consult {
  gap: 10px;
  overflow: hidden;
}

.heading-wrapper .btn-arrow svg {
  display: block;
  transition: transform 0.3s ease;
}

.heading-wrapper .btn-consult:hover .btn-arrow svg {
  transform: translateX(4px);
}

.btn-single-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--body-font);
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--sandstone-500);
  padding: 16px 18px;
  border: 0.5px solid var(--sandstone-500);
  border-radius: var(--rounded-full);
  white-space: nowrap;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}

.btn-single-arrow:hover {
  color: var(--evergreen-600);
  border-color: var(--sandstone-500);
}

.btn-single-arrow .btn-arrow svg path {
  transform-box: fill-box;
  transform-origin: center;
}

.btn-single-arrow:hover .btn-arrow svg path {
  animation: arrow-chevron-wave 0.6s ease;
}

.btn-single-arrow:hover .btn-arrow svg path:nth-child(2) {
  animation-delay: 0s;
}

.btn-single-arrow:hover .btn-arrow svg path:nth-child(1) {
  animation-delay: 0.1s;
}

@keyframes arrow-chevron-wave {
  0%,
  100% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(2px);
  }
}

/* BUTTON Wave */
.btn-wave .btn-label {
  display: inline-flex;
  line-height: 1.4;
}

.btn-wave .btn-label .char {
  display: inline-block;
  white-space: pre;
}

.btn-wave:hover .btn-label .char {
  animation: char-wave 0.5s ease;
  animation-delay: calc(var(--i) * 0.03s);
}
@keyframes char-wave {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-6px);
  }
}

.btn-arrow svg {
  display: block;
  transition: transform 0.4s ease;
}
.btn-consult:hover .btn-arrow svg {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .btn-label .char,
  .btn-single-arrow:hover .btn-arrow svg path {
    animation: none !important;
  }
  .btn-label .label-line.is-second .char {
    transform: none;
    opacity: 1;
  }
  .btn-label .label-line.is-first {
    display: none;
  }
}

@media screen and (max-width: 1279px) {
  .btn-consult,
  .btn-primary {
    padding: 8px 16px;
  }

  .btn-double-arrow,
  .btn-single-arrow {
    padding: 14px 16px;
  }

  .btn-double-arrow .btn-arrow,
  .btn-single-arrow .btn-arrow {
    height: 20px;
    width: auto;
  }
}

@media screen and (max-width: 639px) {
  .btn-double-arrow,
  .btn-single-arrow {
    padding: 12px 16px;
  }

  .btn-double-arrow .btn-arrow {
    height: 18px;
    width: auto;
  }
}

/**************-------------------------------------**************/
/*                           CONTENT PROSE                       */
/**************-------------------------------------**************/

/* Headings */
.content-prose h1,
.content-prose h2,
.content-prose h3,
.content-prose h4,
.content-prose h5,
.content-prose h6 {
  margin-bottom: var(--spacing-ms);
  line-height: 1.2;
  color: var(--sandstone-500);
}

.content-prose h1 {
  font-size: var(--font-size-9xl);
  font-weight: 500;
  font-family: var(--heading-font);
}
.content-prose h2 {
  font-size: var(--font-size-8xl);
  font-weight: 400;
  font-family: var(--heading-font);
}
.content-prose h3 {
  font-size: var(--font-size-4xl);
  font-weight: 400;
}
.content-prose h4 {
  font-size: var(--font-size-2xl);
  font-weight: 400;
}
.content-prose h5 {
  font-size: var(--font-size-xl);
  font-weight: 400;
}
.content-prose h6 {
  font-size: var(--font-size-lg);
  font-weight: 400;
}

/* Paragraph */
.content-prose p {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--evergreen-200);
  font-weight: 300 !important;
}

.content-prose p:empty {
  padding-bottom: var(--spacing-lg);
}

/* Links */
.content-prose a {
  color: var(--color-primary);
  text-decoration: none;
}
.content-prose a:hover,
.content-prose a:focus {
  opacity: 0.8;
}

/* Lists */
.content-prose ul,
.content-prose ol {
  margin: var(--spacing-md) 0 var(--spacing-md) var(--spacing-lg);
  padding: 0;
  color: var(--evergreen-200);
  font-weight: 300 !important;
}

.content-prose ol ol {
  list-style-type: lower-alpha;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: var(--spacing-xl);
}
.content-prose ol ol ol {
  list-style-type: lower-roman;
}

.content-prose ul {
  list-style-type: disc;
}

.content-prose ul ul {
  margin-top: 0;
  margin-bottom: 0;
  list-style-type: circle;
  margin-left: var(--spacing-xl);
}

.content-prose ul ul ul {
  list-style-type: square;
}
.content-prose li {
  margin-bottom: var(--spacing-md);
}

.content-prose ol ol li,
.content-prose ul ul li {
  margin-bottom: 0;
}

/* Blockquote */
.content-prose blockquote {
  border-left: 4px solid var(--evergreen-200);
  padding-left: 1em;
  color: var(--evergreen-200);
  font-style: italic;
  margin: var(--spacing-lg) 0;
}

/* Images */
.content-prose img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--spacing-md) 0;
}

/* Tables */
.content-prose .clickup-table-view {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.content-prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5em;
  min-width: 600px;
}

.content-prose table th,
.content-prose table td {
  border: 1px solid #ddd;
  padding: 0.75em;
  text-align: left;
}

.content-prose .content-prose table th {
  background: #f9f9f9;
  font-weight: bold;
}

/* Code */
.content-prose code,
.content-prose pre {
  font-family: "Courier New", Courier, monospace;
  background: #f5f5f5;
  padding: 0.2em 0.4em;
  font-size: 90%;
}

.content-prose pre {
  padding: 1em;
  overflow: auto;
}

/* Horizontal Rule */
.content-prose hr {
  border: 0;
  border-top: 1px solid #eee;
  margin: 2em 0;
}

/* Captions */
.content-prose .wp-caption {
  text-align: center;
  margin: 1.5em 0;
}

.content-prose .wp-caption img {
  margin: 0 auto;
}

.content-prose .wp-caption-text {
  font-size: 0.9em;
  color: #666;
  margin-top: 0.5em;
}

@media screen and (max-width: 639px) {
  .content-prose .wp-block-columns.is-layout-flex {
    gap: 0.5em !important;
  }
}

/**************-------------------------------------**************/
/*                           HEADER                             */
/**************-------------------------------------**************/

#header .top-bar {
  position: fixed;
  top: 0;
  padding-top: var(--spacing-md);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 100;
}

#header .top-bar .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-ml);
  padding: 16px 24px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--rounded-xl);
  background: var(--evergreen-700);
  transition:
    background-color 0.5s ease,
    border-color 0.5s ease;
}

#header.menu-is-open .top-bar .wrapper {
  border-color: transparent;
  background: transparent;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 101;
  margin-right: auto;
  transition: none !important;
}
.logo-icon img {
  height: 48px;
  width: auto;
  display: block;
}
.logo-text img {
  height: 48px;
  width: auto;
  display: block;
}

.menu-toggle {
  position: relative;
  z-index: 101;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--color-primary);
}
.toggle-svg {
  width: 48px;
  height: auto;
  display: block;
}

/* ---------- FULL SCREEN MENU ---------- */
.full-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--evergreen-700);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Composite the fade so it runs off the main thread and doesn't
     starve the GSAP logo flight that happens at the same time. */
  will-change: opacity;
  transition:
    opacity 0.5s ease,
    visibility 0s linear 0.5s;
}
.full-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.5s ease,
    visibility 0s;
}

.full-menu .container {
  height: 100%;
}

/* Decorative leaf — anchored to the fixed .full-menu on all screen sizes.
   (The per-breakpoint overrides live inside the media queries.) */
.full-menu .leaf-asset {
  position: absolute;
  right: 0;
  top: 10%;
  pointer-events: none;
}
.full-menu .leaf-asset svg {
  display: block;
  height: auto;
}

.full-menu .menu-inner {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding-top: calc(var(--spacing-md) + 12px);
  padding-bottom: var(--spacing-lg);
  padding-inline: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-lg);
}

.full-menu .menu-middle {
  display: grid;
  grid-template-columns: minmax(0, 800px) minmax(500px, max-content);
  gap: var(--spacing-4xl);
  /* align-items: center; */
  flex: 1;
}

.full-menu .menu-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--spacing-lg);
}

.full-menu .menu-bottom .lorem p {
  max-width: 380px;
  font-size: var(--font-size-sm);
  color: var(--sandstone-300);
  line-height: 1.3;
}

.full-menu .full-menu__left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.full-menu .media {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 768px;
  max-height: 700px;
  /* aspect-ratio: 1 / 1.05; */
  border-radius: var(--rounded-2xl);
  overflow: hidden;
  background: var(--evergreen-700);
  will-change: transform;
}
.full-menu .media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Own layer: video decode/paint stays off the main thread. */
  transform: translateZ(0);
  min-height: 200px;
}

/* ---- Right column ---- */
.full-menu .full-menu__right {
  display: flex;
  flex-direction: column;
}

.full-menu .full-menu__logo-icon img {
  height: 48px;
  width: auto;
  display: block;
}

/* ---- Nav list ---- */
.full-menu .links .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: var(--spacing-xl);
}

.full-menu .links .menu > li:not(:last-child) {
  margin-bottom: var(--spacing-sm);
}

.full-menu .links .menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--heading-font);
  font-size: var(--font-size-5xl);
  font-weight: 400;
  line-height: 1.18;
  color: var(--evergreen-100);
  transition: color 0.3s ease;
}
.full-menu .links .menu > li > a:hover,
.full-menu .links .menu > .current-menu-item a {
  color: var(--sandstone-500);
}
.full-menu .links .current-menu-item > a {
  color: var(--color-primary);
}

/* ---- Treatment chevron ---- */
.full-menu .submenu-toggle {
  display: inline-flex;
  width: 28px;
  transition: transform 0.35s ease;
  margin-top: -5px;
}
.full-menu .submenu-toggle svg {
  width: 100%;
  height: auto;
}
.full-menu .menu-item-has-children.is-open .submenu-toggle {
  transform: rotate(90deg);
}

.full-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding-top: var(--spacing-xs);
  overflow: hidden;
  height: 0;
  opacity: 0;
}
.full-menu .sub-menu li:last-child {
  padding-bottom: var(--spacing-sm);
}
.full-menu .sub-menu li a {
  display: block;
  font-family: var(--body-font);
  font-size: var(--font-size-md);
  font-weight: 300;
  color: var(--color-white);
  padding: 3px 0;
  transition: color 0.25s ease;
}
.full-menu .sub-menu li a:hover {
  color: var(--sandstone-500);
}
.logo-slot {
  position: absolute;
  top: var(--spacing-md);
  left: 0;
}

.full-menu .btn-consult {
  display: none;
}

@media screen and (max-width: 1279px) {
  #header .top-bar .wrapper {
    padding: 14px 20px;
  }
  .logo-icon img,
  .logo-text img {
    height: 38px;
  }
  header .toggle-svg {
    width: 38px;
  }

  .full-menu .menu-inner {
    gap: var(--spacing-xl);
  }
  .full-menu .menu-middle {
    gap: var(--spacing-2xl);
    grid-template-columns: minmax(0, 800px) minmax(400px, max-content);
  }

  .full-menu .links .menu {
    margin-top: 10vh;
  }
}

@media screen and (max-width: 1023px) {
  .full-menu .menu-middle {
    grid-template-columns: minmax(0, 800px) minmax(300px, max-content);
  }
}

@media screen and (max-width: 767px) {
  #header .top-bar .wrapper {
    padding: 8px;
    gap: var(--spacing-sm);
  }

  .logo-icon img,
  .logo-text img {
    height: 36px;
  }
  .toggle-svg {
    width: 36px;
  }

  header .btn-consult {
    display: none;
  }

  .full-menu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .full-menu::-webkit-scrollbar {
    display: none;
  }

  .full-menu .leaf-asset {
    position: absolute;
    right: 0%;
    top: 15%;
  }

  .full-menu .leaf-asset svg {
    width: 100%;
    height: 100%;
  }

  .full-menu .container {
    height: auto;
    min-height: 100%;
  }

  .full-menu .menu-inner {
    padding-bottom: var(--spacing-xl);
    padding-inline: 9px;
    padding-top: calc(var(--spacing-md) + 9px);
    gap: var(--spacing-xl);
    height: auto;
    min-height: 100%;
    justify-content: flex-start;
  }

  .full-menu .menu-middle {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-lg);
  }
  .full-menu .full-menu__right {
    order: 1;
    min-width: 0;
    min-height: auto;
  }
  .full-menu .full-menu__left {
    order: 2;
    min-height: 212px;
  }

  .full-menu .menu-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xl);
  }

  .full-menu .full-menu__logo-icon img {
    height: 32px;
  }

  .full-menu .media-video {
    position: relative;
  }

  .full-menu .btn-consult {
    display: flex;
    padding: 12px 16px;
    margin-block: var(--spacing-lg) var(--spacing-sm);
  }

  .full-menu .links .menu > li > a {
    font-size: var(--font-size-8xl);
  }

  .full-menu .submenu-toggle {
    width: 22px;
    margin-top: -4px;
  }

  .full-menu .leaf-asset {
    top: 10%;
  }
}

@media screen and (max-width: 639px) {
  .logo-text {
    display: none;
  }

  .logo-icon img {
    height: 32px;
  }

  .toggle-svg {
    width: 32px;
  }

  .full-menu .links .menu {
    margin-top: 5dvh;
  }
}

/**************-------------------------------------**************/
/*                         FOOTER USPS CAROUSEL                  */
/**************-------------------------------------**************/
.site-footer {
  overflow: hidden;
}
.site-footer .footer-usps-carousel {
  overflow: hidden;
  margin-bottom: var(--spacing-2xl);
  margin-top: var(--spacing-xl);
}

.footer-usps-carousel .wrapper {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.footer-usps-carousel .wrapper .cards {
  display: inline-flex;
  gap: var(--spacing-md);
  padding-left: var(--spacing-md);
  margin-left: -2px;
  animation: 24s infinite-slides infinite linear;
}

.footer-usps-carousel .wrapper .card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-shrink: 0;
}

.footer-usps-carousel .wrapper .card::after {
  content: "•";
  display: inline-block;
  color: var(--evergreen-400);
  font-size: var(--font-size-2xl);
  line-height: 1;
}

.footer-usps-carousel .wrapper .card .text {
  font-size: var(--font-size-2xl);
  line-height: 1;
  text-transform: uppercase;
  color: var(--evergreen-400);
}

@keyframes infinite-slides {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@media screen and (max-width: 1279px) {
  .footer-usps-carousel .wrapper .card .text {
    font-size: var(--font-size-lg);
  }

  .footer-usps-carousel .wrapper .card::after {
    font-size: var(--font-size-lg);
  }
}

@media screen and (max-width: 639px) {
  .footer-usps-carousel .wrapper .cards {
    gap: var(--spacing-sm);
    padding-left: var(--spacing-sm);
  }

  .footer-usps-carousel .wrapper .card {
    gap: var(--spacing-sm);
  }

  .footer-usps-carousel .wrapper .card .text {
    font-size: var(--font-size-md);
  }

  .footer-usps-carousel .wrapper .card::after {
    font-size: var(--font-size-md);
  }
}

/**************-------------------------------------**************/
/*                           FOOTER                              */
/**************-------------------------------------**************/

.site-footer {
  position: relative;
  overflow: hidden;
  background-color: var(--evergreen-700);
}

.site-footer .footer-top {
  padding-block: var(--spacing-2xl);
}

.site-footer .footer-image-asset {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 20%;
  z-index: 0;
  pointer-events: none;
}

.site-footer .footer-image-asset svg {
  height: 100%;
  max-height: 800px;
  stroke-width: 1px;
  stroke: rgba(244, 238, 226, 0.04);
}

.site-footer .container {
  position: relative;
  z-index: 1;
}

.site-footer .footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

.site-footer .footer-brand .footer-logo-mark {
  height: 220px;
}

.site-footer .footer-brand .footer-logo-mark svg {
  height: 100%;
  width: auto;
}

.site-footer .footer-brand .footer-intro {
  color: var(--evergreen-200);

  max-width: 400px;
}

.site-footer .footer-brand .socials {
  justify-content: flex-start;
}

.site-footer .footer-heading {
  margin-bottom: var(--spacing-md);
  font-weight: 500;
  color: var(--evergreen-200);
}

.site-footer .footer-list {
  list-style: none;
}

.site-footer .footer-list li:not(:last-child) {
  margin-bottom: var(--spacing-xs);
}

.site-footer .footer-list a,
.site-footer .footer-list p {
  font-weight: 500;
  line-height: 1.6;
  color: var(--sandstone-500);
}

.site-footer .footer-list a:hover {
  color: var(--sandstone-100);
}

.site-footer .footer-info .footer-col:not(:last-child) {
  margin-bottom: var(--spacing-xl);
}

.site-footer .footer-top .accordion-toggle .arrow {
  display: none;
}

.site-footer .line {
  width: 100%;
  height: 1px;
  background-color: var(--color-border-1);
}

.site-footer .footer-top .footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--spacing-2xl);
}

.site-footer .footer-bottom {
  margin-top: var(--spacing-3xl);
  background-color: var(--evergreen-700);
  z-index: 1;
  position: relative;
}

.site-footer .footer-bottom .line {
}

.site-footer .footer-bottom .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg) 0;
}

.site-footer .footer-bottom a,
.site-footer .footer-bottom p {
  opacity: 0.4;
  font-size: var(--font-size-sm);
  color: var(--color-white);
}

.site-footer .footer-bottom a:hover {
  opacity: 1;
}

.site-footer .footer-bottom .footer-legal.footer-legal-mobile {
  display: none;
}

.site-footer .footer-bottom .footer-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  list-style: none;
}

.site-footer .footer-bottom .footer-legal li:not(:last-child) {
  padding-right: var(--spacing-md);
  border-right: 1px solid rgba(255, 255, 255, 0.4);
}

.site-footer .footer-bottom .footer-legal a,
.site-footer .footer-bottom .footer-legal li {
  line-height: 1;
}

.site-footer .footer-bottom-mobile {
  display: none;
}

@media screen and (max-width: 1279px) {
  .site-footer .footer-brand .footer-logo-mark {
    height: 160px;
  }
}

@media screen and (max-width: 1023px) {
  .site-footer .footer-brand .footer-logo-mark {
    height: 140px;
  }

  .site-footer .footer-top .footer-grid {
    gap: var(--spacing-xl);
    grid-template-columns: 1fr 1fr 1fr;
  }

  .site-footer .footer-brand {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: var(--spacing-2xl);

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
  }

  .site-footer .footer-brand .footer-intro {
    grid-column: 1 / 2;
    grid-row: 2;
  }

  .site-footer .footer-brand .footer-socials {
    grid-column: 2 / 3;
    grid-row: 2;
    display: flex;
    justify-content: end;
  }

  .site-footer .footer-brand .footer-socials .socials-wrapper {
    justify-content: flex-end;
    max-width: 200px;
  }

  .site-footer .footer-bottom .footer-legal {
    display: none;
  }

  .site-footer .footer-bottom .footer-legal.footer-legal-mobile {
    display: flex;
    margin-bottom: var(--spacing-xl);
  }

  .site-footer .footer-top {
    padding-bottom: 0;
  }
}

@media screen and (max-width: 639px) {
  .site-footer {
    /* padding-top: var(--spacing-4xl); */
  }

  .site-footer .footer-image-asset {
    position: absolute;
    right: -30%;
    bottom: 0;
    top: 6%;
    z-index: 0;
    pointer-events: none;
    height: 300px;
  }

  .site-footer .footer-top {
    padding-top: var(--spacing-md);
  }

  .site-footer .footer-top .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .site-footer .footer-info {
    margin-bottom: var(--spacing-2xl);
    grid-row: 1;
  }

  .site-footer .footer-brand {
    margin-block: var(--spacing-3xl) var(--spacing-lg);
    grid-row: 4;
    display: flex;
    align-items: center;
  }

  .site-footer .footer-brand .footer-intro {
    text-align: center;
    font-size: var(--font-size-sm);
  }

  .site-footer .footer-brand .footer-socials {
    justify-content: center;
  }

  .site-footer .footer-brand .footer-socials .follow-label {
    text-align: center;
  }

  .site-footer .footer-accordion {
    border-top: 1px solid var(--color-border-2);
    grid-row: 2;
  }

  .site-footer .footer-accordion:last-of-type {
    border-bottom: 1px solid var(--color-border-2);
    grid-row: 3;
  }

  .site-footer .footer-heading {
    margin-bottom: var(--spacing-sm);
  }

  .site-footer .footer-accordion .accordion-toggle {
    width: 100%;
    background: none;
    border: none;
    padding: var(--spacing-ml) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: inherit;
    color: inherit;
    cursor: pointer;
  }

  .site-footer .footer-accordion .accordion-toggle .footer-heading {
    margin-bottom: 0;
  }

  .site-footer .footer-accordion .accordion-toggle .arrow {
    display: block;
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
    margin-top: 6px;
  }

  .site-footer .footer-accordion.open .accordion-toggle .arrow {
    transform: rotate(180deg);
  }

  .site-footer .footer-accordion .footer-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }

  .site-footer .footer-accordion .footer-list a {
    font-size: var(--font-size-sm);
    color: #fff;
    font-weight: 300;
  }

  .site-footer .footer-accordion.open .footer-list {
    padding-bottom: var(--spacing-md);
  }

  .site-footer .footer-bottom-mobile {
    display: block;
  }

  .site-footer .footer-bottom-mobile .footer-legal {
    justify-content: space-between;
    max-width: var(--max-width-sm);
    margin: 0 auto var(--spacing-xl);
  }

  .site-footer .footer-bottom-mobile .footer-legal a {
    opacity: 0.4;
    font-size: var(--font-size-xs);
  }

  .site-footer .footer-bottom-mobile .footer-legal a:hover {
    opacity: 1;
  }

  .site-footer .footer-bottom .wrapper {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xl) 0;
  }

  .site-footer .footer-bottom .wrapper a,
  .site-footer .footer-bottom .wrapper p {
    font-size: var(--font-size-xs);
  }
}

/**************-------------------------------------**************/
/*                        INTRO / REVEAL                         */
/**************-------------------------------------**************/
.hero-reveal {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: var(--color-primary);
  background: var(--evergreen-900);
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 3s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-reveal.is-hidden {
  opacity: 0;
  transform: scale(1.2);
  pointer-events: none;
}

.hero-reveal .intro__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  will-change: transform;
}

.hero-reveal .intro__media img,
.hero-reveal .intro__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-reveal .intro__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  gap: var(--spacing-xl);
  padding: var(--spacing-lg);
  margin-bottom: 10vh;
}

.hero-reveal .intro__start {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}
.hero-reveal .intro__mark img {
  width: 100px;
  height: auto;
  display: block;
  transition: transform 0.6s ease;
  will-change: transform;
}
.hero-reveal .intro__start:hover .intro__mark img {
  transform: scale(1.05);
}
.hero-reveal .intro__start-label {
  font-size: var(--font-size-xl);
  color: var(--evergreen-100);
  transition: transform 0.6s ease;
}

.hero-reveal .intro__start:hover .intro__start-label {
  color: var(--sandstone-500);
}

.hero-reveal .intro__tagline {
  margin: 0;
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: var(--font-size-6xl);
  line-height: 1.2;
  max-width: 20ch;
  color: var(--sandstone-500);
}

.hero-reveal .intro__audio {
  position: absolute;
  right: var(--spacing-xl);
  bottom: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-xs);
  color: var(--sandstone-200);
  text-align: center;
}

.hero-reveal .intro__audio svg {
  width: 54px;
  height: 54px;
}

.hero-reveal.is-done {
  display: none;
}

@media screen and (max-width: 767px) {
  .hero-reveal .intro__mark img {
    width: 52px;
  }
  .hero-reveal .intro__tagline {
    font-size: var(--font-size-5xl);
    max-width: 18ch;
  }
  .hero-reveal .intro__audio {
    right: var(--spacing-md);
    bottom: var(--spacing-md);
  }
}

/**************-------------------------------------**************/
/*                         HOME COMMON                           */
/**************-------------------------------------**************/
.hero-common {
  height: calc(100dvh + 400px);
  position: relative;
  max-height: 1200px;
}

.hero-common .hero-bg-video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-common .hero-bg-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-common .hero-bg-video picture {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(25dvh + 400px);
  overflow: hidden;
  pointer-events: none;
}

.hero-common .hero-bg-video picture img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: bottom;
}

.hero-common .container {
  z-index: 3;
  padding-block: calc(var(--spacing-5xl) + 100px) var(--spacing-3xl);
  height: 100dvh;
  max-height: 1200px;
  position: absolute;
  inset: 0;
  width: 100%;
}

.hero-common .wrapper {
  margin: 0 auto;
  max-width: var(--container-sm);
}

.hero-common .wrapper .heading {
  color: var(--sandstone-500);
}

.hero-common .wrapper .description {
  margin-top: var(--spacing-md);
  font-weight: 300;
  color: var(--chasenut-200);
}

.hero-common .scroll-to {
  margin-top: var(--spacing-lg);
  margin-inline: auto;
  max-width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  color: var(--sandstone-400);
  font-size: var(--font-size-2xl);
  position: relative;
  z-index: 5;
}

.hero-common .scroll-to:hover {
  color: var(--sandstone-200);
}

@media screen and (max-width: 1023px) {
  .hero-common .scroll-to {
    font-size: var(--font-size-lg);
  }
}

/**************-------------------------------------**************/
/*                         HOME HERO                          */
/**************-------------------------------------**************/

.home-hero {
  position: relative;
  overflow: hidden;
}

.home-hero .hero-content {
  min-height: 100dvh;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.home-hero .hero-content .bg-image {
  position: absolute;
  inset: 0;
}

.home-hero .hero-content .bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* .hero-reveal .intro__mark img {
  position: relative;
  overflow: visible;
  z-index: 901;
}

.mask-reveal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: circle(0.5% at 50% 50%);
  background-color: black;
  z-index: 900;
} */
/**************-------------------------------------**************/
/*                         DEFAULT HERO                          */
/**************-------------------------------------**************/
.default-hero {
  height: 500px;
  padding-block: calc(var(--spacing-xl) + 100px) var(--spacing-3xl);
  background-color: var(--evergreen-700);
  color: var(--sandstone-500);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.default-hero .wrapper {
  margin: 0 auto;
  max-width: var(--container-md);
}

.default-hero .wrapper .description {
  margin-top: var(--spacing-md);
  font-weight: 300;
  color: #fff;
}

@media screen and (max-width: 1023px) {
  .default-hero {
    height: 480px;
  }
}

@media screen and (max-width: 639px) {
  .default-hero {
    height: 400px;
    padding-block: calc(var(--spacing-xl) + 60px) var(--spacing-3xl);
  }
}

/**************-------------------------------------**************/
/*                         CONTENT AREA                          */
/**************-------------------------------------**************/
.content-area {
  padding-top: var(--spacing-3xl);
  padding-bottom: var(--spacing-6xl);
  background-color: var(--color-white);
  position: relative;
}

.content-area .content-prose {
  max-width: var(--container-md);
  margin-inline: auto;
}

p:empty {
  display: none;
}

.content-area .image-asset {
  position: absolute;
  right: 0;
  bottom: var(--spacing-4xl);
}

/**************-------------------------------------**************/
/*                           FAQs With Hero                      */
/**************-------------------------------------**************/
.faqs-with-hero {
  background-color: var(--sandstone-100);
}
.faqs-with-hero .hero-common .heading {
  color: var(--sandstone-500);
}

.faqs-with-hero .faqs-area {
  position: relative;
  padding-bottom: 100px;
  z-index: 2;
  background-color: transparent;
}

.faqs-with-hero .faqs-area .container {
  position: relative;
  z-index: 2;

  margin-top: -280px;
}

/**************-------------------------------------**************/
/*                           FAQs Area                           */
/**************-------------------------------------**************/
.faqs-area {
  padding-bottom: var(--spacing-4xl);
  background-color: var(--sandstone-100);
}

.faqs-area .wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: flex-start;
}

.faqs-area .heading-wrapper {
  display: flex;
  gap: var(--spacing-md);
  color: var(--chasenut-500);
  align-items: center;
  max-width: 460px;
  /* position: sticky;
  top: 110px; */
  align-self: start;
}

.faqs-area .heading-wrapper .icon {
  /* margin-block: var(--spacing-md); */
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.faqs-area .heading-wrapper .heading {
  font-weight: 400;
  font-family: var(--body-font);
  font-size: var(--font-size-5xl);
}

.faqs-area .accordion .accordion-item {
  /* margin-top: var(--spacing-md); */
  border-top: 1px solid var(--chasenut-200);
  transition: all 0.3s ease-in-out;
}

.faqs-area .accordion .accordion-item.open {
}

.faqs-area .accordion button {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-ml);
  text-align: left;
  width: 100%;
  padding-block: var(--spacing-ml) var(--spacing-ml);
  color: var(--chasenut-500);
  font-size: var(--font-size-xl);
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.faqs-area .accordion button .accordion-title {
  margin-right: auto;
  transition: color 0.3s ease-in-out;
}

.faqs-area .accordion-item.open .accordion-title {
}

.faqs-area .accordion button .icon {
  flex-shrink: 0;
  transition: transform 0.3s ease-in-out;
  margin-top: var(--spacing-sm);
}

.faqs-area .accordion-item.open button .icon {
  transform: rotate(180deg);
}

.faqs-area .accordion button .icon svg {
  width: 13px;
}

.faqs-area .accordion-item button .icon svg path {
  stroke: var(--chasenut-500);
  stroke-width: 1.5px;
}

.faqs-area .accordion-content {
  font-weight: 300;
  color: var(--chasenut-300);
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition:
    height 0.3s linear,
    opacity 0.3s linear;
  will-change: height, opacity;
}

.faqs-area .accordion-content .content-prose {
  padding-bottom: var(--spacing-ml);
}

.faqs-area .accordion-item.open .accordion-content {
  opacity: 1;
}

@media screen and (max-width: 1023px) {
  .faqs-area .wrapper {
    display: block;
    max-width: var(--container-sm);
    margin-inline: auto;
  }

  .faqs-area .heading-wrapper {
    margin-bottom: var(--spacing-xl);
  }

  .faqs-area .heading-wrapper .icon {
    width: 48px;
    height: 48px;
  }
}

@media screen and (max-width: 640px) {
  .faqs-area .heading-wrapper .icon {
    width: 32px;
    height: 32px;
  }
}

/**************-------------------------------------**************/
/*                           CTA SECTION 1                       */
/**************-------------------------------------**************/

.cta-section-1 {
  height: 1000px;
  color: var(--sandstone-500);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section-1 .bg-video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.cta-section-1 .bg-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-section-1 .bg-video picture {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: calc(25dvh + 400px);
  overflow: hidden;
}

.cta-section-1 .bg-video picture img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: top;
}

.cta-section-1 .container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--spacing-6xl);
  width: 100%;
  z-index: 3;
}

.cta-section-1 .cta-inner {
  max-width: var(--container-lg);
  margin-inline: auto;
}

.cta-section-1 .cta-icon {
  width: 72px;
  height: auto;
  margin-inline: auto;
}

.cta-section-1 .cta-icon svg,
.cta-section-1 .cta-icon img {
  width: 100%;
  height: auto;
}

.cta-section-1 .cta-title {
  padding-block: var(--spacing-lg);
  font-size: var(--font-size-8xl);
}

.cta-section-1 .cta-text {
  font-weight: 300;
  margin-bottom: var(--spacing-xl);
}

.cta-section-1 .cta-action {
  margin-top: var(--spacing-lg);
}

@media screen and (max-width: 1279px) {
  .cta-section-1 {
    height: 620px;
  }
}

@media screen and (max-width: 1023px) {
  .cta-section-1 .cta-icon {
    width: 64px;
  }
}

@media screen and (max-width: 639px) {
  .cta-section-1 {
    height: 580px;
  }
  .cta-section-1 .cta-icon {
    width: 58px;
  }

  .cta-section-1 .bg-video picture img {
    object-fit: contain;
  }
}

/**************-------------------------------------**************/
/*                            ERROR 404                          */
/**************-------------------------------------**************/

.error-404 {
  min-height: 100dvh;
  color: var(--sandstone-500);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-block: var(--spacing-8xl) var(--spacing-6xl);
}

.error-404 .bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.error-404 .bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.error-404 .bg-image .overlay {
  background: linear-gradient(
    90deg,
    rgba(37, 43, 9, 0.92) 0%,
    rgba(37, 43, 9, 0.82) 30%,
    transparent 80%
  );

  position: absolute;
  inset: 0;
}

.error-404 .container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
  width: 100%;
}

.error-404 .content {
  max-width: var(--max-width-md);
  flex-shrink: 0;
}

.error-404 .content .title {
  font-size: var(--font-size-8xl);
  font-weight: 400;
  color: var(--sandstone-500);
  margin-bottom: var(--spacing-md);
  line-height: 1.2;
}

.error-404 .text {
  font-size: var(--font-size-md);
  font-weight: 300;
  color: var(--evergreen-100);
  margin-bottom: var(--spacing-lg);
}

.error-404 .action {
  display: flex;
}

.error-404 .error-code {
  font-family: var(--heading-font);
  font-size: 380px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -4px;
  color: var(--sandstone-500);
  flex-shrink: 0;
  margin-top: var(--spacing-2xl);
}

@media screen and (max-width: 1279px) {
  .error-404 .error-code {
    font-size: 280px;
  }
}

@media screen and (max-width: 1023px) {
  .error-404 .error-code {
    font-size: 200px;
  }
}
@media screen and (max-width: 767px) {
  .error-404 .container {
    flex-direction: column-reverse;
    text-align: center;
  }
  .error-404 .error-code {
    font-size: 180px;
  }

  .error-404 .action {
    justify-content: center;
  }
}

/**************-------------------------------------**************/
/*                         CONTACT WITH HERO                     */
/**************-------------------------------------**************/
.contact-with-hero {
  background-color: var(--sandstone-100);
}

.contact-with-hero .hero-common {
  max-height: 820px;
}

.contact-with-hero .wrapper {
  margin-left: 0;
}

.contact-with-hero .contact-section .container {
  margin-top: -50px;
  z-index: 3;
  position: relative;
}

.contact-with-hero .wrapper .heading {
  color: var(--sandstone-500);
}

.contact-with-hero .wrapper .description {
  color: var(--sandstone-200);
}

/**************-------------------------------------**************/
/*                         CONTACT SECTION                       */
/**************-------------------------------------**************/
.contact-section {
  background-color: var(--sandstone-100);
  padding-bottom: var(--spacing-6xl);
  color: var(--timber-600);
}

.contact-section .contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  row-gap: var(--spacing-lg);
  column-gap: var(--spacing-ml);
}

.contact-section .contact-intro {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  padding-right: var(--spacing-ml);
  padding-bottom: var(--spacing-lg);
}

.contact-section .contact-heading {
  font-size: var(--font-size-7xl);
}

.contact-section .contact-card {
  border-radius: var(--rounded-2xl);
  background: var(--sandstone-200);
  padding: var(--spacing-lg) var(--spacing-ml);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-lg);
}

.contact-section .contact-card .icon {
  width: 40px;
  height: auto;
}

.contact-section .contact-card .icon img {
  width: 100%;
  height: auto;
}

.contact-section .contact-card .content {
  color: var(--chasenut-300);
  font-size: var(--font-size-xl);
}

.contact-section .contact-card-title {
  color: var(--chasenut-500);
  font-size: var(--font-size-3xl);
  font-weight: 500;
  margin-bottom: var(--spacing-md);
}

.contact-section .contact-hours {
  grid-column: 2;
  grid-row: 1;
}

.contact-section .contact-card a {
  color: var(--chasenut-300);
  font-size: var(--font-size-xl);
}

.contact-section .contact-card a:hover {
  color: var(--chasenut-500);
}

.contact-section .contact-location {
  grid-column: 1;
  grid-row: 2;
}

.contact-section .contact-details {
  grid-column: 2;
  grid-row: 2;
}

.contact-section .contact-list {
  list-style: none;
}

.contact-section .contact-list li:not(:last-child) {
  margin-bottom: var(--spacing-sm);
}

.contact-section .contact-list li a {
  display: flex;
  gap: var(--spacing-sm);
}

.contact-section .contact-list-icon {
}

.contact-section .contact-list li a svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 4px;
}

.contact-section .contact-media {
  grid-column: 3;
  grid-row: 1 / 3;
  padding: var(--spacing-lg) var(--spacing-md);
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--rounded-2xl);
  display: flex;
  align-items: flex-end;
}

.contact-section .contact-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
  will-change: transform;
}

.contact-section .contact-media:hover .contact-image {
  transform: scale(1.06) rotate(1deg);
}

.contact-section .gradient-overlay {
  background: linear-gradient(
    0deg,
    rgba(37, 43, 9, 0.9) 0%,
    rgba(37, 43, 9, 0.7) 30%,
    transparent 70%
  );
  position: absolute;
  inset: 0;
}

.contact-section .socials-wrapper {
  position: relative;
  z-index: 3;
  text-align: center;
  width: 100%;
}

.contact-section .socials-wrapper .socials {
  justify-content: center;
}

.contact-section .socials-wrapper .follow-label {
  color: var(--sandstone-400);
  font-size: var(--font-size-3xl);
}

.contact-section .socials-wrapper .socials a {
  color: var(--sandstone-400);
  width: 36px;
  height: 36px;
}

.contact-section .socials-wrapper .socials a svg {
  width: 36px;
  height: 36px;
}

@media screen and (max-width: 1279px) {
  .contact-section .contact-grid {
    row-gap: var(--spacing-ml);
    column-gap: var(--spacing-md);
  }

  .contact-section .contact-heading {
    font-size: calc(var(--font-size-7xl) * 0.8);
  }

  .contact-section .contact-card a,
  .contact-section .contact-card .content {
    font-size: var(--font-size-lg);
  }

  .contact-section .contact-list li a svg {
    width: 16px;
    height: 16px;
  }
}

@media screen and (max-width: 1023px) {
  .contact-section .contact-grid {
    grid-template-columns: 1fr 1fr;
  }

  .contact-section .contact-media {
    grid-column: 1/3;
    grid-row: 3;
    min-height: 300px;
  }

  .contact-section .contact-heading {
    font-size: var(--font-size-7xl);
  }

  .contact-section .socials-wrapper .socials a,
  .contact-section .socials-wrapper .socials a svg {
    width: 32px;
    height: 32px;
  }
}

@media screen and (max-width: 639px) {
  .contact-section .contact-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .contact-section .contact-card .icon {
    width: 36px;
    height: auto;
  }

  .contact-section .socials-wrapper .follow-label {
    font-size: var(--font-size-2xl);
  }

  .contact-section .socials-wrapper .socials a,
  .contact-section .socials-wrapper .socials a svg {
    width: 28px;
    height: 28px;
  }
}

/**************-------------------------------------**************/
/*                         CONTACT WITH CTA                      */
/**************-------------------------------------**************/
.contact-with-cta {
  background-color: var(--sandstone-100);
}

.contact-with-cta .contact-form .container {
  position: relative;
  z-index: 3;
}

.contact-with-cta .cta-section-1 {
  position: relative;
  z-index: 2;
  margin-top: -200px;
  height: 1200px;
}

/**************-------------------------------------**************/
/*                         CONTACT FORM                          */
/**************-------------------------------------**************/
.contact-form {
}

.contact-form .container {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: var(--spacing-2xl);
}

.contact-form .container .heading {
  color: var(--timber-600);
}

.contact-form .container .text {
  color: var(--timber-400);
  margin-block: var(--spacing-ms) var(--spacing-ml);
}

.contact-form .container .image {
  aspect-ratio: 1/1;
  width: 100%;
  overflow: hidden;
  border-radius: var(--rounded-2xl);
}

.contact-form .container .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/**************-------------------------------------**************/
/*                      CONSULTATION                             */
/**************-------------------------------------**************/
.consultation {
  background-color: var(--sandstone-100);
}
.consultation-hero .description {
  color: var(--chasenut-200);
}
.consultation .consultation-form-wrapper {
  position: relative;
  padding-bottom: 280px;
  z-index: 2;
}

.consultation .consultation-form-wrapper .container {
  position: relative;
  z-index: 2;

  margin-top: -280px;
  color: var(--chasenut-500);
  font-size: var(--font-size-4xl);
  text-align: center;
  min-height: 100dvh;
}

/**************-------------------------------------**************/
/*                      CONSULTATION THANKYOU                    */
/**************-------------------------------------**************/
.consultation-thankyou {
  background-color: var(--sandstone-100);
}

.consultation-thankyou .thankyou-hero {
  background-color: var(--sandstone-100);
  color: var(--sandstone-500);
  text-align: center;
}

.consultation-thankyou .thankyou-hero .wrapper {
  max-width: var(--container-md);
  z-index: 4;
}

.consultation-thankyou .thankyou-hero .heading {
  font-family: var(--body-font);
  font-size: calc(var(--font-size-7xl) * 0.84);
  margin-bottom: var(--spacing-lg);
}

.consultation-thankyou .thankyou-hero .scroll-down-1 {
  margin-inline: auto;
  width: fit-content;
}

.consultation-thankyou .thankyou-steps {
  position: relative;
  padding-bottom: var(--spacing-6xl);
  z-index: 2;
}

.consultation-thankyou .thankyou-steps .container {
  position: relative;
  z-index: 2;

  margin-top: -280px;
}

.consultation-thankyou .thankyou-steps .heading-wrapper {
  max-width: var(--container-md);
  margin-inline: auto;
  text-align: center;
}

.consultation-thankyou .thankyou-steps .heading-wrapper .heading {
  font-size: var(--font-size-9xl);
  margin-bottom: var(--spacing-lg);
  color: var(--chasenut-500);
}

.consultation-thankyou .thankyou-steps .heading-wrapper .description {
  color: var(--chasenut-500);
  max-width: var(--container-sm);
  margin-inline: auto;
}

.consultation-thankyou .thankyou-steps .steps-wrapper {
  color: var(--chasenut-500);
  max-width: var(--container-lg);
  margin-inline: auto;
  padding-top: var(--spacing-7xl);
}

.consultation-thankyou .thankyou-steps .steps-wrapper .steps {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  gap: var(--spacing-2xl);
}

.consultation-thankyou .thankyou-steps .steps-wrapper .step {
  position: relative;
  flex: 1;
  min-width: 0;
}

.consultation-thankyou .thankyou-steps .steps-wrapper .step-num {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-5xl);
  line-height: 1;
}

.consultation-thankyou .thankyou-steps .steps-wrapper .step-label {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: 1.1;
}

.consultation-thankyou .thankyou-steps .steps-wrapper .step-connector {
  position: absolute;
  width: 240px;
  pointer-events: none;
}

.consultation-thankyou .thankyou-steps .steps-wrapper .step-connector svg {
  display: block;
  width: 100%;
  height: auto;
}

/* bottom curve */
.consultation-thankyou .thankyou-steps .steps-wrapper .step-connector-1 {
  top: calc(100% + 10px);
  left: 40%;
}

/* top curve */
.consultation-thankyou .thankyou-steps .steps-wrapper .step-connector-2 {
  top: -80%;
  left: 40%;
}

/* bottom curve */
.consultation-thankyou .thankyou-steps .steps-wrapper .step-connector-3 {
  top: calc(100% + 10px);
  left: 40%;
}

@media screen and (max-width: 1279px) {
  .consultation-thankyou .thankyou-steps .steps-wrapper {
    max-width: 100%;
  }
}

@media screen and (max-width: 1023px) {
  .consultation-thankyou .thankyou-steps .steps-wrapper .step-connector {
    width: 180px;
  }
}

@media screen and (max-width: 767px) {
  .consultation-thankyou .thankyou-steps .steps-wrapper .steps {
    gap: var(--spacing-xl);
  }

  .consultation-thankyou .thankyou-steps .steps-wrapper .step-num {
    font-size: var(--font-size-4xl);
  }

  .consultation-thankyou .thankyou-steps .steps-wrapper .step-label {
    font-size: var(--font-size-sm);
  }

  .consultation-thankyou .thankyou-steps .steps-wrapper .step-connector {
    width: 140px;
  }
}

@media screen and (max-width: 639px) {
  .consultation-thankyou .thankyou-steps {
    padding-bottom: 0;
  }
  .consultation-thankyou .thankyou-steps .steps-wrapper {
    position: relative;
    padding-top: var(--spacing-6xl);
    padding-left: 50px;
  }
  .consultation-thankyou .thankyou-steps .steps-wrapper .steps {
    display: flex;
    flex-direction: column;
    max-width: 200px;
    margin-inline: auto;
    gap: var(--spacing-3xl);
  }

  .consultation-thankyou .thankyou-steps .steps-wrapper .step-connector {
    width: 110px;
  }

  .consultation-thankyou .thankyou-steps .steps-wrapper .step-num {
    font-size: var(--font-size-5xl);
  }

  .consultation-thankyou .thankyou-steps .steps-wrapper .step-label {
    font-size: var(--font-size-lg);
  }

  .consultation-thankyou .thankyou-steps .steps-wrapper .step-connector-1 {
    top: 0;
    left: -30px;
    transform: rotate(90deg);
    transform-origin: left;
  }

  .consultation-thankyou .thankyou-steps .steps-wrapper .step-connector-2 {
    top: 120%;
    left: auto;
    right: -30px;
    transform: rotate(90deg);
    transform-origin: right;
    display: none;
  }

  .consultation-thankyou .thankyou-steps .steps-wrapper .step-connector-3 {
    top: 0;
    left: -30px;
    transform: rotate(90deg);
    transform-origin: left;
  }
}

/**************-------------------------------------**************/
/*                         SECTION INSTAGRAM                     */
/**************-------------------------------------**************/

.section-instagram {
  position: relative;
  overflow: hidden;
  padding-block: var(--spacing-6xl);
}

.section-instagram .container .wrapper {
  max-width: var(--container-lg);
  margin-inline: auto;
}

.section-instagram .heading {
  color: var(--timber-600);
  font-size: var(--font-size-7xl);
  margin-bottom: var(--spacing-lg);
}

.section-instagram .gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-md);
}

.section-instagram .gallery-grid .gallery-item {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: var(--rounded-lg);
}

.section-instagram .gallery-grid .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
  will-change: transform;
}

.section-instagram .gallery-grid .gallery-item a:hover img {
  transform: scale(1.06) skewX(-1deg);
}

.section-instagram .gallery-follow {
  text-align: center;
  color: var(--chasenut-500);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--spacing-lg);
  gap: var(--spacing-sm);
  transition: transform 0.6s ease;
  will-change: transform;
}

.section-instagram .gallery-follow:hover {
  transform: scale(1.04) skewX(-1deg);
}

.section-instagram .gallery-follow svg {
  width: 20px;
  height: 20px;
}

@media screen and (max-width: 767px) {
  .section-instagram .gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
  }

  .section-instagram .gallery-grid .gallery-item:nth-of-type(n + 4) {
    display: none;
  }

  .section-instagram .gallery-follow svg {
    width: 16px;
    height: 16px;
  }
}

/**************-------------------------------------**************/
/*                       PRICE MENU WITH HERO                    */
/**************-------------------------------------**************/
.price-menu-with-hero {
  background-color: var(--sandstone-100);
}

.price-menu-with-hero .hero-common .wrapper {
  max-width: var(--container-lg);
}

.price-menu-with-hero .hero-common .description {
  max-width: var(--container-md);
  margin-inline: auto;
}

.price-menu-with-hero .treatment-prices .container {
  margin-top: -240px;
  position: relative;
  z-index: 3;
}

/**************-------------------------------------**************/
/*                      TREATMENT PRICES — TABS                  */
/**************-------------------------------------**************/
.treatment-prices {
  /* padding-bottom: var(--spacing-6xl); */
}

.treatment-prices .wrapper {
  max-width: var(--container-lg);
  margin-inline: auto;
}

.treatment-prices .heading {
  color: var(--evergreen-600);
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.treatment-prices .tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.treatment-prices .tab-list {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.treatment-prices .tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-sm) var(--spacing-ml);
  color: var(--chasenut-400);
  font-size: var(--font-size-md);
  white-space: nowrap;
  transition: color 0.3s ease;
}

/* hairline divider between tabs */
.treatment-prices .tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 30px;
  background: var(--chasenut-300);
}

.treatment-prices .tab:first-child::before {
  display: none;
}

.treatment-prices .tab:hover {
  color: var(--chasenut-500);
}

.treatment-prices .tab.active {
  color: var(--chasenut-500);
}

.treatment-prices .tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: 0.3s;
  will-change: transform;
}

.treatment-prices .tab.active .tab-icon {
  transform: translateY(-2px) scale(1.08);
  transform-origin: bottom;
}

.treatment-prices .tab-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.25;
}

/* sliding underline */
.treatment-prices .tab-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 0;
  background: var(--chasenut-400);
  transform: translateX(0);
  transition:
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.treatment-prices .tab-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sandstone-700);
  transition: color 0.3s ease;
}

.treatment-prices .tab-arrow:hover {
  color: var(--chasenut-400);
}

.treatment-prices .tab-arrow svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

.treatment-prices .panels {
  position: relative;
}

.treatment-prices .panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.treatment-prices .panel[hidden] {
  display: none;
}

.treatment-prices .panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--spacing-xl);
  align-items: start;
}

.treatment-prices .panel[hidden] {
  display: none;
}

/* ===== LEFT: CATEGORY CARD ===== */
.treatment-prices .panel-card {
  background: var(--sandstone-200);
  border-radius: var(--rounded-2xl);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  align-items: space-between;
  height: 100%;
}

.treatment-prices .panel-card-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  margin-bottom: var(--spacing-md);
  color: var(--chasenut-500);
}

.treatment-prices .panel-card-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.treatment-prices .panel-card-title {
  color: var(--chasenut-500);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-3xl);
  font-family: var(--body-font);
}

.treatment-prices .panel-card-desc {
  color: var(--chasenut-400);
  margin-bottom: var(--spacing-ml);
}

.treatment-prices .panel-card-link a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--chasenut-500);
  margin-top: auto;
}

.treatment-prices .panel-card-link svg {
  width: 18px;
  height: auto;
  transition: transform 0.3s ease;
  margin-top: 4px;
}

.treatment-prices .panel-card-link:hover svg {
  transform: translateX(3px);
}

/* ===== RIGHT: PRICE TABLE ===== */
.treatment-prices .price-table {
  width: 100%;
}

/* shared grid for header + rows */
.treatment-prices .price-head {
  margin-bottom: var(--spacing-md);
}
.treatment-prices .price-head,
.treatment-prices .price-row-link {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) auto minmax(100px, auto)
    40px;
  align-items: center;
  column-gap: var(--spacing-lg);
}

.treatment-prices .price-row-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* row is just the divider + padding wrapper now */
.treatment-prices .price-row {
  border-top: 1px solid var(--chasenut-100);
  color: var(--chasenut-300);
  font-size: var(--font-size-lg);
  list-style: none;
}

.treatment-prices .price-row:last-child {
  border-bottom: 1px solid var(--chasenut-100);
}

.treatment-prices .price-row-link {
  padding-block: var(--spacing-md);
}

/* whole-row hover feedback */

.treatment-prices .price-row .col-action {
  transition: 0.4s ease-in-out;
}

.treatment-prices .price-row:hover .col-action {
  transform: translateX(12px);
}

.treatment-prices .price-head .col-name,
.treatment-prices .price-head .col-duration,
.treatment-prices .price-head .col-price {
  color: var(--chasenut-500);
  font-weight: 500;
  font-size: var(--font-size-lg);
}

.treatment-prices .col-name,
.treatment-prices .col-duration,
.treatment-prices .col-price {
  white-space: nowrap;
  transition: 0.4s ease-in-out;
}

.treatment-prices .price-row:hover .col-name,
.treatment-prices .price-row:hover .col-duration,
.treatment-prices .price-row:hover .col-price {
  color: var(--chasenut-500);
}

.treatment-prices .col-price {
  text-align: right;
}

.treatment-prices .price-head .col-price {
  justify-self: end;
}

/* circular arrow button */
.treatment-prices .col-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(75, 32, 19, 0.5);
  border-radius: var(--rounded-full);
  color: var(--chasenut-500);
  justify-self: end;
}

.treatment-prices .col-action svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
}

/* header's empty action cell keeps column width */
.treatment-prices .price-head .col-action {
  border: none;
  width: 30px;
  height: auto;
}

@media screen and (max-width: 1279px) {
  .treatment-prices .wrapper {
    max-width: 100%;
  }
}

@media screen and (max-width: 1023px) {
  .treatment-prices .tab::before {
    height: 24px;
  }

  .treatment-prices .panel-card-icon {
    width: 24px;
    height: 24px;
  }

  .treatment-prices .panel-card-title {
    font-size: var(--font-size-2xl);
  }

  .treatment-prices .panel-card-desc {
    font-size: var(--font-size-sm);
  }

  .treatment-prices .panel-card-link {
    font-size: var(--font-size-md);
  }

  .treatment-prices .panel-card-link svg {
    width: 14px;
    margin-top: 2px;
  }

  .treatment-prices .price-head .col-name,
  .treatment-prices .price-head .col-duration,
  .treatment-prices .price-head .col-price,
  .treatment-prices .price-row {
    font-size: var(--font-size-md);
  }

  .treatment-prices .col-action {
    width: 22px;
    height: 22px;
  }

  .treatment-prices .col-action svg {
    width: 10px;
    height: 10px;
  }
}

/* ===== MOBILE ===== */
@media screen and (max-width: 767px) {
  .treatment-prices .tabs {
    gap: var(--spacing-lg);
  }

  .treatment-prices .tab-arrow {
    display: inline-flex;
  }

  .treatment-prices .tab-list {
    flex: 0 1 auto;

    position: relative;
    min-height: 2.2em;
    align-items: center;
    width: 160px;
  }

  .treatment-prices .tab {
    position: absolute;
    inset: 0;
    margin: auto;
    width: max-content;
    height: max-content;
    display: inline-flex;
    gap: 8px;
    justify-content: center;
    padding: var(--spacing-sm) 0;
    opacity: 0;
    visibility: hidden;
    filter: blur(3px);
    pointer-events: none;
    transition:
      opacity 0.5s ease,
      filter 0.5s ease;
  }

  .treatment-prices .tab::before {
    display: none;
  }

  .treatment-prices .tab.active {
    opacity: 1;
    visibility: visible;
    filter: blur(0px);
    pointer-events: auto;
  }

  .treatment-prices .tab.active .tab-icon {
    transform: translateY(0) scale(1);
    transform-origin: bottom;
  }

  .treatment-prices .tab-underline {
    display: none;
  }

  .treatment-prices .panels {
    touch-action: pan-y;
    overflow: hidden;
  }

  .treatment-prices .panel {
    min-height: 180px;
    will-change: transform;
  }

  .treatment-prices .panel.dragging {
    transition: none;
  }

  .treatment-prices .price-head,
  .treatment-prices .price-row-link {
    grid-template-columns: minmax(0, 1fr) auto minmax(60px, auto) 30px;
    column-gap: var(--spacing-ml);
  }

  .treatment-prices .price-head .col-name,
  .treatment-prices .price-head .col-duration,
  .treatment-prices .price-head .col-price,
  .treatment-prices .price-row {
    font-size: var(--font-size-sm);
  }
}

@media screen and (max-width: 639px) {
  .treatment-prices .panel {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }

  .treatment-prices .price-head,
  .treatment-prices .price-row-link {
    grid-template-columns: minmax(0, 1fr) auto minmax(60px, auto) 18px;
    column-gap: var(--spacing-ml);
  }

  .treatment-prices .col-action {
    width: 18px;
    height: 18px;
  }

  .treatment-prices .col-action svg {
    width: 8px;
    height: 8px;
  }
}

/**************-------------------------------------**************/
/*                  TREATMENT PACKAGES WITH CTA                  */
/**************-------------------------------------**************/
.treatment-packages-with-cta {
}

.treatment-packages-with-cta .cta-section-1 {
  margin-top: -400px;
  height: auto;
  z-index: 1;
  position: relative;
}

.cta-section-1 .bg-video {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.treatment-packages-with-cta .cta-section-1 .container {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
}

.treatment-packages-with-cta .cta-section-1 .container .cta-inner {
  padding-top: calc(400px + var(--spacing-8xl));
  padding-bottom: var(--spacing-6xl);
}

.treatment-packages-with-cta .treatment-packages {
  z-index: 2;
}

/**************-------------------------------------**************/
/*                  TREATMENT PACKAGES                           */
/**************-------------------------------------**************/
.treatment-packages {
  position: relative;
}

.treatment-packages .bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.treatment-packages .bg-image img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
}

.treatment-packages .intro {
  padding-top: var(--spacing-9xl);
  position: relative;
  z-index: 3;
}

.treatment-packages .intro .wrapper {
  max-width: var(--container-lg);
  margin-inline: auto;
  text-align: center;
}

.treatment-packages .intro .icon {
  width: 72px;
  height: auto;
  margin-inline: auto;
}

.treatment-packages .intro .icon svg,
.treatment-packages .intro .icon img {
  width: 100%;
  height: auto;
}

.treatment-packages .intro .title {
  padding-block: var(--spacing-lg);
  font-size: var(--font-size-8xl);
  color: var(--sandstone-500);
}

.treatment-packages .intro .scroll-to {
  margin-inline: auto;
  max-width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  color: var(--sandstone-500);
  font-size: var(--font-size-2xl);
  position: relative;
  z-index: 5;
}

.treatment-packages .intro .scroll-to:hover {
  color: var(--sandstone-200);
}

.treatment-packages-slider {
  position: relative;
  z-index: 2;
}

.treatment-packages-slider {
  padding-top: var(--spacing-4xl);
}

.treatment-packages-slider .heading-wrapper {
  display: grid;
  grid-template-columns: auto max-content;
  gap: var(--spacing-2xl);
  align-items: flex-end;
  margin-bottom: var(--spacing-2xl);
}

.treatment-packages-slider .heading-wrapper .wrapper-left {
  max-width: var(--max-width-md);
}

.treatment-packages-slider .heading-wrapper .heading {
  font-size: var(--font-size-7xl);
  color: var(--sandstone-500);
  margin-bottom: var(--spacing-md);
}

.treatment-packages-slider .heading-wrapper .description {
  font-weight: 300;
  color: var(--sandstone-300);
}

/* ---------------- slider ---------------- */
.treatment-packages-slider .slider {
  position: relative;
  width: 100%;
  aspect-ratio: 1180 / 560;
  border-radius: var(--rounded-2xl);
  overflow: hidden;
  background: var(--evergreen-900);
  cursor: grab;
  user-select: none;

  touch-action: pan-y;
}
.treatment-packages-slider .slider.dragging {
  cursor: grabbing;
}

/* media layers (animated) */
.treatment-packages-slider .slider-images {
  position: absolute;
  inset: 0;
}
.treatment-packages-slider .slider-images .img {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: opacity;
}
.treatment-packages-slider .slider-images .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform, filter;
  pointer-events: none;
}
.treatment-packages-slider .slider .slider-shades {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.treatment-packages-slider .slider .slider-shades .shade-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
}

.treatment-packages-slider .slider .slider-shades .shade-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 38%;
}

/* source slides authored in HTML — hidden, used as data + render target */
.treatment-packages-slider .slides-source {
  display: none;
}

/* ---------------- text overlay ---------------- */
.treatment-packages-slider .slide-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--spacing-lg);
  pointer-events: none;
  max-width: var(--max-width-sm);
}
.treatment-packages-slider .clip {
  overflow: hidden;
}
.treatment-packages-slider .slide-top {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.treatment-packages-slider .slide-content .slide-title-track,
.treatment-packages-slider .slide-content .slide-duration-track,
.treatment-packages-slider .slide-content .price-track,
.treatment-packages-slider .slide-content .desc-track {
  will-change: opacity;
}
.treatment-packages-slider .slide-content .slide-title-track p {
  font-size: var(--font-size-3xl);
  font-weight: 500;
  color: var(--sandstone-400);
  line-height: 1.2;
}
.treatment-packages-slider .slide-content .slide-duration-track p {
  color: var(--chasenut-200);
}
.treatment-packages-slider .slide-content .slide-duration-track span {
  color: var(--chasenut-100);
}

.treatment-packages-slider .slide-content .slide-bottom {
  max-width: 320px;
}

.treatment-packages-slider .slide-content .price-label {
  display: block;
  color: var(--chasenut-200);
  margin-bottom: 4px;
}
.treatment-packages-slider .slide-content .price-track p {
  font-size: var(--font-size-5xl);
  color: var(--sandstone-400);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.8px;
}
.treatment-packages-slider .slide-content .desc-track p {
  color: var(--chasenut-200);
  margin-block: var(--spacing-lg);
  line-height: 1.4;
}
.treatment-packages-slider .slide-content .learn-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sandstone-400);
  font-size: var(--font-size-lg);
  font-weight: 500;
  text-decoration: none;
  pointer-events: auto;
}
.treatment-packages-slider .slide-content .learn-more .chev {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  transition: transform 0.3s ease;
}
.treatment-packages-slider .slide-content .learn-more:hover .chev {
  transform: translateX(4px);
}

/* ---------------- arrows ---------------- */
.treatment-packages-slider .nav {
  position: absolute;
  z-index: 5;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  display: flex;
  gap: var(--spacing-sm);
}
.treatment-packages-slider .nav-btn {
  width: 52px;
  height: 52px;
  border-radius: var(--rounded-full);
  border: 1px solid rgba(229, 215, 189, 0.8);
  background: transparent;
  backdrop-filter: blur(4px);
  color: var(--sandstone-500);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}
.treatment-packages-slider .nav-btn:hover {
  background: var(--sandstone-500);
  color: var(--chasenut-500);
}
.treatment-packages-slider .nav-btn svg {
  width: 22px;
  height: 22px;
  display: block;
}

.treatment-packages-slider .nav-btn .dchev path {
  stroke: currentColor;
  fill: none;
}

.treatment-packages-slider .mobile-action {
  display: none;
}

@media screen and (max-width: 1279px) {
  .treatment-packages-slider .slide-content .desc-track p {
    margin-block: var(--spacing-ml);
  }
}

@media screen and (max-width: 1023px) {
  .treatment-packages .intro .icon {
    width: 64px;
  }

  .treatment-packages .intro .scroll-to {
    font-size: var(--font-size-lg);
  }

  .treatment-packages-slider .slider .slider-shades .shade-top,
  .treatment-packages-slider .slider .slider-shades .shade-bottom {
    width: 40%;
  }

  .treatment-packages-slider .slide-content .slide-bottom {
    max-width: 240px;
  }

  .treatment-packages-slider .slide-content .slide-title-track p {
    font-size: var(--font-size-2xl);
  }
  .treatment-packages-slider .slide-content .slide-duration-track p,
  .treatment-packages-slider .slide-content .price-label,
  .treatment-packages-slider .slide-content .desc-track p {
    font-size: var(--font-size-sm);
  }

  .treatment-packages-slider .slide-content .price-track p {
    font-size: var(--font-size-4xl);
  }

  .treatment-packages-slider .slide-content .learn-more {
    gap: 8px;
    font-size: var(--font-size-md);
  }
  .treatment-packages-slider .slide-content .learn-more .chev {
    width: 16px;
    height: 16px;
    margin-top: 2px;
  }

  .treatment-packages-slider .nav-btn {
    width: 32px;
    height: 32px;
  }

  .treatment-packages-slider .nav-btn svg {
    width: 12px;
    height: 12px;
  }
}

@media screen and (max-width: 767px) {
  .treatment-packages .heading-wrapper {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: var(--spacing-ml);
  }

  .treatment-packages .heading-wrapper .wrapper-right {
    display: none;
  }

  .treatment-packages-slider .nav {
    display: none;
  }

  .treatment-packages-slider .slider {
    aspect-ratio: 4/3;
  }
}

@media screen and (max-width: 639px) {
  .treatment-packages .intro .icon {
    width: 58px;
  }

  .treatment-packages-slider .slider {
    aspect-ratio: 3/4;
  }

  .treatment-packages-slider .slider .slider-shades .shade-top,
  .treatment-packages-slider .slider .slider-shades .shade-bottom {
    width: 90%;
  }

  .treatment-packages-slider .mobile-action {
    margin-top: var(--spacing-xl);
    display: block;
  }
}

/**************-------------------------------------**************/
/*                        IMAGE MARQUEE                          */
/**************-------------------------------------**************/
.image-marquee {
  --gap: var(--spacing-ml);
  --card-w: 340px;
  --card-h: 520px;

  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 2;
}

.image-marquee .marquee-track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  will-change: transform;
}

.image-marquee .marquee-group {
  display: contents;
}

.image-marquee .card {
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  height: var(--card-h);
  position: relative;
  overflow: hidden;
  border-radius: var(--rounded-3xl);
  background: var(--sandstone-100);
}

.image-marquee .card-image {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.image-marquee .card-image img {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

@media screen and (max-width: 639px) {
  .image-marquee {
    --card-w: 220px;
    --card-h: 320px;
  }
}

/**************-------------------------------------**************/
/*                        TREATMENT HERO                         */
/**************-------------------------------------**************/
.treatment-hero {
  position: relative;
  width: 100%;

  overflow: hidden;
}

.treatment-hero .hero-bg-video {
  width: 100%;
  height: 100%;
}

.treatment-hero .hero-bg-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/**************-------------------------------------**************/
/*                        TREATMENT INTRO                        */
/**************-------------------------------------**************/
.treatment-intro {
  position: relative;
  overflow: hidden;
  padding-block: var(--spacing-6xl);
  text-align: center;
  color: var(--sandstone-100, #f9f5ee);
}

.treatment-intro .bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.treatment-intro .bg-image img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
}

.treatment-intro .wrapper {
  position: relative;
  z-index: 1;
  max-width: var(--container-lg);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
}

.treatment-intro .icon {
  display: block;
  width: 80px;
  height: 80px;
}
.treatment-intro .icon svg {
  width: 100%;
  height: 100%;
}

.treatment-intro .heading {
  color: var(--sandstone-500);
}

.treatment-intro .quote {
  font-size: var(--font-size-6xl);
  color: var(--sandstone-500);
  line-height: 1.2;
}

.treatment-intro .description {
  color: var(--sandstone-200);
  max-width: var(--container-sm);
  margin-inline: auto;
}

.treatment-intro .scroll-to {
  margin-top: var(--spacing-lg);
  margin-inline: auto;
  max-width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  color: var(--sandstone-400);
  font-size: var(--font-size-2xl);
  position: relative;
  z-index: 5;
}

.treatment-intro .scroll-to:hover {
  color: var(--sandstone-200);
}

@media screen and (max-width: 1023px) {
  .treatment-intro .scroll-to {
    font-size: var(--font-size-lg);
  }

  .treatment-intro .icon {
    width: 60px;
    height: 60px;
    margin-bottom: var(--spacing-md);
  }
}

@media screen and (max-width: 639px) {
  .treatment-intro .icon {
    width: 42px;
    height: 42px;
  }

  .treatment-intro .quote {
    font-size: var(--font-size-4xl);
  }
}

/**************-------------------------------------**************/
/*                        TREATMENT 3 CARDS                      */
/**************-------------------------------------**************/

.treatment-3cards {
  position: relative;
  overflow: hidden;
}

.treatment-3cards .bg-image {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.treatment-3cards .bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.treatment-3cards .container {
  padding-block: var(--spacing-6xl);
}

.treatment-3cards .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xl);
  max-width: var(--container-lg);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}
.treatment-3cards .heading {
  color: var(--evergreen-700);
  max-width: var(--container-md);
}

.treatment-3cards .cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-ml);
  width: 100%;
}

.treatment-3cards .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  border: 1px solid rgba(3, 43, 25, 0.4);
  border-radius: var(--rounded-xl);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.treatment-3cards .card-icon {
  width: 60px;
  height: 60px;
  color: var(--evergreen-700);
  margin-bottom: var(--spacing-ml);
}
.treatment-3cards .card-icon svg {
  width: 100%;
  height: 100%;
}

.treatment-3cards .card-title {
  font-size: var(--font-size-3xl);
  color: var(--evergreen-700);
  font-weight: 400;
  margin-bottom: var(--spacing-sm);
}

.treatment-3cards .card-text {
  font-weight: 300;
  font-size: var(--font-size-xl);
  color: var(--evergreen-400);
  line-height: 1.4;
}

.treatment-3cards .statement {
  font-size: var(--font-size-6xl);
  color: var(--evergreen-700);
  font-weight: 400;
  max-width: var(--container-md);
}

@media (max-width: 1279px) {
  .treatment-3cards .wrapper {
    max-width: 100%;
  }

  .treatment-3cards .card-icon {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 1023px) {
  .treatment-3cards .card-icon {
    width: 38px;
    height: 38px;
  }

  .treatment-3cards .cards {
    gap: var(--spacing-md);
  }

  .treatment-3cards .card-title {
    font-size: var(--font-size-2xl);
  }

  .treatment-3cards .card-text {
    font-size: var(--font-size-md);
  }
}

@media (max-width: 767px) {
  .treatment-3cards .cards {
    grid-template-columns: 1fr;
    max-width: 360px;
  }
}

/**************-------------------------------------**************/
/*                        TREATMENT 3 CARDS                      */
/**************-------------------------------------**************/
.treatment-intro-2 {
  position: relative;
  overflow: hidden;
}

.treatment-intro-2 .top,
.treatment-intro-2 .bottom {
  position: relative;
  z-index: 2;
}

.treatment-intro-2 .top .bg-image,
.treatment-intro-2 .bottom .bg-image {
  position: absolute;
  inset: 0;
}

.treatment-intro-2 .top .bg-image img,
.treatment-intro-2 .bottom .bg-image img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.treatment-intro-2 .middle {
  position: absolute;
  inset: 23% 0 0%;
  z-index: 1;
}

.treatment-intro-2 .middle .bg-image {
  width: 100%;
  height: 100%;
}

.treatment-intro-2 .middle .bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.treatment-intro-2 .top .wrapper {
  padding-top: 320px;
  padding-bottom: 400px;
  position: relative;
  z-index: 3;
  max-width: var(--container-md);
  margin-inline: auto;
}

.treatment-intro-2 .top .heading {
  color: var(--sandstone-500);
  margin-bottom: var(--spacing-xl);
}

.treatment-intro-2 .lead {
  width: 49%;
  color: var(--evergreen-100);
  font-weight: 300;
  font-size: var(--font-size-xl);
}

.treatment-intro-2 .lead-left {
  text-align: right;
}

.treatment-intro-2 .lead-right {
  margin-left: auto;
}

.treatment-intro-2 .bottom .wrapper {
  padding-top: 600px;
  padding-bottom: 20px;
  position: relative;
  z-index: 3;
  max-width: var(--container-md);
  margin-inline: auto;
}

.treatment-intro-2 .bottom .statement {
  font-size: var(--font-size-6xl);
  font-family: var(--heading-font);
  color: var(--sandstone-500);
  font-weight: 400;
  max-width: var(--container-md);
}

@media (max-width: 1023px) {
  .treatment-intro-2 .lead {
    width: 80%;
    color: var(--evergreen-100);
    font-weight: 300;
    font-size: var(--font-size-xl);
  }
  .treatment-intro-2 .lead-left {
    text-align: left;
    margin-bottom: var(--spacing-ml);
  }

  .treatment-intro-2 .lead-right {
    margin-left: 0;
  }
}

@media (max-width: 639px) {
  .treatment-intro-2 .lead {
    font-size: var(--font-size-md);
    width: 100%;
  }

  .treatment-intro-2 .top .wrapper {
    padding-top: 260px;
    padding-bottom: 260px;
  }

  .treatment-intro-2 .bottom .wrapper {
    padding-top: 400px;
    padding-bottom: 20px;
  }
}

/**************-------------------------------------**************/
/*                 MARQUEE WITH TRANSFORM SHIFT                  */
/**************-------------------------------------**************/
.marquee-with-transform-shift {
  position: relative;
  overflow: hidden;
}

.marquee-with-transform-shift .bg-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.marquee-with-transform-shift .top-shade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 300px;
  z-index: 2;
  width: 100%;
  pointer-events: none;
  user-select: none;
}

.marquee-with-transform-shift .bottom-shade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 300px;
  z-index: 2;
  width: 100%;
  transform: scaleY(-1);
  pointer-events: none;
  user-select: none;
}

.marquee-with-transform-shift .top-shade img,
.marquee-with-transform-shift .bottom-shade img {
  object-fit: fill;
  width: 100%;
  height: 100%;
}

/**************-------------------------------------**************/
/*                        TRANSFORM SHIFT                        */
/**************-------------------------------------**************/

.transform-shift {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  z-index: 1;
  padding-block: var(--spacing-10xl);
}

.transform-shift .container {
}

.transform-shift .wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--container-lg);
  margin-inline: auto;
}

.transform-shift .heading-wrapper {
  margin-bottom: var(--spacing-2xl);
}

.transform-shift .heading {
  color: var(--chasenut-500);
  margin-bottom: var(--spacing-md);
}
.transform-shift .description {
  font-weight: 300;
  color: var(--chasenut-400);
}

.transform-shift .shift-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto repeat(4, auto);
  width: 100%;
  max-width: var(--container-md);
  --line: rgb(183, 166, 161, 0.5);
}

.transform-shift .shift-col {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
  text-align: center;
}

.transform-shift .shift-col:first-child {
  position: relative;
}
.transform-shift .shift-col:first-child::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: -5%;
  width: 1px;
  height: 105%;
  background-color: var(--line);
}
.transform-shift .col-head {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-md);
  width: 100%;
}
.transform-shift .col-title {
  font-weight: 500;
  font-size: var(--font-size-3xl);
  color: var(--chasenut-500);
}
.transform-shift .col-chev {
  width: 50px;
  height: auto;
  color: var(--chasenut-500);
}
.transform-shift .col-chev svg {
  width: 100%;
  height: 100%;
}

.transform-shift .col-list {
  list-style: none;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 2 / -1;
  width: 100%;
}
.transform-shift .col-list li {
  font-weight: 400;
  font-size: var(--font-size-3xl);
  color: var(--chasenut-500);
  padding: var(--spacing-ml);
  display: flex;
  align-items: center;
  justify-content: center;
  /* border-bottom: 1px solid var(--line); */
  position: relative;
}

.transform-shift .col-list li:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 90%;
  height: 1px;
  background-color: var(--line);
  pointer-events: none;
  user-select: none;
}

.transform-shift .shift-col:first-child .col-list li:after {
  left: auto;
  right: 0;
}

.transform-shift .shift-col:first-child .col-head,
.transform-shift .shift-col:first-child .col-list li {
  padding-right: var(--spacing-lg);
  padding-left: 0;
}
.transform-shift .shift-col:last-child .col-head,
.transform-shift .shift-col:last-child .col-list li {
  padding-left: var(--spacing-lg);
  padding-right: 0;
}

@media (max-width: 1279px) {
  .transform-shift .col-title,
  .transform-shift .col-list li {
    font-size: var(--font-size-xl);
  }

  .transform-shift .col-chev {
    width: 32px;
  }

  .transform-shift .shift-compare {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .transform-shift .wrapper {
    max-width: 100%;
  }
}

@media (max-width: 639px) {
  .transform-shift .shift-compare {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .transform-shift .shift-col {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }
  .transform-shift .col-list {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }
  .transform-shift .shift-col:first-child {
    border-right: 0;
    margin-bottom: var(--spacing-3xl);
  }

  .transform-shift .shift-col:first-child::after {
    display: none;
  }

  .transform-shift .col-list li:after {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: 80%;
  }

  .transform-shift .col-title,
  .transform-shift .col-list li {
    font-size: var(--font-size-lg);
  }
  .transform-shift .col-head {
    padding: 0;
  }
}

/**************-------------------------------------**************/
/*                  TREATMENT TAB — RITUALS                      */
/**************-------------------------------------**************/
.treatment-tab {
  padding-block: var(--spacing-8xl);
}

.treatment-tab .heading-wrapper {
  display: grid;
  grid-template-columns: auto max-content;
  gap: var(--spacing-2xl);
  align-items: flex-end;
  margin-bottom: var(--spacing-2xl);
}

.treatment-tab .heading-wrapper .wrapper-left {
  max-width: var(--max-width-md);
}

.treatment-tab .heading-wrapper .heading {
  font-size: var(--font-size-7xl);
  color: var(--chasenut-500);
  margin-bottom: var(--spacing-md);
}
.treatment-tab .heading-wrapper .description {
  font-weight: 300;
  color: var(--chasenut-400);
}

.treatment-tab .btn-double-arrow {
  color: var(--chasenut-500);
  border-color: var(--chasenut-500);
}

.treatment-tab .btn-double-arrow:hover {
  background-color: transparent;
}

.treatment-tab .tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.treatment-tab .tab-list {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.treatment-tab .tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-sm) var(--spacing-ml);
  color: var(--chasenut-400);
  font-size: var(--font-size-md);
  white-space: nowrap;
  transition: color 0.3s ease;
}

.treatment-tab .tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 30px;
  background: var(--chasenut-300);
}

.treatment-tab .tab:first-child::before {
  display: none;
}

.treatment-tab .tab:hover {
  color: var(--chasenut-500);
}

.treatment-tab .tab.active {
  color: var(--chasenut-500);
}

.treatment-tab .tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: 0.3s;
  will-change: transform;
}

.treatment-tab .tab.active .tab-icon {
  transform: translateY(-2px) scale(1.08);
  transform-origin: bottom;
}

.treatment-tab .tab-icon img,
.treatment-tab .tab-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* sliding underline (positioned by JS) */
.treatment-tab .tab-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 0;
  background: var(--chasenut-400);
  transform: translateX(0);
  transition:
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.treatment-tab .tab-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sandstone-700);
  transition: color 0.3s ease;
}

.treatment-tab .tab-arrow:hover {
  color: var(--chasenut-400);
}

.treatment-tab .tab-arrow svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

/* ---------------- panels ---------------- */
.treatment-tab .panels {
  position: relative;
  /* stack every panel in one cell so the outgoing + incoming cards overlap
     during the cross-fade (like the packages slider's image stack) */
  display: grid;
}

.treatment-tab .panel {
  grid-area: 1 / 1;
  min-width: 0;
}

.treatment-tab .panel[hidden] {
  display: none;
}

/* ---------------- ritual card ---------------- */
.treatment-tab .ritual {
  position: relative;
  width: 100%;
  aspect-ratio: 1180 / 620;
  border-radius: var(--rounded-2xl);
  overflow: hidden;
  background: var(--sandstone-300);
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.treatment-tab .ritual.dragging {
  cursor: grabbing;
  transition: none;
}

.treatment-tab .ritual.expanded {
  cursor: default;
}

.treatment-tab .ritual-media {
  position: absolute;
  /* 20% wider than the card, overhanging the RIGHT edge so the image starts
     20% out of the container and has room to slide left on open without ever
     exposing the card background */
  top: 0;
  bottom: 0;
  left: 0;
  right: -20%;
  z-index: 0;
  /* eases left when the drawer opens (see .ritual.expanded rule below),
     timed to match the drawer's slide so they finish together */
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.treatment-tab .ritual-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* with the drawer open, glide the image left so its centre sits in the strip
   beside the panel. The media is 120% wide, so translating by 20% of the CARD
   (20% / 1.2 of the element) moves the right-hand overhang across to the left —
   the image stays covering the full card the whole time (no bg gap). */
.treatment-tab .ritual.expanded .ritual-media {
  transform: translateX(calc(-20% / 1.2));
}

/* shared chevron glyph */
.treatment-tab .chev {
  display: inline-flex;
  align-items: center;
  width: 12px;
  flex-shrink: 0;
}

.treatment-tab .chev svg {
  width: 100%;
  height: auto;
  fill: none;
}

/* title + wave (top-left) */
.treatment-tab .ritual-intro {
  position: absolute;
  z-index: 3;
  top: var(--spacing-xl);
  left: var(--spacing-xl);
  max-width: 40%;
}

.treatment-tab .ritual-title {
  font-family: var(--heading-font);
  font-size: var(--font-size-7xl);
  font-weight: 400;
  line-height: 1.1;
  color: var(--sandstone-400);
}

.treatment-tab .ritual-wave {
  display: block;
  width: 50px;
  margin-top: var(--spacing-sm);
  color: var(--sandstone-200);
}

.treatment-tab .ritual-wave svg {
  width: 100%;
  height: auto;
  fill: none;
}

/* description (bottom-left) */
.treatment-tab .ritual-desc {
  position: absolute;
  z-index: 3;
  bottom: var(--spacing-xl);
  left: var(--spacing-xl);
  max-width: 40%;
  font-size: var(--font-size-md);
  font-weight: 300;
  line-height: 1.4;
  color: var(--sandstone-300);
}

/* explore toggle (bottom-right when collapsed) */
.treatment-tab .ritual-toggle {
  position: absolute;
  z-index: 4;
  bottom: var(--spacing-xl);
  right: var(--spacing-xl);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  border: none;
  background: none;
  cursor: pointer;
  color: var(--sandstone-400);
  font-size: var(--font-size-lg);
  font-weight: 500;
  transition:
    opacity 0.4s ease,
    color 0.3s ease;
}

.treatment-tab .ritual-toggle:hover {
  color: var(--sandstone-200);
}

.treatment-tab .ritual-toggle .chev {
  transition: transform 0.35s ease;
}

.treatment-tab .ritual-toggle:hover .chev {
  transform: translateX(-4px);
}

/* the toggle is covered by the drawer once open, so fade it out */
.treatment-tab .ritual.expanded .ritual-toggle {
  opacity: 0;
  pointer-events: none;
}

/* ---------------- detail drawer ---------------- */
.treatment-tab .ritual-detail {
  position: absolute;
  z-index: 4;
  top: var(--spacing-ml);
  right: var(--spacing-ml);
  bottom: var(--spacing-ml);
  width: 50%;
  background: var(--sandstone-300);
  border-radius: var(--rounded-2xl);
  /* visible so the round handle can straddle the drawer's left edge */
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  transform: translateX(30%);
  transition:
    opacity 0.45s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.6s;
}

.treatment-tab .ritual.expanded .ritual-detail {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition:
    opacity 0s,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

.treatment-tab .ritual-detail .bg-icon {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.treatment-tab .ritual-detail .bg-icon svg {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 180px;
  height: 180px;
}

.treatment-tab .ritual-detail-inner {
  height: 100%;
  overflow-y: auto;
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-ms);
}

/* gentle staggered reveal of the contents on expand */
/* Reveal the content with a keyframe animation that only plays on open. On
   close there's no fade-out — the items stay visible and slide away with the
   panel (which is then hidden), so you never see an empty drawer. */
.treatment-tab .ritual.expanded .ritual-detail-inner > * {
  animation: ritual-rise 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

@keyframes ritual-rise {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

.treatment-tab .ritual.expanded .ritual-detail-inner > *:nth-child(1) {
  animation-delay: 0.18s;
}
.treatment-tab .ritual.expanded .ritual-detail-inner > *:nth-child(2) {
  animation-delay: 0.24s;
}
.treatment-tab .ritual.expanded .ritual-detail-inner > *:nth-child(3) {
  animation-delay: 0.3s;
}
.treatment-tab .ritual.expanded .ritual-detail-inner > *:nth-child(4) {
  animation-delay: 0.36s;
}
.treatment-tab .ritual.expanded .ritual-detail-inner > *:nth-child(5) {
  animation-delay: 0.42s;
}
.treatment-tab .ritual.expanded .ritual-detail-inner > *:nth-child(6) {
  animation-delay: 0.48s;
}
.treatment-tab .ritual.expanded .ritual-detail-inner > *:nth-child(7) {
  animation-delay: 0.54s;
}
.treatment-tab .ritual.expanded .ritual-detail-inner > *:nth-child(8) {
  animation-delay: 0.6s;
}

/* circular handle straddling the drawer's left edge */
.treatment-tab .ritual-handle {
  position: absolute;
  z-index: 4;
  top: 70%;
  left: 0;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--chasenut-500);
  border-radius: var(--rounded-full);
  background: var(--sandstone-500);
  cursor: pointer;
  color: var(--chasenut-500);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.treatment-tab .ritual-handle:hover {
  background: var(--sandstone-400);
  color: var(--sandstone-100);
}

.treatment-tab .ritual-handle .chev {
  width: 10px;
  transition: transform 0.3s ease;
}

.treatment-tab .ritual-handle:hover .chev {
  transform: translateX(2px);
}

/* headline */
.treatment-tab .ritual-headline {
  font-size: var(--font-size-3xl);
  font-weight: 600;
  line-height: 1.4;
  color: var(--chasenut-500);
}

/* duration + hairline divider */
.treatment-tab .ritual-duration {
  color: var(--chasenut-300);
  padding-bottom: var(--spacing-ms);
  border-bottom: 1px solid var(--chasenut-200);
}

.treatment-tab .ritual-duration span {
  color: var(--chasenut-400);
  font-weight: 500;
}

/* group subheads */
.treatment-tab .ritual-subhead {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--chasenut-500);
  margin-block: var(--spacing-sm) var(--spacing-md);
}

/* designed-for tags (flower glyph + text, no border) */
.treatment-tab .ritual-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-md);
}

.treatment-tab .ritual-tags li {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-md);
  color: var(--chasenut-300);
}

.treatment-tab .tag-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--chasenut-300);
}

.treatment-tab .tag-icon svg,
.treatment-tab .tag-icon img {
  width: 100%;
  height: 100%;
  fill: none;
}

/* experience options — three bordered cards */
.treatment-tab .ritual-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-ms);
}

.treatment-tab .option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  padding: var(--spacing-md) var(--spacing-sm);
  border: 1px solid rgba(111, 77, 66, 0.4);
  border-radius: var(--rounded-xl);
  font-size: var(--font-size-md);
  color: var(--chasenut-500);
  font-weight: 500;
}

.treatment-tab .option-card .plus {
  color: var(--chasenut-500);
}

/* outcomes */
.treatment-tab .ritual-outcome {
  color: var(--chasenut-300);
  line-height: 1.5;
}

/* actions — double-chevron text buttons */
.treatment-tab .ritual-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-lg);
  margin-top: auto;
}

.treatment-tab .ritual-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--chasenut-500);
  transition: color 0.3s ease;
}

.treatment-tab .ritual-btn .chev {
  transition: transform 0.3s ease;
}

.treatment-tab .ritual-btn:hover {
  color: var(--chasenut-400);
}

.treatment-tab .ritual-btn:hover .chev-left {
  transform: translateX(-3px);
}

.treatment-tab .ritual-btn:hover .chev-right {
  transform: translateX(3px);
}

@media screen and (max-width: 1279px) {
  .treatment-tab .ritual {
    aspect-ratio: 1180 / 700;
  }

  .treatment-tab .ritual-handle {
    width: 40px;
    height: 40px;
  }

  .treatment-tab .ritual-detail {
    width: 53%;
  }
}

@media screen and (max-width: 1023px) {
  .treatment-tab .ritual {
    aspect-ratio: 1180 / 860;
    max-height: 580px;
  }

  .treatment-tab .ritual-title {
    font-size: var(--font-size-6xl);
  }

  .treatment-tab .ritual-wave {
    width: 40px;
  }

  .treatment-tab .ritual-desc {
    font-size: var(--font-size-sm);
  }

  .treatment-tab .ritual-detail {
    width: 70%;
  }

  .treatment-tab .ritual-detail .bg-icon svg {
    width: 150px;
    height: 150px;
  }

  .treatment-tab .ritual-detail-inner {
    padding: var(--spacing-lg);
    gap: var(--spacing-md);
  }
  .treatment-tab .ritual-headline {
    font-size: var(--font-size-2xl);
  }
  .treatment-tab .ritual-subhead {
    font-size: var(--font-size-lg);
  }
  .treatment-tab .option-card {
    padding: var(--spacing-md) var(--spacing-sm);
    font-size: var(--font-size-sm);
  }
}

/* ===== MOBILE ===== */
@media screen and (max-width: 767px) {
  .treatment-tab .heading-wrapper {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: var(--spacing-ml);
  }

  .treatment-tab .heading-wrapper .wrapper-right {
    display: none;
  }

  .treatment-tab .tabs {
    gap: var(--spacing-lg);
  }

  .treatment-tab .tab-arrow {
    display: inline-flex;
  }

  .treatment-tab .tab-list {
    flex: 0 1 auto;
    position: relative;
    min-height: 2.2em;
    align-items: center;
    width: 160px;
  }

  .treatment-tab .tab {
    position: absolute;
    inset: 0;
    margin: auto;
    width: max-content;
    height: max-content;
    display: inline-flex;
    gap: 8px;
    justify-content: center;
    padding: var(--spacing-sm) 0;
    opacity: 0;
    visibility: hidden;
    filter: blur(3px);
    pointer-events: none;
    transition:
      opacity 0.5s ease,
      filter 0.5s ease;
  }

  .treatment-tab .tab::before {
    display: none;
  }

  .treatment-tab .tab.active {
    opacity: 1;
    visibility: visible;
    filter: blur(0px);
    pointer-events: auto;
  }

  .treatment-tab .tab.active .tab-icon {
    transform: translateY(0) scale(1);
    transform-origin: bottom;
  }

  .treatment-tab .tab-underline {
    display: none;
  }

  .treatment-tab .panels {
    touch-action: pan-y;
  }

  .treatment-tab .ritual {
    aspect-ratio: 3 / 5;
  }

  /* the drawer covers the whole card on small screens */
  .treatment-tab .ritual-detail {
    width: fit-content;
    inset: 0;
  }
  /* darken top (title) and bottom (description) for the portrait crop */
  .treatment-tab .ritual-media::after {
    background:
      linear-gradient(180deg, rgba(1, 14, 8, 0.5) 0%, rgba(1, 14, 8, 0) 30%),
      linear-gradient(0deg, rgba(1, 14, 8, 0.55) 0%, rgba(1, 14, 8, 0) 45%);
  }
  .treatment-tab .ritual-intro {
  }
  .treatment-tab .ritual-intro,
  .treatment-tab .ritual-desc {
    max-width: 80%;
    left: var(--spacing-lg);
  }

  .treatment-tab .ritual-desc {
    bottom: var(--spacing-4xl);
  }

  .treatment-tab .ritual-detail-inner {
    padding: var(--spacing-ml);
    gap: var(--spacing-sm);
  }

  .treatment-tab .ritual-headline {
    max-width: calc(100% - 32px);
    font-size: var(--font-size-xl);
  }

  .treatment-tab .ritual-detail .bg-icon svg {
    width: 120px;
    height: 120px;
  }

  .treatment-tab .ritual-duration {
    font-size: var(--font-size-sm);
  }

  .treatment-tab .ritual-subhead {
    font-size: var(--font-size-md);
  }

  .treatment-tab .ritual-toggle,
  .treatment-tab .ritual-tags li,
  .treatment-tab .ritual-outcome {
    font-size: var(--font-size-sm);
  }

  .treatment-tab .ritual-outcome {
    margin-bottom: var(--spacing-md);
  }

  .treatment-tab .tag-icon {
    width: 12px;
    height: 12px;
  }

  .treatment-tab .chev {
    width: 10px;
  }
  /* drawer is full-width here, so move the handle inside to the top-right */
  .treatment-tab .ritual-handle {
    top: var(--spacing-md);
    left: auto;
    right: var(--spacing-md);
    transform: none;
    width: 28px;
    height: 28px;
  }

  .treatment-tab .ritual-handle .chev {
    width: 8px;
  }
  .treatment-tab .ritual-options {
    /* grid-template-columns: 1fr; */
    gap: var(--spacing-sm);
  }

  .treatment-tab .option-card {
  }

  .treatment-tab .ritual-btn {
    font-size: var(--font-size-sm);
  }

  .treatment-tab .ritual-btn .chev {
    width: 8px;
  }
}

/**************-------------------------------------**************/
/*                     EXPERIENCE JOURNEY                        */
/**************-------------------------------------**************/
.treatment-experience {
  --dot: 22px;
  --gap: clamp(16px, 2vw, 26px);
  --content-w: clamp(138px, 15.5vw, 210px);

  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.treatment-experience .container,
.treatment-experience .wrapper {
  position: relative;
  z-index: 2;
}

.treatment-experience .wrapper {
  /* max-width: var(--container-lg); */
  margin-inline: auto;
}

/* ---- editorial heading, top-right ---- */
.treatment-experience .heading-wrapper {
  text-align: right;
  margin-left: auto;
  max-width: var(--max-width-lg);
}

.treatment-experience .heading-wrapper .heading {
  color: var(--evergreen-600);
}

/* ---- journey / curve ---- */
.treatment-experience .journey {
  position: relative;
  padding-block: 200px;
}

.treatment-experience .journey-viz {
  position: relative;
  width: 100%;
  margin-inline: auto;
  aspect-ratio: 1155 / 292;
}

.treatment-experience .journey-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.treatment-experience .journey-fill {
  fill: var(--evergreen-200);
  filter: drop-shadow(0 0 6px rgba(155, 181, 170, 0.4));
}

.treatment-experience .journey-guide {
  fill: none;
  stroke: none;
}

.treatment-experience .journey-rail {
  display: none;
}

.treatment-experience .journey-points {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.treatment-experience .point {
  position: absolute;
}

.treatment-experience .point-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--dot);
  height: var(--dot);
  margin-left: calc(var(--dot) / -2);
  margin-top: calc(var(--dot) / -2);
  border-radius: var(--rounded-full);
  background: var(--sandstone-100);
  border: 5px solid var(--evergreen-700);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

.treatment-experience .point-dot::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: var(--rounded-full);
  background: var(--sandstone-500);
  transition: transform 0.4s ease;
}

/* micro hover interaction */
.treatment-experience .point-dot:hover {
  box-shadow: 0 0 0 7px rgba(55, 108, 85, 0.12);
}
.treatment-experience .point-dot:hover::after {
  transform: scale(1.2);
}

.treatment-experience .point-content {
  position: absolute;
  left: 0;
  width: var(--content-w);
  text-align: center;
}

.treatment-experience .point.is-above .point-content {
  bottom: 0;
  transform: translate(-50%, calc((var(--dot) / 2 + var(--gap)) * -1));
}

.treatment-experience .point.is-below .point-content {
  top: 0;
  transform: translate(-50%, calc(var(--dot) / 2 + var(--gap)));
}

.treatment-experience
  .journey-points
  .point.is-above:nth-child(3)
  .point-content {
  transform: translate(0, calc((var(--dot) / 2 + var(--gap)) * -0.7));
}

.treatment-experience .point-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  /* margin-bottom: var(--spacing-xs); */
  color: var(--evergreen-600);
  animation: floating 2.6s ease-in-out infinite alternate;
}

@keyframes floating {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-5px);
  }
}

.treatment-experience .point-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
}

.treatment-experience .point-title {
  font-size: var(--font-size-3xl);
  font-weight: 400;
  color: var(--evergreen-600);
  margin-bottom: var(--spacing-sm);
  animation: floating 2.6s ease-in-out infinite alternate;
}

.treatment-experience .point-desc {
  font-size: var(--font-size-md);
  font-weight: 300;
  line-height: 1.4;
  color: var(--evergreen-400);
  animation: floating 2.6s ease-in-out infinite alternate;
}

.treatment-experience .point-icon:nth-child(1),
.treatment-experience .point-title:nth-child(1),
.treatment-experience .point-desc:nth-child(1) {
  animation-delay: 0s;
}

.treatment-experience .point-icon:nth-child(2),
.treatment-experience .point-title:nth-child(2),
.treatment-experience .point-desc:nth-child(2) {
  animation-delay: 0.15s;
}

.treatment-experience .point-icon:nth-child(3),
.treatment-experience .point-title:nth-child(3),
.treatment-experience .point-desc:nth-child(3) {
  animation-delay: 0.3s;
}

.treatment-experience .point-icon:nth-child(4),
.treatment-experience .point-title:nth-child(4),
.treatment-experience .point-desc:nth-child(4) {
  animation-delay: 0.45s;
}

.treatment-experience .point-icon:nth-child(5),
.treatment-experience .point-title:nth-child(5),
.treatment-experience .point-desc:nth-child(5) {
  animation-delay: 0.6s;
}

.treatment-experience .point-icon:nth-child(6),
.treatment-experience .point-title:nth-child(6),
.treatment-experience .point-desc:nth-child(6) {
  animation-delay: 0.75s;
}

@media screen and (max-width: 1279px) {
  .treatment-experience .wrapper {
    max-width: 100%;
  }
}

/* ===== TABLET ===== */
@media screen and (max-width: 1023px) {
  .treatment-experience .point-title {
    font-size: var(--font-size-xl);
  }
  .treatment-experience .point-icon {
    width: 28px;
    height: 28px;
  }

  .treatment-experience .point-desc {
    font-size: var(--font-size-sm);
  }

  .treatment-experience
    .journey-points
    .point.is-above:nth-child(3)
    .point-content {
    transform: translate(0, calc((var(--dot) / 2 + var(--gap)) * -1));
  }
}

/* ===== MOBILE — vertical storytelling timeline ===== */
@media screen and (max-width: 767px) {
  .treatment-experience .heading-wrapper .heading {
    text-align: left;
  }
  .treatment-experience .journey {
    padding-block: var(--spacing-2xl);
  }

  .treatment-experience .journey-viz {
    aspect-ratio: auto;
    max-width: 460px;
  }

  .treatment-experience .journey-path {
    display: none;
  }

  .treatment-experience .journey-rail {
    display: block;
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 13px;
    width: 2px;
    background: var(--evergreen-200);
    transform: scaleY(0);
    transform-origin: top center;
  }

  .treatment-experience .journey-points {
    position: static;
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 9vw, 3.75rem);
  }

  /* reset the absolute on-curve placement into a stacked row */
  .treatment-experience .point {
    position: relative;
    left: auto !important;
    top: auto !important;
    display: grid;
    grid-template-columns: 28px 1fr;
    column-gap: clamp(1rem, 5vw, 1.5rem);
    align-items: start;
  }

  .treatment-experience .point-dot {
    position: relative;
    margin: 4px 0 0;
    justify-self: center;
  }

  .treatment-experience .point-content,
  .treatment-experience .point.is-above .point-content,
  .treatment-experience .point.is-below .point-content {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: auto;
    text-align: left;
    transform: none;
  }

  .treatment-experience .point-icon {
    margin-bottom: var(--spacing-xs);
  }

  .treatment-experience
    .journey-points
    .point.is-above:nth-child(3)
    .point-content {
    transform: inherit;
  }
}

/**************-------------------------------------**************/
/*                    TESTIMONIAL EXPERIENCE                     */
/**************-------------------------------------**************/
.treatment-testimonials {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--spacing-8xl);
}

.treatment-testimonials .container,
.treatment-testimonials .wrapper {
  position: relative;
  z-index: 2;
}

.treatment-testimonials .wrapper {
  max-width: 1360px;
  margin-inline: auto;
}

.treatment-testimonials .heading-wrapper {
  display: grid;
  grid-template-columns: auto max-content;
  gap: var(--spacing-2xl);
  align-items: flex-end;
  margin-bottom: var(--spacing-2xl);
}

.treatment-testimonials .heading-wrapper .wrapper-left {
  max-width: var(--max-width-md);
}

.treatment-testimonials .heading-wrapper .heading {
  font-size: var(--font-size-7xl);
  color: var(--evergreen-700);
}

.treatment-testimonials .action .btn-single-arrow {
  color: var(--evergreen-700);
  border-color: var(--evergreen-700);
}

.treatment-testimonials .mobile-action {
  display: none;
}

/* ---------------- stage grid ---------------- */
.treatment-testimonials .tst-stage {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(300px, 460px)
    minmax(0, 1fr)
    minmax(0, 1fr);
  /* content-driven rows: a long testimonial grows row 1 and pushes everything
     down instead of overlapping the previews. The content min-height (below)
     keeps the card a consistent size across similar-length quotes. */
  grid-template-rows: auto auto;
  grid-template-areas:
    ".     active content content"
    "prevL active prevR1 prevR2";
  gap: var(--spacing-ml);
  align-items: end;
}

/* ---------------- large active card ---------------- */
.treatment-testimonials .tst-active {
  grid-area: active;
  align-self: stretch;
  position: relative;
  border-radius: var(--rounded-2xl);
  overflow: hidden;
  background: var(--sandstone-100);
  cursor: pointer;
  /* height comes from the stage (clamp) so the card stays aligned with the
     previews at every width and never changes size on content swap */
}

.treatment-testimonials .tst-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* stacked so the outgoing + incoming videos can cross-fade (opacity only) */
.treatment-testimonials .tst-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform, opacity;
}

/* glassmorphism play button + breathing pulse */
.treatment-testimonials .tst-play {
  position: absolute;
  z-index: 3;
  top: var(--spacing-xl);
  left: var(--spacing-ml);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--rounded-full);
  border: none;
  cursor: pointer;
  animation: tst-breathe 3.2s ease-in-out infinite;
  transition:
    opacity 0.4s ease,
    background-color 0.4s ease;
  background: transparent;
  color: var(--sandstone-300);
}

.treatment-testimonials .tst-play svg {
  width: 100%;
  height: 100%;
}

/* while the video plays, hide the play affordance (click the card to pause) */
.treatment-testimonials .tst-active.is-playing .tst-play {
  opacity: 0;
  pointer-events: none;
  animation: none;
}

@keyframes tst-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);
  }
}

/* ---------------- content ---------------- */
.treatment-testimonials .tst-content {
  grid-area: content;
  align-self: start;
  position: relative;
  padding-top: var(--spacing-lg);
  max-width: 100%;
  /* reserve space so short/similar quotes keep the card the same size; a
     longer quote simply grows past this and pushes the previews down */
  min-height: clamp(200px, 24vw, 340px);
}

.treatment-testimonials .tst-quote-mark {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: clamp(120px, 13vw, 220px);
  color: var(--evergreen-200);
  opacity: 0.45;
}

.treatment-testimonials .tst-quote-mark svg {
  width: 100%;
  height: auto;
}

.treatment-testimonials .tst-copy {
  position: relative;
  z-index: 1;
  max-width: var(--max-width-xs);
}

.treatment-testimonials .tst-quote {
  font-size: var(--font-size-3xl);
  font-weight: 400;
  line-height: 1.3;
  color: var(--evergreen-700);
  margin-bottom: var(--spacing-md);
}

.treatment-testimonials .tst-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--evergreen-300);
  font-size: var(--font-size-md);
  margin-bottom: var(--spacing-md);
}

.treatment-testimonials .tst-meta-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.treatment-testimonials .tst-meta-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--evergreen-700);
}

.treatment-testimonials .tst-name {
  font-size: var(--font-size-3xl);
  font-weight: 500;
  color: var(--evergreen-700);
}

/* ---------------- preview cards ---------------- */
/* cards flow directly into the stage grid so 1 sits left, 2 sit right */
.treatment-testimonials .tst-previews {
  display: contents;
}

.treatment-testimonials .tst-preview {
  position: relative;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--rounded-2xl);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* the transform transition is enabled only after the GSAP entrance finishes,
   so the two never fight over the card's transform */
.treatment-testimonials .tst-preview.is-ready {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.treatment-testimonials .tst-preview:nth-child(1) {
  grid-area: prevL;
  align-self: end;
}
.treatment-testimonials .tst-preview:nth-child(2) {
  grid-area: prevR1;
  align-self: end;
}
.treatment-testimonials .tst-preview:nth-child(3) {
  grid-area: prevR2;
  align-self: end;
}

.treatment-testimonials .tst-preview-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.treatment-testimonials .tst-preview-media :is(img, video) {
  /* stacked so the outgoing + incoming previews can cross-fade cleanly */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.5s ease;
}

.treatment-testimonials .tst-preview-play {
  position: absolute;
  z-index: 2;
  top: var(--spacing-md);
  left: var(--spacing-md);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--rounded-full);
  /* background: rgba(255, 255, 255, 0.16); */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: #fff;
}

.treatment-testimonials .tst-preview-play svg {
  width: 100%;
  height: 100%;
  color: var(--sandstone-300);
}

/* hover micro-interaction: float + zoom + glow */
.treatment-testimonials .tst-preview:hover {
  transform: translateY(-4px);
}

.treatment-testimonials .tst-preview:hover .tst-preview-media :is(img, video) {
  /* transform: scale(1.06); */
}

/* brief active pulse when a card swaps into the big card (JS toggles) */
/* .treatment-testimonials .tst-preview.is-swapping {
  animation: tst-pulse 0.6s ease;
}

@keyframes tst-pulse {
  50% {
    box-shadow: 0 0 0 4px rgba(55, 108, 85, 0.4);
  }
} */

@media screen and (max-width: 1279px) {
  .treatment-testimonials .tst-quote,
  .treatment-testimonials .tst-name {
    font-size: var(--font-size-2xl);
  }
}

@media screen and (max-width: 1023px) {
  .treatment-testimonials .tst-stage {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(260px, 1fr)
      minmax(0, 1fr)
      minmax(0, 1fr);
  }

  .treatment-testimonials .tst-quote,
  .treatment-testimonials .tst-name {
    font-size: var(--font-size-xl);
  }
}

/* ===== MOBILE — stacked, swipeable previews ===== */
@media screen and (max-width: 767px) {
  .treatment-testimonials .heading-wrapper {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: var(--spacing-ml);
  }

  .treatment-testimonials .heading-wrapper .wrapper-right {
    display: none;
  }

  .treatment-testimonials .mobile-action {
    display: block;
    margin-top: var(--spacing-2xl);
  }

  .treatment-testimonials .tst-stage {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 6vw, 2.25rem);
    height: auto;
  }

  .treatment-testimonials .tst-active {
    order: 1;
    min-height: 0;
    aspect-ratio: 3 / 4;
    width: 100%;
  }

  .treatment-testimonials .tst-play {
    width: 36px;
    height: 36px;
  }

  .treatment-testimonials .tst-content {
    order: 2;
    padding-top: 0;
    max-width: none;
    min-height: 0;
  }

  .treatment-testimonials .tst-quote-mark {
    width: 90px;
    top: -0.8em;
  }

  /* previews become a horizontal snap-scroll row */
  .treatment-testimonials .tst-previews {
    order: 3;
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    /* scroll-snap-type: x mandatory; */
    /* margin-inline: calc(var(--spacing-md) * -1);
    padding-inline: var(--spacing-md); */
    /* scrollbar-width: none; */
    width: 100%;
  }

  .treatment-testimonials .tst-previews::-webkit-scrollbar {
    display: none;
  }

  .treatment-testimonials .tst-preview {
    grid-area: auto;
    flex: 0 0 20%;

    /* scroll-snap-align: start; */
  }
}

@media screen and (max-width: 479px) {
  .treatment-testimonials .tst-preview {
    /* flex: 0 0 100%; */
  }
}

/**************-------------------------------------**************/
/*                  WELLNESS JOURNEY (pinned)                    */
/**************-------------------------------------**************/

.treatment-journey {
  position: relative;
  height: 300vh;
}

.treatment-journey .tj-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* editorial headings, top + bottom */
.treatment-journey .tj-title {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  text-align: center;
  padding-inline: var(--spacing-lg);
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: var(--font-size-7xl);
  line-height: 1;
  color: #000;
  will-change: transform, opacity, filter;
}

.treatment-journey .tj-top {
  top: 25%;
}

.treatment-journey .tj-bottom {
  bottom: 24%;
}

.treatment-journey .tj-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* --p is the reveal progress (0 = small centered card, 1 = full panel).
     Driving all four insets off one value via calc() keeps the expansion
     perfectly symmetric — GSAP animating the inset() string directly reveals
     the edges unevenly. */
  --p: 0;
  /* clip-path: inset(
    calc(35% * (1 - var(--p))) calc(40% * (1 - var(--p)))
      calc(35% * (1 - var(--p))) calc(40% * (1 - var(--p))) round
      calc(20px - 4px * var(--p))
  ); */

  clip-path: inset(
    calc(35% * (1 - var(--p))) calc(38% * (1 - var(--p)))
      calc(35% * (1 - var(--p))) calc(38% * (1 - var(--p))) round
      calc(20px * (1 - var(--p)))
  );
  will-change: clip-path;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.treatment-journey .tj-media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  transform: scale(calc(0.82 + (0.28 * var(--p))));
  transform-origin: center center;
  will-change: transform;
}

/* overlay content (revealed once expanded) */
.treatment-journey .tj-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xl);
  padding: var(--spacing-2xl);
  text-align: center;
  height: 100%;
}

.treatment-journey .tj-copy {
  max-width: var(--container-md);
  font-size: var(--font-size-5xl);
  font-weight: 400;
  line-height: 1.4;
  color: var(--sandstone-100);
  will-change: transform, opacity, filter;
}

.treatment-journey .btn-double-arrow {
  color: var(--sandstone-100);
  border-color: var(--sandstone-100);
}

/* ===== MOBILE — edge-to-edge expansion ===== */
@media screen and (max-width: 767px) {
  .treatment-journey {
    height: 210vh;
  }

  .treatment-journey .tj-top {
    top: 25%;
  }

  .treatment-journey .tj-bottom {
    bottom: 25%;
  }

  .treatment-journey .tj-media {
    clip-path: inset(
      calc(38% * (1 - var(--p))) calc(28% * (1 - var(--p)))
        calc(38% * (1 - var(--p))) calc(28% * (1 - var(--p))) round
        calc(24px * (1 - var(--p)))
    );
  }

  .treatment-journey .tj-media-img {
    transform: scale(calc(0.9 + (0.1 * var(--p))));
  }

  .treatment-journey .tj-content {
    padding: var(--spacing-lg);
    gap: var(--spacing-2xl);
  }

  .treatment-journey .tj-copy {
    font-size: var(--font-size-3xl);
  }
}

/*-----------------------------------------------------------*/
/* THE SCIENCE BEHIND THE EXPERIENCE                          */
/* Sticky ripple + editorial heading; cards rise through the  */
/* focal zone one-by-one. Scroll length is auto-sized by JS   */
/* from the card count (--cards), so any number of cards work.*/
/*-----------------------------------------------------------*/
/**************-------------------------------------**************/
/*                        TREATMENT SCIENCE                      */
/**************-------------------------------------**************/
.treatment-science {
  --cards: 3; /* JS overwrites with the real count */
  --science-scroll: 150svh; /* scroll distance budget per card  */
  --ring-base: clamp(200px, 28vw, 420px);
  --ring-gap: clamp(78px, 8.5vw, 120px);
  --ring-color: 147, 121, 113;

  position: relative;
  background: var(--sandstone-100);
  /* one sticky viewport + a travel budget for every card */
  height: calc(100svh + var(--cards) * var(--science-scroll));
  padding-block: var(--spacing-12xl);
}

.treatment-science .science-inner {
  position: sticky;
  top: 0;
  height: 100svh;
  /* overflow: hidden; */
  isolation: isolate; /* keep the z-index layering self-contained */
  background: var(--sandstone-100);
}

/* ---- ambient bloom + concentric ripple rings ---- */
.treatment-science .science-atmos {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* .treatment-science .science-bloom {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(420px, 60vw, 900px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(255, 252, 245, 0.75),
    rgba(255, 252, 245, 0) 62%
  );
  animation: science-bloom-breathe 11s ease-in-out infinite;
  will-change: transform, opacity;
} */

.treatment-science .science-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--ring-base) + var(--i) * var(--ring-gap));
  aspect-ratio: 1;
  border: 1px solid rgba(var(--ring-color), calc(0.28 - var(--i) * 0.035));
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  /* layered timing offsets → a slow, breathing ripple */
  animation: science-ring-breathe 9s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.4s);
  will-change: transform, opacity;
}

/* ---- sticky editorial heading ---- */
.treatment-science .science-heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  margin: 0;
  width: max-content;
  max-width: 600px;
  text-align: center;
  font-family: var(--heading-font);
  font-weight: 400;
  line-height: 1.2;
  color: var(--chasenut-500);
  font-size: var(--font-size-7xl);
}

/* ---- floating card layer (all cards share one centred cell) ---- */
.treatment-science .science-cards {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  /* nudge the focal zone just below the heading */
  transform: translateY(4vh);
  pointer-events: none;
}

.treatment-science .science-card {
  grid-area: 1 / 1; /* stack every card in the same spot */
  width: min(92vw, clamp(460px, 38vw, 600px));
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  border-radius: var(--rounded-2xl);
  background: var(--sandstone-300);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  /* box-shadow: var(--shadow-md); */
  will-change: transform, opacity, filter;
}

.treatment-science .science-card-inner {
  position: relative;
  padding: var(--spacing-lg);
  /* gentle idle float (composes with the scrubbed transform above) */
  /* animation: science-card-float 7s ease-in-out infinite; */
}

.treatment-science .science-card-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 140px;
  height: 140px;
  color: var(--chasenut-300);
}
.treatment-science .science-card-icon svg,
.treatment-science .science-card-icon img {
  width: 100%;
  height: 100%;
}

.treatment-science .science-card-title {
  margin-bottom: var(--spacing-sm);
  padding-right: clamp(44px, 5vw, 60px);
  font-family: var(--body-font);
  font-weight: 600;
  font-size: var(--font-size-3xl);
  color: var(--chasenut-500);
}

.treatment-science .science-card-lead {
  margin: 0;
  font-family: var(--body-font);
  color: var(--chasenut-300);
}

.treatment-science .science-card-block {
  margin-top: clamp(16px, 1.6vw, 22px);
  padding-top: clamp(14px, 1.4vw, 20px);
}

.treatment-science .science-card-block:first-of-type {
  border-top: 1px solid var(--chasenut-200);
}

.treatment-science .science-card-block h4 {
  margin: 0 0 0.5em;
  font-family: var(--body-font);
  font-weight: 600;
  font-size: var(--font-size-xl);
  color: var(--chasenut-500);
}

.treatment-science .science-card-block p {
  margin: 0;
  font-family: var(--body-font);
  color: var(--chasenut-300);
}

.treatment-science .science-card-cta {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--spacing-lg);
}

.treatment-science .science-card-cta .btn-single-arrow {
  color: var(--chasenut-500);
  border: 0;
  padding: 0;
}

.treatment-science .science-card-cta .btn-single-arrow .btn-arrow {
  height: 18px;
}

/* ---- bottom shade (single-colour background + soft foot) ---- */
/* .treatment-science .science-shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(89, 82, 69, 0.2),
    rgba(89, 82, 69, 0)
  );
} */

@keyframes science-ring-breathe {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.55;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.045);
    opacity: 1;
  }
}

@keyframes science-bloom-breathe {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 0.8;
  }
}

@keyframes science-card-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

/* ---- tablet ---- */
@media screen and (max-width: 1023px) {
  .treatment-science {
    --science-scroll: 64svh;
  }

  .treatment-science .science-heading {
    max-width: 420px;
  }
}

/* ---- mobile ---- */
@media screen and (max-width: 767px) {
  .treatment-science {
    --science-scroll: 56svh;
    --ring-base: clamp(160px, 46vw, 260px);
    --ring-gap: clamp(60px, 15vw, 96px);
  }
  .treatment-science .science-cards {
    transform: translateY(3vh);
  }
  .treatment-science .science-card {
    width: min(90vw, 420px);
  }
  .treatment-science .science-heading {
    max-width: 300px;
  }
}

@media screen and (max-width: 639px) {
  .treatment-science .science-inner {
    overflow: hidden;
  }
}

/* ---- accessibility: no motion → readable stacked layout, no pin ---- */
@media (prefers-reduced-motion: reduce) {
  .treatment-science {
    height: auto;
  }
  .treatment-science .science-inner {
    position: static;
    height: auto;
    overflow: visible;
    padding: 12vh 0;
  }
  .treatment-science .science-atmos {
    display: none;
  }
  .treatment-science .science-heading {
    position: static;
    transform: none;
    margin: 0 auto;
  }
  .treatment-science .science-cards {
    position: static;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5vh;
    margin-top: 7vh;
  }
  .treatment-science .science-card {
    position: static;
  }
  .treatment-science .science-card,
  .treatment-science .science-card-inner {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    visibility: visible !important;
    animation: none !important;
  }
}

/**************-------------------------------------**************/
/*                    RETURNING TO YOUR CENTER                   */
/**************-------------------------------------**************/
.return-center {
  --rc-ink: var(--chasenut-500);
  position: relative;
  background: var(--sandstone-100);
  height: 600svh;
}

.return-center .rc-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.return-center .rc-inner {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--sandstone-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* sticky background image — covers the stage, anchored bottom, and bleeds
   20svh past the top & bottom of the screen (clipped by .rc-inner) */
.return-center .rc-bg-img {
  position: absolute;
  z-index: 0;
  top: -400px;
  left: 0;
  width: 100%;
  height: calc(100svh + 400px); /* +20svh top, +20svh bottom */
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
}

/* top shade — positioned to the SECTION (not the sticky stage), so it sits
   over the bg and scrolls up off the screen during the lead-in before the
   frame animation starts. z-index is above the pinned stage. */
.return-center .rc-bg-shade {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 40svh; /* top band; tweak to the artwork / lead length */
  object-fit: fill;
  object-position: center bottom;
  pointer-events: none;
}

.return-center .rc-frame {
  position: relative;
  /* sit above the background layers; isolate keeps the inner z-order clean */
  z-index: 2;
  isolation: isolate;
  flex: none;
}
/* landscape → 4:3 (wider than tall), sized to fit with a small margin */
@media (orientation: landscape) {
  .return-center .rc-frame {
    aspect-ratio: 4 / 3;
    /* width is the limiter unless the screen is short → then cap by height */
    width: min(94vw, calc(94svh * 4 / 3));
    height: auto;
  }
}
/* portrait / mobile → 3:4 (taller than wide) */
@media (orientation: portrait) {
  .return-center .rc-frame {
    aspect-ratio: 3 / 4;
    /* height is the limiter unless the screen is narrow → then cap by width */
    height: min(94svh, calc(94vw * 4 / 3));
    width: auto;
  }
}

.return-center .rc-leaves {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.return-center .rc-leaf {
  position: absolute;
  width: 152px;
  color: var(--rc-ink);
  opacity: 0;
  will-change: transform, opacity;
}
.return-center .rc-leaf svg {
  display: block;
  width: 100%;
  height: auto;
}

.return-center .rc-leaf--tr svg {
  transform: scaleX(-1);
}
.return-center .rc-leaf--bl svg {
  transform: scaleY(-1);
}
.return-center .rc-leaf--br svg {
  transform: scale(-1, -1);
}
.return-center .rc-leaf--tl {
  top: 0;
  left: 0;
}
.return-center .rc-leaf--tr {
  top: 0;
  right: 0;
}
.return-center .rc-leaf--bl {
  bottom: 0;
  left: 0;
}
.return-center .rc-leaf--br {
  bottom: 0;
  right: 0;
}

.return-center .rc-ring {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 49px;
  height: 49px;
  z-index: 2;
  color: var(--rc-ink);
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}
.return-center .rc-ring svg {
  display: block;
  width: 100%;
  height: 100%;
  /* animation: rc-ring-pulse 6s ease-in-out infinite; */
}

/* ---- centred text stack (states 1–3 share one cell) ---- */
.return-center .rc-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 0 5vw;
  pointer-events: none;
}
.return-center .rc-stage > * {
  grid-area: 1 / 1;
  margin: 0;
  text-align: center;
  will-change: transform, opacity, filter;
}

.return-center .rc-heading {
  font-family: var(--heading-font);
  font-weight: 400;
  line-height: 1.08;
  color: var(--rc-ink);
  font-size: var(--font-size-7xl);
  max-width: var(--max-width-sm);
}
/* JS splits the heading into these; each reveals word-by-word (GSAP-driven) */
.return-center .rc-heading .rc-word {
  display: inline-block;
  will-change: transform, opacity, filter;
}

.return-center .rc-copy {
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  max-width: 800px;
  opacity: 0;
  visibility: hidden;
}
.return-center .rc-copy p {
  margin: 0;
  font-family: var(--body-font);
  font-size: var(--font-size-xl);
  color: var(--chasenut-500);
}

.return-center .rc-message {
  max-width: 800px;
  font-weight: 400;
  font-size: var(--font-size-5xl);
  line-height: 1.28;
  color: var(--rc-ink);
  opacity: 0;
  visibility: hidden;
}

/* ---- feature grid (state 4) ---- */
.return-center .rc-features {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  /* % of the square frame → consistent inset on every aspect ratio */
  padding: 140px;
  pointer-events: none;
}

.return-center .rc-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55em;
  max-width: 300px;
  pointer-events: auto;
  /* hidden until the timeline resolves state 4 (JS animates each in) */
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity, filter;
}
/* pull each block toward the centre so the leaves frame the corners */
.return-center .rc-feature--tl {
  align-self: start;
  justify-self: start;
}
.return-center .rc-feature--tr {
  align-self: start;
  justify-self: end;
}
.return-center .rc-feature--bl {
  align-self: end;
  justify-self: start;
}
.return-center .rc-feature--br {
  align-self: end;
  justify-self: end;
}

/* icon sits to the LEFT of the title on one row (matches the design) */
.return-center .rc-feature-head {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.return-center .rc-feature-icon {
  flex: none;
  width: 40px;
  height: 40px;
  color: var(--rc-ink);
}
.return-center .rc-feature-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.return-center .rc-feature-head h3 {
  margin: 0;
  font-weight: 400;
  font-size: var(--font-size-3xl);
  color: var(--rc-ink);
}
.return-center .rc-feature ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}
.return-center .rc-feature li {
  font-family: var(--body-font);
  font-size: var(--font-size-md);
  color: var(--chasenut-400);
}
/* inline flower marker so it centres with the (wrapped) text */
.return-center .rc-feature li::before {
  content: "\274A\00A0"; /* ❊ */
  color: var(--chasenut-400);
  font-size: var(--font-size-md);
}

@keyframes rc-ring-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@media screen and (max-width: 1679px) {
  .return-center .rc-leaf {
    width: 117px;
  }

  .return-center .rc-ring {
    width: 38px;
    height: 38px;
  }

  .return-center .rc-features {
    padding: 100px;
  }

  .return-center .rc-stage {
    padding: 0 3vw;
  }
}

/* ---- tablet / mobile ---- */
@media screen and (max-width: 1023px) {
  .return-center {
    height: 620svh;
  }

  .return-center .rc-leaf {
    width: 121px;
  }

  .return-center .rc-features {
    padding: 100px;
  }

  .return-center .rc-feature {
    max-width: 260px;
  }
}

@media screen and (max-width: 767px) {
  .return-center {
    height: 560svh;
  }

  .return-center .rc-copy,
  .return-center .rc-message {
    max-width: 90%;
  }

  .return-center .rc-copy p {
    font-size: var(--font-size-md);
  }
  .return-center .rc-message {
    font-size: var(--font-size-xl);
  }

  .return-center .rc-leaf {
    width: 60px;
  }

  .return-center .rc-ring {
    width: 24px;
    height: 24px;
  }

  .return-center .rc-features {
    padding: 64px;
  }

  .return-center .rc-feature {
    max-width: 220px;
  }

  .return-center .rc-feature-icon {
    width: 28px;
    height: 28px;
  }

  .return-center .rc-feature-head h3 {
    font-size: var(--font-size-xl);
  }
}

@media screen and (max-width: 639px) {
  .return-center .rc-features {
    padding: 60px 0px 72px 0px;
    column-gap: 20px;
  }

  .return-center .rc-feature-icon {
    width: 16px;
    height: 16px;
  }

  .return-center .rc-feature {
    gap: 5px;
  }

  .return-center .rc-feature-head h3 {
    font-size: var(--font-size-sm);
  }

  .return-center .rc-feature li,
  .return-center .rc-feature li::before {
    font-size: var(--font-size-xs);
  }
}

/* ---- static fallback: reduced motion / no GSAP (JS adds .rc-static) ---- */
.return-center.rc-static {
  height: auto;
}
.return-center.rc-static .rc-inner {
  position: static;
  display: block;
  height: auto;
  overflow: visible;
  padding: 14vh 6vw;
}
/* un-square the frame so content stacks in normal flow */
.return-center.rc-static .rc-frame {
  position: static;
  width: auto;
  height: auto;
}
.return-center.rc-static .rc-leaves,
.return-center.rc-static .rc-ring,
.return-center.rc-static .rc-bg-img,
.return-center.rc-static .rc-bg-shade,
.return-center.rc-static .rc-inner::before {
  display: none;
}
.return-center.rc-static .rc-stage {
  position: static;
  display: block;
}
.return-center.rc-static .rc-stage > * {
  margin: 0 auto 6vh;
}
.return-center.rc-static .rc-features {
  position: static;
  padding: 0;
  margin-top: 4vh;
  gap: 5vh 8vw;
}
.return-center.rc-static
  :is(.rc-heading, .rc-copy, .rc-message, .rc-features, .rc-feature) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}
.return-center.rc-static
  :is(.rc-feature--tl, .rc-feature--tr, .rc-feature--bl, .rc-feature--br) {
  align-self: center;
  justify-self: center;
}