/* ============================================================
   LifeShift by Lavvina — built from Figma "LifeShift by Lavvina web"
   Frame 12:2 "Desktop - 2", 1440 x 10313. All px values from Figma.
   ============================================================ */

:root {
  --z: 1;
  /* backgrounds */
  --cream: #f6e6d4;
  --cream-soft: #faf7f0;
  --cream-panel: #f7f1e8;
  --phil-bg: #f4eae3;
  --testi-bg: #f8eee3;
  --mc-bg: #faf6f0;
  --card-bg: #fff8f1;
  --testi-card: #fcf9f5;
  --schedule-bg: #f0e9df;
  /* brand */
  --plum: #3f192e;
  --plum-deep: #301222;
  --ink: #332b30;
  --ink-soft: #4d4247;
  --ink-mc: #3d343d;
  --gray: #6b5e64;
  --gold: #c59960;
  --gold-strong: #c7983c;
  --amber: #bd6b00;
  --amber-2: #c77000;
  --amber-3: #844a00;
  --line: #efebe4;
  /* type */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Century Gothic", system-ui, -apple-system, sans-serif;
  --script: "Smooch", "Brush Script MT", cursive;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; }

section[id] { scroll-margin-top: 128px; }

.wrap {
  width: 1440px;
  margin: 0 auto;
  position: relative;
}

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   HEADER  (Figma 12:4 — 1440x128, #faf7f0)
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream-soft);
  transition: box-shadow .35s ease;
}
.site-header.scrolled { box-shadow: 0 6px 24px rgba(63, 25, 46, .08); }
.site-header .wrap {
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 80px;
}
.brand img { width: 283px; height: 80px; }

.nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  position: relative;
  font: 400 16px/1.45 var(--sans);
  color: var(--ink);
  padding: 8px 0;
  transition: color .25s ease;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 20px;
  height: 2px;
  background: var(--gold);
  opacity: 0;
  transition: opacity .25s ease;
}
.nav-links a:hover { color: var(--plum); }
.nav-links a.active { font-weight: 600; color: var(--ink); }
.nav-links a.active::after,
.nav-links a:hover::after { opacity: 1; }

/* buttons (shared) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--plum);
  color: #fff;
  border-radius: 100px;
  transition: transform .3s var(--ease), box-shadow .3s ease, background .3s ease;
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(63, 25, 46, .28);
  background: #55223e;
}
.btn img { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.btn:hover img { transform: translateX(4px); }

.header-cta {
  width: 296px;
  height: 60px;
  font: 500 20px/1.45 var(--sans);
}

.nav-toggle { display: none; }
.nav-cta-mobile { display: none; }
.nav-toggle:focus { outline: none; }
.nav-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* ============================================================
   HERO  (128–1023, h=895, cream)
   ============================================================ */
.hero .wrap { height: 895px; overflow: hidden; }
.hero-visual { display: contents; }

.hero-backdrop {
  position: absolute;
  left: 733px;
  top: 0;
  width: 702px;
  z-index: 1;
}
.hero-lavvina {
  position: absolute;
  left: 673px;
  top: -45px;
  width: 874px;
  max-width: none;
  z-index: 2;
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 3;
  width: 791px;
  padding: 122px 0 0 92px;
}
.hero-eyebrow {
  font: 600 24px/34.7px var(--sans);
  color: var(--gold);
  text-transform: uppercase;
}
.hero h1 {
  margin-top: 16px;
  font: 700 76px/83.6px var(--serif);
  color: var(--plum);
  white-space: nowrap;
}
.hero-divider {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 360px;
}
.hero-divider .rule { width: 128px; height: 4px; background: var(--gold-strong); }
.hero-divider img { width: 86px; height: 57px; }
.hero-sub {
  margin-top: 18px;
  width: 647px;
  font: 400 28px/44.8px var(--sans);
  color: var(--ink);
}
.hero-cta {
  margin-top: 30px;
  width: 357px;
  height: 70px;
  font: 600 20px/1.45 var(--sans);
}
.hero-cta img { width: 28px; height: 28px; }
.pillar-strip {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 16px;
  font: 600 24px/34.7px var(--sans);
  color: var(--gold);
  text-transform: uppercase;
}
.pillar-strip i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

/* ============================================================
   QUOTE  (12:44 — h=1024, image bg + 85% cream overlay)
   ============================================================ */
.quote-section {
  height: 1024px;
  background:
    linear-gradient(rgba(250, 246, 240, .85), rgba(250, 246, 240, .85)),
    url("../assets/img/quote-bg.webp") center / cover no-repeat;
}
.quote-section .wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 156px;
}
.quote-orn { width: 86px; height: 57px; }
.quote-primary {
  margin-top: 48px;
  font: 400 56px/70px var(--serif);
  color: var(--plum);
}
.quote-divider {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.quote-divider .rule {
  width: 224px;
  height: 3px;
  background: rgba(197, 153, 96, .5);
}
.quote-divider img { width: 40px; height: 40px; }
.quote-secondary {
  margin-top: 48px;
  font: 400 34px/47.6px var(--serif);
  color: var(--ink);
}
.quote-brand {
  margin-top: 48px;
  font: 400 38px/45.6px var(--serif);
  color: var(--amber);
}
.quote-brand strong { font-weight: 700; }

/* ============================================================
   HER STORY  (12:55 — h=1024, split panels)  #about
   ============================================================ */
.story-section .wrap {
  height: 1024px;
  display: flex;
  overflow: hidden;
}
.story-photo {
  position: relative;
  width: 665px;
  flex: 0 0 665px;
  background: #fff;
  overflow: hidden;
}
.story-photo img {
  position: absolute;
  left: -102px;
  top: -91px;
  width: 865px;
  max-width: none;
}
.story-content {
  flex: 1;
  background: var(--cream-panel);
  padding: 86px 70px 0 88px;
}
.story-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.story-eyebrow-row .eyebrow {
  font: 600 24px/34.7px var(--sans);
  color: var(--gold);
  text-transform: uppercase;
  white-space: nowrap;
}
.story-eyebrow-row .rule {
  flex: 1;
  height: 1px;
  background: rgba(197, 153, 96, .2);
}
.story-content h2 {
  margin-top: 40px;
  font: 700 56px/64.4px var(--serif);
  color: var(--plum);
}
.star-divider {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.star-divider .rule {
  width: 84px;
  height: 5px;
  background: rgba(197, 153, 96, .2);
}
.star-divider img { width: 48px; height: 32px; }
.story-paragraphs { margin-top: 40px; width: 621px; }
.story-paragraphs p {
  font: 400 20px/33px var(--sans);
  color: var(--ink);
}
.story-paragraphs p + p { margin-top: 24px; }
.story-signoff { margin-top: 40px; }
.story-signoff .lived {
  font: italic 700 32px/38.8px var(--serif);
  color: var(--plum);
}
.story-signoff .author {
  margin-top: 12px;
  font: 600 16px/23.1px var(--sans);
  color: var(--gold);
}
.story-cta {
  margin-top: 40px;
  width: 240px;
  height: 71px;
  font: 600 20px/1.45 var(--sans);
}
.story-cta img { width: 24px; height: 24px; }

/* ============================================================
   PHILOSOPHY  (12:78 — h=1024, #f4eae3)  #philosophy
   ============================================================ */
.philosophy-section { background: var(--phil-bg); }
.philosophy-section .wrap {
  height: 1024px;
  overflow: hidden;
  text-align: center;
}
.leaves-deco {
  position: absolute;
  width: 553px;
  opacity: 1;
  pointer-events: none;
}
.philosophy-section .leaves-left { left: -74px; top: 194px; }
.philosophy-section .leaves-right { left: 889px; top: 194px; transform: scaleX(-1); }
.philosophy-header { position: relative; padding-top: 80px; }
.philosophy-header .eyebrow {
  font: 600 24px/34.7px var(--sans);
  color: var(--gold);
  text-transform: uppercase;
}
.philosophy-header h2 {
  margin-top: 24px;
  font: 500 80px/88px var(--serif);
  color: var(--plum);
}
.orn-row {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.orn-row .rule {
  width: 120px;
  height: 1px;
  background: var(--gold);
  opacity: .3;
}
.orn-row img { width: 18px; height: 18px; }
.philosophy-header .sub {
  margin: 24px auto 0;
  width: 760px;
  font: 400 18px/28px var(--sans);
  color: var(--ink-soft);
}
.pillars-grid {
  position: relative;
  margin-top: 49px;
  display: flex;
  justify-content: center;
  gap: 24px;
}
.pillar-card {
  width: 295px;
  height: 450px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(63, 25, 46, .06);
  padding: 48px 24px 0;
  transition: transform .3s var(--ease), box-shadow .3s ease;
}
.pillar-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 54px rgba(63, 25, 46, .12);
}
.pillar-card .num {
  font: 400 96px/72px var(--serif);
  color: var(--plum);
}
.pillar-card .orn { width: 84px; height: 56px; margin: 16px auto 0; }
.pillar-card h3 {
  margin-top: 20px;
  font: 700 32px/38.8px var(--serif);
  color: var(--plum);
  text-transform: uppercase;
}
.pillar-card .diamond {
  width: 6px;
  height: 6px;
  margin: 9px auto;
  background: var(--gold);
  transform: rotate(45deg);
}
.pillar-card .desc {
  font: 400 24px/28.8px var(--sans);
  color: var(--ink-soft);
}
.pillar-card .tags {
  margin-top: 40px;
  font: 600 16px/24px var(--sans);
  color: var(--gold);
  text-transform: uppercase;
}
.philosophy-footer {
  position: relative;
  margin-top: 65px;
  font: 400 26px/31.5px var(--serif);
  color: var(--plum);
}

/* ============================================================
   SECOND LIFE  (12:144 — h=853, dark plum + photo)
   ============================================================ */
.second-life { background: var(--plum-deep); }
.second-life .wrap { height: 853px; overflow: hidden; }
.second-life .photo {
  position: absolute;
  left: 516px;
  top: 0;
  width: 924px;
  height: 853px;
  object-fit: cover;
}
.second-life .fade {
  position: absolute;
  left: 516px;
  top: 0;
  width: 807px;
  height: 853px;
  background:
    linear-gradient(to left, rgba(48, 18, 34, 0), #301222),
    linear-gradient(to left, rgba(48, 18, 34, 0), #301222);
}
.second-life .content {
  position: relative;
  z-index: 2;
  width: 697px;
  padding: 143px 0 0 117px;
}
.second-life h2 {
  font: 700 68px/76px var(--serif);
  color: #fff;
  white-space: nowrap;
}
.second-life h2 em { font-style: normal; color: var(--gold); }
.second-life .divider {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.second-life .divider .rule {
  width: 160px;
  height: 1px;
  background: var(--gold);
  opacity: .3;
}
.second-life .divider img { width: 24px; height: 24px; }
.second-life .bullets { margin-top: 40px; }
.second-life .bullets p {
  font: 400 32px/40px var(--serif);
  color: #fff;
}
.second-life .bullets p + p { margin-top: 8px; }
.second-life .bullets em { font-style: normal; color: var(--gold); }
.outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 1.5px solid var(--gold);
  border-radius: 100px;
  color: #fff;
  transition: background .3s ease, transform .3s var(--ease);
}
.outline-btn:hover { background: rgba(197, 153, 96, .14); transform: translateY(-3px); }
.outline-btn img { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.outline-btn:hover img { transform: translateX(4px); }
.second-life .cta {
  margin-top: 40px;
  width: 259px;
  height: 60px;
  font: 600 14px/1.45 var(--sans);
  letter-spacing: .5px;
}

/* ============================================================
   PROGRAMS  (12:165 — cream)  #programs
   ============================================================ */
.programs-section .wrap {
  height: 1369px;
  overflow: hidden;
  text-align: center;
}
.programs-section .leaves-left { left: -52px; top: 578px; }
.programs-section .leaves-right { left: 967px; top: 578px; transform: scaleX(-1); }
.programs-header { position: relative; padding-top: 111px; }
.programs-header .eyebrow {
  font: 600 20px/28.9px var(--sans);
  color: var(--gold);
  text-transform: uppercase;
}
.programs-header .star-divider {
  margin-top: 23px;
  justify-content: center;
}
.programs-header .star-divider .rule { width: 140px; }
.programs-header h2 {
  margin-top: 23px;
  font: 700 64px/56px var(--serif);
  color: var(--plum);
}
.program-cards {
  position: relative;
  margin: 49px auto 0;
  width: 1103px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.program-card {
  display: flex;
  height: 175px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(63, 25, 46, .06);
  overflow: hidden;
  text-align: left;
  transition: transform .3s var(--ease), box-shadow .3s ease;
}
.program-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px rgba(63, 25, 46, .12);
}
.program-card .accent {
  flex: 0 0 84px;
  background: var(--plum);
  display: flex;
  align-items: center;
  justify-content: center;
}
.program-card .accent img { width: 28px; height: 28px; }
.program-card .body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px 0 24px;
}
.program-card .details { width: 539px; }
.program-card h3 {
  font: 600 36px/43.2px var(--serif);
  color: var(--plum);
  white-space: nowrap;
}
.program-card .tagline {
  margin-top: 6px;
  font: italic 400 20px/24.2px var(--serif);
  color: var(--amber-2);
}
.program-card .desc {
  margin-top: 6px;
  font: 400 16px/22.4px var(--sans);
  color: var(--ink);
  opacity: .8;
}
.program-card .price-col { text-align: right; }
.program-card .price {
  font: 700 40px/48.4px var(--serif);
  color: var(--plum);
}
.learn-more {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--gold);
  border-radius: 100px;
  font: 500 12px/17.3px var(--sans);
  color: var(--gold);
  transition: background .25s ease, color .25s ease;
}
.learn-more img { width: 10px; height: 10px; }
.learn-more:hover { background: var(--gold); color: #fff; }
.programs-banner {
  position: relative;
  margin: 48px auto 0;
  width: 780px;
  height: 118px;
  background: var(--plum);
  border-radius: 12px;
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 34px;
}
.programs-banner p {
  flex: 1;
  font: italic 400 32px/38.8px var(--serif);
  color: var(--mc-bg);
  text-align: center;
}
.programs-banner p em {
  font-style: normal;
  font-weight: 600;
  color: var(--gold);
}
.programs-banner img { width: 20px; height: 20px; }

/* ============================================================
   BOOK  (12:246 — h=977, cream)  #book
   ============================================================ */
.book-section .wrap { height: 977px; overflow: hidden; }
.book-photo {
  position: absolute;
  left: 275px;
  top: 147px;
  width: 1245px;
  max-width: none;
}
.book-fade {
  position: absolute;
  left: 263px;
  top: 760px;
  width: 1177px;
  height: 217px;
  background:
    linear-gradient(to bottom, rgba(246, 230, 212, 0), var(--cream)),
    linear-gradient(to bottom, rgba(246, 230, 212, 0), var(--cream));
}
.book-content {
  position: absolute;
  left: 71px;
  top: 147px;
  width: 540px;
  text-align: center;
}
.book-content .orn { width: 111px; height: 74px; margin: 0 auto; }
.book-eyebrow {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.book-eyebrow .rule { width: 88px; height: 4px; background: var(--gold); }
.book-eyebrow span {
  font: 600 20px/28.9px var(--sans);
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
}
.book-content h2 {
  margin-top: 48px;
  font: 700 64px/68px var(--serif);
  color: var(--plum);
}
.book-content h2 span { display: block; margin-top: 8px; }
.book-quote {
  margin-top: 43px;
  font: 600 32px/32px var(--serif);
  color: var(--ink);
}
.book-quote-sub {
  margin-top: 12px;
  font: italic 400 22px/32px var(--serif);
  color: var(--amber-3);
}
.roles-grid {
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.role-pill {
  width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.role-pill img { width: 24px; height: 24px; box-sizing: content-box; padding: 4px; }
.role-pill span {
  font: 500 11px/15.9px var(--sans);
  letter-spacing: 1.5px;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.roles-grid .sep {
  width: 1px;
  height: 28px;
  background: rgba(197, 153, 96, .25);
}
.book-cta {
  margin-top: 40px;
  width: 278px;
  height: 56px;
  border-radius: 10px;
  font: 600 14px/1.45 var(--sans);
  letter-spacing: 2px;
  text-transform: uppercase;
  box-shadow: 0 16px 32px rgba(63, 25, 46, .25);
}

/* ============================================================
   TESTIMONIALS  (12:297 — h=951, #f8eee3)  #testimonials
   ============================================================ */
.testimonials-section { background: var(--testi-bg); }
.testimonials-section .wrap {
  height: 951px;
  overflow: hidden;
  text-align: center;
}
.deco-tree {
  position: absolute;
  left: 1220px;
  top: 40px;
  width: 180px;
  opacity: .15;
  pointer-events: none;
}
.deco-leaf {
  position: absolute;
  left: 40px;
  top: 579px;
  width: 160px;
  opacity: .15;
  pointer-events: none;
}
.testimonials-header { position: relative; padding-top: 96px; }
.testimonials-header h2 {
  font: 700 64px/72px var(--serif);
  color: var(--plum);
}
.tri-orn {
  display: block;
  width: 19px;
  height: 19px;
  margin: 16px auto 0;
  color: var(--gold);
  opacity: .8;
}
.testimonials-header .overline {
  margin-top: 16px;
  font: 500 20px/28.9px var(--sans);
  letter-spacing: 4px;
  color: var(--gray);
  text-transform: uppercase;
}
.testimonial-cards {
  position: relative;
  margin-top: 48px;
  display: flex;
  justify-content: center;
  gap: 24px;
}
.t-card {
  width: 410px;
  height: 320px;
  background: var(--testi-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(63, 25, 46, .06);
  overflow: hidden;
  display: flex;
  text-align: left;
  transition: transform .3s var(--ease), box-shadow .3s ease;
}
.t-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px rgba(63, 25, 46, .12);
}
.t-card .text-col {
  flex: 0 0 240px;
  padding: 24px;
  position: relative;
}
.t-card .quote-mark {
  font: 700 48px/1 var(--serif);
  color: var(--gold);
}
.t-card .quote {
  margin-top: 34px;
  width: 192px;
  font: 400 15px/24px var(--sans);
  color: var(--ink-soft);
}
.t-card .author {
  position: absolute;
  left: 24px;
  bottom: 38px;
}
.t-card .author .name {
  font: 600 12px/17.3px var(--sans);
  letter-spacing: 1.5px;
  color: var(--gold);
  text-transform: uppercase;
}
.t-card .author .loc {
  font: 400 12px/17.3px var(--sans);
  color: var(--gray);
}
.t-card .portrait {
  flex: 1;
  overflow: hidden;
}
.t-card .portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.t-card:hover .portrait img { transform: scale(1.05); }

.t-video {
  position: relative;
  width: 410px;
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(63, 25, 46, .06);
  background: url("../assets/img/video-anjali.webp") center / cover no-repeat;
  text-align: left;
  display: block;
  transition: transform .3s var(--ease), box-shadow .3s ease;
}
.t-video:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px rgba(63, 25, 46, .12);
}
.t-video::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(63, 25, 46, .35);
}
.t-video .play {
  position: absolute;
  left: 24px;
  top: 24px;
  width: 48px;
  height: 48px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s var(--ease), background .3s ease;
}
.t-video:hover .play { transform: scale(1.1); background: rgba(255, 255, 255, .3); }
.t-video .play img { width: 14px; height: 14px; }
.t-video .meta {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 42px;
}
.t-video .meta .title {
  font: 500 24px/28px var(--serif);
  color: #fff;
}
.t-video .meta .dur {
  margin-top: 6px;
  font: 600 11px/15.9px var(--sans);
  letter-spacing: 1px;
  color: var(--gold);
  text-transform: uppercase;
}
.testimonials-bottom { position: relative; margin-top: 48px; }
.testimonials-bottom .quote {
  font: italic 400 36px/43.6px var(--serif);
  color: var(--plum);
}
.testimonials-cta {
  margin-top: 24px;
  width: 239px;
  height: 51px;
  font: 600 13px/1.45 var(--sans);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.testimonials-cta img { width: 14px; height: 14px; }

/* ============================================================
   MASTERCLASS  (12:338 — h=917, #faf6f0)  #masterclass
   ============================================================ */
.masterclass-section { background: var(--mc-bg); }
.masterclass-section .wrap { height: 917px; overflow: hidden; }
.mc-photo {
  position: absolute;
  left: 822px;
  top: 173px;
  width: 540px;
  height: 499px;
  object-fit: cover;
  border-radius: 58px;
}
.mc-card {
  position: absolute;
  left: 649px;
  top: 526px;
  width: 517px;
  background: var(--plum-deep);
  border: 1px solid var(--gold);
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(48, 18, 34, .35);
  padding: 21px 32px 22px;
  text-align: center;
  z-index: 2;
}
.mc-card .orn { width: 54px; height: 36px; margin: 0 auto; }
.mc-card .card-title {
  margin-top: 8px;
  font: 600 20px/28.9px var(--sans);
  color: var(--gold);
  text-transform: uppercase;
}
.mc-card ul { margin-top: 16px; text-align: left; }
.mc-card li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mc-card li + li { margin-top: 14px; }
.mc-card li .check {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: rgba(197, 153, 96, .13);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-card li .check img { width: 10px; height: 10px; }
.mc-card li span {
  font: 400 16px/22.4px var(--sans);
  color: #fff;
}
.mc-card .script {
  margin-top: 24px;
  font: 400 32px/44.8px var(--script);
  color: var(--gold);
}
.mc-content {
  position: relative;
  width: 600px;
  padding: 69px 0 0 64px;
  text-align: center;
  z-index: 1;
}
.mc-content h2 {
  font: 600 64px/70.4px var(--serif);
  color: var(--plum-deep);
}
.mc-content .desc {
  margin: 16px auto 0;
  width: 448px;
  font: 400 18px/28.8px var(--sans);
  color: var(--ink-mc);
}
.mc-content .desc .stuck { font-weight: 500; color: var(--plum-deep); }
.mc-content .desc .aligned { font-weight: 500; color: var(--gold); }
.mc-pillars {
  margin-top: 32px;
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.mc-pillar {
  width: 126px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mc-pillar .ring {
  width: 40px;
  height: 40px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-pillar .ring img { width: 18px; height: 18px; }
.mc-pillar .label {
  margin-top: 8px;
  font: 700 11px/15.9px var(--sans);
  color: var(--plum-deep);
  text-transform: uppercase;
}
.mc-pillar .note {
  margin-top: 8px;
  font: 400 12px/17.3px var(--sans);
  color: var(--ink-mc);
}
.mc-pillars .sep {
  width: 1px;
  height: 64px;
  background: rgba(197, 153, 96, .2);
  align-self: flex-start;
}
.mc-schedule {
  margin-top: 32px;
  width: 545px;
  height: 67px;
  background: var(--schedule-bg);
  border-radius: 16px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  text-align: left;
}
.mc-schedule .block {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.mc-schedule .block img { width: 20px; height: 20px; }
.mc-schedule .block .l1 {
  font: 600 12px/17.3px var(--sans);
  color: var(--plum-deep);
}
.mc-schedule .block .l2 {
  font: 500 11px/15.9px var(--sans);
  color: var(--ink-mc);
  text-transform: uppercase;
}
.mc-schedule .sep {
  width: 1px;
  height: 32px;
  background: rgba(197, 153, 96, .2);
  margin: 0 12px;
}
.mc-cta-row {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  text-align: left;
}
.mc-cta {
  width: 233px;
  height: 58px;
  background: var(--plum-deep);
  font: 600 15px/1.45 var(--sans);
  text-transform: uppercase;
  flex: 0 0 auto;
}
.mc-script {
  font: 400 36px/50.4px var(--script);
  color: var(--gold);
}
.mc-trust {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}
.mc-trust img { width: 16px; height: 16px; }
.mc-trust span {
  font: 600 12px/17.3px var(--sans);
  color: var(--ink-mc);
  text-transform: uppercase;
}

/* ============================================================
   COMMUNITY  (12:427 — cream)  #community
   ============================================================ */
.community-section .wrap {
  height: 678px;
  overflow: hidden;
}
.community-content {
  position: absolute;
  left: 96px;
  top: 52px;
  width: 580px;
  text-align: center;
}
.community-content .orn { width: 76px; height: 51px; margin: 0 auto; }
.community-marker {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.community-marker .rule {
  width: 60px;
  height: 1px;
  background: var(--gold);
  opacity: .5;
}
.community-marker span {
  font: 600 20px/28.9px var(--sans);
  color: var(--gold);
  text-transform: uppercase;
}
.community-content h2 {
  margin-top: 17px;
  font: 700 56px/64px var(--serif);
  color: var(--plum);
}
.community-content h2 em { font-weight: 400; }
.community-content .tri-orn { margin-top: 17px; }
.community-content .body {
  margin-top: 17px;
  font: 400 18px/28px var(--sans);
  color: #2d2529;
}
.community-content .body em {
  font: italic 600 18px/28px var(--sans);
  color: var(--gold);
}
.insta-box {
  margin-top: 50px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-align: left;
}
.insta-box .icon-frame {
  width: 48px;
  height: 48px;
  border: 2px solid var(--plum);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s ease;
}
.insta-box:hover .icon-frame { background: rgba(63, 25, 46, .06); }
.insta-box .icon-frame img { width: 24px; height: 24px; }
.insta-box .l1 {
  font: 700 12px/17.3px var(--sans);
  color: var(--gold);
  text-transform: uppercase;
}
.insta-box .l2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 22px/26.6px var(--serif);
  color: var(--plum);
}
.insta-box .l2 img { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.insta-box:hover .l2 img { transform: translateX(4px); }
.community-visual {
  position: absolute;
  left: 844px;
  top: 90px;
  width: 500px;
}
.community-visual > img {
  width: 500px;
  height: 293px;
  object-fit: cover;
  border-radius: 15px;
}
.community-bar {
  margin: 24px 0 0 10px;
  width: 480px;
  height: 84px;
  background: var(--plum);
  border-radius: 16px;
  box-shadow: 0 20px 44px rgba(63, 25, 46, .25);
  display: flex;
  align-items: center;
  padding: 0 24px;
}
.community-bar .chip {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.community-bar .chip img { width: 18px; height: 18px; }
.community-bar .lines { margin-left: 16px; flex: 1; }
.community-bar .lines .l1 {
  font: 400 14px/20.2px var(--sans);
  color: rgba(255, 255, 255, .8);
}
.community-bar .lines .l2 {
  font: 600 18px/21.8px var(--serif);
  color: var(--gold);
}
.community-bar .leaf { width: 40px; height: 40px; opacity: .3; }

/* ============================================================
   FOOTER  (12:462 — h=473, #000, top radius 44)
   ============================================================ */
.site-footer {
  background: #000;
  border-radius: 44px 44px 0 0;
  color: #fff;
}
.site-footer .wrap { padding: 92px 80px 0; }
.footer-cols {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-brand img { width: 232px; height: 177px; }
.footer-col { width: 164px; }
.footer-col h4 {
  font: 700 18px/27px "Roboto Condensed", var(--sans);
  letter-spacing: -.44px;
  color: #fff;
}
.footer-col ul { margin-top: 16px; }
.footer-col li + li { margin-top: 12px; }
.footer-col a {
  font: 400 16px/20px "Inter", var(--sans);
  letter-spacing: -.15px;
  color: rgba(255, 255, 255, .7);
  transition: color .25s ease, padding-left .25s ease;
}
.footer-col a:hover { color: #fff; padding-left: 6px; }
.footer-apps { width: 208px; }
.footer-apps h4 {
  font: 700 18px/27px "Roboto Condensed", var(--sans);
  letter-spacing: -.44px;
}
.footer-apps a { display: block; margin-top: 16px; }
.footer-apps a:first-of-type { margin-top: 16px; }
.footer-apps img {
  width: 208px;
  height: 70px;
  transition: transform .3s var(--ease);
}
.footer-apps a:hover img { transform: translateY(-3px); }
.footer-bottom {
  margin-top: 67px;
  border-top: 1px solid #c77509;
  padding: 17px 0 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-social {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer-social a { display: flex; opacity: .9; transition: opacity .25s ease, transform .25s var(--ease); }
.footer-social a:hover { opacity: 1; transform: translateY(-2px); }
.footer-social img { height: 20px; width: auto; }
.footer-bottom .copyright {
  font: 400 14px/20px "Inter", var(--sans);
  letter-spacing: -.15px;
  color: #fff;
}

/* ============================================================
   ZOOM LAYER — 900–1439px shows the 1440 design proportionally
   ============================================================ */
@media (min-width: 900px) and (max-width: 1439.98px) {
  body { zoom: var(--z, 0.68); }
}

/* ============================================================
   MOBILE  (<900px)
   ============================================================ */
@media (max-width: 899.98px) {
  .wrap { width: 100%; }
  section[id] { scroll-margin-top: 84px; }

  /* header */
  .site-header .wrap { height: 84px; padding: 0 20px; }
  .brand img { width: 170px; height: 48px; }
  .header-cta { display: none; }
  .nav-toggle {
    display: block;
    position: relative;
    width: 44px;
    height: 44px;
    z-index: 120;
  }
  .nav-toggle span {
    position: absolute;
    left: 10px;
    width: 24px;
    height: 2px;
    background: var(--plum);
    transition: transform .3s var(--ease), opacity .3s ease, top .3s var(--ease);
  }
  .nav-toggle span:nth-child(1) { top: 15px; }
  .nav-toggle span:nth-child(2) { top: 21px; }
  .nav-toggle span:nth-child(3) { top: 27px; }
  .nav-toggle.open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
  .brand { position: relative; z-index: 120; } /* logo + burger stay above the panel */
  .nav-links {
    position: fixed;
    inset: 0;
    left: 0;
    transform: translateX(100%);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    padding: 108px 24px 32px;
    background: var(--cream-soft);
    transition: transform .35s var(--ease);
    overflow-y: auto;
    z-index: 110;
  }
  .nav-links.open { transform: none; }
  .nav-links a {
    width: 100%;
    padding: 14px 0;
    font-size: 18px;
    line-height: 24px;
    border-bottom: 1px solid rgba(63, 25, 46, .08);
  }
  .nav-links a::after { display: none; }
  .nav-links a.nav-cta-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    align-self: flex-start;
    margin-top: 28px;
    padding: 0 28px;
    height: 48px;
    border: 0;
    border-radius: 100px;
    background: var(--plum);
    color: #fff;
    font: 600 15px/1 var(--sans);
  }
  body.menu-open { overflow: hidden; }

  /* hero */
  .hero .wrap { height: auto; display: flex; flex-direction: column; }
  .hero-content {
    width: 100%;
    padding: 48px 24px 0;
  }
  .hero-eyebrow { font-size: 16px; line-height: 1.45; }
  .hero h1 { font-size: 40px; line-height: 1.15; white-space: normal; }
  .hero-divider { width: 100%; max-width: 320px; }
  .hero-divider .rule { flex: 1; width: auto; height: 3px; }
  .hero-divider img { width: 64px; height: 42px; }
  .hero-sub { width: 100%; font-size: 19px; line-height: 1.6; }
  .hero-cta { width: 100%; max-width: 340px; height: 60px; font-size: 17px; }
  .pillar-strip { font-size: 16px; gap: 12px; flex-wrap: wrap; }
  .hero-visual { display: block; order: 2; position: relative; height: 430px; margin-top: 24px; overflow: hidden; }
  .hero-backdrop { position: absolute; left: 50%; top: 20px; transform: translateX(-46%); width: 300px; }
  .hero-lavvina { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 380px; }

  /* quote */
  .quote-section { height: auto; }
  .quote-section .wrap { padding: 80px 24px; }
  .quote-orn { width: 64px; height: 42px; }
  .quote-primary { margin-top: 32px; font-size: 30px; line-height: 1.35; }
  .quote-divider { margin-top: 32px; }
  .quote-divider .rule { width: 80px; height: 2px; }
  .quote-divider img { width: 32px; height: 32px; }
  .quote-secondary { margin-top: 32px; font-size: 22px; line-height: 1.45; }
  .quote-brand { margin-top: 32px; font-size: 26px; line-height: 1.3; }

  /* story */
  .story-section .wrap { height: auto; flex-direction: column; }
  .story-photo {
    flex: none;
    width: 100%;
    height: 420px;
  }
  .story-photo img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
  }
  .story-content { padding: 48px 24px 64px; }
  .story-eyebrow-row .eyebrow { font-size: 15px; white-space: normal; }
  .story-content h2 { margin-top: 24px; font-size: 34px; line-height: 1.2; }
  .star-divider { margin-top: 24px; }
  .story-paragraphs { margin-top: 24px; width: 100%; }
  .story-paragraphs p { font-size: 17px; line-height: 1.65; }
  .story-signoff { margin-top: 28px; }
  .story-signoff .lived { font-size: 24px; line-height: 1.3; }
  .story-cta { margin-top: 28px; width: 220px; height: 60px; font-size: 17px; }

  /* philosophy */
  .philosophy-section .wrap { height: auto; padding: 0 24px 64px; }
  .leaves-deco { display: none; }
  .philosophy-header { padding-top: 64px; }
  .philosophy-header .eyebrow { font-size: 15px; }
  .philosophy-header h2 { font-size: 42px; line-height: 1.15; }
  .philosophy-header .sub { width: 100%; font-size: 16px; }
  .pillars-grid { margin-top: 36px; flex-direction: column; align-items: center; }
  .pillar-card { width: 100%; max-width: 360px; height: auto; padding-bottom: 40px; }
  .philosophy-footer { margin-top: 40px; font-size: 21px; }

  /* second life */
  .second-life .wrap { height: auto; }
  .second-life .photo, .second-life .fade { position: static; display: block; }
  .second-life .photo { width: 100%; height: 380px; }
  .second-life .fade { display: none; }
  .second-life .content { width: 100%; padding: 48px 24px 64px; }
  .second-life h2 { font-size: 38px; line-height: 1.2; white-space: normal; }
  .second-life .divider { margin-top: 28px; }
  .second-life .divider .rule { width: 90px; }
  .second-life .bullets { margin-top: 28px; }
  .second-life .bullets p { font-size: 24px; line-height: 1.3; }
  .second-life .cta { margin-top: 32px; }

  /* programs */
  .programs-section .wrap { height: auto; padding: 0 24px 64px; }
  .programs-header { padding-top: 64px; }
  .programs-header .eyebrow { font-size: 15px; }
  .programs-header h2 { font-size: 36px; line-height: 1.15; }
  .program-cards { width: 100%; margin-top: 36px; }
  .program-card { flex-direction: column; height: auto; }
  .program-card .accent {
    flex: none;
    width: 100%;
    height: 56px;
  }
  .program-card .body {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }
  .program-card .details { width: 100%; }
  .program-card h3 { font-size: 26px; line-height: 1.2; white-space: normal; }
  .program-card .tagline { font-size: 18px; }
  .program-card .price-col {
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .program-card .price { font-size: 30px; }
  .learn-more { margin-top: 0; }
  .programs-banner {
    width: 100%;
    height: auto;
    padding: 24px;
    gap: 16px;
  }
  .programs-banner p { font-size: 22px; line-height: 1.35; }

  /* book */
  .book-section .wrap { height: auto; padding: 64px 24px; }
  .book-content { position: static; width: 100%; }
  .book-content h2 { font-size: 40px; line-height: 1.1; }
  .book-quote { font-size: 24px; line-height: 1.2; }
  .book-quote-sub { font-size: 18px; line-height: 1.4; }
  .roles-grid { flex-wrap: wrap; gap: 12px; }
  .roles-grid .sep { display: none; }
  .role-pill { width: 96px; }
  .book-photo {
    position: static;
    width: 100%;
    margin-top: 32px;
  }
  .book-fade { display: none; }

  /* testimonials */
  .testimonials-section .wrap { height: auto; padding: 0 24px 64px; }
  .deco-tree, .deco-leaf { display: none; }
  .testimonials-header { padding-top: 64px; }
  .testimonials-header h2 { font-size: 38px; line-height: 1.15; }
  .testimonials-header .overline { font-size: 14px; letter-spacing: 3px; }
  .testimonial-cards { margin-top: 36px; flex-direction: column; align-items: center; }
  .t-card, .t-video { width: 100%; max-width: 410px; }
  .testimonials-bottom .quote { font-size: 24px; line-height: 1.35; }

  /* masterclass */
  .masterclass-section .wrap { height: auto; padding: 64px 24px; }
  .mc-content { width: 100%; padding: 0; }
  .mc-content h2 { font-size: 40px; line-height: 1.15; }
  .mc-content .desc { width: 100%; }
  .mc-pillars { flex-wrap: wrap; gap: 20px; justify-content: center; }
  .mc-pillars .sep { display: none; }
  .mc-schedule {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
  }
  .mc-schedule .sep { display: none; }
  .mc-cta-row { flex-direction: column; align-items: center; gap: 12px; }
  .mc-trust { justify-content: center; }
  .mc-trust span { font-size: 11px; }
  .mc-photo {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 36px;
    border-radius: 32px;
  }
  .mc-card {
    position: static;
    width: 100%;
    margin-top: 24px;
  }

  /* community */
  .community-section .wrap { height: auto; padding: 64px 24px; }
  .community-content { position: static; width: 100%; }
  .community-content h2 { font-size: 34px; line-height: 1.2; }
  .insta-box { margin-top: 32px; }
  .community-visual { position: static; width: 100%; margin-top: 36px; }
  .community-visual > img { width: 100%; height: auto; }
  .community-bar { margin: 20px 0 0; width: 100%; height: auto; padding: 18px 20px; }

  /* footer */
  .site-footer { border-radius: 28px 28px 0 0; }
  .site-footer .wrap { padding: 56px 24px 0; }
  .footer-cols { flex-direction: column; gap: 36px; }
  .footer-brand img { width: 180px; height: auto; }
  .footer-col { width: 100%; }
  .footer-bottom {
    margin-top: 40px;
    flex-direction: column;
    gap: 16px;
    padding: 20px 0 24px;
  }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}