/* OLALA — "Родилось из солнца"
   Layout follows the client's page (Страница.pdf): warm sunlit cream, brand red
   #D7261A for the logo, the numbers band and the actions, heavy uppercase headings.
   One family (Onest) for everything; Neucha only for the hand-drawn notes. */

:root {
  --cream: #fbf4e4;
  --cream-2: #f5ead2;
  --card: #f8f3e8;
  --ink: #2a211c;
  --muted: #5e544c;
  --red: #d7261a;
  --red-dark: #b81f15;
  --line: rgba(42, 33, 28, .14);

  --font: "Onest", system-ui, sans-serif;
  --hand: "Neucha", "Comic Sans MS", cursive;

  --gutter: clamp(20px, 5.3vw, 104px);
  --display: clamp(46px, 6.3vw, 112px);
  --display-sm: clamp(38px, 4.6vw, 80px);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scrollbar-color: rgba(215, 38, 26, .45) var(--cream); }
html, body { overflow-x: clip; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* sunlit cream: a brighter left edge and soft vertical light, like the mockup */
  background-color: var(--cream);
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 22%, rgba(255,236,196,.35) 58%, rgba(255,255,255,.35) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 3px, rgba(255,255,255,0) 3px 96px);
  background-attachment: fixed;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 4px; }
.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; }

.display {
  font-weight: 900; text-transform: uppercase;
  font-size: var(--display); line-height: .95; letter-spacing: -0.015em;
}
.red { color: var(--red); }
/* Neucha has no Kazakh letters (ә ғ қ ң ө ү һ): the Kazakh version writes by hand in Caveat */
:root:lang(kk) { --hand: "Caveat", "Neucha", cursive; }
:lang(kk) .hand, :lang(kk) .arc__stop span, :lang(kk) .rc__key { font-weight: 600; font-size-adjust: 0.5; }
.hand { font-family: var(--hand); font-size: 22px; line-height: 1.2; letter-spacing: .01em; }

/* split text: lines mask, characters move inside */
.split .line { display: block; white-space: nowrap; }
.split .ch { backface-visibility: hidden; }
.split .ch { display: inline-block; will-change: transform; }

/* Lenis smooth scrolling */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------------------------------------------------------------- nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 40px;
  padding: 22px var(--gutter);
  transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease;
}
.nav.is-scrolled {
  padding-top: 12px; padding-bottom: 12px;
  background: rgba(251, 244, 228, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
}
/* links sit in two tight groups that keep clear of the logo; the language switch goes to the far right */
.nav__side { display: flex; align-items: center; gap: clamp(24px, 2.6vw, 44px); font-size: 14px; font-weight: 500; }
.nav__side--left { justify-content: flex-end; padding-right: clamp(12px, 3vw, 56px); }
.nav__side--right { justify-content: flex-start; padding-left: clamp(12px, 3vw, 56px); }
.nav__side a { text-decoration: none; padding: 6px 0; }
.nav__side a:hover { color: var(--red); }
.nav__logo { display: block; width: 134px; }
.nav__logo svg { display: block; width: 100%; height: auto; }
.nav__logo { --logo-bg: #fff; --logo-fg: var(--red); }
.nav__lang { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.nav__side .nav__lang a { padding: 6px 2px; color: var(--muted); }
.nav__side .nav__lang a:hover { color: var(--ink); }
.nav__side .nav__lang a[aria-current="true"] { color: var(--red); font-weight: 600; }
.nav__menu-lang { display: flex; gap: 22px; padding: 14px 0 4px; border-top: 1px solid var(--line); font-size: 16px; }
.nav__menu .nav__menu-lang a { text-decoration: none; color: var(--muted); border-top: 0; padding: 6px 0; }
.nav__menu .nav__menu-lang a[aria-current="true"] { color: var(--red); font-weight: 600; }
.nav__burger { display: none; }
.nav__menu[hidden] { display: none; }

/* ---------------------------------------------------------------- 1–2 sun */
.sun { position: relative; height: 330vh; }
.sun__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.sun__flower {
  position: absolute; left: 48.4%; bottom: -2svh;
  /* sized by whichever runs out first: 36% of the width (as in the layout) or 90% of the height */
  width: min(36vw, 73svh); height: auto; max-width: none;
  transform: translateX(-50%); transform-origin: 50% 100%;
  /* the stem dissolves into the page instead of being cut off at the screen edge */
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 97%);
          mask-image: linear-gradient(to bottom, #000 74%, transparent 97%);
  animation: sway 9s ease-in-out infinite;
}
@keyframes sway { 0%, 100% { rotate: -0.8deg; } 50% { rotate: 0.9deg; } }

.sun__slide { position: absolute; inset: 0; pointer-events: none; }
.sun__title { font-weight: 900; text-transform: uppercase; font-size: var(--display); line-height: .95; letter-spacing: -0.015em; }
.sun__slide--1 .sun__title { position: absolute; left: var(--gutter); top: 15svh; }
.sun__aside { position: absolute; left: 69.5%; top: 40svh; width: min(25%, 340px); display: grid; gap: 5svh; }
.sun__slide--1 .sun__lead { font-size: 17px; }
.sun__path { display: grid; justify-items: center; gap: 6px; width: 200px; margin-left: 12%; }
.sun__squiggle { width: 54px; height: 96px; overflow: visible; }
.sun__squiggle path { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 7 9; }

.sun__title--left { position: absolute; left: var(--gutter); top: 37svh; }
.sun__lead--left { position: absolute; left: var(--gutter); top: 77svh; width: min(28%, 360px); font-size: 16px; }
.sun__slide--2 .sun__lead { opacity: 0; }

.sun__seeds { position: absolute; inset: 0; pointer-events: none; }
.seed { position: absolute; left: var(--x); top: var(--y); width: var(--w); }
.seed img { width: 100%; rotate: var(--r, 0deg); animation: float 7s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.sun__seeds .seed { opacity: 0; }
.sun__seeds .s1, .sun__seeds .s6 { filter: blur(2.5px); }

/* ---------------------------------------------------------------- 2b under the flower */
.next { padding: 4vh var(--gutter) 6vh; text-align: center; }
.next__title { font-size: var(--display); }
.next__title .ch { transform-style: preserve-3d; }

/* ---------------------------------------------------------------- 3 seeds */
.seeds { position: relative; height: min(110vh, 1100px); }
.seeds__title { position: absolute; left: var(--gutter); top: 42%; z-index: 2; }
.seeds__cloud { position: absolute; inset: 0; }
.seeds__cloud .seed:nth-child(3n) img { animation-duration: 8.5s; }
.seeds__cloud .seed:nth-child(3n+1) img { animation-duration: 6.2s; }

/* ---------------------------------------------------------------- 4 gold */
/* the section is the scroll track, the stage holds the picture; with motion the track is
   taller and the stage sticks (CSS sticky, so phones scroll it on their own thread, no jitter) */
.gold { position: relative; }
.gold__stage { height: 100svh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 8vh var(--gutter); }
.gold--track { height: 240svh; }
.gold--track .gold__stage { position: sticky; top: 0; }
.gold__seed { position: relative; margin: 0 4vw 0 0; justify-self: end; width: min(26vw, 380px, 46svh); aspect-ratio: 602 / 806; }
.gold__open, .gold__closed { display: block; }
.gold__open img { width: 100%; animation: float 7.5s ease-in-out infinite; filter: drop-shadow(0 26px 30px rgba(42,33,28,.18)); }
/* sits over the body of the cracked seed; hidden unless the scroll story runs */
/* fitted over the cracked seed's shell (mask overlap), so one seed seems to open into the other */
.gold__closed { position: absolute; left: 17.25%; top: 17%; width: 46%; z-index: 2; opacity: 0; will-change: transform, opacity, filter; }
.gold__closed img { width: 100%; filter: drop-shadow(0 22px 26px rgba(42,33,28,.2)); }
.gold__title { justify-self: start; }
/* 4½ the film */
.film { padding: 4vh var(--gutter) 12vh; }
.film__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 32px; background: #17110d; box-shadow: 0 50px 90px -50px rgba(42, 33, 28, .55); }
.film__video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a soft veil over the picture, deeper at the bottom where the words sit */
.film__shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(23, 14, 8, .18) 0%, rgba(23, 14, 8, .26) 45%, rgba(23, 14, 8, .62) 100%); }
.film__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--gutter) clamp(36px, 9vh, 110px); color: #fff; text-align: center; }
.film__kicker { font-size: clamp(22px, 2vw, 30px); opacity: .92; }
.film__title { margin-top: 10px; font-size: var(--display-sm); text-shadow: 0 4px 40px rgba(0, 0, 0, .25); }
.film__gold { color: #f2b632; }
.film__lead { max-width: 34em; margin: 18px auto 0; font-size: clamp(15px, 1.15vw, 19px); line-height: 1.5; opacity: .92; }
/* with motion the block is a scroll track and the frame sticks while the card opens out
   to the whole screen */
.film.film--pin { height: 230svh; padding: 0; }   /* .film.film--pin: beats the phone padding of .film further down */
.film--pin .film__frame { position: sticky; top: 0; height: 100svh; aspect-ratio: auto; border-radius: 0; box-shadow: none; }

/* ---------------------------------------------------------------- 5 oil */
.oil { padding: 14vh var(--gutter) 16vh; }
.oil__title { text-align: center; font-size: var(--display-sm); margin-bottom: 5vh; }
.oil__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 34vw) minmax(0, 1fr); align-items: center; gap: 3vw; }
.oil__features { display: grid; gap: 9vh; }
.oil__features--left { text-align: right; justify-items: end; }
.oil__features li { max-width: 360px; }
.oil__features h3 { font-size: clamp(20px, 1.9vw, 30px); font-weight: 900; text-transform: uppercase; line-height: 1.05; margin-bottom: 16px; }
.oil__features p { font-size: 16px; color: var(--muted); }
.oil__bottle { position: relative; aspect-ratio: 3 / 4; width: 100%; }
.bottle3d { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .3s cubic-bezier(0.23, 1, 0.32, 1); }
.bottle3d__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .3s cubic-bezier(0.23, 1, 0.32, 1); }
.is-3d .bottle3d { opacity: 1; }
.is-3d .bottle3d__fallback { opacity: 0; }

/* ---------------------------------------------------------------- 6–7 red */
.redzone {
  position: relative; color: #fff; background: var(--red);
  border-radius: 50% 50% 50% 50% / 110px 110px 110px 110px;
  padding: 140px var(--gutter) 160px;
  scroll-margin-top: 60px;
}
.redzone__title { text-align: center; font-size: var(--display-sm); }
/* above the splash and the bottle (z 5), so they pass under the frosted glass */
.numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 8vh; align-items: start; position: relative; z-index: 6; }
/* glass cards: frosted blur of whatever is behind, a light rim, a sheen on the top edge */
.num {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 28px; padding: 28px 30px 26px;
  color: var(--red);
  /* milky white glass: the backdrop is desaturated so the red and the gold drops behind do not tint it orange */
  background: linear-gradient(140deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .78) 55%, rgba(255, 255, 255, .84));
  -webkit-backdrop-filter: blur(24px) saturate(30%) brightness(1.4); backdrop-filter: blur(24px) saturate(30%) brightness(1.4);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .6),
    inset 0 1.5px 0 rgba(255, 255, 255, .95),
    inset 0 -14px 30px -18px rgba(255, 255, 255, .5),
    0 24px 60px -20px rgba(80, 0, 0, .45);
}
.num::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 70% at 12% -10%, rgba(255, 255, 255, .38), transparent 55%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .num { background: rgba(255, 255, 255, .9); }
}
.num--2 { margin-top: 80px; }
.num h3 { font-size: clamp(20px, 1.9vw, 30px); font-weight: 900; text-transform: uppercase; line-height: 1.1; min-height: 2.2em; }
.num p { margin-top: 36px; display: grid; gap: 4px; }
.num b { font-size: clamp(44px, 4.6vw, 76px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.num span { font-size: 18px; color: var(--ink); opacity: .75; }

/* above the packs, so the bottle can fly over the title and into the 1 l card */
.pour { position: relative; z-index: 5; height: clamp(460px, 52vw, 800px); margin-top: -120px; pointer-events: none; }
.pour__splash { position: absolute; left: -12%; bottom: 0; width: min(66%, 900px); }
/* the product photo, tilted like the layout */
.pour__flight { position: absolute; left: 10%; bottom: 2%; height: 96%; aspect-ratio: 3 / 4; z-index: 3; }
.pour__bottle { position: absolute; inset: 0; rotate: -16deg; }
.pour__drop, .pour__bob { position: absolute; inset: 0; }
.pour__bob { inset: 7% 0 3%; }
/* the photo fills the height of the box, centred */
.pour__img { position: absolute; top: 0; left: 50%; height: 100%; width: auto; aspect-ratio: 451 / 1400; translate: -50% 0; }
.pour__img { filter: drop-shadow(0 30px 40px rgba(90, 10, 5, .35)); }

.redzone__title--range { margin-top: 10vh; scroll-margin-top: 120px; }
.range { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 6vh; }
.pack {
  background: #fff; color: var(--ink);
  border-radius: 48px / 34px;
  padding: 44px 30px 28px;
  display: grid; grid-template-rows: 1fr auto; gap: 18px;
  /* hover lifts with `translate`, so it never fights GSAP's entrance on `transform` */
  transition: translate .3s cubic-bezier(0.23, 1, 0.32, 1);
}
.pack img { height: clamp(260px, 26vw, 400px); width: auto; justify-self: center; object-fit: contain; transition: translate .4s cubic-bezier(0.23, 1, 0.32, 1), rotate .4s cubic-bezier(0.23, 1, 0.32, 1); }
.pack__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pack__foot p { font-size: clamp(15px, 1.3vw, 18px); font-weight: 500; line-height: 1.25; }
.pack__vol {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--red); color: #fff; font-weight: 700; font-size: 18px;
  box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 5px #fff;
}
@media (hover: hover) and (pointer: fine) {
  .pack:hover { translate: 0 -6px; }
  .pack:hover img { translate: 0 -8px; rotate: -2deg; }
}

/* ---------------------------------------------------------------- 8 quality */
.quality { padding: 16vh var(--gutter) 6vh; }
.quality__title { text-align: center; font-size: var(--display-sm); }
.quality__body { position: relative; display: grid; grid-template-columns: 1fr 3fr 1.3fr; gap: 2vw; margin-top: 8vh; min-height: clamp(620px, 62vw, 980px); }
.steps { align-self: end; display: grid; justify-items: center; gap: 40px; padding-bottom: 8%; }
.steps li { position: relative; white-space: nowrap; text-align: center; }
.steps li + li::before {
  content: ""; position: absolute; left: 50%; top: -34px; width: 18px; height: 24px; translate: -50% 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 24'><path d='M3 2 L13 18' stroke='%23d7261a' stroke-width='2' stroke-dasharray='3 3' fill='none'/><path d='M7 18 L14 21 L14 13' fill='%23d7261a'/></svg>") no-repeat center / contain;
}
.steps__done { padding: 8px 24px; }
.steps__ring { position: absolute; inset: -6px -10px; width: calc(100% + 20px); height: calc(100% + 12px); overflow: visible; }
.steps__ring path { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; }

.photos { position: relative; }
.photo { position: absolute; filter: drop-shadow(0 18px 28px rgba(42,33,28,.16)); }
.photo--flower { left: 0; top: 0; width: 58%; z-index: 1; }
.photo--field { right: -18%; top: 34%; width: 58%; z-index: 1; }
.photo--plant { left: 18%; top: 56%; width: 55%; z-index: 2; }
.quality__text { display: grid; gap: 22px; align-content: start; padding-top: 4vh; font-size: 17px; }

/* ---------------------------------------------------------------- 8b made in Semey */
.maker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5vw; align-items: center; padding: 10vh var(--gutter) 8vh; }
.maker__map svg { width: 100%; height: auto; }
.maker__kz { fill: rgba(255, 255, 255, .55); stroke: var(--red); stroke-width: 1.4; stroke-linejoin: round; stroke-dasharray: 2200; stroke-dashoffset: 2200; }
.maker__dot { fill: var(--red); }
/* soft halo: a filled disc grows out of the dot and dissolves; two waves, half a beat apart */
.maker__pulse { fill: var(--red); opacity: 0; transform-box: fill-box; transform-origin: center; animation: pulse 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
.maker__pulse--late { animation-delay: 1.4s; }
@keyframes pulse { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(4.2); opacity: 0; } }
.maker__city { fill: var(--ink); font-family: var(--font); font-size: 16px; font-weight: 600; paint-order: stroke; stroke: var(--cream); stroke-width: 4px; stroke-linejoin: round; }
.maker__title { font-size: var(--display-sm); margin-bottom: 26px; }
.maker__copy > p { color: var(--muted); font-size: 18px; max-width: 50ch; }
.maker__facts { margin-top: 32px; display: grid; }
.maker__facts div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.maker__facts dt { color: var(--muted); font-size: 14px; }
.maker__facts dd { font-weight: 500; }

/* ---------------------------------------------------------------- 9 partners */
.partners { padding: 10vh var(--gutter) 12vh; scroll-margin-top: 80px; }
.partners__title { text-align: center; font-size: var(--display-sm); }
.partners__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7vh 4vw; margin-top: 9vh; align-items: center; justify-items: center; }
.partners__grid img { width: min(100%, 260px); height: auto; }

/* ---------------------------------------------------------------- 10 contact */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; padding: 8vh var(--gutter) 14vh; scroll-margin-top: 80px; }
.contact__form { background: var(--card); border-radius: 26px; padding: clamp(28px, 4vw, 56px); display: grid; gap: 16px; }
.contact__title { font-size: clamp(32px, 3.4vw, 56px); }
.contact__lead { font-size: 17px; padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 17px; color: var(--ink);
  padding: 14px 22px; border-radius: 999px; border: 1px solid #b9b0a5; background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { border-radius: 28px; resize: vertical; min-height: 54px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(215,38,26,.15); }
.field input::placeholder, .field textarea::placeholder { color: #7a7067; }
.field.is-error input { border-color: var(--red); }
.topics { border: 0; padding: 0; margin: 4px 0; display: grid; gap: 10px; }
.topics legend { font-size: 15px; margin-bottom: 10px; padding: 0; }
.req { color: var(--red); }
.topics label, .consent { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; cursor: pointer; }
.topics input, .consent input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 22px; height: 22px; margin: 0; border-radius: 50%;
  border: 1px solid #cfc6bb; background: #fff; display: grid; place-items: center; cursor: pointer;
}
.topics input::after, .consent input::after { content: ""; width: 10px; height: 10px; 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); }
.consent { font-size: 14px; color: var(--muted); }
.consent.is-error { color: var(--red); }
.btn {
  font: inherit; font-weight: 600; font-size: 17px; color: #fff;
  background: var(--red); border: 0; border-radius: 999px; padding: 15px 24px; cursor: pointer;
  transition: background-color .2s ease, transform .16s ease-out;
}
.btn:hover { background: var(--red-dark); }
.btn:active { transform: scale(.98); }
.contact__note { font-size: 12px; color: var(--muted); text-align: center; }
.contact__note.is-error { color: var(--red); font-size: 14px; }
.contact__note.is-ok { color: var(--ink); font-size: 14px; }
.contact__photo { width: 100%; border-radius: 22px; }

/* ---------------------------------------------------------------- 11 today: recipes by time of day */
.today { padding: 12vh var(--gutter) 14vh; text-align: center; scroll-margin-top: 80px; }
.today__title { font-size: var(--display-sm); }
.today__lead { margin: 18px auto 0; max-width: 46ch; color: var(--muted); font-size: 18px; }

/* the sun's arc: morning left, noon on top, evening right */
.arc { position: relative; width: min(100%, 820px); aspect-ratio: 800 / 230; margin: 16vh auto 8vh; }
.arc__path { position: absolute; left: 0; top: 0; width: 100%; height: 87%; overflow: visible; }
.arc__path path { fill: none; stroke: var(--red); stroke-width: 1.6; stroke-dasharray: 6 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* past noon the sun fades out and a crescent moon takes its place; --night (0…1) is set from JS */
.arc__sun { position: absolute; left: 0; top: 0; width: 52px; height: 52px; margin: -26px 0 0 -26px; pointer-events: none; --night: 0; }
.arc__disc, .arc__moon { position: absolute; inset: 0; border-radius: 50%; }
.arc__disc {
  background: radial-gradient(circle at 38% 35%, #ffe27a, #f6b31b 58%, #e8950a 100%);
  box-shadow: 0 0 0 10px rgba(246, 179, 27, .16), 0 0 46px 10px rgba(246, 179, 27, .38);
  opacity: calc(1 - var(--night)); transform: scale(calc(1 - .3 * var(--night)));
}
.arc__moon {
  box-shadow: 0 0 0 10px rgba(52, 64, 102, .12), 0 0 46px 10px rgba(70, 90, 150, .3);
  opacity: var(--night); transform: rotate(calc(-50deg + 50deg * var(--night))) scale(calc(.7 + .3 * var(--night)));
}
.arc__moon svg { display: block; width: 100%; height: 100%; }
.arc__stop {
  position: absolute; translate: -50% 0; display: grid; justify-items: center; gap: 2px;
  font: inherit; color: var(--ink); background: none; border: 0; cursor: pointer; padding: 8px 12px; border-radius: 14px;
  transition: color .2s ease;
}
.arc__stop b { font-size: clamp(18px, 1.7vw, 24px); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.arc__stop span { font-family: var(--hand); font-size: 18px; color: var(--muted); }
.arc__stop--breakfast { left: 4%; top: 92%; }
.arc__stop--lunch { left: 50%; top: 4%; translate: -50% -100%; }
.arc__stop--dinner { left: 96%; top: 92%; }
.arc__stop[aria-selected="true"] { color: var(--red); }
.arc__stop:hover { color: var(--red); }

.today__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; text-align: left; margin-top: 4vh; }
.today__all { margin-top: 6vh; }

/* recipe card */
.rc { display: grid; grid-template-rows: auto 1fr; background: #fff; border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .3s cubic-bezier(0.23, 1, 0.32, 1); }
.rc__visual { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background-size: cover; background-position: center; transition: transform .5s cubic-bezier(0.23, 1, 0.32, 1); }
.rc__visual--breakfast { background-color: #fdeec3; }
.rc__visual--lunch { background-color: #fbd98a; }
.rc__visual--dinner { background-color: #f5c7a2; }
/* the sun sits where it stands at that time of day */
.rc__visual::before {
  content: ""; position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #ffe27a, #f6b31b 60%, #e8950a 100%);
  box-shadow: 0 0 40px 8px rgba(246, 179, 27, .35);
}
.rc__visual--breakfast::before { left: 8%; top: 52%; }
.rc__visual--lunch::before { left: 39%; top: 4%; }
.rc__visual--dinner::before { right: 8%; top: 54%; }
.rc__visual--photo { background-color: #efe4cc; }
.rc__visual--photo::before { display: none; }
.rc__key { position: absolute; font-family: var(--hand); font-size: clamp(24px, 2.3vw, 34px); line-height: 1; color: var(--ink); white-space: nowrap; }
.rc__key--0 { left: 9%; top: 14%; rotate: -6deg; }
.rc__key--1 { right: 10%; top: 40%; rotate: 4deg; }
.rc__key--2 { left: 30%; bottom: 12%; rotate: -2deg; }
.rc__visual--breakfast .rc__key--0 { left: 34%; }
.rc__visual--lunch .rc__key--0 { top: 52%; left: 8%; }
.rc__visual--lunch .rc__key--1 { top: 34%; }
.rc__visual--dinner .rc__key--1 { right: auto; left: 12%; top: 46%; }
.rc__body { padding: 20px 22px 24px; display: grid; gap: 8px; align-content: start; }
.rc__title { font-size: clamp(20px, 1.7vw, 26px); font-weight: 800; line-height: 1.1; }
.rc__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .rc:hover { transform: translateY(-4px); }
  .rc:hover .rc__visual { transform: scale(1.03); }
}
.rc:focus-visible { outline-offset: 6px; border-radius: 22px; }

.btn--ghost { display: inline-block; text-decoration: none; background: transparent; color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); padding: 14px 30px; }
.btn--ghost:hover { background: var(--red); color: #fff; }

/* ---------------------------------------------------------------- recipes page */
.page-recipes .nav { position: sticky; }
.rp { padding: 6vh var(--gutter) 14vh; min-height: 70vh; }
.rp-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4vw; align-items: end; }
.rp-hero__title { font-size: var(--display); }
.rp-hero__lead { font-size: 18px; color: var(--muted); max-width: 40ch; padding-bottom: .6em; }
.rp-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 6vh; padding-top: 22px; 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: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.chip:hover { box-shadow: inset 0 0 0 1px var(--red); }
.chip[aria-pressed="true"] { background: var(--red); color: #fff; box-shadow: none; }
.chip--soft[aria-pressed="true"] { background: var(--ink); }
.search { margin-left: auto; position: relative; flex: 1 1 260px; max-width: 360px; }
.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(--line); background: #fff; color: var(--ink); }
.search input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(215,38,26,.15); }
.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: 28px; }
.rp-empty { padding: 8vh 0; text-align: center; display: grid; gap: 18px; justify-items: center; color: var(--muted); }

/* one recipe */
.rd__back { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; color: var(--red); }
.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__title { font-size: var(--display); }
.rd__lead { margin-top: 22px; font-size: 19px; color: var(--muted); max-width: 42ch; }
.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: 24px; font-weight: 800; }
.rd__facts span { font-size: 14px; color: var(--muted); }
.rd__visual .rc__visual { border-radius: 28px; aspect-ratio: 5 / 4; }
.rd__visual .rc__key { font-size: clamp(30px, 3.2vw, 48px); }

.rd__body { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 5vw; margin-top: 9vh; align-items: start; }
.rd__products { position: sticky; top: 100px; background: #fff; border-radius: 24px; padding: 28px; }
.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: 26px; font-weight: 900; text-transform: uppercase; }
.stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--cream); border-radius: 999px; padding: 4px; }
.stepper button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.stepper button:hover { background: var(--red); color: #fff; }
.stepper output { min-width: 86px; text-align: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* one shared column grid: the quantity column is as wide as the longest amount, rows stay aligned */
.rd__list { display: grid; grid-template-columns: 22px minmax(72px, max-content) minmax(0, 1fr); column-gap: 14px; }
.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 #cbc1b5; 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(--red); border-color: var(--red); }
.rd__list input:checked::after { transform: scale(1); }
.rd__list input:checked ~ span { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(42,33,28,.35); }
.rd__qty { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd__hint { margin-top: 14px; font-size: 13px; color: var(--muted); }
/* send what is missing: WhatsApp, and the phone's own share sheet where there is one */
.rd__send { display: flex; gap: 8px; margin-top: 16px; }
.rd__wa { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 18px; border-radius: 999px; background: #25d366; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; text-align: center; line-height: 1.2; transition: background .2s, transform .15s ease-out; }
.rd__wa:hover { background: #1fb457; }
.rd__wa:active { transform: scale(.97); }
.rd__wa svg { flex: none; width: 22px; height: 22px; }
.rd__wa svg path:first-child { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.rd__wa-phone { fill: currentColor; }
.rd__wa.is-off { background: var(--cream); color: var(--muted); cursor: default; }
.rd__wa.is-off svg { display: none; }
.rd__share { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: border-color .2s, color .2s, transform .15s ease-out; }
.rd__share:hover { border-color: var(--red); color: var(--red); }
.rd__share:active { transform: scale(.94); }
.rd__share:disabled { opacity: .4; cursor: default; }
.rd__share svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.rd__steps ol { list-style: none; 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: 900; line-height: .9; color: var(--red); font-variant-numeric: tabular-nums; }
.rd__steps li p { font-size: 18px; padding-top: 6px; max-width: 56ch; }
.rd__tip { margin-top: 44px; display: grid; grid-template-columns: 90px 1fr; gap: 20px; align-items: center; background: #fff; border-radius: 22px; padding: 22px 26px; }
.rd__tip svg { width: 90px; height: auto; --logo-bg: #fff; --logo-fg: var(--red); }
.rd__tip p { font-size: 16px; }
.rd__more { margin-top: 14vh; }
.rd__more-title { font-size: var(--display-sm); margin-bottom: 5vh; }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

/* ---------------------------------------------------------------- footer */
.footer { background: var(--red); color: #fff; padding: 80px var(--gutter) 34px; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; align-items: start; }
.footer__logo { display: block; width: 170px; }
.footer__logo svg { display: block; width: 100%; height: auto; }
.footer__logo { --logo-bg: transparent; --logo-fg: #fff; }
.footer__col { display: grid; gap: 12px; font-size: 14px; letter-spacing: .04em; }
.footer__col b { font-weight: 700; }
.footer__col a { text-decoration: none; }
.footer__col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__group { margin-top: 64px; width: 248px; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 28px; font-size: 14px; }
.footer__bottom a { text-decoration: none; }
.footer__credit { opacity: .5; transition: opacity .2s ease; }
.footer__credit:hover, .footer__credit:focus-visible { opacity: 1; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .nav { grid-template-columns: auto 1fr auto; padding: 14px 20px; }
  .nav__side { display: none; }
  .nav__logo { width: 110px; grid-column: 1; }
  .nav__burger {
    display: grid; gap: 6px; grid-column: 3; width: 44px; height: 44px; place-content: center;
    background: none; border: 0; cursor: pointer;
  }
  .nav__burger span { display: block; width: 24px; height: 2px; background: var(--ink); transition: transform .2s ease; }
  .nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .nav__menu { grid-column: 1 / -1; display: grid; gap: 4px; padding: 10px 0 6px; font-size: 18px; font-weight: 500; }
  .nav__menu a { text-decoration: none; padding: 10px 0; border-top: 1px solid var(--line); }
  .nav:has(.nav__menu:not([hidden])) { background: var(--cream); box-shadow: 0 1px 0 var(--line); }

  .sun { height: 300vh; }
  .sun__flower { width: min(78vw, 46svh); left: 50%; }
  .sun__title { font-size: clamp(38px, 11vw, 64px); }
  .sun__slide--1 .sun__title { top: 12svh; }
  .sun__aside { left: var(--gutter); right: var(--gutter); width: auto; top: 28svh; }
  .sun__slide--1 .sun__lead { font-size: 15px; }
  .sun__path { display: none; }
  .sun__title--left { top: 11svh; }
  .sun__lead--left { top: 31svh; width: auto; right: var(--gutter); font-size: 15px; }

  .seeds__title { top: 8%; }
  /* narrow: the seeds spread over the whole width under the heading */
  .seeds { height: 118vh; }
  .seeds__cloud .seed:nth-child(1) { --x: 4% !important; --y: 30% !important; --w: 20% !important; }
  .seeds__cloud .seed:nth-child(1) img { rotate: -24deg; }
  .seeds__cloud .seed:nth-child(2) { --x: 60% !important; --y: 25% !important; --w: 22% !important; }
  .seeds__cloud .seed:nth-child(2) img { rotate: 28deg; }
  .seeds__cloud .seed:nth-child(3) { --x: 34% !important; --y: 40% !important; --w: 17% !important; }
  .seeds__cloud .seed:nth-child(3) img { rotate: -8deg; }
  .seeds__cloud .seed:nth-child(4) { --x: 76% !important; --y: 46% !important; --w: 19% !important; }
  .seeds__cloud .seed:nth-child(4) img { rotate: 40deg; }
  .seeds__cloud .seed:nth-child(5) { --x: 2% !important; --y: 55% !important; --w: 22% !important; }
  .seeds__cloud .seed:nth-child(5) img { rotate: 18deg; }
  .seeds__cloud .seed:nth-child(6) { --x: 48% !important; --y: 58% !important; --w: 20% !important; }
  .seeds__cloud .seed:nth-child(6) img { rotate: -30deg; }
  .seeds__cloud .seed:nth-child(7) { --x: 22% !important; --y: 72% !important; --w: 21% !important; }
  .seeds__cloud .seed:nth-child(7) img { rotate: 12deg; }
  .seeds__cloud .seed:nth-child(8) { --x: 72% !important; --y: 74% !important; --w: 17% !important; }
  .seeds__cloud .seed:nth-child(8) img { rotate: -16deg; }
  .seeds__cloud .seed:nth-child(9) { --x: 44% !important; --y: 86% !important; --w: 22% !important; }
  .seeds__cloud .seed:nth-child(9) img { rotate: 30deg; }
  .gold__stage { grid-template-columns: 1fr; align-content: center; gap: 4vh; padding: 10vh 20px 6vh; text-align: center; }
  .gold__seed { justify-self: center; width: min(58vw, 280px, 40svh); margin: 0; }
  .gold__title { justify-self: center; }
  .film { padding: 2vh 16px 8vh; }
  .film:not(.film--pin) .film__frame { border-radius: 20px; aspect-ratio: 4 / 5; }
  .film__text { padding: 0 20px 48px; }
  .film__lead { font-size: 15px; }

  .oil__grid { grid-template-columns: 1fr; gap: 6vh; }
  .oil__bottle { order: -1; width: min(80vw, 420px); justify-self: center; }
  .oil__features, .oil__features--left { text-align: left; justify-items: start; gap: 5vh; }

  .redzone { border-radius: 50% 50% 50% 50% / 48px 48px 48px 48px; padding: 90px 20px 100px; }
  .numbers, .range { grid-template-columns: 1fr; }
  .num--2 { margin-top: 0; }
  .pour { height: 70vw; margin-top: 10px; }
  .pour__splash { width: 100%; left: -10%; }
  .pour__flight { left: 18%; height: 100%; }

  .quality__body { grid-template-columns: 1fr; min-height: 0; }
  .photos { height: auto; aspect-ratio: 1 / 1.3; order: -1; }
  .photo--field { right: -4%; }
  .steps { padding: 0; justify-self: center; margin-top: 64px; }

  .maker { grid-template-columns: 1fr; }
  .maker__facts div { grid-template-columns: 1fr; gap: 4px; }
  .partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact { grid-template-columns: 1fr; }
  .today__cards, .rp-grid { grid-template-columns: 1fr; }
  /* phone: the arc flattens into a row of three, the sun hangs over the chosen one */
  .arc { aspect-ratio: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 9vh auto 4vh; padding-top: 60px; }
  .arc__path { display: none; }
  .arc__sun { width: 40px; height: 40px; margin: 0 0 0 -20px; top: 0 !important; transition: left .5s cubic-bezier(0.23, 1, 0.32, 1); }
  .arc__disc, .arc__moon { transition: opacity .5s ease, transform .5s cubic-bezier(0.23, 1, 0.32, 1); }
  .arc__stop, .arc__stop--lunch { position: static; translate: none; background: #fff; border-radius: 16px; padding: 12px 6px; box-shadow: inset 0 0 0 1px var(--line); }
  .arc__stop[aria-selected="true"] { box-shadow: inset 0 0 0 1.5px var(--red); }
  .arc__stop b { font-size: 16px; }
  .rp-hero, .rd__head, .rd__body { grid-template-columns: minmax(0, 1fr); }
  .search { margin-left: 0; max-width: none; }
  .rd__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; }
  .rd__facts li { padding: 0 18px; }
  .rd__facts b { font-size: 20px; }
  .rd__products { position: static; padding: 22px 18px; }
  .rd__products-head { flex-wrap: wrap; }
  .rd__products h2, .rd__steps h2 { font-size: 22px; }
  .stepper output { min-width: 72px; }

  .rd__steps li { grid-template-columns: 44px 1fr; }
  .rd__steps li::before { font-size: 38px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .sun__flower, .seed img, .gold__open img, .maker__pulse { animation: none; }
  .gold__stage { height: auto; min-height: 100svh; }
  .maker__kz { stroke-dashoffset: 0; }
  .sun { height: auto; }
  .sun__stage { position: relative; height: auto; }
  .sun__slide--1 { bottom: auto; height: 100svh; }
  .sun__slide--2 { position: relative; margin-top: 100svh; min-height: 100svh; }
  .sun__slide--2 .sun__lead, .sun__seeds .seed { opacity: 1; }
}