/* Homepage lower half — Figma V5 final score */
.lower-home {
  position: relative;
  z-index: 7;
  /* clip sideways only: the catalogue pack falls in from ABOVE the bridge,
     through the showcase's last frame, so the top edge must stay open
     (clip, never hidden — no scroll container, sticky stages survive) */
  overflow-x: clip;
  overflow-y: visible;
  background: var(--neutral-100); /* same paper as the hero / showcase */
  color: var(--neutral-900);
  isolation: isolate;
}

/* After the pinned showcase releases, its stage is a full screen of empty
   paper. Ride up over the last third of it so "See Full Catalogue" follows
   the last product closely, with a beat of paper between them. Only when the
   showcase is actually pinned (GSAP's pin-spacer is there). */
.pin-spacer + .lower-home {
  margin-top: -41vh;
  margin-top: -41svh;
}

.lower-home section {
  position: relative;
  z-index: 1;
  /* clip, NOT hidden — hidden would turn each section into a scroll
     container and break the sticky stages (manifesto / flight) */
  overflow: clip;
}

/* The shared footer follows the contact section in normal document flow. */
.lower-home site-footer {
  display: block;
  position: relative;
  z-index: 1;
}

.lh-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.lh-mask > span {
  display: inline-block;
  will-change: transform;
}

.lh-kicker,
.lh-colophon-vertical,
.lh-compliance-index,
.lh-compliance-status,
.lh-compliance-row p,
.lh-annotation,
.lh-export-desk {
  font: 400 clamp(9px, .764vw, 11px)/1.36 var(--font-text);
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* 01 — Bridge */
.lh-bridge {
  height: 470px;
  background: var(--neutral-100);
}

/* the pack's fall starts above the section, so its top edge stays open */
.lower-home .lh-bridge {
  overflow-x: clip;
  overflow-y: visible;
}

.lh-bridge-copy {
  position: absolute;
  inset: 0;
}

.lh-bridge-title {
  position: absolute;
  z-index: 2;
  top: 102px;
  left: 7.43vw;
  display: flex;
  gap: .18em;
  color: var(--neutral-900);
  font: 400 min(8.333vw, 120px)/calc(1 * var(--display-lh, 1)) var(--font-display);
  letter-spacing: calc(-.035em + var(--display-fit, 0em));
  white-space: nowrap;
}

.lh-catch-word {
  will-change: transform;
}

/* line-height is 1, so the mask's line box ends at the em-box bottom and
   amputates descenders ("Catalogue"); open the window below the baseline */
.lh-bridge-title .lh-mask {
  padding-bottom: .15em;
  margin-bottom: -.15em;
}

/* full-cover carrier for the pack: JS scrubs the fall on THIS layer (origin
   set to the pack's centre) so the pack keeps its own drift + landing bounce */
.lh-catalogue-drop {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

.lh-catalogue-pack {
  position: absolute;
  z-index: 3;
  top: 49px;
  right: 3.33vw;
  width: min(23.53vw, 339px);
  height: 339px;
  object-fit: contain;
  transform: rotate(-8deg);
  filter: drop-shadow(0 18px 18px rgba(41, 38, 30, .12));
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.lh-catalogue-button {
  position: absolute;
  left: 7.43vw;
  top: 256px;
  width: 284px;
  padding: 20px 34px;
  --button-bg: var(--coral-500);
  --button-ink: var(--neutral-900);
  --button-hover-bg: var(--neutral-900);
  --button-hover-ink: var(--butter-50);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* 01b — Handoff: the hands start together at the packet opening, then
   pull apart gently during free scrolling. The stylesheet is the
   together pose, which also serves as the reduced-motion fallback. */
.lh-handoff {
  padding: 15vh 0 4vh;
  background: var(--sage-700);
  color: var(--butter-50);
}

/* the sentence is split across the stage, each half over its own hand:
   "From our line" top-left above the arm, "to your hand." right-aligned
   above the pack; the note fills the open corner under the first line */
.lh-handoff-head {
  position: relative;
  z-index: 3;
  padding-inline: 6vw;
}

.lh-handoff-title {
  display: flex;
  flex-direction: column;
  margin: 0;
  font: 400 min(8.4vw, 128px)/.94 var(--font-display);
  letter-spacing: calc(-.035em + var(--display-fit, 0em));
}

.lh-handoff-line {
  display: block;
  width: max-content;
  will-change: transform;
}

.lh-handoff-line--two { align-self: flex-end; }

.lh-handoff-title .lh-mask {
  padding-bottom: .12em;
  margin-bottom: -.12em;
}

.lh-handoff-title i {
  display: inline-block;
  color: var(--coral-300);
  font-style: normal;
}

.lh-handoff-note {
  position: absolute;
  left: 6vw;
  bottom: .2em;
  width: min(290px, 26vw);
  font-size: min(8.4vw, 128px); /* so bottom .2em sits on the second line's baseline */
}

.lh-handoff-copy {
  margin: 0;
  color: var(--sage-200);
  font: 400 14px/1.55 var(--font-text);
}

.lh-hands {
  position: relative;
  z-index: 2;
  height: 50vw;
  margin-top: -1vh;
  perspective: 1200px;
  pointer-events: none;
}

.lh-hand {
  position: absolute;
  top: 0;
  will-change: transform;
}

.lh-hand img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}


.lh-hand--left {
  left: 0;
  top: 4vw;
  width: 49vw;
  transform-origin: 0 70%;
}

.lh-hand--right {
  right: 0;
  top: 5vw;
  width: 52vw;
  transform-origin: 100% 80%;
}

/* 02 — Colophon */
.lh-colophon {
  height: 880px;
  background: var(--neutral-100);
  color: var(--sage-700);
  transform-origin: 50% 0;
}

.lh-colophon-walls,
.lh-colophon-title {
  position: absolute;
  inset: 0;
}

.lh-colophon-title {
  font: 400 min(11.944vw, 172px)/.88 var(--font-display);
  letter-spacing: calc(-.03em + var(--display-fit, 0em));
}

.lh-wall {
  position: absolute;
  display: flex;
  align-items: baseline;
  width: max-content;
}

.lh-wall--one { top: 150px; left: 6.667vw; }
.lh-wall--two { top: 322px; left: 49.375vw; color: var(--sage-500); font-size: .605em; line-height: .92; }
.lh-wall--three { top: 442px; left: 6.667vw; }

.lh-wall i,
.lh-compliance h2 i,
.lh-compliance h3 i,
.lh-flight-title > i,
.lh-invitation-title > i,
.lh-mf-period {
  color: var(--coral-500);
  font-style: normal;
  transform-origin: 50% 80%;
  will-change: transform, opacity;
}

.lh-colophon-side {
  position: absolute;
  top: 640px;
  right: 6.944vw;
  width: 300px;
  padding-top: 23px;
  color: var(--sage-700);
}

.lh-colophon-side::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(var(--rule, 1)); /* JS draws the hairline via --rule */
  transform-origin: left;
}

.lh-colophon-side p {
  font-size: 13px;
  line-height: 1.65;
}

.lh-colophon-vertical {
  position: absolute;
  left: 3.055vw;
  top: 565px;
  color: var(--coral-500);
  letter-spacing: .14em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* 02b — Gallery deck — the reference geometry, constructed in screen
   space. The engine in lower-home.js hand-places every card per frame:
   trail climbing at 21°, 4:1 size falloff along the row, and each card
   individually tilted — top/bottom edges sloped 20°, vertical edges
   leaning 10° clockwise, faces stretched taller than wide (2.4:1 near
   → 1.4:1 far). At rest (no JS / reduced motion) the markup is an
   honest flat film strip; .is-3d hands layout to the engine. */
.lh-gallery {
  height: clamp(680px, 100vh, 960px);
  background: var(--neutral-100);
  /* let the far cards spill UP into the colophon above rather than
     clipping; the left/right marquee wrap is handled by the viewport's
     own horizontal clip below, so only the vertical is opened here */
  overflow: visible !important;
}

.lh-gallery-viewport {
  position: absolute;
  /* reach 300px above the section so climbing cards have headroom;
     clip left/right/bottom only, top stays open into the colophon */
  inset: -300px 0 0 0;
  overflow-x: clip;
  overflow-y: visible;
  pointer-events: none;
}

.lh-gallery-plane {
  position: absolute;
  inset: 0;
}

/* rest state: a simple strip — complete without a single transform */
.lh-gallery-track {
  display: flex;
  gap: 14px;
  align-items: center;
  height: 100%;
  padding: 0 6.944vw;
}

.lh-gallery-card {
  position: relative;
  flex: 0 0 auto;
  width: 220px;
  pointer-events: auto;
}

/* engine on: cards all originate at 0,0 and live entirely in their
   JS-computed translate+matrix (width is set by the engine too) */
.lh-gallery.is-3d .lh-gallery-track {
  display: block;
  position: absolute;
  inset: 0;
  padding: 0;
}

.lh-gallery.is-3d .lh-gallery-card {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}

.lh-gallery-lift {
  overflow: hidden;
  border-radius: 8px;
  background: var(--sage-200);
  transition: transform .55s var(--ease-out);
}

/* hover — the card lifts a breath out of the deck. In the 3D deck it is
   armed only once the intro has finished and cards settle (JS adds
   .is-settled); the flat rest strip (no .is-3d, e.g. reduced motion) keeps
   hover immediately. Gated to real hover devices — on touch (mobile) a tap
   would stick the lift on — AND to viewports above the 760px mobile
   breakpoint, so a mouse on a narrow window doesn't re-arm it either. */
@media (hover: hover) and (min-width: 761px) {
  .lh-gallery:not(.is-3d) .lh-gallery-card:hover .lh-gallery-lift,
  .lh-gallery.is-3d.is-settled .lh-gallery-card:hover .lh-gallery-lift {
    transform: translateY(-18px);
  }
}

.lh-gallery-lift img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* 03 — Cold ledger */
.lh-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: 720px;
  overflow: visible !important;
  background: var(--sage-700);
}

.lh-ledger-panel {
  position: relative;
  min-width: 0;
  margin-left: -1px; /* swallow subpixel grid seams between the doors */
  height: 720px;
  padding: 40px 32px 42px;
  overflow: hidden;
  transform-origin: bottom;
  transition: transform .45s var(--ease-out), filter .45s, height .45s var(--ease-out);
  will-change: transform;
}

.lh-ledger-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
  transition: background .4s;
}

.lh-ledger-panel:hover {
  height: 728px;
  transform: translateY(-8px);
}

.lh-ledger-panel:hover::after { background: rgba(41, 38, 30, .06); }
.lh-ledger-panel--founded { background: var(--sage-700); color: var(--butter-50); }
.lh-ledger-panel--brands { background: var(--coral-100); color: var(--neutral-900); }
.lh-ledger-panel--groups { background: var(--butter-50); color: var(--neutral-900); }
.lh-ledger-panel--regions { background: var(--neutral-900); color: var(--butter-50); }

.lh-ledger-panel .lh-kicker {
  position: relative;
  z-index: 2;
  color: currentColor;
}

.lh-ledger-number {
  position: absolute;
  z-index: 2;
  left: 32px;
  display: flex;
  align-items: flex-end;
  height: 1em;
  color: var(--sage-700);
  font: 400 min(19.444vw, 280px)/.76 var(--font-display);
  letter-spacing: calc(-.045em + var(--display-fit, 0em));
  white-space: nowrap;
  will-change: transform, filter;
  transition: transform .45s var(--ease-out);
}

.lh-ledger-panel:hover .lh-ledger-number { transform: translateY(-8px) rotate(4deg); }
.lh-ledger-panel--brands .lh-ledger-number { top: 280px; }
.lh-ledger-panel--groups .lh-ledger-number { top: 120px; color: var(--coral-500); }
.lh-ledger-panel--regions .lh-ledger-number { top: 290px; color: var(--butter-200); font-size: min(17.361vw, 250px); }

.lh-ledger-year {
  top: 80px;
  /* clear of the FOUNDED kicker (kicker sits at ~40–56px) */
  display: block;
  height: auto;
  color: var(--butter-200);
  line-height: .76;
}

.lh-ledger-year-prefix,
.lh-ledger-year-main {
  display: flex;
  width: max-content;
  height: 1em;
}

.lh-ledger-year-prefix {
  font-size: min(4.861vw, 70px);
  line-height: 1;
  letter-spacing: calc(-.03em + var(--display-fit, 0em));
}

.lh-ledger-year-main {
  margin-top: 10px;
  font-size: min(19.444vw, 280px);
  line-height: .76;
}

.lh-ledger-number .lh-odo-digit {
  position: relative;
  display: inline-block;
  /* width is set per-cell in JS to the landing digit's real advance so the
     final number is naturally kerned (no gap after a narrow '1') */
  height: 1em;
  /* cells are sized to each glyph's own advance, so ink stays inside the box;
     overflow hides only the digits stacked above/below during the roll */
  overflow: hidden;
}

.lh-odo-track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.lh-odo-track span {
  display: block;
  /* width is set per-glyph in JS to that digit's advance */
  height: 1em;
}

.lh-ledger-panel > p {
  position: absolute;
  z-index: 2;
  left: 32px;
  right: 32px;
  bottom: 48px;
  font-size: 12px;
  line-height: 1.5;
}

/* 04 — Manifesto — tall runway: the stage pins (sticky) while the
   sentence visibly stretches apart across ~160vh of scroll */
.lh-manifesto {
  height: 260vh;
  min-height: 1700px;
  background: var(--neutral-100);
}

.lh-manifesto-stage {
  position: sticky;
  top: 0;
  height: min(100vh, 940px);
  min-height: 760px;
  overflow: hidden;
}

.lh-manifesto-probe {
  position: absolute;
  z-index: -1;
  top: 42%;
  left: 50%;
  width: max-content;
  opacity: 0;
  transform: translate(-50%, -50%);
  font: 400 clamp(40px, 4.9vw, 71px)/calc(1 * var(--display-lh, 1)) var(--font-display);
  letter-spacing: calc(-.03em + var(--display-fit, 0em));
  white-space: nowrap;
  pointer-events: none;
}

.lh-manifesto-title {
  position: absolute;
  inset: 0;
  color: var(--sage-700);
  font: 400 min(9.167vw, 132px)/calc(1 * var(--display-lh, 1)) var(--font-display);
  letter-spacing: calc(-.03em + var(--display-fit, 0em));
}

.lh-mf-word,
.lh-mf-period {
  position: absolute;
  display: block;
  width: max-content;
  will-change: transform;
}

.lh-mf-good { left: 6.944vw; top: 6.6%; }
.lh-mf-chicken { left: 60.833vw; top: 6.6%; }
.lh-mf-isa { left: 6.944vw; top: 27.9%; }
.lh-mf-matter { left: 65.347vw; top: 27.9%; }
.lh-mf-of { left: 6.944vw; top: 49.15%; }
.lh-mf-discipline { left: 50.208vw; top: 49.15%; }
.lh-mf-period { left: 87.05vw; top: 49.15%; }

.lh-annotation {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.lh-annotation i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  background: var(--coral-500);
}

.lh-annotation--one { left: 6.944vw; top: 25.1%; }
.lh-annotation--two { left: 52.778vw; top: 25.1%; }
.lh-annotation--three { left: 20.833vw; top: 46.38%; }
.lh-annotation--four { left: 69.375vw; top: 46.38%; }

.lh-manifesto-copy {
  position: absolute;
  left: 6.944vw;
  top: calc(76.5% - 20px);
  width: 340px;
  font-size: 13px;
  line-height: 1.62;
}

.lh-text-link {
  position: absolute;
  right: 6.944vw;
  top: calc(78.6% - 20px);
  display: inline-grid;
  grid-template-columns: auto 18px;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lh-text-link svg { width: 18px; height: 18px; }
.lh-text-link > i { grid-column: 1 / -1; height: 1px; background: currentColor; transform-origin: left; }

/* 05 — Flight — the product clouds. The section is pulled up under the
   manifesto by exactly the manifesto stage's height, so its own sticky
   stage locks the very moment the manifesto stage releases: the old
   sentence scrolls away UNDER a stage that never moves, while sucuk and
   nuggets are tossed in from the sides. Same paper, no seam — the
   products are the bridge. Transparent and click-through, so the
   manifesto link stays usable while the two overlap. */
.lh-flight {
  height: 300vh;
  min-height: 2280px;
  margin-top: calc(-1 * clamp(760px, 100vh, 940px));
  pointer-events: none;
}

/* vertical overflow stays open: on the exit the near pieces overtake the
   page and must leave whole, not be sliced by the stage's rising bottom
   edge — so the section also rides above the compliance hall below */
.lower-home .lh-flight {
  z-index: 2;
  overflow-x: clip;
  overflow-y: visible;
}

.lh-flight-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 760px;
}

.lh-flight-cloud {
  position: absolute;
  inset: 0;
}

/* depth planes: far (0) sits behind the copy, everything else in front */
.lh-fl-piece {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  width: var(--w);
}

.lh-fl-piece[data-depth="1"] { z-index: 3; }
.lh-fl-piece[data-depth="2"] { z-index: 4; }
.lh-fl-piece[data-depth="3"] { z-index: 5; }

.lh-fl-drift,
.lh-fl-float { display: block; }

/* the float wrapper is the compositor layer, so the defocus below is
   rasterised once into it and never re-run while the piece moves */
.lh-fl-float { will-change: transform; }

.lh-fl-piece img {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(var(--r)) scaleX(var(--f));
  user-select: none;
  -webkit-user-drag: none;
}

.lh-fl-piece.is-soft img { filter: blur(var(--b)); }

/* centred with inset + auto margins, never translate (GSAP-safe) */
.lh-flight-copy {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: min(36vw, 540px);
  height: max-content;
  margin: auto;
  text-align: center;
}

.lh-flight-title {
  margin: 0;
  color: var(--neutral-900);
  font: 400 min(5.6vw, 84px)/.98 var(--font-display);
  letter-spacing: calc(-.03em + var(--display-fit, 0em));
}

.lh-flight-title .lh-mask {
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

.lh-flight-title .lh-mask:first-child {
  display: block;
  width: max-content;
  margin-inline: auto;
}

.lh-flight-title > i { display: inline-block; }

.lh-flight-text {
  max-width: 330px;
  margin: 26px auto 0;
  color: var(--neutral-900);
  font: 400 13px/1.62 var(--font-text);
}

.lh-text-link.lh-flight-link {
  position: relative;
  inset: auto;
  margin-top: 30px;
  color: var(--sage-700);
  pointer-events: auto;
}

/* 06 — Compliance — three signatures. Flows with the page (no pin, by
   request) but answers the flight: as the product clouds part outward,
   the headline's two halves close inward from the sides, and each row's
   word is carried in from alternating edges by the scroll itself. */
.lh-compliance {
  height: auto;
  padding: 64px 6.944vw 170px;
  background: var(--neutral-100);
  color: var(--neutral-900);
}

.lh-compliance-intro { position: relative; }

.lh-compliance-title {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--neutral-900);
  font: 500 min(6.6vw, 96px)/.94 var(--font-display);
  letter-spacing: calc(-.035em + var(--display-fit, 0em));
}

.lh-cp-line {
  display: block;
  width: max-content;
  will-change: transform;
}

.lh-cp-line--two { align-self: flex-end; }

.lh-compliance-title .lh-mask {
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

/* the lede fills the open corner under the first line, on the second
   line's baseline */
.lh-compliance-lede {
  position: absolute;
  left: 0;
  bottom: .4em;
  width: 290px;
  margin: 0;
  color: var(--neutral-900);
  font: 400 13px/1.62 var(--font-text);
}

.lh-compliance-rows {
  position: relative;
  margin-top: 104px;
}

/* hairlines draw themselves (JS drives --rule; defaults to drawn) */
.lh-compliance-rows::before,
.lh-compliance-row::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--neutral-900);
  transform: scaleX(var(--rule, 1));
  transform-origin: left;
}

.lh-compliance-rows::before { top: 0; }
.lh-compliance-row::after { bottom: 0; }
.lh-compliance-row[data-side="1"]::after { transform-origin: right; }

/* zig-zag: the word sits on the side it arrives from */
.lh-compliance-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4vw;
  min-height: 300px;
  padding: 44px 0;
}

.lh-compliance-row[data-side="1"] { flex-direction: row-reverse; }

.lh-cp-word {
  position: relative;
  flex: none;
  will-change: transform;
}

.lh-compliance-row h3 {
  margin: 0;
  color: var(--sage-700);
  font: 500 min(14vw, 204px)/.86 var(--font-display);
  letter-spacing: calc(-.04em + var(--display-fit, 0em));
  white-space: nowrap;
}

.lh-compliance-row h3 .lh-mask {
  padding-bottom: .16em;
  margin-bottom: -.16em;
}

.lh-compliance-row h3 > i { display: inline-block; }

.lh-cp-detail {
  display: grid;
  flex: 0 0 300px;
  gap: 14px;
  align-content: center;
}

.lh-compliance-index { color: var(--coral-600); }

.lh-compliance-row p {
  max-width: 300px;
  margin: 0;
  color: var(--neutral-900);
  line-height: 1.5;
}

.lh-compliance-status { color: var(--neutral-700); }

/* 06½ — Showreel. At rest (reduced motion / no JS) it is a plain composed
   block: title, then the film as a 16:9 card with its play mark. With motion
   (.is-motion-ready) it becomes a sticky stage — a dial of ticks draws in,
   the card rises between the parted words and opens to full bleed. The
   choreography is lower-home.js; the loop + player hand-off is app.js. */
.lh-reel {
  --reel-ink: var(--neutral-900);
  --reel-line: var(--line-soft);
  display: block;
  padding: 140px 6.944vw 120px;
  background: var(--neutral-100);
  color: var(--neutral-900);
}

.lh-reel-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lh-reel-ring { display: none; }

.lh-reel-ticks,
.lh-reel-sweep {
  fill: none;
  stroke-width: 5;
}

.lh-reel-ticks {
  stroke: currentColor;
  stroke-dasharray: .45 2.55; /* 120 ticks, one every 3° */
  opacity: .3;
}

/* ten coral ticks on the same 3° grid — JS steps them round the dial */
.lh-reel-sweep {
  stroke: var(--coral-600);
  stroke-dasharray: .45 2.55 .45 2.55 .45 2.55 .45 2.55 .45 2.55 .45 2.55 .45 2.55 .45 2.55 .45 2.55 .45 332.55;
}

.lh-reel-kicker {
  order: -2;
  margin: 0 0 22px;
  color: var(--coral-600);
  font: 500 clamp(10px, .8vw, 12px)/1.3 var(--font-text);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lh-reel-title {
  order: -1;
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: .2em;
  margin: 0 0 48px;
  color: var(--neutral-900);
  font: 400 clamp(3.4rem, 8.2vw, 9.4rem)/.92 var(--font-display);
  letter-spacing: calc(-.025em + var(--display-fit, 0em));
  white-space: nowrap;
}

.lh-reel-word { display: inline-block; }
.lh-reel-word .lh-mask { padding-bottom: .06em; }
.lh-reel-slot { display: none; }

.lh-reel-film {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 5px;
  aspect-ratio: 16 / 9;
  background: var(--neutral-900);
  cursor: pointer;
}

.lh-reel-wrap {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
}

.lh-reel-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lh-reel-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 50% 50%, rgb(0 0 0 / .34), rgb(0 0 0 / .08) 72%),
    linear-gradient(to top, rgb(0 0 0 / .45), transparent 26%);
  pointer-events: none;
}

.lh-reel-label {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--coral-600);
  color: var(--neutral-100);
  font: 500 12px/1 var(--font-text);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.85);
  transition: opacity .3s, transform .45s var(--component-ease);
}

.lh-reel-label svg { width: 10px; height: 10px; }

.lh-reel.is-hover .lh-reel-label {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* the play mark — one circle, like the hero's arrow. Centred on the card
   at rest; with motion JS pins it to the slot between the words */
.lh-reel-play {
  position: absolute;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: auto;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--neutral-100) 60%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--neutral-100);
  cursor: pointer;
  pointer-events: auto;
  transition: border-color .4s var(--component-ease);
}

.lh-reel-play::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--coral-600);
  transform: scale(0);
  transition: transform .5s var(--component-ease);
}

.lh-reel-play:hover,
.lh-reel-play:focus-visible { border-color: var(--coral-600); }
.lh-reel-play:hover::before,
.lh-reel-play:focus-visible::before { transform: scale(1); }

.lh-reel-play svg {
  width: 18px;
  height: 18px;
  margin-left: 3px;
}

.lh-reel-play:focus-visible {
  outline: 2px solid var(--coral-300);
  outline-offset: 3px;
}


/* ----- with motion: the sticky stage ----- */
.lower-home.is-motion-ready .lh-reel {
  height: 340vh;
  padding: 0;
}

.lower-home.is-motion-ready .lh-reel-stage {
  position: sticky;
  top: 0;
  display: block;
  height: 100vh;
  overflow: clip;
}

.lower-home.is-motion-ready .lh-reel-ring {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  width: min(84vh, 860px);
  height: min(84vh, 860px);
  margin: auto;
  overflow: visible;
  color: var(--neutral-900);
  pointer-events: none;
  -webkit-mask: conic-gradient(#000 calc(var(--draw, 1) * 1turn), transparent 0);
  mask: conic-gradient(#000 calc(var(--draw, 1) * 1turn), transparent 0);
}

.lower-home.is-motion-ready .lh-reel-film {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: auto;
  border-radius: 0;
  aspect-ratio: auto;
  opacity: 0; /* JS clips it to the card and lifts it in */
}

.lower-home.is-motion-ready .lh-reel-kicker {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: calc(50% - min(42vh, 430px) - 34px);
  margin: 0;
  text-align: center;
}

.lower-home.is-motion-ready .lh-reel-title {
  position: absolute;
  inset: 0;
  height: max-content;
  margin: auto;
  pointer-events: none;
}

.lower-home.is-motion-ready .lh-reel-slot {
  position: relative;
  display: block;
  flex: none;
  width: 2.3em;
  height: 1.3em;
}

.lower-home.is-motion-ready .lh-reel-play {
  inset: auto;
  left: var(--play-x, 50%);
  top: var(--play-y, 50%);
  margin: -38px 0 0 -38px;
  opacity: 0;
  visibility: hidden;
}

.lower-home.is-motion-ready .lh-reel.is-open .lh-reel-play { visibility: visible; }

.lower-home.is-motion-ready .lh-reel:not(.is-open) .lh-reel-film { cursor: default; }

@media (max-width: 760px) {
  .lh-reel { padding: 96px 24px 80px; }
  .lh-reel-title { flex-wrap: wrap; font-size: clamp(44px, 12.4vw, 64px); }
  .lh-reel-word--b { order: 1; }
  .lh-reel-slot { order: 2; }

  .lower-home.is-motion-ready .lh-reel { height: 300vh; }
  .lower-home.is-motion-ready .lh-reel-slot {
    width: calc(100vw - 48px);
    height: calc((100vw - 48px) * .5625);
    margin-top: .35em;
  }
  .lower-home.is-motion-ready .lh-reel-ring {
    width: min(118vw, 72vh);
    height: min(118vw, 72vh);
  }
  .lower-home.is-motion-ready .lh-reel-kicker { top: calc(50% - min(59vw, 36vh) - 28px); }
}

/* 07 — Invitation */
.lh-invitation {
  height: 680px;
  background: var(--neutral-100); /* the footer's paper */
  color: var(--neutral-900);
}

.lh-invitation-frame {
  position: absolute;
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lh-invitation-frame rect {
  fill: none;
  stroke: color-mix(in srgb, var(--sage-700) 30%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.lh-invitation-title {
  position: absolute;
  z-index: 2;
  top: 80px;
  left: 6.667vw;
  color: var(--neutral-900);
  font: 400 calc(min(9.167vw, 132px) - 8px)/calc(.92 * var(--display-lh, 1)) "Switzer", Arial, sans-serif;
  letter-spacing: -.04em;
}

/* Leave room below the baseline for Switzer's descenders with tighter leading. */
.lh-invitation-title .lh-mask {
  display: block;
  width: max-content;
  padding-bottom: .18em;
  margin-bottom: -.18em;
}
.lh-invitation-title .lh-mask:nth-child(2) { margin-left: 9.444vw; }
.lh-invitation-title > i { position: absolute; right: -.2em; bottom: 0; color: var(--coral-600); }

.lh-invitation-copy {
  position: absolute;
  z-index: 2;
  top: 376px;
  left: 61.806vw;
  width: 410px;
}

.lh-invitation-copy p {
  color: var(--neutral-700);
  font-size: 17px;
  line-height: 1.65;
}

.lh-invitation-copy p span { opacity: .48; }
.lh-export-desk { display: block; margin-top: 20px; color: var(--sage-700); letter-spacing: .2em; }

.lh-channels {
  position: absolute;
  z-index: 2;
  left: 6.667vw;
  right: 6.667vw;
  top: 536px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* the channel hairline self-draws left → right (JS drives --rule) */
.lh-channels::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: color-mix(in srgb, var(--sage-700) 30%, transparent);
  transform: scaleX(var(--rule, 1));
  transform-origin: left;
}

.lh-channel {
  display: block;
  min-width: 0;
  padding: 28px 0 0;
  text-align: left;
  overflow: hidden;
}

.lh-channel-label {
  display: block;
  margin-bottom: 8px;
  color: var(--sage-700);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.lh-channel-mask {
  position: relative;
  display: block;
  height: 41px;
  overflow: hidden;
  font: 400 min(2.083vw, 30px)/1.25 var(--font-display);
  white-space: nowrap;
  letter-spacing: var(--display-fit, 0em);
}

.lh-channel-mask span,
.lh-channel-mask i {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  transition: transform .45s var(--ease-out);
}

.lh-channel-mask i {
  color: var(--sage-700);
  font: 500 11px/41px var(--font-text);
  font-style: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
  transform: translateY(100%);
}

.lh-channel:hover .lh-channel-mask span { transform: translateY(-110%); }
.lh-channel:hover .lh-channel-mask i { transform: translateY(0); }
.lh-channel:focus-visible .lh-channel-mask span { transform: translateY(-110%); }
.lh-channel:focus-visible .lh-channel-mask i { transform: translateY(0); }
.lh-channel:focus-visible { outline: 2px solid var(--sage-700); outline-offset: 6px; }

/* Responsive reflow */
@media (max-width: 1000px) {
  .lh-bridge-title { font-size: clamp(68px, 8.5vw, 96px); }
  .lh-catalogue-pack { width: 27vw; }
  .lh-wall--two { left: 43vw; }
  .lh-ledger-panel { padding-inline: 22px; }
  .lh-ledger-number,
  .lh-ledger-panel > p { left: 22px; right: 22px; }
  .lh-cp-detail { flex-basis: 240px; }
  .lh-invitation-copy { left: auto; right: 6.667vw; width: 36vw; }
}

@media (max-width: 760px) {
  /* clip, not hidden — hidden would make .lower-home a scroll container
     and interfere with the scrolling scenes */
  .lower-home { overflow: clip; }

  .lh-bridge { height: 590px; }
  .lh-bridge-title { top: 70px; left: 24px; display: block; font-size: clamp(58px, 17vw, 82px); line-height: .95; }
  .lh-bridge-title .lh-mask { display: block; width: max-content; }
  .lh-catalogue-pack { top: 272px; right: -14px; width: 47vw; height: 290px; }
  .lh-catalogue-button { top: 465px; left: 24px; width: auto; padding: 17px 24px; font-size: 11px; }

  .lh-handoff { padding: 66px 0 36px; }
  .lh-handoff-head { padding-inline: 24px; }
  .lh-handoff-title { font-size: clamp(50px, 14vw, 72px); }
  .lh-handoff-note { position: static; width: auto; margin-top: 28px; font-size: inherit; }
  .lh-handoff-copy { max-width: 300px; }
  /* same side-by-side pose as desktop, scaled up ~1.55x with the outer
     edges running off-screen, so the nugget still leaves the packet mouth.
     No perspective here: with the z push-back, Chrome stops painting the
     packet hand once it overhangs the clipped right edge. */
  .lh-hands { height: 80vw; margin-top: 40px; perspective: none; }
  /* the nugget hand sits lower and nearer the packet than the scaled pose */
  .lh-hand--left { left: -22vw; top: 10.5vw; width: 76.25vw; }
  .lh-hand--right { right: -31.25vw; top: 7.8vw; width: 81.25vw; }

  .lh-colophon { height: 475px; }
  .lh-colophon-title { font-size: clamp(46px, 13.2vw, 72px); }
  .lh-wall--one { top: 67px; left: 24px; }
  .lh-wall--two { top: 119px; left: 24px; font-size: 1em; }
  .lh-wall--three { top: 171px; left: 24px; white-space: normal; }
  /* on the gutter, under the title — not floating off a ragged indent */
  .lh-colophon-side { top: 265px; left: 24px; right: 24px; width: auto; }
  .lh-colophon-side p { max-width: 34ch; font-size: 14px; }
  .lh-colophon-vertical { display: none; }

  .lh-gallery { height: 560px; }
  .lh-gallery-lift { border-radius: 8px; }

  .lh-ledger { display: block; height: auto; }
  .lh-ledger-panel { height: 460px; padding: 30px 24px; }
  .lh-ledger-panel:hover { height: 460px; transform: none; }
  .lh-ledger-number { left: 24px; top: 112px !important; font-size: min(58vw, 230px) !important; }
  .lh-ledger-year { top: 64px !important; }
  .lh-ledger-year-prefix { font-size: 52px !important; }
  .lh-ledger-year-main { font-size: min(58vw, 230px) !important; }
  .lh-ledger-panel > p { left: 24px; right: 24px; bottom: 30px; max-width: 300px; }

  /* phones: one flowing column — the sentence on three lines, the notes
     and the paragraph straight under it (no fixed slots, no bullets) */
  .lh-manifesto { height: auto; min-height: 0; }
  .lh-manifesto-stage { position: relative; display: flex; flex-direction: column; align-items: flex-start; height: auto; min-height: 0; padding: 64px 24px 88px; }
  .lh-manifesto-probe { display: none; }
  .lh-manifesto-title { position: static; display: flex; flex-wrap: wrap; gap: .04em .2em; font-size: clamp(46px, 14vw, 66px); }
  .lh-mf-word,
  .lh-mf-period { position: static; }
  /* js moves the period into the last word, so it can't wrap alone */
  .lh-mf-word .lh-mf-period { display: inline-block; margin-left: 0; }
  .lh-annotation { display: none; }
  .lh-manifesto-copy { position: static; width: auto; max-width: 34ch; margin-top: 36px; font-size: 15px; line-height: 1.6; }
  .lh-text-link { position: static; margin-top: 32px; }

  /* flight flows on phones: sucuk cloud above the copy, nuggets below */
  .lh-flight { height: auto; min-height: 0; margin-top: 0; }
  .lh-flight-stage { position: relative; height: 920px; min-height: 0; }
  .lh-fl-piece--a, .lh-fl-piece--b, .lh-fl-piece--h, .lh-fl-piece--i,
  .lh-fl-piece--o, .lh-fl-piece--p { display: none; }
  /* the desktop pose rides inline custom props, so phones override the
     real properties (later + equal specificity wins) */
  .lh-fl-piece--c { left: 64vw; top: 23%; width: 12vw; }
  .lh-fl-piece--d { left: -9vw; top: 2%; width: 30vw; }
  .lh-fl-piece--e { left: 62vw; top: 3%; width: 24vw; }
  .lh-fl-piece--f { left: 12vw; top: 7%; width: 52vw; }
  .lh-fl-piece--g { left: -16vw; top: 19%; width: 34vw; }
  .lh-fl-piece--j { left: 22vw; top: 73%; width: 11vw; }
  .lh-fl-piece--k { left: 6vw; top: 80%; width: 26vw; }
  .lh-fl-piece--l { left: 82vw; top: 72%; width: 24vw; }
  .lh-fl-piece--m { left: 38vw; top: 75%; width: 50vw; }
  .lh-fl-piece--n { left: 74vw; top: 88%; width: 36vw; }
  .lh-fl-piece--g.is-soft img,
  .lh-fl-piece--n.is-soft img { filter: blur(10px); }
  .lh-flight-copy { width: calc(100% - 48px); }
  .lh-flight-title { font-size: clamp(44px, 12.5vw, 60px); }
  .lh-flight-text { margin-top: 20px; font-size: 14px; line-height: 1.55; }

  .lh-compliance { padding: 88px 24px 96px; }
  /* larger, and the lines wrap on the gutter instead of the desktop's
     right-hung second line, which can't fit a phone at this size */
  .lh-compliance-title { font-size: clamp(42px, 12vw, 62px); }
  .lh-cp-line { width: auto; max-width: 100%; }
  .lh-cp-line--two { align-self: flex-start; }
  .lh-compliance-title .lh-mask { max-width: 100%; }
  .lh-compliance-lede { position: static; width: auto; max-width: 300px; margin-top: 22px; font-size: 14px; line-height: 1.55; }
  .lh-compliance-rows { margin-top: 56px; }
  .lh-compliance-row,
  .lh-compliance-row[data-side="1"] { flex-direction: column; align-items: flex-start; gap: 22px; min-height: 0; padding: 36px 0 32px; }
  .lh-compliance-row h3 { font-size: clamp(72px, 23vw, 100px); }
  .lh-cp-detail { flex: none; width: 100%; gap: 10px; }
  .lh-compliance-row p { font-size: 10px; }

  /* stacked in flow, so the copy keeps a fixed gap under the headline
     however tall the title renders */
  .lh-invitation { height: auto; padding: 64px 34px 46px; }
  .lh-invitation-frame rect { x: 14px; y: 10px; width: calc(100% - 28px); height: calc(100% - 24px); }
  .lh-invitation-title { position: relative; top: auto; left: auto; width: max-content; font-size: clamp(42px, 14.4vw, 74px); }
  .lh-invitation-title .lh-mask:nth-child(2) { margin-left: 0; }
  .lh-invitation-copy { position: relative; top: auto; left: auto; right: auto; width: auto; margin-top: 32px; }
  .lh-invitation-copy p { font-size: 14px; line-height: 1.55; }
  .lh-export-desk { font-size: 10px; }
  .lh-channels { position: relative; top: auto; bottom: auto; left: auto; right: auto; margin-top: 56px; grid-template-columns: 1fr; }
  .lh-channel { padding: 10px 0 2px; border-bottom: 1px solid color-mix(in srgb, var(--sage-700) 20%, transparent); }
  .lh-channel-label { margin-bottom: 2px; font-size: 10px; }
  .lh-channel-mask { height: 28px; font-size: 19px; }
  .lh-channel-mask i { line-height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .lh-catalogue-pack,
  .lh-colophon,
  .lh-ledger-panel,
  .lh-ledger-number,
  .lh-mf-word,
  .lh-mf-period,
  .lh-compliance-row { clip-path: none !important; }
  .lh-invitation-copy p span { opacity: 1 !important; }
  .lh-ledger-panel,
  .lh-channel-mask span,
  .lh-channel-mask i,
  .lh-text-link > i { transition-duration: .3s !important; }
}