@charset "UTF-8";
/* CODESTITCH STYLES, RESET, HEADER/NAVIGATION AND FOOTER */
/*-- -------------------------- -->
<---        Core Styles         -->
<--- -------------------------- -*/
/* CodeStitch Root and Helpers */
@media only screen and (min-width: 0rem) {
  :root {
    /* ————— Primary Brand Colours ————— */
    --primary: #14251f;
    --primary-light: #b69b76;
    --primary-alt: #5a3f4e;
    /* ————— Blend Accent Colours (for future blend variants) ————— */
    --flavor-yellow: #b69b76;
    --flavor-magenta: #5a3f4e;
    --flavor-green: #14251f;
    --flavor-golden: #b69b76;
    --flavor-pink: #5a3f4e;
    --flavor-brown: #1b1f2a;
    /* ————— Secondary Brand Colours ————— */
    --secondary: #1b1f2a;
    --secondary-light: #94a3b8;
    /* ————— Neutrals ————— */
    --white: #ffffff;
    --grey-light: #f6f2ea;
    --grey: #a0a4ab;
    --grey-dark: #1b1f2a;
    /* ————— Dark-mode Helpers ————— */
    --dark: #1b1f2a;
    --dark-alt: #000000;
    --medium: #14251f;
    /* ————— Utility Colours ————— */
    --success: #14251f;
    --warning: #b69b76;
    --danger: #5a3f4e;
    /* ————— Legacy Compatibility ————— */
    --primaryLight: #b69b76;
    --headerColor: #14251f;
    --bodyTextColor: #1b1f2a;
    --bodyTextColorWhite: #ffffff;
    /* ————— Layout (fixed nav) ————— */
    --headerHeight: 5.5rem;
    /* ————— Typography ————— */
    --font-heading: "Cormorant Garamond", "Georgia", serif;
    --font-body: "Roboto", "Helvetica Neue", sans-serif;
    /* 17px - 20px */
    --topperFontSize: clamp(1.0625rem, 1.6vw, 1.25rem);
    /* 35px - 53px */
    --headerFontSize: clamp(2.1875rem, 3.9vw, 3.3125rem);
    --bodyFontSize: 1.25rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
  }
  .cs-topper {
    display: block;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--font-heading);
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    font-weight: 900;
    color: var(--primary-light);
    text-align: inherit;
  }
  .cs-title {
    position: relative;
    margin: 0 0 1rem 0;
    max-width: 43.75rem;
    font-family: var(--font-heading);
    font-size: var(--headerFontSize);
    line-height: 1.2em;
    font-weight: 900;
    color: var(--headerColor);
    text-align: inherit;
  }
  .cs-subtitle {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    line-height: 1.3em;
    font-weight: 400;
    color: var(--bodyTextColor);
    margin: 0 0 1rem 0;
    text-align: inherit;
  }
  .cs-text {
    margin: 0;
    max-width: 40.625rem;
    width: 100%;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    color: var(--bodyTextColor);
    text-align: inherit;
  }
  .cs-button-solid {
    z-index: 1;
    position: relative;
    display: inline-block;
    background: var(--primary-light);
    width: auto;
    padding: 0 1.875rem;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.25rem;
    line-height: 3.125em;
    font-weight: bold;
    color: var(--bodyTextColorWhite);
    text-align: center;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 16px rgba(20, 37, 31, 0.2), 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transform: translateY(0) scale(1);
    overflow: hidden;
  }
  .cs-button-solid:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
    z-index: 1;
  }
  .cs-button-solid:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.05) 100%);
    border-radius: 8px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .cs-button-solid:hover, .cs-button-solid:focus {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(20, 37, 31, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 12px rgba(182, 155, 118, 0.25);
    background: linear-gradient(135deg, #9a8462 0%, var(--primaryLight) 50%, #8b7355 100%);
    color: var(--bodyTextColorWhite);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.15);
  }
  .cs-button-solid:hover:before, .cs-button-solid:focus:before {
    left: 100%;
  }
  .cs-button-solid:hover:after, .cs-button-solid:focus:after {
    opacity: 1;
  }
  .cs-button-solid:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 2px 8px rgba(20, 37, 31, 0.2), 0 1px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(182, 155, 118, 0.3), 0 0 8px rgba(182, 155, 118, 0.2);
    transition: all 0.1s ease;
  }
  .cs-hide-on-mobile {
    display: none;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  .cs-hide-on-mobile {
    display: block;
  }
  .cs-hide-on-desktop {
    display: none;
  }
}
/* Fonts and general styles - do NOT set overflow on body (critical.css keeps scroll working) */
@media only screen and (min-width: 0rem) {
  html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 100%;
    color: var(--bodyTextColor);
  }
  body {
    margin: 0;
    padding: 0;
    /* no overflow here - critical.css sets overflow: visible !important so scroll never locks */
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 100%;
    color: var(--bodyTextColor);
  }
  *,
  *:before,
  *:after {
    margin: 0;
    box-sizing: border-box;
    padding: 0;
  }
  body {
    transition: background-color 0.3s;
  }
  .container {
    position: relative;
    margin: auto;
    width: 92%;
  }
  /* Nana Betty Dark Blue Textured Background */
  .nanabetty-textured-bg {
    background-color: var(--primary);
    background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.03) 0px, transparent 1px, transparent 2px, rgba(0, 0, 0, 0.02) 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.02) 0px, transparent 1px, transparent 3px, rgba(0, 0, 0, 0.03) 4px);
    position: relative;
  }
  .nanabetty-textured-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.02) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.01) 0%, transparent 50%);
    pointer-events: none;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 900;
    color: var(--headerColor);
  }
  :where(h1) {
    font-size: var(--headerFontSize);
    margin-block: 0.67em;
  }
  p,
  li,
  a {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.5em;
  }
  p,
  li {
    color: #353535;
  }
  a:hover,
  button:hover {
    cursor: pointer;
  }
  .skip {
    z-index: -1111111;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
  .skip:focus {
    z-index: 999999;
    opacity: 1;
    background-color: var(--primary);
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  /* roboto-regular - latin */
  @font-face {
    font-style: normal;
    font-family: "Roboto";
    font-weight: 400;
    font-display: swap;
    src: local(""), url("/assets/fonts/roboto-v29-latin-regular.woff2") format("woff2"), url("/assets/fonts/roboto-v29-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* roboto-700 - latin */
  @font-face {
    font-style: normal;
    font-family: "Roboto";
    font-weight: 700;
    font-display: swap;
    src: local(""), url("/assets/fonts/roboto-v29-latin-700.woff2") format("woff2"), url("/assets/fonts/roboto-v29-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* roboto-900 - latin */
  @font-face {
    font-style: normal;
    font-family: "Roboto";
    font-weight: 900;
    font-display: swap;
    src: local(""), url("/assets/fonts/roboto-v29-latin-900.woff2") format("woff2"), url("/assets/fonts/roboto-v29-latin-900.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* Nana Betty Brand Fonts */
  /* Alfons Display Black - Primary Typeface (Headings) */
  @font-face {
    font-style: normal;
    font-family: "Alfons Display";
    font-weight: 900;
    font-display: swap;
    src: local(""), url("/assets/fonts/alfons-display-black.woff2") format("woff2"), url("/assets/fonts/alfons-display-black.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* Alfons Display Regular - Secondary Typeface (Secondary Headings) */
  @font-face {
    font-style: normal;
    font-family: "Alfons Display";
    font-weight: 400;
    font-display: swap;
    src: local(""), url("/assets/fonts/alfons-display-regular.woff2") format("woff2"), url("/assets/fonts/alfons-display-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* Fat Frank Regular - Secondary Typeface (Body Text) */
  @font-face {
    font-style: normal;
    font-family: "Fat Frank";
    font-weight: 400;
    font-display: swap;
    src: local(""), url("/assets/fonts/fat-frank-regular.woff2") format("woff2"), url("/assets/fonts/fat-frank-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
}
/* Reset Margins */
@media only screen and (min-width: 1024px) {
  body,
  html {
    margin: 0;
    padding: 0;
  }
}
/* Scale full website with the viewport width */
@media only screen and (min-width: 3000px) {
  body,
  html {
    font-size: 0.55vw;
  }
}
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* overflow already set in critical.css; do not override to avoid breaking scroll after load */
}

body {
  margin: 0;
  padding: 0;
  /* overflow: visible enforced in critical.css so scroll works after root.css loads */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Main content starts below fixed header */
#main {
  padding-top: var(--headerHeight);
  scroll-margin-top: var(--headerHeight);
}

*, *:before, *:after {
  /* prevents padding from affecting height and width */
  box-sizing: border-box;
}

.cs-topper {
  font-family: var(--font-heading);
  font-size: var(--topperFontSize);
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: inherit;
  letter-spacing: 0.1em;
  font-weight: 900;
  color: var(--primary-light);
  margin-bottom: 0.25rem;
  display: block;
}

.cs-title {
  font-family: var(--font-heading);
  font-size: var(--headerFontSize);
  font-weight: 900;
  line-height: 1.2em;
  text-align: inherit;
  max-width: 43.75rem;
  margin: 0 0 1rem 0;
  color: var(--headerColor);
  position: relative;
}

.cs-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--bodyFontSize);
  line-height: 1.5em;
  text-align: inherit;
  width: 100%;
  max-width: 40.625rem;
  margin: 0;
  color: var(--bodyTextColor);
}

/*-- -------------------------- -->
<---      Dark Mode Toggle      -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  body.dark-mode #dark-mode-toggle .cs-sun {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  body.dark-mode #dark-mode-toggle .cs-moon {
    opacity: 0;
    transform: translate(-50%, -150%);
    fill: #fff;
  }
  #dark-mode-toggle {
    z-index: 1000;
    position: absolute;
    top: 0.625rem;
    right: 4.375rem;
    display: block;
    border: none;
    background: transparent;
    height: 3rem;
    width: 3rem;
    overflow: hidden;
    padding: 0;
  }
  #dark-mode-toggle img,
  #dark-mode-toggle svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 1.25rem;
    width: 1.25rem;
    pointer-events: none;
  }
  #dark-mode-toggle .cs-moon {
    z-index: 2;
    transition: transform 0.3s, opacity 0.3s;
  }
  #dark-mode-toggle .cs-sun {
    z-index: 1;
    opacity: 0;
    transform: translate(-50%, 100%);
    transition: transform 0.3s, opacity 0.3s;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #dark-mode-toggle {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    margin: 0;
  }
  #dark-mode-toggle:hover {
    cursor: pointer;
  }
}
/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  body.cs-open {
    overflow: hidden;
  }
  #cs-navigation {
    z-index: 10000;
    position: fixed;
    background-color: #fff;
    width: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: var(--font-body);
    font-weight: 400;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-bottom: 4px solid var(--primary);
  }
  #cs-navigation .cs-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
  }
  #cs-navigation .cs-logo {
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 0 0;
    height: 2.5rem;
    max-width: 9.125rem;
    width: 40%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0;
  }
  #cs-navigation .cs-logo img {
    height: 100%;
    width: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
    /* places the image to the left edge of the parent */
    object-position: left;
  }
  #cs-navigation .cs-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 0.25rem;
    margin: 0 0 0 auto;
    background-color: transparent;
    height: clamp(2.75rem, 6vw, 3rem);
    /* 44px - 48px */
    width: clamp(2.75rem, 6vw, 3rem);
  }
  #cs-navigation .cs-active .cs-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #cs-navigation .cs-active .cs-line2 {
    top: 50%;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    transform-origin: center;
  }
  #cs-navigation .cs-active .cs-line3 {
    bottom: 100%;
    opacity: 0;
  }
  #cs-navigation .cs-box {
    position: relative;
    /* 14px - 16px */
    height: clamp(0.875rem, 1.5vw, 1rem);
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
  }
  #cs-navigation .cs-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
    background-color: #1a1a1a;
    height: 2px;
    width: 100%;
  }
  #cs-navigation .cs-line1 {
    top: 0;
    transition: transform 0.5s, top 0.3s, left 0.3s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: center;
  }
  #cs-navigation .cs-line2 {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: top 0.3s, left 0.3s, transform 0.5s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }
  #cs-navigation .cs-line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }
  #cs-navigation .cs-ul-wrapper {
    z-index: -1;
    position: absolute;
    top: 100%;
    left: auto;
    right: 0;
    opacity: 0;
    visibility: hidden;
    transform: scaleX(0);
    background-color: #fff;
    height: 100vh;
    overflow: hidden;
    transition: transform 0.4s, opacity 0.3s;
    box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
    transform-origin: top right;
  }
  #cs-navigation .cs-ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    margin: 0;
    height: 65vh;
    min-width: 40%;
    width: auto;
    overflow: scroll;
    /* 28px - 40px */
    padding: 3rem clamp(1.75rem, 3vw, 2.5rem) 2rem 4.375rem;
    gap: 1.25rem;
  }
  #cs-navigation .cs-li {
    opacity: 0;
    /* transition from these values */
    transform: translateX(-2.5rem);
    margin-right: 0;
    width: 100%;
    list-style: none;
    transition: transform 0.6s, opacity 0.9s;
    text-align: right;
  }
  #cs-navigation .cs-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li-link {
    position: relative;
    display: inline-block;
    margin: 0;
    text-decoration: none;
    /* 18px - 27px */
    font-size: clamp(1.25rem, 2.5vw, 1.8125rem);
    line-height: 1.2em;
    color: var(--headerColor);
    font-weight: 500;
    transition: color 0.3s ease;
  }
  #cs-navigation .cs-li-link:hover {
    color: var(--primary-light);
  }
  #cs-navigation .cs-li-link:before {
    position: absolute;
    bottom: -0.125rem;
    left: 0;
    /* active state underline */
    content: "";
    opacity: 1;
    display: none;
    background: var(--primary-light);
    height: 2px;
    width: 100%;
    border-radius: 2px;
  }
  #cs-navigation .cs-li-link.cs-active {
    color: var(--primary-light);
    font-weight: 600;
  }
  #cs-navigation .cs-li-link.cs-active:before {
    display: block;
  }
  #cs-navigation .cs-li-link[href="/papa-jim/"] {
    overflow: visible;
    position: relative;
  }
  #cs-navigation .cs-li-link[href="/papa-jim/"]::after {
    content: "Papa Jim!";
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) scale(0.85) translateY(8px);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    font-size: clamp(1.25rem, 2.5vw, 1.8125rem);
    font-weight: 700;
    color: var(--primary-light);
    background: rgba(255, 255, 255, 0.98);
    padding: 0.5rem 0.875rem;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(20, 37, 31, 0.2), 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1000;
    border: 2px solid var(--primary-light);
    letter-spacing: 0.02em;
  }
  #cs-navigation .cs-li-link[href="/papa-jim/"]:hover, #cs-navigation .cs-li-link[href="/papa-jim/"]:active, #cs-navigation .cs-li-link[href="/papa-jim/"]:focus {
    color: transparent;
  }
  #cs-navigation .cs-li-link[href="/papa-jim/"]:hover::after, #cs-navigation .cs-li-link[href="/papa-jim/"]:active::after, #cs-navigation .cs-li-link[href="/papa-jim/"]:focus::after {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
  }
  #cs-navigation .cs-button-solid {
    display: none;
  }
  #cs-navigation:before {
    z-index: -11;
    position: absolute;
    top: 100%;
    right: 0;
    /* black blurred overlay */
    content: "";
    opacity: 0;
    display: block;
    background: rgba(0, 0, 0, 0.6);
    height: 100vh;
    width: 0%;
    transition: width 0.5s, opacity 0.3s;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
    visibility: visible;
    transform: scaleX(1);
    transition-delay: 0.2s;
  }
  #cs-navigation.cs-active .cs-li {
    opacity: 1;
    transform: translateX(0);
  }
  #cs-navigation.cs-active:before {
    opacity: 1;
    width: 100%;
  }
}
/* Dark Mode */
@media only screen and (max-width: 63.9375rem) {
  body.dark-mode #cs-navigation {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-logo {
    /* makes it white */
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #cs-navigation .cs-line {
    background-color: #fff;
  }
  body.dark-mode #cs-navigation .cs-ul-wrapper {
    background-color: var(--medium);
  }
  body.dark-mode #cs-navigation .cs-li-link {
    color: var(--bodyTextColorWhite);
  }
}
/*-- -------------------------- -->
<---     Navigation Dropdown    -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  #cs-navigation .cs-dropdown {
    position: relative;
    color: var(--bodyTextColorWhite);
  }
  #cs-navigation .cs-dropdown .cs-li-link {
    position: relative;
    transition: opacity 0.3s;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    margin: 0.75rem 0 0 0;
    height: auto;
    padding: 1.5rem;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-link {
    opacity: 1;
  }
  #cs-navigation .cs-dropdown-button {
    border: none;
    background-color: transparent;
    font-family: inherit;
    font-size: clamp(1.25rem, 2.5vw, 1.8125rem);
    cursor: pointer;
    appearance: none;
  }
  #cs-navigation .cs-drop-icon {
    position: absolute;
    top: 50%;
    right: -1.25rem;
    transform: translateY(-50%);
    height: auto;
    width: 0.9375rem;
  }
  #cs-navigation .cs-drop-ul {
    visibility: hidden;
    opacity: 0;
    transform: scale(0);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    margin: 0;
    background-color: var(--primary);
    height: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 1.5rem 0 1.5rem;
    transition: padding 0.3s, margin 0.3s, height 0.3s, opacity 0.3s, transform 0.3s, visibility 0.3s;
    gap: 0.75rem;
    transform-origin: top right;
  }
  #cs-navigation .cs-drop-li {
    list-style: none;
    text-align: inherit;
  }
  #cs-navigation .cs-li-link.cs-drop-link {
    /* 16px - 20px */
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    color: #fff;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-navigation .cs-dropdown {
    position: relative;
  }
  #cs-navigation .cs-dropdown.cs-active, #cs-navigation .cs-dropdown:hover {
    cursor: pointer;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-ul, #cs-navigation .cs-dropdown:hover .cs-drop-ul {
    visibility: visible;
    opacity: 1;
    transform: scaleY(1);
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-li, #cs-navigation .cs-dropdown:hover .cs-drop-li {
    opacity: 1;
    transform: translateY(0);
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-li.cs-dropdown-nested .cs-drop-nested-container, #cs-navigation .cs-dropdown:hover .cs-drop-li.cs-dropdown-nested .cs-drop-nested-container {
    visibility: hidden !important;
    opacity: 0 !important;
    transform: scaleY(0) !important;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-li.cs-dropdown-nested .cs-drop-nested-container .cs-drop-li-nested, #cs-navigation .cs-dropdown:hover .cs-drop-li.cs-dropdown-nested .cs-drop-nested-container .cs-drop-li-nested {
    opacity: 0 !important;
    transform: translateY(-10px) !important;
  }
  #cs-navigation .cs-dropdown-button {
    border: none;
    background-color: transparent;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    appearance: none;
  }
  #cs-navigation .cs-drop-icon {
    display: inline-block;
    height: auto;
    width: 0.9375rem;
  }
  #cs-navigation .cs-drop-ul {
    z-index: -100;
    /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the cs-drop-li so they don't have weird scattered animations */
    position: absolute;
    top: 100%;
    visibility: hidden;
    opacity: 0;
    transform: scaleY(0);
    border-bottom: 5px solid var(--primary);
    margin: 0;
    background-color: #fff;
    min-width: 12.5rem;
    overflow: hidden;
    padding: 0;
    transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 10px 16px;
    transform-origin: top;
  }
  #cs-navigation .cs-drop-li {
    opacity: 0;
    transform: translateY(-0.625rem);
    display: block;
    height: auto;
    width: 100%;
    list-style: none;
    text-decoration: none;
    font-size: 1.25rem;
    color: var(--bodyTextColor);
    transition: opacity 0.6s, transform 0.6s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(10) {
    transition-delay: 0.5s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(11) {
    transition-delay: 0.55s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(12) {
    transition-delay: 0.6s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(13) {
    transition-delay: 0.65s;
  }
  #cs-navigation .cs-li-link.cs-drop-link {
    display: block;
    width: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem;
    white-space: nowrap;
    text-decoration: none;
    font-size: 1.25rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    transition: color 0.3s, background-color 0.3s;
  }
  #cs-navigation .cs-li-link.cs-drop-link:hover {
    background-color: #f7f7f7;
  }
  #cs-navigation .cs-li-link.cs-drop-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
  }
  #cs-navigation .cs-li-link.cs-drop-link:before {
    display: none;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested {
    position: relative;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested:hover .cs-drop-nested-container {
    visibility: hidden !important;
    opacity: 0 !important;
    transform: scaleY(0) !important;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested:hover .cs-drop-nested-container .cs-drop-li-nested {
    opacity: 0 !important;
    transform: translateY(-10px) !important;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-dropdown-button-nested {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.75rem;
    font-family: inherit;
    font-size: 1.25rem;
    text-decoration: none;
    color: var(--bodyTextColor);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-dropdown-button-nested:hover {
    background-color: #f7f7f7;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-dropdown-button-nested:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-drop-icon-nested {
    font-size: 0.5rem;
    transition: transform 0.3s;
    flex-shrink: 0;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-drop-nested-container {
    position: absolute;
    left: 100%;
    top: 0;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: scaleY(0) !important;
    background-color: #fff;
    min-width: 42.5rem;
    border: none;
    box-shadow: rgba(149, 157, 165, 0.3) 0px 10px 16px;
    padding: 1rem;
    margin: 0;
    list-style: none;
    z-index: 1000;
    transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
    border-radius: 6px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.25rem;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-drop-column {
    min-width: 0;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-drop-column-title {
    font-size: 1.015625rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-drop-ul-nested {
    padding: 0;
    margin: 0;
    list-style: none;
    transform-origin: top left;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem 0;
    padding: 0.75rem 0.5rem;
    width: 30rem;
    border-radius: 0.375rem;
  }
}
@media only screen and (min-width: 64rem) and (max-width: 48rem) {
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-drop-ul-nested {
    grid-template-columns: 1fr;
    width: 13.75rem;
    padding: 0.5rem;
    gap: 0.125rem 0;
  }
}
@media only screen and (min-width: 64rem) {
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-drop-ul-nested .cs-drop-li-nested {
    opacity: 0;
    transform: translateY(-10px);
    list-style: none;
    transition: opacity 0.6s, transform 0.6s;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-drop-ul-nested .cs-drop-li-nested:nth-of-type(3n+1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-drop-ul-nested .cs-drop-li-nested:nth-of-type(3n+2) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-drop-ul-nested .cs-drop-li-nested:nth-of-type(3n+3) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-drop-ul-nested .cs-drop-link-nested {
    display: block;
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 1.09375rem;
    color: var(--bodyTextColor);
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex: 1;
    border-radius: 0.25rem;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-drop-ul-nested .cs-drop-link-nested:hover {
    background-color: #f7f7f7;
    transform: translateX(2px);
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-drop-ul-nested .cs-drop-link-nested:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-drop-ul-nested .cs-drop-link-nested.cs-active-nested {
    background-color: var(--primary);
    color: #fff;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-drop-ul-nested .cs-drop-link-nested.view-all-platforms {
    font-weight: 600;
    background-color: var(--primary);
    color: #fff;
    text-align: center;
    margin-top: 0.5rem;
    font-size: 1.015625rem;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-drop-ul-nested .cs-drop-link-nested.view-all-platforms:hover {
    background-color: var(--primaryDark);
    transform: translateX(2px);
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-dropdown-button-nested:hover + .cs-drop-nested-container {
    visibility: visible !important;
    opacity: 1 !important;
    transform: scaleY(1) !important;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-dropdown-button-nested:hover + .cs-drop-nested-container .cs-drop-li-nested {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-drop-nested-container:hover {
    visibility: visible !important;
    opacity: 1 !important;
    transform: scaleY(1) !important;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-drop-nested-container:hover .cs-drop-li-nested {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested .cs-dropdown-button-nested:hover .cs-drop-icon-nested {
    transform: rotate(90deg);
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested.cs-active .cs-drop-nested-container {
    visibility: visible;
    opacity: 1;
    transform: scaleY(1);
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested.cs-active .cs-drop-nested-container .cs-drop-li-nested {
    opacity: 1;
    transform: translateY(0);
  }
  #cs-navigation .cs-li-link .cs-dropdown-nested.cs-active .cs-drop-icon-nested {
    transform: rotate(90deg);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #cs-navigation .cs-drop-ul {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-li-link.cs-drop-link:hover {
    background-color: var(--medium);
  }
  body.dark-mode #cs-navigation .cs-li-link.cs-drop-link-nested:hover {
    background-color: var(--medium);
  }
  body.dark-mode #cs-navigation .cs-li-link.cs-drop-link-nested.cs-active-nested {
    background-color: var(--primary);
    color: #fff;
  }
  body.dark-mode #cs-navigation .cs-dropdown-nested .cs-dropdown-button-nested:hover {
    background-color: var(--medium);
  }
  body.dark-mode #cs-navigation .cs-dropdown-nested .cs-drop-nested-container {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-dropdown-nested .cs-drop-nested-container .cs-drop-column-title {
    color: var(--primaryLight);
    border-bottom-color: rgba(255, 255, 255, 0.2);
  }
  body.dark-mode #cs-navigation .cs-dropdown-nested .cs-drop-nested-container .cs-drop-li-nested {
    display: flex;
  }
  body.dark-mode #cs-navigation .cs-dropdown-nested .cs-drop-nested-container .cs-drop-link-nested:hover {
    background-color: var(--medium);
  }
  body.dark-mode #cs-navigation .cs-drop-icon {
    /* turns it white */
    filter: grayscale(1) brightness(1000%);
  }
}
/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/
/* Desktop Navigation Button Styling */
@media only screen and (min-width: 64rem) {
  #cs-navigation .cs-button-solid {
    font-size: 1.09375rem;
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
    text-decoration: none;
    min-width: 8rem;
    margin: 0;
    box-sizing: border-box;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, var(--primaryLight) 0%, #2a8fd8 50%, var(--primaryLight) 100%);
    color: var(--bodyTextColorWhite);
    border-radius: 0.5rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 4px 16px rgba(25, 121, 191, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(0) scale(1);
    overflow: hidden;
  }
  #cs-navigation .cs-button-solid:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
    z-index: 1;
  }
  #cs-navigation .cs-button-solid:hover:before {
    left: 100%;
  }
  #cs-navigation .cs-button-solid:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.05) 100%);
    border-radius: 0.5rem;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  #cs-navigation .cs-button-solid:hover:after {
    opacity: 1;
  }
  #cs-navigation .cs-button-solid:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(25, 121, 191, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 12px rgba(25, 121, 191, 0.2);
    background: linear-gradient(135deg, #2a8fd8 0%, var(--primaryLight) 30%, #2a8fd8 70%, var(--primaryLight) 100%);
    color: var(--bodyTextColorWhite);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
  }
  #cs-navigation .cs-button-solid:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 2px 8px rgba(25, 121, 191, 0.3), 0 1px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(25, 121, 191, 0.4), 0 0 8px rgba(25, 121, 191, 0.3);
    transition: all 0.1s ease;
  }
  #cs-navigation .cs-button-solid:focus {
    outline: none;
    box-shadow: 0 4px 16px rgba(25, 121, 191, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(25, 121, 191, 0.4), 0 0 12px rgba(25, 121, 191, 0.2);
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-navigation {
    z-index: 10000;
    position: fixed;
    background-color: #fff;
    width: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0 1rem;
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
    font-family: var(--font-body);
    font-weight: 400;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-bottom: 4px solid var(--primary);
  }
  #cs-navigation .cs-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    max-width: 80rem;
    width: 100%;
    gap: 1rem;
    position: relative;
  }
  #cs-navigation .cs-nav {
    flex: 0 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
  }
  #cs-navigation .cs-toggle {
    display: none;
  }
  #cs-navigation .cs-logo {
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 1rem;
    margin: 0;
    height: 4.0625rem;
    max-width: 17.5rem;
    width: auto;
    flex: 0 0 auto;
    padding: 0;
  }
  #cs-navigation .cs-logo img {
    height: 100%;
    width: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    width: 100%;
    padding: 0;
    /* 16px - 24px - tighter spacing */
    gap: clamp(1rem, 1.5vw, 1.5rem);
    flex-wrap: nowrap;
  }
  #cs-navigation .cs-li {
    padding: 2rem 0;
    list-style: none;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #cs-navigation .cs-li-link {
    position: relative;
    display: block;
    margin: 0;
    text-decoration: none;
    /* 17px - 19px - slightly smaller */
    font-size: clamp(1.0625rem, 0.9vw, 1.1875rem);
    line-height: 1.5em;
    color: var(--bodyTextColor);
    font-weight: 500;
    transition: color 0.3s ease;
    white-space: nowrap;
  }
  #cs-navigation .cs-li-link:hover {
    color: var(--primary-light);
  }
  #cs-navigation .cs-li-link:hover:before {
    width: 100%;
    background: var(--primary-light);
  }
  #cs-navigation .cs-li-link:before {
    position: absolute;
    bottom: 0rem;
    left: 0;
    /* active state underline */
    content: "";
    opacity: 1;
    display: block;
    background: var(--primary-light);
    height: 3px;
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 2px;
  }
  #cs-navigation .cs-li-link.cs-active {
    color: var(--primary-light);
    font-weight: 600;
  }
  #cs-navigation .cs-li-link.cs-active:before {
    width: 100%;
    background: var(--primary-light);
  }
  #cs-navigation .cs-li-link[href="/papa-jim/"] {
    overflow: visible;
    position: relative;
  }
  #cs-navigation .cs-li-link[href="/papa-jim/"]::after {
    content: "Papa Jim!";
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.8) translateY(5px);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    font-size: clamp(1.0625rem, 0.9vw, 1.1875rem);
    font-weight: 700;
    color: var(--primary-light);
    background: rgba(255, 255, 255, 0.98);
    padding: 0.375rem 0.625rem;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(20, 37, 31, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1000;
    border: 2px solid var(--primary-light);
    letter-spacing: 0.02em;
  }
  #cs-navigation .cs-li-link[href="/papa-jim/"]:hover {
    color: transparent;
  }
  #cs-navigation .cs-li-link[href="/papa-jim/"]:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
  }
  #cs-navigation .cs-nav-button {
    display: inline-block;
    background: var(--primary-light);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    font-size: clamp(1.1125rem, 1vw, 1.25rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(20, 37, 31, 0.15);
    white-space: nowrap;
  }
  #cs-navigation .cs-nav-button:hover {
    background: #8b7355;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(20, 37, 31, 0.22);
  }
  #cs-navigation .cs-nav-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(20, 37, 31, 0.18);
  }
}
/* Dark Mode */
@media only screen and (min-width: 64rem) {
  body.dark-mode #cs-navigation {
    background-color: var(--dark);
  }
  body.dark-mode #cs-navigation .cs-logo {
    /* makes it turn white */
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #cs-navigation .cs-li-link {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #cs-navigation .cs-li-link:before {
    background-color: var(--primaryLight);
  }
  body.dark-mode #cs-navigation .cs-li-link:hover {
    color: var(--primaryLight);
  }
  body.dark-mode #cs-navigation .cs-nav-button {
    background: var(--primaryLight);
  }
  body.dark-mode #cs-navigation .cs-nav-button:hover {
    background: #8b7355;
  }
}
/*-- -------------------------- -->
<---   Interior Page Header     -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
  #int-hero {
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 30vh;
    padding-top: 3.125rem;
  }
  #int-hero picture {
    z-index: -2;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  #int-hero picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #int-hero h1 {
    position: relative;
    margin: 0 auto;
    margin-top: 4.375rem;
    margin-bottom: 1.875rem;
    max-width: 31.25rem;
    width: 96%;
    font-size: 2.6666666667rem;
    color: #fff;
    text-align: center;
  }
  #int-hero p {
    display: block;
    margin: auto;
    margin-bottom: 1.875rem;
    max-width: 25rem;
    width: 96%;
    color: #fff;
    text-align: center;
  }
  #int-hero:before {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    opacity: 0.7;
    display: block;
    background: #000;
    height: 100%;
    width: 100%;
  }
}
/* Tablet */
@media only screen and (min-width: 48rem) {
  #int-hero {
    font-size: 100%;
  }
  #int-hero h1 {
    font-size: 5rem;
  }
}
/* Small Desktop */
@media only screen and (min-width: 64rem) {
  #int-hero {
    background-attachment: fixed;
    min-height: 18.75rem;
    height: auto;
    padding-top: 11.25rem;
    font-size: inherit;
    padding-block-end: 6.25rem;
  }
}
/*-- -------------------------- -->
<---    Final Call To Action    -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
  #cta {
    position: relative;
    padding: 3.125rem 0;
  }
  #cta .container {
    text-align: center;
  }
  #cta picture {
    z-index: -2;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  #cta picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #cta .title {
    position: relative;
    margin-bottom: 2.25rem;
    font-size: min(9vw, 3rem);
    line-height: 1.2083333333em;
    font-weight: 900;
    color: #fff;
    text-align: center;
  }
  #cta p {
    opacity: 1;
    margin: auto;
    margin-bottom: 2.25rem;
    max-width: 37.375rem;
    width: 96%;
    color: #fff;
    text-align: center;
  }
  #cta:before {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    opacity: 0.7;
    display: block;
    background: #000;
    height: 100%;
    width: 100%;
  }
}
/* Small Desktop */
@media only screen and (min-width: 64rem) {
  #cta {
    padding: 10.5rem 0;
  }
}
/* Large Desktop */
@media only screen and (min-width: 1300px) {
  #cta {
    position: relative;
    margin-top: 6.25rem;
  }
  #cta .container {
    margin: auto;
    width: 90.0625%;
  }
  #cta picture {
    left: 50%;
    transform: translateX(-50%);
    width: 90.0625%;
  }
  #cta picture:before {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    opacity: 0.7;
    display: block;
    background: #000;
    height: 100%;
    width: 100%;
  }
  #cta:before {
    display: none;
  }
  #cta:after {
    z-index: -3;
    position: absolute;
    bottom: 0;
    left: 50%;
    content: "";
    opacity: 1;
    transform: translateX(-50%);
    display: block;
    background: url("/assets/svgs/cta-squares.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 69.25rem;
    width: 125rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #cta:after {
    display: none;
  }
}
/*-- -------------------------- -->
<---           Footer           -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
  #footer {
    background: #1b1f2a;
    padding: 5.25rem 0 3rem;
    font-size: min(4vw, 1.2em);
  }
  #footer .left-section {
    margin: auto;
    margin-bottom: 3.125rem;
    text-align: center;
  }
  #footer .left-section .logo {
    display: inline-block;
    margin: auto;
    margin-bottom: 1.875em;
    height: 4.875rem;
    width: auto;
    text-align: center;
  }
  #footer .left-section .logo img {
    display: block;
    height: 100%;
    width: auto;
  }
  #footer .left-section p {
    opacity: 0.9;
    margin: auto;
    width: 100%;
    font-size: 1.09375rem;
    line-height: 1.9285714286rem;
    color: #fff;
    text-align: center;
  }
  #footer .right-section {
    margin: auto;
    max-width: 25.4375rem;
    width: 96%;
  }
  #footer .right-section .lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: auto;
    max-width: 19.1875rem;
    width: 96%;
  }
  #footer .right-section .lists ul {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
  }
  #footer .right-section .lists ul li {
    opacity: 0.9;
    margin-bottom: 0.75rem;
    list-style: none;
    font-size: 1.25rem;
    color: #fff;
  }
  #footer .right-section .lists ul li a {
    text-decoration: none;
    line-height: 1.1666666667em;
    color: #fff;
    transition: color 0.3s;
  }
  #footer .right-section .lists ul li a:hover {
    color: var(--primary-light);
  }
  #footer .right-section .lists ul h2 {
    position: relative;
    margin-bottom: 2.3125rem;
    text-transform: uppercase;
    font-size: 1.25rem;
    line-height: 1.1666666667em;
    font-weight: bold;
    color: #fff;
  }
  #footer .right-section .lists ul h2:before {
    position: absolute;
    bottom: -1rem;
    left: 0;
    content: "";
    opacity: 1;
    display: block;
    background: var(--primary-light);
    height: 0.125rem;
    width: 6.0625rem;
  }
  #footer .right-section .lists ul:nth-of-type(3) {
    margin-top: 3.125rem;
  }
  #footer .right-section .lists ul:nth-of-type(3) li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1rem;
  }
  #footer .right-section .lists ul:nth-of-type(3) li:last-of-type {
    margin-bottom: 0;
  }
  #footer .right-section .buttons {
    display: flex;
    justify-content: center;
  }
  #footer .right-section .cs-button-solid {
    margin: 0;
    height: 3.3125rem;
    width: 15.625rem;
    padding-top: 0.1875rem;
  }
  #footer .credit {
    margin: auto;
    margin-top: 6.25rem;
    width: 96%;
    font-size: 1.25rem;
    line-height: 2.25rem;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem;
  }
  #footer .credit .left, #footer .credit .right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  #footer .credit .left {
    text-transform: uppercase;
  }
}
@media only screen and (min-width: 0rem) and (max-width: 48rem) {
  #footer .credit {
    flex-direction: column;
    text-align: center;
    gap: 1.25rem;
  }
  #footer .credit .left, #footer .credit .right {
    width: 100%;
    justify-content: center;
  }
}
@media only screen and (min-width: 0rem) {
  #footer .credit svg {
    margin-top: 0.125rem;
    height: 1.25rem;
    width: auto;
    vertical-align: middle;
  }
  #footer .credit svg.text-danger {
    stroke: #ff0000;
  }
  #footer .credit a {
    text-decoration: none;
    font-size: 1.25rem;
    color: var(--primary-light);
  }
  #footer .credit a:hover {
    text-decoration: underline;
  }
  #footer .credit .brand-link {
    color: var(--primary-light);
    font-weight: 700;
  }
}
/* Small Desktop */
@media only screen and (min-width: 64rem) {
  #footer {
    font-size: min(1.2vw, 1em);
  }
  #footer .container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin: auto;
    max-width: 82.5rem;
    width: 96%;
    padding: 0;
  }
  #footer .left-section {
    margin: 0;
    width: 25.5625rem;
    text-align: left;
  }
  #footer .left-section .logo {
    margin-left: 0;
    height: 4.875rem;
    text-align: left;
  }
  #footer .left-section p {
    margin-left: 0;
    text-align: left;
  }
  #footer .right-section {
    margin: 0;
    max-width: none;
    width: 38.0625rem;
  }
  #footer .right-section .lists {
    margin: 0;
    max-width: 48.0625rem;
    width: 96%;
  }
  #footer .right-section .lists ul li a {
    position: relative;
  }
  #footer .right-section .lists ul li a:before {
    position: absolute;
    bottom: -0.1875rem;
    left: 0;
    content: "";
    opacity: 1;
    display: block;
    background: var(--primary-light);
    height: 0.125rem;
    width: 0%;
    transition: width 0.3s;
  }
  #footer .right-section .lists ul li a:hover:before {
    width: 100%;
  }
  #footer .right-section .lists ul:nth-of-type(3) {
    margin-top: 0;
  }
  #footer .right-section .lists ul:nth-of-type(3) li:first-of-type {
    margin-bottom: 0;
  }
  #footer .right-section .buttons {
    justify-content: flex-start;
  }
  #footer .credit {
    max-width: 82.5rem;
  }
  #footer .credit .copyright {
    display: inline-block;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #footer {
    background: #1b1f2a;
  }
}
/* WitchaTea Components */
.faq-witchatea,
#faq-witchatea {
  padding: var(--sectionPadding);
  background: var(--white);
}
.faq-witchatea .faq-witchatea__container,
#faq-witchatea .faq-witchatea__container {
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
}
.faq-witchatea .faq-witchatea__header,
#faq-witchatea .faq-witchatea__header {
  text-align: center;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
}
.faq-witchatea .faq-witchatea__header .cs-topper,
#faq-witchatea .faq-witchatea__header .cs-topper {
  color: var(--primary-light);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
}
.faq-witchatea .faq-witchatea__header .cs-title,
#faq-witchatea .faq-witchatea__header .cs-title {
  font-family: var(--font-heading);
  color: var(--headerColor);
  font-weight: 700;
  font-size: clamp(2.25rem, 4vw, 3.125rem);
  line-height: 1.2;
  text-align: center;
  margin: 0.35rem 0 0.75rem;
  letter-spacing: -0.02em;
}
.faq-witchatea .faq-witchatea__header .cs-text,
#faq-witchatea .faq-witchatea__header .cs-text {
  font-family: var(--font-body);
  color: var(--bodyTextColor);
  font-size: clamp(1.0625rem, 1.3vw, 1.125rem);
  line-height: 1.65;
  text-align: center;
  margin: 0;
  opacity: 0.92;
}
.faq-witchatea .faq-witchatea__section,
#faq-witchatea .faq-witchatea__section {
  margin-bottom: 2.5rem;
}
.faq-witchatea .faq-witchatea__section:last-of-type,
#faq-witchatea .faq-witchatea__section:last-of-type {
  margin-bottom: 2rem;
}
.faq-witchatea .faq-witchatea__section-title,
#faq-witchatea .faq-witchatea__section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--primary-light);
  margin: 0 0 1.25rem 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-align: center;
}
.faq-witchatea .faq-witchatea__list,
#faq-witchatea .faq-witchatea__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.faq-witchatea .cs-faq-item,
#faq-witchatea .cs-faq-item {
  border-bottom: 1px solid rgba(22, 37, 31, 0.12);
  transition: border-color 0.25s ease;
}
.faq-witchatea .cs-faq-item.active,
#faq-witchatea .cs-faq-item.active {
  border-color: var(--primary-light);
}
.faq-witchatea .cs-faq-item:last-child,
#faq-witchatea .cs-faq-item:last-child {
  border-bottom: none;
}
.faq-witchatea .cs-button,
#faq-witchatea .cs-button {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.3vw, 1.25rem);
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  padding: 1rem 2.5rem 1rem 0;
  border: none;
  background: transparent;
  color: var(--headerColor);
  display: block;
  width: 100%;
  position: relative;
  cursor: pointer;
  transition: color 0.2s ease;
}
.faq-witchatea .cs-button:hover,
#faq-witchatea .cs-button:hover {
  color: var(--primary-light);
}
.faq-witchatea .cs-button::after,
#faq-witchatea .cs-button::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-40%) rotate(45deg);
  transition: transform 0.25s ease;
}
.faq-witchatea .cs-faq-item.active .cs-button,
#faq-witchatea .cs-faq-item.active .cs-button {
  color: var(--primary);
  font-weight: 600;
}
.faq-witchatea .cs-faq-item.active .cs-button::after,
#faq-witchatea .cs-faq-item.active .cs-button::after {
  transform: translateY(-20%) rotate(-135deg);
}
.faq-witchatea .cs-button-text,
#faq-witchatea .cs-button-text {
  display: block;
  padding-right: 0.5rem;
}
.faq-witchatea .cs-item-p,
#faq-witchatea .cs-item-p {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.1vw, 1rem);
  line-height: 1.6;
  color: var(--bodyTextColor);
  margin: 0;
  padding: 0 2.5rem 0 0;
  transition: height 0.35s ease, opacity 0.35s ease, padding 0.25s ease;
}
.faq-witchatea .faq-witchatea__footer,
#faq-witchatea .faq-witchatea__footer {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(22, 37, 31, 0.1);
}
.faq-witchatea .faq-witchatea__updated,
#faq-witchatea .faq-witchatea__updated {
  font-size: 0.8125rem;
  color: var(--grey);
  margin: 0 0 1.5rem 0;
}
.faq-witchatea .faq-witchatea__cta,
#faq-witchatea .faq-witchatea__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ============================================ */
/*           Value Proposition                  */
/* ============================================ */
#value-proposition,
#value-proposition-about {
  padding: var(--sectionPadding);
  background-color: var(--white);
  border-top: 4px solid var(--primary);
  /* When right after hero with wave: remove flat line only (keep normal section spacing) */
  /* Ritual Seal Reveal: slow, calm hover — symbol + gentle lift + soft shadow */
}
#hero-variant + #value-proposition,
#hero-variant + #value-proposition-about {
  border-top: none;
}
#value-proposition .cs-container,
#value-proposition-about .cs-container {
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 0 1rem;
}
#value-proposition .cs-content,
#value-proposition-about .cs-content {
  text-align: center;
  width: 100%;
  max-width: 680px;
  margin: 0 auto 3rem;
}
#value-proposition .cs-content .cs-topper,
#value-proposition .cs-content .cs-title,
#value-proposition .cs-content .cs-text,
#value-proposition-about .cs-content .cs-topper,
#value-proposition-about .cs-content .cs-title,
#value-proposition-about .cs-content .cs-text {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
#value-proposition .cs-card-group,
#value-proposition-about .cs-card-group {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
#value-proposition .cs-item,
#value-proposition-about .cs-item {
  background-color: var(--white);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  /* Optimize touch interactions */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* Content above seal watermark */
  /* Symbol seal: watermark behind content, subtle by default, slightly more on hover */
  /* Hover: gentle lift + soft shadow + seal scale (premium micro-interaction) */
  /* Touch: active state for tap feedback (same effects as hover) */
}
#value-proposition .cs-item .cs-h3,
#value-proposition .cs-item .cs-item-text,
#value-proposition-about .cs-item .cs-h3,
#value-proposition-about .cs-item .cs-item-text {
  position: relative;
  z-index: 1;
}
#value-proposition .cs-item .cs-seal,
#value-proposition-about .cs-item .cs-seal {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 55%;
  height: 55%;
  pointer-events: none;
  opacity: 0.06;
  transform: scale(1);
  transform-origin: 100% 100%;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 100%;
  mask-position: 100% 100%;
  -webkit-mask-size: contain;
  mask-size: contain;
}
#value-proposition .cs-item .cs-seal--heritage,
#value-proposition-about .cs-item .cs-seal--heritage {
  background-color: var(--primary); /* forest green */
  -webkit-mask-image: url("../svgs/heritage.svg");
  mask-image: url("../svgs/heritage.svg");
}
#value-proposition .cs-item .cs-seal--quality,
#value-proposition-about .cs-item .cs-seal--quality {
  background-color: var(--primary-light); /* antique gold */
  -webkit-mask-image: url("../svgs/quality-certificate.svg");
  mask-image: url("../svgs/quality-certificate.svg");
}
#value-proposition .cs-item .cs-seal--ritual,
#value-proposition-about .cs-item .cs-seal--ritual {
  background-color: var(--primary-alt); /* deep plum */
  -webkit-mask-image: url("../svgs/ritual.svg");
  mask-image: url("../svgs/ritual.svg");
}
#value-proposition .cs-item::before,
#value-proposition-about .cs-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--border-top-color, var(--primary-light));
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}
@media (hover: hover) {
  #value-proposition .cs-item:hover,
  #value-proposition-about .cs-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  }
  #value-proposition .cs-item:hover .cs-seal,
  #value-proposition-about .cs-item:hover .cs-seal {
    opacity: 0.1;
    transform: scale(1.05);
  }
  #value-proposition .cs-item:hover::before,
  #value-proposition-about .cs-item:hover::before {
    transform: scaleX(1);
  }
}
@media (hover: none) {
  #value-proposition .cs-item,
  #value-proposition-about .cs-item {
    /* Active tap state */
    /* Focus state for accessibility */
    /* Smooth transitions for touch */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  #value-proposition .cs-item:active, #value-proposition .cs-item.is-tapped,
  #value-proposition-about .cs-item:active,
  #value-proposition-about .cs-item.is-tapped {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
  }
  #value-proposition .cs-item:active .cs-seal, #value-proposition .cs-item.is-tapped .cs-seal,
  #value-proposition-about .cs-item:active .cs-seal,
  #value-proposition-about .cs-item.is-tapped .cs-seal {
    opacity: 0.1;
  }
  #value-proposition .cs-item:active::before, #value-proposition .cs-item.is-tapped::before,
  #value-proposition-about .cs-item:active::before,
  #value-proposition-about .cs-item.is-tapped::before {
    transform: scaleX(1);
  }
  #value-proposition .cs-item:focus,
  #value-proposition-about .cs-item:focus {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
  }
}
#value-proposition .cs-h3,
#value-proposition-about .cs-h3 {
  font-size: clamp(1.25rem, 2vw, 1.5625rem);
  line-height: 1.2em;
  margin: 0 0 1rem 0;
  color: var(--headerColor);
  font-weight: bold;
}
#value-proposition .cs-item-text,
#value-proposition-about .cs-item-text {
  font-size: 1.25rem;
  line-height: 1.5em;
  margin: 0;
  color: var(--bodyTextColor);
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #value-proposition .cs-card-group {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Desktop - 1024px (3 cards centered in a single row) */
@media only screen and (min-width: 64rem) {
  #value-proposition .cs-card-group {
    grid-template-columns: repeat(3, 1fr);
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* ============================================ */
/*     Day Moments – Guided ritual path        */
/* ============================================ */
#day-moments.value-proposition {
  padding: var(--sectionPadding);
  position: relative;
  background: linear-gradient(180deg, var(--grey-light) 0%, color-mix(in srgb, var(--primary) 8%, var(--grey-light)) 100%);
  overflow: hidden;
  /* Timeline: line (absolute through nodes) + list */
  /* Vertical line: runs through center of node column (1rem = half of 2rem node width) */
  /* Node: circle or icon, centered on line */
  /* Filled icon (e.g. meditation when inline): allow fill for paths that need it */
  /* List of moments (content only) */
  /* Label: small, elegant */
  /* Description: hero of each item */
  /* CTA as invitation */
  /* Mobile */
  /* Desktop: center entire section and CTA */
}
#day-moments.value-proposition .cs-container {
  max-width: 900px;
  padding: 0 1rem;
}
#day-moments.value-proposition .cs-content--day-moments {
  margin-bottom: 2.5rem;
}
#day-moments.value-proposition .cs-text--lead {
  font-weight: 400;
  line-height: 1.6;
  color: var(--bodyTextColor);
}
#day-moments.value-proposition .cs-content--day-moments-cta {
  margin-top: 3.5rem;
  margin-bottom: 0;
}
#day-moments.value-proposition .day-moments-timeline {
  position: relative;
  min-height: 280px;
}
#day-moments.value-proposition .day-moments-line-inner {
  position: absolute;
  top: 0;
  left: 1rem;
  width: 1px;
  height: 100%;
  min-height: 200px;
  background: color-mix(in srgb, var(--primary-light) 10%, transparent);
  transform-origin: top;
  /* Visible by default so section is never empty; .is-visible triggers draw animation when in view */
  transform: scaleY(1);
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  #day-moments.value-proposition {
    /* Optional: start line at 0 and draw when .is-visible (uncomment to re-enable line-draw animation) */
    /* .day-moments-line-inner { transform: scaleY(0); } */
    /* #day-moments.is-visible .day-moments-line-inner { transform: scaleY(1); } */
  }
}
#day-moments.value-proposition .day-moments-node {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#day-moments.value-proposition .day-moments-node-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--primary) 50%, transparent);
  background: transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}
#day-moments.value-proposition .day-moments-node-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  color: var(--primary);
}
#day-moments.value-proposition .day-moments-node-icon path {
  stroke: currentColor;
  fill: none;
}
#day-moments.value-proposition .day-moments-node-icon path[fill=currentColor] {
  fill: currentColor;
}
#day-moments.value-proposition .day-moments-node-icon--img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  color: var(--primary);
}
@media (hover: hover) {
  #day-moments.value-proposition .day-moments-item:hover .day-moments-node-dot {
    border-color: var(--primary-light);
    background-color: color-mix(in srgb, var(--primary-light) 25%, transparent);
  }
  #day-moments.value-proposition .day-moments-item:hover .day-moments-node-icon {
    color: var(--primary-light);
  }
  #day-moments.value-proposition .day-moments-item:hover .day-moments-node-icon--img {
    opacity: 0.88;
  }
  #day-moments.value-proposition .day-moments-item:hover .day-moments-label {
    color: var(--primary-light);
  }
  #day-moments.value-proposition .day-moments-item {
    transition: background-color 0.2s ease;
  }
  #day-moments.value-proposition .day-moments-item:hover {
    background-color: color-mix(in srgb, var(--primary-light) 6%, transparent);
    border-radius: 0.5rem;
  }
}
#day-moments.value-proposition .day-moments-node.is-active .day-moments-node-dot {
  border-color: var(--primary-light);
  background-color: color-mix(in srgb, var(--primary-light) 35%, transparent);
}
#day-moments.value-proposition .day-moments-node.is-active .day-moments-node-icon {
  color: var(--primary-light);
}
#day-moments.value-proposition .day-moments-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}
#day-moments.value-proposition .day-moments-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem;
  /* Visible by default so section is never empty; .is-visible used for optional stagger animation */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: no-preference) {
  #day-moments.value-proposition {
    /* Optional: start hidden and reveal when .is-visible (uncomment to re-enable scroll-reveal) */
    /* .day-moments-item { opacity: 0; transform: translateY(10px); } */
    /* #day-moments.is-visible .day-moments-item { opacity: 1; transform: translateY(0); } */
  }
  #day-moments.value-proposition #day-moments.is-visible .day-moments-item:nth-child(1) {
    transition-delay: 0s;
  }
  #day-moments.value-proposition #day-moments.is-visible .day-moments-item:nth-child(2) {
    transition-delay: 0.08s;
  }
  #day-moments.value-proposition #day-moments.is-visible .day-moments-item:nth-child(3) {
    transition-delay: 0.16s;
  }
  #day-moments.value-proposition #day-moments.is-visible .day-moments-item:nth-child(4) {
    transition-delay: 0.24s;
  }
}
#day-moments.value-proposition .day-moments-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.5rem;
  transition: color 0.25s ease;
}
#day-moments.value-proposition .day-moments-desc {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.55;
  font-weight: 500;
  color: var(--bodyTextColor);
}
#day-moments.value-proposition .day-moments-cta {
  text-align: center;
}
#day-moments.value-proposition .day-moments-cta-copy {
  margin: 0 0 0.5rem 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--bodyTextColor) 80%, transparent);
}
#day-moments.value-proposition .day-moments-cta .cs-button-solid {
  font-size: 0.9375rem;
  padding: 0.65rem 1.5rem;
}
@media (max-width: 47.9375rem) {
  #day-moments.value-proposition .day-moments-line-inner {
    min-height: 240px;
  }
  #day-moments.value-proposition .day-moments-list {
    gap: 2.5rem;
  }
}
@media (min-width: 64rem) {
  #day-moments.value-proposition .cs-container {
    margin-left: auto;
    margin-right: auto;
  }
  #day-moments.value-proposition .cs-content--day-moments {
    text-align: center;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
  }
  #day-moments.value-proposition .day-moments-timeline {
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
  }
  #day-moments.value-proposition .day-moments-cta {
    text-align: center;
  }
}

/* Rituals page: white background for day-moments (like #moments-of-return) */
.ritual-page #day-moments.value-proposition {
  background: var(--white);
}

/* ============================================ */
/*        Crafted with Care (Premium)          */
/* ============================================ */
#crafted-with-care.value-proposition,
#crafted-with-care-about.value-proposition,
#crafted-with-care-blends.value-proposition {
  padding: var(--sectionPadding);
  background: linear-gradient(180deg, var(--white) 0%, color-mix(in srgb, var(--grey-light) 40%, var(--white)) 100%);
  position: relative;
  overflow: hidden;
  /* Subtle texture overlay */
  /* Decorative dot columns on both sides (symmetric, premium) */
}
#crafted-with-care.value-proposition::before,
#crafted-with-care-about.value-proposition::before,
#crafted-with-care-blends.value-proposition::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(182, 155, 118, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(20, 37, 31, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
#crafted-with-care.value-proposition .cs-container,
#crafted-with-care-about.value-proposition .cs-container,
#crafted-with-care-blends.value-proposition .cs-container {
  position: relative;
  z-index: 1;
}
#crafted-with-care.value-proposition .cs-container::before,
#crafted-with-care.value-proposition .cs-container::after,
#crafted-with-care-about.value-proposition .cs-container::before,
#crafted-with-care-about.value-proposition .cs-container::after,
#crafted-with-care-blends.value-proposition .cs-container::before,
#crafted-with-care-blends.value-proposition .cs-container::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 100px;
  background-image: radial-gradient(circle at 4px 16.67%, color-mix(in srgb, var(--primary) 35%, transparent) 2px, transparent 2px), radial-gradient(circle at 4px 50%, color-mix(in srgb, var(--primary) 35%, transparent) 2px, transparent 2px), radial-gradient(circle at 4px 83.33%, color-mix(in srgb, var(--primary) 35%, transparent) 2px, transparent 2px);
  background-size: 8px 100%;
  background-repeat: no-repeat;
  opacity: 0.5;
  pointer-events: none;
}
#crafted-with-care.value-proposition .cs-container::before,
#crafted-with-care-about.value-proposition .cs-container::before,
#crafted-with-care-blends.value-proposition .cs-container::before {
  left: clamp(0.5rem, 2vw, 1.5rem);
}
#crafted-with-care.value-proposition .cs-container::after,
#crafted-with-care-about.value-proposition .cs-container::after,
#crafted-with-care-blends.value-proposition .cs-container::after {
  right: clamp(0.5rem, 2vw, 1.5rem);
  left: auto;
}
#crafted-with-care.value-proposition .cs-content,
#crafted-with-care-about.value-proposition .cs-content,
#crafted-with-care-blends.value-proposition .cs-content {
  margin-bottom: 4rem;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
#crafted-with-care.value-proposition .cs-content .cs-topper,
#crafted-with-care-about.value-proposition .cs-content .cs-topper,
#crafted-with-care-blends.value-proposition .cs-content .cs-topper {
  color: var(--primary-light);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
}
#crafted-with-care.value-proposition .cs-content .cs-title,
#crafted-with-care-about.value-proposition .cs-content .cs-title,
#crafted-with-care-blends.value-proposition .cs-content .cs-title {
  color: var(--headerColor);
  font-weight: 700;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
#crafted-with-care.value-proposition .cs-content .cs-text,
#crafted-with-care-about.value-proposition .cs-content .cs-text,
#crafted-with-care-blends.value-proposition .cs-content .cs-text {
  color: var(--bodyTextColor);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  line-height: 1.6;
  opacity: 0.9;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
#crafted-with-care.value-proposition .cs-card-group,
#crafted-with-care-about.value-proposition .cs-card-group,
#crafted-with-care-blends.value-proposition .cs-card-group {
  gap: 3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
#crafted-with-care.value-proposition .cs-item,
#crafted-with-care-about.value-proposition .cs-item,
#crafted-with-care-blends.value-proposition .cs-item {
  background: var(--white);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: visible;
  /* Thinner top accent, serene feel */
  border-top: 2px solid transparent;
  background-clip: padding-box;
  /* Softer layered shadows */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.02);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* Icon container at top - circular, slightly muted */
  /* Icon SVG - centered in circle */
  /* Gradient overlay on hover */
  /* Card 1: Clean ingredients - muted green */
  /* Card 2: Thoughtful blending - muted gold */
  /* Card 3: Crafted in Austria - muted plum */
  /* Content styling */
  /* Hover: premium lift and glow */
  /* Touch feedback */
}
#crafted-with-care.value-proposition .cs-item::before,
#crafted-with-care-about.value-proposition .cs-item::before,
#crafted-with-care-blends.value-proposition .cs-item::before {
  content: "";
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--white) 0%, var(--grey-light) 100%);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  z-index: 2;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
#crafted-with-care.value-proposition .cs-item .cs-icon,
#crafted-with-care-about.value-proposition .cs-item .cs-icon,
#crafted-with-care-blends.value-proposition .cs-item .cs-icon {
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  width: 2rem;
  height: 2rem;
  z-index: 3;
  opacity: 0.85;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
#crafted-with-care.value-proposition .cs-item .cs-icon svg,
#crafted-with-care-about.value-proposition .cs-item .cs-icon svg,
#crafted-with-care-blends.value-proposition .cs-item .cs-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--primary);
  fill: none;
  stroke-width: 1.5;
}
#crafted-with-care.value-proposition .cs-item::after,
#crafted-with-care-about.value-proposition .cs-item::after,
#crafted-with-care-blends.value-proposition .cs-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(0, 0, 0, 0.02) 100%);
  border-radius: 16px;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 1;
}
#crafted-with-care.value-proposition .cs-item:nth-child(1),
#crafted-with-care-about.value-proposition .cs-item:nth-child(1),
#crafted-with-care-blends.value-proposition .cs-item:nth-child(1) {
  border-top-color: color-mix(in srgb, var(--primary) 85%, var(--grey-light));
}
#crafted-with-care.value-proposition .cs-item:nth-child(1)::before,
#crafted-with-care-about.value-proposition .cs-item:nth-child(1)::before,
#crafted-with-care-blends.value-proposition .cs-item:nth-child(1)::before {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 88%, white) 0%, color-mix(in srgb, var(--primary) 75%, var(--white)) 100%);
}
#crafted-with-care.value-proposition .cs-item:nth-child(1) .cs-icon svg,
#crafted-with-care-about.value-proposition .cs-item:nth-child(1) .cs-icon svg,
#crafted-with-care-blends.value-proposition .cs-item:nth-child(1) .cs-icon svg {
  stroke: var(--white);
}
#crafted-with-care.value-proposition .cs-item:nth-child(2),
#crafted-with-care-about.value-proposition .cs-item:nth-child(2),
#crafted-with-care-blends.value-proposition .cs-item:nth-child(2) {
  border-top-color: color-mix(in srgb, var(--primary-light) 80%, var(--grey-light));
}
#crafted-with-care.value-proposition .cs-item:nth-child(2)::before,
#crafted-with-care-about.value-proposition .cs-item:nth-child(2)::before,
#crafted-with-care-blends.value-proposition .cs-item:nth-child(2)::before {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-light) 85%, white) 0%, color-mix(in srgb, var(--primary-light) 72%, var(--white)) 100%);
}
#crafted-with-care.value-proposition .cs-item:nth-child(2) .cs-icon svg,
#crafted-with-care-about.value-proposition .cs-item:nth-child(2) .cs-icon svg,
#crafted-with-care-blends.value-proposition .cs-item:nth-child(2) .cs-icon svg {
  stroke: var(--white);
}
#crafted-with-care.value-proposition .cs-item:nth-child(3),
#crafted-with-care-about.value-proposition .cs-item:nth-child(3),
#crafted-with-care-blends.value-proposition .cs-item:nth-child(3) {
  border-top-color: color-mix(in srgb, var(--primary-alt) 85%, var(--grey-light));
}
#crafted-with-care.value-proposition .cs-item:nth-child(3)::before,
#crafted-with-care-about.value-proposition .cs-item:nth-child(3)::before,
#crafted-with-care-blends.value-proposition .cs-item:nth-child(3)::before {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-alt) 88%, white) 0%, color-mix(in srgb, var(--primary-alt) 75%, var(--white)) 100%);
}
#crafted-with-care.value-proposition .cs-item:nth-child(3) .cs-icon svg,
#crafted-with-care-about.value-proposition .cs-item:nth-child(3) .cs-icon svg,
#crafted-with-care-blends.value-proposition .cs-item:nth-child(3) .cs-icon svg {
  stroke: var(--white);
}
#crafted-with-care.value-proposition .cs-item .cs-h3,
#crafted-with-care-about.value-proposition .cs-item .cs-h3,
#crafted-with-care-blends.value-proposition .cs-item .cs-h3 {
  font-size: clamp(1.375rem, 2vw, 1.625rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 1.5rem 0 0.75rem 0;
  color: var(--headerColor);
  letter-spacing: -0.01em;
  position: relative;
  z-index: 2;
}
#crafted-with-care.value-proposition .cs-item .cs-item-text,
#crafted-with-care-about.value-proposition .cs-item .cs-item-text,
#crafted-with-care-blends.value-proposition .cs-item .cs-item-text {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.6;
  margin: 0;
  color: var(--bodyTextColor);
  opacity: 0.85;
  position: relative;
  z-index: 2;
}
@media (hover: hover) {
  #crafted-with-care.value-proposition .cs-item:hover,
  #crafted-with-care-about.value-proposition .cs-item:hover,
  #crafted-with-care-blends.value-proposition .cs-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.1), 0 24px 64px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgb(255, 255, 255), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  }
  #crafted-with-care.value-proposition .cs-item:hover::before,
  #crafted-with-care-about.value-proposition .cs-item:hover::before,
  #crafted-with-care-blends.value-proposition .cs-item:hover::before {
    transform: translateX(-50%) translateY(-4px) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  }
  #crafted-with-care.value-proposition .cs-item:hover .cs-icon,
  #crafted-with-care-about.value-proposition .cs-item:hover .cs-icon,
  #crafted-with-care-blends.value-proposition .cs-item:hover .cs-icon {
    transform: translateX(-50%) translateY(calc(50% - 4px)) scale(1.1);
    opacity: 1;
  }
  #crafted-with-care.value-proposition .cs-item:hover::after,
  #crafted-with-care-about.value-proposition .cs-item:hover::after,
  #crafted-with-care-blends.value-proposition .cs-item:hover::after {
    opacity: 1;
  }
  #crafted-with-care.value-proposition .cs-item:hover .cs-h3,
  #crafted-with-care-about.value-proposition .cs-item:hover .cs-h3,
  #crafted-with-care-blends.value-proposition .cs-item:hover .cs-h3 {
    color: var(--primary);
  }
  #crafted-with-care.value-proposition .cs-item:hover .cs-item-text,
  #crafted-with-care-about.value-proposition .cs-item:hover .cs-item-text,
  #crafted-with-care-blends.value-proposition .cs-item:hover .cs-item-text {
    opacity: 1;
  }
}
@media (hover: none) {
  #crafted-with-care.value-proposition .cs-item:active,
  #crafted-with-care-about.value-proposition .cs-item:active,
  #crafted-with-care-blends.value-proposition .cs-item:active {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgb(255, 255, 255);
  }
  #crafted-with-care.value-proposition .cs-item:active::before,
  #crafted-with-care-about.value-proposition .cs-item:active::before,
  #crafted-with-care-blends.value-proposition .cs-item:active::before {
    transform: translateX(-50%) scale(1.05);
  }
  #crafted-with-care.value-proposition .cs-item:active .cs-icon,
  #crafted-with-care-about.value-proposition .cs-item:active .cs-icon,
  #crafted-with-care-blends.value-proposition .cs-item:active .cs-icon {
    transform: translateX(-50%) translateY(50%) scale(1.05);
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #crafted-with-care.value-proposition .cs-card-group,
  #crafted-with-care-about.value-proposition .cs-card-group,
  #crafted-with-care-blends.value-proposition .cs-card-group {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #crafted-with-care.value-proposition .cs-card-group,
  #crafted-with-care-about.value-proposition .cs-card-group,
  #crafted-with-care-blends.value-proposition .cs-card-group {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    gap: 3rem;
  }
  #crafted-with-care.value-proposition .cs-item,
  #crafted-with-care-about.value-proposition .cs-item,
  #crafted-with-care-blends.value-proposition .cs-item {
    padding: 3rem 2.5rem;
  }
}
/* ============================================ */
/*           Blends Grid (Premium Cards)       */
/* ============================================ */
#blends-grid {
  /* Subtle radial gradient: center slightly warmer, edges slightly darker */
  background: radial-gradient(ellipse 120% 80% at 50% 40%, color-mix(in srgb, var(--grey-light) 85%, white) 0%, color-mix(in srgb, var(--grey-light) 98%, #e8e4e0) 100%);
  /* Container: full width on desktop for proper 5-column distribution */
  /* Intro (Our Blends, title, paragraph): centered on desktop */
  /* Typography enhancements */
  /* Refined text styling */
  /* Subtle text shadow for premium feel */
  /* Ingredients list styling */
  /* CTA link */
  /* Caffeine dots */
  /* Image scale slight increase (5%) */
}
@media (min-width: 64rem) {
  #blends-grid .cs-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: clamp(2rem, 4vw, 3rem) !important;
    padding-right: clamp(2rem, 4vw, 3rem) !important;
  }
}
@media (min-width: 64rem) {
  #blends-grid .cs-content {
    text-align: center;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
  }
}
#blends-grid .cs-card-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  width: 100%;
  /* Desktop: force 5 columns for even distribution */
}
@media (max-width: 47.9375rem) {
  #blends-grid .cs-card-group {
    gap: 1.25rem;
  }
}
@media (min-width: 64rem) {
  #blends-grid .cs-card-group {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: clamp(1.5rem, 2vw, 2rem);
    width: 100%;
    max-width: 100%;
  }
}
#blends-grid .cs-item-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
#blends-grid .cs-item {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  /* Optimize touch interactions */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* Softer luxury shadows: lower blur, lower opacity */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(0, 0, 0, 0.03);
  /* Top accent border */
  border-top: 4px solid var(--primary);
  /* Subtle gradient overlay for premium feel */
  /* Image container - tight and premium, minimal empty space */
  /* Content area - tighter padding */
  /* Hover state: enhanced lift and glow */
  /* Touch state for mobile - enhanced feedback */
}
#blends-grid .cs-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 85%, rgba(0, 0, 0, 0.02) 100%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
#blends-grid .cs-item picture {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1.2/1;
  background: var(--primary);
  position: relative;
  overflow: hidden;
  padding: 0.5rem;
  box-sizing: border-box;
  /* Subtle radial gradient overlay for depth */
  /* Inner shadow for depth */
}
#blends-grid .cs-item picture::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
  z-index: 1;
}
#blends-grid .cs-item picture::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  z-index: 2;
}
#blends-grid .cs-item picture img {
  width: auto;
  height: auto;
  max-width: 95%;
  max-height: 95%;
  object-fit: contain;
  border-radius: 4px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease;
  position: relative;
  z-index: 0;
  /* Subtle glow effect */
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
}
#blends-grid .cs-item .cs-item-content {
  padding: 1.25rem 1.5rem;
  position: relative;
  z-index: 2;
  /* Subtle divider between image and content */
}
#blends-grid .cs-item .cs-item-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.5rem;
  right: 1.5rem;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 20%, rgba(0, 0, 0, 0.08) 80%, transparent 100%);
}
@media (hover: hover) {
  #blends-grid .cs-item:hover {
    transform: translateY(-6px);
    /* Enhanced shadows on hover */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 12px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03);
  }
  #blends-grid .cs-item:hover::after {
    opacity: 1;
  }
  #blends-grid .cs-item:hover picture img {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
  }
  #blends-grid .cs-item:hover picture::before {
    opacity: 0.8;
  }
}
@media (hover: none) {
  #blends-grid .cs-item {
    /* Active tap state */
    /* Focus state for accessibility */
    /* Smooth transitions for touch */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  #blends-grid .cs-item:active, #blends-grid .cs-item.is-tapped {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 12px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03);
  }
  #blends-grid .cs-item:active::after, #blends-grid .cs-item.is-tapped::after {
    opacity: 1;
  }
  #blends-grid .cs-item:active picture img, #blends-grid .cs-item.is-tapped picture img {
    transform: scale(1.02);
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.18));
  }
  #blends-grid .cs-item:active picture::before, #blends-grid .cs-item.is-tapped picture::before {
    opacity: 0.7;
  }
  #blends-grid .cs-item:focus {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
  }
  #blends-grid .cs-item picture img {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
  }
}
#blends-grid .cs-h3 {
  margin: 0 0 0.5rem 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--headerColor);
}
#blends-grid .cs-item-text {
  line-height: 1.6;
  color: var(--bodyTextColor);
}
#blends-grid p[style*="color: var(--primary-light)"] {
  font-weight: 500;
  letter-spacing: 0.02em;
}
#blends-grid p[style*="Ingredients:"] {
  line-height: 1.5;
  margin-top: 0.75rem !important;
}
#blends-grid .blends-grid__cta {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  transition: color 0.2s ease, transform 0.2s ease;
}
#blends-grid .blends-grid__cta:hover {
  color: var(--primary-light);
}
#blends-grid .blends-grid__caffeine-dots {
  margin-right: 0.25rem;
  font-family: system-ui, sans-serif;
  letter-spacing: 0.05em;
}
#blends-grid picture img {
  max-width: 98%;
  max-height: 98%;
}

/* ============================================ */
/*         Blends Philosophy Block             */
/* ============================================ */
#blends-philosophy {
  padding: var(--sectionPadding);
  background: linear-gradient(180deg, var(--white) 0%, color-mix(in srgb, var(--grey-light) 50%, var(--white)) 100%);
  position: relative;
}
#blends-philosophy .cs-content {
  text-align: center;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}
#blends-philosophy .cs-content .cs-topper {
  color: var(--primary-light);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
}
#blends-philosophy .cs-content .cs-title {
  font-family: var(--font-heading);
  color: var(--headerColor);
  font-weight: 700;
  font-size: clamp(2.25rem, 4vw, 3.125rem);
  line-height: 1.2;
  text-align: center;
  margin: 0.35rem 0 0.75rem;
  letter-spacing: -0.02em;
}
#blends-philosophy .cs-content .cs-text {
  font-family: var(--font-body);
  color: var(--bodyTextColor);
  font-size: clamp(1.0625rem, 1.3vw, 1.125rem);
  line-height: 1.65;
  text-align: center;
  margin: 0;
  opacity: 0.92;
}

/* ============================================ */
/*         Find Your Ritual                     */
/* ============================================ */
.find-your-ritual {
  padding: 0 var(--sectionPadding) var(--sectionPadding);
  background: linear-gradient(180deg, color-mix(in srgb, var(--grey-light) 50%, var(--white)) 0%, var(--white) 100%);
  position: relative;
}
.find-your-ritual .find-your-ritual__content {
  text-align: center;
  max-width: 36rem;
  margin: 0 auto 1.5rem;
}
.find-your-ritual .find-your-ritual__content .cs-topper {
  color: var(--primary-light);
  font-weight: 700;
  letter-spacing: 0.12em;
}
.find-your-ritual .find-your-ritual__question {
  font-family: var(--font-heading);
  color: var(--headerColor);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.5vw, 1.75rem);
  line-height: 1.3;
  text-align: center;
  margin: 0.25rem 0 0.5rem;
}
.find-your-ritual .find-your-ritual__sub {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.2vw, 1rem);
  line-height: 1.6;
  color: var(--bodyTextColor);
  opacity: 0.88;
  text-align: center;
  margin: 0;
}
.find-your-ritual .find-your-ritual__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.find-your-ritual .find-your-ritual__chip {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--bodyTextColor);
  background: var(--grey-light);
  border: 1px solid color-mix(in srgb, var(--grey) 25%, transparent);
  border-radius: 2rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.find-your-ritual .find-your-ritual__chip:hover {
  background: color-mix(in srgb, var(--primary) 12%, var(--grey-light));
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}
.find-your-ritual .find-your-ritual__chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

/* ============================================ */
/*         Blends Comparison Table               */
/* ============================================ */
#blends-comparison .cs-content {
  text-align: center;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}
#blends-comparison .cs-content .cs-title {
  color: var(--headerColor);
  font-weight: 700;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
#blends-comparison .cs-content .cs-text {
  color: var(--bodyTextColor);
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.blends-comparison__table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.blends-comparison__table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.blends-comparison__table th,
.blends-comparison__table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--grey) 20%, transparent);
}
.blends-comparison__table th {
  font-weight: 600;
  color: var(--headerColor);
  background: color-mix(in srgb, var(--grey) 8%, var(--grey-light));
}
.blends-comparison__table td {
  color: var(--bodyTextColor);
}
.blends-comparison__table tr:hover td {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}
@media (max-width: 47.9375rem) {
  .blends-comparison__table th,
  .blends-comparison__table td {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }
  .blends-comparison__table td::before {
    content: attr(data-label);
    font-weight: 600;
    display: inline-block;
    min-width: 6rem;
    margin-right: 0.5rem;
  }
}

/* ============================================ */
/*         Blend Detail Page                     */
/* ============================================ */
.blend-detail__layout {
  display: grid;
  gap: 2rem;
}
@media (min-width: 48rem) {
  .blend-detail__layout {
    grid-template-columns: 1fr 1.5fr;
    align-items: start;
  }
}

.blend-detail__media {
  text-align: center;
}
.blend-detail__media img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.blend-detail__cta .cs-button2 {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
}

/* ============================================ */
/*     Current Moment (Ritual Calendar)        */
/* ============================================ */
.current-moment-witchatea {
  padding: var(--sectionPadding);
  background-color: var(--grey-light);
}
.current-moment-witchatea .cs-container {
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 0 1rem;
}
.current-moment-witchatea .current-moment-witchatea__content {
  text-align: center;
  max-width: 36rem;
  margin: 0 auto;
}
.current-moment-witchatea .current-moment-witchatea__content .cs-topper,
.current-moment-witchatea .current-moment-witchatea__content .cs-title,
.current-moment-witchatea .current-moment-witchatea__content .cs-text {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.current-moment-witchatea .current-moment-witchatea__phase {
  color: var(--primary-alt);
  font-weight: 700;
}
.current-moment-witchatea .current-moment-witchatea__moon {
  margin: 0.75rem 0 1rem;
  opacity: 0.85;
}
.current-moment-witchatea .current-moment-witchatea__moon img {
  display: inline-block;
  vertical-align: middle;
}
.current-moment-witchatea .current-moment-witchatea__mood {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 1.8vw, 1.35rem);
  color: var(--grey-dark);
  font-style: italic;
}
.current-moment-witchatea .current-moment-witchatea__blend-card {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(22, 37, 31, 0.12);
}
.current-moment-witchatea .current-moment-witchatea__blend-cta {
  font-size: 0.875rem;
  color: var(--grey);
  margin: 0 0 0.35rem 0;
}
.current-moment-witchatea .current-moment-witchatea__blend-link {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}
.current-moment-witchatea .current-moment-witchatea__blend-link:hover, .current-moment-witchatea .current-moment-witchatea__blend-link:focus {
  color: var(--primary-alt);
  text-decoration: underline;
}
.current-moment-witchatea .current-moment-witchatea__blend-package {
  display: none;
  margin-top: 1rem;
  transition: opacity 0.3s ease;
}
.current-moment-witchatea .current-moment-witchatea__blend-package img {
  max-width: 140px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.current-moment-witchatea .current-moment-witchatea__blend-card:hover .current-moment-witchatea__blend-package,
.current-moment-witchatea .current-moment-witchatea__blend-card.has-blend:focus-within .current-moment-witchatea__blend-package {
  display: block;
}

/* ============================================ */
/*     Current Cycle (Phase + Calendar)        */
/*     Premium polish: one module, refined      */
/* ============================================ */
@keyframes ritual-phase-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes current-cycle-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.current-cycle-witchatea {
  /* Subtle pale parchment gradient behind entire module */
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-light) 6%, var(--grey-light)) 0%, var(--grey-light) 100%);
  padding: clamp(1.25rem, 2.5vw, 1.5rem) 1rem;
  /* Eyebrow: more present, divider under */
  /* Typography hierarchy */
  /* Phase icon */
  /* Poetic line: readable italic */
  /* Recommendation chip */
  /* Blend package on hover */
  /* Calendar block */
}
.current-cycle-witchatea .current-cycle-witchatea__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 52rem;
  margin: 0 auto;
  /* Shared light parchment - one module */
  background-color: var(--grey-light);
  border-radius: 10px;
  padding: clamp(1rem, 2vw, 1.25rem);
  box-shadow: 0 2px 12px rgba(22, 37, 31, 0.04);
  border: 1px solid color-mix(in srgb, var(--primary) 8%, transparent);
}
.current-cycle-witchatea .current-cycle-witchatea__phase-block {
  flex: 0 0 auto;
  /* Override current-moment-witchatea section padding when inside current-cycle */
  padding: 0;
  background: none;
}
.current-cycle-witchatea .current-cycle-witchatea__phase-content {
  text-align: center;
  max-width: 28rem;
  margin: 0 auto;
}
.current-cycle-witchatea .current-cycle-witchatea__eyebrow {
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid color-mix(in srgb, var(--primary-light) 50%, transparent);
}
.current-cycle-witchatea .current-cycle-witchatea__eyebrow-text {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--primary) 70%, var(--primary-light));
}
.current-cycle-witchatea .ritual-calendar-phase-title {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0 0 0.5rem 0;
}
.current-cycle-witchatea .ritual-calendar-phase-label {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--grey);
}
.current-cycle-witchatea .current-moment-witchatea__phase {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--primary-alt);
}
.current-cycle-witchatea .current-cycle-witchatea__phase-icon {
  margin: 0.5rem 0;
  animation: ritual-phase-fade 1.2s ease-out forwards;
}
.current-cycle-witchatea .current-cycle-witchatea__phase-icon img {
  display: inline-block;
  vertical-align: middle;
  width: clamp(40px, 6vw, 48px);
  height: clamp(40px, 6vw, 48px);
}
.current-cycle-witchatea .current-moment-witchatea__mood {
  font-family: var(--font-heading);
  font-size: clamp(0.875rem, 1.3vw, 1rem);
  color: color-mix(in srgb, var(--grey-dark) 90%, var(--grey));
  font-style: italic;
  margin: 0 0 0.75rem 0;
  line-height: 1.4;
}
.current-cycle-witchatea .current-cycle-witchatea__recommendation {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin-top: 0;
  padding: 0.5rem 0.75rem;
  background-color: color-mix(in srgb, var(--white) 80%, var(--grey-light));
  border: 1px solid color-mix(in srgb, var(--primary-light) 40%, transparent);
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.current-cycle-witchatea .current-cycle-witchatea__recommendation:hover, .current-cycle-witchatea .current-cycle-witchatea__recommendation:focus-within {
  border-color: color-mix(in srgb, var(--primary-light) 70%, transparent);
  box-shadow: 0 2px 8px rgba(22, 37, 31, 0.06);
}
.current-cycle-witchatea .current-cycle-witchatea__recommendation-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}
.current-cycle-witchatea .current-cycle-witchatea__recommendation-chip {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}
.current-cycle-witchatea .current-cycle-witchatea__recommendation-chip:hover, .current-cycle-witchatea .current-cycle-witchatea__recommendation-chip:focus {
  color: var(--primary-alt);
}
.current-cycle-witchatea .current-moment-witchatea__blend-package {
  display: none;
  margin-top: 0.75rem;
  transition: opacity 0.3s ease;
}
.current-cycle-witchatea .current-moment-witchatea__blend-package img {
  max-width: 120px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.current-cycle-witchatea .current-moment-witchatea__blend-card:hover .current-moment-witchatea__blend-package,
.current-cycle-witchatea .current-moment-witchatea__blend-card.has-blend:focus-within .current-moment-witchatea__blend-package {
  display: block;
}
.current-cycle-witchatea .current-cycle-witchatea__calendar-block {
  flex: 1 1 auto;
  width: 100%;
}

/* Module fade-in on load (runs once); respect reduced motion */
.current-cycle-witchatea .current-cycle-witchatea__inner {
  animation: current-cycle-fade-in 0.8s ease-out forwards;
  animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
  .current-cycle-witchatea .current-cycle-witchatea__inner {
    animation: none;
  }
}
/* Desktop: 2-column flex, organized horizontally */
@media (min-width: 48rem) {
  .current-cycle-witchatea {
    padding: clamp(1.9rem, 3.3vw, 2.5rem) 1rem;
  }
  .current-cycle-witchatea .current-cycle-witchatea__inner {
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(2.2rem, 4.4vw, 3rem);
    padding: clamp(1.65rem, 3.3vw, 2rem) clamp(1.9rem, 3.8vw, 2.2rem);
    max-width: 86rem;
  }
  .current-cycle-witchatea__phase-block {
    flex: 0 0 auto;
    width: clamp(20rem, 38%, 28rem);
    padding-right: clamp(1.9rem, 3.8vw, 2.2rem);
    border-right: 1px solid color-mix(in srgb, var(--primary-light) 35%, transparent);
    display: flex;
    align-items: flex-start;
  }
  .current-cycle-witchatea__phase-content {
    text-align: left;
    margin: 0;
    max-width: none;
  }
  .current-cycle-witchatea__phase-content .ritual-calendar-phase-title,
  .current-cycle-witchatea__phase-content .current-moment-witchatea__mood {
    text-align: left;
  }
  /* Desktop: ~60% scale-up for Current Moment */
  .current-cycle-witchatea__eyebrow {
    margin-bottom: 0.85rem;
    padding-bottom: 0.55rem;
  }
  .current-cycle-witchatea__eyebrow-text {
    font-size: 0.9375rem;
  }
  .ritual-calendar-phase-title {
    margin: 0 0 0.85rem 0;
    gap: 0.35rem;
  }
  .ritual-calendar-phase-label {
    font-size: 1rem;
  }
  .current-moment-witchatea__phase {
    font-size: clamp(1.9rem, 3.3vw, 2.5rem);
  }
  .current-cycle-witchatea__phase-icon {
    margin: 0.85rem 0;
  }
  .current-cycle-witchatea__phase-icon img {
    width: clamp(62px, 10vw, 80px);
    height: clamp(62px, 10vw, 80px);
  }
  .current-moment-witchatea__mood {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    margin: 0 0 1.1rem 0;
  }
  .current-cycle-witchatea__recommendation {
    padding: 0.85rem 1.25rem;
    gap: 0.55rem;
  }
  .current-cycle-witchatea__recommendation-label {
    font-size: 0.875rem;
  }
  .current-cycle-witchatea__recommendation-chip {
    font-size: 1.25rem;
  }
  .current-cycle-witchatea__blend-package img {
    max-width: 176px;
  }
  .current-cycle-witchatea__divider {
    display: none;
  }
  .current-cycle-witchatea__calendar-block {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 42rem;
    padding-left: clamp(1.65rem, 3.3vw, 1.9rem);
    display: flex;
    flex-direction: column;
  }
}
/* ============================================ */
/*     Moon Phases (Ritual Calendar)           */
/* ============================================ */
.moon-phases-witchatea {
  padding: var(--sectionPadding);
  background-color: var(--white);
  /* Desktop: 4×2 arrangement */
  /* Tablet: 2 columns */
  /* Mobile: 1 column */
}
.moon-phases-witchatea .cs-container {
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 0 1rem;
}
.moon-phases-witchatea .cs-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2.5rem;
}
.moon-phases-witchatea .cs-content .cs-topper,
.moon-phases-witchatea .cs-content .cs-title,
.moon-phases-witchatea .cs-content .cs-text {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.moon-phases-witchatea .moon-phases-witchatea__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 64rem) {
  .moon-phases-witchatea .moon-phases-witchatea__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .moon-phases-witchatea .moon-phases-witchatea__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 47.9375rem) {
  .moon-phases-witchatea .moon-phases-witchatea__grid {
    grid-template-columns: 1fr;
  }
}
.moon-phases-witchatea .moon-phases-witchatea__card {
  background-color: var(--white);
  border-radius: 1rem;
  padding: 1.75rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.moon-phases-witchatea .moon-phases-witchatea__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.moon-phases-witchatea .moon-phases-witchatea__icon {
  margin-bottom: 1rem;
}
.moon-phases-witchatea .moon-phases-witchatea__icon img {
  display: inline-block;
  width: 48px;
  height: 48px;
  vertical-align: middle;
}
.moon-phases-witchatea .moon-phases-witchatea__name {
  margin: 0 0 0.35rem 0;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  color: var(--primary);
}
.moon-phases-witchatea .moon-phases-witchatea__ritual-type {
  display: block;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-light);
  margin-bottom: 0.75rem;
}
.moon-phases-witchatea .moon-phases-witchatea__copy {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--grey-dark);
}

/* ============================================ */
/*     Seasonal Shifts (Ritual Calendar)       */
/* ============================================ */
.seasonal-shifts-witchatea {
  padding: var(--sectionPadding);
  background-color: var(--grey-light);
}
.seasonal-shifts-witchatea .cs-container {
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 0 1rem;
}
.seasonal-shifts-witchatea .cs-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2.5rem;
}
.seasonal-shifts-witchatea .cs-content .cs-topper,
.seasonal-shifts-witchatea .cs-content .cs-title,
.seasonal-shifts-witchatea .cs-content .cs-text {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.seasonal-shifts-witchatea .seasonal-shifts-witchatea__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.seasonal-shifts-witchatea .seasonal-shifts-witchatea__card {
  background-color: var(--white);
  border-radius: 1rem;
  padding: 1.75rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.seasonal-shifts-witchatea .seasonal-shifts-witchatea__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.seasonal-shifts-witchatea .seasonal-shifts-witchatea__name {
  margin: 0 0 0.75rem 0;
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  color: var(--primary);
}
.seasonal-shifts-witchatea .seasonal-shifts-witchatea__copy {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--grey-dark);
}

/* ============================================ */
/*  Ritual Calendar – Section Headers          */
/*  Match Blends "Our Philosophy" style         */
/* ============================================ */
.ritual-calendar-page .moon-phases-witchatea .cs-content,
.ritual-calendar-page .seasonal-shifts-witchatea .cs-content,
.ritual-calendar-page #moments-of-return .cs-content--day-moments,
.ritual-calendar-page .ritual-calendar-blends .cs-content {
  text-align: center;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}
.ritual-calendar-page .moon-phases-witchatea .cs-content .cs-topper,
.ritual-calendar-page .seasonal-shifts-witchatea .cs-content .cs-topper,
.ritual-calendar-page #moments-of-return .cs-content--day-moments .cs-topper,
.ritual-calendar-page .ritual-calendar-blends .cs-content .cs-topper {
  color: var(--primary-light);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
}
.ritual-calendar-page .moon-phases-witchatea .cs-content .cs-title,
.ritual-calendar-page .seasonal-shifts-witchatea .cs-content .cs-title,
.ritual-calendar-page #moments-of-return .cs-content--day-moments .cs-title,
.ritual-calendar-page .ritual-calendar-blends .cs-content .cs-title {
  font-family: var(--font-heading);
  color: var(--headerColor);
  font-weight: 700;
  font-size: clamp(2.25rem, 4vw, 3.125rem);
  line-height: 1.2;
  text-align: center;
  margin: 0.35rem 0 0.75rem;
  letter-spacing: -0.02em;
}
.ritual-calendar-page .moon-phases-witchatea .cs-content .cs-text,
.ritual-calendar-page .seasonal-shifts-witchatea .cs-content .cs-text,
.ritual-calendar-page #moments-of-return .cs-content--day-moments .cs-text,
.ritual-calendar-page .ritual-calendar-blends .cs-content .cs-text {
  font-family: var(--font-body);
  color: var(--bodyTextColor);
  font-size: clamp(1.0625rem, 1.3vw, 1.125rem);
  line-height: 1.65;
  text-align: center;
  margin: 0;
  opacity: 0.92;
}
.ritual-calendar-page .ritual-calendar-blends .cs-content {
  margin-bottom: 1.5rem;
}

/* ============================================ */
/*  Rituals Page – Section Headers              */
/*  Match Blends "Our Philosophy" style         */
/* ============================================ */
.ritual-page #day-moments .cs-content--day-moments,
.ritual-page #rituals-blends-cards .cs-content {
  text-align: center;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}
.ritual-page #day-moments .cs-content--day-moments .cs-topper,
.ritual-page #rituals-blends-cards .cs-content .cs-topper {
  color: var(--primary-light);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
}
.ritual-page #day-moments .cs-content--day-moments .cs-title,
.ritual-page #rituals-blends-cards .cs-content .cs-title {
  font-family: var(--font-heading);
  color: var(--headerColor);
  font-weight: 700;
  font-size: clamp(2.25rem, 4vw, 3.125rem);
  line-height: 1.2;
  text-align: center;
  margin: 0.35rem 0 0.75rem;
  letter-spacing: -0.02em;
}
.ritual-page #day-moments .cs-content--day-moments .cs-text,
.ritual-page #rituals-blends-cards .cs-content .cs-text {
  font-family: var(--font-body);
  color: var(--bodyTextColor);
  font-size: clamp(1.0625rem, 1.3vw, 1.125rem);
  line-height: 1.65;
  text-align: center;
  margin: 0;
  opacity: 0.92;
}

/* ============================================ */
/*  Rituals Page – Blends by Ritual Cards       */
/*  Cream background, blends-grid card patterns */
/* ============================================ */
#rituals-blends-cards {
  padding: var(--sectionPadding);
  background-color: var(--grey-light);
}
#rituals-blends-cards .cs-content {
  margin-bottom: 2rem;
}
#rituals-blends-cards.rituals-blends-cards--centered .cs-content {
  text-align: center !important;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}
#rituals-blends-cards.rituals-blends-cards--centered .cs-content .cs-topper, #rituals-blends-cards.rituals-blends-cards--centered .cs-content .cs-title, #rituals-blends-cards.rituals-blends-cards--centered .cs-content .cs-text {
  text-align: center !important;
}
#rituals-blends-cards .cs-card-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 48rem) {
  #rituals-blends-cards .cs-card-group {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64rem) {
  #rituals-blends-cards .cs-card-group {
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(1.25rem, 2vw, 1.5rem);
  }
}
#rituals-blends-cards .cs-item-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
#rituals-blends-cards .cs-item {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.06);
  border-top: 4px solid var(--primary);
}
#rituals-blends-cards .cs-item picture {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1.2/1;
  background: var(--primary);
  overflow: hidden;
  padding: 0.5rem;
}
#rituals-blends-cards .cs-item picture img {
  width: auto;
  height: auto;
  max-width: 95%;
  max-height: 95%;
  object-fit: contain;
}
#rituals-blends-cards .cs-item .cs-item-content {
  padding: 1.25rem 1.5rem;
}
#rituals-blends-cards .cs-item .rituals-blends-cards__ritual-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-light);
  margin-bottom: 0.25rem;
}
#rituals-blends-cards .cs-item .cs-h3 {
  margin: 0 0 0.25rem 0;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--headerColor);
}
#rituals-blends-cards .cs-item .rituals-blends-cards__tagline {
  margin: 0 0 0.35rem 0;
  font-size: 0.875rem;
  color: var(--primary-light);
}
#rituals-blends-cards .cs-item .rituals-blends-cards__ritual-preview {
  margin: 0.35rem 0 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--primary);
}
#rituals-blends-cards .cs-item .blends-grid__cta {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
}
@media (hover: hover) {
  #rituals-blends-cards .cs-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 12px 32px rgba(0, 0, 0, 0.08);
  }
}

/* ============================================ */
/*  Moments of Return (Ritual Calendar)        */
/*  Standalone – separate from day-moments      */
/*  White bg, timeline layout, 3 items          */
/* ============================================ */
#moments-of-return.value-proposition {
  padding: var(--sectionPadding);
  position: relative;
  background: var(--white);
  overflow: hidden;
}
#moments-of-return.value-proposition .cs-container {
  max-width: 900px;
  padding: 0 1rem;
}
#moments-of-return.value-proposition .cs-content--day-moments {
  margin-bottom: 2.5rem;
}
#moments-of-return.value-proposition .cs-text--lead {
  font-weight: 400;
  line-height: 1.6;
  color: var(--bodyTextColor);
}
#moments-of-return.value-proposition .cs-content--day-moments-cta {
  margin-top: 3.5rem;
  margin-bottom: 0;
}
#moments-of-return.value-proposition .day-moments-timeline {
  position: relative;
  min-height: 220px;
}
#moments-of-return.value-proposition .day-moments-line-inner {
  position: absolute;
  top: 0;
  left: 1rem;
  width: 1px;
  height: 100%;
  min-height: 180px;
  background: color-mix(in srgb, var(--primary-light) 10%, transparent);
  transform-origin: top;
  transform: scaleY(1);
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}
#moments-of-return.value-proposition .day-moments-node {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#moments-of-return.value-proposition .day-moments-node-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--primary) 50%, transparent);
  background: transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}
#moments-of-return.value-proposition .day-moments-node-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  color: var(--primary);
}
#moments-of-return.value-proposition .day-moments-node-icon path {
  stroke: currentColor;
  fill: none;
}
#moments-of-return.value-proposition .day-moments-node-icon path[fill=currentColor] {
  fill: currentColor;
}
@media (hover: hover) {
  #moments-of-return.value-proposition .day-moments-item:hover .day-moments-node-dot {
    border-color: var(--primary-light);
    background-color: color-mix(in srgb, var(--primary-light) 25%, transparent);
  }
  #moments-of-return.value-proposition .day-moments-item:hover .day-moments-node-icon {
    color: var(--primary-light);
  }
  #moments-of-return.value-proposition .day-moments-item:hover .day-moments-label {
    color: var(--primary-light);
  }
  #moments-of-return.value-proposition .day-moments-item {
    transition: background-color 0.2s ease;
  }
  #moments-of-return.value-proposition .day-moments-item:hover {
    background-color: color-mix(in srgb, var(--primary-light) 6%, transparent);
    border-radius: 0.5rem;
  }
}
#moments-of-return.value-proposition .day-moments-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}
#moments-of-return.value-proposition .day-moments-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
#moments-of-return.value-proposition .day-moments-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.5rem;
  transition: color 0.25s ease;
}
#moments-of-return.value-proposition .day-moments-desc {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.55;
  font-weight: 500;
  color: var(--bodyTextColor);
}
#moments-of-return.value-proposition .day-moments-cta {
  text-align: center;
}
#moments-of-return.value-proposition .day-moments-cta-copy {
  margin: 0 0 0.5rem 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--bodyTextColor) 80%, transparent);
}
#moments-of-return.value-proposition .day-moments-cta .cs-button-solid {
  font-size: 0.9375rem;
  padding: 0.65rem 1.5rem;
}
@media (max-width: 47.9375rem) {
  #moments-of-return.value-proposition .day-moments-line-inner {
    min-height: 200px;
  }
  #moments-of-return.value-proposition .day-moments-list {
    gap: 2.5rem;
  }
}
@media (min-width: 64rem) {
  #moments-of-return.value-proposition .cs-container {
    margin-left: auto;
    margin-right: auto;
  }
  #moments-of-return.value-proposition .cs-content--day-moments {
    text-align: center;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
  }
  #moments-of-return.value-proposition .day-moments-timeline {
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
  }
  #moments-of-return.value-proposition .day-moments-cta {
    text-align: center;
  }
}

/* ============================================ */
/*  Ritual Calendar – Blends Carousel          */
/*  Premium: 3 visible, arrows, cream bg       */
/* ============================================ */
.ritual-calendar-blends {
  /* Single premium cream background – no white/cream split */
  padding: var(--sectionPadding);
  background-color: var(--grey-light);
}

.ritual-calendar-blends-carousel {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 72rem;
  margin: 0 auto;
}

.ritual-calendar-blends-carousel__arrow {
  flex-shrink: 0;
  width: 3rem;
  min-height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
.ritual-calendar-blends-carousel__arrow:hover:not(:disabled) {
  color: var(--primary-light);
  transform: scale(1.1);
}
.ritual-calendar-blends-carousel__arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.ritual-calendar-blends-carousel__arrow:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 2px;
}
@media (max-width: 47.9375rem) {
  .ritual-calendar-blends-carousel__arrow {
    width: 2.5rem;
    min-height: 6rem;
  }
}

.ritual-calendar-blends-carousel__track-wrap {
  flex: 1;
  overflow: hidden;
  min-width: 0;
  /* Card width = 1/3 of viewport for 3 visible */
  --card-width: calc((100% - 3rem) / 3);
  --gap: 1.5rem;
}
@media (max-width: 63.9375rem) {
  .ritual-calendar-blends-carousel__track-wrap {
    --card-width: calc((100% - 1.5rem) / 2);
  }
}
@media (max-width: 47.9375rem) {
  .ritual-calendar-blends-carousel__track-wrap {
    --card-width: 100%;
    --gap: 0;
  }
}

.ritual-calendar-blends-carousel__track {
  display: flex;
  gap: var(--gap, 1.5rem);
  list-style: none;
  padding: 0;
  margin: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  /* Track width = 5 cards + 4 gaps */
  width: calc(5 * var(--card-width) + 4 * var(--gap, 1.5rem));
}

.ritual-calendar-blends-carousel__card {
  flex: 0 0 var(--card-width);
  min-width: 0;
}

.ritual-calendar-blends-carousel__card-link {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-top: 4px solid var(--primary);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
}
@media (hover: hover) {
  .ritual-calendar-blends-carousel__card-link:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 16px 40px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  }
}

.ritual-calendar-blends-carousel__card picture {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1.2/1;
  background: var(--primary);
  padding: 0.5rem;
}
.ritual-calendar-blends-carousel__card picture img {
  width: auto;
  height: auto;
  max-width: 95%;
  max-height: 95%;
  object-fit: contain;
  border-radius: 4px;
}

.ritual-calendar-blends-carousel__card-content {
  padding: 1.25rem 1.5rem;
}

.ritual-calendar-blends-carousel__card-title {
  margin: 0 0 0.25rem 0;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 600;
  color: var(--headerColor);
}

.ritual-calendar-blends-carousel__card-tagline {
  margin: 0 0 0.25rem 0;
  font-size: 0.9rem;
  color: var(--primary-light);
}

.ritual-calendar-blends-carousel__card-meta {
  margin: 0 0 0.35rem 0;
  font-size: 0.8rem;
  color: var(--grey);
}

.ritual-calendar-blends-carousel__card-desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--bodyTextColor);
}

.ritual-calendar-blends-carousel__card-ingredients {
  margin: 0.4rem 0 0 0;
  font-size: 0.8rem;
  color: var(--grey);
}

.ritual-calendar-blends-carousel__card-ritual {
  margin: 0.35rem 0 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--primary);
}

.ritual-calendar-blends-carousel__cta {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
}

.ritual-calendar-blends-carousel__card-link:hover .ritual-calendar-blends-carousel__cta {
  color: var(--primary-light);
}

/* ============================================ */
/*     Ritual Calendar Grid (8 phases)         */
/* ============================================ */
.ritual-calendar-grid-witchatea {
  padding: var(--sectionPadding);
  background-color: var(--white);
  /* When inside Current Cycle: no extra padding, use card styling */
  /* Hover: scale moon icon, brighten cell outline */
}
.ritual-calendar-grid-witchatea .cs-container {
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 0 1rem;
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__inner {
  max-width: 36rem;
  margin: 0 auto;
}
.current-cycle-witchatea .ritual-calendar-grid-witchatea {
  padding: 0;
  width: 100%;
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__inner--card {
  max-width: none;
  background-color: color-mix(in srgb, var(--white) 97%, var(--grey-light));
  border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius: 8px;
  padding: 0.5rem 0.625rem;
  box-shadow: 0 1px 8px rgba(22, 37, 31, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__inner--card .ritual-calendar-grid-witchatea__header {
  margin-bottom: 0.35rem;
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__inner--card .ritual-calendar-grid-witchatea__weekdays {
  margin-bottom: 0.25rem;
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__inner--card .ritual-calendar-grid-witchatea__title {
  font-size: clamp(1.2rem, 2vw, 1.35rem);
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__inner--card .ritual-calendar-grid-witchatea__logo img {
  width: clamp(36px, 8vw, 56px);
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__title {
  margin: 0;
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  color: var(--primary);
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__logo {
  opacity: 0.5;
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__logo img {
  display: block;
  width: clamp(50px, 10vw, 80px);
  height: auto;
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
  margin-bottom: 0.35rem;
  font-size: clamp(0.65rem, 1.3vw, 0.7rem);
  font-weight: 600;
  color: var(--primary-light);
  text-align: center;
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
  min-height: 100px;
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__cell {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.15rem;
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--grey-light) 95%, var(--white));
  font-size: clamp(0.65rem, 2vw, 0.8rem);
  color: var(--grey-dark);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__cell.other-month {
  opacity: 0.4;
  background-color: transparent;
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__cell.today {
  background-color: color-mix(in srgb, var(--primary-light) 18%, var(--grey-light));
  color: var(--grey-dark);
  font-weight: 600;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-light) 70%, transparent), 0 0 12px color-mix(in srgb, var(--primary-light) 25%, transparent);
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__cell.today:hover, .ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__cell.today:focus-within {
  transform: scale(1.02);
  box-shadow: 0 0 0 2px var(--primary-light), 0 0 16px color-mix(in srgb, var(--primary-light) 35%, transparent);
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__cell:not(.other-month):hover .ritual-calendar-grid-witchatea__cell-icon,
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__cell:not(.other-month):focus-within .ritual-calendar-grid-witchatea__cell-icon {
  transform: scale(1.05);
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__cell-num {
  line-height: 1.2;
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__cell-icon {
  width: clamp(14px, 3.5vw, 20px);
  height: clamp(14px, 3.5vw, 20px);
  margin-top: 0.15rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__cell-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__blend-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-0.5rem);
  background: var(--white);
  border-radius: 8px;
  padding: 0.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 140px;
  max-width: 180px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 10;
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__blend-tooltip img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__blend-tooltip span {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  margin-top: 0.5rem;
  text-align: center;
}
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__cell.today:hover .ritual-calendar-grid-witchatea__blend-tooltip,
.ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__cell.today:focus-within .ritual-calendar-grid-witchatea__blend-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-0.5rem);
}
@media (max-width: 47.9375rem) {
  .ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__grid {
    gap: 0.25rem;
  }
  .ritual-calendar-grid-witchatea .ritual-calendar-grid-witchatea__cell {
    min-height: 44px;
    padding: 0.2rem;
  }
}

/* Desktop: ~60% scale-up when inside Current Cycle */
@media (min-width: 48rem) {
  .current-cycle-witchatea .ritual-calendar-grid-witchatea__inner--card {
    padding: 0.85rem 1.05rem;
    border-radius: 11px;
  }
  .current-cycle-witchatea .ritual-calendar-grid-witchatea__inner--card .ritual-calendar-grid-witchatea__header {
    margin-bottom: 0.55rem;
  }
  .current-cycle-witchatea .ritual-calendar-grid-witchatea__inner--card .ritual-calendar-grid-witchatea__weekdays {
    margin-bottom: 0.45rem;
  }
  .current-cycle-witchatea .ritual-calendar-grid-witchatea__inner--card .ritual-calendar-grid-witchatea__title {
    font-size: clamp(1.65rem, 2.75vw, 2.2rem);
  }
  .current-cycle-witchatea .ritual-calendar-grid-witchatea__inner--card .ritual-calendar-grid-witchatea__logo img {
    width: clamp(58px, 11vw, 88px);
  }
  .current-cycle-witchatea .ritual-calendar-grid-witchatea__weekdays {
    margin-bottom: 0.55rem;
    font-size: clamp(0.9rem, 1.65vw, 1.1rem);
    gap: 0.35rem;
  }
  .current-cycle-witchatea .ritual-calendar-grid-witchatea__grid {
    gap: 0.4rem;
    min-height: 176px;
  }
  .current-cycle-witchatea .ritual-calendar-grid-witchatea__cell {
    padding: 0.28rem;
    border-radius: 9px;
    font-size: clamp(1rem, 2.75vw, 1.25rem);
  }
  .current-cycle-witchatea .ritual-calendar-grid-witchatea__cell-icon {
    width: clamp(22px, 5.5vw, 33px);
    height: clamp(22px, 5.5vw, 33px);
    margin-top: 0.28rem;
  }
}
/* ============================================
   WitchaTea Hero Variants (8 layouts)
   Packaging image + optional SVG dividers
   ============================================ */
/* Mobile: #main padding reserves space below fixed nav (set in critical.scss); no first-child override needed */
.hero-variant {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--primary);
  /* CTA buttons: always white text on gold background (avoid inheriting gold link color) */
}
.hero-variant .cs-topper {
  color: var(--primary-light);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.hero-variant .cs-title {
  color: var(--white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.hero-variant .cs-text,
.hero-variant .hero-variant__subtitle {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.hero-variant a {
  color: var(--primary-light);
  text-decoration: underline;
}
.hero-variant .cs-button-solid,
.hero-variant .cs-button-group .cs-button-solid {
  color: var(--white) !important;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-variant__inner {
  position: relative;
  min-height: 420px;
}

.hero-variant__content {
  position: relative;
  z-index: 2;
  padding: var(--sectionPadding);
  max-width: 36rem;
}
.hero-variant__content--dark {
  background-color: transparent;
}
.hero-variant__content--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 40rem;
  min-width: 0; /* allow shrinking inside overlay flex to prevent horizontal overflow */
}
.hero-variant__content--overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(1.5rem, 4vw, var(--sectionPadding));
  min-width: 0; /* allow flex children to shrink, avoid horizontal overflow */
  overflow: hidden; /* no scrollbar ever inside hero */
  box-sizing: border-box;
  /* Variant 2/7 (wave at bottom): clear gap above wave so content doesn't overlap */
}
.hero-variant--2 .hero-variant__content--overlay, .hero-variant--7 .hero-variant__content--overlay {
  bottom: 8.5rem;
}
.hero-variant__content--compact {
  max-width: 100%;
}
.hero-variant__content--band {
  padding: clamp(1.5rem, 5vw, 2rem) 1rem var(--sectionPadding);
  max-width: 48rem;
  margin: 0 auto;
}

.hero-variant__subtitle {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-style: italic;
  margin: 0.5rem 0 1rem;
}

.hero-variant__cta {
  margin-top: 1.5rem;
}
.hero-variant__cta--full {
  width: 100%;
}

/* Subtle ghost link for About hero (inherited, not commercial) */
.hero-variant__cta-link {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 0.15em;
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.hero-variant__cta-link:hover {
  color: var(--white);
  border-bottom-color: var(--primary-light);
  transform: translateY(-2px);
}

.hero-variant__divider {
  position: relative;
  width: 100%;
  line-height: 0;
  display: block;
  margin-top: -1px;
  pointer-events: none;
  /* Overlay variants (2, 7): content is absolute so divider would sit at top; pin to bottom */
  /* Home (variant 1): slightly taller wave for a more pronounced “carve” */
}
.hero-variant--2 .hero-variant__divider, .hero-variant--7 .hero-variant__divider {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin-top: 0;
  z-index: 1; /* stay behind overlay (z-index 2) so wave never cuts CTAs */
}
.hero-variant__divider img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: bottom;
}
.hero-variant--1 .hero-variant__divider img {
  min-height: 100px;
}
@media (min-width: 48rem) {
  .hero-variant--1 .hero-variant__divider img {
    min-height: 140px;
  }
}
.hero-variant__divider--light img {
  filter: brightness(0) invert(1);
}
.hero-variant__divider--parchment img {
  filter: none;
}

.hero-variant__line {
  height: 4px;
  background: var(--primary);
  width: 100%;
}

/* Section right after hero (all viewports): remove gap so no flat line between wave and content */
#hero-variant + section {
  margin-top: -1px;
}

/* --------------- Variant 1: Split (Home) --------------- */
.hero-variant--1 .hero-variant__inner {
  min-height: 420px;
}

.hero-variant__split {
  display: flex;
  flex-direction: column;
  min-height: 420px;
}
@media (min-width: 64rem) {
  .hero-variant__split {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    min-height: 520px;
  }
}

.hero-variant--1 .hero-variant__content {
  flex: 1 1 50%;
  padding: var(--sectionPadding);
}

.hero-variant__media {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.1);
}
@media (min-width: 64rem) {
  .hero-variant__media {
    padding: 2rem;
  }
}
.hero-variant__media img {
  max-height: min(50vw, 420px);
  width: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

/* --------------- Variant 2: Full-bleed bg (About) --------------- */
.hero-variant__bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-variant__bg-wrap.hero-variant__bg-wrap--soft .hero-variant__overlay {
  background: linear-gradient(180deg, rgba(20, 37, 31, 0.4) 0%, rgba(20, 37, 31, 0.85) 100%);
}

.hero-variant__bg-img {
  position: absolute;
  inset: 0;
}
.hero-variant__bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-variant__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 37, 31, 0.78) 0%, rgba(20, 37, 31, 0.97) 100%);
}
.hero-variant__overlay--strong {
  background: linear-gradient(180deg, rgba(20, 37, 31, 0.82) 0%, rgba(20, 37, 31, 0.98) 100%);
}

.hero-variant--2 .hero-variant__inner {
  min-height: 620px; /* enough height so overlay content + CTAs fit without clipping */
}
@media (min-width: 48rem) {
  .hero-variant--2 .hero-variant__inner {
    min-height: 620px;
  }
}

/* Variant 2 (full-bleed): stronger text contrast so headline isn’t eaten by background */
.hero-variant--2 .hero-variant__content--overlay::before {
  content: "";
  position: absolute;
  inset: -2rem;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(20, 37, 31, 0.88) 0%, rgba(20, 37, 31, 0.75) 50%, rgba(20, 37, 31, 0.5) 100%);
  z-index: -1;
  pointer-events: none;
}
.hero-variant--2 .hero-variant__content--overlay .cs-topper {
  color: var(--primary-light) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 16px rgba(0, 0, 0, 0.3);
}
.hero-variant--2 .hero-variant__content--overlay .cs-title,
.hero-variant--2 .hero-variant__content--overlay h1 {
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 24px rgba(0, 0, 0, 0.35);
}
.hero-variant--2 .hero-variant__content--overlay .cs-text,
.hero-variant--2 .hero-variant__content--overlay .hero-variant__subtitle {
  color: rgba(255, 255, 255, 0.98) !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5), 0 0 16px rgba(0, 0, 0, 0.25);
}
.hero-variant--2 .hero-variant__content--overlay .hero-variant__cta {
  margin-bottom: 1rem; /* buffer so CTAs sit clearly inside overlay, not at clip edge */
}

/* Variant 2 mobile: overlay padding + alignment + typography so content fits without scrollbar/clipping */
@media (max-width: 63.999rem) {
  .hero-variant--2 .hero-variant__content--overlay {
    padding: 7rem clamp(1.5rem, 4vw, 2rem) 2.5rem;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  .hero-variant--2 .hero-variant__content--overlay .hero-variant__content--center {
    max-width: 100%;
  }
  .hero-variant--2 .hero-variant__content--overlay .cs-topper {
    font-size: clamp(0.8125rem, 2vw, 1rem);
  }
  .hero-variant--2 .hero-variant__content--overlay .cs-title,
  .hero-variant--2 .hero-variant__content--overlay h1 {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }
  .hero-variant--2 .hero-variant__content--overlay .cs-text,
  .hero-variant--2 .hero-variant__content--overlay .hero-variant__subtitle {
    font-size: clamp(0.9375rem, 2.2vw, 1.1rem);
    line-height: 1.45;
  }
}
/* Variant 2 desktop: overlay min top padding so topper isn't flush, wide box, typography */
@media (min-width: 64rem) {
  .hero-variant--2 .hero-variant__content--overlay {
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 2.5rem) 2.5rem;
    justify-content: center;
  }
  .hero-variant--2 .hero-variant__content--overlay .hero-variant__content--center {
    max-width: min(90rem, 92vw); /* wide box: use most of viewport, cap for very large screens */
  }
  .hero-variant--2 .hero-variant__content--overlay .cs-topper {
    font-size: clamp(0.9375rem, 1.35vw, 1.125rem);
  }
  .hero-variant--2 .hero-variant__content--overlay .cs-title,
  .hero-variant--2 .hero-variant__content--overlay h1 {
    font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  }
  .hero-variant--2 .hero-variant__content--overlay .cs-text,
  .hero-variant--2 .hero-variant__content--overlay .hero-variant__subtitle {
    font-size: clamp(1.0625rem, 1.25vw, 1.2rem);
    line-height: 1.5;
  }
}
/* --------------- Variant 3: Floating card (Blends) - 3 equal sections: empty left, centered text, image right --------------- */
.hero-variant__layout-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: var(--sectionPadding);
  min-height: 420px;
  text-align: center;
}
@media (min-width: 64rem) {
  .hero-variant__layout-card {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    align-items: center;
    min-height: 520px;
  }
}

.hero-variant--3 .hero-variant__content {
  order: 1;
  text-align: center;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
.hero-variant--3 .hero-variant__content .cs-topper,
.hero-variant--3 .hero-variant__content .cs-title,
.hero-variant--3 .hero-variant__content .hero-variant__subtitle,
.hero-variant--3 .hero-variant__content .cs-text {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 64rem) {
  .hero-variant--3 .hero-variant__content {
    grid-column: 2;
    margin-left: auto;
    margin-right: auto;
  }
}

.hero-variant--3 .hero-variant__card-wrap {
  order: 2;
}
@media (min-width: 64rem) {
  .hero-variant--3 .hero-variant__card-wrap {
    width: fit-content;
    justify-self: center;
  }
}

.hero-variant__card-wrap {
  order: 0;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  border: 2px solid rgba(182, 155, 118, 0.4);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}
@media (min-width: 64rem) {
  .hero-variant__card-wrap {
    grid-column: 3;
  }
}
.hero-variant__card-wrap img {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
  border-radius: 12px;
  margin: 0 auto;
}
.hero-variant__card-wrap--calendar {
  padding: 1.25rem 1.5rem;
}
.hero-variant__card-wrap--calendar img {
  width: auto;
  max-width: none;
  border-radius: 0;
  margin: 0;
}

/* --------------- Variant 4: Strip right (Rituals) --------------- */
.hero-variant__layout-strip {
  display: flex;
  flex-direction: column;
  min-height: 420px;
}
@media (min-width: 64rem) {
  .hero-variant__layout-strip {
    flex-direction: row;
    min-height: 520px;
  }
}

.hero-variant--4 .hero-variant__content {
  flex: 1;
  padding: var(--sectionPadding);
}

.hero-variant__strip {
  flex-shrink: 0;
  width: 100%;
  max-height: 320px;
  overflow: hidden;
}
@media (min-width: 64rem) {
  .hero-variant__strip {
    width: 320px;
    max-height: none;
  }
}
.hero-variant__strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-variant__strip--gold {
  border-left: 6px solid var(--primary-light);
}
@media (max-width: 63.999rem) {
  .hero-variant__strip--gold {
    border-left: none;
    border-top: 6px solid var(--primary-light);
  }
}

/* --------------- Variant 5: Diagonal (Ritual Calendar) --------------- */
.hero-variant__diagonal {
  position: relative;
  min-height: 520px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}
@media (min-width: 64rem) {
  .hero-variant__diagonal {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);
  }
}

.hero-variant__diagonal-green {
  background: var(--primary);
  padding: var(--sectionPadding);
  display: flex;
  align-items: center;
}
@media (min-width: 64rem) {
  .hero-variant__diagonal-green {
    grid-column: 1;
    grid-row: 1;
  }
}

.hero-variant__diagonal-img {
  min-height: 280px;
  background: var(--primary);
}
@media (min-width: 64rem) {
  .hero-variant__diagonal-img {
    grid-column: 2;
    grid-row: 1;
    min-height: 100%;
  }
}
.hero-variant__diagonal-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --------------- Variant 6: Compact (Where to Buy) --------------- */
.hero-variant__compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.5rem, 5vw, var(--sectionPadding));
  min-height: 300px;
}
@media (min-width: 48rem) {
  .hero-variant__compact {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
  }
}

.hero-variant__compact-media {
  flex-shrink: 0;
  order: 0;
  z-index: 0;
}
.hero-variant__compact-media img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
@media (min-width: 48rem) {
  .hero-variant__compact-media img {
    width: 180px;
    height: 180px;
  }
}

.hero-variant--6 .hero-variant__content--compact {
  flex: 1 1 50%;
  min-width: 0;
  max-width: 28rem;
  position: relative;
  z-index: 1;
  text-align: center;
}
@media (min-width: 48rem) {
  .hero-variant--6 .hero-variant__content--compact {
    text-align: left;
  }
}

/* --------------- Variant 7: Soft bg (FAQ) --------------- */
.hero-variant--7 .hero-variant__inner {
  min-height: clamp(320px, 50vh, 520px);
}
@media (min-width: 48rem) {
  .hero-variant--7 .hero-variant__inner {
    min-height: 520px;
  }
}

/* Variant 7: white curve blends to white FAQ content; no filter */
.hero-variant__divider--cream img {
  filter: none;
}

/* --------------- Variant 8: Band (Contact) --------------- */
.hero-variant__band {
  position: relative;
  height: clamp(200px, 38vw, 360px);
  overflow: hidden;
}

.hero-variant__band-img {
  position: absolute;
  inset: 0;
}
.hero-variant__band-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.hero-variant__band-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 37, 31, 0.25) 0%, rgba(20, 37, 31, 0.7) 100%);
}

.hero-variant__band-text {
  margin-bottom: 1rem;
}

.hero-variant--8 .hero-variant__inner {
  min-height: auto;
  background: var(--grey-light);
}

.hero-variant--8 .hero-variant__content--band .cs-title,
.hero-variant--8 .hero-variant__content--band .cs-topper {
  color: var(--primary);
  text-shadow: none;
}

.hero-variant--8 .hero-variant__content--band .cs-text,
.hero-variant--8 .hero-variant__content--band .hero-variant__band-text {
  color: var(--bodyTextColor);
  text-shadow: none;
}

.hero-variant--8 .hero-variant__content--band a {
  color: var(--primary);
}

.hero-variant--8 .hero-variant__divider--parchment img {
  fill: var(--grey-light);
}

.hero-variant__divider--parchment img {
  filter: none;
}

/* Button group in hero */
.hero-variant .cs-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

/* --------------- Hero Calendar Preview (Variant 3, Ritual Calendar) --------------- */
.hero-calendar-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 160px;
  max-width: 200px;
}

.hero-calendar-preview__moon {
  line-height: 0;
}
.hero-calendar-preview__moon img {
  display: block;
  width: 48px;
  height: 48px;
  max-width: 48px;
}

.hero-calendar-preview__label {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary-light);
}

.hero-calendar-preview__phase {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
}

.hero-calendar-preview__strip {
  display: flex;
  gap: 0.2rem;
  margin-top: 0.2rem;
}
.hero-calendar-preview__strip img {
  width: 16px;
  height: 16px;
  max-width: 16px;
  flex-shrink: 0;
}

.hero-calendar-preview__month {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
}

.hero-calendar-preview__hint {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 0.15rem;
}

/* --------------- Hero Marketplaces Preview (Variant 3, Where to Buy) --------------- */
.hero-marketplaces-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 180px;
  max-width: 220px;
}

.hero-marketplaces-preview__label {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary-light);
}

.hero-marketplaces-preview__strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.15rem;
}
.hero-marketplaces-preview__strip img {
  width: 32px;
  height: 32px;
  max-width: 32px;
  flex-shrink: 0;
  object-fit: contain;
  object-position: center;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.hero-marketplaces-preview__countries {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.04em;
}

.hero-marketplaces-preview__hint {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 0.1rem;
}

.hero-variant__card-wrap--marketplaces {
  padding: 1.25rem 1.5rem;
}
.hero-variant__card-wrap--marketplaces img {
  width: auto;
  max-width: none;
  border-radius: 0;
  margin: 0;
}

/*-- -------------------------- -->
   Hero Home (WitchaTea)
<--- -------------------------- -*/
/* Mobile - 360px and up */
@media only screen and (min-width: 0rem) {
  #hero-home {
    padding: clamp(7rem, 15vw, 12rem) 1rem 8rem;
    overflow: hidden;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
  }
  #hero-home .cs-container {
    width: 100%;
    max-width: 80rem;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  #hero-home .cs-content {
    text-align: center;
    width: 100%;
    max-width: 46.875rem;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  #hero-home .cs-topper {
    color: var(--primary-light);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  #hero-home .cs-title {
    color: var(--bodyTextColorWhite);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    max-width: 100%;
  }
  #hero-home .cs-text {
    color: var(--bodyTextColorWhite);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    margin-bottom: 1rem;
  }
  #hero-home .cs-text:last-of-type {
    margin-bottom: 1.5rem;
  }
  #hero-home .cs-text--lead {
    margin-bottom: 1.25rem;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    line-height: 1.5;
  }
  #hero-home .cs-button-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  #hero-home .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 11.25rem;
    margin: 0;
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: var(--primary-light);
    color: var(--white);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: opacity 0.2s ease;
  }
  #hero-home .cs-button-solid:hover {
    opacity: 0.95;
  }
  #hero-home .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-home .cs-background::before {
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(20, 37, 31, 0.75);
    pointer-events: none;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #hero-home .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Medium / large content width */
@media only screen and (min-width: 75rem) {
  #hero-home .cs-content {
    max-width: 56.25rem;
  }
}
/* Large Desktop - 1920px */
@media only screen and (min-width: 120rem) {
  #hero-home {
    padding-bottom: 14vw;
  }
  #hero-home .cs-content {
    max-width: 59.375rem;
  }
}
/* ============================================ */
/*        About Editorial Blocks               */
/* ============================================ */
#about-editorial.about-editorial,
#about-origin.about-editorial,
#about-tradition.about-editorial,
#about-ritual.about-editorial {
  padding: var(--sectionPadding);
}
#about-editorial.about-editorial .cs-container,
#about-origin.about-editorial .cs-container,
#about-tradition.about-editorial .cs-container,
#about-ritual.about-editorial .cs-container {
  width: 100%;
  max-width: 55rem;
  margin: 0 auto;
  padding: 0 1rem;
}
#about-editorial.about-editorial .about-editorial__block,
#about-origin.about-editorial .about-editorial__block,
#about-tradition.about-editorial .about-editorial__block,
#about-ritual.about-editorial .about-editorial__block {
  margin-bottom: 4rem;
  text-align: center;
}
#about-editorial.about-editorial .about-editorial__block:last-child,
#about-origin.about-editorial .about-editorial__block:last-child,
#about-tradition.about-editorial .about-editorial__block:last-child,
#about-ritual.about-editorial .about-editorial__block:last-child {
  margin-bottom: 0;
}
#about-editorial.about-editorial .cs-topper,
#about-origin.about-editorial .cs-topper,
#about-tradition.about-editorial .cs-topper,
#about-ritual.about-editorial .cs-topper {
  display: block;
  font-size: var(--topperFontSize);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-light);
  margin-bottom: 0.5rem;
}
#about-editorial.about-editorial .cs-title,
#about-origin.about-editorial .cs-title,
#about-tradition.about-editorial .cs-title,
#about-ritual.about-editorial .cs-title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--headerColor);
  margin-bottom: 1.5rem;
  max-width: 30ch;
  margin-left: auto;
  margin-right: auto;
}
#about-editorial.about-editorial .cs-text,
#about-origin.about-editorial .cs-text,
#about-tradition.about-editorial .cs-text,
#about-ritual.about-editorial .cs-text {
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);
  line-height: 1.7;
  color: var(--bodyTextColor);
  max-width: 50ch;
  margin: 0 auto;
  opacity: 0.9;
}

#about-editorial.about-editorial,
#about-origin.about-editorial,
#about-tradition.about-editorial {
  background-color: var(--white);
}

/* More Than a Beverage: parchment background for visual breathing between Tradition and What We Believe */
#about-ritual.about-editorial {
  background-color: var(--grey-light);
}

/* ============================================ */
/*        About Then / Now                      */
/* ============================================ */
#about-then-now.about-then-now {
  padding: var(--sectionPadding);
  background-color: var(--grey-light);
}
#about-then-now.about-then-now .cs-container {
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1rem;
}
#about-then-now.about-then-now .about-then-now__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
#about-then-now.about-then-now .about-then-now__divider {
  display: none;
}
#about-then-now.about-then-now .about-then-now__column {
  text-align: center;
}
#about-then-now.about-then-now .about-then-now__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--primary-light);
  margin-bottom: 1.25rem;
}
#about-then-now.about-then-now .about-then-now__text {
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);
  line-height: 1.8;
  color: var(--bodyTextColor);
  margin: 0 0 0.75rem 0;
  font-family: var(--fontSerif, "Cormorant Garamond", serif);
}

@media only screen and (min-width: 48rem) {
  #about-then-now.about-then-now .about-then-now__grid {
    grid-template-columns: 1fr auto 1fr;
    gap: 3rem;
  }
  #about-then-now.about-then-now .about-then-now__divider {
    display: block;
    width: 2px;
    min-height: 120px;
    background: linear-gradient(180deg, transparent 0%, var(--primary-light) 20%, var(--primary-light) 80%, transparent 100%);
    opacity: 0.5;
    margin: 0 auto;
  }
}
/* ============================================ */
/*        Founder Section (About)               */
/* ============================================ */
#founder-section.founder-section-witchatea {
  padding: var(--sectionPadding);
  background-color: var(--white);
  /* Signature-style typography: slightly more intimate, serif emphasis */
}
#founder-section.founder-section-witchatea .cs-container {
  width: 100%;
  max-width: 50rem;
  margin: 0 auto;
  padding: 0 1rem;
}
#founder-section.founder-section-witchatea .founder-section-witchatea__inner {
  text-align: center;
}
#founder-section.founder-section-witchatea .cs-topper {
  display: block;
  font-size: var(--topperFontSize);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-light);
  margin-bottom: 0.5rem;
}
#founder-section.founder-section-witchatea .cs-title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--headerColor);
  margin-bottom: 1.5rem;
}
#founder-section.founder-section-witchatea .cs-text {
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);
  line-height: 1.7;
  color: var(--bodyTextColor);
  margin-bottom: 2rem;
  opacity: 0.95;
}
#founder-section.founder-section-witchatea .founder-section-witchatea__quote {
  margin: 2.5rem 0 0 0;
  padding: 2rem 2.5rem 2rem 2.5rem;
  border-top: 1px solid color-mix(in srgb, var(--primary-light) 50%, transparent);
  background: color-mix(in srgb, var(--grey-light) 60%, var(--white));
  border-left: 4px solid var(--primary-light);
  border-radius: 0 0.5rem 0.5rem 0;
  text-align: left;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}
#founder-section.founder-section-witchatea .founder-section-witchatea__quote-text {
  font-size: clamp(1.25rem, 1.5vw, 1.375rem);
  line-height: 1.6;
  color: var(--headerColor);
  font-style: italic;
  margin: 0 0 1rem 0;
}
#founder-section.founder-section-witchatea .founder-section-witchatea__quote--signature .founder-section-witchatea__quote-text {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: 0.02em;
}
#founder-section.founder-section-witchatea .founder-section-witchatea__quote--signature .founder-section-witchatea__cite {
  font-style: italic;
}
#founder-section.founder-section-witchatea .founder-section-witchatea__cite {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  font-style: normal;
}

/* ============================================ */
/*           Contact Form                       */
/* ============================================ */
@media only screen and (min-width: 0rem) {
  #contact-form {
    padding: var(--sectionPadding);
    background-color: var(--white);
  }
  #contact-form .cs-container {
    width: 100%;
    max-width: 1280px;
    margin: auto;
    padding: 0 1rem;
  }
  #contact-form .cs-content {
    text-align: center;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 3rem;
  }
  #contact-form .cs-content .cs-topper,
  #contact-form .cs-content .cs-title,
  #contact-form .cs-content .cs-text {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  #contact-form .cs-topper {
    color: var(--primary-light);
    font-weight: 700;
    letter-spacing: 0.12em;
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  }
  #contact-form .cs-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
    color: var(--headerColor);
    margin: 0.25rem 0 1rem;
  }
  #contact-form .cs-text {
    margin-bottom: 2rem;
    font-size: clamp(1.25rem, 1.5vw, 1.375rem);
    line-height: 1.6;
    color: var(--bodyTextColor);
  }
  #contact-form .cs-button-group {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.2rem;
  }
  #contact-form .cs-button-email,
  #contact-form .cs-button-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-width: 160px;
    padding: 0.8rem 1.6rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--white);
    background: var(--primary-light);
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  #contact-form .cs-button-email svg,
  #contact-form .cs-button-phone svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
  }
  #contact-form .cs-button-email span,
  #contact-form .cs-button-phone span {
    position: relative;
    z-index: 1;
  }
  #contact-form .cs-button-email:before,
  #contact-form .cs-button-phone:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
    z-index: 1;
  }
  #contact-form .cs-button-email:after,
  #contact-form .cs-button-phone:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.05) 100%);
    border-radius: 8px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  #contact-form .cs-button-email:hover, #contact-form .cs-button-email:focus,
  #contact-form .cs-button-phone:hover,
  #contact-form .cs-button-phone:focus {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(20, 37, 31, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 12px rgba(182, 155, 118, 0.25);
    background: linear-gradient(135deg, #9a8462 0%, var(--primaryLight) 50%, #8b7355 100%);
    color: var(--white);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  #contact-form .cs-button-email:hover:before, #contact-form .cs-button-email:focus:before,
  #contact-form .cs-button-phone:hover:before,
  #contact-form .cs-button-phone:focus:before {
    left: 100%;
  }
  #contact-form .cs-button-email:hover:after, #contact-form .cs-button-email:focus:after,
  #contact-form .cs-button-phone:hover:after,
  #contact-form .cs-button-phone:focus:after {
    opacity: 1;
  }
  #contact-form .cs-button-email:active,
  #contact-form .cs-button-phone:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 2px 8px rgba(20, 37, 31, 0.2), 0 1px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(182, 155, 118, 0.3), 0 0 8px rgba(182, 155, 118, 0.2);
    transition: all 0.1s ease;
  }
  #contact-form .cs-button-email:focus,
  #contact-form .cs-button-phone:focus {
    outline: none;
    box-shadow: 0 4px 16px rgba(20, 37, 31, 0.2), 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 0 0 2px rgba(182, 155, 118, 0.3), 0 0 12px rgba(182, 155, 118, 0.2);
  }
}
@media only screen and (min-width: 0rem) and (max-width: 48rem) {
  #contact-form .cs-button-group {
    flex-direction: column;
    gap: 1rem;
  }
  #contact-form .cs-button-email,
  #contact-form .cs-button-phone {
    width: 100%;
    min-width: auto;
  }
}
/* ============================================ */
/*           Quick Links Contact                */
/*           (Crafted-with-care / Value-prop inspired) */
/* ============================================ */
#quick-links-contact.quick-links-contact {
  padding: var(--sectionPadding);
  background: linear-gradient(180deg, var(--white) 0%, color-mix(in srgb, var(--grey-light) 40%, var(--white)) 100%);
  position: relative;
  overflow: hidden;
  /* Subtle texture overlay */
  /* Hover: gentle lift + soft shadow */
}
#quick-links-contact.quick-links-contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(182, 155, 118, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(20, 37, 31, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
#quick-links-contact.quick-links-contact .cs-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: auto;
  padding: 0 1rem;
}
#quick-links-contact.quick-links-contact .cs-content {
  text-align: center;
  width: 100%;
  max-width: 680px;
  margin: 0 auto 3rem;
}
#quick-links-contact.quick-links-contact .cs-content .cs-topper,
#quick-links-contact.quick-links-contact .cs-content .cs-title,
#quick-links-contact.quick-links-contact .cs-content .cs-text {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
#quick-links-contact.quick-links-contact .cs-topper {
  color: var(--primary-light);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}
#quick-links-contact.quick-links-contact .cs-title {
  font-family: var(--font-heading);
  color: var(--headerColor);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.25;
  margin: 0.25rem 0 0.5rem;
}
#quick-links-contact.quick-links-contact .cs-text {
  font-family: var(--font-body);
  color: var(--bodyTextColor);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.6;
  margin: 0;
  opacity: 0.9;
}
#quick-links-contact.quick-links-contact .cs-card-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
#quick-links-contact.quick-links-contact .cs-item {
  margin: 0;
  background: var(--white);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  position: relative;
  overflow: visible;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#quick-links-contact.quick-links-contact .quick-links-contact__link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding-top: 2.5rem;
}
#quick-links-contact.quick-links-contact .quick-links-contact__link:hover, #quick-links-contact.quick-links-contact .quick-links-contact__link:focus {
  color: inherit;
}
#quick-links-contact.quick-links-contact .cs-icon {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#quick-links-contact.quick-links-contact .cs-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--primary);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s ease;
}
#quick-links-contact.quick-links-contact .cs-item:nth-child(1) .cs-icon svg {
  stroke: var(--primary);
}
#quick-links-contact.quick-links-contact .cs-item:nth-child(2) .cs-icon svg {
  stroke: var(--primary-light);
}
#quick-links-contact.quick-links-contact .cs-item:nth-child(3) .cs-icon svg {
  stroke: var(--primary-alt);
}
#quick-links-contact.quick-links-contact .cs-item:nth-child(4) .cs-icon svg {
  stroke: var(--primary);
}
#quick-links-contact.quick-links-contact .cs-h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 1.5625rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  color: var(--headerColor);
  transition: color 0.3s ease;
}
#quick-links-contact.quick-links-contact .cs-item-text {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  color: var(--bodyTextColor);
  opacity: 0.9;
}
@media (hover: hover) {
  #quick-links-contact.quick-links-contact .cs-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  }
  #quick-links-contact.quick-links-contact .cs-item:hover .cs-h3 {
    color: var(--primary);
  }
}
@media only screen and (min-width: 48rem) {
  #quick-links-contact.quick-links-contact .cs-card-group {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
@media only screen and (min-width: 64rem) {
  #quick-links-contact.quick-links-contact .cs-card-group {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

/* ============================================ */
/*           Final CTA                          */
/* ============================================ */
@media only screen and (min-width: 0rem) {
  /* Shared layout for all final-cta blocks */
  .final-cta {
    padding: var(--sectionPadding);
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .final-cta .cs-container {
    width: 100%;
    max-width: 1280px;
    margin: auto;
    padding: 0 1rem;
    position: relative;
    z-index: 20;
  }
  .final-cta .cs-content {
    text-align: center;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 25;
  }
  .final-cta .cs-content .cs-topper,
  .final-cta .cs-content .cs-title,
  .final-cta .cs-content .cs-text {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .final-cta .cs-title {
    margin-bottom: 1.5rem;
    font-size: clamp(2rem, 4vw, 3rem);
  }
  .final-cta .cs-text {
    font-size: clamp(1.25rem, 1.5vw, 1.5rem);
    line-height: 1.6;
    margin-bottom: 2rem;
  }
  .final-cta .cs-button-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
  }
  /* Main CTA: green background, white text */
  #final-cta,
  #final-cta-about,
  #final-cta-contact {
    background-color: var(--primary);
    color: var(--white);
  }
  #final-cta .cs-title,
  #final-cta-about .cs-title,
  #final-cta-contact .cs-title {
    color: var(--bodyTextColorWhite);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }
  #final-cta .cs-text,
  #final-cta-about .cs-text,
  #final-cta-contact .cs-text {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
  #final-cta .cs-button-solid.cs-button2,
  #final-cta-about .cs-button-solid.cs-button2,
  #final-cta-contact .cs-button-solid.cs-button2 {
    background: transparent;
    border: 2px solid var(--white);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
  }
  #final-cta .cs-button-solid.cs-button2:hover,
  #final-cta-about .cs-button-solid.cs-button2:hover,
  #final-cta-contact .cs-button-solid.cs-button2:hover {
    background: var(--white);
    color: var(--primary);
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.3);
  }
  /* Contact page: Email button uses gold (cs-button1), secondary buttons outline */
  #final-cta-contact .cs-button-solid.cs-button1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--primary-light);
    color: var(--white);
    border: none;
  }
  #final-cta-contact .cs-button-solid.cs-button1 svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
  }
  #final-cta-contact .cs-button-solid.cs-button1:hover {
    background: linear-gradient(135deg, #9a8462 0%, var(--primary-light) 50%, #8b7355 100%);
    color: var(--white);
  }
  /* Teaser variant: neutral background, dark text (Gifting only) */
  #gifting-cta.final-cta--teaser {
    background-color: var(--grey-light);
    min-height: auto;
  }
  #gifting-cta.final-cta--teaser .cs-title {
    color: var(--headerColor);
    text-shadow: none;
  }
  #gifting-cta.final-cta--teaser .cs-text {
    color: var(--bodyTextColor);
    text-shadow: none;
  }
  #gifting-cta.final-cta--teaser .cs-button-solid.cs-button2 {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
  }
  #gifting-cta.final-cta--teaser .cs-button-solid.cs-button2:hover {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  /* Ritual Calendar Teaser: same color scheme as Where to Buy (green bg, white text, gold accents) */
  #ritual-calendar-teaser.final-cta--green {
    background-color: var(--primary);
    min-height: auto;
    color: var(--white);
    border-top: 1px solid color-mix(in srgb, var(--primary-light) 25%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--primary-light) 25%, transparent);
  }
  #ritual-calendar-teaser.final-cta--green .cs-topper {
    color: var(--primary-light);
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
    display: block;
  }
  #ritual-calendar-teaser.final-cta--green .cs-title {
    color: var(--white);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  #ritual-calendar-teaser.final-cta--green .cs-text {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  }
  #ritual-calendar-teaser.final-cta--green .cs-button-solid.cs-button2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    padding: 0.8rem 1.6rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--white);
    background: var(--primary-light);
    border: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(20, 37, 31, 0.2), 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  }
  #ritual-calendar-teaser.final-cta--green .cs-button-solid.cs-button2:hover {
    background: linear-gradient(135deg, #9a8462 0%, var(--primary-light) 50%, #8b7355 100%);
    color: var(--white);
    box-shadow: 0 8px 24px rgba(20, 37, 31, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  }
  /* Gifting: very subtle paper-like grain overlay (2%) */
  #gifting-cta.final-cta--teaser {
    position: relative;
  }
  #gifting-cta.final-cta--teaser::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-repeat: repeat;
  }
  #gifting-cta.final-cta--teaser .cs-container {
    position: relative;
    z-index: 1;
  }
  /* Ritual Calendar Teaser: moon phase glyph — white on green (match Where to Buy) */
  #ritual-calendar-teaser .ritual-teaser-moon {
    display: inline-block;
    margin-bottom: 1rem;
    opacity: 0.7;
    transition: opacity 0.5s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0.95);
  }
  #ritual-calendar-teaser .ritual-teaser-moon img {
    display: block;
    width: 64px;
    height: 64px;
    filter: brightness(0) invert(1);
  }
  /* Scroll-trigger fade + subtle breathing glow (opacity 0.9 → 1 → 0.9, 7s) */
  #ritual-calendar-teaser.is-visible .ritual-teaser-moon {
    opacity: 0.9;
    animation: ritual-moon-breath 7s ease-in-out infinite;
  }
  @keyframes ritual-moon-breath {
    0%, 100% {
      opacity: 0.9;
    }
    50% {
      opacity: 1;
    }
  }
  /* Hover morph only (no animation loop) */
}
@media only screen and (min-width: 0rem) and (hover: hover) {
  #ritual-calendar-teaser:hover .ritual-teaser-moon {
    opacity: 1;
    transform: scale(1.08) rotate(-5deg);
  }
}
@media only screen and (min-width: 0rem) and (prefers-reduced-motion: reduce) {
  #ritual-calendar-teaser .ritual-teaser-moon {
    transition: none;
    animation: none;
  }
  #ritual-calendar-teaser.is-visible .ritual-teaser-moon {
    opacity: 0.75;
  }
}
/* ============================================ */
/*     Where You'll Find WitchaTea (Logos)      */
/* ============================================ */
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #marketplace-teaser {
    padding: clamp(3.75rem, 8vw, 8.125rem) 1rem;
    background-color: var(--primary);
    /* Equal-sized cell for each logo so they look uniform */
    /* Force logos to render white; same height for all so sizes are equal */
    /* Same style as EMAIL US: gold background, gradient, soft shadow */
  }
  #marketplace-teaser .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(3rem, 6vw, 4rem);
  }
  #marketplace-teaser .cs-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #marketplace-teaser .cs-topper {
    color: var(--primary-light);
  }
  #marketplace-teaser .cs-title {
    color: var(--white);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  #marketplace-teaser .cs-text {
    color: rgba(255, 255, 255, 0.9);
  }
  #marketplace-teaser .cs-logo-group {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: clamp(2rem, 4vw, 3rem);
  }
  #marketplace-teaser .cs-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(50% - 0.5rem);
    max-width: 10rem;
    height: 4.5rem;
    line-height: 0;
    opacity: 0.85;
    transition: opacity 0.25s ease;
    box-sizing: border-box;
  }
  #marketplace-teaser .cs-logo-link:hover {
    opacity: 1;
  }
  #marketplace-teaser .cs-caption {
    margin: 0;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.75);
    font-style: italic;
    text-align: center;
  }
  #marketplace-teaser .cs-logo {
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
    object-fit: contain;
    object-position: center;
    filter: brightness(0) invert(1);
  }
  #marketplace-teaser .cs-button-solid.cs-button2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-width: 160px;
    padding: 0.8rem 1.6rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--white);
    background: var(--primary-light);
    border: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(20, 37, 31, 0.2), 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  }
  #marketplace-teaser .cs-button-solid.cs-button2:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
    z-index: 1;
  }
  #marketplace-teaser .cs-button-solid.cs-button2:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.05) 100%);
    border-radius: 8px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  #marketplace-teaser .cs-button-solid.cs-button2:hover, #marketplace-teaser .cs-button-solid.cs-button2:focus {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(20, 37, 31, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 12px rgba(182, 155, 118, 0.25);
    background: linear-gradient(135deg, #9a8462 0%, var(--primaryLight) 50%, #8b7355 100%);
    color: var(--white);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  #marketplace-teaser .cs-button-solid.cs-button2:hover:before, #marketplace-teaser .cs-button-solid.cs-button2:focus:before {
    left: 100%;
  }
  #marketplace-teaser .cs-button-solid.cs-button2:hover:after, #marketplace-teaser .cs-button-solid.cs-button2:focus:after {
    opacity: 1;
  }
  #marketplace-teaser .cs-button-solid.cs-button2:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 2px 8px rgba(20, 37, 31, 0.2), 0 1px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(182, 155, 118, 0.3), 0 0 8px rgba(182, 155, 118, 0.2);
    transition: all 0.1s ease;
  }
  #marketplace-teaser .cs-button-solid.cs-button2:focus {
    outline: none;
    box-shadow: 0 4px 16px rgba(20, 37, 31, 0.2), 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 0 0 2px rgba(182, 155, 118, 0.3), 0 0 12px rgba(182, 155, 118, 0.2);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #marketplace-teaser .cs-logo-group {
    justify-content: center;
    gap: clamp(2.5rem, 5vw, 4rem);
  }
  #marketplace-teaser .cs-logo-link {
    width: auto;
    max-width: 12rem;
    height: 5rem;
    flex: 0 0 auto;
  }
}

/*# sourceMappingURL=root.css.map */