/* ---------- Local fonts (offline, no external requests) ---------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/archivo.woff2") format("woff2");
}

/* ---------- Design tokens (Make Sh*t Good) ---------- */
:root {
  --black: #0c0c0c;
  --black-2: #171717;
  --black-3: #202020;
  --white: #f5f1e8;
  --muted: #a7a29a;

  --pink: #ff2ea6;
  --orange: #ff8a00;
  --lime: #c8ff00;
  --red: #ff1d1d;
  --blue: #1747ff;

  --ink: #0c0c0c;          /* text on neon blocks */
  --accent: var(--pink);   /* primary UI accent */

  --wrap: 1160px;
  --radius: 16px;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--lime); color: var(--ink);
  font-weight: 900; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.04em;
  padding: 12px 20px; border-radius: 999px;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

/* ---------- Focus visibility ---------- */
:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.subhero :focus-visible, .newsletter :focus-visible, .cta :focus-visible, .ticker :focus-visible,
.myth :focus-visible, .chefs :focus-visible {
  outline-color: var(--ink);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Archivo", system-ui, -apple-system, sans-serif;
  color: var(--white);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; }

.container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Cross-document view transitions (the choreography is in MOTION SYSTEM at
   the end of this file). The body fade is the fallback for engines without
   view-transition support, and switches itself off where they exist. */
@view-transition { navigation: auto; }
@keyframes page-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
body { animation: page-fade-in 0.32s ease both; }
@supports (view-transition-name: none) { body { animation: none; } }

/* ---------- Display type ---------- */
.display {
  font-family: "Archivo", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.92;
}
.section-title {
  font-family: "Archivo", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-size: clamp(2rem, 5vw, 3.2rem);
}
.script { font-family: "Archivo", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; }
.script--yellow { color: var(--lime); }
.script--pink { color: var(--pink); }
/* Lime fails contrast on pink surfaces (2.87:1) — use ink there */
.subhero .script--yellow, .newsletter .script--yellow, .cta .script--yellow { color: var(--ink); }
.ast { color: var(--red); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Archivo", sans-serif;
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease, color 0.15s ease;
}
.btn--yellow { background: var(--pink); color: var(--ink); }
.btn--yellow:hover { transform: translateY(-2px); background: #ff54b8; }
.btn--dark { background: var(--white); color: var(--ink); }
.btn--dark:hover { transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--white); border-color: var(--white); }
.btn--ghost:hover { background: var(--white); color: var(--ink); }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---------- Ticker ---------- */
.ticker {
  background: var(--pink);
  color: var(--ink);
  overflow: hidden;
  padding: 9px 0;
}
.ticker__track {
  display: flex;
  align-items: center;
  gap: 30px;
  white-space: nowrap;
  width: max-content;
  animation: ticker 26s linear infinite;
}
.ticker__item { font-weight: 900; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.ticker__star { font-size: 0.7rem; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Header ---------- */
.header {
  background: var(--black);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  position: sticky;
  top: 0;
  z-index: 40;
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 72px;
}
.logo {
  display: inline-flex;
  align-items: center;
  font-family: "Archivo", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--white);
  white-space: nowrap;
}
.logo .ast { color: var(--red); margin: 0 0.02em; }
.logo--stack { flex-direction: column; align-items: flex-start; line-height: 0.82; font-size: 1.5rem; gap: 0; }
.logo--light { color: var(--white); }

.nav {
  display: flex;
  gap: 30px;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nav a {
  transition: color 0.15s;
  /* 24px minimum touch target — the header centres its row, so this is
     invisible on desktop but real on an iPad, where .nav is still shown */
  display: inline-flex; align-items: center; min-height: 24px;
}
.nav a:hover, .nav a.is-active { color: var(--pink); }

.basket-btn {
  font-family: "Archivo", sans-serif;
  background: var(--pink);
  color: var(--ink);
  font-weight: 900;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: none;
  border-radius: 999px;
  padding: 11px 20px;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
}
.basket-btn:hover { background: #ff54b8; transform: translateY(-1px); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 40px;
  padding-block: 74px 84px;
  position: relative;
  z-index: 2;
}
.hero__blob { display: none; }

.hero__kicker { margin: 0 0 14px; color: var(--lime); }
.hero__title,
.wordmark {
  font-family: "Archivo", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.84;
  font-size: clamp(3.4rem, 9vw, 6.6rem);
  color: var(--white);
}
.wordmark .ast { color: var(--red); }
.hero__sub {
  max-width: 440px;
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 26px 0 30px;
  color: rgba(245,241,232,0.82);
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero packaging (neon sachets) */
.hero__shakers {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
}
.sachets { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sachet {
  aspect-ratio: 5 / 6;
  border-radius: 12px;
  padding: 16px 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);
}
.sachet--pink { background: var(--pink); color: var(--white); transform: rotate(-4deg); }
.sachet--orange { background: var(--orange); color: var(--ink); transform: rotate(3deg); }
.sachet--lime { background: var(--lime); color: var(--ink); transform: rotate(2deg); }
.sachet--blue { background: var(--blue); color: var(--white); transform: rotate(-3deg); }
.sachet__mark {
  font-family: "Archivo", sans-serif; font-weight: 900; text-transform: uppercase;
  line-height: 0.82; letter-spacing: -0.02em; font-size: clamp(1rem, 2.4vw, 1.55rem);
}
.sachet__mark .ast { color: currentColor; }
.sachet--pink .sachet__mark .ast { color: var(--ink); }
.sachet--blue .sachet__mark .ast { color: var(--lime); }
.sachet--lime .sachet__mark .ast { color: var(--pink); }
.sachet__foot { display: flex; align-items: flex-end; justify-content: space-between; font-weight: 800; }
.sachet__msg { font-size: 0.85rem; letter-spacing: 0.02em; }
.sachet__wt { font-size: 0.6rem; text-align: right; line-height: 1.1; opacity: 0.85; }

/* MSG seasoning shower */
.shaker-shower { position: absolute; inset: -40px 0 20px 0; overflow: hidden; pointer-events: none; z-index: 6; }
.crystal {
  position: absolute; top: -22px; width: 9px; height: 9px;
  background: var(--white); border-radius: 2px; opacity: 0;
  box-shadow: 0 0 8px rgba(255,255,255,0.85);
  animation: msgfall linear infinite;
}
.crystal--lg { width: 12px; height: 12px; }
.crystal--sm { width: 6px; height: 6px; }
@keyframes msgfall {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(var(--drop, 420px)) rotate(240deg); opacity: 0; }
}

/* Press clippings */
.press-clips { display: flex; flex-direction: column; gap: 14px; width: 190px; flex-shrink: 0; z-index: 8; }
.press-clip {
  display: block; background: var(--black-2); color: var(--white);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 12px;
  padding: 13px 15px; transition: transform 0.14s ease, border-color 0.14s ease;
}
.press-clip:first-child { transform: rotate(4deg); }
.press-clip:last-child { transform: rotate(-2deg); }
.press-clip:hover { transform: rotate(0deg) translateY(-3px); border-color: var(--pink); }
.press-clip__kicker { display: block; font-weight: 900; font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pink); margin-bottom: 5px; }
.press-clip__quote { display: block; font-style: italic; font-weight: 600; font-size: 0.92rem; line-height: 1.3; }
.press-clip__src { display: block; margin-top: 7px; font-weight: 700; font-size: 0.68rem; color: var(--muted); }

/* ---------- Feature strip ---------- */
.features { background: var(--black); border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
.features__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: 26px;
}
.feature { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.feature + .feature { border-left: 1px solid rgba(255,255,255,0.12); padding-left: 24px; }
.feature svg { width: 26px; height: 26px; flex-shrink: 0; }
.feature span { font-weight: 900; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; }

/* ---------- Shop ---------- */
.shop { background: var(--black); padding-block: 62px; }
.shop__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 30px;
}
.shop__note { color: var(--pink); }

.products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.products--four { grid-template-columns: repeat(4, 1fr); }
.product {
  position: relative;
  border-radius: var(--radius);
  padding: 26px 24px 22px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  color: var(--ink);
}
.product--red { background: var(--red); color: var(--white); }
.product--pink { background: var(--pink); color: var(--white); }
.product--orange { background: var(--orange); color: var(--ink); }
.product--lime { background: var(--lime); color: var(--ink); }
.product--blue { background: var(--blue); color: var(--white); }
/* legacy aliases */
.product--purple { background: var(--red); color: var(--white); }
.product--teal { background: var(--blue); color: var(--white); }
.product--yellow { background: var(--lime); color: var(--ink); }

.product__kicker { font-weight: 900; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; opacity: 0.8; margin-bottom: 4px; }
.product__name {
  font-family: "Archivo", sans-serif; font-weight: 900; text-transform: uppercase;
  font-size: 1.9rem; letter-spacing: -0.02em; line-height: 0.92; margin-bottom: 10px;
}
.product__desc { font-size: 0.95rem; line-height: 1.45; opacity: 0.92; flex-grow: 1; }
.product__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.product__price { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 1.5rem; }
.product__add {
  font-family: "Archivo", sans-serif; background: var(--ink); color: var(--white);
  font-weight: 900; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase;
  border: none; border-radius: 999px; padding: 10px 18px; cursor: pointer;
  transition: transform 0.1s, opacity 0.15s;
}
.product__add:hover { transform: scale(1.05); }
.product--lime .product__add, .product--orange .product__add { background: var(--ink); color: var(--white); }

/* Product cards with a product image */
.product--dark {
  background: var(--black-2);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--white);
  padding: 0;
  min-height: 0;
  overflow: hidden;
}
.product__img {
  background: radial-gradient(circle at 50% 38%, #232323, #0c0c0c 72%);
  display: flex; align-items: center; justify-content: center;
  padding: 22px; min-height: 320px; overflow: hidden;
}
.product__img:has(.product__photo) { padding: 0; background: none; }
.product__img svg { width: auto; height: 300px; max-width: 100%; }
.box-svg { height: 268px !important; }
.product__body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex-grow: 1; }
.product--dark .product__name { color: var(--white); }
.product--dark .product__desc { color: var(--muted); }
.product--dark .product__price { color: var(--white); }
.product--dark .product__add { background: var(--pink); color: var(--ink); }
.soon-badge {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  background: var(--lime); color: var(--ink);
  font-weight: 900; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 6px 12px; border-radius: 999px;
}
.product.is-soon .product__img { opacity: 0.9; }
.product__soon { font-family: "Archivo"; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.1rem; color: var(--lime); }

/* Hero shaker */
.hero-shaker { display: flex; align-items: center; justify-content: center; width: 100%; }
.hero-shaker svg {
  width: auto; height: min(460px, 58vh);
  filter: drop-shadow(0 24px 46px rgba(0,0,0,0.65));
  transform-origin: center bottom;
  animation: shakeit 3.6s ease-in-out infinite;
}
@keyframes shakeit {
  0%, 68%, 100% { transform: rotate(0deg); }
  74% { transform: rotate(-3deg); }
  80% { transform: rotate(3deg); }
  86% { transform: rotate(-2deg); }
  92% { transform: rotate(1.5deg); }
}

/* Pack selector (dessert box) */
.pack-note { font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; margin-top: 18px; }
.pack-select { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pack-btn {
  display: flex; align-items: center; justify-content: space-between;
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 0.9rem;
  background: rgba(0,0,0,0.16); color: inherit; border: 2px solid rgba(12,12,12,0.55);
  border-radius: 12px; padding: 11px 16px; cursor: pointer; text-transform: uppercase;
  transition: transform 0.1s, background 0.15s;
}
.product--pink .pack-btn { border-color: rgba(255,255,255,0.6); background: rgba(0,0,0,0.14); }
.pack-btn:hover { transform: translateY(-1px); background: var(--ink); color: var(--white); }
.pack-btn span:last-child { font-weight: 900; }

/* ---------- "Why MSG" / myth ---------- */
.myth { background: var(--lime); color: var(--ink); padding-block: 60px; }
.myth__inner { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: center; }
.myth__title { max-width: 13ch; }
.myth__script { margin: 16px 0 0; color: var(--ink); font-size: 0.9rem; }
.facts { display: flex; flex-direction: column; gap: 14px; }
.fact {
  background: var(--black); color: var(--white);
  border-radius: 12px; padding: 18px 22px; font-size: 0.98rem; line-height: 1.45;
}
.fact strong { color: var(--lime); }

/* ---------- Recipes ---------- */
.recipes { background: var(--black-2); padding-block: 62px; }
.recipe-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.recipe-card {
  background: var(--black); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius); padding: 24px 22px;
}
.recipe-card__emoji { font-size: 2.4rem; margin-bottom: 10px; }
.recipe-card h3 {
  font-family: "Archivo", sans-serif; font-weight: 900; text-transform: uppercase;
  font-size: 1.2rem; margin-bottom: 8px; letter-spacing: -0.01em;
}
.recipe-card p { font-size: 0.92rem; line-height: 1.45; margin: 0; color: var(--muted); }

/* Chefs */
.chefs {
  margin-top: 40px; background: var(--pink); color: var(--ink);
  border-radius: var(--radius); padding: 32px 34px;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 34px; align-items: center;
}
.chefs__title { font-family: "Archivo"; font-weight: 900; text-transform: uppercase; font-size: clamp(1.6rem, 3.5vw, 2.2rem); line-height: 0.95; margin-bottom: 12px; }
.chefs__text p { margin: 0; line-height: 1.55; }
.chefs__list { display: flex; flex-wrap: wrap; gap: 10px; }
.chefs__list li { background: var(--ink); color: var(--white); font-weight: 800; font-size: 0.9rem; padding: 8px 15px; border-radius: 999px; }

/* Recipe dropdowns / accordion */
.recipe-qa__meta { font-weight: 800; color: var(--pink); font-size: 0.8rem; letter-spacing: 0.04em; margin-left: 8px; text-transform: uppercase; }
.recipe-qa__content { padding-bottom: 10px; }
.recipe-qa__cols { display: grid; grid-template-columns: 1fr 1.35fr; gap: 26px; }
.recipe-qa__cols h3 { font-family: "Archivo"; font-weight: 900; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.06em; margin: 0 0 10px; }
.recipe-qa__cols ul { list-style: disc; padding-left: 20px; margin: 0; }
.recipe-qa__cols ol { list-style: decimal; padding-left: 20px; margin: 0; }
.recipe-qa__cols li { margin-bottom: 7px; line-height: 1.5; color: var(--muted); }
.qa:not([open]) > :not(summary) { display: none; }

/* ---------- FAQ accordion ---------- */
.faq { background: var(--black); padding-block: 62px 78px; }
.accordion { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.qa {
  background: var(--black-2); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 4px 20px;
}
.qa summary {
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.02rem;
  padding: 14px 0; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-weight: 900; font-size: 1.5rem; color: var(--pink); }
.qa[open] summary::after { content: "\2013"; }
.qa p { margin: 0 0 16px; line-height: 1.55; color: var(--muted); max-width: 64ch; }

/* ---------- Sub-page hero ---------- */
.subhero { position: relative; background: var(--pink); color: var(--ink); overflow: hidden; padding-block: 56px 62px; }
.subhero--pink { background: var(--pink); }
.subhero--navy { background: var(--blue); color: var(--white); }
.subhero__blob { display: none; }
.subhero__kicker { margin: 0 0 8px; }
.subhero__title {
  font-family: "Archivo", sans-serif; font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 0.9; font-size: clamp(2.4rem, 7vw, 4.4rem);
}
.subhero__lead { max-width: 620px; font-size: 1.05rem; line-height: 1.5; margin: 20px 0 0; }

/* ---------- FAQ (GEO article) ---------- */
.faq-geo { background: var(--black); padding-block: 52px 40px; }
.faq-intro { max-width: 760px; font-size: 1.05rem; line-height: 1.6; color: var(--muted); margin-bottom: 32px; }
.faq-toc { background: var(--black-2); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 22px 26px; margin-bottom: 42px; }
.faq-toc h2 { font-family: "Archivo"; font-weight: 900; text-transform: uppercase; font-size: 1.25rem; margin-bottom: 14px; }
.faq-toc ol { list-style: decimal; padding-left: 22px; columns: 2; column-gap: 34px; }
.faq-toc li { margin-bottom: 7px; break-inside: avoid; }
.faq-toc a { display: inline-flex; align-items: center; min-height: 24px; padding-block: 4px; }
.faq-toc a { color: var(--pink); font-weight: 600; }
.faq-toc a:hover { text-decoration: underline; }
.faq-section-title { font-family: "Archivo"; font-weight: 900; text-transform: uppercase; font-size: clamp(1.5rem, 4vw, 2.2rem); margin: 46px 0 6px; padding-top: 20px; }
.faq-section-note { color: var(--pink); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; margin-bottom: 8px; }
.faq-entry { border-top: 1px solid rgba(255,255,255,0.12); scroll-margin-top: 92px; }
.faq-entry__summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 0; }
.faq-entry__summary::-webkit-details-marker { display: none; }
.faq-entry__summary::after { content: "+"; font-weight: 900; font-size: 1.7rem; line-height: 1; color: var(--pink); flex-shrink: 0; }
.faq-entry[open] .faq-entry__summary::after { content: "\2013"; }
.faq-entry__summary:hover .faq-entry__q { color: var(--pink); }
.faq-entry__q { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 1.28rem; line-height: 1.25; margin: 0; transition: color 0.15s; }
.faq-entry__content { padding-bottom: 24px; }
.faq-entry:not([open]) .faq-entry__content { display: none; }
.faq-entry__short {
  background: var(--black-2); border: 1px solid rgba(255,255,255,0.14); border-left: 5px solid var(--pink);
  border-radius: 10px; padding: 14px 18px; margin: 14px 0 12px;
  font-size: 1.02rem; font-weight: 600; line-height: 1.5;
}
.faq-entry__body { max-width: 74ch; }
.faq-entry__body p { margin: 0 0 14px; line-height: 1.6; color: var(--muted); }
.faq-entry__body ul, .faq-entry__body ol { margin: 0 0 14px; padding-left: 22px; line-height: 1.6; color: var(--muted); }
.faq-entry__body li { margin-bottom: 6px; }
.faq-entry__body ul { list-style: disc; }
.faq-entry__body ol { list-style: decimal; }
.faq-entry__body strong { color: var(--white); }

/* ---------- Sources ---------- */
.sources { background: var(--black-2); padding-block: 46px 68px; border-top: 1px solid rgba(255,255,255,0.1); }
.sources h2 { font-family: "Archivo"; font-weight: 900; text-transform: uppercase; font-size: 1.5rem; margin-bottom: 8px; }
.sources p { color: var(--muted); line-height: 1.6; max-width: 70ch; }
.sources ul { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; max-width: 820px; }
.sources li { background: var(--black); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 14px 18px; line-height: 1.45; color: var(--muted); }
.sources a {
  color: var(--pink); font-weight: 700; text-decoration: underline; word-break: break-word;
  /* each citation link is alone at the end of its own card (12px apart), so
     vertical padding on the inline box buys a 26px hit target with no
     layout change and no risk of adjacent targets overlapping */
  padding-block: 4px;
}

/* ---------- About ---------- */
.founders { background: var(--black); padding-block: 62px; }
.founders__inner { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 46px; align-items: start; }
.frame { position: sticky; top: 96px; }
.frame__inner {
  position: relative; border: 2px solid rgba(255,255,255,0.18); border-radius: 18px;
  background: var(--black-2); overflow: hidden; aspect-ratio: 1 / 1; transform: rotate(-1.5deg);
}
.frame__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame__fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 24px; background: linear-gradient(135deg, var(--pink), var(--red)); color: var(--white); font-family: "Archivo"; font-weight: 900; text-transform: uppercase; font-size: 1.5rem; line-height: 1.1; }
.frame__fallback small { font-weight: 600; font-size: 0.7rem; opacity: 0.85; text-transform: none; }
.frame__cap { margin-top: 18px; text-align: center; color: var(--pink); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9rem; }
.msg-drop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }

.prose { max-width: 760px; font-size: 1.06rem; line-height: 1.7; }
.prose p { margin: 0 0 20px; color: rgba(245,241,232,0.85); }
.prose .lead { font-size: 1.25rem; font-weight: 700; color: var(--white); }
.prose strong { color: var(--white); }
.founders__copy .section-title { margin-bottom: 18px; }

.values { background: var(--black-2); padding-block: 62px; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.value { background: var(--black); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius); padding: 26px 24px; }
.value__emoji { font-size: 2.2rem; margin-bottom: 10px; }
.value h3 { font-family: "Archivo"; font-weight: 900; text-transform: uppercase; font-size: 1.2rem; margin-bottom: 8px; }
.value p { margin: 0; line-height: 1.5; color: var(--muted); font-size: 0.95rem; }

/* CTA */
.cta { background: var(--pink); color: var(--ink); text-align: center; padding-block: 58px; }
.cta__title { font-family: "Archivo"; font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 5vw, 3rem); }
.cta__sub { margin: 14px auto 26px; max-width: 46ch; line-height: 1.5; }
.cta .btn--yellow { background: var(--ink); color: var(--white); }
.cta .btn--yellow:hover { background: #000; }

/* ---------- Footer ---------- */
.footer { background: var(--black); color: var(--white); padding-block: 34px; border-top: 1px solid rgba(255,255,255,0.12); }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer__tag { color: var(--pink); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; }
.footer__links { display: flex; gap: 24px; font-weight: 600; font-size: 0.9rem; }
.footer__links a {
  color: var(--muted);
  /* 24px minimum touch target (WCAG 2.5.8); padding only, so the
     visual position of the text is unchanged */
  display: inline-flex; align-items: center; min-height: 24px;
}
.footer__links a:hover { color: var(--pink); }

/* ---------- Basket drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.drawer.open { visibility: visible; }
.drawer__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); opacity: 0; transition: opacity 0.25s; }
.drawer.open .drawer__overlay { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 100%);
  background: var(--black-2); color: var(--white);
  display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform 0.3s ease; box-shadow: -8px 0 40px rgba(0,0,0,0.6);
  border-left: 1px solid rgba(255,255,255,0.12);
}
.drawer.open .drawer__panel { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.drawer__head h2 { font-family: "Archivo"; font-weight: 900; text-transform: uppercase; font-size: 1.4rem; }
.drawer__close { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--white); }
.drawer__body { flex-grow: 1; overflow-y: auto; padding: 20px 24px; }
.drawer__empty { color: var(--muted); font-size: 1rem; }

.line { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.line__swatch { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
.line__info { flex-grow: 1; }
.line__name { font-weight: 900; font-size: 0.92rem; text-transform: uppercase; }
.line__price { font-size: 0.85rem; color: var(--muted); }
.qty { display: flex; align-items: center; gap: 8px; }
.qty button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: var(--white); cursor: pointer; font-weight: 800; line-height: 1; }
.qty span { min-width: 18px; text-align: center; font-weight: 700; }

.drawer__foot { padding: 20px 24px; border-top: 1px solid rgba(255,255,255,0.12); }
.drawer__total { display: flex; justify-content: space-between; font-family: "Archivo"; font-weight: 900; font-size: 1.3rem; margin-bottom: 6px; }
.drawer__ship { font-size: 0.82rem; color: var(--muted); margin: 0 0 16px; }
.drawer__ship.free { color: var(--lime); font-weight: 700; }
.drawer__preorder { font-size: 0.76rem; color: var(--muted); margin: 10px 0 0; text-align: center; line-height: 1.4; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 120%);
  background: var(--pink); color: var(--ink); padding: 13px 22px; border-radius: 999px;
  font-weight: 900; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5); z-index: 120;
  opacity: 0; visibility: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .products--four, .recipe-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: 1fr; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__shakers { flex-direction: column; }
  .press-clips { flex-direction: row; flex-wrap: wrap; justify-content: center; width: auto; }
  .press-clip { max-width: 220px; }
  .myth__inner, .chefs, .founders__inner { grid-template-columns: 1fr; }
  .frame { position: static; max-width: 460px; }
  .features__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .feature + .feature { border-left: none; padding-left: 8px; }
}
@media (max-width: 720px) {
  .nav { display: none; }
  /* with the desktop nav hidden, group the header actions on the right
     instead of leaving the basket floating mid-header */
  .basket-btn { margin-left: auto; }
  .header__inner { gap: 12px; }
  .shop__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .recipe-qa__cols { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 520px) {
  .products, .products--four, .recipe-grid { grid-template-columns: 1fr; }
  .sachets { grid-template-columns: 1fr 1fr; }
  .footer__inner { flex-direction: column; text-align: center; }
  .faq-toc ol { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .crystal { animation: none; display: none; }
  .frame__inner { transform: none; }
  .hero-shaker svg { animation: none; }
  body { animation: none; }
  .ticker__track { animation: none; flex-wrap: wrap; white-space: normal; width: auto; }
  html { scroll-behavior: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Pause the ticker while hovered or focused */
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }

/* ---------- Brand logo image ---------- */
.logo-img { height: 50px; width: auto; display: block; }
.hero-logo { width: min(380px, 88%); height: auto; display: block; margin: 0 0 4px; }
.hero-logo-wrap { margin: 0; line-height: 0; }

/* ---------- Seasoning reveal ----------
   seasoning.js sets an inline --season (0..1) on whatever the crystals hit and
   removes it at zero. Matching on the inline property means the filter — and
   the stacking context and GPU layer it forces — exists ONLY while a surface
   is actually seasoned, instead of sitting on every heading and button for the
   whole session.

   There is deliberately no desaturated resting state: seasoning lifts ABOVE
   the baseline, so a visitor who never moves their pointer never sees anything
   that could be mistaken for a half-loaded page. */
[style*="--season"] {
  filter: saturate(calc(1 + var(--season, 0) * 0.55))
          brightness(calc(1 + var(--season, 0) * 0.07));
}
@media (max-width: 900px) { .hero-logo { width: min(300px, 70%); } }

/* ---------- Press band ---------- */
.press { background: var(--black-2); padding-block: 56px; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
.press__kicker { text-align: center; color: var(--pink); font-weight: 900; text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.78rem; margin-bottom: 26px; }
.press__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1060px; margin: 0 auto; }
.press-card { display: block; background: var(--black); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 28px 30px; transition: transform 0.14s ease, border-color 0.14s ease; }
.press-card:hover { transform: translateY(-3px); border-color: var(--pink); }
.press-card__src { display: block; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; color: var(--pink); margin-bottom: 12px; }
.press-card__quote { display: block; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1.35rem; line-height: 1.3; color: var(--white); }
.press-card__cta { display: block; margin-top: 16px; font-weight: 800; font-size: 0.85rem; color: var(--muted); }
.press-card:hover .press-card__cta { color: var(--pink); }
@media (max-width: 980px) { .press__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .press__grid { grid-template-columns: 1fr; } }

/* Real product photo on cards */
.product__photo { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }

/* ---------- Hero video (cloud frame) ---------- */
.hero-video { width: 100%; max-width: 600px; margin: 0; }
.hero-video__caption {
  font-family: "Archivo", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(0.95rem, 1.9vw, 1.3rem);
  color: var(--pink);
  text-align: center;
  margin: 0 0 14px;
  line-height: 1.15;
}
.hero-video__stage { position: relative; padding: 26px 58px 30px; }
.cloud { position: relative; width: 100%; }
.clip-defs { position: absolute; width: 0; height: 0; }
.cloud__svg {
  position: relative;
  z-index: 2;
  pointer-events: none;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.55));
  overflow: visible;
}
.hero-video__el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  background: transparent;
  -webkit-clip-path: url(#cloudClip);
  clip-path: url(#cloudClip);
}
/* Name tags */
.vtag {
  position: absolute;
  font-family: "Archivo", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1rem, 2.1vw, 1.5rem);
  color: #ff90ff;
  letter-spacing: -0.02em;
  line-height: 1;
  z-index: 3;
  text-shadow: 0 2px 0 rgba(0,0,0,0.35);
}
.vtag--left { left: -8%; bottom: 1%; top: auto; }
.vtag--right { right: 0; bottom: 1%; }
/* Bendy arrows */
.varrow { position: absolute; width: 26%; max-width: 150px; height: auto; z-index: 3; pointer-events: none; }
.varrow--left { left: -8%; bottom: 12%; top: auto; width: 22%; }
.varrow--right { right: 1%; bottom: 12%; width: 22%; }

@media (max-width: 900px) {
  .hero-video { max-width: 100%; margin-inline: auto; }
}
/* ---------- Custom video play button ---------- */
.hero-video__el { cursor: pointer; }
.vplay {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: clamp(56px, 13%, 84px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--pink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 8px 26px rgba(0,0,0,0.45);
  transition: transform 0.14s ease, opacity 0.2s ease, background 0.15s ease;
}
.vplay svg { width: 44%; height: 44%; margin-left: 8%; }
.vplay:hover { background: #ff54b8; transform: translate(-50%, -50%) scale(1.08); }
.cloud.is-playing .vplay { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -50%) scale(0.7); }
@media (prefers-reduced-motion: reduce) { .vplay { transition: none; } }

/* ---------- Newsletter ---------- */
.newsletter { background: var(--pink); color: var(--ink); padding-block: 62px; text-align: center; }
.newsletter__title {
  font-family: "Archivo", sans-serif; font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 0.95;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
}
.newsletter__sub { margin: 16px auto 26px; max-width: 54ch; font-size: 1.05rem; line-height: 1.5; }
.newsletter__form {
  display: flex; align-items: center; gap: 8px;
  max-width: 520px; margin: 0 auto;
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 6px 8px 6px 18px;
}
.newsletter__input {
  flex: 1; border: none; background: transparent;
  font-family: "Archivo", sans-serif; font-size: 1.05rem; color: var(--ink);
  padding: 12px 0;
}
.newsletter__input::placeholder { color: rgba(12,12,12,0.65); }
.newsletter__btn {
  border: none; background: transparent; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--ink);
  padding: 8px 12px; border-radius: 8px;
  transition: transform 0.12s ease, background 0.15s ease;
}
.newsletter__btn:hover { transform: translateX(3px); background: rgba(12,12,12,0.08); }
.newsletter__note { margin: 14px 0 0; font-weight: 800; font-size: 0.9rem; min-height: 1.2em; }

/* Caption aside */
.hero-video__caption-note {
  display: block;
  margin-top: 4px;
  font-weight: 700;
  font-size: 0.78em;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}

/* Basket line item photo */
.line__img {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 10px; object-fit: cover; display: block;
  background: var(--black-3);
}

/* Newsletter form fields */
.newsletter__form { flex-direction: column; align-items: stretch; gap: 12px; border: none; padding: 0; max-width: 560px; }
.nl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.newsletter__input {
  width: 100%; padding: 14px 16px;
  border: 2px solid var(--ink); border-radius: 10px;
  background: rgba(255,255,255,0.55);
  font-family: "Archivo", sans-serif; font-size: 1rem; color: var(--ink);
}
.newsletter__input:focus { background: #fff; }
.nl-check {
  display: flex; align-items: flex-start; gap: 10px;
  text-align: left; font-size: 0.88rem; line-height: 1.35; cursor: pointer;
}
.nl-check input { width: 24px; height: 24px; flex-shrink: 0; accent-color: var(--ink); margin-top: 1px; cursor: pointer; }
.nl-submit {
  margin-top: 4px;
  font-family: "Archivo", sans-serif; font-weight: 900; font-size: 0.95rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--ink); color: #fff;
  border: none; border-radius: 999px; padding: 15px 30px; cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
}
.nl-submit:hover { transform: translateY(-2px); background: #000; }
@media (max-width: 560px) { .nl-row { grid-template-columns: 1fr; } }

/* Keep the Nicky/Josh tags inside the frame on small screens */
@media (max-width: 640px) {
  .hero-video__stage { padding: 20px 26px 24px; }
  .vtag { font-size: 0.95rem; }
  .vtag--left { left: 0; }
  .vtag--right { right: 0; }
  .varrow--left { left: 0; width: 24%; }
  .varrow--right { right: 0; width: 24%; }
}
@media (max-width: 420px) {
  .hero-video__stage { padding: 18px 20px 22px; }
  .vtag { font-size: 0.85rem; }
  .varrow { width: 22%; }
}

/* ---------- Mobile nav ---------- */
.nav-toggle { display: none; }
@media (max-width: 720px) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; flex-shrink: 0;
    background: transparent; border: none; cursor: pointer;
  }
  .nav-toggle__bar {
    display: block; width: 100%; height: 3px; border-radius: 2px;
    background: var(--white); transition: transform 0.22s ease, opacity 0.18s ease;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
.mobnav {
  position: fixed; inset: 0; z-index: 30;
  background: var(--black);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 132px 28px 36px;
  opacity: 0; visibility: hidden;
  /* visibility flips instantly on open (so focus can enter immediately) and
     only after the fade on close */
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
.mobnav.open { opacity: 1; visibility: visible; transition: opacity 0.22s ease, visibility 0s; }
@media (min-width: 721px) { .mobnav { display: none; } }
.mobnav__links { display: flex; flex-direction: column; gap: 8px; }
.mobnav__links a {
  display: inline-block;
  font-family: "Archivo", sans-serif; font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 1.04;
  font-size: clamp(2.6rem, 13vw, 4rem);
  color: var(--white);
  transition: color 0.15s;
}
.mobnav__links a.is-active, .mobnav__links a:hover { color: var(--pink); }
.mobnav__links li { opacity: 0; transform: translateY(14px); }
.mobnav.open .mobnav__links li { animation: mobnav-rise 0.34s ease forwards; }
.mobnav.open .mobnav__links li:nth-child(1) { animation-delay: 0.05s; }
.mobnav.open .mobnav__links li:nth-child(2) { animation-delay: 0.11s; }
.mobnav.open .mobnav__links li:nth-child(3) { animation-delay: 0.17s; }
.mobnav.open .mobnav__links li:nth-child(4) { animation-delay: 0.23s; }
@keyframes mobnav-rise { to { opacity: 1; transform: translateY(0); } }
.mobnav__foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-weight: 700; font-size: 0.95rem; color: var(--muted);
}
.mobnav__foot a { transition: color 0.15s; }
.mobnav__foot a:hover { color: var(--pink); }
.mobnav__star { color: var(--pink); }
body.no-scroll { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  /* .mobnav.open sets its own transition, so it must be overridden by an
     equally specific selector or the fade survives reduced-motion */
  .mobnav, .mobnav.open { transition: none; }
  .mobnav__links li { opacity: 1; transform: none; }
  .mobnav.open .mobnav__links li { animation: none; }
}

/* Product names in the 2-col band must fit CHEFMAXXING (11 glyphs) without clipping */
@media (min-width: 521px) and (max-width: 720px) {
  .product__name { font-size: min(1.9rem, 4.1vw); }
}

/* ---------- Mobile vertical rhythm ---------- */
@media (max-width: 720px) {
  .hero__inner { padding-block: 44px 52px; }
  .shop, .faq, .founders, .values, .recipes, .newsletter, .myth { padding-block: 44px; }
  .press { padding-block: 40px; }
  .subhero { padding-block: 38px 44px; }
  .cta { padding-block: 42px; }
  .faq { padding-block: 44px 56px; }
}

/* Real-packaging fallback art on product cards (transparent PNG, contained
   rather than cover-cropped like the Shopify photo) */
.product__art {
  width: auto; height: auto;
  max-width: 82%; max-height: 300px;
  margin: auto; display: block;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.55));
}

/* ==========================================================================
   MOTION SYSTEM
   The site as one continuous object rather than a stack of separate pages.
   ========================================================================== */

/* --- Shared elements across navigation -----------------------------------
   Exactly ONE element may carry a given view-transition-name per document —
   a duplicate silently skips the ENTIRE transition, so these are scoped by
   page. On the homepage the name lives on the giant hero wordmark; everywhere
   else it lives on the small header logo. Navigating between them therefore
   flies the wordmark up into the header (and back down on return) instead of
   destroying one element and building another. */
.header .logo-img { view-transition-name: brandmark; }
body[data-page="index"] .header .logo-img { view-transition-name: none; }
body[data-page="index"] .hero-logo { view-transition-name: brandmark; }

/* the jar persists between the homepage shop preview and the shop page */
.js-jar { view-transition-name: productjar; }

/* --- The page wipe -------------------------------------------------------
   The outgoing page loses its seasoning as it leaves; the incoming one
   arrives unseasoned and comes up to full. The brand claim as the
   navigation model. */
::view-transition-old(root) { animation: 220ms cubic-bezier(0.4, 0, 1, 1) both msg-leave; }
::view-transition-new(root) { animation: 360ms cubic-bezier(0, 0, 0.2, 1) both msg-arrive; }
@keyframes msg-leave {
  to { opacity: 0; filter: saturate(0.2) brightness(0.82); transform: scale(0.988); }
}
@keyframes msg-arrive {
  from { opacity: 0; filter: saturate(0.28) brightness(0.88); transform: scale(1.01); }
  to { opacity: 1; filter: saturate(1) brightness(1); transform: none; }
}
/* the brandmark morphs on its own curve — it should feel carried, not wiped */
::view-transition-group(brandmark) { animation-duration: 460ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
::view-transition-old(brandmark), ::view-transition-new(brandmark) { animation: none; mix-blend-mode: normal; height: 100%; }
::view-transition-group(productjar) { animation-duration: 420ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }

/* --- Scroll choreography -------------------------------------------------
   .reveal is applied by JS only to elements BELOW the fold, so nothing above
   it ever animates in (and nothing is hidden at all if JS never runs). */
html.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
  will-change: opacity, transform;
}
html.js .reveal.is-in { opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .reveal.is-in {
    opacity: 1; transform: none; transition: none;
  }
  ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-group(brandmark), ::view-transition-group(productjar) { animation: none; }
}

/* ---------- Our journey timeline ---------- */
.journey { background: var(--black-2); padding-block: 64px; }
.journey__grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 26px;
}
.jstep { position: relative; display: flex; flex-direction: column; gap: 14px; }
.jstep::after {
  content: "";
  position: absolute;
  top: 34px;
  right: -22px;
  width: 18px;
  border-top: 3px dashed rgba(255,255,255,0.28);
}
.jstep:nth-child(3n)::after, .jstep:last-child::after { content: none; }
.jstep__card { border-radius: 14px; padding: 20px 22px; color: var(--ink); min-height: 168px; }
.jstep--pink   .jstep__card { background: var(--pink); }
.jstep--lime   .jstep__card { background: var(--lime); }
.jstep--orange .jstep__card { background: var(--orange); }
.jstep--blue   .jstep__card { background: var(--blue); color: var(--white); }
.jstep--red    .jstep__card { background: var(--red); color: var(--white); }
.jstep__year {
  display: block;
  font-family: "Archivo", sans-serif; font-weight: 900;
  text-transform: uppercase; letter-spacing: -0.01em;
  font-size: 1.5rem; line-height: 1; margin-bottom: 10px;
}
.jstep__text { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.jstep__text strong { font-weight: 900; }
.jstep__media { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--black-3); }
.jstep__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jstep__ph {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 16px;
  border: 2px dashed rgba(255,255,255,0.22); border-radius: 14px; color: var(--muted);
}
.jstep__ph span { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 1.4rem; color: var(--white); }
.jstep__ph small { font-size: 0.72rem; }
.jstep__media--joke { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--pink), var(--red)); }
.jstep__punch { font-size: 4rem; color: var(--white); line-height: 1; }
@media (max-width: 900px) {
  .journey__grid { grid-template-columns: repeat(2, 1fr); }
  .jstep::after { content: none; }
}
@media (max-width: 560px) {
  .journey__grid { grid-template-columns: 1fr; gap: 26px; }
}

/* Portrait shots where the faces sit near the top: bias the crop upward
   so the 4:3 frame does not slice heads off. */
.jstep__img[src*="journey-2023"],
.jstep__img[src*="journey-2024-kitchen"] { object-position: center top; }

/* Kitchen shot is very tight in a 4:3 crop; show the whole frame instead */
.jstep__img[src*="journey-2024-kitchen"] {
  object-fit: contain;
  object-position: center;
  background: #101010;
}

/* Blurred backdrop fills the frame behind a contained photo */
.jstep__media--pad { position: relative; }
.jstep__media--pad::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("images/journey-2024-kitchen.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(22px) brightness(0.45) saturate(0.8);
  transform: scale(1.15);
}
.jstep__media--pad .jstep__img { position: relative; z-index: 1; background: transparent; }



/* ---------- Journey connectors: the path snakes left to right, then back ---------- */
.journey__grid { column-gap: 74px; row-gap: 92px; }

/* row two runs right to left, so the timeline reads as one continuous snake */
.jstep:nth-child(1) { grid-area: 1 / 1; }
.jstep:nth-child(2) { grid-area: 1 / 2; }
.jstep:nth-child(3) { grid-area: 1 / 3; }
.jstep:nth-child(4) { grid-area: 2 / 3; }
.jstep:nth-child(5) { grid-area: 2 / 2; }
.jstep:nth-child(6) { grid-area: 2 / 1; }

.jstep::after {
  content: "";
  position: absolute;
  top: 42px;
  right: -68px;
  left: auto;
  width: 62px;
  height: 36px;
  border: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

/* row one: pointing right */
.jstep:nth-child(1)::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 44'%3E%3Cpath d='M4 22 C 16 4, 30 40, 46 22' fill='none' stroke='%23c8ff00' stroke-width='4.5' stroke-dasharray='8 6' stroke-linecap='round'/%3E%3Cpath d='M46 22 L 62 22' stroke='%23c8ff00' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M62 22 L 50 13 M62 22 L 50 31' fill='none' stroke='%23c8ff00' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.jstep:nth-child(2)::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 44'%3E%3Cpath d='M4 22 C 16 4, 30 40, 46 22' fill='none' stroke='%23ff8a00' stroke-width='4.5' stroke-dasharray='8 6' stroke-linecap='round'/%3E%3Cpath d='M46 22 L 62 22' stroke='%23ff8a00' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M62 22 L 50 13 M62 22 L 50 31' fill='none' stroke='%23ff8a00' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* end of row one: drop down into row two */
.jstep:nth-child(3)::after {
  content: "";
  top: auto;
  bottom: -80px;
  right: 50%;
  transform: translateX(50%);
  width: 40px;
  height: 72px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 80'%3E%3Cpath d='M22 4 C 4 16, 40 30, 22 46' fill='none' stroke='%231747ff' stroke-width='4.5' stroke-dasharray='8 6' stroke-linecap='round'/%3E%3Cpath d='M22 46 L 22 62' stroke='%231747ff' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M22 62 L 13 50 M22 62 L 31 50' fill='none' stroke='%231747ff' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* row two: pointing back to the left */
.jstep:nth-child(4)::after,
.jstep:nth-child(5)::after {
  right: auto;
  left: -68px;
}
.jstep:nth-child(4)::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 44'%3E%3Cpath d='M76 22 C 64 4, 50 40, 34 22' fill='none' stroke='%23ff1d1d' stroke-width='4.5' stroke-dasharray='8 6' stroke-linecap='round'/%3E%3Cpath d='M34 22 L 18 22' stroke='%23ff1d1d' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M18 22 L 30 13 M18 22 L 30 31' fill='none' stroke='%23ff1d1d' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.jstep:nth-child(5)::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 44'%3E%3Cpath d='M76 22 C 64 4, 50 40, 34 22' fill='none' stroke='%23ff2ea6' stroke-width='4.5' stroke-dasharray='8 6' stroke-linecap='round'/%3E%3Cpath d='M34 22 L 18 22' stroke='%23ff2ea6' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M18 22 L 30 13 M18 22 L 30 31' fill='none' stroke='%23ff2ea6' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* the punchline is the end of the road */
.jstep:nth-child(6)::after { content: none; }

@media (max-width: 900px) {
  .journey__grid { column-gap: 26px; row-gap: 34px; }
  .jstep:nth-child(1), .jstep:nth-child(2), .jstep:nth-child(3),
  .jstep:nth-child(4), .jstep:nth-child(5), .jstep:nth-child(6) { grid-area: auto; }
  .jstep::after,
  .jstep:nth-child(3)::after { content: none; }
}