/* Janjar — "Сила солнца"
   Follows the client's Figma page (design/Slide 15.pdf, a 1920 px wide frame).
   On desktop every size and place is written in frame pixels times --k, and the frame is centred
   (--off) on screens wider than it; phones get their own layout below 900 px.
   Sunflower orange #EB5F2D, cream paper #FBF3EA, Onest throughout. */

:root {
  --orange: #eb5f2d;
  --orange-dark: #cf4a1b;
  --orange-soft: #f5a37f;
  --cream: #fbf3ea;
  --paper: #f8f8f0;
  --ink: #2a211f;
  --text: #2d2b2b;
  --muted: #777;
  --yellow: #f6c21c;
  --line: rgba(42, 33, 31, .14);

  --font: "Onest", system-ui, sans-serif;

  /* one frame pixel; capped so very wide screens do not blow the type up */
  --k: min(calc(100vw / 1920), 1.25px);
  /* left edge of the frame on screens wider than the capped frame */
  --off: max(0px, calc((100vw - 1920 * var(--k)) / 2));
  /* the scalloped edges stay readable on phones */
  --wk: max(var(--k), .3px);

  --t-h2: max(40px, calc(120 * var(--k)));
  --t-h3: max(28px, calc(65 * var(--k)));
  --t-body: max(16px, calc(29 * var(--k)));

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background: var(--cream);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p, figure { margin: 0; }
p { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--orange); color: var(--cream); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
/* Lenis (vendor/lenis-1.3.26.css) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* big uppercase headings */
.title { font-size: var(--t-h2); font-weight: 800; line-height: 1.1; text-transform: uppercase; letter-spacing: 0; }

/* headings split into lines by main.js: each line rises out of its own mask */
.lines .line { display: block; overflow: clip; overflow-clip-margin: .14em; padding-bottom: .04em; }
.lines .line__in { display: block; }

/* petals and glows placed in frame pixels: --x / --y / --w, optional turn --r */
.drift { position: absolute; z-index: 1; left: calc(var(--off) + var(--x) * var(--k)); top: calc(var(--y) * var(--k)); width: calc(var(--w) * var(--k)); max-width: none; rotate: var(--r, 0deg); pointer-events: none; will-change: transform; }

/* scalloped edges: a row of circles (r 174.5, every 339 px, 48 px of them showing), as in the frame */
.scallop-up::before, .scallop-down::after {
  content: ""; position: absolute; left: 0; right: 0; height: calc(48 * var(--wk)); z-index: 2; pointer-events: none;
  background-repeat: repeat-x; background-size: calc(339.08 * var(--wk)) 100%;
  background-position-x: calc(var(--off) - 57 * var(--wk));
}
.scallop-up::before {
  top: calc(-48 * var(--wk) + 1px);
  background-image: radial-gradient(circle calc(174.5 * var(--wk)) at 50% calc(174.5 * var(--wk)), var(--cream) calc(100% - 1px), transparent 100%);
}
.scallop-down::after {
  top: calc(100% - 1px);
  background-image: radial-gradient(circle calc(174.5 * var(--wk)) at 50% calc(-126.5 * var(--wk)), var(--cream) calc(100% - 1px), transparent 100%);
}

/* ---------------------------------------------------------------- nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: calc(226 * var(--k));
  color: var(--cream); pointer-events: none;
  transition: height .4s var(--ease-out);
}
.nav > * { pointer-events: auto; }
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: rgba(235, 95, 45, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(120, 40, 10, .12);
  transition: opacity .35s ease;
}
.nav.is-scrolled { height: max(64px, calc(112 * var(--k))); }
.nav.is-scrolled::before { opacity: 1; }
.nav__menu-btn {
  position: absolute; left: calc(var(--off) + 92 * var(--k)); top: 50%; translate: 0 -50%;
  display: grid; place-items: center; padding: 10px 8px; margin: 0; background: none; border: 0; cursor: pointer;
}
.nav__menu-btn svg { width: max(22px, calc(28 * var(--k))); height: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .3s var(--ease-out); }
.nav__menu-btn:hover svg { transform: scaleX(.8); transform-origin: left; }
.nav__logo { position: absolute; left: 50%; top: 50%; width: max(112px, calc(238 * var(--k))); translate: -50% -50%; transition: width .4s var(--ease-out); }
.nav__logo img { width: 100%; }
.nav.is-scrolled .nav__logo { width: max(104px, calc(170 * var(--k))); }

.lang { position: absolute; right: calc(var(--off) + 92 * var(--k)); top: 50%; translate: 0 -50%; }
.lang__btn {
  display: inline-flex; align-items: center; gap: max(6px, calc(8 * var(--k)));
  padding: 10px 8px; background: none; border: 0; cursor: pointer;
  font-size: max(14px, calc(20 * var(--k))); font-weight: 600; letter-spacing: .04em; line-height: 1;
}
.lang__chev { width: max(9px, calc(10 * var(--k))); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease-out); }
.lang__btn[aria-expanded="true"] .lang__chev { transform: rotate(180deg); }
.lang__list {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; padding: 6px;
  background: var(--cream); color: var(--ink); border-radius: 14px; box-shadow: 0 14px 40px rgba(120, 40, 10, .25);
  transform-origin: top right; animation: pop .18s var(--ease-out);
}
.lang__list a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; text-decoration: none; font-size: 15px; font-weight: 700; }
.lang__list small { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--muted); }
.lang__list a:hover { background: #f6e3d3; }
.lang__list a[aria-current="true"] { background: var(--orange); color: var(--cream); }
.lang__list a[aria-current="true"] small { color: var(--cream); opacity: .8; }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(-4px); } }

/* ---------------------------------------------------------------- menu */
.menu { position: fixed; inset: 0; z-index: 60; }
.menu__scrim { position: absolute; inset: 0; background: rgba(60, 20, 5, .4); opacity: 0; transition: opacity .35s ease; }
.menu__panel {
  position: absolute; left: 0; top: 0; bottom: 0; width: min(560px, 92vw); overflow-y: auto;
  display: flex; flex-direction: column; padding: max(28px, calc(80 * var(--k))) max(24px, calc(92 * var(--k))) 36px;
  color: var(--cream); background: var(--orange);
  transform: translateX(-100%); transition: transform .5s var(--ease-out);
}
.menu.is-open .menu__scrim { opacity: 1; }
.menu.is-open .menu__panel { transform: none; }
.menu__close { align-self: flex-start; width: 44px; height: 44px; margin: -10px 0 0 -10px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; }
.menu__close svg { width: 20px; stroke: var(--cream); stroke-width: 2; stroke-linecap: round; }
.menu__logo { width: 150px; margin: 34px 0 30px; }
.menu__links { display: grid; gap: 2px; }
.menu__links a { display: inline-block; padding: 8px 0; font-size: clamp(28px, 3vw, 42px); font-weight: 700; line-height: 1.1; text-transform: uppercase; text-decoration: none; transition: color .2s ease, translate .3s var(--ease-out); }
.menu__links a:hover { color: #ffe0b8; translate: 6px 0; }
.menu__foot { margin-top: auto; padding-top: 40px; display: grid; gap: 8px; font-size: 18px; font-weight: 600; }
.menu__foot a { text-decoration: none; }

/* ---------------------------------------------------------------- 1–2. the orange top */
.sun { position: relative; height: calc(2512 * var(--k)); background: var(--orange); color: var(--cream); }
.hero, .intro { position: absolute; left: 0; right: 0; }
.hero { top: 0; height: calc(1300 * var(--k)); }
.intro { top: calc(1300 * var(--k)); height: calc(1212 * var(--k)); }
.hero > :not(.drift), .intro > :not(.drift) { position: absolute; }

.hero__flower { left: calc(var(--off) - 368 * var(--k)); top: calc(-467 * var(--k)); width: calc(854 * var(--k)); will-change: transform; }
.hero__flower img { width: 100%; animation: spin 90s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero__word { z-index: 2; top: calc(522 * var(--k)); font-size: max(56px, calc(168 * var(--k))); font-weight: 800; line-height: 1; text-transform: uppercase; white-space: nowrap; color: var(--cream); }
.hero__word span { display: block; }
.hero__word--l { left: calc(var(--off) + 143 * var(--k)); }
.hero__word--r { right: calc(var(--off) + 145 * var(--k)); }
.hero__lead { z-index: 2; left: calc(var(--off) + 1259 * var(--k)); top: calc(901 * var(--k)); width: calc(548 * var(--k)); font-size: max(16px, calc(28 * var(--k))); line-height: 1.5; }
.hero__lead span { display: block; }

.intro__title { z-index: 2; right: calc(var(--off) + 96 * var(--k)); top: calc(260 * var(--k)); font-size: var(--t-h3); font-weight: 800; line-height: 1.277; text-align: right; text-transform: uppercase; }
.intro__text { z-index: 2; right: calc(var(--off) + 100 * var(--k)); top: calc(660 * var(--k)); width: calc(910 * var(--k)); font-size: max(16px, calc(28 * var(--k))); line-height: 1.5; text-align: right; }
.intro__glow { z-index: 0; left: calc(var(--off) + 283.5 * var(--k)); top: calc(862.5 * var(--k)); width: calc(276.5 * var(--k)); max-width: none; }
.intro__slot {
  z-index: 3; left: calc(var(--off) + 198.45 * var(--k)); top: calc(-22.9 * var(--k));
  width: calc(330.5 * var(--k)); height: calc(1067.6 * var(--k)); rotate: -9.03deg;
}
.intro__slot img { width: 100%; height: 100%; }
.motion .intro__slot img { visibility: hidden; }

/* the flying bottle: placed at its hero pose; main.js moves it to the slot */
.fly { position: absolute; z-index: 3; left: calc(var(--off) + 695.65 * var(--k)); top: calc(139 * var(--k)); width: calc(330.5 * var(--k)); height: calc(1067.6 * var(--k)); rotate: -18.81deg; will-change: transform; }
.motion .fly { rotate: none; }
.fly__turn { position: absolute; inset: 0; }
.fly__face { position: absolute; inset: 0; width: 100%; height: 100%; }
.fly__face, .intro__slot img { filter: drop-shadow(calc(-14 * var(--k)) calc(34 * var(--k)) calc(34 * var(--k)) rgba(110, 30, 0, .28)); }

.blur { z-index: 0; }
/* the intro brings these in; until the script runs they wait hidden (shown as they are without motion) */
.js:not(.no-motion) .hero__word span, .js:not(.no-motion) .hero__lead span,
.js:not(.no-motion) .fly__turn, .js:not(.no-motion) .hero__flower,
.js:not(.no-motion) .hero .drift, .js:not(.no-motion) .intro .drift, .js:not(.no-motion) .nav > * { visibility: hidden; }
.page-recipes .nav > * { visibility: visible; }

/* ---------------------------------------------------------------- 3. the story */
.story { position: relative; z-index: 2; background: var(--cream); color: var(--text); padding: calc(226 * var(--k)) 0 calc(280 * var(--k)); }
.beat { display: grid; grid-template-columns: minmax(0, 1fr) calc(910 * var(--k)); column-gap: calc(40 * var(--k)); align-items: center; padding: 0 calc(var(--off) + 82 * var(--k)) 0 calc(var(--off) + 100 * var(--k)); }
.beat + .beat { margin-top: calc(170 * var(--k)); }
.beat--0 { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.beat__art { position: relative; grid-column: 2; grid-row: 1; width: calc(910 * var(--k)); height: calc(920 * var(--k)); }
.beat--0 .beat__art { grid-column: 1; width: calc(968 * var(--k)); height: calc(1036 * var(--k)); }
.beat__art img, .grains { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.grains { fill: var(--orange); overflow: visible; }
.beat__text { grid-column: 1; grid-row: 1; max-width: calc(850 * var(--k)); }
.beat__title { font-size: var(--t-h3); font-weight: 800; line-height: 1.277; text-transform: uppercase; color: var(--orange); }
.beat__text p { margin-top: calc(67 * var(--k)); max-width: 28em; font-size: var(--t-body); line-height: 1.55; color: var(--text); }

/* the grains of spice fall while that drawing is on */
.beat.is-on .grains path { animation: grain 1.5s cubic-bezier(.45, 0, .8, .6) infinite; animation-delay: calc(var(--i) * -.107s); transform-box: fill-box; }
@keyframes grain {
  0% { transform: translateY(-46px); opacity: 0; }
  18% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(54px); opacity: 0; }
}

/* wide screens with motion: the stage is pinned and the beats lie on top of one another */
.story.is-pinned { padding: 0; }
.is-pinned .story__stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.is-pinned .beat { position: absolute; inset: 0; display: block; padding: 0; margin: 0; }
.is-pinned .beat__art {
  --ah: min(calc(900 * var(--k)), calc(100svh - 200px));
  position: absolute; left: calc(var(--off) + 930 * var(--k)); top: calc(50% - var(--ah) / 2 + 34px);
  width: calc(910 * var(--k)); height: var(--ah); background: var(--cream); will-change: clip-path, transform;
}
.is-pinned .beat--0 .beat__art { --ah: min(calc(1000 * var(--k)), calc(100svh - 160px)); top: calc(50% - var(--ah) / 2 + 24px); }
.is-pinned .beat__text {
  position: absolute; left: calc(var(--off) + 100 * var(--k)); top: 0; bottom: 0; width: calc(850 * var(--k)); max-width: none;
  display: flex; flex-direction: column; justify-content: center; padding-top: 60px;
}
.is-pinned .beat:not(.beat--0) .beat__art { clip-path: circle(0% at var(--fx) var(--fy)); }
.is-pinned .beat__text { visibility: hidden; }

/* ---------------------------------------------------------------- 4. the field */
.film { position: relative; z-index: 2; height: calc(1149 * var(--k)); overflow: hidden; background: #3a2414; }
.film__video { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.film::after { content: ""; position: absolute; inset: 0; background: rgba(34, 34, 34, .15); pointer-events: none; }

/* ---------------------------------------------------------------- 5. recipes */
.recipes { position: relative; z-index: 4; height: calc(1314 * var(--k)); background: var(--cream); }
.recipes > * { position: absolute; margin: 0; }
.recipes__title { left: 0; right: 0; top: calc(286 * var(--k)); text-align: center; color: var(--ink); }
.recipes__title em { font-style: normal; color: var(--orange); }
.cats { left: calc(var(--off) + 99 * var(--k)); top: calc(531 * var(--k)); display: grid; grid-template-columns: repeat(3, calc(544 * var(--k))); column-gap: calc(45 * var(--k)); }
.cat {
  display: flex; flex-direction: column; height: calc(556 * var(--k)); padding: calc(33 * var(--k)) calc(42 * var(--k)) 0;
  border: 2px solid var(--orange); border-radius: max(16px, calc(24 * var(--k))); background: var(--paper);
  text-decoration: none; color: var(--ink);
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out);
}
.cat__name { display: flex; align-items: center; min-height: calc(90 * var(--k)); padding-right: calc(80 * var(--k)); font-size: max(18px, calc(40 * var(--k))); font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.cat { position: relative; }
.cat__go {
  position: absolute; right: calc(44 * var(--k)); top: calc(45 * var(--k)); display: grid; place-items: center; width: max(36px, calc(65 * var(--k))); aspect-ratio: 1; border-radius: 50%;
  background: var(--orange); color: var(--cream); transition: background-color .35s var(--ease-out), color .35s var(--ease-out), transform .4s var(--ease-out);
}
.cat__go svg { width: 34%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cat__img { display: block; margin-top: calc(70 * var(--k)); height: calc(318 * var(--k)); border-radius: max(8px, calc(10 * var(--k))); overflow: hidden; background: #efe2d2; }
.cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.cats:not(:hover) li:nth-child(3) .cat, .cat:hover, .cat:focus-visible { background: var(--orange); color: var(--cream); }
.cats:not(:hover) li:nth-child(3) .cat__go, .cat:hover .cat__go, .cat:focus-visible .cat__go { background: var(--cream); color: var(--orange); }
.cat:hover .cat__go { transform: rotate(-45deg); }
.cat:hover .cat__img img { transform: scale(1.06); }
.more {
  left: calc(50% - 210 * var(--k)); top: calc(1145 * var(--k)); width: calc(420 * var(--k)); height: max(48px, calc(63 * var(--k)));
  display: flex; align-items: center; justify-content: center; gap: calc(22 * var(--k));
  border-radius: 999px; background: var(--orange); color: #fff; text-decoration: none;
  font-size: max(15px, calc(28 * var(--k))); font-weight: 500; text-transform: uppercase; letter-spacing: .01em;
  transition: background-color .2s ease, scale .16s ease-out;
}
.more svg { width: max(14px, calc(22 * var(--k))); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease-out); }
.more:hover { background: var(--orange-dark); }
.more:hover svg { transform: translateX(5px); }
.more:active { scale: .98; }

/* ---------------------------------------------------------------- 6. range */
.range {
  position: relative; z-index: 3; height: calc(1660 * var(--k)); color: var(--cream); overflow: clip; overflow-clip-margin: calc(400 * var(--k));
  background: radial-gradient(50% 42% at 50% 56%, #f39a64 0%, rgba(243, 154, 100, .5) 45%, rgba(235, 95, 45, 0) 100%), var(--orange);
}
.range > :not(.drift) { position: absolute; }
.range__orb { left: calc(var(--off) + 0 * var(--k)); top: calc(156 * var(--k)); width: calc(445 * var(--k)); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(244, 170, 30, .95), rgba(244, 170, 30, .45) 45%, rgba(244, 170, 30, 0)); filter: blur(calc(8 * var(--k))); }
.range__title { left: 0; right: 0; top: calc(352 * var(--k)); text-align: center; }
.range__list { inset: 0; }
.pack { position: absolute; display: block; }
.pack--1 { left: calc(var(--off) + 275.85 * var(--k)); top: calc(939.4 * var(--k)); width: calc(202.7 * var(--k)); }
.pack--3 { left: calc(var(--off) + 829.4 * var(--k)); top: calc(843.1 * var(--k)); width: calc(265.2 * var(--k)); }
.pack--5 { left: calc(var(--off) + 1377.7 * var(--k)); top: calc(839.45 * var(--k)); width: calc(349.8 * var(--k)); }
.pack img { position: relative; z-index: 1; width: 100%; transition: transform .6s var(--ease-out); }
.pack::before {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: calc(-24 * var(--k)); height: calc(56 * var(--k));
  background: radial-gradient(50% 50% at 50% 50%, rgba(120, 30, 0, .32), transparent 72%); transition: transform .6s var(--ease-out), opacity .6s ease;
}
.pack__vol { position: absolute; left: 0; right: 0; top: calc(100% + 56 * var(--k)); text-align: center; font-size: max(15px, calc(30 * var(--k))); font-weight: 700; letter-spacing: .02em; }
@media (hover: hover) and (pointer: fine) {
  .pack:hover img { transform: translateY(calc(-22 * var(--k))) rotate(-2deg); }
  .pack:hover::before { transform: scale(.84); opacity: .7; }
}

/* ---------------------------------------------------------------- 7. scale */
.scale { position: relative; z-index: 2; height: calc(2119 * var(--k)); background: var(--orange); color: var(--cream); }
.scale > :not(.drift) { position: absolute; }
.scale__title { left: 0; right: 0; top: calc(203 * var(--k)); text-align: center; z-index: 2; }
.stats { z-index: 2; left: calc(var(--off) + 100 * var(--k)); top: calc(584 * var(--k)); display: grid; grid-template-columns: calc(505 * var(--k)) calc(608 * var(--k)) calc(505 * var(--k)); column-gap: calc(50 * var(--k)); }
.stat { display: flex; flex-direction: column; height: calc(429 * var(--k)); padding: calc(43 * var(--k)) calc(42 * var(--k)) calc(43 * var(--k)); background: var(--cream); color: var(--ink); border-radius: max(16px, calc(24 * var(--k))); }
.stat__head { font-size: max(16px, calc(41 * var(--k))); font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.stat__num { margin-top: auto; font-size: max(40px, calc(98 * var(--k))); font-weight: 800; line-height: 1; color: var(--orange); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.stat__unit { margin-top: calc(14 * var(--k)); font-size: max(15px, calc(36 * var(--k))); font-weight: 500; line-height: 1.2; }
.scale__bottle { z-index: 1; left: calc(var(--off) + 732.25 * var(--k)); top: calc(874.8 * var(--k)); width: calc(330.5 * var(--k)); height: calc(1067.6 * var(--k)); rotate: 45.09deg; }
.scale__bottle img { width: 100%; height: 100%; filter: drop-shadow(calc(-20 * var(--k)) calc(36 * var(--k)) calc(36 * var(--k)) rgba(110, 30, 0, .28)); will-change: transform; }

/* ---------------------------------------------------------------- 8. plant */
.plant { position: relative; z-index: 2; height: calc(1149 * var(--k)); overflow: hidden; background: #6f8fae; }
.plant__img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; max-width: none; object-fit: cover; will-change: transform; }
.plant::after { content: ""; position: absolute; inset: 0; background: rgba(34, 34, 34, .15); pointer-events: none; }

/* ---------------------------------------------------------------- 9. how */
.how { position: relative; z-index: 2; height: calc(1332 * var(--k)); background: var(--orange); color: var(--cream); }
.how > * { position: absolute; margin: 0; }
.how__title { left: 0; right: 0; top: calc(161 * var(--k)); text-align: center; }
.how__media { left: calc(var(--off) + 100 * var(--k)); top: calc(411 * var(--k)); width: calc(835 * var(--k)); height: calc(800 * var(--k)); border-radius: max(14px, calc(20 * var(--k))); overflow: hidden; background: #c9a35a; isolation: isolate; }
.how__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .9s ease, transform 6s linear; }
.how__shot.is-active { opacity: 1; transform: scale(1); z-index: 1; }
.how__bars { position: absolute; z-index: 2; left: 50%; bottom: calc(52 * var(--k)); translate: -50% 0; display: flex; gap: calc(10 * var(--k)); }
.how__bars i { position: relative; display: block; width: calc(85 * var(--k)); height: max(3px, calc(4 * var(--k))); border-radius: 4px; background: rgba(255, 255, 255, .45); overflow: hidden; }
.how__bars i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.how__bars i.is-done::after { transform: scaleX(1); }
.how__bars i.is-active::after { animation: bar var(--dur, 6s) linear forwards; }
.how.is-paused .how__bars i.is-active::after { animation-play-state: paused; }
.no-motion .how__bars i.is-active::after { animation: none; transform: scaleX(1); }
@keyframes bar { to { transform: scaleX(1); } }
.how__steps { left: calc(var(--off) + 985 * var(--k)); top: calc(412 * var(--k)); width: calc(845 * var(--k)); display: grid; gap: calc(44 * var(--k)); }
.step {
  display: block; width: 100%; padding: 0; text-align: left; background: none; border: 0; cursor: pointer;
  color: #fff; opacity: .5; transition: opacity .45s var(--ease-out);
}
.step:hover { opacity: .78; }
.step.is-active { opacity: 1; color: var(--cream); }
.step__title { display: block; font-size: max(18px, calc(40 * var(--k))); font-weight: 700; line-height: 1.3; text-transform: uppercase; }
.step__text { display: block; margin-top: calc(22 * var(--k)); font-size: var(--t-body); line-height: 1.55; max-width: 29em; }

/* ---------------------------------------------------------------- 10. where */
.where { position: relative; z-index: 2; height: calc(2135 * var(--k)); background: var(--orange); color: #fff; }
.where > :not(.drift) { position: absolute; }
.where__title { left: 0; right: 0; top: calc(162 * var(--k)); text-align: center; color: var(--cream); }
.where__map { left: calc(var(--off) + 120 * var(--k)); top: calc(400 * var(--k)); width: calc(1695 * var(--k)); }
.where__map img { width: 100%; }
.pin { position: absolute; left: 82.5%; top: 41%; width: 0; height: 0; }
.pin__drop { position: absolute; left: max(-14px, calc(-19 * var(--k))); top: max(-40px, calc(-54 * var(--k))); width: max(28px, calc(38 * var(--k))); overflow: visible; transform-origin: 50% 100%; }
.pin i { position: absolute; left: -16px; top: -30px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #95c11f; opacity: 0; animation: wave 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
.pin i + i { animation-delay: 1.3s; }
.pin b { position: absolute; left: -100px; width: 200px; text-align: center; top: calc(14 * var(--k)); font-size: max(13px, calc(28 * var(--k))); font-weight: 500; white-space: nowrap; color: var(--ink); }
@keyframes wave { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.where__text { left: calc(var(--off) + 100 * var(--k)); top: calc(1372 * var(--k)); width: calc(860 * var(--k)); }
.where__text h3 { font-size: max(20px, calc(40 * var(--k))); font-weight: 600; line-height: 1.2; }
.where__text p { margin-top: calc(34 * var(--k)); font-size: var(--t-body); line-height: 1.33; max-width: 28em; }
.where__text p + p { margin-top: calc(39 * var(--k)); }
.where__group { right: calc(var(--off) + 86 * var(--k)); top: calc(1372 * var(--k)); width: calc(474 * var(--k)); filter: brightness(0) invert(1) sepia(.12); }

/* ---------------------------------------------------------------- 11. partners and the form */
.meet { position: relative; z-index: 3; height: calc(2311 * var(--k)); background: var(--cream); color: var(--ink); }
.partners > .title { position: absolute; left: 0; right: 0; top: calc(206 * var(--k)); text-align: center; color: var(--orange); }
.partners__grid { position: absolute; left: calc(var(--off) + 292 * var(--k)); top: calc(434 * var(--k)); display: grid; grid-template-columns: repeat(3, calc(450 * var(--k))); column-gap: calc(62 * var(--k)); grid-auto-rows: calc(170 * var(--k)); row-gap: calc(40 * var(--k)); }
.partners__grid li { display: grid; place-items: center; }
.partners__grid img { width: var(--lw); transition: transform .3s var(--ease-out); }
.partners__grid li:nth-child(1) { --lw: calc(297 * var(--k)); }
.partners__grid li:nth-child(2) { --lw: calc(232 * var(--k)); }
.partners__grid li:nth-child(3) { --lw: calc(150 * var(--k)); }
.partners__grid li:nth-child(4) { --lw: calc(214 * var(--k)); }
.partners__grid li:nth-child(5) { --lw: calc(262 * var(--k)); }
.partners__grid li:nth-child(6) { --lw: calc(293 * var(--k)); }
@media (hover: hover) and (pointer: fine) { .partners__grid li:hover img { transform: scale(1.06); } }

.contact { position: absolute; left: calc(var(--off) + 549 * var(--k)); top: calc(1025 * var(--k)); width: calc(823 * var(--k)); text-align: center; }
.contact__title { font-size: max(28px, calc(69 * var(--k))); font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.contact__lead { position: relative; margin: calc(20 * var(--k)) auto 0; max-width: 30em; padding-bottom: calc(56 * var(--k)); font-size: max(15px, calc(24 * var(--k))); line-height: 1.5; font-weight: 400; }
.contact__lead::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px; background: #e7d9ca; }
.form { display: grid; gap: calc(28 * var(--k)); margin-top: calc(57 * var(--k)); text-align: left; }
.field { position: relative; display: block; }
.field input, .field textarea {
  display: block; width: 100%; font: inherit; font-size: max(16px, calc(26 * var(--k))); font-weight: 500; color: var(--ink);
  height: max(50px, calc(70 * var(--k))); padding: 0 calc(29 * var(--k)); padding-left: max(18px, calc(29 * var(--k)));
  border-radius: 999px; border: 1px solid var(--muted); background: var(--cream);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { padding-top: max(13px, calc(19 * var(--k))); resize: none; line-height: 1.3; overflow: hidden; border-radius: max(25px, calc(35 * var(--k))); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(235, 95, 45, .22); }
.field textarea::placeholder { color: var(--muted); }
.field__label {
  position: absolute; left: max(19px, calc(30 * var(--k))); top: 50%; translate: 0 -50%;
  font-size: max(16px, calc(26 * var(--k))); color: var(--muted); pointer-events: none; transition: opacity .15s ease;
}
.field__label i, .topics legend i { color: #d8241a; font-style: normal; }
.field:focus-within .field__label, .field.is-filled .field__label { opacity: 0; }
.field.is-error input, .field.is-error textarea { border-color: #d8241a; box-shadow: 0 0 0 2px rgba(216, 36, 26, .25); }
.topics { border: 0; padding: 0; margin: 0 0 calc(10 * var(--k)); display: grid; gap: calc(15 * var(--k)); }
.topics legend { padding: 0; margin-bottom: calc(24 * var(--k)); font-size: max(13px, calc(21.6 * var(--k))); }
.topics label, .consent { display: flex; gap: calc(26 * var(--k)); align-items: center; font-size: max(15px, calc(24 * var(--k))); font-weight: 400; cursor: pointer; }
.topics input, .consent input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: max(20px, calc(22 * var(--k))); height: max(20px, calc(22 * var(--k))); margin: 0; border-radius: 50%;
  border: 1px solid #c9c1b8; background: #f1e8dd; display: grid; place-items: center; cursor: pointer;
  transition: border-color .2s ease;
}
.topics input::after, .consent input::after { content: ""; width: 50%; height: 50%; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .15s ease-out; }
.topics input:checked::after, .consent input:checked::after { transform: scale(1); }
.topics input:hover, .consent input:hover { border-color: var(--orange); }
.consent { align-items: flex-start; margin-top: calc(2 * var(--k)); font-size: max(13px, calc(21.6 * var(--k))); line-height: 1.48; color: var(--muted); }
.consent input { margin-top: .15em; }
.consent.is-error { color: #c0261a; }
.btn {
  font: inherit; font-weight: 600; font-size: max(16px, calc(26 * var(--k))); color: var(--cream);
  height: max(52px, calc(69 * var(--k))); border: 0; border-radius: 999px; cursor: pointer;
  background: var(--orange); transition: background-color .2s ease, scale .16s ease-out;
}
.btn:hover { background: var(--orange-dark); }
.btn:active { scale: .98; }
.form__note { margin-top: calc(-6 * var(--k)); text-align: center; font-size: max(12px, calc(17 * var(--k))); color: var(--muted); }
.form__note.is-error { color: #c0261a; font-size: max(14px, calc(20 * var(--k))); }
.form__note.is-ok { color: var(--ink); font-size: max(14px, calc(20 * var(--k))); }

/* ---------------------------------------------------------------- footer */
.footer { position: relative; z-index: 1; height: calc(795 * var(--k)); color: var(--cream); background: var(--orange); font-size: max(14px, calc(18 * var(--k))); }
.footer > * { position: absolute; margin: 0; }
.footer__top { inset: 0 auto auto 0; }
.footer__logo { position: absolute; left: calc(var(--off) + 99 * var(--k)); top: calc(330 * var(--k)); width: max(120px, calc(238 * var(--k))); }
.footer__col { position: absolute; top: calc(326 * var(--k)); display: grid; gap: calc(25 * var(--k)); line-height: 1; font-weight: 500; white-space: nowrap; }
.footer__col:nth-child(2) { left: calc(var(--off) + 689 * var(--k)); }
.footer__col:nth-child(3) { left: calc(var(--off) + 1134 * var(--k)); }
.footer__col:nth-child(4) { left: calc(var(--off) + 1603 * var(--k)); }
.footer__col b { font-weight: 700; }
.footer__col a { text-decoration: none; }
.footer__col a:hover, .footer__bottom a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__group { left: calc(var(--off) + 99 * var(--k)); top: calc(600 * var(--k)); width: max(180px, calc(370 * var(--k))); filter: brightness(0) invert(1) sepia(.12); }
.footer__bottom { left: calc(var(--off) + 99 * var(--k)); right: calc(var(--off) + 100 * var(--k)); top: calc(660 * var(--k)); display: grid; grid-template-columns: calc(590 * var(--k)) 1fr auto; font-size: max(13px, calc(20 * var(--k))); }
.footer__bottom a { text-decoration: none; }
.footer__credit { opacity: .7; transition: opacity .2s ease; }
.footer__credit:hover, .footer__credit:focus-visible { opacity: 1; }

/* ---------------------------------------------------------------- recipes page (shared card + catalogue) */
.page-recipes { background-color: var(--cream); }
.page-recipes .nav::before { opacity: 1; }
.page-recipes .nav { height: max(64px, calc(112 * var(--k))); }
.page-recipes .nav__logo { width: max(104px, calc(170 * var(--k))); }
.rp { padding: calc(230 * var(--k)) calc(var(--off) + 100 * var(--k)) calc(200 * var(--k)); min-height: 70vh; color: var(--ink); }
.rp .title { color: var(--orange); }
.rp-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4vw; align-items: end; }
.rp-hero .title { font-size: max(36px, calc(96 * var(--k))); }
.rp-hero__lead { color: var(--text); max-width: 30em; padding-bottom: .4em; font-size: max(15px, calc(24 * var(--k))); }
.rp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: calc(80 * var(--k)); padding-top: 24px; border-top: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  padding: 10px 18px; border-radius: 999px; border: 0;
  background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--orange);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.chip:hover { background: #fde6d9; }
.chip[aria-pressed="true"] { background: var(--orange); color: var(--cream); box-shadow: none; }
.chip--soft { box-shadow: inset 0 0 0 1px var(--line); }
.chip--soft[aria-pressed="true"] { background: var(--ink); }
.search { margin-left: auto; position: relative; flex: 1 1 260px; max-width: 380px; }
.search svg { position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.search input { width: 100%; font: inherit; font-size: 15px; padding: 11px 18px 11px 44px; border-radius: 999px; border: 1px solid var(--muted); background: var(--cream); color: var(--ink); }
.search input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(235, 95, 45, .2); }
.rp-count { margin: 28px 0 16px; font-size: 14px; color: var(--muted); }
.rp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(45 * var(--k)); }
.rp-empty { padding: 8vh 0; text-align: center; display: grid; gap: 18px; justify-items: center; color: var(--muted); }
.btn--ghost { display: inline-block; height: auto; padding: 14px 30px; text-decoration: none; background: transparent; color: var(--orange); box-shadow: inset 0 0 0 1.5px var(--orange); font-size: 16px; }
.btn--ghost:hover { background: var(--orange); color: var(--cream); }

.rc { display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: var(--ink); background: var(--paper); border: 2px solid var(--orange); border-radius: max(16px, calc(24 * var(--k))); padding: calc(32 * var(--k)) calc(32 * var(--k)) calc(36 * var(--k)); transition: background-color .3s var(--ease-out); }
.rc__visual { aspect-ratio: 460 / 340; background: #efe2d2 center / cover no-repeat; transition: transform .7s var(--ease-out); }
/* recipes without their own photo show one of the drawings */
.rc__visual--art { background-color: #fbe2d3; background-size: auto 88%; background-position: 50% 100%; }
.rc__wrap { overflow: hidden; border-radius: max(8px, calc(10 * var(--k))); }
.rc__body { padding: 22px 0 0; display: grid; gap: 8px; align-content: start; }
.rc__title { font-size: max(20px, calc(34 * var(--k))); font-weight: 700; line-height: 1.15; text-transform: uppercase; color: var(--ink); transition: color .25s ease; }
.rc__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .rc:hover .rc__visual { transform: scale(1.05); }
  .rc:hover .rc__title { color: var(--orange); }
}

/* one recipe */
.rd__back { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; color: var(--orange); font-size: 16px; }
.rd__back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.rd__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4vw; align-items: center; margin-top: 4vh; }
.rd__lead { margin-top: 22px; color: var(--text); max-width: 30em; font-size: max(15px, calc(24 * var(--k))); }
.rd__facts { display: flex; flex-wrap: wrap; margin-top: 34px; }
.rd__facts li { display: grid; gap: 2px; padding: 0 28px; border-left: 1px solid var(--line); }
.rd__facts li:first-child { padding-left: 0; border-left: 0; }
.rd__facts b { font-size: max(18px, calc(28 * var(--k))); font-weight: 700; }
.rd__facts span { font-size: 14px; color: var(--muted); }
.rd__visual .rc__wrap { border-radius: max(16px, calc(24 * var(--k))); }
.rd__visual .rc__visual { aspect-ratio: 5 / 4; }
.rd__body { display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); gap: 5vw; margin-top: 9vh; align-items: start; font-size: max(15px, calc(24 * var(--k))); }
.rd__products { position: sticky; top: 110px; background: var(--paper); border: 2px solid var(--orange); padding: 28px; border-radius: max(16px, calc(24 * var(--k))); }
.rd__products-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.rd__products h2, .rd__steps h2 { font-size: max(22px, calc(36 * var(--k))); font-weight: 700; text-transform: uppercase; }
.stepper { display: inline-flex; align-items: center; gap: 4px; background: #f3e5d6; border-radius: 999px; padding: 4px; }
.stepper button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--cream); color: var(--ink); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.stepper button:hover { background: var(--orange); color: var(--cream); }
.stepper output { min-width: 86px; text-align: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.rd__list { display: grid; grid-template-columns: 22px minmax(72px, max-content) minmax(0, 1fr); column-gap: 14px; font-size: 16px; }
.rd__list li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.rd__list li + li { border-top: 1px solid var(--line); }
.rd__list label { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; padding: 12px 0; cursor: pointer; }
.rd__list input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 6px; border: 1.5px solid #c4b7a8; align-self: center; display: grid; place-items: center; cursor: pointer; }
.rd__list input::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; rotate: -45deg; translate: 0 -1px; transform: scale(0); transition: transform .15s ease-out; }
.rd__list input:checked { background: var(--orange); border-color: var(--orange); }
.rd__list input:checked::after { transform: scale(1); }
.rd__list input:checked ~ span { color: var(--muted); text-decoration: line-through; }
.rd__qty { font-weight: 700; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.rd__hint { margin-top: 14px; font-size: 13px; color: var(--muted); }
.rd__steps ol { counter-reset: s; margin-top: 26px; display: grid; gap: 30px; }
.rd__steps li { counter-increment: s; display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; }
.rd__steps li::before { content: counter(s); font-size: 52px; font-weight: 800; line-height: .9; color: var(--orange); font-variant-numeric: lining-nums; }
.rd__steps li p { padding-top: 6px; max-width: 34em; }
.rd__tip { margin-top: 44px; display: grid; grid-template-columns: 70px 1fr; gap: 24px; align-items: center; background: var(--orange); color: var(--cream); padding: 22px 26px; border-radius: max(16px, calc(24 * var(--k))); }
.rd__tip img { width: 70px; }
.rd__more { margin-top: 14vh; }
.rd__more-title { margin-bottom: 5vh; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

/* ================================================================ phones and small tablets */
@media (max-width: 900px) {
  :root { --t-h2: clamp(34px, 10vw, 54px); --t-h3: clamp(24px, 6.6vw, 34px); --t-body: 16px; }

  .nav { height: 72px; }
  .nav.is-scrolled { height: 60px; }
  .nav__menu-btn { left: 8px; }
  .lang { right: 8px; }
  .nav__logo, .nav.is-scrolled .nav__logo { width: 104px; }

  /* the orange top: words above and below the bottle, the lead at the bottom */
  .sun { height: auto; }
  .hero, .intro { position: relative; top: auto; height: auto; }
  /* words on a diagonal with the bottle: "СИЛА" top right, the bottle, "СОЛНЦА" bottom left */
  .hero { --hh: max(640px, 100svh); height: var(--hh); }
  .hero__flower { left: -50vw; top: -50vw; width: 92vw; }
  .hero__word { font-size: clamp(54px, 18.5vw, 120px); }
  .hero__word--l { left: auto; right: 16px; top: calc(var(--hh) * .118); }
  .hero__word--r { left: 16px; right: auto; top: calc(var(--hh) * .7); }
  .hero__lead { left: 16px; right: 16px; top: auto; bottom: 26px; width: auto; max-width: 24em; font-size: 16px; }
  .hero .drift { --k: .42px; }
  .intro { padding: 34px 16px 120px; display: grid; }
  .intro > :not(.drift):not(.intro__slot):not(.intro__glow) { position: relative; left: auto; right: auto; top: auto; width: auto; }
  .intro__slot { position: relative !important; left: auto; top: auto; width: 34vw; height: calc(34vw * 1067.6 / 330.5); margin: 0 0 30px 8vw; order: -1; }
  .intro__title { line-height: 1.22; }
  .intro__text { margin-top: 22px; font-size: 16px; }
  .intro__glow { left: 6vw; top: calc(34vw * 2.9); width: 40vw; }
  .intro .drift { --k: .42px; }
  .fly { --fh: calc(max(640px, 100svh) * .47); left: calc(50% - var(--fh) * 330.5 / 1067.6 / 2); top: calc(max(640px, 100svh) * .22); width: calc(var(--fh) * 330.5 / 1067.6); height: var(--fh); }

  .story { padding: 70px 16px 80px; }
  .beat, .beat--0 { grid-template-columns: minmax(0, 1fr); padding: 0; row-gap: 22px; }
  .beat + .beat { margin-top: 64px; }
  .beat__art, .beat--0 .beat__art { grid-column: 1; grid-row: 1; width: 100%; height: auto; aspect-ratio: 910 / 920; }
  .beat--0 .beat__art { aspect-ratio: 968 / 1036; }
  .beat__text { grid-row: 2; max-width: none; }
  .beat__text p { margin-top: 14px; }

  .film { height: 64svh; }

  .recipes { height: auto; padding: 76px 16px 84px; }
  .recipes > * { position: relative; left: auto; right: auto; top: auto; }
  .cats { left: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 30px; }
  .cat { height: auto; padding: 18px 18px 18px; border-radius: 18px; }
  .cat__name { min-height: 44px; padding-right: 56px; font-size: 20px; }
  .cat__go { top: 22px; right: 18px; width: 40px; }
  .cat__img { margin-top: 14px; height: 46vw; }
  .more { left: auto; width: 100%; max-width: 320px; margin: 28px auto 0; }

  .range { height: auto; padding: 100px 16px 120px; overflow: clip; }
  .range > :not(.drift) { position: relative; left: auto; right: auto; top: auto; }
  .range__orb { position: absolute !important; left: -10vw !important; top: 40px !important; width: 46vw; }
  .range__list { position: relative; inset: auto; display: flex; justify-content: center; align-items: flex-end; gap: 7vw; margin-top: 50px; }
  .pack { position: relative; left: auto !important; top: auto !important; }
  .pack--1 { width: 17vw; }
  .pack--3 { width: 22.3vw; }
  .pack--5 { width: 29.4vw; }
  .pack__vol { top: calc(100% + 18px); font-size: 15px; }
  .range .drift { --k: .3px; }

  .scale { height: auto; padding: 60px 16px 80px; overflow: clip; }
  .scale > :not(.drift) { position: relative; left: auto; right: auto; top: auto; }
  .stats { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 30px; }
  .stat { height: auto; min-height: 0; padding: 22px 20px; border-radius: 18px; }
  .stat__head { font-size: 18px; }
  .stat__num { margin-top: 26px; font-size: clamp(44px, 13vw, 60px); }
  .stat__unit { margin-top: 8px; font-size: 16px; }
  .scale__bottle { width: 20vw; height: calc(20vw * 1067.6 / 330.5); margin: 4px auto -8vw; rotate: 60deg; }
  .scale .drift { --k: .3px; }

  .plant { height: 56svh; }

  .how { height: auto; padding: 70px 16px 80px; }
  .how > * { position: relative; left: auto; right: auto; top: auto; }
  .how__media { width: auto; height: auto; aspect-ratio: 835 / 800; margin-top: 30px; border-radius: 16px; }
  .how__bars i { width: 54px; }
  .how__steps { width: auto; margin-top: 28px; gap: 22px; }
  .step__title { font-size: 18px; }
  .step__text { margin-top: 8px; font-size: 15px; }

  .where { height: auto; padding: 70px 16px 120px; overflow: clip; }
  .where > :not(.drift) { position: relative; left: auto; right: auto; top: auto; }
  .where__map { width: auto; margin-top: 30px; }
  .pin b { font-size: 13px; top: 6px; }
  .pin__drop { width: 20px; left: -10px; top: -28px; }
  .pin i { width: 22px; height: 22px; left: -11px; top: -24px; }
  .where__text { width: auto; margin-top: 30px; }
  .where__text p { font-size: 15px; margin-top: 14px; }
  .where__text p + p { margin-top: 12px; }
  .where__group { width: 220px; margin-top: 30px; }
  .where .drift { --k: .3px; }

  .meet { height: auto; padding: 60px 16px 70px; }
  .partners > .title, .partners__grid { position: relative; left: auto; top: auto; }
  .partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 0; grid-auto-rows: 88px; margin-top: 18px; }
  .partners__grid li:nth-child(n) { --lw: min(60%, 160px); }
  .contact { position: relative; left: auto; top: auto; width: auto; margin-top: 56px; }
  .contact__lead { padding-bottom: 24px; }
  .form { gap: 14px; margin-top: 24px; }
  .topics { gap: 12px; margin-bottom: 10px; }
  .topics legend { margin-bottom: 12px; }
  .topics label, .consent { gap: 12px; }

  .footer { height: auto; padding: 70px 16px 30px; font-size: 15px; }
  .footer > * { position: relative; left: auto !important; right: auto !important; top: auto !important; }
  .footer__top { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 16px; }
  .footer__logo, .footer__col { position: relative; left: auto !important; top: auto; }
  .footer__logo { grid-column: 1 / -1; width: 140px; }
  .footer__col { gap: 12px; white-space: normal; }
  .footer__group { margin-top: 40px; width: 220px; }
  .footer__bottom { grid-template-columns: 1fr; gap: 10px; margin-top: 22px; font-size: 14px; }

  .page-recipes .nav { height: 60px; }
  .rp { padding: 100px 16px 70px; }
  .rp-hero, .rd__head, .rd__body { grid-template-columns: minmax(0, 1fr); }
  .rp-grid { grid-template-columns: 1fr; gap: 20px; }
  .rc { padding: 16px 16px 20px; border-radius: 18px; }
  .search { margin-left: 0; max-width: none; }
  .rd__products { position: static; padding: 22px 18px; }
  .rd__products-head { flex-wrap: wrap; }
  .rd__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; }
  .rd__facts li { padding: 0 16px; }
  .rd__steps li { grid-template-columns: 44px 1fr; }
  .rd__steps li::before { font-size: 38px; }
}

/* tablets: the phone layout, with the wide blocks put back in rows */
@media (min-width: 600px) and (max-width: 900px) {
  .story { padding-left: 40px; padding-right: 40px; }
  .beat__art, .beat--0 .beat__art { width: min(100%, 560px); justify-self: center; }
  .beat__text { max-width: 600px; justify-self: center; }
  .recipes { padding-left: 32px; padding-right: 32px; }
  .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .cat { padding: 16px 14px 16px; }
  .cat__name { font-size: 17px; padding-right: 44px; }
  .cat__go { top: 18px; right: 12px; width: 34px; }
  .cat__img { height: 24vw; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .stat__head { font-size: 15px; }
  .stat__num { font-size: clamp(30px, 5.4vw, 48px); }
  .how__media { max-width: 640px; }
  .partners__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact { max-width: 620px; margin-left: auto; margin-right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__flower img, .pin i, .grains path { animation: none !important; }
  .how__shot { transition: none; }
  .menu__panel, .menu__scrim { transition: none; }
}