/* ════════════════════════════════════════════════════════════
   FRAMEWORK CSS — LUMOS Utilities + Resets
   Jivamukti Yoga Global
   DO NOT EDIT — managed by Flowriter
   ════════════════════════════════════════════════════════════ */

/* ── Tag Resets (CSS Embed in Webflow) ── */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  min-height: 100%;
  font-family: var(--_text-style---font-family);
  font-size: var(--_text-style---font-size);
  line-height: var(--_text-style---line-height);
  font-weight: var(--_text-style---font-weight);
  letter-spacing: var(--_text-style---letter-spacing);
  color: var(--_theme---text);
  background-color: var(--_theme---background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration-line: none;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: var(--_typography---font--primary-medium);
}

p {
  margin-top: 0;
  margin-bottom: 0;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  list-style-type: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  background-color: transparent;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* ── Themes ── */

.u-theme-light {
  background-color: var(--_theme---background);
  color: var(--_theme---text);
  --_theme---background: var(--swatch--light-200);
  --_theme---text: var(--swatch--dark-900);
  --_theme---background-2: var(--swatch--light-100);
  --_theme---background-skeleton: color-mix(in lab, currentcolor 10%, transparent);
  --_theme---heading-accent: var(--swatch--brand-500);
  --_theme---border: var(--swatch--brand-300);
  --_theme---button-primary--text: var(--swatch--brand-text);
  --_theme---button-primary--text-hover: var(--_theme---background);
  --_theme---button-primary--background: var(--swatch--brand-500);
  --_theme---button-primary--background-hover: var(--_theme---text);
  --_theme---button-primary--border: var(--_theme---button-primary--background);
  --_theme---button-primary--border-hover: var(--_theme---button-primary--background-hover);
  --_theme---button-secondary--text: var(--swatch--brand-500);
  --_theme---button-secondary--text-hover: var(--swatch--brand-text);
  --_theme---button-secondary--background: var(--swatch--transparent);
  --_theme---button-secondary--background-hover: var(--swatch--brand-500);
  --_theme---button-secondary--border: var(--swatch--brand-500);
  --_theme---button-secondary--border-hover: var(--swatch--brand-500);
  --_theme---text-link--border: var(--_theme---border);
  --_theme---text-link--text: var(--_theme---text);
  --_theme---text-link--text-hover: var(--_theme---text-link--text);
  --_theme---nav--background: var(--swatch--light-200);
  --_theme---text-link--border-hover: var(--_theme---text);
  --_theme---selection--background: var(--swatch--brand-500);
  --_theme---selection--text: var(--swatch--brand-text);
}

.u-theme-dark {
  background-color: var(--_theme---background);
  color: var(--_theme---text);
  --_theme---background: var(--swatch--dark-800);
  --_theme---text: var(--swatch--light-200);
  --_theme---background-2: var(--swatch--dark-900);
  --_theme---background-skeleton: color-mix(in lab, currentcolor 10%, transparent);
  --_theme---heading-accent: var(--swatch--secondary-500);
  --_theme---border: var(--swatch--light-100-o20);
  --_theme---button-primary--text: var(--swatch--dark-900);
  --_theme---button-primary--text-hover: var(--swatch--dark-900);
  --_theme---button-primary--background: var(--swatch--secondary-500);
  --_theme---button-primary--background-hover: var(--swatch--light-200);
  --_theme---button-primary--border: var(--_theme---button-primary--background);
  --_theme---button-primary--border-hover: var(--_theme---button-primary--background-hover);
  --_theme---button-secondary--text: var(--_theme---text);
  --_theme---button-secondary--text-hover: var(--_theme---background);
  --_theme---button-secondary--background: var(--swatch--transparent);
  --_theme---button-secondary--background-hover: var(--_theme---text);
  --_theme---button-secondary--border: var(--_theme---border);
  --_theme---button-secondary--border-hover: var(--_theme---button-secondary--background-hover);
  --_theme---text-link--border: var(--_theme---border);
  --_theme---text-link--text: var(--_theme---text);
  --_theme---text-link--text-hover: var(--swatch--secondary-500);
  --_theme---nav--background: var(--_theme---background-2);
  --_theme---text-link--border-hover: var(--swatch--secondary-500);
  --_theme---selection--background: var(--swatch--secondary-500);
  --_theme---selection--text: var(--swatch--dark-900);
}

.u-theme-brand {
  background-color: var(--_theme---background);
  color: var(--_theme---text);
  --_theme---background: var(--swatch--brand-500);
  --_theme---text: var(--swatch--brand-text);
  --_theme---background-2: var(--swatch--brand-600);
  --_theme---background-skeleton: color-mix(in lab, currentcolor 10%, transparent);
  --_theme---heading-accent: color-mix(in srgb, var(--_theme---text), white 20%);
  --_theme---border: var(--swatch--brand-text-o20);
  --_theme---button-primary--text: var(--swatch--brand-500);
  --_theme---button-primary--text-hover: var(--swatch--brand-500);
  --_theme---button-primary--background: var(--swatch--brand-text);
  --_theme---button-primary--background-hover: color-mix(in srgb, var(--_theme---button-primary--background), white 10%);
  --_theme---button-primary--border: var(--_theme---button-primary--background);
  --_theme---button-primary--border-hover: var(--_theme---button-primary--background-hover);
  --_theme---button-secondary--text: var(--_theme---text);
  --_theme---button-secondary--text-hover: var(--_theme---background);
  --_theme---button-secondary--background: var(--swatch--transparent);
  --_theme---button-secondary--background-hover: var(--_theme---text);
  --_theme---button-secondary--border: var(--_theme---border);
  --_theme---button-secondary--border-hover: var(--_theme---button-secondary--background-hover);
  --_theme---text-link--border: var(--_theme---border);
  --_theme---text-link--text: var(--_theme---text);
  --_theme---text-link--text-hover: var(--_theme---text-link--text);
  --_theme---nav--background: var(--_theme---background);
  --_theme---text-link--border-hover: var(--_theme---text);
  --_theme---selection--background: var(--swatch--brand-text);
  --_theme---selection--text: var(--swatch--brand-500);
}

.u-theme-secondary {
  background-color: var(--_theme---background);
  color: var(--_theme---text);
  --_theme---background: var(--swatch--light-200);
  --_theme---text: var(--swatch--dark-900);
  --_theme---background-2: var(--swatch--light-100);
  --_theme---heading-accent: var(--swatch--secondary-500);
  --_theme---border: var(--swatch--secondary-300);
  --_theme---button-primary--text: var(--swatch--secondary-text);
  --_theme---button-primary--text-hover: var(--_theme---background);
  --_theme---button-primary--background: var(--swatch--secondary-500);
  --_theme---button-primary--background-hover: var(--_theme---text);
  --_theme---button-primary--border: var(--_theme---button-primary--background);
  --_theme---button-primary--border-hover: var(--_theme---button-primary--background-hover);
  --_theme---button-secondary--text: var(--swatch--secondary-500);
  --_theme---button-secondary--text-hover: var(--swatch--secondary-text);
  --_theme---button-secondary--background: var(--swatch--transparent);
  --_theme---button-secondary--background-hover: var(--swatch--secondary-500);
  --_theme---button-secondary--border: var(--swatch--secondary-500);
  --_theme---button-secondary--border-hover: var(--swatch--secondary-500);
  --_theme---text-link--border: var(--_theme---border);
  --_theme---text-link--text: var(--_theme---text);
  --_theme---text-link--text-hover: var(--_theme---text-link--text);
  --_theme---text-link--border-hover: var(--_theme---text);
  --_theme---selection--background: var(--swatch--secondary-500);
  --_theme---selection--text: var(--swatch--light-200);
}

.u-theme-neutral-light {
  background-color: var(--_theme---background);
  color: var(--_theme---text);
  --_theme---background: var(--swatch--light-200);
  --_theme---text: var(--swatch--dark-900);
  --_theme---background-2: var(--swatch--light-100);
  --_theme---background-skeleton: color-mix(in lab, currentcolor 10%, transparent);
  --_theme---heading-accent: var(--swatch--dark-900);
  --_theme---border: var(--swatch--dark-900-o20);
  --_theme---button-primary--text: var(--swatch--light-200);
  --_theme---button-primary--text-hover: var(--swatch--dark-900);
  --_theme---button-primary--background: var(--swatch--dark-900);
  --_theme---button-primary--background-hover: var(--swatch--light-200);
  --_theme---button-primary--border: var(--swatch--dark-900);
  --_theme---button-primary--border-hover: var(--swatch--dark-900);
  --_theme---button-secondary--text: var(--swatch--dark-900);
  --_theme---button-secondary--text-hover: var(--swatch--light-200);
  --_theme---button-secondary--background: var(--swatch--transparent);
  --_theme---button-secondary--background-hover: var(--swatch--dark-900);
  --_theme---button-secondary--border: var(--swatch--dark-900-o20);
  --_theme---button-secondary--border-hover: var(--swatch--dark-900);
  --_theme---text-link--border: var(--swatch--dark-900-o20);
  --_theme---text-link--text: var(--swatch--dark-900);
  --_theme---text-link--text-hover: var(--swatch--dark-900);
  --_theme---text-link--border-hover: var(--swatch--dark-900);
  --_theme---nav--background: var(--swatch--light-200);
  --_theme---selection--background: var(--swatch--dark-900);
  --_theme---selection--text: var(--swatch--light-200);
}

.u-theme-neutral-dark {
  background-color: var(--_theme---background);
  color: var(--_theme---text);
  --_theme---background: var(--swatch--dark-900);
  --_theme---text: var(--swatch--light-200);
  --_theme---background-2: var(--swatch--dark-800);
  --_theme---background-skeleton: color-mix(in lab, currentcolor 10%, transparent);
  --_theme---heading-accent: var(--swatch--light-200);
  --_theme---border: var(--swatch--light-100-o20);
  --_theme---button-primary--text: var(--swatch--dark-900);
  --_theme---button-primary--text-hover: var(--swatch--light-200);
  --_theme---button-primary--background: var(--swatch--light-200);
  --_theme---button-primary--background-hover: var(--swatch--dark-900);
  --_theme---button-primary--border: var(--swatch--light-200);
  --_theme---button-primary--border-hover: var(--swatch--light-200);
  --_theme---button-secondary--text: var(--swatch--light-200);
  --_theme---button-secondary--text-hover: var(--swatch--dark-900);
  --_theme---button-secondary--background: var(--swatch--transparent);
  --_theme---button-secondary--background-hover: var(--swatch--light-200);
  --_theme---button-secondary--border: var(--swatch--light-100-o20);
  --_theme---button-secondary--border-hover: var(--swatch--light-200);
  --_theme---text-link--border: var(--swatch--light-100-o20);
  --_theme---text-link--text: var(--swatch--light-200);
  --_theme---text-link--text-hover: var(--swatch--light-200);
  --_theme---text-link--border-hover: var(--swatch--light-200);
  --_theme---nav--background: var(--swatch--dark-900);
  --_theme---selection--background: var(--swatch--light-200);
  --_theme---selection--text: var(--swatch--dark-900);
}

/* ── Page Wrapper ── */

.page-wrapper {
  overflow-x: hidden;
  overflow-y: auto;
}

.page-main {
  position: relative;
}

/* ── Section ── */

.u-section {
  padding-top: var(--_spacing---section-space--main-112px);
  padding-bottom: var(--_spacing---section-space--main-112px);
  background-color: var(--_theme---background);
  color: var(--_theme---text);
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  display: flex;
  position: relative;
}

.u-section-spacer {
  height: var(--_spacing---section-space--none);
  position: relative;
}

/* ── Containers ── */

.u-container {
  max-width: var(--max-width--main);
  column-gap: var(--_spacing---space--8-64px);
  row-gap: var(--_spacing---space--8-64px);
  width: calc(100% - var(--site--margin) * 2);
  flex-direction: column;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.u-container-small {
  z-index: 1;
  max-width: var(--max-width--small);
  column-gap: var(--_spacing---space--8-64px);
  row-gap: var(--_spacing---space--8-64px);
  width: calc(100% - var(--site--margin) * 2);
  flex-direction: column;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.u-container-full {
  z-index: 1;
  max-width: var(--max-width--full);
  column-gap: var(--_spacing---space--8-64px);
  row-gap: var(--_spacing---space--8-64px);
  width: calc(100% - var(--site--margin) * 2);
  flex-direction: column;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

/* ── Layout (2-column) ── */

.u-layout-wrapper {
  column-gap: var(--site--gutter);
  row-gap: var(--_spacing---space--8-64px);
  display: flex;
  position: relative;
}

.u-layout {
  column-gap: var(--site--gutter);
  row-gap: var(--_spacing---space--8-64px);
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  display: flex;
}

.u-layout-column-1,
.u-layout-column-2 {
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
  justify-content: flex-start;
  display: flex;
}

/* ── Grid ── */

.u-grid-wrapper {
  column-gap: var(--site--gutter);
  row-gap: var(--site--gutter);
  display: flex;
  position: relative;
}

.u-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  grid-column-gap: var(--site--gutter);
  grid-row-gap: var(--site--gutter);
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
  width: 100%;
  display: grid;
}

/* ── Content Wrapper ── */

.u-content-wrapper {
  column-gap: var(--_spacing---space--4-24px);
  row-gap: var(--_spacing---space--4-24px);
  flex-direction: column;
  display: flex;
}

/* ── Heading ── */
/* LUMOS headings use medium weight (500), not bold. Matches Düsseldorf reference. */

.u-heading {
  font-size: var(--_typography---font-size--h2);
  line-height: var(--_typography---line-height--small);
  letter-spacing: var(--_typography---letter-spacing--tight);
  font-weight: var(--_typography---font--primary-medium);
  text-wrap: balance;
}

.u-heading[data-style="display"] {
  font-size: var(--_typography---font-size--display);
  line-height: var(--_typography---line-height--small);
  letter-spacing: var(--_typography---letter-spacing--tight);
  font-weight: var(--_typography---font--primary-medium);
}

.u-heading[data-style="h1"] {
  font-size: var(--_typography---font-size--h1);
  line-height: var(--_typography---line-height--small);
  letter-spacing: var(--_typography---letter-spacing--tight);
  font-weight: var(--_typography---font--primary-medium);
}

.u-heading[data-style="h2"] {
  font-size: var(--_typography---font-size--h2);
  line-height: var(--_typography---line-height--small);
  letter-spacing: var(--_typography---letter-spacing--tight);
  font-weight: var(--_typography---font--primary-medium);
}

.u-heading[data-style="h3"] {
  font-size: var(--_typography---font-size--h3);
  line-height: var(--_typography---line-height--medium);
  letter-spacing: var(--_typography---letter-spacing--tight);
  font-weight: var(--_typography---font--primary-medium);
}

.u-heading[data-style="h4"] {
  font-size: var(--_typography---font-size--h4);
  line-height: var(--_typography---line-height--medium);
  letter-spacing: var(--_typography---letter-spacing--normal);
  font-weight: var(--_typography---font--primary-medium);
}

.u-heading[data-style="h5"] {
  font-size: var(--_typography---font-size--h5);
  line-height: var(--_typography---line-height--medium);
  letter-spacing: var(--_typography---letter-spacing--normal);
  font-weight: var(--_typography---font--primary-medium);
}

.u-heading[data-style="h6"] {
  font-size: var(--_typography---font-size--h6);
  line-height: var(--_typography---line-height--medium);
  letter-spacing: var(--_typography---letter-spacing--normal);
  font-weight: var(--_typography---font--primary-medium);
}

/* ── Text Utilities ── */

.u-text-style-main {
  font-size: var(--_typography---font-size--text-main);
  line-height: var(--_typography---line-height--huge);
}

.u-text-style-large {
  font-size: var(--_typography---font-size--text-large);
  line-height: var(--_typography---line-height--large);
}

.u-text-style-small {
  font-size: var(--_typography---font-size--text-small);
  line-height: var(--_typography---line-height--huge);
}

.u-line-clamp-1 {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* ── Button Wrapper ── */

.u-button-wrapper {
  margin-top: var(--_spacing---space--6-40px);
  column-gap: var(--_spacing---space--2-12px);
  row-gap: var(--_spacing---space--2-12px);
  align-content: center;
  align-items: center;
  justify-content: inherit;
  flex-wrap: wrap;
  display: flex;
}

/* ── Image Utilities ── */

.u-image-wrapper {
  border-top-left-radius: var(--radius--main);
  border-top-right-radius: var(--radius--main);
  border-bottom-left-radius: var(--radius--main);
  border-bottom-right-radius: var(--radius--main);
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
}

.u-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* ── Background Slot ── */

.u-background-slot {
  z-index: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* ── Overlay ── */

.u-overlay {
  z-index: 1;
  background-color: color-mix(in srgb, var(--_theme---background) 60%, transparent);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* ── Eyebrow ── */

.u-eyebrow-wrapper {
  column-gap: var(--_spacing---space--2-12px);
  row-gap: var(--_spacing---space--2-12px);
  align-items: center;
  display: flex;
}

.u-eyebrow-text {
  font-size: var(--_typography---font-size--text-small);
  letter-spacing: var(--_typography---letter-spacing--normal);
  font-weight: var(--_typography---font--primary-regular);
  text-decoration-line: underline;
  text-underline-offset: 0.25em;
}

/* ── SVG ── */

.u-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.u-path {
  stroke-width: var(--border-width--main);
  stroke: currentColor;
  vector-effect: non-scaling-stroke;
}

/* ── Embeds ── */

.u-embed-css,
.u-embed-js {
  display: none;
}

/* ── Visibility ── */

.u-position-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* ── Selection ── */

::selection {
  background-color: var(--_theme---selection--background);
  color: var(--_theme---selection--text);
}

/* ── Responsive Overrides (media queries only — no @container) ── */

@media (max-width: 991px) {
  :root {
    --_responsive---large: 0;
    --_responsive---medium: 1;
  }

  .u-layout {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  :root {
    --_responsive---medium: 0;
    --_responsive---small: 1;
  }
}

@media (max-width: 478px) {
  :root {
    --_responsive---small: 0;
    --_responsive---xsmall: 1;
  }
}
