/* ============================================================
   PLANT MEAT — homepage
   ------------------------------------------------------------
   Loaded by index.html only. Each chapter uses a different
   layout family on purpose (pinned stage, giant type, plate +
   index, full-bleed image, editorial rows, cinematic image,
   split portrait, centred, compact list, colour field), so the
   page reads as composed rather than assembled.
   ============================================================ */

/* ============================================================
   01 · HERO + BURGER ANATOMY
   ============================================================ */

.anatomy { position: relative; }

.anatomy__stage {
  position: relative;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
}

/* "MEAT," and "REBUILT." flank the top of the stage, the second word
   stepped down so the line falls toward the burger instead of
   framing it like a pair of bookends */
.anatomy__title {
  position: absolute;
  z-index: 3;
  top: calc(var(--nav-h) + clamp(.25rem, 1.6vh, 1.25rem));
  left: var(--gutter);
  right: var(--gutter);
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: clamp(3.4rem, 0.6rem + 9.4vw, 12.75rem);
  line-height: .84;
  letter-spacing: -.045em;
  pointer-events: none;
}
.anatomy__word { display: block; }
.anatomy__word--2 { margin-top: .42em; }

/* the burger: one square box; every layer is a full-size image inside it,
   so the cut-outs stay aligned with the master photo by construction.
   --cy is the box centre as a share of the stage. It is placed with
   left/top maths, never a CSS translate: GSAP owns transforms here. */
.burger {
  --size: min(86svh, 62vw);
  --cy: 52%;
  position: absolute;
  z-index: 2;
  width: var(--size);
  height: var(--size);
  left: calc(50% - var(--size) / 2);
  top: calc(var(--cy) - var(--size) / 2);
}
.burger__photo,
.burger__layers,
.burger__layer { position: absolute; inset: 0; }
.burger__photo { z-index: 10; width: 100%; height: 100%; }
.burger__layer img { width: 100%; height: 100%; display: block; }
.burger__layer { will-change: transform; }

/* the honest disclaimer: bun, sauce and cheese are a serving suggestion;
   it takes the corner the hero statement leaves behind */
.burger__caption {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  bottom: clamp(1.75rem, 5vh, 3.25rem);
  margin: 0;
  opacity: 0;
}

/* ---- notes: they live inside their layer, so they travel with it.
   --nx is the small drift they arrive with (see burger.js). ---- */
.note {
  --nx: 0px;
  position: absolute;
  top: var(--at);
  width: min(15rem, 20vw);
  margin: 0;
  display: grid;
  gap: .3rem;
  translate: var(--nx) -50%;
  opacity: 0;
}
/* the cut-outs leave about a quarter of the canvas empty on each side,
   so the notes sit in that margin, close to the food */
.note--l { right: 76%; text-align: right; justify-items: end; }
.note--r { left: 76%; }

/* the hairline leader, pointing at the layer */
.note::after {
  content: "";
  position: absolute;
  top: .55em;
  width: clamp(1rem, 2vw, 2.25rem);
  height: 1px;
  background: var(--green);
}
.note--l::after { left: calc(100% + .9rem); }
.note--r::after { right: calc(100% + .9rem); }

.note__name {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: var(--t-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green);
}
.note__line { font-size: var(--t-sm); line-height: 1.4; color: var(--ink-2); }
.note--hero .note__name { font-size: .8125rem; }
.note--hero .note__line { color: var(--ink); font-weight: 500; }
.note__hand { margin-top: .25rem; rotate: -4deg; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }

/* ---- hero foot: statement and actions as one cluster, bottom-left,
   answering "REBUILT." across the diagonal ---- */
.anatomy__foot {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(1.75rem, 5vh, 3.25rem);
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: clamp(2rem, 4.5vw, 5rem);
  pointer-events: none;
}
.anatomy__foot > * { pointer-events: auto; }
.anatomy__sub { color: var(--green); }
.anatomy__actions { display: flex; align-items: center; gap: 1.1rem 2rem; }

/* the phone's single note: the patty, under the open stack */
.anatomy__mnote { display: none; }

/* ---- tablet: the title stacks, the box narrows so side notes fit ---- */
@media (max-width: 999px) {
  .anatomy__title {
    flex-direction: column;
    align-items: stretch;
    font-size: clamp(3.4rem, 1rem + 13vw, 7.5rem);
  }
  .anatomy__word--2 { margin-top: 0; text-align: right; }
  .burger { --size: min(84vw, 80svh); --cy: 56%; }
  .anatomy__foot { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .anatomy__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.5rem; }
  .note { width: 21vw; }
  .note__line { font-size: var(--t-xs); }
  .note::after { width: 1rem; }
  .note--l::after { left: calc(100% + .5rem); }
  .note--r::after { right: calc(100% + .5rem); }
}

/* ---- phone: no side notes; the patty note sits under the box ---- */
@media (max-width: 599px) {
  /* wider than the screen: the canvas edges are empty, the food is not */
  .burger { --size: min(118vw, 72svh); --cy: 54%; }
  .note { display: none; }
  .anatomy__mnote {
    --nx: 0px;
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    right: 0;
    margin: 0;
    display: grid;
    justify-items: center;
    gap: .2rem;
    text-align: center;
    translate: var(--nx) 0;
    opacity: 0;
  }
  .anatomy__mnote .note__line { color: var(--ink); font-weight: 500; }
}

/* ---- static diagram: JS off, or reduced motion -------------------
   The anatomy is content, not just an effect, so without the scroll
   sequence it renders as a labelled exploded view below the hero. */
.anatomy.is-static .anatomy__stage,
html:not(.js) .anatomy__stage {
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + 1.5rem) var(--gutter) 6rem;
}
.anatomy.is-static .anatomy__title,
html:not(.js) .anatomy__title { position: relative; inset: auto; }
.anatomy.is-static .anatomy__foot,
html:not(.js) .anatomy__foot { position: relative; inset: auto; order: 2; margin-top: 2.5rem; }
.anatomy.is-static .burger,
html:not(.js) .burger {
  --size: min(70svh, 58vw);
  position: relative;
  inset: auto;
  order: 3;
  margin: clamp(5rem, 14vh, 9rem) auto 0;
}
.anatomy.is-static .burger__photo,
html:not(.js) .burger__photo { display: none; }
.anatomy.is-static .burger__layer,
html:not(.js) .burger__layer { transform: translateY(var(--dy)); }
.anatomy.is-static .note,
html:not(.js) .note,
.anatomy.is-static .anatomy__mnote,
html:not(.js) .anatomy__mnote,
.anatomy.is-static .burger__caption,
html:not(.js) .burger__caption { opacity: 1; }
.anatomy.is-static .burger__caption,
html:not(.js) .burger__caption { position: relative; inset: auto; order: 4; margin-top: 5rem; }
@media (max-width: 599px) {
  .anatomy.is-static .burger,
  html:not(.js) .burger { --size: 92vw; }
}

/* ============================================================
   LAYOUT NOTE
   Every chapter below sits on the same 12-column grid, but no two
   compose it the same way: headlines alternate sides, blocks are
   offset rather than split in halves, and related chapters sit
   closer together than unrelated ones. Tablets keep the grid with
   offsets instead of collapsing to one column; only phones stack.
   ============================================================ */

/* ============================================================
   02 · HOOK + WHAT IS IT
   ============================================================ */

.hook { padding-block: var(--band) calc(var(--band) * .8); }
.hook__head { max-width: 15ch; }

/* the "more" lines take the right; the two short paragraphs bracket
   them on the left, one at their top and one at their foot */
.hook__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 3vw, 3rem);
  row-gap: 2.5rem;
  margin-top: clamp(3rem, 6vw, 5.5rem);
}
.hook__body > .body-text { grid-column: 1 / 5; grid-row: 1; align-self: start; }
.hook__more {
  grid-column: 7 / 13;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hook__more .statement { font-size: clamp(1.9rem, 1.1rem + 3vw, 4.4rem); color: var(--green); }
/* desktop: the list's right edge meets the page's right edge */
@media (min-width: 1000px) { .hook__more { justify-self: end; } }
.hook__why { grid-column: 1 / 5; grid-row: 2; align-self: end; display: flex; flex-direction: column; align-items: flex-start; }

.hook__what {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 3vw, 3rem);
  margin-top: calc(var(--band) * .8);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
  align-items: end;
}
.hook__what-head { grid-column: 1 / 8; grid-row: 1; font-size: var(--t-xl); line-height: .92; letter-spacing: -.03em; }
.hook__what-text { grid-column: 9 / 13; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; }
.hook__what .podline { grid-column: 1 / 8; grid-row: 2; }

@media (max-width: 999px) {
  .hook__body > .body-text { grid-column: 1 / 10; }
  .hook__more { grid-column: 4 / 13; grid-row: 2; }
  .hook__why { grid-column: 1 / 10; grid-row: 3; }
  .hook__what-head { grid-column: 1 / 13; }
  .hook__what-text { grid-column: 5 / 13; grid-row: 2; margin-top: 1.75rem; }
  .hook__what .podline { grid-column: 1 / 13; grid-row: 3; }
}
@media (max-width: 599px) {
  .hook__body > .body-text, .hook__why, .hook__what-text { grid-column: 1 / -1; }
  .hook__more { grid-column: 2 / -1; }
}

/* ---- pea-pod line: the page's one moving strip ------------------- */
.podline {
  display: flex;
  align-items: center;
  max-width: 40rem;
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
}
.podline .marquee {
  flex: 1 1 auto;
  min-width: 0;
  --speed: 26s;
  border: 0;
  background: transparent;
  padding-block: .6rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 14%, black 84%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, black 14%, black 84%, transparent 100%);
}
.podline .marquee__item {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 500;
  font-size: clamp(1rem, .95rem + .3vw, 1.2rem);
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--ink-2);
  gap: 1.15rem;
  padding-inline: 1.15rem;
}
.podline .marquee__item::after { width: 8px; height: 8px; background: var(--pea); }
.podline .pm-verde { fill: var(--green-2); }
.podline .pm-olive { fill: var(--pea-deep); }
.podline .pm-pea   { fill: var(--pea); }
.podline .pm-hi    { fill: var(--paper-lift); fill-opacity: .38; }
.podline .pm-hilum { fill: none; stroke: var(--paper-lift); stroke-opacity: .7; stroke-width: 1.2; stroke-linecap: round; }
.podline .pm-stem  { fill: none; stroke: var(--green-2); stroke-width: 2; stroke-linecap: round; }
.podline__beans,
.podline__pod { flex: none; position: relative; z-index: 1; height: auto; }
.podline__beans { width: clamp(48px, 4.6vw, 70px); margin-right: -.5rem; }
.podline__pod   { width: clamp(70px, 6.6vw, 100px); margin-left: -1.1rem; }
.podline__lid,
.podline__escape { transform-box: fill-box; }
.podline__lid    { transform-origin: 100% 60%; animation: pod-lid 4.8s var(--ease-in-out) infinite alternate; }
.podline__escape { transform-origin: center;   animation: pea-roll 4.8s var(--ease-in-out) infinite alternate; }
@keyframes pod-lid  { from { transform: rotate(0deg); } to { transform: rotate(-7deg); } }
@keyframes pea-roll { from { transform: translateX(0) rotate(0deg); } to { transform: translateX(-3px) rotate(-40deg); } }
@media (prefers-reduced-motion: reduce) {
  .podline__lid, .podline__escape { animation: none; }
}

/* ============================================================
   03 · RANGE — one product at a time
   ============================================================ */

/* close to the hook: it answers the question the hook just asked */
.range { padding-block: calc(var(--band) * .6) var(--band); }

/* the heading takes the right, over the index it introduces; the
   intro sits bottom-left, over the plate */
.range__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 3vw, 3rem);
  align-items: end;
}
.range__head { grid-column: 7 / 13; grid-row: 1; max-width: 13ch; }
.range__intro { grid-column: 1 / 6; grid-row: 1; margin: 0; }

.range__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, 4vw, 4.5rem);
  margin-top: clamp(3rem, 6vw, 5.5rem);
  align-items: start;
}
.range__stage {
  grid-column: 1 / 8;
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  aspect-ratio: 400 / 340;
  background: var(--paper-sink);
  overflow: hidden;
}
.range__plate {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .7s var(--ease-out);
}
.range__plate.is-active { opacity: 1; }
.range__plate svg,
.range__plate img { width: 100%; height: 100%; object-fit: cover; display: block; }

.range__index { grid-column: 8 / 13; }
.range__item summary { list-style: none; }
.range__item summary::-webkit-details-marker { display: none; }
.range__name {
  display: block;
  cursor: pointer;
  padding: .32em 0;
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(1.2rem, .9rem + 1.05vw, 1.85rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color .35s var(--ease-out);
}
.range__name:hover,
.range__item[open] .range__name { color: var(--green); }
.range__detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
  max-width: 34ch;
  padding: .5rem 0 1.6rem;
}
.range__desc { color: var(--ink-2); }

@media (max-width: 999px) {
  .range__head { grid-column: 1 / 13; }
  .range__intro { grid-column: 5 / 13; grid-row: 2; margin-top: 1.5rem; }
  .range__stage { grid-column: 1 / 7; }
  .range__index { grid-column: 7 / 13; }
}
@media (max-width: 599px) {
  .range__intro { grid-column: 1 / -1; }
  .range__stage, .range__index { grid-column: 1 / -1; }
  .range__stage { position: relative; top: auto; }
}

/* ============================================================
   04 · LOOKS FAMILIAR — the full-bleed texture moment
   ============================================================ */

.taste__image {
  position: relative;
  margin: 0;
  height: min(94svh, 64vw);
  min-height: 440px;
  overflow: hidden;
  background: var(--ink);
}
.taste__image img { width: 100%; height: 118%; object-fit: cover; display: block; }
.taste__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--ink-rgb), .08) 30%, rgba(var(--ink-rgb), .62) 100%);
}
.taste__head {
  position: absolute;
  z-index: 1;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(2rem, 6vw, 5rem);
  max-width: 11ch;
  color: var(--paper);
}

/* a Z: the lede top-left, the quote stepped down on the right, the
   closing line landing wide across the right-hand two thirds */
.taste__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(4.5rem, 9vw, 8rem) var(--band);
}
.taste__know { grid-column: 1 / 6; grid-row: 1; align-self: start; }
.taste__quote {
  grid-column: 7 / 13;
  grid-row: 1;
  margin: clamp(2.5rem, 6vw, 5rem) 0 0;
  font-size: clamp(1.7rem, 1.1rem + 2.2vw, 3.2rem);
  color: var(--green);
}
.taste__close {
  grid-column: 4 / 13;
  grid-row: 2;
  margin-top: clamp(4rem, 9vw, 8rem);
  font-size: clamp(1.6rem, 1rem + 2vw, 2.6rem);
  line-height: 1.02;
}

@media (max-width: 999px) {
  .taste__know { grid-column: 1 / 10; }
  .taste__quote { grid-column: 3 / 13; grid-row: 2; margin-top: 2.75rem; }
  .taste__close { grid-column: 1 / 13; grid-row: 3; margin-top: clamp(3rem, 8vw, 4.5rem); }
}
@media (max-width: 599px) {
  .taste__know { grid-column: 1 / -1; }
  .taste__quote { grid-column: 2 / -1; }
}

/* ============================================================
   05 · WHY — editorial rows, then four questions that open
   ============================================================ */

.why { padding-block: calc(var(--band) * .75) var(--band); }

/* heading left, lede right: the mirror of the range's opening */
.why__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 3vw, 3rem);
  align-items: end;
}
.why__head { grid-column: 1 / 7; grid-row: 1; }
.why__lede { grid-column: 8 / 13; grid-row: 1; margin: 0; }

.reasons { margin-top: clamp(3rem, 6vw, 5.5rem); }
.reason {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: .9rem clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}
.reason + .reason { border-top: 1px solid var(--rule); }
.reason__word {
  grid-column: 1 / 7;
  grid-row: 1 / 3;
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(2rem, 1.1rem + 3.6vw, 4.6rem);
  line-height: .9;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--green);
}
.reason__head { grid-column: 8 / 13; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); }
.reason .body-text { grid-column: 8 / 13; }

/* the questions run beside their heading, which holds its place */
.who {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  margin-top: calc(var(--band) * .8);
}
.who__head { grid-column: 1 / 5; position: sticky; top: calc(var(--nav-h) + 2rem); max-width: 11ch; }
.who__list { grid-column: 6 / 13; border-top: 1px solid var(--green); }
.who__item { border-bottom: 1px solid var(--rule); }
.who__item summary { list-style: none; }
.who__item summary::-webkit-details-marker { display: none; }
.who__q {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  cursor: pointer;
  padding-block: clamp(1.1rem, 2.4vw, 1.8rem);
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 2.1rem);
  letter-spacing: -.025em;
  line-height: 1.1;
  color: var(--ink);
  transition: color .3s;
}
.who__q:hover { color: var(--green); }
.who__q::after {
  content: "+";
  flex: none;
  font-weight: 300;
  color: var(--green);
  transition: rotate .4s var(--ease-out);
}
.who__item[open] .who__q::after { rotate: 45deg; }
.who__item .body-text { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); max-width: 52ch; }

@media (max-width: 999px) {
  .why__head { grid-column: 1 / 13; }
  .why__lede { grid-column: 4 / 13; grid-row: 2; margin-top: 1.5rem; }
  .reason__word { grid-column: 1 / 13; grid-row: 1; }
  .reason__head { grid-column: 4 / 13; }
  .reason .body-text { grid-column: 4 / 13; }
  .who__head { grid-column: 1 / 13; position: static; max-width: none; }
  .who__list { grid-column: 3 / 13; margin-top: clamp(2rem, 4vw, 3rem); }
}
@media (max-width: 599px) {
  .why__lede, .reason__head, .reason .body-text, .who__list { grid-column: 1 / -1; }
}

/* ============================================================
   06 · VERDE THEORY — the hospitality register
   ============================================================ */

.verde__image {
  position: relative;
  margin: 0;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--ink);
}
.verde__image img { width: 100%; height: 118%; object-fit: cover; display: block; }
.verde__image::after {
  content: "";
  position: absolute;
  inset: 0;
  /* bottom-heavy plus a left wash: the label and headline sit over
     the room's brightest wall, so the scrim has to carry them */
  background:
    linear-gradient(90deg, rgba(var(--ink-rgb), .45) 0%, rgba(var(--ink-rgb), 0) 60%),
    linear-gradient(180deg, rgba(var(--ink-rgb), .12) 0%, rgba(var(--ink-rgb), .1) 38%, rgba(var(--ink-rgb), .78) 100%);
}
.verde__over {
  position: absolute;
  z-index: 1;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(2.5rem, 7vw, 6rem);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.verde__irl { color: rgba(var(--paper-rgb), .86); }
/* Ballena's register: the same family, light and airy instead of heavy */
.verde__head {
  max-width: 15ch;
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: .95;
  color: var(--paper);
}

.verde__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(4rem, 8vw, 7rem) var(--band);
  align-items: start;
}
.verde__line { grid-column: 1 / 8; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.4rem); color: var(--green); }
.verde__text { grid-column: 9 / 13; margin-top: .4rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; }
.verde__where { line-height: 1.8; }
@media (max-width: 999px) {
  .verde__line { grid-column: 1 / 12; }
  .verde__text { grid-column: 5 / 13; margin-top: 2.25rem; }
}
@media (max-width: 599px) {
  .verde__line, .verde__text { grid-column: 1 / -1; }
}

/* ============================================================
   07 · OUR STORY
   ============================================================ */

.story-intro { padding-block: 0 var(--band); }
.story-intro__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 4vw, 4.5rem);
  align-items: end;
}
.story-intro__photo { grid-column: 1 / 6; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--stone); }
.story-intro__photo svg { width: 100%; height: 100%; display: block; }
.story-intro__copy { grid-column: 7 / 12; display: flex; flex-direction: column; gap: 1.5rem; }
.story-intro__note { rotate: -3deg; width: fit-content; }
.story-intro__text { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
@media (max-width: 999px) {
  .story-intro__photo { grid-column: 1 / 8; }
  .story-intro__copy { grid-column: 4 / 13; margin-top: clamp(2.5rem, 6vw, 3.5rem); }
}
@media (max-width: 599px) {
  .story-intro__photo { grid-column: 1 / 10; }
  .story-intro__copy { grid-column: 1 / -1; }
}

/* ============================================================
   08 · WHERE TO BUY — a typographic spread: the promise on the
   left, the places on the right
   ============================================================ */

.buy { padding-block: var(--band); background: var(--paper-sink); }
.buy .shell {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 3vw, 3rem);
  align-items: end;
}
.buy__soon   { grid-column: 1 / 7; grid-row: 1; justify-self: start; rotate: -4deg; margin: 0; }
.buy__head   { grid-column: 1 / 7; grid-row: 2; align-self: start; max-width: 13ch; margin-top: .6rem; }
.buy__lead   { grid-column: 8 / 13; grid-row: 1; margin: 0; max-width: 36ch; }
.buy__cities {
  grid-column: 8 / 13;
  grid-row: 2;
  align-self: start;
  margin-top: .75rem;
  font-size: clamp(2rem, 1.3rem + 3vw, 4.2rem);
  line-height: .98;
  color: var(--green);
}
.buy__ways {
  grid-column: 8 / 13;
  grid-row: 3;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: var(--t-md);
  color: var(--ink-2);
}
.buy__claims {
  grid-column: 1 / 7;
  grid-row: 3;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2.4rem;
  color: var(--green-2);
}
.buy__cta { grid-column: 1 / 7; grid-row: 4; justify-self: start; margin-top: 2.5rem; }

@media (max-width: 999px) {
  .buy__soon, .buy__head { grid-column: 1 / 13; }
  .buy__lead { grid-column: 4 / 13; grid-row: 3; margin-top: 2.5rem; }
  .buy__cities { grid-column: 4 / 13; grid-row: 4; }
  .buy__ways { grid-column: 4 / 13; grid-row: 5; }
  .buy__claims { grid-column: 1 / 13; grid-row: 6; margin-top: 2.75rem; }
  .buy__cta { grid-column: 1 / 13; grid-row: 7; }
}
@media (max-width: 599px) {
  .buy__lead, .buy__cities, .buy__ways { grid-column: 2 / -1; }
}

/* ============================================================
   09 · PARTNER WITH US — compact, as the client asked
   ============================================================ */

.partner-intro { padding-block: calc(var(--band) * .7); }
.partner-intro__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 4vw, 4.5rem);
  align-items: start;
}
.partner-intro__grid > div:first-child { grid-column: 1 / 6; display: flex; flex-direction: column; align-items: flex-start; }
.segments { grid-column: 7 / 13; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--green); }
.segment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 1.5rem;
  align-items: baseline;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--rule);
  transition: padding-left .45s var(--ease-out);
}
.segment:hover { padding-left: .6rem; }
.segment__name {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
}
.segment__line { font-size: var(--t-sm); color: var(--ink-3); }
.partner-intro__cta { margin-top: 2rem; }
@media (max-width: 999px) {
  .partner-intro__grid > div:first-child { grid-column: 1 / 11; }
  .segments { grid-column: 3 / 13; margin-top: 2.5rem; }
}
@media (max-width: 599px) {
  .partner-intro__grid > div:first-child, .segments { grid-column: 1 / -1; }
  .segment { grid-template-columns: 1fr; gap: .3rem; }
}

/* ============================================================
   10 · FINAL — the green field that runs into the footer
   ============================================================ */

.final {
  background: var(--green);
  color: var(--paper);
  padding-block: var(--band) clamp(3rem, 6vw, 5rem);
}
/* the line answers from the right; the actions hold the left */
.final .shell {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 3vw, 3rem);
  align-items: end;
}
.final__head { grid-column: 1 / 12; grid-row: 1; color: var(--paper); max-width: 12ch; }
.final__line { grid-column: 8 / 13; grid-row: 2; margin-top: 2.5rem; max-width: 30ch; color: rgba(var(--paper-rgb), .86); }
.final__actions { grid-column: 1 / 8; grid-row: 2; margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; }
.final + * .foot,
body:has(.final) .foot { padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid rgba(var(--paper-rgb), .14); }
@media (max-width: 999px) {
  .final__head { grid-column: 1 / 13; }
  .final__line { grid-column: 4 / 13; }
  .final__actions { grid-column: 1 / 13; grid-row: 3; }
}
@media (max-width: 599px) {
  .final__line { grid-column: 1 / -1; }
}