/* =====================================================================
   Munchkin Cup Collection - Hebrew / RTL minisite
   Breakpoints: <768 mobile · 768-1023 tablet · >=1024 desktop · >=1280 wide
   ===================================================================== */

:root {
  --bg: #FDFBF9;
  --text: #4E4F50;
  --ink: #252527;
  --gray-800: #444446;
  --gray-900: #3C3D3D;
  --gray-500: #737478;
  --gray-400: #A7A9AC;
  --gray-200: #D0D1D1;
  --blue: #0C5C80;
  --blue-900: #104C6A;
  --cream: #FFF2D3;
  --brown: #78290F;
  --rust: #91310F;
  --pill-bg: #EFFBFB;
  --pill-ink: #11333B;
  --gutter: 20px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --font: 'Heebo', 'Arial Hebrew', Arial, sans-serif;
}
@media (min-width: 1280px) { :root { --gutter: 34px; } }
@media (min-width: 1440px) { :root { --gutter: 68px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
[hidden] { display: none !important; }
.container { max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 200; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }

/* display headings: light + bold contrast (Matter 300/500 -> Heebo 300/700) */
.h-display {
  font-size: 38px; line-height: 44px; font-weight: 300; color: var(--ink); letter-spacing: -0.01em;
}
.h-display { text-wrap: balance; }
@media (max-width: 767px) { .h-display { text-align: center; } } /* phones: all headings centred */
/* fewer ragged/lonely last lines where the browser supports it */
p, .stage-intro, .stage-text, .pcard__name { text-wrap: pretty; }
.h-display strong { font-weight: 700; white-space: nowrap; } /* keep the bold phrase on one line */
@media (min-width: 1024px) { .h-display { font-size: 55px; line-height: 62px; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
/* hover states measured on the original: instant colour change, no movement */
.btn--primary { height: 50px; padding: 0 30px; background: var(--blue); color: #fff; font-size: 16px; }
.btn--primary:hover { background: #096C9B; }
.btn--outline { height: 42px; padding: 0 25px; border: 1px solid var(--c, var(--blue)); color: var(--c, var(--blue)); font-size: 14px; background: transparent; }
.btn--outline:hover { box-shadow: inset 0 0 0 1px var(--c, var(--blue)); } /* border thickens to 2px */
.btn--sm { height: 40px; padding: 0 22px; font-size: 14px; }

/* ---------- decor shapes ---------- */
.decor { position: absolute; display: block; width: var(--s, 60px); pointer-events: none; z-index: 2; }
.decor svg { display: block; width: 100%; height: auto; overflow: visible; }
.decor--float { animation: mk-float 6s ease-in-out infinite alternate; }
@keyframes mk-float {
  from { transform: translateY(0) rotate(0); }
  to { transform: translateY(-10px) rotate(6deg); }
}

/* =====================================================================
   Announcement bar
   ===================================================================== */
.announce {
  background: var(--cream); color: var(--brown); font-size: 14px; line-height: 20px;
  min-height: 40px; display: flex; align-items: center; justify-content: space-between; padding-inline: 4px;
}
.announce__msgs { flex: 1; display: grid; text-align: center; }
.announce__msg { grid-area: 1 / 1; padding: 10px 8px; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease); text-wrap: balance; }
.announce__msg.is-active { opacity: 1; visibility: visible; }
.announce__msg a { text-decoration: underline; text-underline-offset: 2px; }
.announce__arrow { width: 40px; height: 40px; display: grid; place-items: center; flex: none; }
.announce__arrow svg { width: 18px; height: 18px; }

/* =====================================================================
   Header
   ===================================================================== */
.site-header__top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 60px;
}
.site-header__burger { width: 40px; height: 40px; display: grid; place-items: center; margin-inline-start: -8px; }
.site-header__burger svg { width: 26px; height: 26px; }
.site-header__utility { display: none; }
.site-header__logo { justify-self: center; display: block; }
.site-header__logo img { width: 150px; height: auto; }
.site-header__store {
  justify-self: end; display: inline-flex; align-items: center; gap: 6px;
  color: var(--blue-900); font-size: 14px; font-weight: 500; text-decoration: none;
}
.site-header__store span { display: none; }
.site-header__store svg { width: 22px; height: 22px; }
.site-header__nav { display: none; }

@media (min-width: 1024px) {
  .site-header__top { padding-top: 22px; padding-bottom: 6px; }
  .site-header__burger { display: none; }
  .site-header__utility { display: flex; gap: 20px; font-size: 12px; color: var(--gray-500); }
  .site-header__utility a { text-decoration: none; }
  .site-header__utility a:hover { color: var(--text); }
  .site-header__logo img { width: 240px; }
  .site-header__store span { display: inline; }
  .site-header__store svg { width: 18px; height: 18px; }
  .site-header__nav { display: block; }
  .site-header__nav ul {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 6px;
    padding: 6px 0; border-bottom: 1px solid var(--gray-200);
  }
  /* 40px pills with a transparent border, as on the original: hover turns the text blue and shows a light outline */
  .site-header__nav a { /* inline-block, not flex: flex would drop the space before a Latin name (כל מוצרי Munchkin) */
    display: inline-block; height: 40px; line-height: 38px; white-space: nowrap; padding: 0 15px; border: 1px solid transparent; border-radius: 999px;
    font-size: 16px; color: var(--text); text-decoration: none;
  }
  .site-header__nav a:hover { color: var(--blue-900); border-color: #D0D1D1; }
  .site-header__nav .nav-pill {
    padding: 0 18px; border-color: var(--blue-900); color: var(--blue-900);
  }
  .site-header__nav .nav-pill:hover { border-color: var(--blue-900); box-shadow: inset 0 0 0 1px var(--blue-900); }
}

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 100; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(37, 37, 39, .35); opacity: 0; transition: opacity .3s var(--ease); }
.drawer__panel {
  position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 1; width: min(86vw, 360px);
  background: var(--bg); padding: 16px 24px 32px; overflow-y: auto;
  transform: translateX(100%); transition: transform .3s var(--ease);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.drawer__close { width: 40px; height: 40px; display: grid; place-items: center; }
.drawer__close svg { width: 24px; height: 24px; }
.drawer__nav li { border-bottom: 1px solid var(--gray-200); }
.drawer__nav a { display: block; padding: 14px 0; font-size: 18px; text-decoration: none; color: var(--ink); }
.drawer__cta { width: 100%; margin-top: 24px; }
.drawer__utility { margin-top: 24px; display: grid; gap: 12px; font-size: 14px; color: var(--gray-500); }
.drawer__utility a { text-decoration: none; }

/* =====================================================================
   Hero - official photo with the Hebrew headline as live text,
   placed where the original headline sits in each image
   ===================================================================== */
.hero__wrap { position: relative; }
.hero__frame { position: relative; container-type: inline-size; }
.hero__media img { width: 100%; height: auto; }
.hero__copy {
  position: absolute; z-index: 3; top: 18%; left: 5%; right: 15%;
}
.hero__title {
  font-size: 7.3cqw; line-height: 1.06; font-weight: 800; color: var(--ink); letter-spacing: -0.01em;
}
.hero__title span { display: block; white-space: nowrap; }
.hero__sub { display: none; }
@media (max-width: 767px) { .hero__copy { left: 6%; right: 6%; text-align: center; } }
.hero__d1 { --s: 34px; top: 16px; inset-inline-end: 22%; }
.hero__d2 { --s: 40px; top: 30px; inset-inline-end: 6%; animation-delay: -2s; }
.hero__d3 { --s: 34px; top: 46%; inset-inline-end: 8%; animation-delay: -4s; }
.hero__d4 { --s: 46px; bottom: 6%; inset-inline-start: 5%; animation-delay: -1s; }
.hero__d5 { --s: 50px; bottom: -14px; inset-inline-end: 30%; animation-delay: -3s; }
.hero__d6 { --s: 36px; top: 40%; inset-inline-start: 4%; animation-delay: -5s; display: none; }

/* tablet + desktop use the wide photo (sharp from 768px up) */
@media (min-width: 768px) {
  .hero__wrap { max-width: 1440px; margin: 30px auto 0; padding-inline: var(--gutter); }
  /* original headline area: left 4.6% to 40% of the photo */
  .hero__copy { top: 50%; transform: translateY(-53%); left: 4.6%; right: 57%; } /* -53%: subtitle stays clear of the girl's knee in the photo */
  .hero__title { font-size: max(22px, 3.35cqw); line-height: 1.08; }
  .hero__sub { display: block; margin-top: 1.1cqw; font-size: max(13px, 1.75cqw); line-height: 1.3; font-weight: 500; color: var(--gray-900); }
}
@media (min-width: 1024px) { .hero__wrap { margin-top: 60px; } }

/* =====================================================================
   Product collection (carousel)
   ===================================================================== */
.collection { margin: 50px 0; }
.collection__title { text-align: center; margin: 0 auto 30px; padding-inline: var(--gutter); max-width: 560px; }
@media (min-width: 768px) { .collection__title { max-width: none; } }
@media (min-width: 1024px) { .collection { margin: 80px 0 50px; } }

.carousel { position: relative; }
.carousel__viewport {
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding-inline: 40px; scrollbar-width: none;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__track { display: flex; gap: 20px; padding-inline: 40px; width: max-content; }
.carousel__slide { flex: 0 0 310px; display: flex; padding: 2px; scroll-snap-align: start; }
@media (min-width: 1024px) { .carousel__slide { flex-basis: 418px; } }

.carousel__arrow {
  position: absolute; top: calc(50% - 20px); z-index: 3; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--blue-900); color: #fff;
}
.carousel__arrow svg { width: 20px; height: 20px; }
.carousel__arrow:hover { background: var(--blue); }
.carousel__arrow--next { inset-inline-end: 10px; }
.carousel__arrow--prev { inset-inline-start: 10px; }
@media (min-width: 1024px) {
  .carousel__arrow { width: 50px; height: 50px; top: calc(50% - 50px); }
  .carousel__arrow svg { width: 24px; height: 24px; }
  .carousel__arrow--next { inset-inline-end: 30px; }
  .carousel__arrow--prev { inset-inline-start: 30px; }
}

/* ---------- product card ---------- */
.pcard { display: flex; width: 100%; }
.pcard__inner {
  width: 100%; display: flex; flex-direction: column; background: #fff; border-radius: 10px; padding: 25px;
  transition: box-shadow .3s var(--ease);
}
.pcard__media {
  position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; margin-bottom: 20px;
  background: linear-gradient(to bottom, var(--g1, #eee), var(--g2, #ddd));
}
.pcard__img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s cubic-bezier(0, 0, .2, 1); }
.pcard__age {
  position: absolute; top: 16px; inset-inline-start: 16px; height: 32px; padding: 0 15px; border-radius: 100px;
  display: inline-flex; align-items: center; background: var(--pill-bg); color: var(--pill-ink);
  font-size: 14px; font-weight: 500; line-height: 1;
}
.pcard__name { font-size: 16px; line-height: 22px; font-weight: 400; color: var(--gray-800); text-align: center; margin-bottom: 8px; }
.pcard__name a { text-decoration: none; }
.pcard__text { font-size: 14px; line-height: 20px; text-align: center; margin-bottom: 8px; }
.pcard__price { font-size: 28px; line-height: 32px; color: var(--gray-900); text-align: center; margin-bottom: 12px; }
.pcard__options { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 15px; margin: 4px 0 25px; min-height: 30px; }
.pcard__sizes, .pcard__swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.chip {
  height: 40px; padding: 0 20px; border-radius: 999px; background: #fff; border: 1px solid var(--gray-400);
  font-size: 14px; color: var(--gray-800); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.chip.is-active { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); color: var(--blue-900); font-weight: 500; }
.swatch {
  width: 30px; height: 30px; border-radius: 50%; background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); outline: 1px solid transparent; outline-offset: 3px;
  transition: outline-color .2s var(--ease), transform .2s var(--ease);
}
.swatch.is-active { outline: 2px solid var(--blue); outline-offset: 2px; }
.pcard__buy { width: 100%; max-width: 300px; margin-inline: auto; }
.pcard__more { /* as the original's "Learn More": plain underlined link 30px under the button */
  display: block; width: fit-content; margin: 30px auto 0;
  font-size: 14px; line-height: 14px; font-weight: 500; color: var(--blue-900); text-decoration: underline;
}
@media (min-width: 768px) { .pcard__media { margin-bottom: 25px; } }

/* =====================================================================
   Age & stage
   ===================================================================== */
.stages { position: relative; }
.age-pill {
  display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 40px;
  border-radius: 999px; background: var(--c); color: #fff; font-size: 27px; font-weight: 500; line-height: 1; white-space: nowrap;
}
.age-pill--sm { height: 40px; padding: 0 22px; font-size: 19px; }
.stage-intro { color: var(--gray-800); }
.stage-name { color: var(--c); font-weight: 700; }
.stage-text { color: var(--gray-800); }

/* ---- stacked (mobile + tablet) ---- */
.stages-stack { padding-inline: var(--gutter); margin: 0 auto 30px; overflow-x: hidden; overflow-x: clip; }
/* animated shapes (stacked layout): full-bleed groups, shapes parked 100px past the screen edge */
.stage-card { position: relative; }
.stage-card__gl { position: relative; margin-inline: calc(-1 * var(--gutter)); pointer-events: none; }
.stage-card__gl--top { height: 1px; margin-bottom: -1px; }
.stage-card__gl--img { height: 90px; }   /* band under the photo, as on the original */
.mglyph { position: absolute; top: var(--y); width: var(--s); height: var(--s); z-index: 1; }
.mglyph--start { right: -100px; transition: right var(--dur) cubic-bezier(0, 0, .2, 1) var(--dl); }
.mglyph--end { left: -100px; transition: left var(--dur) cubic-bezier(0, 0, .2, 1) var(--dl); }
.mglyph--start.is-in { right: var(--off); }
.mglyph--end.is-in { left: var(--off); }
.stages-stack .stages__title { margin-bottom: 26px; }
.stage-card { margin-bottom: 90px; }
.stage-card .stage-intro { margin-top: 12px; font-size: 16px; line-height: 22px; max-width: 380px; }
.stage-card__img { width: calc(100% + 2 * var(--gutter)); max-width: none; height: auto; margin: 6px calc(-1 * var(--gutter)) 0; } /* edge to edge, as on the original */
.stage-card__product { padding-inline-start: 23%; margin-top: 0; }
.stage-card .stage-name { font-size: 17px; line-height: 1.3; margin-bottom: 6px; }
.stage-card .stage-text { font-size: 14px; line-height: 20px; max-width: 240px; margin-bottom: 14px; }
@media (min-width: 640px) { .stage-card__product { padding-inline-start: 36%; } }

/* ---- phones: everything centred (client preference), and no text touching a graphic ----
   The shapes that sit beside the pill on tablets get their own band above the pill here. */
@media (max-width: 767px) {
  .stage-card { text-align: center; margin-bottom: 56px; }
  .stage-card__gl--top { height: var(--band); margin-bottom: 14px; }
  .stage-card__gl--top .mglyph { top: var(--yb); }
  .stage-card .stage-intro, .stage-card .stage-text { margin-inline: auto; }
  .stage-card .stage-intro { max-width: 340px; }
  .stage-card__product { padding-inline-start: 0; }
  .stage-card .stage-text { max-width: 280px; }
  /* larger type on phones (client request, v14): Hebrew at the original's English sizes read too small */
  .stage-card .stage-intro { font-size: 18px; line-height: 26px; }
  .stage-card .stage-name { font-size: 22px; line-height: 1.25; margin-bottom: 8px; }
  .stage-card .stage-text { font-size: 16px; line-height: 24px; max-width: 320px; }
  .stage-card .btn--sm { height: 44px; font-size: 16px; }
  .pcard__name { font-size: 18px; line-height: 25px; }
  .pcard__text { font-size: 16px; line-height: 24px; }
  .pcard__age, .chip, .pcard__more { font-size: 15px; }
}

/* ---- pinned scroll story (desktop) ----
   Geometry measured from munchkin.com/cup-collection, mirrored for RTL:
   stage = container minus 30px on the end side, height capped at 709px,
   block centred vertically on tall screens. Shapes/photo double from 1600px. */
.stages-pin { display: none; }
@media (min-width: 1024px) {
  .stages-stack { display: none; }
  .stages-pin { display: block; position: relative; height: calc((var(--n) * var(--per) + 1) * 100vh); }
  .stages-pin__line {
    position: absolute; inset-block: 50vh; width: 4px; z-index: 1;
    inset-inline-end: max(calc((100% - 1440px) / 2 + 34px), 0px);
  }
  .stages-pin__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .stages-pin__inner { height: 100%; display: flex; flex-direction: column; padding-top: max(30px, calc((100vh - 827px) / 2 - 6px)); padding-bottom: 16px; }
  .stages-pin .stages__title { margin-bottom: 56px; }
  .stages-pin__stage { position: relative; flex: none; height: min(709px, calc(100vh - 192px)); margin-inline-end: 30px; }

  .stages-pin__media { position: absolute; inset-block: 2px 42px; inset-inline: 20px 21px; overflow: hidden; }
  .stages-pin__frame {
    position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
    transform: translateY(calc(var(--o, 0) * 100%)); transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  }
  .stages-pin__frame img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
  .stages-pin__fade { position: absolute; inset-inline: 0; height: 40px; z-index: 2; }
  .stages-pin__fade--top { top: 0; background: linear-gradient(to bottom, var(--bg), transparent); }
  .stages-pin__fade--bottom { bottom: 0; background: linear-gradient(to top, var(--bg), transparent); }

  /* text swaps instantly, as on the original */
  .stages-pin__layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
  .stages-pin__product, .stages-pin__age { position: absolute; visibility: hidden; z-index: 4; }
  .stages-pin__layer.is-active .stages-pin__product,
  .stages-pin__layer.is-active .stages-pin__age { visibility: visible; pointer-events: auto; }
  /* 250px as on the original; moves up on short screens so the block always fits */
  .stages-pin__product { inset-inline-start: 152px; top: min(250px, calc(100% - 340px)); width: 210px; }
  .stages-pin__product .stage-name { font-size: 22px; line-height: 30px; margin-bottom: 12px; }
  .stages-pin__product .stage-text { font-size: 20px; line-height: 26px; margin-bottom: 20px; }
  .stages-pin__age { top: 0; inset-inline-end: 0; width: 290px; }
  .stages-pin__age .stage-intro { margin-top: 15px; font-size: 20px; line-height: 26px; }

  /* official animated shapes: parked off-screen, moved in by main.js */
  .stage-glyph { position: absolute; z-index: 2; pointer-events: none; width: 90px; height: 90px; right: -4000px; top: 0; }
  .stages-pin__layer:not(.is-active) .stage-glyph { visibility: hidden; }
  .stage-decor { opacity: 0; transform: scale(.3) rotate(-30deg); transition: opacity .4s var(--ease), transform .7s cubic-bezier(.34, 1.56, .64, 1); }
  .stages-pin__layer.is-active .stage-decor { opacity: 1; transform: none; }
  .stage-decor--a { --s: 90px; top: 20px; inset-inline-start: 10px; }
  .stage-decor--b { --s: 45px; bottom: 30px; inset-inline-start: 20px; }
  .stage-decor--c { --s: 45px; bottom: 284px; inset-inline-end: 205px; }

  .stages-pin__life { position: absolute; inset-inline-end: 0; bottom: 30px; width: 250px; height: 250px; overflow: hidden; z-index: 2; }
  .stages-pin__lframe { position: absolute; inset: 0; transform: translateX(calc(var(--o, 0) * -100%)); transition: transform .28s cubic-bezier(.22, 1, .36, 1); }
  .stages-pin__lframe img { width: 100%; height: 100%; object-fit: cover; }

  .stages-nav {
    position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); z-index: 4;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
  }
  .stages-nav__btn {
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid rgba(16, 76, 106, .55); color: var(--blue-900);
  }
  .stages-nav__btn svg { width: 18px; height: 18px; }
  .stages-nav__btn:hover { box-shadow: inset 0 0 0 1px rgba(16, 76, 106, .55); } /* inner ring, as on the original */
  .stages-nav__btn:disabled { border-color: rgba(16, 76, 106, .1); color: rgba(16, 76, 106, .3); }
  .stages-nav__dots { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 44px; }
  .stages-nav__dot { display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gray-200); transition: background-color .3s var(--ease); }
  .stages-nav__dot.is-near { display: block; }
  .stages-nav__dot.is-active { display: block; width: 10px; height: 10px; background: var(--blue-900); }

  .stages-pin__counter {
    position: absolute; bottom: -14px; inset-inline: 0; display: flex; justify-content: center; gap: 2px;
    direction: ltr; font-size: 14px; line-height: 14px; font-weight: 500;
  }
  .stages-pin__counter .cur { color: var(--blue-900); }
}
@media (min-width: 1600px) {
  .stages-pin__life { width: 290px; height: 290px; bottom: 60px; }
}
@media (min-width: 1024px) and (max-width: 1439px) { .stages-pin__product { width: 200px; } }
/* 1024-1279, as measured on the original: no gap under the title, taller stage (up to 829px),
   media inset 2px, cup at full size. In RTL the text sits on the cup's handle side (in English
   it sits on the shadow side), so the text block sits closer to the nav and, below 1100px,
   the cup moves up to 10px toward the photo. Checked: 12px+ clearance at every width. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .stages-pin__inner { padding-top: max(30px, calc((100vh - 891px) / 2 - 6px)); }
  .stages-pin .stages__title { margin-bottom: 0; }
  .stages-pin__stage { height: min(829px, calc(100vh - 132px)); }
  .stages-pin .stage-glyph { margin-top: 20px; } /* shapes that land at the top of the stage stay clear of the title (no gap under it in this range) */
  .stages-pin__media { inset-inline: 2px; }
  .stages-pin__frame img { translate: calc(-1 * clamp(0px, (1100px - 100vw) * .13, 10px)) 0; }
  .stages-pin__product { inset-inline-start: 104px; width: 195px; }
}

/* =====================================================================
   Promo split block
   ===================================================================== */
.promo { display: flex; flex-direction: column; gap: 30px; margin-block: 60px; }
.promo__media img { width: 100%; height: auto; }
.promo__body { margin-top: 20px; max-width: 495px; color: var(--gray-800); font-size: 16px; line-height: 22px; }
.promo__body p + p { margin-top: 16px; }
.promo__body strong { font-weight: 600; color: var(--gray-900); }
.promo .btn { margin-top: 28px; }
@media (min-width: 1024px) {
  .promo { flex-direction: row; align-items: center; gap: 78px; margin-block: 120px; }
  .promo__media { flex: 0 0 calc(50% - 39px); }
  .promo__text { flex: 1; }
  .promo__body { margin-top: 24px; font-size: 22px; line-height: 30px; }
}

/* =====================================================================
   Banner
   ===================================================================== */
.banner img { width: 100%; height: auto; }
@media (min-width: 768px) { .banner { max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); } }

/* =====================================================================
   Footer
   ===================================================================== */
/* desktop footer from 1280px, as on the original (below that it keeps the phone layout) */
.site-footer { background: var(--cream); padding: 78px 0; font-size: 14px; line-height: 20px; }
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 20px; margin-bottom: 40px;
  border-bottom: 1px solid rgba(145, 49, 15, .15);
}
.breadcrumb a { text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb__home { width: 24px; height: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--rust); }
.breadcrumb__home svg { width: 14px; height: 14px; }
.breadcrumb__cur { color: var(--rust); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb__sep { color: var(--gray-500); }
.site-footer__main { display: grid; gap: 44px; }
.site-footer__mark { width: 50px; height: 48px; }
.site-footer__club-title { margin: 22px 0 8px; font-size: 16px; font-weight: 500; color: var(--rust); }
.site-footer__club p { max-width: 350px; }
.site-footer__club-cta { margin-top: 18px; background: var(--blue-900); }
.site-footer__club-cta:hover { background: var(--blue); } /* as the original's Subscribe button */
.site-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 24px; }
.site-footer__col h4 { font-size: 13px; font-weight: 500; color: var(--rust); margin-bottom: 14px; }
.site-footer__col li + li { margin-top: 14px; }
.site-footer__col a { text-decoration: none; }
.site-footer__bottom { margin-top: 50px; display: flex; flex-direction: column; gap: 22px; }
.site-footer__social { display: flex; flex-direction: column; gap: 12px; font-size: 12px; }
.site-footer__social ul { display: flex; gap: 10px; flex-wrap: wrap; }
.site-footer__social a {
  height: 40px; min-width: 40px; padding: 0 14px; border-radius: 999px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  font-size: 12px; font-weight: 500; color: var(--blue-900);
}
.site-footer__social a:hover { background: #F5F6F6; }
.site-footer__copy { font-size: 12px; text-align: center; }
@media (min-width: 1280px) {
  .site-footer { padding-block: 110px; }
  .site-footer__mark { width: 70px; height: 68px; }
  .breadcrumb { margin-bottom: 56px; }
  .site-footer__main { grid-template-columns: 350px 1fr; gap: 60px; }
  .site-footer__cols { grid-template-columns: repeat(4, 1fr); }
  .site-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; margin-top: 70px; }
  .site-footer__social { flex-direction: row; align-items: center; gap: 16px; }
  .site-footer__copy { text-align: start; }
}

/* Wordmark: Munchkin's letters sit on a clip line and rise 50px into place (0.4s ease, staggered
   0.1-0.4s from the "c" outwards) when 10% of the row is visible; replays on every entry.
   Phone/tablet: 353px row, as on the original. 1280+: full row, letters scale with the row width
   (original size at the 1304px row of 1440+ screens). */
.site-footer__wm { overflow: hidden; margin-top: 35px; }
.wm { display: flex; align-items: flex-end; justify-content: space-between; width: 353px; max-width: 100%; margin-inline: auto; padding-top: 32px; direction: ltr; }
.wm svg { display: block; width: calc(var(--mw) * 1px); height: calc(var(--mh) * 1px); }
.wm__l { display: block; transform: translateY(50px); }
.wm__l--i { position: relative; }
.wm__heart { position: absolute; left: 0; bottom: 48px; }
.wm.is-in .wm__l { animation: mk-slide-up .4s ease var(--d) forwards; }
.wm.is-static .wm__l { transform: none; }
@keyframes mk-slide-up { from { transform: translateY(50px); } to { transform: none; } }
@media (min-width: 1280px) {
  .site-footer__wm { container-type: inline-size; margin-top: 60px; }
  .wm { width: auto; padding-top: 60px; gap: calc(20 * 100cqw / 1304); }
  .wm svg { width: calc(var(--w) * 100cqw / 1304); height: calc(var(--h) * 100cqw / 1304); }
  .wm__heart { bottom: calc(166 * 100cqw / 1304); }
}

/* phones: promo and footer centred (client preference) */
@media (max-width: 767px) {
  .promo__text { text-align: center; }
  .promo__body { margin-inline: auto; }
  .breadcrumb { justify-content: center; }
  .site-footer__club { text-align: center; }
  .site-footer__mark { display: block; margin-inline: auto; }
  .site-footer__club p { margin-inline: auto; }
  .site-footer__cols { text-align: center; }
  .site-footer__social { align-items: center; }
  .site-footer__social ul { justify-content: center; }
  .site-footer__copy { text-align: center; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .wm__l { transform: none; }
}