@import url('colors_and_type.css?v=2');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: var(--oat); color: var(--charcoal); font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg { display: block; max-width: 100%; }

/* ===================================================================
   SCROLL REVEAL
   =================================================================== */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 720ms var(--ease-serif), transform 720ms var(--ease-serif); }
.reveal-in { opacity: 1; transform: translateY(0); }
.hook .reveal:nth-child(2) { transition-delay: 80ms; }
.hook .reveal:nth-child(3) { transition-delay: 160ms; }
.science .reveal:nth-child(2), .steps .reveal:nth-child(2), .plans .reveal:nth-child(2) { transition-delay: 80ms; }
.science .reveal:nth-child(3), .steps .reveal:nth-child(3), .plans .reveal:nth-child(3) { transition-delay: 160ms; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===================================================================
   SHARED TYPE — single page, brand-faithful
   =================================================================== */
.acc { font-family: var(--font-display); font-weight: 400; font-style: italic; color: var(--turmeric); }

.eyebrow {
  font-family: var(--font-body); font-weight: 700; font-size: 10px;
  letter-spacing: 0.4em; text-transform: uppercase; color: var(--stone);
  display: inline-flex; align-items: center; gap: 14px;
}
.eyebrow::before { content: ''; display: inline-block; width: 32px; height: 0.5px; background: var(--turmeric); }

.rule { width: 40px; height: 0.5px; background: var(--turmeric); margin: 32px auto; border: none; }

/* Section number chip — Lato 10px ALL-CAPS tracked 0.2em on charcoal */
.num {
  font-family: var(--font-body); font-weight: 700;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--oat); background: var(--charcoal);
  padding: 5px 10px; display: inline-block;
}
.section-dark .num { background: var(--turmeric); color: var(--charcoal); }

/* ===================================================================
   NAV — minimal sticky bar
   =================================================================== */
.nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 56px;
  background: rgba(244, 240, 232, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 0.5px solid var(--linen);
}
.nav-mark { display: flex; align-items: baseline; gap: 6px; }
.nav-mark .bl, .nav-mark .nd {
  font-family: var(--font-display); font-weight: 700; color: var(--charcoal);
  font-size: 22px; line-height: 1;
}
.nav-mark .e {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  color: var(--turmeric); font-size: 22px; line-height: 1;
}
.nav-mark .co {
  font-family: var(--font-display); font-style: italic;
  color: var(--stone); font-size: 13px; line-height: 1;
}
.nav-the {
  font-family: var(--font-body); font-size: 9px; font-weight: 300;
  letter-spacing: 0.4em; text-transform: uppercase; color: var(--stone);
  margin-right: 8px;
}
.nav-links { display: flex; gap: 36px; }
.nav-link {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--stone);
  text-decoration: none; cursor: pointer;
  transition: color var(--dur-base) var(--ease-out);
}
.nav-link:hover { color: var(--charcoal); }
.nav-cta {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--charcoal);
  border: 1px solid var(--charcoal); padding: 10px 16px;
  background: transparent; cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.nav-cta:hover { background: var(--charcoal); color: var(--oat); }

/* ===================================================================
   1 · HERO
   =================================================================== */
.hero {
  background: var(--charcoal);
  color: var(--oat);
  min-height: calc(100vh - 60px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 40px;
  position: relative;
  overflow: hidden;
}
.hero-img {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.hero-img img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.38; filter: grayscale(0.35) brightness(0.72) contrast(1.05);
}
.hero-img::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(28,28,26,0.25) 0%, rgba(28,28,26,0.78) 75%),
    linear-gradient(180deg, rgba(28,28,26,0.55) 0%, rgba(28,28,26,0.2) 40%, rgba(28,28,26,0.55) 100%);
}
.hero > *:not(.hero-img) { position: relative; z-index: 1; }
.hero-art {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(640px, 70vw); height: auto;
  opacity: 0.22; pointer-events: none;
}
.hero-the {
  font-family: var(--font-body); font-size: 10px; font-weight: 300;
  letter-spacing: 0.6em; text-transform: uppercase;
  color: var(--stone); margin-bottom: 18px;
}
.hero-mark {
  display: flex; align-items: baseline; justify-content: center;
}
.hero-mark .bl, .hero-mark .nd {
  font-family: var(--font-display); font-weight: 700; color: var(--oat);
  font-size: clamp(80px, 12vw, 180px); line-height: 1; letter-spacing: -0.02em;
}
.hero-mark .e {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  color: var(--turmeric); font-size: clamp(80px, 12vw, 180px);
  line-height: 1; letter-spacing: -0.02em;
}
.hero-co {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  color: var(--stone); font-size: clamp(20px, 2.4vw, 36px);
  margin-top: 4px;
}
.hero-rule { width: 56px; height: 0.5px; background: var(--turmeric); margin: 36px 0 28px; }
.hero-tag {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px); color: var(--oat);
  text-align: center;
}
.hero-context {
  font-family: var(--font-body); font-weight: 300; font-size: 14px;
  color: var(--stone-lt); margin-top: 14px; text-align: center;
  max-width: 480px; line-height: 1.6;
}
.hero-cta {
  margin-top: 56px;
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--turmeric); color: var(--charcoal);
  padding: 18px 32px; border: none; cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out);
}
.hero-cta:hover { background: #D4A030; }
.hero-cta .arrow { font-family: var(--font-display); font-style: italic; font-size: 18px; line-height: 1; letter-spacing: 0; text-transform: none; font-weight: 400; }

.hero-foot {
  position: absolute; bottom: 32px; left: 0; right: 0;
  display: flex; justify-content: space-between; padding: 0 56px;
  font-family: var(--font-body); font-size: 9px; font-weight: 300;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-mute);
}

/* ===================================================================
   2 · THE HOOK — three columns of numbers
   =================================================================== */
.hook {
  background: var(--oat);
  padding: 140px 56px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-bottom: 0.5px solid var(--linen);
}
.hook-col {
  padding: 0 32px;
  border-right: 0.5px solid var(--linen);
}
.hook-col:last-child { border-right: none; }
.hook-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(56px, 7vw, 96px); line-height: 0.95;
  color: var(--charcoal); letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.hook-num .acc { font-size: clamp(56px, 7vw, 96px); }
.hook-label {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 2vw, 28px); line-height: 1.15;
  color: var(--charcoal); margin-bottom: 16px;
}
.hook-body {
  font-family: var(--font-body); font-weight: 300; font-size: 14px;
  line-height: 1.6; color: var(--stone); max-width: 280px;
}

/* ===================================================================
   SECTION FRAME (3, 4, 5, 6, 7, 8, 9, 10)
   =================================================================== */
.section { padding: 120px 56px; }
.section-dark { background: var(--charcoal); color: var(--oat); }
.section-paper { background: var(--paper); }

.section-head {
  display: grid; grid-template-columns: 1fr auto;
  gap: 48px; margin-bottom: 72px; align-items: end;
}
.section-head-left { display: flex; flex-direction: column; gap: 24px; }
.section-q {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--stone);
}
.section-dark .section-q { color: var(--stone-lt); }
.section-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -0.02em;
  color: inherit; margin: 0; max-width: 820px;
}
.section-aside {
  font-family: var(--font-display); font-style: italic;
  font-size: 16px; color: var(--stone); max-width: 220px;
  text-align: right; line-height: 1.5;
}

/* ===================================================================
   3 · WHAT WE MAKE — categories + weekly menu
   =================================================================== */
.cats { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--charcoal); }
.cat {
  display: grid; grid-template-columns: 80px 1fr 2fr;
  gap: 32px; align-items: center;
  padding: 36px 0;
  border-bottom: 0.5px solid var(--linen);
  cursor: default;
  transition: padding-left var(--dur-base) var(--ease-out);
}
.cat:hover { padding-left: 12px; }
.cat-num {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 32px; color: var(--turmeric);
}
.cat-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3vw, 44px); line-height: 1;
  color: var(--charcoal);
}
.cat-desc {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(16px, 1.4vw, 20px); line-height: 1.4;
  color: var(--stone);
}

.menu-strip {
  margin-top: 80px;
  background: var(--charcoal); color: var(--oat);
  padding: 48px 40px;
}
.menu-strip-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 32px;
  border-bottom: 0.5px solid var(--ink-soft);
  padding-bottom: 18px;
}
.menu-strip-title {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 20px; color: var(--oat);
}
.menu-strip-title .acc { font-style: italic; }
.menu-strip-meta {
  font-family: var(--font-body); font-size: 9px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--turmeric);
}
.menu-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
}
.menu-day {
  padding: 0 18px;
  border-right: 0.5px solid var(--ink-soft);
}
.menu-day:last-child { border-right: none; }
.menu-day-name {
  font-family: var(--font-body); font-size: 9px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--stone);
  margin-bottom: 14px;
}
.menu-item {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: 15px; line-height: 1.4; color: var(--oat);
  margin-bottom: 8px;
}
.menu-item.lead { font-weight: 700; font-style: normal; color: var(--oat); margin-bottom: 10px; }

/* ===================================================================
   4 · THE SCIENCE — three big claims
   =================================================================== */
.science {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--linen);
  border-bottom: 1px solid var(--linen);
}
.sci {
  padding: 56px 40px;
  border-right: 0.5px solid var(--linen);
  display: flex; flex-direction: column; gap: 24px;
}
.sci:last-child { border-right: none; }
.sci-tag {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--turmeric);
}
.sci-claim {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15;
  color: var(--charcoal);
  letter-spacing: -0.01em;
}
.sci-claim .acc { font-size: inherit; }
.sci-name {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 22px; color: var(--stone);
  border-bottom: 0.5px solid var(--linen); padding-bottom: 16px;
}
.sci-cite {
  font-family: var(--font-body); font-weight: 300; font-size: 11px;
  letter-spacing: 0.05em; color: var(--stone); margin-top: auto;
  border-top: 0.5px solid var(--linen); padding-top: 16px;
}
.sci-cite::before { content: '— '; color: var(--turmeric); }

/* ===================================================================
   5 · HOW IT WORKS — three steps
   =================================================================== */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 0.5px solid var(--ink-soft);
  border-bottom: 0.5px solid var(--ink-soft);
}
.step {
  padding: 64px 40px;
  border-right: 0.5px solid var(--ink-soft);
  display: flex; flex-direction: column; gap: 20px;
}
.step:last-child { border-right: none; }
.step-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 56px; line-height: 1; color: var(--turmeric);
  letter-spacing: -0.02em;
}
.step-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 2.4vw, 36px); line-height: 1.1;
  color: var(--oat);
}
.step-body {
  font-family: var(--font-body); font-weight: 300; font-size: 13px;
  line-height: 1.65; color: var(--stone-lt); max-width: 280px;
}
.steps-foot {
  margin-top: 56px;
  text-align: center;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 2vw, 28px); color: var(--turmeric);
}

/* ===================================================================
   6 · SUBSCRIPTION PLANS
   =================================================================== */
.plans {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--linen);
  border: 0.5px solid var(--linen);
}
.plan {
  background: var(--paper);
  padding: 48px 40px;
  display: flex; flex-direction: column; gap: 24px;
  position: relative;
  transition: background var(--dur-base) var(--ease-out);
}
.plan:hover { background: var(--oat); }
.plan.featured { background: var(--charcoal); color: var(--oat); }
.plan.featured:hover { background: var(--charcoal); }

.plan-flag {
  position: absolute; top: 24px; right: 24px;
  font-family: var(--font-body); font-size: 9px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--turmeric);
}
.plan-flag::before { content: '★ '; }

.plan-flag-soon {
  position: absolute; top: 24px; right: 24px;
  font-family: var(--font-body); font-size: 9px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--stone);
  border: 0.5px solid var(--linen); padding: 4px 10px;
}

.plan-price-soon { flex-direction: column; align-items: flex-start; gap: 6px; }
.plan-price-tbr {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: 26px; line-height: 1.1; color: var(--turmeric);
  letter-spacing: -0.005em;
}
.plan.featured .plan-price-tbr { color: var(--turmeric); }
.plan-price-soon .plan-price-period {
  font-size: 10px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--stone); font-style: normal;
  font-family: var(--font-body);
}

.plan-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 28px; line-height: 1; color: inherit;
  letter-spacing: -0.01em;
}
.plan-name .acc { font-size: inherit; }

.plan-price {
  display: flex; align-items: baseline; gap: 8px;
  border-top: 0.5px solid var(--linen);
  border-bottom: 0.5px solid var(--linen);
  padding: 24px 0;
}
.plan.featured .plan-price { border-color: var(--ink-soft); }
.plan-price-amount {
  font-family: var(--font-display); font-weight: 700;
  font-size: 56px; line-height: 1; color: inherit;
  letter-spacing: -0.02em;
}
.plan-price-rupee {
  font-family: var(--font-display); font-weight: 700;
  font-size: 32px; line-height: 1; color: var(--turmeric);
}
.plan-price-period {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 18px; color: var(--stone);
}

.plan-includes {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
  flex: 1;
}
.plan-includes li {
  font-family: var(--font-body); font-weight: 300; font-size: 13px;
  line-height: 1.5; color: inherit; opacity: 0.9;
  padding-left: 18px; position: relative;
}
.plan-includes li::before {
  content: '·'; position: absolute; left: 0; top: -4px;
  font-family: var(--font-display); font-weight: 700;
  color: var(--turmeric); font-size: 24px;
}

.plan-cta {
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 14px 0; cursor: pointer;
  background: transparent;
  border: none;
  border-top: 1px solid var(--charcoal);
  color: var(--charcoal);
  text-align: left;
  display: flex; justify-content: space-between; align-items: center;
  transition: padding var(--dur-base) var(--ease-out);
}
.plan-cta:hover { padding-left: 8px; }
.plan-cta .arrow {
  font-family: var(--font-display); font-style: italic; font-size: 16px;
  letter-spacing: 0; text-transform: none; font-weight: 400;
  color: var(--turmeric);
}
.plan.featured .plan-cta { border-top-color: var(--turmeric); color: var(--oat); }

/* ===================================================================
   7 · THE STORY
   =================================================================== */
.story {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 80px; align-items: center;
}
.story-image {
  aspect-ratio: 4/5; background: var(--linen);
  position: relative; overflow: hidden;
}
.story-image::after {
  content: 'paati’s\Ahands';
  white-space: pre;
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 28px; color: var(--stone);
  text-align: center; line-height: 1.2;
}
.story-image::before {
  content: 'IMAGE PLACEHOLDER';
  position: absolute; top: 16px; left: 16px;
  font-family: var(--font-body); font-size: 9px; font-weight: 700;
  letter-spacing: 0.3em; color: var(--stone);
}
.story-body { max-width: 560px; }
.story-quote {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(22px, 2.2vw, 32px); line-height: 1.4;
  color: var(--charcoal); margin: 32px 0; letter-spacing: -0.005em;
}
.story-quote .acc { font-style: italic; }
.story-text {
  font-family: var(--font-body); font-weight: 300; font-size: 15px;
  line-height: 1.75; color: var(--ink-soft); margin-bottom: 16px;
  text-wrap: pretty;
}
.story-sign {
  margin-top: 32px;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 16px; color: var(--stone);
}
.story-sign .name { color: var(--charcoal); }

/* ===================================================================
   8 · SOCIAL PROOF
   =================================================================== */
.proof-quotes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--linen);
  border: 0.5px solid var(--linen);
  margin-bottom: 80px;
}
.proof-q {
  background: var(--paper); padding: 40px 32px;
  display: flex; flex-direction: column; gap: 24px;
}
.proof-mark {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 56px; line-height: 0.4; color: var(--turmeric);
}
.proof-text {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 19px; line-height: 1.5; color: var(--charcoal);
  flex: 1;
}
.proof-attr {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--stone);
  border-top: 0.5px solid var(--linen); padding-top: 16px;
}

.ig-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 24px;
  border-top: 0.5px solid var(--linen); padding-top: 32px;
}
.ig-handle {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  color: var(--charcoal);
}
.ig-handle .at { color: var(--turmeric); font-style: italic; font-weight: 400; }
.ig-link {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--charcoal);
  text-decoration: none;
  border-bottom: 1px solid var(--turmeric); padding-bottom: 4px;
}
.ig-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
  background: var(--linen);
  border: 0.5px solid var(--linen);
}
.ig-cell {
  aspect-ratio: 1/1; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 12px;
}
.ig-cell.dark { background: var(--charcoal); color: var(--oat); }
.ig-cell.light { background: var(--paper); color: var(--charcoal); }
.ig-cell.gold { background: var(--turmeric); color: var(--paper); }
.ig-glyph {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(40px, 5vw, 72px); line-height: 0.9;
}
.ig-cell.dark .ig-glyph { color: var(--turmeric); }
.ig-cell.gold .ig-glyph { color: var(--charcoal); }
.ig-cap {
  position: absolute; bottom: 8px; left: 8px; right: 8px;
  font-family: var(--font-body); font-size: 8px; font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase;
  opacity: 0.7;
}

/* ===================================================================
   9 · A–Z STRIP
   =================================================================== */
.az {
  background: var(--paper);
  padding: 100px 0 120px;
  border-top: 0.5px solid var(--linen);
  border-bottom: 0.5px solid var(--linen);
}
.az-head {
  padding: 0 56px; margin-bottom: 56px;
  display: grid; grid-template-columns: 1fr auto;
  gap: 48px; align-items: end;
}
.az-strip {
  display: flex; gap: 1px; overflow-x: auto;
  padding: 0 56px 16px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--linen) transparent;
}
.az-strip::-webkit-scrollbar { height: 4px; }
.az-strip::-webkit-scrollbar-track { background: transparent; }
.az-strip::-webkit-scrollbar-thumb { background: var(--linen); }
.az-tile {
  flex: 0 0 220px; aspect-ratio: 3/4;
  scroll-snap-align: start;
  background: var(--oat);
  border: 0.5px solid var(--linen);
  padding: 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  text-decoration: none;
  color: inherit;
}
.az-tile:hover { background: var(--charcoal); transform: translateY(-2px); }
.az-tile:hover .az-letter { color: var(--turmeric); }
.az-tile:hover .az-name, .az-tile:hover .az-meta { color: var(--oat); }
.az-letter {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: 96px; line-height: 0.9; color: var(--turmeric);
  letter-spacing: -0.04em;
}
.az-name {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  line-height: 1.1; color: var(--charcoal); margin-bottom: 6px;
  transition: color var(--dur-base) var(--ease-out);
}
.az-meta {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone);
  transition: color var(--dur-base) var(--ease-out);
}

/* ===================================================================
   10 · FAQ
   =================================================================== */
.faq { max-width: 880px; margin: 0 auto; }
.faq-item {
  border-top: 0.5px solid var(--linen);
}
.faq-item:last-child { border-bottom: 0.5px solid var(--linen); }
.faq-q {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px 8px;
  background: transparent; border: none; cursor: pointer;
  text-align: left;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 2vw, 26px); line-height: 1.2;
  color: var(--charcoal);
  transition: padding var(--dur-base) var(--ease-out);
}
.faq-q:hover { padding-left: 16px; }
.faq-toggle {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 28px; color: var(--turmeric);
  flex-shrink: 0; margin-left: 24px;
  transition: transform var(--dur-base) var(--ease-out);
  width: 24px; text-align: center;
}
.faq-item.open .faq-toggle { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out);
}
.faq-item.open .faq-a { max-height: 320px; }
.faq-a-inner {
  padding: 0 8px 28px;
  font-family: var(--font-body); font-weight: 300; font-size: 15px;
  line-height: 1.7; color: var(--ink-soft); max-width: 680px;
}

/* ===================================================================
   11 · FOOTER
   =================================================================== */
.foot {
  background: var(--charcoal); color: var(--oat);
  padding: 120px 56px 48px;
  text-align: center;
}
.foot-mark {
  display: flex; align-items: baseline; justify-content: center;
}
.foot-mark .bl, .foot-mark .nd {
  font-family: var(--font-display); font-weight: 700; color: var(--oat);
  font-size: clamp(56px, 8vw, 120px); line-height: 1; letter-spacing: -0.02em;
}
.foot-mark .e {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  color: var(--turmeric); font-size: clamp(56px, 8vw, 120px);
  line-height: 1; letter-spacing: -0.02em;
}
.foot-co {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  color: var(--stone); font-size: clamp(18px, 2vw, 28px);
  margin-top: 4px;
}
.foot-the {
  font-family: var(--font-body); font-size: 9px; font-weight: 300;
  letter-spacing: 0.6em; text-transform: uppercase;
  color: var(--stone); margin-bottom: 14px;
}
.foot-rule { width: 56px; height: 0.5px; background: var(--turmeric); margin: 36px auto 28px; }
.foot-tag {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(16px, 1.6vw, 22px); color: var(--oat);
}

.foot-cta {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 56px;
  font-family: var(--font-body); font-weight: 700; font-size: 14px;
  letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--turmeric); color: var(--charcoal);
  padding: 22px 40px; border: none; cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out);
}
.foot-cta:hover { background: #D4A030; }
.foot-cta .arrow { font-family: var(--font-display); font-style: italic; font-size: 20px; letter-spacing: 0; text-transform: none; font-weight: 400; }

.foot-meta {
  margin-top: 80px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px; max-width: 880px; margin-left: auto; margin-right: auto;
  border-top: 0.5px solid var(--ink-soft); padding-top: 40px;
}
.foot-meta-block {
  display: flex; flex-direction: column; gap: 8px;
  text-align: center;
}
.foot-meta-label {
  font-family: var(--font-body); font-size: 9px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--stone);
}
.foot-meta-value {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 16px; color: var(--oat);
}
.foot-meta-value a { color: var(--oat); text-decoration: none; }
.foot-meta-value a:hover { color: var(--turmeric); }

.foot-fine {
  margin-top: 64px; padding-top: 24px;
  border-top: 0.5px solid var(--ink-soft);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-family: var(--font-body); font-size: 9px; font-weight: 300;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-mute);
}

/* ===================================================================
   UPCOMING (placeholder for removed sections)
   =================================================================== */
.upcoming {
  background: var(--oat);
  padding: 80px 56px;
  border-top: 0.5px solid var(--linen);
  border-bottom: 0.5px solid var(--linen);
  text-align: center;
}
.upcoming-rule { width: 40px; height: 0.5px; background: var(--turmeric); margin: 0 auto 24px; }
.upcoming-eyebrow {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: 0.4em; text-transform: uppercase; color: var(--stone);
  margin-bottom: 48px;
}
.upcoming-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  max-width: 960px; margin: 0 auto;
}
.upcoming-item {
  padding: 24px 24px;
  border-right: 0.5px solid var(--linen);
  display: flex; flex-direction: column; gap: 10px;
  align-items: center;
}
.upcoming-item:last-child { border-right: none; }
.upcoming-num {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 28px; color: var(--turmeric); line-height: 1;
}
.upcoming-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; line-height: 1.1; color: var(--charcoal);
}
.upcoming-desc {
  font-family: var(--font-body); font-weight: 300; font-size: 12px;
  line-height: 1.55; color: var(--stone); max-width: 220px;
}

/* ===================================================================
   EDITORIAL IMAGE BREAK
   =================================================================== */
.editorial {
  margin: 0; padding: 0; position: relative; background: var(--charcoal);
}
.editorial img {
  width: 100%; height: clamp(420px, 62vh, 720px);
  object-fit: cover; display: block;
  filter: grayscale(0.2) contrast(1.02) brightness(0.9);
}
.editorial::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75) 100%);
}
.editorial figcaption {
  position: absolute; left: 56px; bottom: 32px; right: 56px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 32px;
  color: var(--oat); font-family: var(--font-body); font-size: 10px;
  letter-spacing: 0.3em; text-transform: uppercase; font-weight: 300;
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}
.editorial-num { color: var(--turmeric); font-weight: 700; letter-spacing: 0.4em; }
.editorial-cap { max-width: 520px; text-align: right; }
@media (max-width: 720px) {
  .editorial figcaption { left: 24px; right: 24px; flex-direction: column; gap: 8px; align-items: flex-start; }
  .editorial-cap { text-align: left; }
}

.editorial-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: var(--charcoal);
  position: relative;
}
.editorial-split::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.8) 100%);
  z-index: 0;
}
.editorial-split .editorial-split-img { overflow: hidden; }
.editorial-split .editorial-split-img img {
  width: 100%; height: clamp(380px, 56vh, 620px);
  object-fit: cover; display: block;
  filter: grayscale(0.15) contrast(1.02) brightness(0.92);
}
.editorial-split figcaption {
  position: absolute; left: 56px; bottom: 32px; right: 56px;
  z-index: 1;
}
@media (max-width: 720px) {
  .editorial-split { grid-template-columns: 1fr; }
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 960px) {
  .nav { padding: 16px 24px; }
  .nav-links { display: none; }
  .hero, .section, .az-head, .foot { padding-left: 24px; padding-right: 24px; }
  .hero-foot { padding: 0 24px; }
  .hook { grid-template-columns: 1fr; padding: 80px 24px; gap: 56px; }
  .hook-col { padding: 0; border-right: none; border-bottom: 0.5px solid var(--linen); padding-bottom: 56px; }
  .hook-col:last-child { border-bottom: none; padding-bottom: 0; }
  .section-head { grid-template-columns: 1fr; }
  .section-aside { text-align: left; max-width: none; }
  .cat { grid-template-columns: 40px 1fr; gap: 16px; }
  .cat-desc { grid-column: 1 / -1; padding-left: 56px; }
  .menu-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .menu-day { padding: 0 12px; }
  .science, .steps, .plans, .proof-quotes { grid-template-columns: 1fr; }
  .sci, .step { border-right: none; border-bottom: 0.5px solid var(--linen); }
  .step { border-bottom-color: var(--ink-soft); }
  .ig-grid { grid-template-columns: repeat(3, 1fr); }
  .story { grid-template-columns: 1fr; gap: 48px; }
  .az-strip { padding-left: 24px; padding-right: 24px; }
  .az-tile { flex: 0 0 180px; }
  .az-letter { font-size: 72px; }
  .foot-meta { grid-template-columns: 1fr; }
}