/*
 * LOOP Food — Scene V4
 *
 * Final art-direction layer for the current markup. The composition borrows only
 * the transferable grammar of the inspected reference: solid colour worlds,
 * one dominant protagonist, generous negative space, restrained controls and a
 * long pinned process scene. No reference assets or source code are reproduced.
 * Load after planetono.css.
 */

:root {
  --v4-ink: #11100d;
  --v4-cream: #f8f1df;
  --v4-yellow: #f4c63f;
  --v4-coral: #d9663c;
  --v4-blue: #8fb8c6;
  --v4-green: #afc56b;
  --v4-gutter: clamp(1.25rem, 3.2vw, 4rem);
  --v4-header: clamp(4.5rem, 8.8vh, 6rem);
  --v4-display: clamp(4.125rem, 5.45vw, 6.25rem);
  --v4-rule: 1.5px solid var(--v4-ink);
  --v4-ease: cubic-bezier(.22, .8, .2, 1);
}

/* Persistent navigation: one quiet global bar, not a floating card. */
.site-header.r-hero-navigation {
  position: fixed;
  inset: 0 0 auto;
  left: 0;
  z-index: 100;
  width: 100%;
  height: var(--v4-header);
  transform: none;
  color: var(--v4-ink);
  background: var(--v4-cream);
  pointer-events: none;
}

.site-header__bar {
  grid-template-columns: minmax(9rem, 1fr) auto minmax(9rem, 1fr);
  width: 100%;
  height: var(--v4-header);
  min-height: 0;
  margin: 0;
  padding-inline: var(--v4-gutter);
  border: 0;
  border-bottom: var(--v4-rule);
  border-radius: 0;
  color: var(--v4-ink);
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
}

.wordmark,
.primary-nav a,
.primary-nav a[aria-current="location"],
.menu-toggle {
  color: var(--v4-ink);
}

.wordmark__food,
.primary-nav a[aria-current="location"] {
  color: var(--v4-ink);
}

.primary-nav a[aria-current="location"] {
  text-decoration: underline;
  text-decoration-color: var(--v4-coral);
  text-decoration-thickness: 2px;
  text-underline-offset: .35rem;
}

.primary-nav a {
  font-size: .76rem;
  font-weight: 650;
}

.header-cta {
  min-height: 2.75rem;
  padding-inline: 1rem;
  border: var(--v4-rule);
  border-radius: 999px;
  color: var(--v4-cream);
  background: var(--v4-ink);
}

.header-cta:hover,
.header-cta:focus-visible {
  color: var(--v4-ink);
  background: var(--v4-yellow);
}

.menu-toggle {
  border: var(--v4-rule);
  border-radius: 999px;
  background: transparent;
}

/* -------------------------------------------------------------------------- */
/* HERO — one clear micro-world.                                               */
/* -------------------------------------------------------------------------- */

.hero.comp-frame {
  --hero-world: #cc9d27;
  --hero-accent: var(--v4-coral);
  position: relative;
  height: 100svh;
  min-height: 43rem;
  overflow: hidden;
  color: var(--v4-ink);
  background: var(--hero-world);
  isolation: isolate;
  transition: background-color 680ms var(--v4-ease);
}

.hero[data-hero-state="0"] {
  --hero-world: #cc9d27;
  --hero-accent: var(--v4-coral);
}

.hero[data-hero-state="1"] {
  --hero-world: #cc9d27;
  --hero-accent: var(--v4-cream);
}

.hero[data-hero-state="2"] {
  --hero-world: #cc9d27;
  --hero-accent: var(--v4-yellow);
}

/* Remove every photographic/decorative remnant from the abandoned composition. */
.hero::before,
.hero::after,
.hero__charcoal.r-hero-charcoal-field,
.hero__kitchen.r-kitchen-pass-background,
.hero__rail.r-order-ticket-rail,
.hero__division {
  display: none !important;
}

.hero__world-stage {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 66.5%;
  aspect-ratio: 16 / 9;
  margin: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 0 82%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 82%, transparent 100%);
  pointer-events: none;
}

.hero__world-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.hero__signal-card {
  position: absolute;
  z-index: 16;
  top: calc(var(--v4-header) + clamp(3.4rem, 8vh, 5.5rem));
  left: var(--v4-gutter);
  display: grid;
  align-content: center;
  width: clamp(16rem, 23vw, 27rem);
  min-height: clamp(11.5rem, 21vh, 14rem);
  padding: clamp(1.45rem, 2.2vw, 2.25rem);
  border: var(--v4-rule);
  color: var(--v4-ink);
  background: var(--v4-cream);
  box-shadow: .55rem .55rem 0 var(--v4-ink);
  clip-path: polygon(3% 8%, 18% 4%, 31% 7%, 46% 2%, 60% 6%, 75% 3%, 91% 9%, 97% 24%, 94% 40%, 98% 56%, 93% 74%, 97% 90%, 80% 96%, 64% 93%, 49% 98%, 34% 94%, 17% 97%, 5% 88%, 8% 71%, 2% 55%, 7% 39%, 2% 23%);
  transform: rotate(-2deg);
  pointer-events: none;
}

.hero__signal-card > span,
.hero__signal-card > small {
  font-size: clamp(.58rem, .62vw, .72rem);
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1.2;
  text-transform: uppercase;
}

.hero__signal-card > strong {
  margin: .65rem 0 .8rem;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.65vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -.065em;
  line-height: .88;
}

.hero__signal-card > small {
  color: #6b645a;
}

.hero__copy.r-hero-copy {
  position: absolute;
  z-index: 20;
  top: calc(var(--v4-header) + clamp(3.2rem, 9vh, 7rem));
  right: var(--v4-gutter);
  left: auto;
  display: flex;
  justify-content: flex-start;
  width: min(30.5vw, 36rem);
  height: auto;
  padding: 0;
  color: var(--v4-ink);
  pointer-events: none;
}

.hero .eyebrow {
  max-width: 28rem;
  margin: 0 0 clamp(1rem, 2vh, 1.5rem);
  color: var(--v4-ink);
  font-size: clamp(.66rem, .76vw, .82rem);
  font-weight: 700;
  letter-spacing: .085em;
}

.hero .eyebrow::before {
  display: none;
}

.hero .eyebrow span {
  display: inline-flex;
  padding: .38rem .58rem;
  border: var(--v4-rule);
  border-radius: 999px;
  color: var(--v4-ink);
  white-space: nowrap;
}

.hero h1 {
  max-width: 8ch;
  margin: 0;
  color: var(--v4-ink);
  font-size: var(--v4-display);
  font-weight: 750;
  letter-spacing: -.066em;
  line-height: .88;
}

.hero h1 em {
  color: var(--v4-ink);
  font-style: normal;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
}

.hero__lede {
  max-width: 31rem;
  margin: clamp(1.2rem, 2.5vh, 1.75rem) 0 0;
  color: var(--v4-ink);
  font-size: clamp(.98rem, 1.05vw, 1.16rem);
  font-weight: 550;
  line-height: 1.45;
}

/* Robot and pizza share the centre without clipping or intersecting each other. */
.hero__robot.r-robot-reference-zone,
.hero[data-hero-state="1"] .hero__robot.r-robot-reference-zone,
.hero[data-hero-state="2"] .hero__robot.r-robot-reference-zone {
  position: absolute;
  z-index: 12;
  top: calc(var(--v4-header) + clamp(1rem, 2vh, 1.5rem));
  left: 32.5%;
  display: grid;
  place-items: end center;
  width: 33.5%;
  height: calc(100% - var(--v4-header) - 2rem);
  padding: 0;
  opacity: 1;
  transition: left 680ms var(--v4-ease);
}

.hero[data-hero-state="1"] .hero__robot.r-robot-reference-zone {
  left: 32.75%;
}

.hero[data-hero-state="2"] .hero__robot.r-robot-reference-zone {
  left: 32.25%;
}

.robot-rig {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1084 / 1451;
}

.hero__robot-shadow {
  bottom: 1.4%;
  left: 23%;
  width: 54%;
  height: 2.2%;
  border: 0;
  background: rgba(17, 16, 13, .22);
}

.robot-face {
  border: 0;
  background:
    radial-gradient(ellipse at 25% 18%, rgba(255, 255, 255, .2) 0 3%, rgba(255, 255, 255, .06) 12%, transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, .14) 0, rgba(255, 255, 255, .025) 27%, transparent 48%),
    #080807;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -1rem 2.4rem rgba(0, 0, 0, .38);
}

.robot-eyes i {
  border-color: var(--v4-cream);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  filter: none;
}

.robot-mouth {
  border-color: var(--v4-cream);
  filter: none;
}

.hero__pizza.r-hero-pizza,
.hero[data-hero-state="0"] .hero__pizza.r-hero-pizza,
.hero[data-hero-state="1"] .hero__pizza.r-hero-pizza,
.hero[data-hero-state="2"] .hero__pizza.r-hero-pizza {
  position: absolute;
  z-index: 11;
  top: 58%;
  left: 14%;
  width: min(18vw, 21rem);
  height: auto;
  aspect-ratio: 1376 / 768;
  margin: 0;
  padding: 0;
  opacity: 1;
  scale: .944;
  transition: top 680ms var(--v4-ease), left 680ms var(--v4-ease), scale 680ms var(--v4-ease);
}

.hero[data-hero-state="1"] .hero__pizza.r-hero-pizza {
  top: 55.5%;
  left: 13.5%;
  width: min(18vw, 21rem);
  scale: 1;
}

.hero[data-hero-state="2"] .hero__pizza.r-hero-pizza {
  top: 60%;
  left: 14.5%;
  width: min(18vw, 21rem);
  scale: .917;
}

.hero__pizza img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.hero__pizza-shadow {
  right: 10%;
  bottom: 1%;
  width: 80%;
  height: 10%;
  border: 0;
  background: rgba(17, 16, 13, .2);
}

/* Only the active operational label is visible; no dangling receipt collage. */
.hero__tickets {
  position: absolute;
  z-index: 18;
  top: 52%;
  left: var(--v4-gutter);
  width: clamp(9.5rem, 12vw, 12.5rem);
  height: 5.25rem;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.ticket,
.ticket--capacity,
.ticket--flow,
.ticket--return {
  position: absolute;
  inset: 0 auto auto 0;
  display: none;
  align-content: center;
  width: 100%;
  min-height: 0;
  padding: .8rem .9rem;
  border: var(--v4-rule);
  border-top: .35rem solid var(--hero-accent);
  border-radius: .55rem;
  clip-path: none;
  color: var(--v4-ink);
  background: var(--v4-cream);
  box-shadow: 4px 4px 0 var(--v4-ink);
  opacity: 1;
  transform: none;
}

.ticket.is-active,
.ticket[data-hero-active="true"] {
  display: grid;
}

.ticket::before {
  display: none;
}

.ticket__time {
  margin: 0 0 .32rem;
  color: #6b645a;
  font-size: .58rem;
}

.ticket strong {
  margin: 0;
  font-size: clamp(.76rem, .82vw, .9rem);
  line-height: 1.05;
}

.ticket > span:last-child {
  display: none;
}

/* State controls stay visually quiet at the bottom-right. */
.hero__actions.r-hero-actions {
  position: absolute;
  z-index: 25;
  top: auto;
  right: var(--v4-gutter);
  bottom: clamp(1.5rem, 4vh, 3rem);
  left: auto;
  display: flex;
  flex-direction: column;
  width: min(30.5vw, 36rem);
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--v4-ink);
  background: transparent;
  box-shadow: none;
}

.hero__state {
  order: -1;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin: 0 0 .9rem;
  padding: 0 0 .7rem;
  border: 0;
  border-bottom: 1px solid rgba(17, 16, 13, .42);
}

.hero__state-count {
  display: block;
  flex: 0 0 auto;
  margin: 0;
  color: var(--v4-ink);
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .08em;
  line-height: 1;
}

.hero__state ol {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  gap: .4rem;
  margin: 0;
  padding: 0;
  color: rgba(17, 16, 13, .82);
  font-size: .59rem;
}

.hero__state button {
  width: auto;
  min-height: 2.75rem;
  padding: .38rem .62rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: inherit;
  text-align: center;
}

.hero__state button[aria-current="true"],
.hero__state button[aria-current="step"] {
  border-color: var(--v4-ink);
  color: var(--hero-world);
  background: var(--v4-ink);
}

.hero__state button[aria-current="true"]::before,
.hero__state button[aria-current="step"]::before {
  content: none;
}

.hero__cta-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hero .primary-cta {
  min-height: 3.25rem;
  border: var(--v4-rule);
  border-radius: 999px;
  color: var(--v4-cream);
  background: var(--v4-ink);
}

.hero .text-link {
  color: var(--v4-ink);
}

/* -------------------------------------------------------------------------- */
/* METHOD — four measured scroll acts with one sticky 100svh stage.            */
/* -------------------------------------------------------------------------- */

.method-section {
  --method-world: var(--v4-yellow);
  position: relative;
  color: var(--v4-ink);
  background: var(--method-world);
  transition: background-color 620ms var(--v4-ease);
}

.method-section[data-method-stage="0"] { --method-world: var(--v4-yellow); }
.method-section[data-method-stage="1"] { --method-world: var(--v4-blue); }
.method-section[data-method-stage="2"] { --method-world: var(--v4-green); }
.method-section[data-method-stage="3"] { --method-world: var(--v4-coral); }

.motion-ready .method-section {
  height: 420svh;
}

.method-stage,
.motion-ready .method-stage {
  position: relative;
  display: block;
  width: 100%;
  height: 100svh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  color: var(--v4-ink);
  background: var(--method-world);
  transition: background-color 620ms var(--v4-ease);
}

.motion-ready .method-stage {
  position: sticky;
  top: 0;
}

.method-stage::before,
.method-stage::after {
  display: none;
}

.method-topline {
  position: absolute;
  z-index: 20;
  top: calc(var(--v4-header) + clamp(.8rem, 2vh, 1.5rem));
  right: var(--v4-gutter);
  left: var(--v4-gutter);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0 .7rem;
  border-bottom: 1px solid rgba(17, 16, 13, .42);
}

.method-topline .section-kicker,
.method-topline > span {
  margin: 0;
  color: var(--v4-ink);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.method-copy,
.motion-ready .method-copy {
  position: absolute;
  z-index: 12;
  top: 50%;
  left: var(--v4-gutter);
  display: block;
  width: min(33vw, 37rem);
  height: min(62vh, 35rem);
  transform: translateY(-45%);
  pointer-events: none;
}

.method-beat,
.motion-ready .method-beat {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 320ms ease;
}

.method-beat.is-active,
.motion-ready .method-beat.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.method-beat__index,
.method-beat h3,
.method-beat > p:not(.method-beat__index),
.method-beat__note {
  position: static;
  width: auto;
}

.method-beat__index {
  margin: 0 0 clamp(.8rem, 1.6vh, 1.2rem);
  color: var(--v4-ink);
  font-size: clamp(.68rem, .75vw, .8rem);
  font-weight: 750;
  letter-spacing: .09em;
}

.method-beat h3 {
  max-width: 7.2ch;
  margin: 0;
  color: var(--v4-ink);
  font-size: var(--v4-display);
  font-weight: 750;
  letter-spacing: -.066em;
  line-height: .88;
}

.method-beat h3 em {
  color: var(--v4-ink);
  font-style: normal;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
}

.method-beat > p:not(.method-beat__index) {
  max-width: 27rem;
  margin: clamp(1rem, 2vh, 1.5rem) 0 0;
  color: var(--v4-ink);
  font-size: clamp(.9rem, 1vw, 1.08rem);
  font-weight: 550;
  line-height: 1.45;
}

.method-beat__note {
  margin-top: .85rem;
  color: var(--v4-ink);
  font-size: .65rem;
  font-weight: 750;
  letter-spacing: .08em;
}

.pizza-stage,
.motion-ready .pizza-stage {
  position: absolute;
  z-index: 8;
  top: 51%;
  left: 64%;
  width: min(61svh, 43vw, 41rem);
  margin: 0;
  transform: translate(-50%, -50%);
}

.pizza-stage__orbit {
  display: none;
}

.pizza-stack {
  margin: 0;
  transform: rotate(var(--pizza-rotation, 0deg));
  transform-origin: 50% 50%;
}

.pizza-state {
  opacity: var(--pizza-state-opacity, 0);
  transform: translate3d(0, var(--pizza-state-y, 0), 0) scale(var(--pizza-state-scale, 1));
  transition: opacity 160ms linear;
  will-change: transform, opacity;
}

.pizza-state.is-active {
  opacity: var(--pizza-state-opacity, 1);
}

.ingredient-field {
  display: none;
}

.pizza-stage__caption {
  position: absolute;
  right: 2%;
  bottom: 3%;
  display: inline-flex;
  width: auto;
  margin: 0;
  padding: .62rem .78rem;
  border: var(--v4-rule);
  border-radius: 999px;
  color: var(--v4-ink);
  background: var(--v4-cream);
  box-shadow: 3px 3px 0 var(--v4-ink);
  font-size: .66rem;
  font-weight: 700;
}

.status-dot {
  border: 1px solid var(--v4-ink);
  background: var(--v4-coral);
}

.method-nav {
  position: absolute;
  z-index: 20;
  right: auto;
  bottom: clamp(1rem, 2.8vh, 2.1rem);
  left: var(--v4-gutter);
  width: min(33vw, 37rem);
  margin: 0;
}

.method-nav ol {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(17, 16, 13, .45);
}

.method-nav a {
  min-height: 3.25rem;
  gap: .45rem;
  padding: .72rem .2rem;
  color: #15130f;
  font-size: .7rem;
}

.method-nav a span {
  font-size: .6rem;
}

.method-nav a[aria-current="step"] {
  color: var(--v4-ink);
}

.method-nav a[aria-current="step"] strong {
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .32rem;
}

.method-progress {
  height: 3px;
}

.method-progress span {
  background: var(--v4-ink);
}

/* Medium desktop / tablet landscape. */
@media (max-width: 73.75rem) {
  :root {
    --v4-header: 4.75rem;
  }

  .hero__copy.r-hero-copy,
  .hero__actions.r-hero-actions {
    width: 34%;
  }

  .hero h1,
  .method-beat h3 {
    font-size: clamp(3.2rem, 5.35vw, 4.8rem);
  }

  .hero__robot.r-robot-reference-zone,
  .hero[data-hero-state="1"] .hero__robot.r-robot-reference-zone,
  .hero[data-hero-state="2"] .hero__robot.r-robot-reference-zone {
    left: 4%;
    width: 58%;
  }

  .hero__signal-card {
    display: none;
  }

  .hero__tickets {
    display: none;
  }

  .hero__cta-row {
    flex-wrap: wrap;
  }

  .hero__pizza.r-hero-pizza,
  .hero[data-hero-state="0"] .hero__pizza.r-hero-pizza,
  .hero[data-hero-state="1"] .hero__pizza.r-hero-pizza,
  .hero[data-hero-state="2"] .hero__pizza.r-hero-pizza {
    left: 13%;
    width: 17%;
  }

  .pizza-stage,
  .motion-ready .pizza-stage {
    left: 66%;
    width: min(56svh, 43vw);
  }
}

/* True mobile/tablet recomposition; never a cropped desktop layout. */
@media (max-width: 53.75rem) {
  :root {
    --v4-gutter: clamp(1rem, 4.8vw, 2rem);
    --v4-header: 4.5rem;
  }

  .site-header__bar {
    grid-template-columns: 1fr auto auto;
    gap: .45rem;
    padding-inline: var(--v4-gutter);
  }

  .primary-nav {
    display: none;
  }

  .primary-nav.is-open {
    position: fixed;
    top: var(--v4-header);
    right: 0;
    left: 0;
    display: flex;
    max-height: calc(100dvh - var(--v4-header));
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: .6rem var(--v4-gutter) 1rem;
    border: 0;
    border-bottom: var(--v4-rule);
    border-radius: 0;
    color: var(--v4-ink);
    background: var(--v4-cream);
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .primary-nav.is-open a {
    display: flex;
    align-items: center;
    min-height: 3rem;
    border-bottom: 1px solid rgba(17, 16, 13, .18);
    color: var(--v4-ink);
  }

  .menu-toggle {
    display: inline-flex;
  }

  .hero.comp-frame {
    height: max(100svh, 56rem);
    min-height: 56rem;
  }

  .hero__world-stage {
    display: none;
  }

  .hero__signal-card {
    display: none;
  }

  .hero__copy.r-hero-copy {
    top: calc(var(--v4-header) + 1.55rem);
    right: var(--v4-gutter);
    left: var(--v4-gutter);
    width: auto;
    height: auto;
  }

  .hero h1 {
    max-width: 8ch;
    font-size: clamp(3rem, 10.8vw, 5rem);
  }

  .hero__lede {
    max-width: 31rem;
    margin-top: .9rem;
    font-size: .9rem;
  }

  .hero__robot.r-robot-reference-zone,
  .hero[data-hero-state="1"] .hero__robot.r-robot-reference-zone,
  .hero[data-hero-state="2"] .hero__robot.r-robot-reference-zone {
    top: 39%;
    left: 43%;
    width: 54%;
    height: 43%;
  }

  .hero__pizza.r-hero-pizza,
  .hero[data-hero-state="0"] .hero__pizza.r-hero-pizza,
  .hero[data-hero-state="1"] .hero__pizza.r-hero-pizza,
  .hero[data-hero-state="2"] .hero__pizza.r-hero-pizza {
    top: 64%;
    left: 3%;
    width: 34%;
  }

  .hero__tickets {
    display: block;
    top: 48%;
    left: var(--v4-gutter);
    width: clamp(8.25rem, 32vw, 10.5rem);
    height: 4.5rem;
  }

  .ticket,
  .ticket--capacity,
  .ticket--flow,
  .ticket--return {
    padding: .65rem .72rem;
    box-shadow: 3px 3px 0 var(--v4-ink);
  }

  .hero__actions.r-hero-actions {
    right: var(--v4-gutter);
    bottom: 1.25rem;
    left: var(--v4-gutter);
    width: auto;
  }

  .hero__state {
    margin-bottom: .65rem;
  }

  .hero__state ol {
    justify-content: space-between;
  }

  .hero__cta-row {
    flex-wrap: wrap;
  }

  .method-topline {
    top: calc(var(--v4-header) + .7rem);
  }

  .method-copy,
  .motion-ready .method-copy {
    top: auto;
    right: var(--v4-gutter);
    bottom: 4.7rem;
    left: var(--v4-gutter);
    width: auto;
    height: 39%;
    transform: none;
  }

  .method-beat,
  .motion-ready .method-beat {
    justify-content: flex-end;
  }

  .method-beat h3 {
    max-width: 8.5ch;
    font-size: clamp(2.55rem, 10.8vw, 4.4rem);
  }

  .method-beat h3 br {
    display: none;
  }

  .method-beat > p:not(.method-beat__index) {
    max-width: 34rem;
    margin-top: .75rem;
    font-size: clamp(.78rem, 2.6vw, .94rem);
    line-height: 1.35;
  }

  .method-beat__note {
    display: none;
  }

  .pizza-stage,
  .motion-ready .pizza-stage {
    top: 28%;
    left: 50%;
    width: min(58vw, 34svh, 24rem);
  }

  .pizza-stage__caption {
    right: -4%;
    bottom: 0;
    padding: .48rem .62rem;
    font-size: .7rem;
  }

  .method-nav {
    right: var(--v4-gutter);
    bottom: .6rem;
    left: var(--v4-gutter);
    width: auto;
  }

  .method-nav a {
    flex-direction: column;
    align-items: flex-start;
    min-height: 3.4rem;
    gap: .22rem;
    padding: .58rem .12rem;
    font-size: .72rem;
  }
}

@media (max-width: 30rem) {
  .site-header__bar {
    padding-inline: .85rem;
  }

  .wordmark__loop {
    font-size: 1rem;
  }

  .wordmark__food {
    display: none;
  }

  .menu-toggle {
    min-height: 2.75rem;
    padding-inline: .65rem;
  }

  .header-cta {
    min-height: 2.75rem;
    padding-inline: .72rem;
    font-size: .75rem;
  }

  .hero.comp-frame {
    height: max(100svh, 52rem);
    min-height: 52rem;
  }

  .hero .eyebrow {
    margin-bottom: .72rem;
    font-size: .56rem;
  }

  .hero .eyebrow span {
    padding: .28rem .42rem;
  }

  .hero h1 {
    font-size: clamp(2.8rem, 14vw, 3.75rem);
  }

  .hero__lede {
    font-size: .82rem;
    line-height: 1.38;
  }

  .hero__robot.r-robot-reference-zone,
  .hero[data-hero-state="1"] .hero__robot.r-robot-reference-zone,
  .hero[data-hero-state="2"] .hero__robot.r-robot-reference-zone {
    top: 40%;
    left: 34%;
    width: 55%;
    height: 42%;
  }

  .hero__pizza.r-hero-pizza,
  .hero[data-hero-state="0"] .hero__pizza.r-hero-pizza,
  .hero[data-hero-state="1"] .hero__pizza.r-hero-pizza,
  .hero[data-hero-state="2"] .hero__pizza.r-hero-pizza {
    top: 66%;
    left: 3%;
    width: 32%;
    scale: 1;
  }

  .hero__tickets {
    top: 49%;
    width: 7.8rem;
  }

  .ticket strong {
    font-size: .7rem;
  }

  .hero__state {
    gap: .45rem;
  }

  .hero__state ol {
    gap: .12rem;
  }

  .hero__state button {
    min-height: 2.75rem;
    padding-inline: .42rem;
    font-size: .7rem;
    letter-spacing: .025em;
  }

  .hero__cta-row {
    gap: .75rem;
  }

  .hero .primary-cta {
    min-height: 3rem;
    padding-inline: .9rem;
    font-size: .72rem;
  }

  .hero .text-link {
    font-size: .65rem;
  }

  .method-topline > span {
    display: none;
  }

  .method-copy,
  .motion-ready .method-copy {
    height: 41%;
  }

  .method-beat h3 {
    font-size: clamp(2.35rem, 12vw, 3.3rem);
  }

  .method-nav a strong {
    max-width: 9ch;
  }
}

/* Compact phones: keep the promise, primary CTA and chef in the first view. */
@media (max-width: 43.75rem) and (max-height: 42rem) {
  .hero.comp-frame {
    height: 40rem;
    min-height: 40rem;
  }

  .hero__copy.r-hero-copy {
    top: calc(var(--v4-header) + .72rem);
  }

  .hero .eyebrow {
    margin-bottom: .55rem;
  }

  .hero h1 {
    max-width: 10ch;
    font-size: clamp(2.25rem, 9.8vw, 2.95rem);
    line-height: .9;
  }

  .hero .eyebrow {
    margin-bottom: .42rem;
  }

  .hero__lede {
    max-width: 34ch;
    margin-top: .48rem;
    font-size: .78rem;
    line-height: 1.32;
  }

  .hero__tickets,
  .hero__pizza.r-hero-pizza,
  .hero__state {
    display: none;
  }

  .hero__actions.r-hero-actions {
    top: 22rem;
    right: auto;
    bottom: auto;
    left: var(--v4-gutter);
    width: auto;
  }

  .hero__cta-row {
    display: block;
  }

  .hero .text-link {
    display: none;
  }

  .hero__robot.r-robot-reference-zone,
  .hero[data-hero-state="1"] .hero__robot.r-robot-reference-zone,
  .hero[data-hero-state="2"] .hero__robot.r-robot-reference-zone {
    top: 56.5%;
    left: 54%;
    width: 46%;
    height: 40%;
  }
}

/* Portrait tablets need a deliberate two-column scene before desktop width. */
@media (orientation: portrait) and (min-width: 53.8125rem) and (max-width: 80rem) and (min-height: 42.0625rem) {
  .hero.comp-frame {
    height: min(100svh, 68rem);
    min-height: 48rem;
  }

  .hero__copy.r-hero-copy {
    top: calc(var(--v4-header) + clamp(2rem, 5vh, 4rem));
    right: auto;
    left: var(--v4-gutter);
    width: 40%;
    height: auto;
  }

  .hero h1 {
    max-width: 7.2ch;
    font-size: clamp(3rem, 5.2vw, 4.3rem);
  }

  .hero__lede {
    max-width: 31ch;
    font-size: clamp(.95rem, 1.2vw, 1.1rem);
  }

  .hero__robot.r-robot-reference-zone,
  .hero[data-hero-state="1"] .hero__robot.r-robot-reference-zone,
  .hero[data-hero-state="2"] .hero__robot.r-robot-reference-zone {
    top: calc(var(--v4-header) + 1.5rem);
    right: var(--v4-gutter);
    left: auto;
    width: 48%;
    height: 78%;
  }

  /* Keep the portrait-tablet chef sized by its available width.  A fixed
     stage height otherwise makes the 3:4 rig wider than the stage on tall
     tablets, cropping the hat/earpiece at the viewport edge. */
  .hero__robot.r-robot-reference-zone .robot-rig {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }

  .hero__signal-card,
  .hero__tickets,
  .hero__pizza.r-hero-pizza {
    display: none;
  }

  .hero__actions.r-hero-actions {
    top: auto;
    right: auto;
    bottom: max(1.5rem, env(safe-area-inset-bottom));
    left: var(--v4-gutter);
    width: 40%;
    height: auto;
    padding: 0;
  }
}

/* Short tablets/phones in landscape need a dedicated two-column hero. */
@media (min-width: 43.8125rem) and (max-width: 53.75rem) and (max-height: 42rem) {
  .hero.comp-frame {
    height: 30rem;
    min-height: 30rem;
  }

  .hero__copy.r-hero-copy {
    top: calc(var(--v4-header) + .8rem);
    right: auto;
    left: var(--v4-gutter);
    width: 46%;
  }

  .hero h1 {
    max-width: 8ch;
    font-size: clamp(2.65rem, 5vw, 3.4rem);
  }

  .hero__lede {
    max-width: 32ch;
    margin-top: .55rem;
    font-size: .86rem;
  }

  .hero__tickets,
  .hero__pizza.r-hero-pizza,
  .hero__state {
    display: none;
  }

  .hero__actions.r-hero-actions {
    top: 20.15rem;
    right: auto;
    bottom: auto;
    left: var(--v4-gutter);
    width: 46%;
  }

  .hero__robot.r-robot-reference-zone,
  .hero[data-hero-state="1"] .hero__robot.r-robot-reference-zone,
  .hero[data-hero-state="2"] .hero__robot.r-robot-reference-zone {
    top: calc(var(--v4-header) + .4rem);
    left: 54%;
    width: 45%;
    height: calc(100% - var(--v4-header) - .8rem);
  }
}

/* Short landscape remains a real pinned scene, with a compact hierarchy. */
@media (max-height: 42rem) and (min-width: 53.8125rem) {
  :root {
    --v4-header: 4rem;
  }

  .hero.comp-frame {
    height: 100svh;
    min-height: 34rem;
  }

  .hero__copy.r-hero-copy {
    top: calc(var(--v4-header) + 1.5rem);
  }

  .hero h1,
  .method-beat h3 {
    font-size: clamp(3.25rem, 5.2vw, 4.75rem);
  }

  .hero__lede {
    margin-top: .8rem;
    font-size: .86rem;
  }

  .hero__actions.r-hero-actions {
    bottom: 1rem;
  }

  .hero__tickets {
    top: 28%;
  }

  .hero__pizza.r-hero-pizza,
  .hero[data-hero-state="0"] .hero__pizza.r-hero-pizza,
  .hero[data-hero-state="1"] .hero__pizza.r-hero-pizza,
  .hero[data-hero-state="2"] .hero__pizza.r-hero-pizza {
    top: 58%;
  }

  .motion-ready .method-section {
    height: 380svh;
  }

  .method-stage,
  .motion-ready .method-stage {
    position: sticky;
    top: 0;
    display: block;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
  }

  .method-topline {
    top: calc(var(--v4-header) + .45rem);
  }

  .method-copy,
  .motion-ready .method-copy {
    top: 49%;
    bottom: auto;
    width: 34%;
    height: 58%;
    transform: translateY(-43%);
  }

  .method-beat > p:not(.method-beat__index) {
    max-width: 25rem;
    margin-top: .7rem;
    font-size: .82rem;
  }

  .method-beat__note {
    display: none;
  }

  .pizza-stage,
  .motion-ready .pizza-stage {
    top: 50%;
    left: 66%;
    width: min(58svh, 36vw);
  }

  .method-nav {
    bottom: .45rem;
  }
}

/* Accessible static reading: compact rows plus a neighbouring pizza, no voids. */
@media (prefers-reduced-motion: reduce) and (max-width: 0px) {
  .hero.comp-frame,
  .hero__robot.r-robot-reference-zone,
  .hero__pizza.r-hero-pizza,
  .method-section,
  .method-stage,
  .pizza-state {
    transition: none !important;
  }

  .method-section,
  .motion-ready .method-section {
    height: auto;
    background: var(--v4-yellow);
  }

  .method-stage,
  .motion-ready .method-stage {
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr);
    grid-template-rows: auto 1fr;
    gap: 1.5rem clamp(2rem, 5vw, 6rem);
    align-items: start;
    height: auto;
    min-height: 0;
    padding: calc(var(--v4-header) + 2rem) var(--v4-gutter) 4rem;
    overflow: visible;
    background: var(--v4-yellow);
  }

  .method-topline {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .method-copy,
  .motion-ready .method-copy {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 2;
    display: block;
    width: auto;
    height: auto;
    transform: none;
  }

  .method-beat,
  .motion-ready .method-beat,
  .method-beat.is-active,
  .motion-ready .method-beat.is-active {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, .55fr);
    gap: .6rem 2rem;
    justify-content: initial;
    min-height: 0;
    padding: 2.25rem 0;
    border-bottom: 1px solid rgba(17, 16, 13, .35);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .method-beat__index {
    grid-column: 1 / -1;
    margin-bottom: .25rem;
  }

  .method-beat h3 {
    grid-column: 1;
    max-width: 8ch;
    font-size: clamp(3rem, 5.3vw, 5.5rem);
  }

  .method-beat > p:not(.method-beat__index) {
    grid-column: 2;
    align-self: end;
    margin: 0;
  }

  .method-beat__note {
    grid-column: 2;
    margin-top: 0;
  }

  .pizza-stage,
  .motion-ready .pizza-stage {
    position: sticky;
    top: calc(var(--v4-header) + 2rem);
    left: auto;
    grid-column: 2;
    grid-row: 2;
    width: min(31rem, 100%);
    margin: 2.25rem auto 0;
    transform: none;
  }

  .pizza-stack {
    transform: none !important;
  }

  .method-nav {
    display: none;
  }
}

@media (max-width: 0px) and (prefers-reduced-motion: reduce) {
  .method-stage,
  .motion-ready .method-stage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 1.25rem;
    padding: calc(var(--v4-header) + 1.5rem) var(--v4-gutter) 3rem;
  }

  .method-topline {
    grid-column: 1;
    grid-row: 1;
  }

  .pizza-stage,
  .motion-ready .pizza-stage {
    position: relative;
    top: auto;
    grid-column: 1;
    grid-row: 2;
    width: min(24rem, 78vw);
    margin: .5rem auto 0;
  }

  .method-copy,
  .motion-ready .method-copy {
    grid-column: 1;
    grid-row: 3;
  }

  .method-beat,
  .motion-ready .method-beat,
  .method-beat.is-active,
  .motion-ready .method-beat.is-active {
    display: block;
    padding: 1.8rem 0;
  }

  .method-beat h3 {
    font-size: clamp(2.65rem, 11vw, 4.25rem);
  }

  .method-beat > p:not(.method-beat__index) {
    margin-top: .8rem;
  }

  .method-beat__note {
    display: block;
    margin-top: .65rem;
  }
}

@media (forced-colors: active) {
  .hero h1 em,
  .method-beat h3 em {
    -webkit-text-fill-color: currentColor;
  }
}

/* Full-bleed character payoff: the footage stays the protagonist, not a card. */
.food-film::after {
  display: none;
}

.food-film video {
  filter: none;
}

.food-film__copy {
  width: min(43rem, calc(100% - 2 * var(--v4-gutter)));
  margin: var(--v4-gutter);
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--v4-cream);
  background: transparent;
  box-shadow: none;
}

@media (max-width: 48rem) {
  .food-film::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    border: 0;
    background: linear-gradient(
      180deg,
      rgba(11, 13, 14, 0) 18%,
      rgba(11, 13, 14, .22) 34%,
      rgba(11, 13, 14, .92) 70%,
      rgba(11, 13, 14, .98) 100%
    );
    content: "";
    pointer-events: none;
  }

  .food-film__copy {
    padding: 1rem;
  }
}

.food-film__copy .section-kicker,
.food-film__copy > p:not(.section-kicker),
.food-film__copy > span,
.food-film__copy h2 {
  color: var(--v4-cream);
}

.food-film__copy h2 em {
  color: var(--v4-yellow);
}

.food-film__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  margin-top: 1rem;
  padding: .65rem 1rem;
  border: var(--v4-rule);
  border-radius: 999px;
  color: var(--v4-ink);
  background: var(--v4-cream);
  font: inherit;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

.food-film__toggle:focus-visible {
  outline: 3px solid var(--v4-yellow);
  outline-offset: 3px;
}

@media (max-width: 23rem) {
  .hero__robot .robot-rig {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    align-self: end;
  }
}

@media (max-width: 23rem) and (max-height: 42rem) {
  .hero__robot.r-robot-reference-zone,
  .hero[data-hero-state="1"] .hero__robot.r-robot-reference-zone,
  .hero[data-hero-state="2"] .hero__robot.r-robot-reference-zone {
    top: 55%;
    left: 56%;
    width: 42%;
    height: 31%;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 0px) {
  .food-film video {
    display: block;
  }
}

/* Short landscape cannot support a pinned 4-act theatre without clipping. */
@media (max-height: 42rem) and (min-width: 53.8125rem) {
  .method-section,
  .motion-ready .method-section {
    height: auto;
  }

  .method-stage,
  .motion-ready .method-stage {
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(17rem, .85fr);
    grid-template-rows: auto 1fr;
    gap: 1.25rem clamp(2rem, 5vw, 5rem);
    align-items: start;
    height: auto;
    min-height: 0;
    padding: calc(var(--v4-header) + 1.5rem) var(--v4-gutter) 3rem;
    overflow: visible;
  }

  .method-topline {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .method-copy,
  .motion-ready .method-copy {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 2;
    display: block;
    width: auto;
    height: auto;
    transform: none;
  }

  .method-beat,
  .motion-ready .method-beat,
  .method-beat.is-active,
  .motion-ready .method-beat.is-active {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(11rem, .55fr);
    gap: .55rem 1.5rem;
    min-height: 0;
    padding: 1.75rem 0;
    border-bottom: 1px solid rgba(17, 16, 13, .35);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .method-beat__index {
    grid-column: 1 / -1;
  }

  .method-beat h3 {
    grid-column: 1;
    font-size: clamp(2.9rem, 5vw, 4.6rem);
  }

  .method-beat > p:not(.method-beat__index),
  .method-beat__note {
    grid-column: 2;
    align-self: end;
    margin: 0;
  }

  .pizza-stage,
  .motion-ready .pizza-stage {
    position: sticky;
    top: calc(var(--v4-header) + 1.5rem);
    left: auto;
    grid-column: 2;
    grid-row: 2;
    width: min(29rem, 100%);
    margin: 1.75rem auto 0;
    transform: none;
  }

  .pizza-stack {
    transform: none !important;
  }

  .method-nav {
    display: none;
  }
}