/* ============================================================
   EVALD — §00 Launch hero
   Self-contained: every rule is scoped under .scene-launch so
   nothing leaks into the Fraunces/ivory story system below.
   Palette sampled from the brand creatives (assets/001–006).
   ============================================================ */

.scene-launch {
  /* --- palette, sampled from the aloe creatives --- */
  --eg-ink:     #16240f;
  --eg-forest:  #264919;
  --eg-green:   #4f8c2b;
  --eg-leaf:    #79ac55;
  --eg-light:   #a8d07e;
  --eg-pale:    #dceacb;
  --eg-water:   #57a1c2;

  --eg-panel-1: #e4edda;
  --eg-panel-2: #fafcf4;

  --lh-sans:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --lh-display: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --lh-ease:    cubic-bezier(.16, 1, .3, 1);

  position: relative;
  z-index: 3;
}

/* ---------- shell ---------- */

.lh {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background-color: var(--eg-ink);
  background-image:
    linear-gradient(180deg, rgba(10, 20, 6, .72) 0%, rgba(10, 20, 6, .48) 42%, rgba(10, 20, 6, .70) 100%),
    image-set(url("../assets/hero-bg-1920.webp") 1x);
  background-image:
    linear-gradient(180deg, rgba(10, 20, 6, .72) 0%, rgba(10, 20, 6, .48) 42%, rgba(10, 20, 6, .70) 100%),
    url("../assets/hero-bg-1920.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  font-family: var(--lh-sans);
}

@media (max-width: 800px) {
  .lh {
    background-image:
      linear-gradient(180deg, rgba(10, 20, 6, .74) 0%, rgba(10, 20, 6, .52) 42%, rgba(10, 20, 6, .72) 100%),
      url("../assets/hero-bg-800.webp");
  }
}
@media (min-width: 801px) and (max-width: 1280px) {
  .lh {
    background-image:
      linear-gradient(180deg, rgba(10, 20, 6, .72) 0%, rgba(10, 20, 6, .48) 42%, rgba(10, 20, 6, .70) 100%),
      url("../assets/hero-bg-1280.webp");
  }
}

/* Only on desktop does the gallery bleed up behind the navbar, where a pale
   creative would swallow the nav. This wash spans the full hero width —
   confining it to the gallery would put a second edge next to the slide's
   own — and fades out completely, so it is invisible over the dark
   background. In the stacked layout the slide starts below the nav, so no
   wash is needed and it would only dim the top of the slide. */
@media (min-width: 1024px) {
  .lh::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 148px;
    z-index: 15;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(10, 20, 6, .78) 0%,
      rgba(10, 20, 6, .40) 46%,
      transparent 100%);
  }
}

.lh *,
.lh *::before,
.lh *::after { box-sizing: border-box; }

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

/* ============================================================
   NAVBAR
   ============================================================ */

.lh-nav {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
}
@media (min-width: 640px) { .lh-nav { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .lh-nav { padding: 1.25rem 2.5rem; } }

.lh-brand { flex: none; line-height: 0; }
.lh-brand img {
  height: 26px;
  width: auto;
}
@media (min-width: 1024px) { .lh-brand img { height: 32px; } }

/* --- centre links (desktop) --- */
.lh-links {
  display: none;
  align-items: center;
  gap: 1.75rem;
  font-family: var(--lh-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -.01em;
}
@media (min-width: 768px) { .lh-links { display: flex; } }
@media (min-width: 1024px) { .lh-links { gap: 2.5rem; } }

.lh-links a {
  color: rgba(255, 255, 255, .9);
  text-decoration: none;
  transition: color .3s var(--lh-ease);
}
.lh-links a:hover,
.lh-links a:focus-visible { color: #fff; }

/* --- right cluster --- */
.lh-tools {
  display: flex;
  align-items: center;
  gap: .35rem;
}
@media (min-width: 640px)  { .lh-tools { gap: .6rem; } }
@media (min-width: 1024px) { .lh-tools { gap: .9rem; } }

.lh-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  transition: background-color .3s var(--lh-ease), transform .3s var(--lh-ease);
}
.lh-icon:hover { background: rgba(255, 255, 255, .12); }
.lh-icon:active { transform: scale(.94); }
.lh-icon svg { width: 20px; height: 20px; }

.lh-burger { display: inline-flex; }
@media (min-width: 768px) { .lh-burger { display: none; } }

/* --- mobile overlay menu --- */
.lh-menu {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  background: rgba(6, 14, 4, .94);
  backdrop-filter: blur(6px);
  font-family: var(--lh-display);
  font-weight: 500;
  font-size: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--lh-ease), visibility .35s;
}
.lh-menu.is-open { opacity: 1; visibility: visible; }
.lh-menu a {
  color: #fff;
  text-decoration: none;
}
.lh-menu-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
}

/* ============================================================
   HERO CONTENT
   ============================================================ */

.lh-main {
  position: relative;
  z-index: 5;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 1.25rem;
}
@media (min-width: 640px) { .lh-main { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .lh-main { padding: 2rem 2.5rem; } }

/* --- headline --- */
/* Sizes follow the reference scale, but each is capped against the
   viewport so the headline always holds its intended three lines —
   a fourth line pushes the panel strip (and the bottle) below the fold. */
.lh-title {
  --lh-lead: 1.04;
  font-family: var(--lh-display);
  font-weight: 400;
  letter-spacing: -.05em;
  color: #fff;
  font-size: min(48px, 11vw);
  line-height: var(--lh-lead);
  margin: 0;
}
@media (min-width: 640px)  { .lh-title { --lh-lead: .9;  font-size: min(80px,  11vw); } }
@media (min-width: 768px)  { .lh-title { --lh-lead: .86; font-size: min(110px, 11.4vw, 15vh); } }
@media (min-width: 1024px) { .lh-title { --lh-lead: .85; font-size: min(104px, 9.2vw, 12.5vh); } }
@media (min-width: 1280px) { .lh-title { --lh-lead: .81; font-size: min(122px, 9vw, 13.5vh); } }

/* the gallery floats at the right on desktop — hold the headline and
   lede inside the clear column so they never sit on top of a slide */
@media (min-width: 1024px) {
  .lh-title { max-width: 54%; }
  .lh-cta   { max-width: 52%; }
}
@media (min-width: 1440px) {
  .lh-title { max-width: 52%; }
  .lh-cta   { max-width: 50%; }
}

/* .lh-main is a full-width flex box sitting at z-5, so on desktop it
   would swallow clicks aimed at the gallery indicators underneath it.
   Let hits fall through everywhere except the actual controls. */
@media (min-width: 1024px) {
  .lh-main { pointer-events: none; }
  .lh-main a,
  .lh-main button { pointer-events: auto; }
}

.lh-line {
  display: block;
  white-space: nowrap;
}

/* The brand sits inside the h1 so the heading reads as one sentence to a
   crawler, but at display size it would eat a whole line of a headline the
   gallery already limits to ~54% of the viewport. Small caps keep it as the
   label it looks like. */
.lh-line--brand {
  font-family: var(--lh-sans);
  font-size: .22em;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  margin-bottom: .6em;
}
.lh-line--brand .lh-w {
  line-height: 1.3;
  margin-bottom: 0;
}

/* Each word is a mask; the inner span does the travelling.
   The mask must be tall enough to clear DM Sans's ascender + descender
   (~1.3em) or descenders get clipped — but an inline-block that tall
   also forces the line box to 1.3em, ignoring the tight leading above.
   The negative margin pulls the line box back to --lh-lead. */
.lh-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.3;
  margin-bottom: calc((var(--lh-lead) - 1.3) * 1em);
}
.lh-w > span { display: inline-block; }

.lh-dim { color: rgba(255, 255, 255, .45); }

/* --- CTA row --- */
.lh-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (min-width: 640px) {
  .lh-cta {
    flex-direction: row;
    align-items: center;
    /* the lede drops below the buttons when the clear column is too
       narrow for all three, hence the tighter row gap */
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    margin-top: 3rem;
  }
}
@media (min-width: 1024px) { .lh-cta { gap: 1.5rem 50px; margin-top: min(75px, 7vh); } }

/* the two CTAs travel together: stacked on phones, side by side once
   there is room, so the lede can sit beside them */
.lh-btns {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  width: 100%;
}
@media (min-width: 640px) {
  .lh-btns { flex-direction: row; align-items: center; gap: 1rem; width: auto; }
}

.lh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  height: 56px;
  /* also worn by a <button> (the order dialog's trigger), so the UA's
     border, padding and system font all have to be cleared here */
  border: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: .375rem;
  background: var(--eg-ink);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--lh-sans);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -.03em;
  transition: background-color .35s var(--lh-ease), transform .35s var(--lh-ease);
}
.lh-btn:hover { background: var(--eg-forest); transform: translateY(-2px); }
.lh-btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* secondary CTA — the bulk enquiry, kept quieter than the retail buy */
.lh-btn--ghost {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
  transition: background-color .35s var(--lh-ease), box-shadow .35s var(--lh-ease), transform .35s var(--lh-ease);
}
.lh-btn--ghost:hover {
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px #fff;
}

@media (min-width: 640px)  { .lh-btn { width: 200px; height: 64px; font-size: 1.0625rem; } }
@media (min-width: 768px)  { .lh-btn { width: 224px; font-size: 1.125rem; } }
@media (min-width: 1024px) { .lh-btn { width: 250px; height: 72px; font-size: 1.3125rem; } }

.lh-lede {
  max-width: 310px;
  margin: 0;
  color: #fff;
  font-family: var(--lh-sans);
  font-weight: 400;
  font-size: .875rem;
  line-height: 1.45;
  letter-spacing: -.03em;
}
@media (min-width: 640px)  { .lh-lede { font-size: 1rem; } }
@media (min-width: 1024px) { .lh-lede { font-size: 1.125rem; } }

/* ============================================================
   PRODUCT IMAGERY
   ============================================================ */

/* ============================================================
   PRODUCT GALLERY — carousel
   The creatives are light-green squares on a near-black hero. The slide
   bleeds off the top, right and bottom, so it meets the hero on a single
   clean vertical edge beside the headline.
   ============================================================ */

.lh-shots {
  position: relative;
  z-index: 0;
  width: 100%;
  margin: 0;
  aspect-ratio: 1;
}

/* Stacked layout: the gallery leads and the copy follows it. .lh is a
   column flex container, so this is an order swap rather than a second
   copy of the markup. */
@media (max-width: 1023px) {
  .lh-nav    { order: 0; }
  .lh-menu   { order: 0; }
  .lh-shots  { order: 1; }
  .lh-main   { order: 2; }
  .lh-panels { order: 3; }
  .lh-main   { padding-top: 2.25rem; }
}

/* desktop: floats at the right, anchored just above the panel strip
   exactly like the bottle it replaces */
@media (min-width: 1024px) {
  .lh-shots {
    position: absolute;
    top: 0;
    right: 0;
    /* stops at the panel strip instead of the hero's floor, so the price
       bar never clips the slide. The box is square like the creatives,
       so nothing is cropped either. The strip's real height can exceed
       its min-height, which only tucks the slide further behind it. */
    height: calc(100% - min(210px, 26vh));
    width: auto;
    aspect-ratio: 1;
    margin: 0;
  }
}

.lh-shots-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

/* --- slides --- */
.lh-shot {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .95s var(--lh-ease), visibility 0s linear .95s;
}
.lh-shot.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .95s var(--lh-ease), visibility 0s;
}

/* --- the slide itself ---
   No mask: the creatives meet the hero on a clean vertical cut. The slide
   bleeds off the top, right and bottom of the hero, so that cut is the only
   edge of it that is ever visible. */
.lh-shot-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- dots --- */
.lh-shot-dots {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  justify-content: center;
  gap: 0;
  /* the slides run from a white sale poster to a dark leaf photo, so the
     dots carry their own ground rather than relying on the image behind */
  width: max-content;
  margin: 0 auto;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(10, 20, 6, .42);
  list-style: none;
}
@media (min-width: 1024px) { .lh-shot-dots { bottom: 36px; } }

/* Long galleries trade the dot row for arrows and a counter. The dots are a
   34px-per-slide flex line with no wrap, inside .lh's overflow:hidden, so
   past roughly eight they are clipped rather than wrapped — and the active
   one goes with them. This block is one width at any gallery length. */
.lh-shot-nav {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 16px;
  width: max-content;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: .15rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: rgba(10, 20, 6, .42);
}
@media (min-width: 1024px) { .lh-shot-nav { bottom: 36px; } }

.lh-shot-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lh-shot-arrow svg { width: 17px; height: 17px; }
.lh-shot-arrow:hover { background: rgba(255, 255, 255, .16); }

.lh-shot-count {
  font-family: var(--lh-sans);
  font-size: .74rem;
  letter-spacing: .06em;
  color: #fff;
  min-width: 4.5ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* The visible dot is 7px, which is far too small to hit with a thumb,
   so the button itself is a transparent 34px target and ::before draws
   the dot inside it. */
.lh-shot-dot {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lh-shot-dot::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .38);
  transition: background .35s var(--lh-ease), width .35s var(--lh-ease), border-radius .35s var(--lh-ease);
}
.lh-shot-dot:hover::before { background: rgba(255, 255, 255, .65); }
.lh-shot-dot.is-active::before {
  width: 22px;
  border-radius: 4px;
  background: var(--eg-light);
}
.lh-shot-dot:focus-visible {
  outline: 2px solid var(--eg-light);
  outline-offset: -3px;
}

/* ============================================================
   BOTTOM PANEL STRIP
   ============================================================ */

.lh-panels {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .lh-panels { grid-template-columns: 2fr 1fr 2fr; }
}
/* between 1024 and 1440 a 1fr middle column leaves the card text ~65px of
   width, wrapping it to five lines; give the column more room there */
@media (min-width: 1024px) and (max-width: 1439px) {
  .lh-panels { grid-template-columns: 2fr 1.4fr 2fr; }
}

.lh-panel {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 640px)  { .lh-panel { padding: 2rem; } }
@media (min-width: 1024px) {
  .lh-panel {
    padding: min(2.5rem, 3.4vh) 2.5rem;
    /* on short desktop windows the strip gives height back to the hero
       so the whole scene still lands inside one viewport */
    min-height: min(210px, 26vh);
  }
}

/* --- panel 1 --- */
.lh-panel--1 {
  background: var(--eg-panel-1);
  color: var(--eg-ink);
}
.lh-panel-title {
  position: relative;
  z-index: 2;
  max-width: 350px;
  margin: 0;
  font-family: var(--lh-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -.05em;
}
@media (min-width: 640px)  { .lh-panel-title { font-size: 28px; } }
@media (min-width: 1024px) { .lh-panel-title { font-size: 35px; } }

.lh-panel-link {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: var(--lh-sans);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: -.03em;
}
@media (min-width: 1024px) { .lh-panel-link { font-size: 1.125rem; } }

.lh-panel-art {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  /* keep it off the copy — at full width the leaves run under the text */
  max-width: 45%;
  object-fit: cover;
  object-position: bottom right;
  z-index: 1;
  mix-blend-mode: multiply;
  opacity: .9;
  pointer-events: none;
}

/* --- panel 2: rotating cards --- */
.lh-panel--2 {
  background: var(--eg-panel-2);
  color: var(--eg-ink);
}
.lh-cards {
  position: relative;
  /* every card shares one grid cell, so the container is always as tall as
     the TALLEST card. Previously the active card was the only in-flow one,
     so the whole panel strip grew and shrank on each rotation — a 43px jump
     that pushed the hero past the viewport at narrow desktop widths. */
  display: grid;
  flex: 1 1 auto;
  min-height: 84px;
}
.lh-card {
  grid-area: 1 / 1;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .7s var(--lh-ease), transform .7s var(--lh-ease);
  pointer-events: none;
}
.lh-card.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.lh-card-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: #fff;
  background: var(--eg-ink);
}
.lh-card-icon svg { width: 19px; height: 19px; }
@media (min-width: 640px) {
  .lh-card-icon { width: 48px; height: 48px; }
  .lh-card-icon svg { width: 22px; height: 22px; }
}
.lh-card--aloe    .lh-card-icon { background: var(--eg-green); }
.lh-card--neem    .lh-card-icon { background: var(--eg-forest); }
.lh-card--water   .lh-card-icon { background: var(--eg-water); }
.lh-card--formula .lh-card-icon { background: var(--eg-ink); }

.lh-card p {
  margin: 0;
  font-family: var(--lh-sans);
  font-weight: 400;
  font-size: .875rem;
  line-height: 1.2;
  letter-spacing: -.03em;
  color: rgba(22, 36, 15, .8);
}
@media (min-width: 640px)  { .lh-card p { font-size: 1rem; } }
@media (min-width: 1024px) { .lh-card p { font-size: 1.125rem; } }

.lh-dots {
  display: flex;
  gap: .375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lh-dots li {
  flex: 1 1 0;
  height: 2px;
  border-radius: 999px;
  background: rgba(22, 36, 15, .2);
  transition: background-color .5s var(--lh-ease);
}
.lh-dots li.is-active { background: var(--eg-ink); }

/* --- panel 3 --- */
.lh-panel--3 {
  background: var(--eg-ink);
  color: #fff;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 1024px) { .lh-panel--3 { gap: 1.75rem; } }

/* sized by height — at 148px wide this portrait bottle is 220px tall,
   which would drive the whole panel strip taller than its own content */
.lh-panel--3 img {
  flex: none;
  width: auto;
  height: 108px;
  object-fit: contain;
}
@media (min-width: 640px)  { .lh-panel--3 img { height: 124px; } }
@media (min-width: 1024px) { .lh-panel--3 img { height: min(150px, 17vh); } }

/* price.jpeg is a light square; feather it so it sits in the dark panel
   instead of looking pasted onto it */
/* Runs the full height of the panel, flush against its left edge.
   It is taken out of flow because a 520px-square in the flex line drives
   the whole panel strip — and with it the hero — to its intrinsic height;
   the text is offset by the width the image occupies (height x 1:1). */
.lh-panel--3 { padding-left: 0; }
.lh-panel--3 img.lh-price-shot {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  /* narrower than the panel is tall: a square shot leaves the price list
     too little width to go two-up, and four stacked rows do not fit the
     panel's height */
  width: var(--price-shot-w, 168px);
  object-fit: cover;
  /* dissolve the right edge into the ink so the bright photo sits in the
     panel rather than looking pasted onto it. The fade happens well inside
     the square, so it never reaches the price list. */
  -webkit-mask-image: linear-gradient(to right, #000 60%, rgba(0, 0, 0, .5) 84%, transparent 100%);
          mask-image: linear-gradient(to right, #000 60%, rgba(0, 0, 0, .5) 84%, transparent 100%);
}
/* the text column is the query container for the price grid; it needs an
   explicit flex basis because inline-size containment stops its own
   contents from sizing it */
.lh-panel--3 > div {
  flex: 1 1 auto;
  min-width: 0;
  container-type: inline-size;
  margin-left: calc(var(--price-shot-w, 168px) + 2rem);
}
@media (min-width: 1024px) {
  .lh-panel--3 { --price-shot-w: clamp(120px, 22vh, 230px); }
}

/* dropped entirely when the column is too narrow for the two-up grid —
   there, four stacked rows need every pixel of the panel's height */
.lh-price-label {
  display: none;
  margin: 0 0 .55rem;
  color: var(--eg-light);
  font-family: var(--lh-sans);
  font-weight: 500;
  font-size: .5625rem;
  line-height: 1.35;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Four sizes inside a panel that is wide but only 26vh tall, so the list
   spends its room sideways whenever it has any. How much room it has does
   not track the viewport — between 1024 and 1439 the square photo eats
   most of the panel — so the switch is a container query on the text
   column rather than a media query. */
.lh-prices {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--lh-sans);
}
.lh-prices li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .28rem 0;
  border-top: 1px solid rgba(168, 208, 126, .18);
}
.lh-prices li:first-child {
  border-top: 0;
  padding-top: 0;
}

.lh-price-size {
  color: rgba(255, 255, 255, .55);
  font-weight: 400;
  font-size: .6875rem;
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.lh-price-amt {
  color: #fff;
  font-family: var(--lh-display);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

/* two-up: size sits above its price, each pair ruled off on the left */
@container (min-width: 152px) {
  .lh-price-label { display: block; }
  .lh-prices {
    grid-template-columns: 1fr 1fr;
    gap: clamp(.35rem, 1.1vh, .75rem) clamp(.75rem, 5cqw, 1.5rem);
  }
  .lh-prices li,
  .lh-prices li:first-child {
    flex-direction: column;
    align-items: stretch;
    gap: .1rem;
    padding: 0 0 0 clamp(.45rem, 2.5cqw, .7rem);
    border-top: 0;
    border-left: 1px solid rgba(168, 208, 126, .3);
  }
  .lh-price-size { font-size: clamp(.5625rem, 3.4cqw, .6875rem); }
  .lh-price-amt  { font-size: clamp(1.05rem, 2.2vh, 1.5rem); }
}
@container (min-width: 250px) {
  .lh-price-label {
    font-size: .625rem;
    letter-spacing: .26em;
  }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes lhFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lhFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lhSlideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes lhSlideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes lhScaleIn {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes lhWordReveal {
  from { opacity: 0; transform: translateY(100%); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

.lh .animate-fade-up     { animation: lhFadeUp        .8s var(--lh-ease) both; }
.lh .animate-fade-in     { animation: lhFadeIn        .7s var(--lh-ease) both; }
.lh .animate-slide-left  { animation: lhSlideInLeft   .8s var(--lh-ease) both; }
.lh .animate-slide-right { animation: lhSlideInRight  .8s var(--lh-ease) both; }
.lh .animate-scale-in    { animation: lhScaleIn        1s var(--lh-ease) both; }
.lh .animate-word-reveal > span { animation: lhWordReveal .7s var(--lh-ease) both; }

.lh .delay-200  { animation-delay: .2s; }
.lh .delay-300  { animation-delay: .3s; }
.lh .delay-400  { animation-delay: .4s; }
.lh .delay-500  { animation-delay: .5s; }
.lh .delay-600  { animation-delay: .6s; }
.lh .delay-700  { animation-delay: .7s; }
.lh .delay-800  { animation-delay: .8s; }
.lh .delay-900  { animation-delay: .9s; }
.lh .delay-1000 { animation-delay: 1s; }
.lh .delay-1100 { animation-delay: 1.1s; }

/* motion off: everything renders in its final state */
@media (prefers-reduced-motion: reduce) {
  .lh *,
  .lh *::before,
  .lh *::after {
    animation: none !important;
    transition: none !important;
  }
  .lh .animate-word-reveal > span { opacity: 1; transform: none; filter: none; }
}