/* ==========================================================================
   ZEVĀ — shared stylesheet
   Change a colour, font or spacing here and it changes on every page.
   ========================================================================== */

/* --- 1. Design tokens ---------------------------------------------------- */
:root {
  /* Colours */
  --cream:      #FAF7F1;   /* page background */
  --sand:       #F4EDE1;   /* alternate section background */
  --sand-deep:  #EDE3D2;   /* third background, used sparingly */
  --ink:        #23201C;   /* headings, dark sections */
  --body:       #3B362F;   /* body text */
  --muted:      #6B6355;   /* captions, secondary text */
  --muted-soft: #7A6F60;   /* eyebrow labels */
  --line:       #E0D5C2;   /* hairlines on light */
  --line-dark:  #453F36;   /* hairlines on dark */
  --clay:       #A8622A;   /* primary accent (accessible with white text) */
  --clay-soft:  #C4813F;   /* accent on dark backgrounds */
  --clay-text:  #8E5220;   /* accent as text on light backgrounds */
  --on-dark:    #F6F1E8;
  --on-dark-mu: #C6BBA8;

  /* Type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Instrument Sans", system-ui, -apple-system, sans-serif;

  /* Layout */
  --max:    1280px;
  --gutter: 80px;
  --radius: 14px;
}

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; }

a { color: var(--clay-text); }
a:hover { color: #6B3D18; }

/* --- 3. Layout helpers --------------------------------------------------- */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section { padding-block: 104px; }
.section--sand { background: var(--sand); }
.section--deep { background: var(--sand-deep); }
.section--dark { background: var(--ink); color: var(--on-dark-mu); }
.section--dark h2, .section--dark h3 { color: var(--on-dark); }

/* Two-column: narrow label column + wide content column */
.cols {
  display: flex;
  gap: 96px;
  align-items: flex-start;
}
.cols__label { width: 300px; flex-shrink: 0; }
.cols__body  { flex-grow: 1; max-width: 680px; }

.stack   { display: flex; flex-direction: column; gap: 22px; }
.stack-s { display: flex; flex-direction: column; gap: 12px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

/* --- 4. Type ------------------------------------------------------------- */
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-soft);
  font-weight: 500;
}
.section--dark .eyebrow { color: #A79B88; }

.h1 { font-size: clamp(48px, 7vw, 92px); line-height: 0.98; }
.h2 { font-size: clamp(32px, 4vw, 46px); line-height: 1.1; }
.h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.18; }

.lead  { font-size: 21px; line-height: 1.55; color: var(--body); }
.small { font-size: 15px; line-height: 1.6; color: var(--muted); }

.quote {
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 31px);
  line-height: 1.34;
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
}

.pull {
  border-left: 2px solid var(--clay);
  padding: 4px 0 4px 32px;
}

/* --- 5. Buttons ---------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  padding: 17px 34px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn--primary { background: var(--clay); color: #fff; }
.btn--primary:hover { background: #8E5220; color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--sand); color: var(--ink); }
.btn--on-dark { background: var(--clay-soft); color: #201C17; font-weight: 600; }
.btn--on-dark:hover { background: #D89A5C; color: #201C17; }

.btn-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* --- 6. Header ----------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 241, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #E8DFD0;
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 84px;
}
.logo {
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: 0.12em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}
.logo__sub {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 4px;
}
.nav { flex-grow: 1; display: flex; gap: 32px; justify-content: center; }
.nav a {
  font-size: 15px;
  color: var(--body);
  text-decoration: none;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }

.lang {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.lang a { text-decoration: none; color: var(--muted); }
.lang a[aria-current="true"] { color: var(--ink); font-weight: 600; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  cursor: pointer;
}
.nav-toggle span {
  display: block; width: 18px; height: 1.5px; background: var(--ink); margin: 3.5px 0;
}

/* --- 7. Hero ------------------------------------------------------------- */
.hero { background: var(--sand); }
.hero__inner {
  display: flex;
  min-height: 560px;
}
.hero__text {
  width: 58%;
  padding: 120px var(--gutter) 110px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  justify-content: center;
}
.hero__media {
  flex-grow: 1;
  background: linear-gradient(150deg, #C8A87E 0%, #9C7B52 45%, #6E5A3E 100%);
  background-size: cover;
  background-position: center;
  position: relative;
}
.hero__media::after {
  content: attr(data-placeholder);
  position: absolute;
  left: 40px; bottom: 36px;
  color: #FFF8EC;
  font-size: 12px;
  letter-spacing: 0.06em;
}

/* --- 8. Cards ------------------------------------------------------------ */
.card {
  background: var(--sand);
  border-radius: var(--radius);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card--plain { background: transparent; border-top: 1px solid var(--line); border-radius: 0; padding: 24px 0 0; }
.card__term { font-family: var(--serif); font-size: 28px; color: var(--ink); }
.card__meta { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay-text); font-weight: 600; }
.card__text { font-size: 16px; line-height: 1.62; color: var(--body); }

/* Numbered steps */
.step { border-top: 1px solid var(--line-dark); padding-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.step__no { font-size: 13px; letter-spacing: 0.1em; font-weight: 600; color: var(--clay-soft); }
.step__title { font-family: var(--serif); font-size: 28px; color: var(--on-dark); }
.step__text { font-size: 15px; line-height: 1.6; color: var(--on-dark-mu); }

/* Checklist ("So if...") */
.checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.checklist li {
  list-style: none;
  border-top: 1px solid var(--line);
  padding: 15px 0 15px 30px;
  position: relative;
  font-size: 16.5px;
  color: var(--body);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 2px; top: 24px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--clay);
}
.checklist { margin: 0; padding: 0; }

/* --- 9. Accordion (FAQ) -------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-size: 17.5px;
  color: var(--ink);
  font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 8px; top: 50%;
  width: 13px; height: 13px;
  margin-top: -7px;
  background:
    linear-gradient(var(--clay-text), var(--clay-text)) center/13px 1.5px no-repeat,
    linear-gradient(var(--clay-text), var(--clay-text)) center/1.5px 13px no-repeat;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding: 0 60px 26px 0; color: var(--body); font-size: 16.5px; line-height: 1.68; }

/* --- 10. Form ------------------------------------------------------------ */
.form {
  background: #2C2822;
  border-radius: 16px;
  padding: 38px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.field label {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #A79B88; font-weight: 500;
}
.field input, .field textarea, .field select {
  background: var(--ink);
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  padding: 13px 14px;
  font-size: 15px;
  color: var(--on-dark);
  font-family: inherit;
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--clay-soft);
  outline-offset: 1px;
}
.field textarea { resize: vertical; min-height: 110px; }
.field-row { display: flex; gap: 14px; }
.form__note { font-size: 13px; color: #A79B88; line-height: 1.55; }

/* --- 11. Footer ---------------------------------------------------------- */
.site-footer {
  background: var(--cream);
  border-top: 1px solid #E8DFD0;
  padding-block: 44px;
}
.site-footer__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.site-footer a { color: var(--muted); text-decoration: none; font-size: 14px; }
.site-footer a:hover { color: var(--ink); }
.site-footer nav { display: flex; gap: 28px; flex-wrap: wrap; }

/* --- 12. Responsive ------------------------------------------------------ */
@media (max-width: 1080px) {
  :root { --gutter: 48px; }
  .cols { gap: 56px; }
  .cols__label { width: 240px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root { --gutter: 24px; }
  body { font-size: 16.5px; }
  .section { padding-block: 68px; }

  .nav {
    display: none;
    position: absolute; top: 84px; left: 0; right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 20px;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--line); }
  .nav-toggle { display: block; }
  .site-header__inner { gap: 16px; }

  .hero__inner { flex-direction: column; min-height: 0; }
  .hero__text { width: 100%; padding: 64px var(--gutter) 56px; }
  .hero__media { min-height: 260px; }

  .cols { flex-direction: column; gap: 28px; }
  .cols__label { width: 100%; }
  .cols__body { max-width: none; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .checklist { grid-template-columns: minmax(0, 1fr); }
  .field-row { flex-direction: column; }
  .form { padding: 26px; }
  .pull { padding-left: 20px; }
}

/* --- 13. Pricing tabs ---------------------------------------------------- */
.tabs__list {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.tabs__btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 16px 22px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease;
}
.tabs__btn:hover { color: var(--ink); }
.tabs__btn[aria-selected="true"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--clay);
}
.tabs__panel { padding-top: 48px; }
.tabs__panel[hidden] { display: none; }

.offer {
  display: flex;
  gap: 72px;
  align-items: flex-start;
}
.offer__main { flex-grow: 1; max-width: 620px; }
.offer__side {
  width: 320px;
  flex-shrink: 0;
  background: var(--sand);
  border-radius: var(--radius);
  padding: 34px 30px;
}
.price {
  font-family: var(--serif);
  font-size: 52px;
  line-height: 1;
  color: var(--ink);
}
.price__unit { font-family: var(--sans); font-size: 15px; color: var(--muted); }

.includes { margin: 0; padding: 0; }
.includes li {
  list-style: none;
  border-top: 1px solid var(--line);
  padding: 13px 0 13px 26px;
  position: relative;
  font-size: 16px;
  color: var(--body);
}
.includes li::before {
  content: "";
  position: absolute;
  left: 2px; top: 22px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clay);
}
.tag {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clay-text);
  background: #F6E7D6;
  border-radius: 999px;
  padding: 6px 13px;
}

@media (max-width: 860px) {
  .tabs__list { gap: 0; }
  .tabs__btn { padding: 14px 14px; font-size: 15px; }
  .tabs__panel { padding-top: 32px; }
  .offer { flex-direction: column; gap: 32px; }
  .offer__main { max-width: none; }
  .offer__side { width: 100%; }
}



/* ==========================================================================
   14. HOMEPAGE — Zevā
   ========================================================================== */

:root {
  --white-card:  #FFFEFB;
  --rust:        #772D08;
  --clay-vector: #C4721F;
  --blue:        #3A5D8F;
  --blue-soft:   #B9CBDD;
  --earth:       #2C221A;   /* the wood table in the hero photo */
  --earth-soft:  #3A2E24;
  --warm-wash:   #FBEEDC;
  --warm-wash-2: #F7E3CA;
  --honey:       #E8A44C;
  --serif-sa:    "Tiro Devanagari Sanskrit", Georgia, serif;   /* Sanskrit + italic statements */
  --serif-mark:  "Marcellus", Georgia, serif;                   /* wordmark */

  --shadow-soft: 10px 14px 34px rgba(58, 93, 143, 0.11);
  --shadow-lift: 18px 26px 52px rgba(58, 93, 143, 0.18);
  --shadow-deep: 20px 28px 60px rgba(20, 14, 9, 0.34);
}

/* Wordmark */
.logo { font-family: var(--serif-mark) !important; letter-spacing: 0.085em; font-size: 26px; }

.display { font-family: var(--serif-sa); font-weight: 400; letter-spacing: 0.004em; color: var(--ink); margin: 0; }
.sanskrit { font-family: var(--serif-sa); font-style: italic; }
.rust { color: var(--rust); }
.nb { white-space: nowrap; }

/* --- Motion -------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s ease, transform .75s cubic-bezier(.22,.61,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: .09s; }
.reveal--d2 { transition-delay: .18s; }
.reveal--d3 { transition-delay: .27s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--d1, .reveal--d2, .reveal--d3 { opacity: 1; transform: none; transition: none; transition-delay: 0s; }
}

/* --- Section rhythm ------------------------------------------------------ */
.sec-warm  { background: var(--cream); }
.sec-sand  { background: var(--sand); }
.sec-earth { background: var(--earth); color: #E9E1D6; }
.sec-glow  { background: var(--warm-wash); }

.connector { height: 96px; display: flex; justify-content: center; align-items: stretch; }
.connector::before {
  content: ""; width: 1px;
  background: linear-gradient(180deg, transparent, var(--blue-soft) 20%, var(--clay-vector) 80%, transparent);
  opacity: 0.5;
}

/* --- Hero ---------------------------------------------------------------- */
.hero-full {
  position: relative; min-height: 100svh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background-color: #6E5A3E;
  background-image: url("../images/hero-home.jpg");
  background-size: cover; background-position: center; overflow: hidden;
}
.hero-full::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 72% 58% at 50% 54%, rgba(38,28,18,0.46) 0%, rgba(38,28,18,0.22) 46%, rgba(38,28,18,0) 78%),
    linear-gradient(180deg, rgba(38,28,18,0.26) 0%, rgba(38,28,18,0) 26%);
}
.hero-full__inner {
  position: relative; z-index: 1; padding: 140px 24px 90px; max-width: 880px;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
}
.hero-full__mark {
  font-family: var(--serif-mark);
  font-size: clamp(66px, 11vw, 142px); line-height: 1;
  letter-spacing: 0.075em; text-indent: 0.075em; color: #FFFFFF; margin: 0;
  text-shadow: 0 2px 30px rgba(34,26,16,0.34);
}
.hero-full__line {
  font-family: var(--serif-sa); font-size: clamp(24px, 3.4vw, 42px); line-height: 1.28;
  color: #FFFFFF; margin: 0; text-shadow: 0 2px 22px rgba(34,26,16,0.4);
}
.hero-full__kicker {
  font-size: 12.5px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255,255,255,0.88); margin: 0; text-shadow: 0 1px 14px rgba(34,26,16,0.5);
}

/* --- Section heads ------------------------------------------------------- */
.head-centred { text-align: center; max-width: 1000px; margin: 0 auto 64px; }
.head-centred .display { font-size: clamp(36px, 5.6vw, 70px); line-height: 1.04; }
.sec-earth .head-centred .display { color: #FFF8EE; }
.sec-earth .head-centred p { color: #DED2C2; }
.field-note { color: #F0D9BC !important; }

.rule { width: 104px; height: 2px; margin: 30px auto 0; border: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-soft) 48%, var(--clay-vector)); }
.sec-earth .rule { background: linear-gradient(90deg, var(--honey), #F6E2C6 50%, var(--honey)); }

/* --- Panel: a room, not a card ------------------------------------------- */
.panel {
  background: var(--white-card);
  border-radius: 48px;
  padding: 96px;
  position: relative;
  overflow: visible;
}
.glow { position: relative; }
.glow::before {
  content: ""; position: absolute; inset: -8% -6%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%, rgba(232,164,76,0.22) 0%, rgba(232,164,76,0.08) 42%, rgba(232,164,76,0) 70%);
  z-index: 0; pointer-events: none;
}
.glow > * { position: relative; z-index: 1; }

.vec { position: absolute; pointer-events: none; opacity: 0.5; color: var(--clay-vector); z-index: 2; }

/* --- The oval ------------------------------------------------------------ */
.oval {
  border-radius: 50% / 34%; overflow: hidden;
  background: linear-gradient(160deg, #C8A87E, #7C6238);
  aspect-ratio: 3 / 4; width: 100%; display: block; object-fit: cover;
  box-shadow: var(--shadow-lift);
}

/* --- Section 2 ----------------------------------------------------------- */
.ojas-open {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 88px; align-items: center;
}
.ojas-open__img { margin-left: -168px; }           /* bleeds out of the room */

.mark-bar {
  width: 3px; height: 116px; border-radius: 3px;
  background: linear-gradient(180deg, var(--clay-vector), var(--honey));
  opacity: 0.85; margin-bottom: 30px;
}

.statement { text-align: center; margin: 100px auto; max-width: 940px; position: relative; }
.statement__line {
  font-family: var(--serif-sa); font-style: italic; color: var(--rust);
  font-size: clamp(30px, 4.6vw, 58px); line-height: 1.14; margin: 0;
}
.statement__line .sanskrit { font-size: 1.24em; font-style: italic; color: var(--clay-vector); }
.statement__sub {
  margin: 28px auto 0; max-width: 560px; color: var(--muted);
  font-size: 17px; letter-spacing: 0.02em;
}

.ojas-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 68px; align-items: start; margin-bottom: 0; }

.ojas-close {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 88px; align-items: center; margin-top: 100px;
}
.ojas-close__img { margin-right: -168px; }


/* --- Section 3 — earth field --------------------------------------------- */
.pill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 1060px; margin: 0 auto; }
.pill {
  background: var(--white-card); color: var(--rust); border: 0; border-radius: 999px;
  padding: 22px 34px; text-align: center; font-size: 16.5px; line-height: 1.45;
  display: flex; align-items: center; justify-content: center; min-height: 76px;
  box-shadow: var(--shadow-deep);
}
.pill--answer {
  background: transparent; box-shadow: none; color: #FFF8EE;
  font-family: var(--serif-sa); font-style: italic;
  font-size: clamp(26px, 3vw, 42px); padding: 32px 12px;
}

/* --- Section 4 ----------------------------------------------------------- */
.card-tall {
  background: #FFFFFF; border-radius: 56px; padding: 48px 32px 52px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: var(--shadow-lift);
}
.card-tall__icon {
  width: 66px; height: 66px; border-radius: 50%; border: 1px solid var(--blue-soft);
  display: flex; align-items: center; justify-content: center; color: var(--blue); margin-bottom: 6px;
}
.card-tall__title { font-family: var(--serif-sa); font-size: 29px; line-height: 1.14; color: var(--ink); }
.card-tall__sa { font-family: var(--serif-sa); font-style: italic; font-size: 20px; color: var(--clay-vector); }
.card-tall__text { font-size: 15.5px; line-height: 1.66; color: var(--body); }

/* --- Section 5 ----------------------------------------------------------- */
.jcard {
  background: #FFFFFF; border-radius: 36px; padding: 42px 30px 36px;
  text-align: center; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-lift);
}
.jcard__no {
  width: 46px; height: 46px; border-radius: 50%; background: var(--clay-vector); color: #fff;
  font-size: 15px; display: flex; align-items: center; justify-content: center; margin: 0 auto;
}
.jcard__title { font-family: var(--serif-sa); font-size: 30px; color: var(--ink); }
.jcard__text { font-size: 15.5px; line-height: 1.64; color: var(--body); }
.jcard__img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50% / 34%;
  background: linear-gradient(150deg,#C8A87E,#7C6238); margin-top: auto; box-shadow: var(--shadow-soft);
}

/* --- Section 7 ----------------------------------------------------------- */
.portrait-band { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 84px; align-items: center; }
.portrait-band__img { margin-block: -72px; }

/* --- Buttons ------------------------------------------------------------- */
.btn--serif { font-family: var(--serif-sa); font-size: 18px; letter-spacing: 0.02em; padding: 15px 34px; }

/* --- Section 8 ----------------------------------------------------------- */
.connect-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 80px; align-items: center; }
.form--light { background: var(--white-card); box-shadow: var(--shadow-lift); border-radius: 30px; padding: 44px; }
.form--light label { color: var(--muted-soft); }
.form--light input, .form--light textarea, .form--light select { background: #FFFFFF; border: 1px solid var(--line); color: var(--body); }
.form--light input:focus, .form--light textarea:focus { outline: 2px solid var(--clay); }
.form--light .form__note { color: var(--muted); }

.fact-list { display: flex; flex-direction: column; margin-top: 8px; }
.fact-list div { border-top: 1px solid rgba(119,45,8,0.16); padding: 15px 0; font-size: 15.5px; color: var(--body); }
.fact-list div:last-child { border-bottom: 1px solid rgba(119,45,8,0.16); }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1240px) {
  .ojas-open__img { margin-left: -104px; }
  .ojas-close__img { margin-right: -104px; }
  .panel { padding: 72px; }
}
@media (max-width: 1040px) {
  .ojas-open__img { margin-left: -56px; }
  .ojas-close__img { margin-right: -56px; }
  .ojas-open, .ojas-close { gap: 56px; }
}
@media (max-width: 900px) {
  .ojas-open, .ojas-close, .ojas-two, .portrait-band, .connect-grid {
    grid-template-columns: minmax(0, 1fr); gap: 36px;
  }
  .ojas-open__img, .ojas-close__img { margin: 0 auto; max-width: 320px; width: 100%; }
  .ojas-close { margin-top: 60px; }
  .portrait-band__img { margin-block: 0; max-width: 300px; margin-inline: auto; }
  .statement { margin: 56px auto; }

}
@media (max-width: 860px) {
  .nb { white-space: normal; }
  .panel { padding: 34px 22px; border-radius: 26px; }
  .vec { display: none; }
  .connector { height: 58px; }
  .pill-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pill { border-radius: 24px; padding: 18px 22px; min-height: 0; }
  .card-tall { border-radius: 38px; padding: 34px 26px 38px; }
  .jcard { border-radius: 28px; }
  .form--light { padding: 26px; }
  .hero-full { min-height: 88svh; }
  .hero-full__inner { padding: 110px 20px 70px; }
  .head-centred { margin-bottom: 38px; }
}

/* ==========================================================================
   15. AYURVEDA PAGE — editorial layout in the Zevā palette
   ========================================================================== */

.hero { background: var(--sand); }
.hero__text { gap: 24px; }
.hero__media--ayu {
  background-image: url("../images/ayu-hero.jpg");
  background-size: cover;
  background-position: center;
}
.hero__media--ayu::after { content: none; }

/* editorial columns pick up the homepage type */
.cols__label .display { color: var(--ink); }
.cols__body p { color: var(--body); }

/* a third column for a photo, when a section has one */
.cols > div:last-child .oval { margin-top: 6px; }

/* --- Editorial typography (Ayurveda / About / Pricing) ------------------- */
.page-editorial .display,
.page-editorial .head-centred .display { font-family: var(--serif); }
.page-editorial .ojas-line { font-family: var(--serif); font-style: italic; }
.page-editorial .step__title { font-family: var(--serif); }
.page-editorial .sanskrit { font-family: var(--serif); font-style: italic; }

/* The microcosm line — the original quote styling, without the quote marks */
.microcosm {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.38;
  color: var(--ink);
  margin: 0;
}

/* --- The "link" language: numbered items in a sequence ------------------- */
.link-row { gap: 34px; }
.link-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.link-item__no {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clay-vector);
}
.link-item__title {
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.1;
  color: var(--ink);
}
.link-item__sa {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--muted);
}
.link-item__text { font-size: 16px; line-height: 1.66; color: var(--body); margin-top: 4px; }

@media (max-width: 1080px) {
  .cols { flex-wrap: wrap; }
  .cols > div:last-child { width: 240px !important; }
}
@media (max-width: 900px) {
  .cols > div:last-child { width: 100% !important; max-width: 300px; margin-inline: auto; }
}

/* ==========================================================================
   16. STACKED PANELS — content held in a container, never floating
   Three fixed layouts so the text column can never be squeezed thin:
     ≥1280px  heading | text | photo
     900–1279 heading on top, then text | photo
     <900     one column
   ========================================================================== */

.stack-section { padding-block: 72px; }

.stack-panel {
  position: relative;
  overflow: hidden;
  background: var(--white-card);
  border-radius: 36px;
  padding: 60px 56px;
  box-shadow: var(--shadow-soft);
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 250px;
  grid-template-areas: "head body photo";
  column-gap: 48px;
  row-gap: 40px;
  align-items: start;
}
.stack-panel > * { position: relative; z-index: 1; }

/* the faded photograph: present, but never competing with the text */
.stack-panel__bg {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  filter: saturate(0.75);
}
.stack-panel__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(255, 254, 251, 0.97) 0%,
    rgba(255, 254, 251, 0.90) 55%,
    rgba(255, 254, 251, 0.55) 100%);
}

.stack-panel__head  { grid-area: head; }
.stack-panel__body  { grid-area: body; max-width: 620px; }
.stack-panel__photo { grid-area: photo; align-self: center; }

@media (max-width: 1279px) {
  .stack-panel {
    grid-template-columns: minmax(0, 1fr) 240px;
    grid-template-areas:
      "head head"
      "body photo";
    padding: 52px 48px;
  }
  .stack-panel__head .mark-bar { display: none; }
}

@media (max-width: 899px) {
  .stack-section { padding-block: 44px; }
  .stack-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "body" "photo";
    padding: 34px 24px;
    border-radius: 26px;
    row-gap: 28px;
  }
  .stack-panel__body { max-width: none; }
  .stack-panel__photo { max-width: 280px; width: 100%; margin: 0 auto; }
  .stack-panel__bg::after { background: rgba(255, 254, 251, 0.92); }
}

/* --- Panel colour variants (the page's layering) -------------------------- */
.stack-panel { --panel: 255, 254, 251; background: rgb(var(--panel)); }
.stack-panel__bg::after {
  background: linear-gradient(100deg,
    rgba(var(--panel), 0.97) 0%,
    rgba(var(--panel), 0.90) 55%,
    rgba(var(--panel), 0.55) 100%);
}
.stack-panel--sand  { --panel: 244, 237, 225; box-shadow: none; }
.stack-panel--glow  { --panel: 251, 238, 220; }
.stack-panel--honey { --panel: 248, 230, 204; }
.stack-panel--earth { --panel: 44, 34, 26; box-shadow: var(--shadow-deep); }

/* "open" panels hold free content instead of the head/body/photo grid */
.stack-panel--open { display: block; padding: 64px 60px; }
.chain-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap; margin-bottom: 48px;
}
.chain-grid { gap: 28px; }
.cta-row { display: flex; align-items: center; justify-content: space-between; gap: 44px; flex-wrap: wrap; }

/* flip: photo on the left, heading above the text */
.stack-panel--flip {
  grid-template-columns: 250px minmax(0, 1fr);
  grid-template-areas:
    "photo head"
    "photo body";
  row-gap: 22px;
}
.stack-panel--flip .stack-panel__head { align-self: end; }
.stack-panel--flip .stack-panel__body { align-self: start; }

/* list: the doshas stacked on the side, where a photo would be */
.stack-panel--list { grid-template-columns: 210px minmax(0, 1fr) 300px; }
.stack-panel--list .stack-panel__photo { align-self: start; }
.dosha-list { display: flex; flex-direction: column; }
.dosha {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 0 22px;
  border-top: 1px solid var(--line);
}
.dosha:last-child { border-bottom: 1px solid var(--line); }
.dosha__name { font-family: var(--serif); font-size: 28px; line-height: 1.1; color: var(--ink); }
.dosha__sa { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--clay-vector); }
.dosha__text { font-size: 15.5px; line-height: 1.6; color: var(--body); margin-top: 4px; }

/* the sentence that must be read */
.point {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.12em;
  color: var(--rust);
}

/* what we cultivate */
.quality-list { display: flex; flex-direction: column; margin-top: 10px; }
.quality {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 0;
  border-top: 1px solid rgba(119, 45, 8, 0.18);
}
.quality:last-child { border-bottom: 1px solid rgba(119, 45, 8, 0.18); }
.quality__name { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 30px); color: var(--ink); line-height: 1.15; }
.quality__text { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--rust); }

/* microcosm: each line floats up into place */
.rise span {
  display: block;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.22, .61, .36, 1);
}
.rise.is-in span { opacity: 1; transform: none; }
.rise.is-in span:nth-child(2) { transition-delay: .16s; }
.rise.is-in span:nth-child(3) { transition-delay: .32s; }
.rise.is-in span:nth-child(4) { transition-delay: .48s; }
.rise.is-in span:nth-child(5) { transition-delay: .64s; }
@media (prefers-reduced-motion: reduce) {
  .rise span { opacity: 1; transform: none; transition: none; }
}

.stack-section + .stack-section { padding-top: 0; }

@media (max-width: 1279px) {
  .stack-panel--flip {
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "photo body";
    row-gap: 36px;
  }
  .stack-panel--list {
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-areas:
      "head head"
      "body photo";
  }
  .stack-panel--open { padding: 52px 44px; }
}

@media (max-width: 899px) {
  .stack-panel--flip,
  .stack-panel--list {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "body" "photo";
    row-gap: 28px;
  }
  .stack-panel--list .stack-panel__photo { max-width: none; }
  .stack-panel--open { padding: 36px 24px; }
  .stack-panel__bg::after { background: rgba(var(--panel), 0.92); }
}

.rise.is-in span:nth-child(6) { transition-delay: .80s; }
/* keep alt text from printing over an oval while a photo is missing */
.oval { font-size: 0; color: transparent; }

/* ==========================================================================
   17. ABOUT — the opening image that grows to fill the screen
   --e : 0 → 1   how far the image has opened (set by scroll)
   --t : 0 → 1   how far the text over it has appeared
   ========================================================================== */

.expand {
  position: relative;
  height: 280vh;
  background: var(--cream);
  --e: 0;
  --t: 0;
}
.expand__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.expand__intro {
  position: absolute;
  left: 0; right: 0;
  top: calc(84px + 8vh);
  text-align: center;
  padding: 0 24px;
  z-index: 1;
  opacity: calc(1 - var(--e) * 1.8);
  transform: translateY(calc(var(--e) * -48px));
}
.expand__mark {
  font-family: var(--serif-mark);
  font-size: clamp(56px, 9vw, 120px);
  line-height: 1;
  letter-spacing: 0.075em;
  text-indent: 0.075em;
  color: var(--ink);
  margin: 0;
}
.expand__kicker {
  margin: 20px 0 0;
  font-size: 12.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}

.expand__media {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: inset(
    calc((1 - var(--e)) * 46vh)
    calc((1 - var(--e)) * 6vw)
    calc((1 - var(--e)) * 5vh)
    calc((1 - var(--e)) * 6vw)
    round calc((1 - var(--e)) * 38px)
  );
}
.expand__img {
  position: absolute;
  inset: 0;
  background-color: #6E5A3E;
  /* first photo that exists wins: about-hero, then the homepage hero */
  background-image: url("../images/about-hero.jpg"), url("../images/hero-home.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(calc(1.1 - var(--e) * 0.1));
}
.expand__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(30, 22, 15, 0) 30%, rgba(30, 22, 15, 0.7) 100%),
    linear-gradient(90deg, rgba(30, 22, 15, 0.55) 0%, rgba(30, 22, 15, 0) 62%);
  opacity: var(--t);
}
.expand__text {
  position: absolute;
  left: 7vw;
  bottom: 9vh;
  max-width: 560px;
  color: #FFF8EE;
  opacity: var(--t);
  transform: translateY(calc((1 - var(--t)) * 30px));
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 3;
}
.expand__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.05;
  color: #FFF8EE;
  margin: 0 0 6px;
}
.expand__text p { font-size: 17px; line-height: 1.66; color: rgba(255, 248, 238, 0.9); margin: 0; }

/* no motion: show the finished state */
.expand--still { height: auto; --e: 1; --t: 1; }
.expand--still .expand__stage { position: relative; height: 100svh; min-height: 620px; }

/* wide panel: no photo column */
.stack-panel--wide {
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-areas: "head body";
}
.stack-panel--wide .stack-panel__body { max-width: 720px; }

@media (max-width: 1279px) {
  .stack-panel--wide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body"; }
}

@media (max-width: 899px) {
  .expand { height: 230vh; }
  .expand__intro { top: calc(84px + 6vh); }
  .expand__media {
    clip-path: inset(
      calc((1 - var(--e)) * 40vh)
      calc((1 - var(--e)) * 5vw)
      calc((1 - var(--e)) * 4vh)
      calc((1 - var(--e)) * 5vw)
      round calc((1 - var(--e)) * 26px)
    );
  }
  .expand__text { left: 22px; right: 22px; bottom: 6vh; max-width: none; gap: 12px; }
  .expand__text p { font-size: 15px; line-height: 1.58; }
  .expand__shade {
    background: linear-gradient(180deg, rgba(30, 22, 15, 0.1) 20%, rgba(30, 22, 15, 0.82) 100%);
  }
}

/* header on phones: one line, no crowding */
@media (max-width: 860px) {
  .site-header .btn { white-space: nowrap; padding: 11px 18px !important; font-size: 14px !important; }
  .logo__sub { display: none; }
}

/* --- About · frosted layer under the text on the opening image ------------ */
.expand__text {
  padding: 34px 36px 36px;
  border-radius: 26px;
  background: rgba(38, 28, 18, 0.30);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  backdrop-filter: blur(22px) saturate(1.1);
  border: 1px solid rgba(255, 248, 238, 0.14);
}
.expand__shade {
  background: linear-gradient(180deg, rgba(30, 22, 15, 0) 45%, rgba(30, 22, 15, 0.42) 100%);
}

/* --- About · two photos layered in one panel ------------------------------ */
.stack-panel--duo { grid-template-columns: 300px minmax(0, 1fr); }
.duo { position: relative; padding-bottom: 52%; align-self: start !important; }
.duo__main { width: 100%; }
.duo__second {
  position: absolute;
  width: 60%;
  right: -12%;
  bottom: 0;
  box-shadow: 0 0 0 7px rgb(var(--panel)), var(--shadow-lift);
}

/* --- About · warm yellow band for the closing line ------------------------ */
.band-sun {
  background: linear-gradient(180deg, #FBEFD6 0%, #F8E2B8 100%);
  padding-block: 112px;
}
.rise__accent { color: #A8560F; }

@media (max-width: 1279px) {
  .stack-panel--duo { grid-template-columns: 270px minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .stack-panel--duo { grid-template-columns: minmax(0, 1fr); }
  .duo { max-width: 300px; width: 100%; margin: 0 auto; }
  .duo__second { right: -6%; }
  .expand__text { padding: 24px 22px 26px; border-radius: 20px; }
  .band-sun { padding-block: 76px; }
}

/* --- About · the tree behind the vision: visible, warmed, still yellow ----- */
.stack-panel__bg--tree {
  opacity: 0.62;
  filter: saturate(0.55) sepia(0.28) brightness(1.04);
  background-position: center 30%;
}
.stack-panel__bg--tree::after {
  background:
    linear-gradient(100deg,
      rgba(var(--panel), 0.92) 0%,
      rgba(var(--panel), 0.80) 42%,
      rgba(var(--panel), 0.50) 72%,
      rgba(var(--panel), 0.28) 100%),
    linear-gradient(180deg, rgba(248, 226, 184, 0.35), rgba(248, 226, 184, 0.10));
}
@media (max-width: 899px) {
  .stack-panel__bg--tree::after { background: rgba(var(--panel), 0.84); }
}

/* --- About · The vision: tighter column, more contrast, tree breathes right */
.stack-panel--vision {
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  grid-template-areas:
    "head ."
    "body .";
  row-gap: 26px;
  padding: 64px 64px 68px;
}
.stack-panel--vision .stack-panel__body { max-width: 560px; }
.stack-panel--vision .stack-panel__body p { color: var(--ink); font-size: 16.5px; line-height: 1.64; }
.stack-panel--vision .stack-panel__body .ojas-line {
  font-size: clamp(22px, 2.2vw, 28px) !important;
  line-height: 1.3;
  color: var(--rust);
  padding-block: 6px;
}
.stack-panel--vision .stack-panel__bg--tree::after {
  background:
    linear-gradient(100deg,
      rgba(var(--panel), 0.96) 0%,
      rgba(var(--panel), 0.93) 44%,
      rgba(var(--panel), 0.62) 60%,
      rgba(var(--panel), 0.18) 80%,
      rgba(var(--panel), 0.08) 100%),
    linear-gradient(180deg, rgba(248, 226, 184, 0.30), rgba(248, 226, 184, 0.08));
}
.stack-panel--vision .stack-panel__bg--tree { opacity: 0.7; }

/* --- About · stacking: vision pins, "Hello dear" floats up over it -------- */
.stack-scene { position: relative; }
.stack-pin {
  position: sticky;
  top: 84px;               /* refined by script so tall panels pin at their bottom */
  z-index: 1;
  padding-bottom: 64px;
}
.stack-panel--vision {
  --cover: 0;
  scale: calc(1 - var(--cover) * 0.05);
  transform-origin: 50% 0%;
  filter: brightness(calc(1 - var(--cover) * 0.14));
  will-change: transform;
}
.float-up {
  position: relative;
  z-index: 2;
  background: var(--cream);
  border-radius: 44px 44px 0 0;
  box-shadow: 0 -28px 60px rgba(44, 34, 26, 0.12);
  padding-top: 72px !important;
  margin-top: -24px;
}
@media (prefers-reduced-motion: reduce) {
  .stack-panel--vision { scale: none; filter: none; }
}

@media (max-width: 1279px) {
  .stack-panel--vision { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body"; }
  .stack-panel--vision .stack-panel__body { max-width: 620px; }
}
@media (max-width: 899px) {
  .stack-panel--vision { padding: 38px 24px 42px; }
  .stack-panel--vision .stack-panel__bg--tree::after { background: rgba(var(--panel), 0.86); }
  .float-up { border-radius: 30px 30px 0 0; padding-top: 48px !important; }
}

/* ==========================================================================
   18. PRICING
   ========================================================================== */

.hero__media--pricing {
  background-image: url("../images/pricing-hero.jpg"), url("../images/hero-home.jpg");
  background-size: cover;
  background-position: center;
}
.hero__media--pricing::after { content: none; }

/* --- Section 1 · thin title band on the rose-petal photo ------------------ */
.band-title {
  position: sticky;           /* pins; also anchors the photo layer */
  overflow: hidden;
  background: var(--earth);
  --cover: 0;
}
.band-title__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 42%;
  scale: calc(1.02 + var(--cover) * 0.04);
  filter: brightness(calc(1 - var(--cover) * 0.18));
}
.band-title__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(44, 34, 26, 0.34), rgba(44, 34, 26, 0.12) 70%),
    linear-gradient(180deg, rgba(119, 45, 8, 0.10), rgba(44, 34, 26, 0.22));
}
.band-title__inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: clamp(220px, 30vh, 320px);
  padding-block: 64px;
  text-align: center;
}
.band-title__text {
  margin: 0;
  font-size: clamp(54px, 8.2vw, 120px);
  line-height: 1;
  letter-spacing: -0.005em;
  color: #FFF8EE;
  text-shadow: 0 2px 24px rgba(44, 34, 26, 0.35);
}

/* --- Section 2 · statement, then text beside the video -------------------- */
.roots__wrap { max-width: 1120px; }
.roots .roots__statement { margin-bottom: 88px; }
@media (max-width: 860px) { .roots .roots__statement { margin-bottom: 64px; } }
.roots__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 88px;
  align-items: stretch;
}
.roots__grid .roots__body {
  max-width: 540px;
  justify-content: space-between;
  gap: 0;
  padding-block: 8px 4px;
}
.roots__pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(21px, 1.9vw, 25px) !important;
  line-height: 1.4 !important;
  color: var(--rust) !important;
  padding-block: 30px;
  border-block: 1px solid var(--line);
  margin-block: 34px;
}
.roots__video {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 28px;
  background: #D9C9B2;
  box-shadow: 0 24px 60px rgba(44, 34, 26, 0.14);
}
@media (max-width: 1080px) {
  .roots__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 56px; }
}
@media (max-width: 860px) {
  .roots__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .roots__pull { margin-block: 26px; padding-block: 24px; }
  .roots__video { max-width: 460px; border-radius: 22px; }
}

/* band pins, section 2 floats up over it */
.band-title.stack-pin { padding-bottom: 0; }
.roots.float-up { padding-top: 112px !important; }
@media (max-width: 899px) { .roots.float-up { padding-top: 72px !important; } }
@media (prefers-reduced-motion: reduce) { .band-title__bg { scale: none; filter: none; } }

/* retreat credit line + signature */
.offer-card__fine { font-size: 14px; line-height: 1.6; color: var(--muted, #7A6E62); margin-top: 4px; }
.band-sun .sign__pre { display: block; font-size: 17px; color: var(--body); margin-bottom: 4px; }
.offer-card__note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(119, 45, 8, 0.14);
  font-size: 15px;
  color: var(--rust);
}
.band-sun .sign {
  font-family: var(--serif);
  font-style: italic;
  font-size: 30px;
  color: var(--rust);
  margin-top: 10px;
}

/* --- Section 2 · the statement that darkens as you read ------------------- */
.roots { padding-block: 128px 112px; }
.roots__wrap { max-width: 1040px; }
.roots__statement {
  font-family: var(--serif);
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0 0 56px;
  color: var(--ink);
}
.roots__statement .rw { color: #CFC4B4; transition: color .35s ease; }
.roots__statement .rw.on { color: var(--ink); }
.roots__body {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.roots__body p { font-size: 17px; line-height: 1.7; color: var(--body); }

/* --- Section 3 · side index + stacked cards ------------------------------ */
.offers { padding-top: 40px; }
.offers__title {
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.05;
  margin-bottom: 52px;
}
.offers__grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.offers__index {
  position: sticky;
  top: 108px;
  display: flex;
  flex-direction: column;
  background: var(--white-card);
  border-radius: 22px;
  padding: 10px;
  box-shadow: var(--shadow-soft);
}
.offers__index a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--muted);
  font-size: 15px;
  transition: background .2s ease, color .2s ease;
}
.offers__index a span { color: var(--clay-vector); font-weight: 600; }
.offers__index a:hover { color: var(--ink); }
.offers__index a.is-active { background: var(--sand); color: var(--ink); font-weight: 500; }
.offers__index a.is-active::after { content: "→"; margin-left: auto; color: var(--clay-vector); }

.offers__cards { display: flex; flex-direction: column; gap: 22px; }
.offer-card {
  scroll-margin-top: 108px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 40px;
  align-items: start;
  background: var(--white-card);
  border-radius: 30px;
  padding: 40px 40px 40px 44px;
  box-shadow: var(--shadow-soft);
}
.offer-card__main { display: flex; flex-direction: column; gap: 14px; }
.offer-card__title { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.1; color: var(--ink); margin: 0; }
.offer-card__lead { font-size: 17.5px; line-height: 1.6; color: var(--ink); }
.offer-card__text { font-size: 16px; line-height: 1.65; color: var(--body); }
.offer-card__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 50% / 34%;
  background: linear-gradient(160deg, #C8A87E, #7C6238);
  box-shadow: var(--shadow-soft);
  font-size: 0; color: transparent;
}
.offer-card .includes { margin-top: 4px; }
.includes--two { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); column-gap: 28px; }
.includes--two li { padding-block: 11px; }

.offer-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.offer-card__label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: 4px;
}
.offer-card__price { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--ink); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips span {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clay-text);
  background: #F6E7D6;
  border-radius: 999px;
  padding: 6px 12px;
}
.price-list { display: flex; flex-direction: column; gap: 4px; text-align: right; font-size: 15px; color: var(--body); }
.price-list b { font-weight: 600; color: var(--ink); margin-left: 6px; }

.offer-card--retreat { background: linear-gradient(180deg, #FFFDF8 0%, #FBEEDC 100%); }

@media (max-width: 1180px) {
  .offer-card { grid-template-columns: minmax(0, 1fr) 220px; gap: 30px; }
}
@media (max-width: 980px) {
  .offers__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .offers__index {
    top: 84px;
    z-index: 5;
    flex-direction: row;
    overflow-x: auto;
    border-radius: 16px;
    padding: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .offers__index a { white-space: nowrap; padding: 10px 14px; font-size: 14px; }
  .offers__index a.is-active::after { content: none; }
  .offer-card { scroll-margin-top: 150px; }
}
@media (max-width: 720px) {
  .roots { padding-block: 84px 72px; }
  .offer-card { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; border-radius: 24px; }
  .offer-card__img { order: -1; max-width: 240px; aspect-ratio: 1 / 1; }
  .includes--two { grid-template-columns: minmax(0, 1fr); }
  .price-list { text-align: left; }
}


/* ==========================================================================
   19. PRICING · the note — lily oval opens into the left half
   ========================================================================== */
.note-scene {
  position: relative;
  height: 270vh;
  background: #F8E6C4;
}
.note-stage {
  position: sticky;
  top: var(--hdr, 84px);
  height: calc(100vh - var(--hdr, 84px));
  overflow: hidden;
  background: linear-gradient(180deg, #FBEFD6 0%, #F8E2B8 100%);
}
.note-media {
  position: absolute;
  overflow: hidden;
  background: #9FA79A;
  box-shadow: 0 24px 60px rgba(44, 34, 26, 0.14);
  will-change: left, top, width, height;
}
.note-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.note-text {
  position: absolute;
  top: 0; bottom: 0; left: 50%; right: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--gutter) 0 clamp(48px, 6vw, 104px);
  pointer-events: none;
}
.note-text__inner { max-width: 560px; }
.note-text .microcosm { font-size: clamp(25px, 2.5vw, 34px); }
.note-lines span {
  display: block;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.22, .61, .36, 1);
}
.note-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 30px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s ease .45s, transform 1s cubic-bezier(.22, .61, .36, 1) .45s;
}
.note-scene.is-text .note-text { pointer-events: auto; }
.note-scene.is-text .note-lines span,
.note-scene.is-text .note-body { opacity: 1; transform: none; }
.note-scene.is-text .note-lines span:nth-child(2) { transition-delay: .16s; }
.note-scene .sign { font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--rust); margin-top: 10px; }
.note-scene .sign__pre { display: block; font-size: 17px; color: var(--body); margin-bottom: 4px; }

/* reduced motion: the finished picture, no scrolling stage */
.note-scene--still { height: auto; }
.note-scene--still .note-stage { position: relative; top: auto; height: max(640px, 90vh); }
.note-scene--still .note-media { left: 0; top: 0; width: 50%; height: 100%; border-radius: 0; }
.note-scene--still .note-lines span, .note-scene--still .note-body { transition: none; }

/* phones: the oval grows into a full-width frame, the note follows below */
@media (max-width: 860px) {
  .note-scene { height: auto; background: none; }
  .note-stage {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
    padding: 64px var(--gutter) 72px;
  }
  .note-media {
    position: relative;
    width: 56%;
    aspect-ratio: 3 / 4;
    margin: 0 auto;
    border-radius: 50%;
  }
  .note-text { position: static; padding: 44px 0 0; display: block; }
  .note-scene--still .note-stage { height: auto; }
  .note-scene--still .note-media { width: 100%; height: auto; border-radius: 7%; }
}

/* package buttons → the form */
.offer-card__cta { align-self: flex-start; margin-top: 10px; }
#connect { scroll-margin-top: 84px; }

/* ==========================================================================
   20. ABOUT · qualifications — a quiet list, standing on its own
   ========================================================================== */
.quals-section { padding-block: 96px 104px; }
.quals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 64px;
  align-items: start;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.quals__list { list-style: none; margin: 0; padding: 0; }
.qual {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.qual:first-child { padding-top: 6px; }
.qual__year {
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--clay-vector);
  padding-top: 5px;
  font-variant-numeric: tabular-nums;
}
.qual__body { display: flex; flex-direction: column; gap: 4px; }
.qual__title { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.3; color: var(--ink); }
.qual__where { font-size: 15px; color: var(--muted); }
@media (max-width: 860px) {
  .quals-section { padding-block: 64px 72px; }
  .quals { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 32px; }
  .qual { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0; }
  .qual__year { padding-top: 0; }
}

/* ==========================================================================
   21. PRICING · workshops — a touch of blue, mixed into the warm palette
   ========================================================================== */
.ws-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  padding: clamp(40px, 5vw, 72px);
  border-radius: 32px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(58, 93, 143, 0.20), rgba(58, 93, 143, 0) 60%),
    linear-gradient(125deg, #D3DEE9 0%, #E6E6E0 46%, #F6E8D2 100%);
  box-shadow: 0 24px 60px rgba(44, 34, 26, 0.08);
}
.ws-eyebrow { color: var(--blue); }
.ws-title { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; margin-top: 14px; }
.ws-intro { margin-top: 18px; max-width: 460px; font-size: 17px; line-height: 1.7; color: var(--body); }
.ws-panel__list { display: flex; flex-direction: column; gap: 16px; }
.ws-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--blue); }
.ws-item {
  background: rgba(255, 254, 251, 0.78);
  border: 1px solid rgba(58, 93, 143, 0.16);
  border-radius: 20px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ws-item__date { font-size: 14px; letter-spacing: 0.04em; color: var(--blue); font-weight: 600; }
.ws-item__title { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2vw, 27px); line-height: 1.2; color: var(--ink); margin: 0; }
.ws-item__text { font-size: 15.5px; line-height: 1.6; color: var(--body); }
.ws-cta { margin-top: 6px; }
@media (max-width: 860px) {
  .ws-panel { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 36px 24px; border-radius: 26px; }
}

/* ==========================================================================
   22. CONTACT + 404
   ========================================================================== */
.contact-hero { padding-block: 72px 72px; }
.contact-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.contact-hero__img {
  width: min(420px, 72vw);
  aspect-ratio: 1 / 1.08;
  object-fit: cover;
  border-radius: 50% / 46%;
  box-shadow: 0 24px 60px rgba(58, 93, 143, 0.14);
  background: #DCE3EA;
}
.contact-hero__title { font-size: clamp(56px, 8vw, 112px); line-height: 1; margin: 48px 0 0; }
.contact-hero__text { max-width: 640px; margin-top: 24px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; color: var(--body); }
.form-note { font-size: 13.5px; color: var(--muted); margin: 2px 0 0; }

.nf { min-height: calc(100vh - 84px); display: flex; align-items: center; padding-block: 72px; }
.nf__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.nf__img { width: min(220px, 50vw); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 50% / 34%; opacity: 0.85; margin-bottom: 36px; background: #DCE3EA; }
.nf__title { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.05; margin-top: 12px; }
.nf__text { max-width: 520px; margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--body); }
.nf__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
@media (max-width: 860px) {
  .contact-hero { padding-block: 48px 48px; }
  .contact-hero__title { margin-top: 36px; }
}

/* ==========================================================================
   23. LEGAL PAGES (Impressum, later Datenschutz)
   ========================================================================== */
.legal { padding-block: 88px 112px; }
.legal__wrap { max-width: 760px; }
.legal__title { font-size: clamp(44px, 6vw, 72px); line-height: 1.02; margin-top: 12px; }
.legal__intro { margin-top: 18px; color: var(--muted); font-size: 16px; }
.legal__list { margin: 48px 0 0; border-top: 1px solid var(--line); }
.legal__list > div { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.legal__list dt { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-soft); padding-top: 3px; }
.legal__list dd { margin: 0; font-size: 17px; line-height: 1.65; color: var(--ink); }
.legal__list a, .legal__note a { color: var(--rust); }
.legal__en { color: var(--muted); font-size: 15px; }
.legal__note { margin-top: 48px; display: flex; flex-direction: column; gap: 10px; }
.legal__note h2 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0; color: var(--ink); }
.legal__note p { font-size: 16px; line-height: 1.7; color: var(--body); }
mark.todo { background: #FFE58A; color: var(--ink); padding: 0 4px; border-radius: 4px; }
@media (max-width: 760px) {
  .legal { padding-block: 56px 80px; }
  .legal__list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ==========================================================================
   24. HOMEPAGE v2 — the same language as About and Pricing
   ========================================================================== */
.page-editorial .btn--serif,
.page-home .card-tall__title,
.page-home .card-tall__sa,
.page-home .faq summary { font-family: var(--serif); }
.page-home .card-tall__sa { font-style: italic; }

/* --- 1 · hero: ZEVĀ sits on the table, under the vase, and settles in --- */
/* same height on every screen: just under the vase, on the table */
.page-home .hero-full { align-items: flex-start; }
.page-home .hero-full__inner { padding: max(45svh, 300px) 24px 72px; gap: 22px; }
/* one calm movement: the whole word fades in and settles down a few pixels */
.page-home .hero-full__mark {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 1.6s ease-out .15s, transform 1.8s cubic-bezier(.25,.6,.3,1) .15s;
}
.page-home .hero-full.is-on .hero-full__mark { opacity: 1; transform: none; }
.page-home .hero-full__kicker,
.page-home .hero-full__btn { opacity: 0; transform: translateY(-6px); transition: opacity 1.2s ease-out .9s, transform 1.4s cubic-bezier(.25,.6,.3,1) .9s; }
.page-home .hero-full__btn { transition-delay: 1.1s; }
.page-home .hero-full.is-on .hero-full__kicker,
.page-home .hero-full.is-on .hero-full__btn { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .page-home .hero-full__mark, .page-home .hero-full__kicker, .page-home .hero-full__btn { opacity: 1; transform: none; transition: none; }
}

/* --- 2 · the sideways section ------------------------------------------- */
.hz { position: relative; background: var(--cream); }
.hz__pin {
  position: sticky;
  top: var(--hdr, 84px);
  height: calc(100vh - var(--hdr, 84px));
  overflow: hidden;
}
.hz__pin::before {                     /* the warm glow behind everything */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(232,164,76,0.14), rgba(232,164,76,0) 70%);
}
.hz__track { position: relative; display: flex; height: 100%; will-change: transform; }
.hz__panel {
  flex: 0 0 100vw; height: 100%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--gutter);
}
.hz__intro { max-width: 880px; text-align: center; }
.hz__title { font-size: clamp(40px, 5.4vw, 78px); line-height: 1.04; }
.hz__lead { max-width: 640px; margin: 34px auto 0; font-size: 18px; line-height: 1.7; color: var(--body); }

/* the strip: pieces sit on one centre line, evenly spaced, no empty screens */
.hz__strip { flex: 0 0 auto; height: 100%; display: flex; align-items: center; gap: clamp(64px, 7vw, 120px); padding: 0 clamp(48px, 6vw, 96px); }
.hz__piece { flex: 0 0 auto; position: relative; }
.hz__piece--image { height: 88%; display: flex; align-items: center; padding-right: clamp(160px, 15vw, 230px); }
.hz__frame {
  height: 100%; aspect-ratio: 5 / 6;
  border-radius: 36px; overflow: hidden; box-shadow: var(--shadow-lift);
  background: linear-gradient(160deg, #C8A87E, #7C6238);
}
.hz__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hz__card {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: min(460px, 32vw);
  background: var(--white-card);
  border-radius: 32px;
  padding: clamp(32px, 3.2vw, 50px);
  box-shadow: 0 30px 70px rgba(44,34,26,0.16);
  display: flex; flex-direction: column; gap: 18px;
}
.hz__statement { font-family: var(--serif); font-style: italic; color: var(--rust); font-size: clamp(28px, 2.7vw, 40px); line-height: 1.15; }
.hz__statement .sanskrit { color: var(--clay-vector); }
.hz__statement .hz__term { display: block; font-size: 1.9em; line-height: 1; margin-bottom: 10px; }
.hz__sub { color: var(--muted); font-size: 16.5px; }
.hz__piece--text { width: min(380px, 28vw); display: flex; flex-direction: column; gap: 22px; }
.hz__piece--text p { font-size: 16.5px; line-height: 1.72; color: var(--body); }
.hz__piece--text em { color: var(--rust); }
.hz__piece--portrait { height: 74%; display: flex; align-items: center; }
.hz__portrait { height: 100%; width: auto; aspect-ratio: 3 / 4; }

.hz__close { max-width: 900px; text-align: center; }
.hz__rise span { display: block; opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .9s cubic-bezier(.22,.61,.36,1); }
.hz__close.is-in .hz__rise span { opacity: 1; transform: none; }
.hz__close.is-in .hz__rise span:nth-child(2) { transition-delay: .16s; }
.hz__close.is-in .hz__rise span:nth-child(3) { transition-delay: .32s; }
.hz__close.is-in .hz__rise span:nth-child(4) { transition-delay: .48s; }
.hz__restore {
  margin-top: 36px; font-family: var(--serif); font-style: italic; color: var(--rust);
  font-size: clamp(28px, 3.2vw, 44px); line-height: 1.2;
  opacity: 0; transform: translateY(18px); transition: opacity .9s ease .7s, transform 1s cubic-bezier(.22,.61,.36,1) .7s;
}
.hz__close.is-in .hz__restore { opacity: 1; transform: none; }

.hz__bar { position: absolute; left: 50%; bottom: 28px; width: 160px; height: 1px; margin-left: -80px; background: rgba(119,45,8,0.16); }
.hz__bar span { position: absolute; inset: 0; background: var(--clay-vector); transform-origin: 0 50%; transform: scaleX(0); }

/* stacked: phones and reduced motion — same panels, top to bottom */
.hz--stacked .hz__pin { position: relative; top: auto; height: auto; overflow: visible; }
.hz--stacked .hz__track { flex-direction: column; transform: none !important; }
.hz--stacked .hz__panel { flex: none; width: 100%; height: auto; padding: 72px var(--gutter); }
.hz--stacked .hz__strip { flex-direction: column; height: auto; gap: 48px; padding: 24px var(--gutter) 64px; }
.hz--stacked .hz__piece { width: 100%; max-width: 560px; height: auto; }
.hz--stacked .hz__piece--image { flex-direction: column; padding-right: 0; }
.hz--stacked .hz__frame { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 28px; }
.hz--stacked .hz__card { position: relative; right: auto; top: auto; transform: none; width: calc(100% - 32px); max-width: 520px; margin-top: -72px; }
.hz--stacked .hz__piece--portrait { justify-content: center; }
.hz--stacked .hz__portrait { height: auto; width: 100%; max-width: 280px; }
.hz--stacked .hz__bar { display: none; }
@media (max-width: 860px) {
  .hz__panel { padding: 56px var(--gutter); }
  .hz__lead, .hz__piece--text p { font-size: 17px; }
}

/* --- 3 · the earth panel, a list instead of pills ----------------------- */
.h-connect .stack-panel--open { padding: clamp(48px, 6vw, 88px) clamp(28px, 6vw, 96px); }
.h-connect__head { text-align: center; max-width: 860px; margin: 0 auto 48px; }
.h-connect__title { color: #FFF8EE; font-size: clamp(36px, 5vw, 66px); line-height: 1.04; }
.h-connect__text { margin-top: 30px; color: #DED2C2; font-size: 18px; line-height: 1.7; }
.h-connect__text em { color: #F0D9BC; }
.h-connect__so { margin-top: 22px; color: #F0D9BC; font-size: 26px; }
.h-list {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1000px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px;
  border-bottom: 1px solid rgba(240,217,188,0.2);
}
.h-list li {
  border-top: 1px solid rgba(240,217,188,0.2);
  padding: 20px 0 20px 26px; position: relative;
  color: #F3E7D7; font-size: 17px; line-height: 1.5;
}
.h-list li::before {
  content: ""; position: absolute; left: 0; top: 29px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--clay-vector);
}
.h-list li:nth-last-child(2) { border-bottom: 0; }
.h-connect__answer {
  text-align: center; margin-top: 44px;
  font-family: var(--serif); font-style: italic; color: #FFF8EE;
  font-size: clamp(26px, 3vw, 40px);
}
@media (max-width: 760px) {
  .h-list { grid-template-columns: minmax(0, 1fr); }
  .h-connect__title br { display: none; }
}

/* --- 4 · the cards that roll in ----------------------------------------- */
.page-home .card-tall { border-radius: 36px; will-change: transform, opacity; }

/* --- 5 · the offers stack up -------------------------------------------- */
.h-offers { padding-bottom: 104px; }
.ostack { max-width: 1120px; margin: 0 auto; }
.ostack__card {
  --cover: 0;
  position: sticky;
  top: calc(var(--hdr, 84px) + 28px + var(--i) * 16px);
  min-height: min(66vh, 600px);
  margin-bottom: 40px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(32px, 4vw, 64px);
  padding: clamp(28px, 3.4vw, 48px);
  background: var(--white-card);
  border-radius: 36px;
  box-shadow: 0 -10px 40px rgba(44,34,26,0.06), 0 24px 60px rgba(44,34,26,0.10);
  scale: calc(1 - var(--cover) * 0.04);
  filter: brightness(calc(1 - var(--cover) * 0.06));
  transform-origin: 50% 0%;
}
.ostack__text { display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.ostack__no { font-size: 14px; letter-spacing: 0.08em; color: var(--clay-vector); }
.ostack__title { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3vw, 42px); line-height: 1.08; color: var(--ink); margin: 0; }
.ostack__lead { font-size: 17.5px; line-height: 1.6; color: var(--ink); }
.ostack__list { list-style: none; margin: 4px 0 6px; padding: 0; border-top: 1px solid var(--line); }
.ostack__list li { border-bottom: 1px solid var(--line); padding: 12px 0 12px 22px; position: relative; font-size: 15.5px; line-height: 1.55; color: var(--body); }
.ostack__list li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 6px; height: 6px; border-radius: 50%; background: var(--clay-vector); }
.ostack__img {
  width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block;
  border-radius: 28px; background: linear-gradient(160deg, #C8A87E, #7C6238);
}
.h-offers__cta { text-align: center; margin-top: 24px; }
@media (prefers-reduced-motion: reduce) { .ostack__card { scale: none; filter: none; } }
@media (max-width: 860px) {
  .ostack__card { position: relative; top: auto; min-height: 0; grid-template-columns: minmax(0, 1fr); margin-bottom: 22px; border-radius: 28px; }
  .ostack__img { order: -1; height: auto; min-height: 0; aspect-ratio: 16 / 11; border-radius: 22px; }
}

/* --- 6 · how to start: large numbers ------------------------------------ */
.steps-big { max-width: 980px; margin: 0 auto; }
.steps-big__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px;
  padding: 30px 0; border-bottom: 1px solid var(--line);
}
.steps-big__row:first-child { border-top: 1px solid var(--line); }
.steps-big__title { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; color: var(--ink); margin: 0 0 10px; }
.steps-big__text p { font-size: 18px; line-height: 1.6; color: var(--body); max-width: 440px; }
.steps-big__text a { color: var(--rust); text-decoration: underline; text-underline-offset: 3px; }
.steps-big__no {
  font-family: var(--serif); font-weight: 300; line-height: 0.9;
  font-size: clamp(84px, 11vw, 160px); letter-spacing: -0.02em; padding-right: 8px;
  color: var(--clay-vector); opacity: 0.55;
}
@media (max-width: 600px) {
  .steps-big__row { gap: 16px; }
  .steps-big__no { font-size: 72px; }
}

/* --- 8 · hello beautiful one -------------------------------------------- */
.h-hello .stack-panel--open { padding: clamp(40px, 5vw, 80px); }
.h-hello .portrait-band__img { margin-block: 0; }
.h-hello__greet { font-family: var(--serif); font-style: italic; color: var(--rust); font-size: clamp(30px, 3.4vw, 46px); line-height: 1.14; }

/* =========================================================================
   25 · NEXT PAGE — quiet closing step at the bottom of a page
   Open layout on the page background, one line of rule, one link with an arrow
   that keeps nudging forward. Used on Home → Ayurveda → About → Pricing.
   ========================================================================= */
.next-step { padding-block: clamp(8px, 1.5vw, 24px) clamp(80px, 9vw, 128px); background: var(--cream); }
.next-step--wash { background: var(--warm-wash-2); }
.next-step__inner { border-top: 1px solid var(--line); padding-top: clamp(28px, 3vw, 40px); }
.next-step__kicker {
  display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(22px, 2.4vw, 32px);
  font-size: 12.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--clay-vector);
}
.next-step__kicker::after { content: ""; width: 44px; height: 1px; background: currentColor; opacity: .6; order: 1; }
.next-step__kicker b { font-weight: 400; color: var(--ink); order: 2; }
.next-step__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: clamp(32px, 5vw, 80px);
}
.next-step__title {
  font-family: var(--serif); font-weight: 400; margin: 0;
  font-size: clamp(32px, 3.8vw, 52px); line-height: 1.08; color: var(--ink); max-width: 17ch;
}
.next-step__line { margin: 18px 0 0; font-size: 18px; line-height: 1.6; color: var(--body); max-width: 520px; }

.next-link { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; color: var(--rust); }
.next-link__label {
  font-family: var(--serif); font-size: 19px; line-height: 1;
  padding: 18px 28px; border: 1px solid rgba(196,114,31,0.55); border-radius: 999px;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.next-link__arrow {
  width: 58px; height: 58px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--rust); color: #FFF8EE;
  transition: background-color .35s ease, transform .35s ease;
}
.next-link__arrow svg { width: 22px; height: 22px; animation: next-nudge 2.6s ease-in-out infinite; }
@keyframes next-nudge { 0%, 55%, 100% { transform: translateX(0); } 25% { transform: translateX(5px); } }
.next-link:hover .next-link__label, .next-link:focus-visible .next-link__label { background: var(--rust); border-color: var(--rust); color: #FFF8EE; }
.next-link:hover .next-link__arrow, .next-link:focus-visible .next-link__arrow { background: var(--clay-vector); transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .next-link__arrow svg { animation: none; } }
@media (max-width: 860px) {
  .next-step__row { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 30px; }
  .next-link__label { font-size: 18px; padding: 16px 24px; }
  .next-link__arrow { width: 52px; height: 52px; }
}

/* About · single portrait now (the second oval was removed) */
.duo--single { padding-bottom: 0; }
/* About · more air around the yellow closing band */
.band-sun { margin-block: clamp(40px, 6vw, 88px); padding-block: clamp(96px, 10vw, 140px); }

/* =========================================================================
   26 · FORMS — sending state, thank-you, privacy link
   ========================================================================= */
.form-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.form-status { font-size: 14.5px; color: var(--body); margin: 0; min-height: 0; }
.form-status.is-error { color: #9A2B12; }
.form-status a { color: inherit; }
.form button[disabled] { opacity: .7; cursor: progress; }
.form-thanks { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; }
.form-thanks__title { font-family: var(--serif); font-size: clamp(26px, 2.6vw, 32px); line-height: 1.2; color: var(--rust); margin: 0; }
.form-thanks p { margin: 0; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================================
   27 · ABOUT · VISION & MISSION — a chapter of its own
   Full-bleed earth, the tree held still behind, large type that lights up
   word by word at the reading line, so the text asks to be read.
   ========================================================================= */
.vm { position: relative; background: var(--earth); color: #FFF8EE; isolation: isolate; }
.vm__bg { position: absolute; inset: 0; z-index: -1; }
.vm__img {
  position: sticky; top: 0; height: 100vh; height: 100lvh;
  background-size: cover; background-position: 50% 40%;
  opacity: .30; filter: sepia(.35) saturate(.8) contrast(.95);
}
.vm::after {                     /* soft fade into the page above and the card below */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(44,34,26,.92) 0%, rgba(44,34,26,.35) 18%, rgba(44,34,26,.35) 82%, rgba(44,34,26,.95) 100%);
}
.vm__wrap { max-width: 980px; padding-block: clamp(120px, 22vh, 220px) clamp(160px, 28vh, 280px); }
.vm__block { display: flex; flex-direction: column; gap: clamp(22px, 2.6vw, 34px); }
.vm__eyebrow { margin: 0; font-size: 12.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--honey); }
.vm__title {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(48px, 7vw, 104px); line-height: .98; letter-spacing: -.01em; color: #FFF8EE;
}
.vm__intro { margin: 0; max-width: 620px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.7; color: #DED2C2; }
.vm__intro em { font-family: var(--serif); font-size: 1.12em; color: #F3D9B4; }
.vm__read {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(25px, 2.75vw, 40px); line-height: 1.38; color: #FFF8EE; letter-spacing: -.003em;
}
.vm__statement {
  margin: clamp(120px, 20vh, 220px) 0; text-align: center;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(40px, 6.4vw, 92px); line-height: 1.08; color: var(--honey);
}
.vm-live .vm [data-words] .w { opacity: .2; transition: opacity .25s linear; }
@media (max-width: 860px) {
  .vm__wrap { padding-block: 96px 140px; }
  .vm__statement { margin: 104px 0; }
  .vm__img { opacity: .22; }
}
@media (prefers-reduced-motion: reduce) { .vm [data-words] .w { opacity: 1 !important; } }
/* the "Hello dear" card still rises over the end of the chapter */
.vm + .float-up { margin-top: -44px; }

/* safety net: decorative glows never make the page scroll sideways on phones
   (clip, unlike hidden, keeps sticky sections working) */
#connect { overflow-x: clip; }
html, body { overflow-x: clip; }

/* About · vision & mission on desktop: calmer reading size (phone + tablet unchanged) */
@media (min-width: 1024px) {
  .vm__wrap { max-width: 820px; }
  .vm__title { font-size: clamp(56px, 4.6vw, 72px); }
  .vm__read { font-size: clamp(24px, 1.8vw, 28px); line-height: 1.5; }
  .vm__statement { font-size: clamp(44px, 4vw, 62px); }
}