/* ============================================================
   Beyond Basics — scroll home. The whole rebrand of the engine
   is these tokens: the warm-dark end of "Greenhouse at First
   Light", so the golden-hour photographs carry the page.
   Loaded only by the scroll layout (src/_includes/layouts/scroll.njk).
   ============================================================ */
:root {
  --sc-canvas:     #0F1712;  /* forest-950 */
  --sc-surface:    #16201A;  /* forest-900 */
  --sc-ink:        #F4F0E6;  /* paper */
  --sc-ink-soft:   #B7C4B0;  /* sage */
  --sc-accent:     #CE8E45;  /* morning-sun ochre */
  --sc-accent-ink: #0F1712;
  --sc-font-display: "Fraunces", Georgia, Cambria, serif;
  --sc-font-text:    "Inter", system-ui, -apple-system, sans-serif;

  /* brand stops reused below */
  --bb-forest-950: #0F1712;
  --bb-forest-900: #16201A;
  --bb-black:      #0B120E;
  --bb-paper:      #F4F0E6;
  --bb-canopy:     #356245;
}

/* The site-wide style.css inks all headings dark (h1..h6 { color }).
   Re-ink from the token so each scene's heading follows its own ink:
   light on the dark scenes, dark on the light "deal" interlude. */
.sc-display { color: var(--sc-ink); }

/* ---- fixed chrome: wordmark, links, one CTA, mobile hamburger ---- */
.site-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 55;
  display: flex; align-items: center;
  gap: var(--sc-5);
  padding: clamp(0.85rem, 1.6vw, 1.3rem) var(--sc-gutter);
  /* a faint dark backdrop so the light chrome stays legible over
     both the dark clips and the light "deal" section it passes over */
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--bb-black) 66%, transparent),
    transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.site-bar__mark {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-lg); letter-spacing: -0.01em;
  color: var(--sc-ink); text-decoration: none;
}
.site-bar__mark img { width: 22px; height: 22px; }
.site-bar__links {
  display: flex; align-items: center; gap: var(--sc-6);
  margin-left: auto;
}
.site-bar__links a {
  color: var(--sc-ink-soft); font-size: var(--sc-t-sm); font-weight: 500;
  letter-spacing: -0.005em; text-decoration: none;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.site-bar__links a:hover,
.site-bar__links a[aria-current="page"] { color: var(--sc-ink); }
.site-bar__cta {
  display: inline-flex; align-items: center;
  padding: 0.5rem 1.05rem; border-radius: var(--sc-r-pill);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-size: var(--sc-t-sm); font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform var(--sc-d-fast) var(--sc-ease-out),
              filter var(--sc-d-fast) var(--sc-ease-out);
}
.site-bar__cta:hover { filter: brightness(1.06); }
.site-bar__cta:active { transform: translateY(1px) scale(0.98); }

/* hamburger: hidden on desktop, shown on phones */
.site-bar__burger {
  display: none; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; margin-left: auto;
  background: transparent; border: 0; color: var(--sc-ink); cursor: pointer;
}
.site-bar__burger svg { width: 1.6rem; height: 1.6rem; }
.site-bar__burger .burger-close { display: none; }
.site-bar__burger[aria-expanded="true"] .burger-open { display: none; }
.site-bar__burger[aria-expanded="true"] .burger-close { display: inline-flex; }

/* mobile dropdown menu */
.site-menu {
  position: fixed; inset: 0 0 auto 0; z-index: 54;
  display: flex; flex-direction: column; gap: var(--sc-4);
  padding: 4.75rem var(--sc-gutter) var(--sc-6);
  background: color-mix(in oklab, var(--bb-black) 94%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sc-hairline);
  transform: translateY(-10px); opacity: 0; visibility: hidden;
  transition: opacity var(--sc-d-base) var(--sc-ease-out),
              transform var(--sc-d-base) var(--sc-ease-out),
              visibility var(--sc-d-base);
}
.site-menu.is-open { transform: none; opacity: 1; visibility: visible; }
.site-menu a {
  color: var(--sc-ink); font-size: var(--sc-t-lg); font-weight: 500;
  text-decoration: none;
}
.site-menu a[aria-current="page"] { color: var(--sc-accent); }
.site-menu .cta {
  align-self: flex-start; margin-top: var(--sc-2);
  padding: 0.7rem 1.4rem; border-radius: var(--sc-r-pill);
  background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 600;
}

@media (max-width: 767px) {
  .site-bar__links, .site-bar__cta { display: none; }
  .site-bar__burger { display: inline-flex; }
}
@media (min-width: 768px) { .site-menu { display: none; } }

/* ---- The Hush: signature sound-level ribbon ------------------
   Starts as jagged city noise, flatlines to silence as you go in,
   then breathes once at the invitation. Driven by page scroll.  */
.hush {
  position: fixed; right: var(--sc-gutter); bottom: clamp(1.1rem, 3vh, 2rem);
  z-index: 55; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.7rem; border-radius: var(--sc-r-pill);
  background: color-mix(in oklab, var(--bb-black) 40%, transparent);
  border: 1px solid var(--sc-hairline);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.hush__tag {
  font-family: var(--sc-font-text); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink-soft); min-width: 4.6em; text-align: right;
}
.hush__wave { width: 120px; height: 22px; display: block; }
.hush__wave polyline {
  fill: none; stroke: var(--sc-accent); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.9;
}
@media (max-width: 760px) { .hush { display: none; } }

/* ---- scene grounds (hard cuts, all inside the forest family) - */
.scene { position: relative; }
.scene--arrival   { background: var(--bb-forest-950); }
.scene--tension   { background: var(--bb-forest-900); }
.scene--turn      { background: var(--bb-black); }
.scene--substance { background: var(--bb-forest-900); }
.scene--range     { background: var(--bb-forest-950); }
.scene--close     { background: var(--bb-forest-950); }

/* ---- act 2: the argument, revealed line by line -------------- */
/* Reduced top padding: this flow follows a pinned scrub act, which needs a
   viewport to scroll off; full section padding on top delays first copy. */
.scene--tension { padding-block: clamp(2rem, 6vh, 5rem) var(--sc-section); }
.argument {
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--sc-6); min-height: 74vh;
  max-width: 46rem;
}
.argument .sc-lede { max-width: 24ch; }
.argument .sc-display { max-width: 18ch; color: var(--sc-ink); }

/* ---- act 3: the reveal / peak -------------------------------- */
/* Dim ground so the pinned stage never shows an empty screen on entry;
   the bright figure then wipes up over it (the room "comes to light"). */
.turn__ground { position: absolute; inset: 0; }
.turn__ground img { width: 100%; height: 100%; object-fit: cover;
  opacity: 0.30; filter: brightness(0.5) saturate(0.85); }
.turn__figure { position: absolute; inset: 0; margin: 0; will-change: clip-path; }
.turn__figure img { width: 100%; height: 100%; object-fit: cover; }
.turn__copy .sc-display { max-width: 20ch; }

/* ---- act 4: the daylight clip is bright, so use a strong bottom band
   (covers the copy whether it is bottom-right on desktop or full-width
   on mobile, where the engine re-anchors trail copy to the left). ---- */
.scene--substance .sc-scrim--trail {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--bb-black) 94%, transparent) 0%,
    color-mix(in oklab, var(--bb-black) 78%, transparent) 24%,
    color-mix(in oklab, var(--bb-black) 34%, transparent) 46%,
    transparent 62%);
}

/* ---- act 5: the kit, on a rail ------------------------------- */
/* Full height + cross-axis centre so the rail sits in the middle of the pinned
   stage, not at the top. This only touches vertical layout; the horizontal
   overflow the pan travels on is unchanged. */
.rail { align-items: center; height: 100%; gap: var(--sc-5); padding-inline: var(--sc-gutter); }
.rail__lead {
  flex: 0 0 auto; width: clamp(18rem, 40vw, 30rem);
}
.kit-card {
  flex: 0 0 auto; width: clamp(15rem, 34vw, 20rem); min-height: 15rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: var(--sc-3);
  padding: var(--sc-6); border-radius: var(--sc-r-lg);
  background: var(--sc-surface);
  border: 1px solid var(--sc-hairline);
  box-shadow: var(--sc-e1), var(--sc-edge);
}
.kit-card__icon {
  width: 2.4rem; height: 2.4rem; color: var(--sc-accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.kit-card__icon svg { width: 1.7rem; height: 1.7rem; }
.kit-card h3 {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-xl); line-height: 1.04; letter-spacing: -0.02em;
  margin: 0; color: var(--sc-ink);
}
.kit-card p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.kit-card--note {
  background: color-mix(in oklab, var(--bb-canopy) 26%, var(--sc-surface));
  justify-content: center;
}
.kit-card--note strong { color: var(--sc-ink); }
/* Per-card index for the staggered settle (was an inline --i). Articles are
   counted among their type, so the six kit cards are 1..6; the lead div is
   exempt because the stagger rule only targets .kit-card. */
.rail .kit-card:nth-of-type(1) { --i: 1; }
.rail .kit-card:nth-of-type(2) { --i: 2; }
.rail .kit-card:nth-of-type(3) { --i: 3; }
.rail .kit-card:nth-of-type(4) { --i: 4; }
.rail .kit-card:nth-of-type(5) { --i: 5; }
.rail .kit-card:nth-of-type(6) { --i: 6; }
/* staggered settle, driven from the act's --sc-p. First (lead) is exempt. */
@media (prefers-reduced-motion: no-preference) {
  [data-sc-act="pan"] .kit-card {
    opacity: clamp(0.5, calc(0.5 + 1.2 * (var(--sc-p, 1) - var(--i, 0) * 0.07)), 1);
    transform: translateY(calc((1 - clamp(0, calc(var(--sc-p, 1) - var(--i, 0) * 0.07), 1)) * 1.4rem));
  }
}

/* ---- act 6: the deal, a light-paper interlude (hard cut) ----- */
.scene--deal {
  --sc-canvas: #F4F0E6; --sc-surface: #FBF9F3;
  --sc-ink: #1E2B23; --sc-ink-soft: #436E52;
  --sc-accent: #B4762F; --sc-accent-ink: #FBF9F3;
  --sc-hairline: color-mix(in oklab, #1E2B23 14%, transparent);
  background: var(--bb-paper); color: var(--sc-ink);
  padding-block: clamp(4.5rem, 9vw, 9rem) var(--sc-section);
}
.deal__grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 900px) { .deal__grid { grid-template-columns: 1.05fr 1fr; } }
.deal__price {
  font-family: var(--sc-font-display); font-weight: 500;
  line-height: 0.96; letter-spacing: -0.03em; color: var(--sc-ink);
  font-size: var(--sc-t-4xl);
}
.deal__price .rupee { color: var(--sc-accent); }
.deal__per { display: block; font-family: var(--sc-font-text);
  font-size: var(--sc-t-base); color: var(--sc-ink-soft); letter-spacing: 0;
  margin-top: var(--sc-3); }
.deal__table { width: 100%; border-collapse: collapse; margin-top: var(--sc-2); }
.deal__table th, .deal__table td {
  text-align: left; padding: var(--sc-4) var(--sc-2);
  border-bottom: 1px solid var(--sc-hairline); font-size: var(--sc-t-base);
}
.deal__table thead th {
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft);
  font-weight: 600; border-bottom-color: color-mix(in oklab, #1E2B23 22%, transparent);
}
.deal__table td:first-child { color: var(--sc-ink-soft); }
.deal__table .us { color: var(--sc-ink); font-weight: 600; }
.deal__note { margin-top: var(--sc-5); }

/* ---- act 7: the close --------------------------------------- */
.close {
  display: grid; grid-template-rows: 1fr auto; height: 100%;
  overflow: clip;
}
.close__bg { position: absolute; inset: 0; z-index: 0; }
.close__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.18; }
.close__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 42%,
    color-mix(in oklab, var(--bb-black) 60%, transparent) 0%,
    color-mix(in oklab, var(--bb-black) 92%, transparent) 70%);
}
.close__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--sc-5);
  padding: var(--sc-9) var(--sc-gutter) var(--sc-6);
  max-width: 40rem; margin-inline: auto;
}
.close__inner .sc-display { max-width: 16ch; }
.cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.95rem 1.9rem; border-radius: var(--sc-r-pill);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-size: var(--sc-t-lg); font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none; box-shadow: var(--sc-e2);
  transition: filter var(--sc-d-fast) var(--sc-ease-out);
}
.cta:hover { filter: brightness(1.06); }
.cta:active { transform: translateY(1px); }
.close__meta { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.close__meta a { color: var(--sc-ink); text-underline-offset: 0.2em; }

/* footer inside the close stage, so there is no dead tail */
.foot {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sc-4);
  padding: var(--sc-5) var(--sc-gutter);
  border-top: 1px solid var(--sc-hairline);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
  background: color-mix(in oklab, var(--bb-black) 60%, transparent);
}
.foot nav { display: flex; flex-wrap: wrap; gap: var(--sc-4); }
.foot a { color: var(--sc-ink-soft); text-decoration: none; }
.foot a:hover { color: var(--sc-ink); }
.foot__mark { font-family: var(--sc-font-display); color: var(--sc-ink); font-weight: 600; }

/* ============================================================
   Shared scenes for the other scroll pages (about, pricing).
   Same design floor, different journeys.
   ============================================================ */
.scene--dark  { background: var(--bb-forest-950); }
.scene--dark2 { background: var(--bb-forest-900); }

/* a stronger bottom band, for copy over a bright daylight clip */
.bb-scrim-strong {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--bb-black) 96%, transparent) 0%,
    color-mix(in oklab, var(--bb-black) 80%, transparent) 26%,
    color-mix(in oklab, var(--bb-black) 36%, transparent) 48%,
    transparent 64%);
}

/* statement / manifesto hero (about) — a pinned typographic open */
.statement {
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--sc-6); min-height: 84vh;
  max-width: 62rem; margin-inline: auto; padding-inline: var(--sc-gutter);
}
.statement .sc-body { max-width: 42ch; }

/* belief split (about) — argument beside a portrait */
.split2 {
  display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) { .split2 { grid-template-columns: 1.05fr 0.95fr; } }
.split2 figure { margin: 0; border-radius: var(--sc-r-lg); overflow: clip; box-shadow: var(--sc-e2); }
.split2 figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.promises { list-style: none; margin: var(--sc-6) 0 0; padding: 0; display: grid; gap: var(--sc-5); }
.promises li { display: flex; gap: var(--sc-4); align-items: baseline; }
.promises .z { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 500; color: var(--sc-accent); flex: 0 0 auto; }
.promises h3 { margin: 0; font-size: var(--sc-t-lg); font-weight: 600; color: var(--sc-ink); }
.promises p { margin: 0.2rem 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

/* number hero (pricing) — the price is the hero, counting up */
.figure-hero {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: var(--sc-5); height: 100%;
  max-width: 62rem; margin-inline: auto; padding-inline: var(--sc-gutter);
}
.figure-hero .amount {
  font-family: var(--sc-font-display); font-weight: 500;
  line-height: 0.9; letter-spacing: -0.03em; color: var(--sc-ink);
  font-size: var(--sc-t-4xl);
}
.figure-hero .amount .rupee { color: var(--sc-accent); }
.figure-hero .per {
  display: block; margin-top: var(--sc-3);
  font-family: var(--sc-font-text); font-size: var(--sc-t-lg);
  letter-spacing: 0; color: var(--sc-ink-soft);
}

/* ---- responsive type: step the hero down on a phone ---------- */
@media (max-width: 700px) {
  .sc-display--xl { font-size: var(--sc-t-2xl); }
  .rail__lead { width: 80vw; }
  .kit-card { width: 74vw; }
  .figure-hero .amount { font-size: var(--sc-t-2xl); }
}
/* On phones the lead copy spans full width, so the corner scrim under the
   hero no longer covers the small label. Switch it to a bottom band. */
@media (max-width: 860px) {
  .scene--arrival .sc-scrim--lead {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--bb-black) 94%, transparent) 0%,
      color-mix(in oklab, var(--bb-black) 76%, transparent) 26%,
      color-mix(in oklab, var(--bb-black) 32%, transparent) 48%,
      transparent 64%);
  }
}