/* ==========================================================================
   moffy mochi — brand stylesheet
   Ivory #FBF8F0 is the base. The logo's pink #FCBFCF is kept for boxes and
   accents, and the logo's berry #9B010D for type and the dark bands.
   ========================================================================== */

/* ---------- Fonts (self-hosted: no third-party request before first paint) ---------- */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url("../fonts/nunito-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-mono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-mono-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --pink: #FCBFCF;
  --pink-soft: #FDD3DE;
  --pink-deep: #F6A6BB;
  --berry: #9B010D;
  --berry-deep: #6E0009;
  --berry-ink: #4A0006;
  --cream: #F8F6E9;
  --cream-warm: #F1EBDC;
  --ivory: #FBF8F0;
  --ivory-deep: #F4EEE0;

  --f-display: "Nunito", "Varela Round", system-ui, sans-serif;
  --f-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --radius: clamp(20px, 2.4vw, 36px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --nav-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  background: var(--ivory);
  color: var(--berry);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(16px, 1.05vw + 10px, 19px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ol, ul { list-style: none; }
::selection { background: var(--berry); color: var(--pink); }
:focus-visible { outline: 3px solid var(--berry); outline-offset: 4px; border-radius: 8px; }

.wrap { width: 100%; max-width: 1480px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(96px, 14vw, 200px); position: relative; }

.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 1000;
  background: var(--berry); color: var(--cream); padding: 10px 18px; border-radius: 99px;
  transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 16px; }

/* ---------- Shared type ---------- */

.section-title {
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(3rem, 9vw, 9.6rem);
  line-height: .86;
  letter-spacing: -.035em;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .1em .3em;
}
/* on the flavours page the range names are written like the range pages' own titles: "Mochi." */
:is(.flav-group, .varieties) .section-title { text-transform: none; letter-spacing: -.05em; }
.split { display: inline; }
.split .wd { display: inline-block; overflow: hidden; white-space: nowrap; padding: .14em .02em .04em; margin: -.14em -.02em -.04em; }
.split .ch { display: inline-block; will-change: transform; }

/* product name & notes — mirrors the menu card */
.p-name {
  font-weight: 900;
  font-size: clamp(1.25rem, 1.7vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--berry);
}
/* a one-line description that fades in when the card is hovered (always shown on touch screens) */
.p-desc { font-size: clamp(13px, .95vw, 15px); font-weight: 600; line-height: 1.45; max-width: 34ch; margin-top: 10px; }
@media (hover: hover) {
  .p-desc { opacity: 0; translate: 0 6px; transition: opacity .4s ease, translate .5s var(--ease-out); }
  :is(.p-card, .s-card, .m-card):is(:hover, :focus-within) .p-desc { opacity: .9; translate: 0 0; }
}
.p-notes {
  font-family: var(--f-mono);
  font-size: clamp(12px, .85vw, 14px);
  margin-top: 8px;
  opacity: .8;
  letter-spacing: .01em;
}

.section-head {
  display: grid; grid-template-columns: 1fr minmax(0, 380px); gap: 32px;
  align-items: end; margin-bottom: clamp(48px, 7vw, 110px);
}
.section-head__note { font-size: clamp(16px, 1.2vw, 19px); max-width: 38ch; }

/* ---------- Buttons ---------- */
.btn {
  --bg: transparent; --fg: var(--berry);
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  height: 58px; padding: 0 28px; border-radius: 99px;
  font-weight: 800; font-size: 16px; letter-spacing: .01em;
  background: var(--bg); color: var(--fg);
  border: 2px solid var(--berry);
  overflow: hidden; isolation: isolate;
  transition: color .5s var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: -2px; z-index: -1;
  background: var(--berry); border-radius: inherit;
  transform: translateY(101%); transition: transform .55s var(--ease-out);
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.btn--solid { --bg: var(--berry); --fg: var(--cream); }
.btn--solid::before { background: var(--berry-ink); }
.btn--ghost:hover { color: var(--cream); }
.btn:hover::before { transform: translateY(0); }
.btn span { position: relative; }

.icon-btn {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--berry);
  transition: background .4s var(--ease-out), color .4s var(--ease-out);
}
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.icon-btn:hover { background: var(--berry); color: var(--pink); }


/* ---------- Preloader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 900;
  display: none;
  color: var(--berry);
}
.js .loader { display: block; }
.loader__inner {
  position: absolute; inset: 0; background: var(--ivory);
  display: grid; place-items: center; align-content: center; gap: 28px;
}
.loader__mark { position: relative; width: clamp(200px, 26vw, 340px); aspect-ratio: 2316 / 1356; }
.loader__wm { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader__wm--ghost { color: var(--pink); }
.loader__wm--fill { color: var(--berry); clip-path: inset(calc(100% - var(--fill, 0%)) 0 0 0); }
.loader__meta {
  display: flex; gap: 22px; align-items: baseline;
  font-family: var(--f-mono); font-size: 14px;
}
.loader__count { min-width: 4ch; text-align: right; }
.loader__curve {
  position: absolute; left: -10%; right: -10%; top: 100%;
  height: 22vh; background: var(--ivory);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transform: translateY(-1px);
}

/* ---------- Cursor ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 800; pointer-events: none;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--berry);
  display: grid; place-items: center;
  opacity: 0; transition: width .45s var(--ease-out), height .45s var(--ease-out), margin .45s var(--ease-out), opacity .3s;
}
.has-cursor .cursor { opacity: 1; }
.cursor.is-hover { width: 44px; height: 44px; margin: -22px 0 0 -22px; background: rgba(155, 1, 13, .18); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 500;
  height: var(--nav-h);
  /* links either side of a centred logo */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(28px, 3.4vw, 56px);
  padding-inline: var(--gutter);
  transition: transform .6s var(--ease-out), background .4s, box-shadow .4s;
}
.nav.is-scrolled {
  background: rgba(251, 248, 240, .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(155, 1, 13, .12);
}
.nav.is-hidden { transform: translateY(-100%); }
.logo-mark { height: 50px; width: auto; aspect-ratio: 2316 / 1356; color: var(--berry); transition: transform .5s var(--ease-spring), color .4s; }
.logo-mark--bite { aspect-ratio: 2010 / 1758; }
.nav__logo:hover .logo-mark { transform: rotate(-4deg) scale(1.05); }
/* home page: the face mark is filled with the logo pink at the top, and goes back to line art once you scroll */
.logo-fill { color: var(--pink); transition: opacity .5s ease; }
.nav.is-scrolled .logo-fill, .menu-open .logo-fill { opacity: 0; }
.nav__links { display: flex; gap: clamp(6px, 1.4vw, 24px); font-weight: 800; font-size: 17px; }
.nav__links--start { justify-content: flex-end; }
.nav__right { display: flex; align-items: center; gap: 10px; }
.nav__right .nav__links { margin-right: auto; }

.link-roll { display: inline-block; overflow: hidden; height: 1.5em; line-height: 1.5; }
.link-roll span { display: inline-block; position: relative; transition: transform .5s var(--ease-out); }
.link-roll span::after { content: attr(data-text); position: absolute; left: 0; top: 100%; }
.link-roll:hover span { transform: translateY(-100%); }
/* every link carries the pill's padding, so moving the highlight never shifts the menu */
.nav__links a { padding-inline: .7em; border-radius: 99px; transition: background .35s; }
.nav__links a.is-active, .no-js .nav__links a[aria-current="page"] { background: var(--pink); }
/* pink menu: the current page is marked with a cream pill behind it */
.mobile-menu nav a { align-self: flex-start; padding-inline: .2em; border-radius: .25em; }
.mobile-menu nav a.is-active, .no-js .mobile-menu nav a[aria-current="page"] { background: var(--ivory); }

.burger { display: none; width: 46px; height: 46px; border-radius: 50%; background: var(--berry); position: relative; z-index: 2; }
.burger span { position: absolute; left: 13px; right: 13px; height: 2.5px; border-radius: 2px; background: var(--pink); transition: transform .5s var(--ease-out), top .5s var(--ease-out); }
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 26px; }
.menu-open .burger span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { top: 22px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 400;
  background: var(--pink); color: var(--berry);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + 40px) var(--gutter) 40px;
  clip-path: circle(0% at calc(100% - 46px) 42px);
  transition: clip-path .8s var(--ease-out);
  visibility: hidden;
}
.menu-open .mobile-menu { clip-path: circle(150% at calc(100% - 46px) 42px); visibility: visible; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 6px; }
.mobile-menu nav a {
  font-weight: 900; font-size: clamp(2.6rem, 12vw, 4.5rem); line-height: 1.05; letter-spacing: -.03em;
  display: flex; align-items: flex-start; gap: 12px;
  transform: translateY(40px); opacity: 0; transition: transform .7s var(--ease-out), opacity .7s;
}
.menu-open .mobile-menu nav a { transform: none; opacity: 1; }
.menu-open .mobile-menu nav a:nth-child(1) { transition-delay: .15s; }
.menu-open .mobile-menu nav a:nth-child(2) { transition-delay: .2s; }
.menu-open .mobile-menu nav a:nth-child(3) { transition-delay: .25s; }
.menu-open .mobile-menu nav a:nth-child(4) { transition-delay: .3s; }
.menu-open .mobile-menu nav a:nth-child(5) { transition-delay: .35s; }
.menu-open .logo-mark { color: var(--berry); }
.menu-open .nav .icon-btn { visibility: hidden; }
.menu-open .nav.is-hidden { transform: none; }
.menu-open .nav.is-scrolled { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Home: hero ----------
   A full-screen product shot: the headline across the top, the three ranges
   standing large in front of it, and mochi bites floating around the edges. */
.welcome {
  --mx: 0; --my: 0;
  position: relative; height: 100svh; min-height: 700px; max-height: 1200px; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center;
  padding-top: calc(var(--nav-h) + clamp(4px, 2.4vh, 32px));
  background:
    radial-gradient(60% 55% at 50% 78%, rgba(252, 191, 207, .55), transparent 72%),
    radial-gradient(40% 40% at 8% 20%, rgba(252, 191, 207, .28), transparent 70%),
    var(--ivory);
}
/* a fine paper grain for the printed, premium feel */
.welcome::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .1 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__powder { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* the wordmark, above the products so it always stays readable where they meet */
.welcome__title { position: relative; z-index: 3; text-align: center; padding-inline: var(--gutter); pointer-events: none; line-height: 0; }
.welcome__mark { display: block; height: clamp(120px, 26vh, 300px); width: auto; aspect-ratio: 2316 / 1356; color: var(--berry); }

/* floating bites: each has its own place, size and depth (--d, for the cursor parallax) */
.bite {
  --d: 20;
  position: absolute; z-index: 0; height: auto;
  translate: calc(var(--mx) * var(--d) * 1px) calc(var(--my) * var(--d) * 1px);
  filter: drop-shadow(0 16px 16px rgba(110, 0, 9, .18));
  animation: drift 7s ease-in-out infinite;
  transition: translate 1s var(--ease-out), opacity .8s ease, scale 1.1s var(--ease-spring);
}
.js .bite { opacity: 0; scale: .3; }
.welcome.is-in .bite, .no-js .bite { opacity: 1; scale: 1; }
.bite--1 { left: -2.5%; top: 34%; width: 9vw; --d: -34; }
.bite--2 { left: 9%; top: 15%; width: 4.6vw; --d: 14; filter: blur(1.5px) drop-shadow(0 10px 10px rgba(110, 0, 9, .12)); animation-delay: -2s; transition-delay: 0s, .1s, .1s; }
.bite--3 { right: 8%; top: 13%; width: 5.4vw; --d: 18; animation-delay: -4s; transition-delay: 0s, .2s, .2s; }
.bite--4 { right: -2.5%; top: 46%; width: 8.4vw; --d: -30; animation-delay: -1s; transition-delay: 0s, .3s, .3s; }
.bite--5 { left: 3%; bottom: 7%; width: 5.2vw; z-index: 3; --d: -44; animation-delay: -3s; transition-delay: 0s, .4s, .4s; }
.bite--6 { right: 4%; bottom: 6%; width: 6.4vw; z-index: 3; --d: -40; animation-delay: -5s; transition-delay: 0s, .5s, .5s; }
.bite--7 { left: 30%; top: 30%; width: 3.6vw; --d: 10; filter: blur(2px) drop-shadow(0 8px 8px rgba(110, 0, 9, .1)); animation-delay: -2.5s; transition-delay: 0s, .6s, .6s; }
.bite--8 { right: 28%; top: 31%; width: 3.2vw; --d: 12; filter: blur(2px) drop-shadow(0 8px 8px rgba(110, 0, 9, .1)); animation-delay: -6s; transition-delay: 0s, .7s, .7s; }
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-18px) rotate(7deg); }
}

/* the three ranges, standing side by side with room between them */
.trio {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(30px, 5.5vh, 64px);
  display: flex; justify-content: center; align-items: flex-end; gap: clamp(20px, 3vw, 56px); padding-inline: var(--gutter);
}
/* all three products stand the same height (each image is cropped so the product fills it the same way),
   so the wide mochi and soufflé simply take more width than the tall matcha cup */
.trio { --trio-h: min(36vh, 21vw); }
.trio__item { position: relative; }
.trio__item--mochi { z-index: 2; }
.trio__item--mochi { --ar: 1.585; }
.trio__item--souffle { --ar: 1.378; }
.trio__item--matcha { --ar: 0.871; }
.trio__link { display: flex; flex-direction: column; align-items: center; }
.trio__art { position: relative; display: block; height: calc(var(--trio-h) * var(--scale, 1)); aspect-ratio: var(--ar); }
/* a mochi is a small, two-bite thing: kept a little smaller than the soufflé and the cup so it reads true to size */
.trio__item--mochi .trio__art { --scale: .7; }
/* soft ground shadow (it also pulses when a product does its move) */
.trio__art::before {
  content: ""; position: absolute; left: 16%; right: 16%; bottom: 0; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(110, 0, 9, .26), transparent);
}
.trio__prod { position: absolute; inset: 0; transform-origin: 50% 88%; }
.trio__prod img {
  width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 26px 24px rgba(110, 0, 9, .22));
  transition: scale .8s var(--ease-spring), rotate .8s var(--ease-spring);
}
.trio__link:hover .trio__prod img { scale: 1.05; rotate: -3deg; }
.trio__label { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: clamp(6px, 1.2vh, 14px); }
.trio__name { font-weight: 900; font-size: clamp(1.4rem, 2vw, 2.1rem); line-height: 1; letter-spacing: -.03em; }
.trio__meta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 12px; opacity: .85; }
.trio__meta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease-out); }
.trio__link:hover .trio__meta svg { transform: translateX(4px); }

/* each range has its own little move (main.js takes turns playing them) */
.trio__item--mochi.is-playing .trio__prod { animation: squish .95s var(--ease-out); }
.trio__item--souffle.is-playing .trio__prod { animation: jiggle 1.1s ease-out; }
.trio__item--matcha.is-playing .trio__prod { animation: sway 1.2s ease-in-out; }
.trio__item.is-playing .trio__art::before { animation: pulse .9s var(--ease-out); }
@keyframes squish {
  0%, 100% { transform: scale(1, 1); }
  18% { transform: scale(1.16, .82); }
  40% { transform: translateY(-7%) scale(.9, 1.12); }
  60% { transform: scale(1.05, .95); }
  80% { transform: scale(.98, 1.02); }
}
@keyframes jiggle {
  0%, 100% { transform: skewX(0); }
  14% { transform: skewX(-9deg) scaleY(.97); }
  30% { transform: skewX(7deg); }
  46% { transform: skewX(-5deg); }
  62% { transform: skewX(3deg); }
  78% { transform: skewX(-1.5deg); }
}
@keyframes sway {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-11deg); }
  44% { transform: rotate(8deg); }
  64% { transform: rotate(-4deg); }
  82% { transform: rotate(2deg); }
}
@keyframes pulse { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.25, 1.1); } }

@keyframes spin { to { transform: rotate(360deg); } }

.line { display: block; overflow: hidden; padding-block: .02em .06em; }
.line__in { display: inline-block; will-change: transform; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- Marquee ---------- */
.marquee {
  background: var(--berry); color: var(--pink);
  overflow: hidden; padding-block: clamp(16px, 2vw, 26px);
  transform: rotate(-1.6deg) scale(1.04); margin-block: -10px;
  position: relative; z-index: 3;
}
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; flex-shrink: 0; }
.marquee__group > * { font-weight: 900; font-size: clamp(1.6rem, 3.4vw, 3.4rem); letter-spacing: -.02em; padding-inline: clamp(14px, 1.6vw, 26px); white-space: nowrap; }
.marquee__group b { font-size: clamp(1.1rem, 2vw, 2rem); display: inline-block; animation: spin 6s linear infinite; padding: 0; margin-inline: clamp(8px, 1vw, 16px); }

/* ---------- Story ---------- */
.story { background: var(--ivory); padding-top: clamp(80px, 9vw, 140px); }
.story__statement {
  font-weight: 800;
  font-size: clamp(1.75rem, 3.9vw, 4rem);
  line-height: 1.12; letter-spacing: -.025em;
  max-width: 44ch;
  text-wrap: pretty;
}
.story__statement em { font-style: normal; background: linear-gradient(var(--pink), var(--pink)) no-repeat 0 0 / 100% 100%; border-radius: .3em; padding: 0 .2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.story__statement .w { display: inline; }
.story__intro { margin-top: clamp(24px, 3vw, 40px); max-width: 60ch; font-size: clamp(18px, 1.45vw, 23px); line-height: 1.6; }
.story__toggle { margin-top: clamp(20px, 2.2vw, 30px); }
/* the full story opens under "See more" (always shown without JavaScript) */
.js .story__more:not(.is-open) { display: none; }
/* each part of About us (Our story, A world of wonder) starts on its own, set apart from the one above */
.story__part { margin-top: clamp(64px, 8vw, 120px); }
.story__part .story__lead { margin-bottom: clamp(14px, 1.6vw, 22px); }
.story__subhead { font-weight: 900; font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1; letter-spacing: -.035em; margin-bottom: clamp(14px, 1.6vw, 22px); }
.story__text { max-width: 62ch; font-size: clamp(17px, 1.25vw, 20px); line-height: 1.6; }
.story__part .story__text + .story__more .story__body { margin-top: 1em; }
.story__lead { font-weight: 800; font-size: clamp(1.25rem, 1.9vw, 1.75rem); line-height: 1.3; letter-spacing: -.01em; max-width: 40ch; }
.story__body {
  columns: 2 340px; column-gap: clamp(32px, 5vw, 80px);
  margin-top: clamp(40px, 5vw, 72px); max-width: 1100px;
  font-size: clamp(17px, 1.25vw, 20px); line-height: 1.6;
}
.story__body p { break-inside: avoid; margin-bottom: 1em; }
.story__more .story__body { columns: auto; margin-top: 1em; max-width: 62ch; font-size: clamp(17px, 1.25vw, 20px); }
.story__signoff {
  margin-top: clamp(20px, 2.4vw, 32px); font-size: clamp(1.15rem, 1.7vw, 1.6rem); font-weight: 800; letter-spacing: -.01em;
}
.story__signoff strong { font-weight: 900; background: var(--pink); border-radius: .3em; padding: 0 .25em; }

/* About us runs across the page: each part's heading on the left, its words on the right */
.story .story__part {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr); column-gap: clamp(32px, 6vw, 110px); align-items: start;
  margin-top: clamp(48px, 6vw, 96px); padding-top: clamp(32px, 4vw, 56px); border-top: 2px solid rgba(155, 1, 13, .12);
}
.story .story__part--first { margin-top: 0; padding-top: 0; border-top: 0; }
.story .story__part > * { grid-column: 2; }
.story .story__part > :first-child { grid-column: 1; grid-row: 1 / span 6; margin: 0; }
.story .story__part :is(.story__text, .story__lead), .story .story__intro, .story .story__more .story__body { max-width: none; }
.story .story__intro { margin-top: 0; }
.story .story__toggle { justify-self: start; }
.story__grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(56px, 7vw, 110px);
}
.pillar {
  background: var(--pink-soft); border-radius: var(--radius);
  padding: clamp(12px, 1.2vw, 16px) clamp(12px, 1.2vw, 16px) clamp(24px, 2.6vw, 36px);
  display: flex; flex-direction: column;
  transition: transform .6s var(--ease-spring), background .4s;
}
.pillar:hover { transform: translateY(-8px) rotate(-.6deg); background: var(--pink); }
/* each card opens with a photo from the shop */
.pillar__img { display: block; aspect-ratio: 4 / 4.4; border-radius: calc(var(--radius) - 8px); overflow: hidden; background: var(--cream-warm); }
.pillar__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; transition: scale 1.1s var(--ease-out); }
.pillar:hover .pillar__img img { scale: 1.05; }
.pillar h3 { padding: clamp(20px, 2vw, 28px) clamp(10px, 1.4vw, 22px) 0; font-weight: 900; font-size: clamp(1.4rem, 1.8vw, 1.9rem); line-height: 1.1; margin-bottom: 10px; }
.pillar p { padding-inline: clamp(10px, 1.4vw, 22px); opacity: .85; font-weight: 600; }
/* one wide card: photo on the left, words on the right */
.pillar--wide { display: grid; grid-template-columns: 1.35fr 1fr; align-items: center; gap: clamp(20px, 3vw, 48px); padding: clamp(12px, 1.2vw, 16px); }
.pillar--wide .pillar__img { aspect-ratio: 4 / 3; }
.pillar--wide .pillar__body { padding: clamp(8px, 2vw, 32px) clamp(8px, 2vw, 40px) clamp(8px, 2vw, 32px) 0; }
.pillar--wide h3 { padding: 0; font-size: clamp(1.8rem, 3vw, 3rem); margin-bottom: 14px; }
.pillar--wide p { padding: 0; font-size: clamp(16px, 1.3vw, 20px); max-width: 32ch; }
.pillar--wide:hover { transform: translateY(-6px); }


/* ---------- Range cards ("other ranges" on each range page) ---------- */
.section-head__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.ranges__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.ranges__grid--two { grid-template-columns: repeat(2, 1fr); }
.range-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--pink-soft); border-radius: var(--radius);
  padding: clamp(12px, 1.1vw, 16px);
  transition: transform .6s var(--ease-spring), background .4s;
}
.range-card:hover { transform: translateY(-8px); background: var(--pink); }
.range-card__media {
  display: block; aspect-ratio: 1 / 1.08; overflow: hidden;
  border-radius: calc(var(--radius) - 8px); background: var(--ivory-deep);
}
.ranges__grid--two .range-card__media { aspect-ratio: 16 / 11; }
.range-card__media img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 50%; transition: scale 1.1s var(--ease-out); }
.range-card:hover .range-card__media img { scale: 1.06; }
/* cut-out photos sit whole inside the frame instead of filling it */
.range-card__media img.is-cutout, .range-hero__frame img.is-cutout { height: 100%; object-fit: contain; padding: 10%; }
.range-hero__frame img.is-cutout { padding: 14% 8% 10%; }
.range-card__body { flex: 1; display: flex; flex-direction: column; padding: clamp(18px, 2vw, 28px) clamp(8px, 1.1vw, 16px) clamp(8px, 1.1vw, 16px); }
.range-card__title { font-weight: 900; font-size: clamp(2.4rem, 4vw, 4.2rem); line-height: .95; letter-spacing: -.04em; margin: 18px 0 12px; }
.range-card__text { opacity: .85; max-width: 36ch; margin-bottom: 28px; }
.range-card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Flavours + range pages: category row ---------- */
.cats {
  position: relative; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
  padding: calc(var(--nav-h) + 16px) var(--gutter) 0;
}
.cats a {
  padding: 10px 22px 11px; border-radius: 99px; border: 2px solid rgba(155, 1, 13, .14);
  background: rgba(255, 255, 255, .6); font-weight: 900; font-size: 15px;
  transition: background .4s, color .4s, border-color .4s;
}
.cats a:hover { border-color: var(--berry); }
.cats a[aria-current="page"] { background: var(--berry); border-color: var(--berry); color: var(--cream); }
.cats + .range-hero { padding-top: clamp(32px, 5vw, 72px); }

/* ---------- Flavours page ---------- */
.range-hero.range-hero--flavours { text-align: center; padding-bottom: clamp(40px, 5vw, 72px); }
.range-hero--flavours .range-hero__title { font-size: clamp(3.2rem, 8vw, 8rem); }
.range-hero--flavours .range-hero__lede { margin-inline: auto; margin-bottom: 28px; }
.range-hero.range-hero--flavours .hero__ctas { justify-content: center; }
.flav-group { padding-block: clamp(64px, 8vw, 120px); }

/* ---------- Range page: intro ---------- */
.range-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + clamp(32px, 6vw, 80px)) 0 clamp(72px, 9vw, 140px);
  background:
    radial-gradient(45% 60% at 92% 30%, rgba(252, 191, 207, .5), transparent 70%),
    var(--ivory);
}
.range-hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(36px, 5vw, 96px); align-items: center; }
.range-hero__title { font-weight: 900; font-size: clamp(3.6rem, 11vw, 11.5rem); line-height: .9; letter-spacing: -.05em; margin-bottom: clamp(20px, 2.4vw, 36px); }
.range-hero__lede { font-size: clamp(17px, 1.35vw, 22px); max-width: 44ch; }
.range-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(24px, 2.4vw, 32px) 0 clamp(28px, 3vw, 40px); }
.range-facts li { font-family: var(--f-mono); font-size: 13px; padding: 8px 16px; border-radius: 99px; background: var(--pink-soft); }
.range-hero .hero__ctas { justify-content: flex-start; }
.range-hero__media { position: relative; max-width: 520px; width: 100%; justify-self: end; }
.range-hero__frame {
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--pink);
  border-radius: var(--radius);
  box-shadow: 0 40px 80px -40px rgba(110, 0, 9, .35);
}
.range-hero__frame img { width: 100%; height: 116%; object-fit: cover; object-position: 50% 50%; }

/* ---------- Range page: varieties ---------- */
.varieties { background: var(--ivory); overflow: hidden; }
.bg-word {
  position: absolute; top: 6%; left: 50%; transform: translateX(-50%);
  font-size: clamp(7rem, 26vw, 28rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 2px rgba(155, 1, 13, .08);
  pointer-events: none; user-select: none;
}
.mochi__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 48px) clamp(16px, 2vw, 32px); position: relative; }
.mochi__grid .p-card:nth-child(3n+2) { margin-top: clamp(0px, 6vw, 96px); }
/* product photos are cut-outs with their ground shadow baked in: no frame, they stand right on the page */
.p-card__media, .s-card__arch, .m-card__media { position: relative; }
.p-card__media { aspect-ratio: 8 / 5; }
.p-card__media img {
  --px: 0%; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; translate: var(--px) 0;
  transition: scale .9s var(--ease-spring), rotate .9s var(--ease-spring);
}
.p-card:hover .p-card__media img { scale: 1.06; rotate: -2deg; }
.p-card__body { padding: 20px 6px 0; position: relative; }

.souffle__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); position: relative; }
.s-card:nth-child(3n+2) { margin-top: clamp(0px, 8vw, 140px); }
.s-card__arch { aspect-ratio: 4 / 3; margin-bottom: 24px; transform-origin: 50% 100%; }
.s-card__arch img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.s-card:hover .s-card__arch { animation: jiggle .9s var(--ease-out); }
@keyframes jiggle {
  0% { transform: scale(1, 1); }
  20% { transform: scale(1.04, .95); }
  40% { transform: scale(.97, 1.04); }
  60% { transform: scale(1.02, .98); }
  80% { transform: scale(.995, 1.005); }
  100% { transform: scale(1, 1); }
}

.matcha__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2vw, 28px); position: relative; padding-bottom: clamp(0px, 6vw, 90px); }
.m-card:nth-child(even) { transform: translateY(clamp(0px, 6vw, 90px)); }
.m-card__media { aspect-ratio: 3 / 4; margin-bottom: 20px; transform-style: preserve-3d; will-change: transform; }

/* ---------- Range page: other ranges ---------- */
.more-ranges { background: var(--ivory); }
.m-card__media img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transition: transform 1s var(--ease-out); }
/* phones: mochi and matcha photos sit a little smaller inside their cards (range pages and the all-flavours page) */
@media (max-width: 640px) {
  :is(.varieties, .flav-group) :is(.p-card__media, .m-card__media) img { padding-inline: 15%; padding-top: 9%; }
}
.m-card:hover .m-card__media img { transform: scale(1.05); }

.more-ranges__title {
  font-weight: 900; font-size: clamp(2.4rem, 6.5vw, 6.8rem); line-height: .95; letter-spacing: -.04em;
  margin-bottom: clamp(56px, 7vw, 110px);
}

/* ---------- Moffy ---------- */
.moffy { background: var(--ivory); overflow: hidden; }
.moffy__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.moffy__stage { position: relative; isolation: isolate; perspective: 1000px; display: grid; place-items: center; }
/* a soft pink glow behind Moffy, and a few mochi floating around, so the stage doesn't sit empty */
.moffy__stage::before {
  content: ""; position: absolute; z-index: -1; inset: 6% 8% 10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(252, 191, 207, .75), rgba(252, 191, 207, .25) 62%, transparent);
}
.moffy__bite { position: absolute; z-index: 1; height: auto; pointer-events: none; filter: drop-shadow(0 12px 14px rgba(110, 0, 9, .16)); animation: drift 7s ease-in-out infinite; }
.moffy__bite--1 { width: clamp(64px, 7vw, 110px); left: 2%; top: 14%; }
.moffy__bite--2 { width: clamp(52px, 5.4vw, 86px); right: 4%; top: 6%; animation-delay: -3s; }
.moffy__bite--3 { width: clamp(56px, 6vw, 96px); right: 0; bottom: 18%; animation-delay: -5s; }
/* Moffy's little film, background cut out so Moffy stands right on the page (the floor shadow is in the video) */
.moffy__figure { position: relative; width: min(100%, 640px); margin-block: -6% -4%; cursor: pointer; transform-style: preserve-3d; will-change: transform; }
.moffy__figure video { display: block; width: 100%; height: auto; aspect-ratio: 1; pointer-events: none; background: transparent; }
.moffy__title { font-weight: 900; font-size: clamp(3.4rem, 8vw, 8.4rem); line-height: .9; letter-spacing: -.045em; margin-bottom: 24px; }
.moffy__title span { display: inline-block; color: var(--pink); -webkit-text-stroke: .05em var(--berry); paint-order: stroke fill; }
.moffy__text { font-size: clamp(17px, 1.35vw, 22px); max-width: 36ch; }
.moffy__hint { font-family: var(--f-mono); font-size: 13px; margin-top: 22px; opacity: .7; }

/* ---------- Find us ---------- */
.find { background: var(--ivory); }
/* one continuous page colour, so the gaps between about us, Moffy and find us are kept tight */
.story.section { padding-bottom: clamp(48px, 6vw, 96px); }
.moffy.section { padding-block: clamp(24px, 3vw, 48px); }
.find.section { padding-block: clamp(48px, 6vw, 96px); }
.find__grid { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: clamp(32px, 5vw, 96px); align-items: center; }
.find__title { font-weight: 900; font-size: clamp(3rem, 7.4vw, 7.6rem); line-height: .92; letter-spacing: -.045em; }
.find__card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: clamp(28px, 3vw, 44px); border-radius: var(--radius); background: var(--pink-soft);
}
.find__label { font-family: var(--f-mono); font-size: 13px; opacity: .85; }
.find__value { font-weight: 900; font-size: clamp(1.5rem, 2.4vw, 2.3rem); line-height: 1.05; letter-spacing: -.03em; }
.find__text { opacity: .85; margin-bottom: 14px; }

/* ---------- Footer: explore links + a small "come say hello" box ---------- */
.footer { background: var(--ivory-deep); padding-top: clamp(56px, 6vw, 96px); overflow: hidden; }
.footer__top { display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: 32px; align-items: start; padding-bottom: clamp(48px, 6vw, 88px); }
.footer__col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font-weight: 800; font-size: clamp(17px, 1.3vw, 20px); }
.footer__col :is(a, .footer__link) { position: relative; }
.footer__col :is(a, .footer__link)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out); }
.footer__col :is(a, .footer__link):hover::after { transform: scaleX(1); transform-origin: left; }
.footer__link { font: inherit; color: inherit; line-height: inherit; }
.footer__label { font-family: var(--f-mono); font-size: 12px; font-weight: 500; opacity: .7; margin-bottom: 8px; }
.say-hello { background: var(--pink-soft); border-radius: var(--radius); padding: clamp(22px, 2.4vw, 32px); }
.say-hello__title { font-weight: 900; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1; letter-spacing: -.03em; }
.say-hello__text { margin-top: 10px; opacity: .85; max-width: 36ch; }
.to-top { font-family: var(--f-mono); font-size: 12px; }
.to-top:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__end { display: inline-flex; align-items: center; gap: 16px; }
.footer__credit { opacity: .55; transition: opacity .3s; }
.footer__credit:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.footer__admin { opacity: .55; text-decoration: underline; text-underline-offset: 3px; transition: opacity .3s; }
.footer__admin:hover { opacity: 1; }
/* parent company, signed off just above the copyright line */
.footer__house { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: clamp(28px, 3.4vw, 44px); }
.footer__house span { font-family: var(--f-mono); font-size: 12px; opacity: .7; }
.footer__house img { width: clamp(110px, 9vw, 140px); height: auto; }
.footer__bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 12px; padding-block: 24px;
  border-top: 2px solid rgba(155, 1, 13, .15);
}

/* email / instagram / facebook: icon-only buttons, each turns its own brand colour on hover */
.socials { display: flex; gap: 12px; margin-top: 18px; }
.social {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--berry); color: var(--cream);
  transition: transform .5s var(--ease-spring), background .3s;
}
.social svg { width: 24px; height: 24px; }
.social:hover { transform: translateY(-3px) rotate(-6deg); }
.social--threads:hover { background: #000; }
.social--instagram:hover { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.social--facebook:hover { background: #1877F2; }

/* ---------- Careers dialog ---------- */
.careers-dialog {
  margin: auto; border: 0; width: min(92vw, 520px); max-width: none;
  padding: clamp(28px, 3.4vw, 44px); border-radius: var(--radius);
  background: var(--ivory); color: var(--berry);
  box-shadow: 0 40px 120px -20px rgba(74, 0, 6, .55);
}
.careers-dialog::backdrop { background: rgba(74, 0, 6, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.careers-dialog[open] { animation: pop .6s var(--ease-spring); }
.careers-dialog__title { font-weight: 900; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; letter-spacing: -.04em; margin: 8px 44px 18px 0; }
.careers-dialog p + p { margin-top: 12px; }
.careers-dialog p a { text-decoration: underline; text-underline-offset: 3px; font-weight: 800; }
.careers-dialog .btn { margin-top: 26px; }
.dialog-close {
  position: absolute; top: 14px; right: 14px;
  width: 42px; height: 42px; border-radius: 50%; background: var(--pink); color: var(--berry); font-size: 16px;
  transition: transform .5s var(--ease-spring);
}
.dialog-close:hover { transform: rotate(90deg); }

/* ---------- Menu dialog ---------- */
/* the close button sits above the card's corner, so it never covers the menu itself */
.menu-dialog {
  margin: auto; border: 0; padding: 56px 0 0; overflow: visible; background: none;
  /* sized so the whole menu card fits on screen at once (card is 1600 × 2000) */
  width: min(92vw, calc((92svh - 56px) * 1600 / 2000)); max-width: none; max-height: none;
}
/* laptops: the card uses the full screen height and the ✕ moves beside it, so the whole menu shows as large as possible */
@media (min-width: 900px) {
  .menu-dialog { padding-top: 0; width: min(84vw, calc(96svh * 1600 / 2000)); }
  .menu-dialog .menu-dialog__card { max-height: 96svh; }
  .menu-dialog .menu-dialog__close { right: -58px; }
}
.menu-dialog::backdrop { background: rgba(74, 0, 6, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.menu-dialog[open] { animation: pop .6s var(--ease-spring); }
.menu-dialog__card {
  max-height: calc(92svh - 56px); overflow: auto; overscroll-behavior: contain;
  border-radius: var(--radius); background: var(--ivory); box-shadow: 0 40px 120px -20px rgba(74, 0, 6, .55);
}
.menu-dialog img { width: 100%; height: auto; }
.menu-dialog__close {
  position: absolute; top: 0; right: 0;
  width: 42px; height: 42px; border-radius: 50%; background: var(--pink); color: var(--berry); font-size: 16px;
  box-shadow: 0 6px 18px -6px rgba(74, 0, 6, .45);
  transition: transform .5s var(--ease-spring);
}
.menu-dialog__close:hover { transform: rotate(90deg); }
@keyframes pop { from { opacity: 0; transform: scale(.9) translateY(30px); } to { opacity: 1; transform: none; } }

/* ---------- JS-driven initial states ---------- */
.js :is(.welcome__title, .range-hero__title) .line__in { transform: translateY(110%); }
.js [data-hero-fade] { opacity: 0; }
.js [data-reveal]:not(.is-revealed) { opacity: 0; transform: translateY(40px); }
.no-anim [data-reveal], .no-anim [data-hero-fade], .no-anim .welcome__title .line__in, .no-anim .range-hero__title .line__in { opacity: 1 !important; transform: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav { display: flex; justify-content: space-between; }
  .nav__links { display: none; }
  .burger { display: block; }
  .matcha__grid { grid-template-columns: repeat(2, 1fr); }
  .m-card:nth-child(even) { transform: translateY(60px); }
  .matcha__grid { padding-bottom: 60px; }
}

@media (max-width: 900px) {
  :root { --nav-h: 72px; }
  .logo-mark { height: 42px; }
  .section-head { grid-template-columns: 1fr; gap: 20px; }

  .story__grid { grid-template-columns: 1fr; }
  .story .story__part { grid-template-columns: 1fr; row-gap: 14px; }
  .story .story__part > * { grid-column: 1; }
  .story .story__part > :first-child { grid-row: auto; }
  .pillar--wide { grid-template-columns: 1fr; padding-bottom: clamp(24px, 4vw, 36px); }
  .pillar--wide .pillar__body { padding: 0 clamp(10px, 2vw, 22px); }
  
  .ranges__grid, .ranges__grid--two { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .range-card__media, .ranges__grid--two .range-card__media { aspect-ratio: 4 / 3.4; }

  .range-hero__grid { grid-template-columns: 1fr; }
  .range-hero__media { justify-self: center; max-width: 420px; }
  .mochi__grid { grid-template-columns: repeat(2, 1fr); }
  .mochi__grid .p-card:nth-child(3n+2) { margin-top: 0; }
  .mochi__grid .p-card:nth-child(even) { margin-top: 48px; }

  .souffle__grid { grid-template-columns: 1fr; gap: 56px; max-width: 520px; margin-inline: auto; }
  .s-card:nth-child(3n+2) { margin-top: 0; }

  .moffy__grid { grid-template-columns: 1fr; }
  .find__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .welcome { height: auto; min-height: 100svh; max-height: none; padding-top: calc(var(--nav-h) + 28px); }
  .welcome__mark { height: clamp(96px, 30vw, 150px); }
  /* phones: the mochi large on top, soufflé and matcha side by side below */
  .trio { position: relative; bottom: auto; margin-top: auto; padding-bottom: 36px; padding-inline: 8px; flex-wrap: wrap; gap: 6px 8vw; }
  .trio { --trio-h: 34vw; }
  .trio__item--mochi { order: -1; width: 100%; }
  .trio__item--mochi .trio__link { width: fit-content; margin-inline: auto; }
  .trio__item--mochi .trio__art { --scale: .8; }
  .trio__name { font-size: clamp(1rem, 4.8vw, 1.3rem); }
  .trio__meta { font-size: 10.5px; }
  .trio__meta svg { display: none; }
  .bite--1 { width: 17vw; top: 34%; }
  .bite--4 { width: 15vw; top: 52%; }
  .bite--2, .bite--3, .bite--5, .bite--6, .bite--7, .bite--8 { display: none; }
  .cats { gap: 6px; }
  .cats a { padding: 8px 14px 9px; font-size: 14px; }
  .btn { height: 54px; padding: 0 24px; }
  .hero__ctas { flex-direction: column; width: 100%; max-width: 340px; }
  .hero__ctas .btn { justify-content: center; }
  .matcha__grid { grid-template-columns: 1fr; gap: 48px; max-width: 460px; margin-inline: auto; padding-bottom: 0; }
  .m-card:nth-child(even) { transform: none; }
  .mochi__grid { grid-template-columns: 1fr; gap: 48px; max-width: 460px; margin-inline: auto; }
  .mochi__grid .p-card:nth-child(even) { margin-top: 0; }
  .footer__top { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- CMS states ---------- */
.is-empty-cat { display: none !important; }