/* TUT Drinks — public site.
   White page, soft lilac glow at the top, deep plum type, a warm bold serif for headings,
   flat colour cards, pastel chips and a few stickers. */

@view-transition { navigation: auto; }

:root {
  --plum: #2d0646;
  --mulberry: #56008a;
  --violet: #a60adb;
  --glow: #f4e6ff;
  --blush: #fbf3ff;
  --cream: #fff8e6;
  --line: #e7d9f1;
  --sun: #ffd45c;
  --pink: #ffc2e2;
  --serif: "Brygada 1918", Georgia, "Times New Roman", serif;
  --text: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pop: cubic-bezier(.2, 1.3, .35, 1);
  --glide: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--plum); font: 500 1rem/1.55 var(--text); overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; max-width: 62ch; }
h1, h2, h3 { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--plum); color: #fff; padding: 10px 16px; border-radius: 999px; }
.skip:focus { top: 12px; }
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
.center { text-align: center; max-width: none; margin: 34px 0 0; }

.h2 { font: 700 clamp(2rem, 4.2vw, 3.1rem)/1.08 var(--serif); letter-spacing: -.012em; text-wrap: balance; }

/* pill button: outline, with a dark round arrow */
.pill { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 5px 6px 5px 20px; border: 1.5px solid var(--plum); border-radius: 999px; background: #fff; color: var(--plum);
  font: 600 .95rem/1 var(--text); letter-spacing: 0; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .25s, color .25s, transform .25s var(--pop); }
.pill i, .arrowlink i, .chip--go i { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--plum) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 15px no-repeat; transition: transform .35s var(--pop); }
.pill:hover { transform: translateY(-2px); background: var(--plum); color: #fff; }
.pill:hover i { transform: translateX(3px) rotate(-45deg); background-color: var(--violet); }
.pill--solid { background: var(--plum); color: #fff; }
.pill--solid i { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d0646' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.pill--solid:hover { background: var(--mulberry); }
.pill--solid:hover i { background-color: #fff; }
.arrowlink { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; text-decoration: none; }
.arrowlink i { width: 30px; height: 30px; background-color: transparent; border: 1.5px solid var(--plum); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d0646' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.arrowlink:hover i { transform: translateX(5px); }
.arrowlink--back i { rotate: 180deg; }

.tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; font: 700 .72rem/1 var(--text); letter-spacing: .06em; text-transform: uppercase; background: var(--tint, var(--glow)); }
.tag--sun { --tint: var(--sun); }
.tag--pink { --tint: var(--pink); }
.tag--lilac { --tint: #e2d2ff; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chips--center { justify-content: center; margin-top: 26px; }
.chip { border: 0; cursor: pointer; padding: 8px 14px; border-radius: 10px; background: var(--tint, var(--glow)); color: var(--plum); font: 700 .78rem/1 var(--text); letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  transition: transform .25s var(--pop), box-shadow .25s; }
.chip:hover { transform: translateY(-3px) rotate(-2deg); }
.chip.is-on { box-shadow: 0 0 0 2px var(--plum); }
.chip--go { padding: 0; background: none; border-radius: 50%; }
.chip--go i { display: block; width: 30px; height: 30px; background-size: 13px; }

.sticker { width: 54px; height: 54px; filter: drop-shadow(2px 2px 0 #fff) drop-shadow(-2px -2px 0 #fff) drop-shadow(2px -2px 0 #fff) drop-shadow(-2px 2px 0 #fff) drop-shadow(0 3px 5px rgba(45, 6, 70, .18));
  animation: wiggle 6s ease-in-out infinite; }
@keyframes wiggle { 0%, 100% { rotate: -8deg; } 50% { rotate: 7deg; translate: 0 -5px; } }

/* ---------- strip + top bar ---------- */
.strip { background: var(--plum); color: #fff; overflow: hidden; font: italic 600 .8rem/1 var(--text); padding: 9px 0; }
.strip__run { display: flex; gap: 70px; width: max-content; animation: run 38s linear infinite; }
.strip span { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.strip img { height: 15px; width: auto; }
@keyframes run { to { transform: translateX(-50%); } }

.top { position: sticky; top: 0; z-index: 50; background: transparent; transition: box-shadow .3s, background .3s; }
.top.is-stuck { box-shadow: 0 1px 0 var(--line); background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); }
.nav { height: 68px; width: min(1120px, 100% - 40px); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.nav__logo { justify-self: start; transition: transform .3s var(--pop); }
.nav__logo img { width: 78px; height: auto; }
.nav__logo:hover { transform: rotate(-4deg) scale(1.06); }
.nav__links { display: flex; gap: clamp(16px, 2.6vw, 34px); }
.nav__link { font-weight: 600; font-size: .95rem; text-decoration: none; padding: 6px 0; background: linear-gradient(var(--plum), var(--plum)) 0 100% / 0 2px no-repeat; transition: background-size .3s var(--glide); }
.nav__link:hover, .nav__link[aria-current] { background-size: 100% 2px; }
.nav__end { justify-self: end; display: flex; align-items: center; gap: 12px; }
.langs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1.5px solid var(--plum); background: #fff; }
.langs a { font-weight: 700; font-size: .74rem; letter-spacing: .05em; text-decoration: none; padding: 6px 9px; border-radius: 999px; }
.langs a[aria-current] { background: var(--plum); color: #fff; }
.nav__burger { display: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--plum); cursor: pointer; padding: 0; }
.nav__burger span:not(.sr) { display: block; height: 2.5px; margin: 5px auto; background: var(--plum); border-radius: 2px; transition: transform .3s var(--glide), width .3s; }
.nav__burger span:nth-child(1) { width: 18px; }
.nav__burger span:nth-child(2) { width: 12px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { width: 18px; transform: translateY(-3.7px) rotate(-45deg); }
.drawer { position: fixed; inset: 0; z-index: 49; background: var(--blush); padding: 130px 28px 30px; display: flex; flex-direction: column; gap: 6px; }
.drawer[hidden] { display: none; }
.drawer .nav__link { font: 700 2.2rem/1.3 var(--serif); }

/* ---------- hero ---------- */
.hero { position: relative; margin-top: -68px; padding: calc(68px + clamp(26px, 5vw, 56px)) 0 0; background: linear-gradient(var(--glow), #fff 78%); border-bottom: 1px solid var(--line); overflow: hidden; }
.hero__head { text-align: center; }
.hero__title { position: relative; display: inline-block; max-width: 15em; font: 700 clamp(2.5rem, 6.6vw, 4.9rem)/1.02 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.hero__title .pill { vertical-align: middle; margin-left: .35em; translate: 0 -.12em; }
.hero__spark { display: inline-block; vertical-align: middle; width: .72em; height: .72em; margin-right: .16em; translate: 0 -.06em; }
.hero__sub { margin: 18px auto 0; font-weight: 600; max-width: none; }
.hero__row { display: grid; grid-template-columns: 1fr minmax(300px, 1.25fr) 1fr; gap: clamp(16px, 4vw, 60px); align-items: center; margin-top: clamp(20px, 3vw, 36px); }
.hero__left, .hero__right { padding-bottom: 40px; }
.hero__right { justify-self: end; max-width: 250px; }
.hero__left { max-width: 230px; }
.quote { display: block; font: 700 2.6rem/.6 var(--serif); margin: 0 0 4px 44px; }
.faces { display: flex; margin-bottom: 14px; }
.faces span { display: grid; place-items: end center; width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid #fff; overflow: hidden; margin-right: -8px; transition: transform .3s var(--pop); }
.faces img { height: 56px; width: auto; max-width: none; }
.faces span:hover { transform: translateY(-6px) scale(1.12); z-index: 1; }
.hero__fact { font-weight: 700; line-height: 1.25; margin: 0 0 8px; }
.hero__small { font-size: .88rem; line-height: 1.45; margin: 0 0 12px; }
.hero__bolt { width: 44px; height: 44px; margin-bottom: 14px; }

.trio { position: relative; height: clamp(300px, 44vw, 470px); display: flex; justify-content: center; align-items: flex-end; }
.trio__item { display: flex; align-items: flex-start; align-self: flex-end; height: 100%; margin: 0 -3.5%; translate: 0 9%; transform-origin: 50% 100%; transition: transform .7s var(--pop), opacity .35s; animation: rise .95s var(--pop) backwards; }
.trio__item[hidden] { display: none; }
.trio__item img { height: 108%; width: auto; max-width: none; filter: drop-shadow(0 18px 20px rgba(45, 6, 70, .2)); transition: transform .45s var(--pop); transform-origin: 50% 100%; }
.trio__item--0 { z-index: 1; animation-delay: .18s; }
.trio__item--0 img { height: 98%; rotate: -4deg; }
.trio__item--1 { z-index: 2; animation-delay: .05s; }
.trio__item--2 { z-index: 1; animation-delay: .3s; }
.trio__item--2 img { height: 98%; rotate: 4deg; }
.trio__item:hover img { transform: translateY(-5%) rotate(-3deg) scale(1.03); }
.trio.is-swapping .trio__item { transform: translateY(112%) rotate(8deg); opacity: 0; transition: transform .4s cubic-bezier(.6, 0, .9, .4), opacity .3s .1s; }
.trio.is-swapping .trio__item--0 { transform: translateY(112%) rotate(-10deg); }
@keyframes rise { from { transform: translateY(105%) rotate(7deg); opacity: 0; } }

/* ---------- section basics ---------- */
.split { display: flex; justify-content: space-between; align-items: center; gap: 20px 40px; flex-wrap: wrap; margin-bottom: 28px; }
.aside { display: flex; align-items: center; gap: 12px; margin: 0; font-weight: 600; font-size: .92rem; max-width: 26ch; line-height: 1.35; }
.aside .sticker { width: 40px; height: 40px; flex: none; }

/* ---------- colour cards ---------- */
.taste { padding: clamp(50px, 7vw, 86px) 0; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cards--4 { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card { position: relative; display: flex; flex-direction: column; aspect-ratio: 1 / 1.14; padding: 12px; background: var(--c); text-decoration: none; overflow: hidden; transition: transform .4s var(--pop); }
.card__badge { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 6px 10px; border-radius: 8px; background: #fff; color: var(--plum); font-weight: 700; font-size: .8rem; line-height: 1; }
.card__art { position: relative; flex: 1; min-height: 0; }
.card__art img { position: absolute; inset: 16px 0 0; width: 100%; height: calc(100% - 16px); object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 14px 12px rgba(0, 0, 0, .22)); transition: transform .5s var(--pop); transform-origin: 50% 100%; translate: 0 6%; }
.card__label { position: relative; z-index: 1; background: #fff; text-align: center; padding: 10px 8px; font: 700 1.08rem/1.15 var(--serif); }
.card:hover, .card:focus-visible { transform: translateY(-6px); }
.card:hover .card__art img, .card:focus-visible .card__art img { transform: translateY(-7%) rotate(-6deg) scale(1.06); }

/* ---------- about ---------- */
.about { padding: clamp(30px, 5vw, 60px) 0 clamp(60px, 8vw, 100px); }
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.about__copy { position: relative; }
.about__flower { position: absolute; top: -34px; left: min(60%, 300px); }
.about__lead { font: 600 italic 1.25rem/1.35 var(--serif); margin: 14px 0 16px; max-width: 30ch; }
.about__copy p:not(.about__lead) { font-size: .93rem; }
.about__copy .arrowlink { margin-top: 10px; }
.collage { position: relative; min-height: 500px; }
.collage__big { position: absolute; right: 0; top: 0; width: 62%; height: auto; aspect-ratio: 1 / 1.05; object-fit: cover; }
.collage__small { position: absolute; left: 6%; top: 8%; width: 36%; height: auto; aspect-ratio: 1 / 1.15; object-fit: cover; border: 6px solid #fff; transition: transform .5s var(--pop); }
.collage__small:hover { transform: rotate(-4deg) scale(1.05); }
.collage__cut { position: absolute; left: -2%; bottom: 0; width: 50%; height: auto; filter: drop-shadow(0 16px 18px rgba(45, 6, 70, .2)); }
.collage__zig { position: absolute; left: 52%; bottom: 60px; width: 60px; height: 60px; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 22px 0 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.facts b { display: block; font: 700 1.5rem/1.1 var(--serif); }
.facts span { font-size: .76rem; line-height: 1.3; display: block; }

/* ---------- banner ---------- */
.banner { position: relative; display: grid; justify-items: center; gap: 16px; text-align: center; padding: clamp(40px, 6vw, 64px) clamp(20px, 22%, 260px); border: 1.5px solid var(--line); border-radius: 18px; background: linear-gradient(120deg, var(--blush), #ffeef8); overflow: hidden; }
.banner .h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); max-width: 17em; }
.banner__l, .banner__r { position: absolute; height: 120%; width: auto; max-width: none; filter: drop-shadow(0 16px 18px rgba(45, 6, 70, .22)); }
.banner__l { left: 3%; top: 26%; rotate: -16deg; }
.banner__r { right: 3%; top: -46%; rotate: 17deg; }
.banner__leaf { position: absolute; right: 21%; bottom: -8px; }

/* ---------- 19 L home delivery ---------- */
.delivery { display: grid; grid-template-columns: minmax(200px, .8fr) 1.6fr; align-items: stretch; border: 1.5px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; margin-bottom: clamp(50px, 7vw, 86px); }
.delivery__art { position: relative; min-height: 300px; background: var(--c); display: block; overflow: hidden; }
.delivery__art img { position: absolute; inset: 24px 0 0; width: 100%; height: calc(100% - 24px); object-fit: contain; object-position: 50% 100%; translate: 0 7%; filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .25)); transition: transform .5s var(--pop); transform-origin: 50% 100%; }
.delivery__art:hover img { transform: translateY(-4%) scale(1.04); }
.delivery__copy { display: grid; justify-items: start; align-content: center; gap: 14px; padding: clamp(24px, 4vw, 48px); }
.delivery__copy p { margin: 0; }
.delivery__phones { display: flex; flex-wrap: wrap; gap: 10px; max-width: none; }
.delivery__phones .pill { font-size: 1.05rem; }
.delivery-wrap { margin-top: calc(-1 * clamp(20px, 4vw, 50px)); }
.drink__note { margin: 14px 0 0; font-size: .93rem; }

/* ---------- story ---------- */
.story { margin-top: clamp(50px, 7vw, 90px); padding: clamp(50px, 7vw, 86px) 0; background: radial-gradient(60% 70% at 30% 40%, var(--cream), #fff 75%); }
.story__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.story__copy { position: relative; padding-left: 24px; display: grid; justify-items: start; gap: 14px; }
.bigquote { position: absolute; left: 0; top: -46px; font: 700 8rem/1 var(--serif); color: transparent; -webkit-text-stroke: 1.5px #cdb98f; pointer-events: none; }
.story__quote { font: 700 clamp(1.25rem, 2.3vw, 1.6rem)/1.3 var(--serif); margin: 0 0 14px; max-width: 24ch; }
.story__side { position: relative; display: grid; justify-items: start; gap: 14px; }
.story__bottles { justify-self: center; display: flex; align-items: flex-end; height: clamp(240px, 30vw, 360px); padding: 0 20px; }
.story__bottles img { width: auto; height: 100%; margin: 0 -10px; filter: drop-shadow(0 18px 18px rgba(45, 6, 70, .2)); transition: transform .5s var(--pop); transform-origin: 50% 100%; }
.story__bottles img:nth-child(1) { height: 92%; rotate: -5deg; }
.story__bottles img:nth-child(2) { height: 78%; z-index: 1; }
.story__bottles img:nth-child(3) { height: 100%; z-index: 2; }
.story__bottles img:nth-child(4) { height: 84%; rotate: 5deg; }
.story__bottles img:hover { transform: translateY(-5%) rotate(-3deg); }
.story__heart { position: absolute; left: 6%; top: -8px; }
.story__side h3 { font: 700 1.3rem/1.2 var(--serif); }
.values { display: flex; flex-wrap: wrap; gap: 8px; }
.values li { padding: 8px 13px; border-radius: 10px; background: var(--tint); font-weight: 600; font-size: .86rem; }

/* ---------- factory ---------- */
.factory { padding: clamp(40px, 6vw, 70px) 0 clamp(50px, 7vw, 90px); overflow: hidden; }
.social { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; max-width: none; margin-bottom: 26px; }
.social a { display: inline-flex; align-items: center; gap: 8px; font: 700 clamp(1.5rem, 3vw, 2rem)/1 var(--serif); text-decoration: none; }
.social a:hover { color: var(--mulberry); }
.photos { overflow: hidden; }
.photos__run { display: flex; gap: 12px; width: max-content; animation: run 48s linear infinite; }
.photos:hover .photos__run { animation-play-state: paused; }
.photos img { width: 230px; height: 250px; object-fit: cover; transition: transform .4s var(--pop); }
.photos img:hover { transform: scale(1.06); }
.film { position: relative; margin-top: clamp(30px, 5vw, 56px); border-radius: 18px; overflow: hidden; background: var(--plum); aspect-ratio: 16 / 9; }
.film video { width: 100%; height: 100%; object-fit: cover; }
.film__play { position: absolute; inset: 0; border: 0; background: rgba(45, 6, 70, .2); cursor: pointer; display: grid; place-items: center; }
.film__play:hover .pill { transform: scale(1.08); }
.film.is-playing .film__play { display: none; }

/* ---------- contact ---------- */
.contact { padding: clamp(50px, 7vw, 90px) 0; background: linear-gradient(#fff, var(--glow)); }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: start; }
.reach { margin: 24px 0 0; }
.reach div { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); }
.reach dt { font-size: .86rem; opacity: .75; }
.reach dd { margin: 0; font-weight: 600; }
.reach a { text-decoration-color: var(--violet); text-underline-offset: 4px; }
.form { background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: clamp(22px, 3vw, 36px); display: grid; gap: 14px; }
.form h3 { font: 700 1.6rem/1.15 var(--serif); }
.form label { display: grid; gap: 6px; font-size: .86rem; font-weight: 600; }
.form input, .form textarea { font: 500 1rem/1.4 var(--text); color: var(--plum); background: var(--blush); border: 1.5px solid transparent; border-radius: 12px; padding: 12px 14px; width: 100%; resize: vertical; }
.form input:focus, .form textarea:focus { outline: 0; border-color: var(--plum); background: #fff; }
.form .pill { justify-self: start; }
.hp { position: absolute; left: -9999px; }
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 60; translate: -50% 0; background: var(--plum); color: #fff; font-weight: 600; padding: 14px 24px; border-radius: 999px; box-shadow: 0 10px 30px rgba(45, 6, 70, .3); animation: toast .6s var(--pop); max-width: calc(100% - 32px); }
.toast--error { background: #c0263b; }
@keyframes toast { from { translate: -50% 140%; } }

/* ---------- footer ---------- */
.foot { padding: 56px 0 30px; border-top: 1px solid var(--line); }
.foot__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.foot__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.foot__cols h2 { font: 700 1.15rem/1.2 var(--serif); margin-bottom: 12px; }
.foot__cols a { display: block; font-size: .88rem; text-decoration: none; padding: 4px 0; }
.foot__cols a:hover { text-decoration: underline; }
.foot__brand { border-left: 1px solid var(--line); padding-left: 40px; }
.foot__brand img { width: min(100%, 250px); height: auto; rotate: -3deg; }
.foot__brand p { margin: 18px 0 0; font-weight: 600; font-size: .92rem; max-width: 30ch; }
.foot__meta { margin-top: 36px; font-size: .8rem; opacity: .7; max-width: none; }

/* ---------- drinks list + one drink ---------- */
.pagehead { margin-top: -68px; padding: calc(68px + clamp(34px, 6vw, 70px)) 0 clamp(30px, 5vw, 50px); background: linear-gradient(var(--glow), #fff); text-align: center; }
.pagehead--tall { min-height: 70svh; }
.shop { padding: clamp(20px, 3vw, 40px) 0 clamp(60px, 8vw, 100px); }
.shop--more { padding-top: clamp(40px, 6vw, 70px); }
.range { margin-bottom: clamp(44px, 6vw, 76px); }
.range[hidden] { display: none; }
.drink { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 5vw, 70px); align-items: center; padding: clamp(24px, 4vw, 50px) 0; }
.drink__stage { position: relative; background: var(--c); aspect-ratio: 1 / 1.1; overflow: hidden; }
.drink__stage .card__badge { top: 16px; right: 16px; font-size: 1rem; padding: 8px 13px; }
.drink__bottle { position: absolute; inset: 34px 0 0; width: 100%; height: calc(100% - 34px); object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 26px 22px rgba(0, 0, 0, .28)); translate: 0 5%; transform: rotate(var(--ry, 0deg)) translate(var(--tx, 0), var(--ty, 0)); transition: transform .5s var(--glide); }
.drink__panel { display: grid; justify-items: start; gap: 12px; }
.drink__title { font-size: clamp(2.4rem, 5vw, 3.8rem); }
.drink__sub { font: 700 1.25rem/1.2 var(--serif); margin-top: 18px; }
.spec { margin: 0; width: 100%; }
.spec div { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-top: 1px solid var(--line); }
.spec dt { opacity: .75; }
.spec dd { margin: 0; font-weight: 700; text-align: right; }
.spec small { font-weight: 500; opacity: .75; }
.code { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.ean { width: 190px; margin-top: 8px; padding: 12px 12px 6px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; color: #000; }

/* ---------- reveal on scroll (only when scripts run) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .7s, transform .9s var(--glide); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .cards li:nth-child(3n+2)[data-reveal] { transition-delay: .1s; }
.js .cards li:nth-child(3n)[data-reveal] { transition-delay: .2s; }

/* ---------- smaller screens ---------- */
@media (max-width: 960px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .hero__row { grid-template-columns: 1fr 1fr; }
  .trio { grid-column: 1 / -1; grid-row: 2; height: clamp(300px, 70vw, 440px); }
  .hero__left, .hero__right { padding-bottom: 0; max-width: none; }
  .hero__right { justify-self: start; }
  .cards--4 { grid-template-columns: repeat(3, 1fr); }
  .about__grid, .story__grid, .contact__grid, .drink, .foot__grid { grid-template-columns: 1fr; }
  .foot__brand { border-left: 0; padding-left: 0; }
  .delivery { grid-template-columns: 1fr; }
  .delivery__art { min-height: 240px; }
  .banner { padding-inline: 24px; padding-bottom: 150px; }
  .banner__l { height: 190px; top: auto; bottom: -70px; left: 8%; }
  .banner__r { height: 190px; top: auto; bottom: -60px; right: 8%; }
  .banner__leaf { right: 46%; }
}
@media (max-width: 620px) {
  .hero__title .pill { display: flex; width: max-content; margin: 16px auto 0; translate: none; }
  .hero__row { grid-template-columns: 1fr; }
  .hero__left { display: none; }
  .trio { grid-row: auto; }
  .cards, .cards--4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card { padding: 8px; }
  .card__label { font-size: .92rem; padding: 8px 4px; }
  .collage { min-height: 400px; }
  .reach div { grid-template-columns: 1fr; gap: 2px; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .photos img { width: 170px; height: 190px; }
}


/* ==========================================================================
   TUT brand layer (2026-10-13): flavour colours, brand pattern, more motion.
   Palette — Mulberry #56008a · Plum #2d0646 · Violet #a60adb · Berry #ff5fa8
   Cola #e3263a · Orange #ff9a1f · Tarhun #1faa55 · Aqua #2aa5e8 · Lemon #ffd23f
   ========================================================================== */
:root { --berry: #ff5fa8; --cola: #e3263a; --orange: #ff9a1f; --tarhun: #1faa55; --aqua: #2aa5e8; --lemon: #ffd23f; --flavour: var(--orange); }

.progress { position: fixed; inset: 0 0 auto; z-index: 70; height: 4px; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--violet), var(--berry), var(--orange), var(--lemon), var(--tarhun), var(--aqua)); }

.strip { background: linear-gradient(90deg, var(--plum), var(--mulberry), var(--violet), var(--mulberry), var(--plum)); background-size: 300% 100%; animation: pan 16s linear infinite; }
@keyframes pan { to { background-position: 300% 0; } }

.nav__link { padding: 7px 12px; border-radius: 999px; background: none; transition: background .25s, color .25s, transform .25s var(--pop); }
.nav__link:hover { background: var(--lemon); transform: translateY(-2px) rotate(-2deg); }
.nav__link[aria-current] { background: var(--plum); color: #fff; }
.drawer .nav__link { padding: 4px 0; background: none; }
.drawer .nav__link:hover { background: none; color: var(--violet); transform: none; }

.pill--solid:hover { background: var(--berry); color: var(--plum); border-color: var(--plum); }
.chip:nth-child(odd):hover { transform: translateY(-4px) rotate(3deg); }

/* hero: brand pattern, a flavour blob that changes with the brand, fizz, floating stickers */
.hero { background: url(../img/pattern-light.svg) 0 0 / 260px, radial-gradient(60% 50% at 12% 18%, #ffe1f0 0, transparent 70%), radial-gradient(50% 45% at 90% 12%, #fff1bf 0, transparent 70%), linear-gradient(var(--glow), #fff 82%); animation: drift 60s linear infinite; }
@keyframes drift { to { background-position: 260px 520px, 0 0, 0 0, 0 0; } }
.hero__title { animation: titlein .9s var(--glide) both; }
@keyframes titlein { from { opacity: 0; transform: translateY(26px); } }
.squiggle { display: block; width: min(300px, 60%); margin: 6px auto 0; stroke: var(--berry); }
.squiggle path { stroke-dasharray: 340; stroke-dashoffset: 340; animation: draw 1.2s .5s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero__sub { margin-top: 8px; }

.trio__blob { position: absolute; left: 50%; bottom: -22%; z-index: 0; width: min(118%, 600px); aspect-ratio: 1; translate: -50% 0; background: var(--flavour); border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; transition: background-color .8s var(--glide); animation: morph 11s ease-in-out infinite, turn 46s linear infinite; }
.trio__blob--2 { width: min(60%, 300px); left: 82%; bottom: 34%; background: var(--lemon); opacity: .9; animation-duration: 9s, 30s; animation-direction: alternate, reverse; transition: none; }
@keyframes morph { 0%, 100% { border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; } 33% { border-radius: 58% 42% 44% 56% / 44% 58% 42% 56%; } 66% { border-radius: 40% 60% 52% 48% / 60% 40% 58% 42%; } }
@keyframes turn { to { rotate: 360deg; } }
.trio__item img { animation: bob 5s ease-in-out infinite; }
.trio__item--0 img { animation-delay: -1.6s; }
.trio__item--2 img { animation-delay: -3.1s; }
@keyframes bob { 50% { translate: 0 -10px; } }
.float { position: absolute; z-index: 3; width: 58px; height: 58px; animation: floaty 7s ease-in-out infinite; }
.float--1 { left: -9%; top: 10%; }
.float--2 { right: -8%; top: 2%; animation-delay: -2.4s; }
.float--3 { left: -4%; bottom: 16%; width: 50px; height: 50px; animation-delay: -4.2s; }
@keyframes floaty { 0%, 100% { translate: 0 0; rotate: -10deg; } 50% { translate: 8px -16px; rotate: 10deg; } }

.fizz { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fizz i { position: absolute; bottom: -60px; left: var(--x); width: var(--s); aspect-ratio: 1; border-radius: 50%; border: 2.5px solid var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); animation: rise var(--d) linear infinite; animation-delay: var(--w, 0s); }
.fizz i:nth-child(1) { --x: 4%; --s: 34px; --d: 13s; --c: var(--berry); }
.fizz i:nth-child(2) { --x: 13%; --s: 16px; --d: 9s; --w: -4s; --c: var(--aqua); }
.fizz i:nth-child(3) { --x: 24%; --s: 24px; --d: 15s; --w: -9s; --c: var(--orange); }
.fizz i:nth-child(4) { --x: 37%; --s: 12px; --d: 8s; --w: -2s; --c: var(--tarhun); }
.fizz i:nth-child(5) { --x: 52%; --s: 20px; --d: 11s; --w: -6s; --c: var(--violet); }
.fizz i:nth-child(6) { --x: 64%; --s: 38px; --d: 16s; --w: -11s; --c: var(--lemon); }
.fizz i:nth-child(7) { --x: 76%; --s: 14px; --d: 10s; --w: -1s; --c: var(--berry); }
.fizz i:nth-child(8) { --x: 86%; --s: 28px; --d: 14s; --w: -7s; --c: var(--aqua); }
.fizz i:nth-child(9) { --x: 94%; --s: 12px; --d: 7s; --w: -3s; --c: var(--orange); }
.fizz i:nth-child(10) { --x: 45%; --s: 30px; --d: 18s; --w: -13s; --c: var(--tarhun); }
@keyframes rise { to { transform: translate(30px, -110svh) scale(1.3); opacity: 0; } }
.hero__head, .hero__row { position: relative; z-index: 1; }

/* brand band */
.band { background: var(--mulberry) url(../img/pattern-dark.svg) 0 0 / 220px; color: #fff; overflow: hidden; padding: 14px 0; }
.band__run { display: flex; align-items: center; gap: 30px; width: max-content; animation: run 30s linear infinite; }
.band span { font: 700 italic clamp(1.5rem, 3vw, 2.2rem)/1 var(--serif); white-space: nowrap; }
.band span:nth-of-type(3n+1) { color: var(--lemon); }
.band span:nth-of-type(3n+2) { color: #ffc2e2; }
.band img { height: clamp(26px, 3vw, 36px); width: auto; filter: brightness(0) invert(1); animation: wiggle 4s ease-in-out infinite; }
@keyframes run { to { transform: translateX(-33.333%); } }
.strip__run { animation-name: run4; }
@keyframes run4 { to { transform: translateX(-25%); } }

/* cards pop in, and lift with a hard colour shadow */
.js .cards li[data-reveal] { transform: translateY(40px) rotate(-3deg) scale(.94); }
.js .cards li[data-reveal].is-in { transform: none; }
.card { transition: transform .35s var(--pop), box-shadow .35s var(--pop); }
.card:hover, .card:focus-visible { transform: translate(-5px, -7px) rotate(-1deg); box-shadow: 10px 12px 0 var(--plum); }
.card__badge { transition: transform .4s var(--pop); }
.card:hover .card__badge { transform: rotate(8deg) scale(1.12); background: var(--lemon); }
.card__label { transition: background .3s, color .3s; }
.card:hover .card__label { background: var(--plum); color: #fff; }

/* 19 L delivery in water colours, with a moving wave */
.delivery { border-color: #bfe3f8; background: linear-gradient(120deg, #e9f6ff, #f5fbff); }
.delivery__art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; z-index: 1; opacity: .55;
  background: radial-gradient(circle at 50% 0, transparent 21px, #fff 22px) 0 0 / 60px 46px repeat-x; animation: wave 5s linear infinite; }
@keyframes wave { to { background-position: 60px 0; } }
.delivery__phones .pill--solid { background: var(--aqua); border-color: var(--aqua); color: #fff; }
.delivery__phones .pill--solid:hover { background: var(--plum); border-color: var(--plum); color: #fff; }

/* about: colour washes and round fact badges */
.about { position: relative; }
.about::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(34% 40% at 8% 30%, #fff3c4 0, transparent 70%), radial-gradient(30% 36% at 96% 70%, #ffe0ef 0, transparent 70%); }
.facts { border-top: 0; gap: 14px; grid-template-columns: repeat(3, minmax(0, 150px)); }
.facts li { display: grid; align-content: center; justify-items: center; text-align: center; aspect-ratio: 1; padding: 12px; border-radius: 50%; background: var(--lemon); transition: transform .4s var(--pop); }
.facts li:nth-child(2) { background: #ffc2e2; }
.facts li:nth-child(3) { background: #bfe6ff; }
.facts li:hover { transform: scale(1.1) rotate(-6deg); }
.js .facts li { animation: badge 6s ease-in-out infinite; }
.js .facts li:nth-child(2) { animation-delay: -2s; }
.js .facts li:nth-child(3) { animation-delay: -4s; }
@keyframes badge { 50% { translate: 0 -7px; rotate: 3deg; } }
.collage__big, .collage__small { border-radius: 14px; }
.collage__big { box-shadow: 14px 14px 0 var(--lemon); }
.collage__small { box-shadow: -10px 10px 0 var(--berry); }

/* banner: slow moving colour */
.banner { border-color: transparent; background: linear-gradient(120deg, #ffe0ef, #efe1ff, #fff1bf, #dcf1ff, #ffe0ef); background-size: 320% 100%; animation: pan 18s linear infinite; }

/* story on a lemon wash */
.story { background: radial-gradient(55% 70% at 26% 40%, #fff0b3 0, #fff9df 45%, #fff 80%); }
.values li { transition: transform .3s var(--pop); }
.values li:hover { transform: translateY(-4px) rotate(-3deg) scale(1.06); }

/* factory: a mulberry block */
.factory { background: var(--mulberry) url(../img/pattern-dark.svg) 0 0 / 260px; color: #fff; }
.factory .social a:hover { color: var(--lemon); }
.tag, .chip, .values li { color: var(--plum); }
.photos img { border-radius: 14px; border: 4px solid #fff; }
.photos img:nth-child(odd) { rotate: -2deg; }
.photos img:nth-child(even) { rotate: 2deg; translate: 0 8px; }
.photos { padding: 16px 0 22px; }
.film { border: 4px solid #fff; }

/* contact + footer */
.contact { background: url(../img/pattern-light.svg) 0 0 / 260px, linear-gradient(#fff, var(--glow)); }
.form { position: relative; overflow: hidden; border-color: transparent; box-shadow: 12px 12px 0 var(--mulberry); }
.form::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: linear-gradient(90deg, var(--violet), var(--berry), var(--orange), var(--lemon), var(--tarhun), var(--aqua)); }
.foot { background: var(--plum) url(../img/pattern-dark.svg) 0 0 / 260px; color: #fff; border-top: 0; }
.foot__brand { border-left-color: rgba(255, 255, 255, .2); }
.foot__logo { display: inline-block; background: #fff; padding: 14px 18px; border-radius: 18px; rotate: -3deg; transition: transform .4s var(--pop); }
.foot__logo:hover { transform: rotate(6deg) scale(1.05); }
.foot__brand img { rotate: none; width: min(100%, 200px); }
.foot__cols a:hover { color: var(--lemon); }

.pagehead { background: url(../img/pattern-light.svg) 0 0 / 260px, radial-gradient(50% 60% at 10% 20%, #ffe1f0 0, transparent 70%), radial-gradient(45% 55% at 92% 10%, #fff1bf 0, transparent 70%), linear-gradient(var(--glow), #fff); }
.drink__stage { border-radius: 18px; box-shadow: 14px 14px 0 var(--plum); }

@media (max-width: 960px) { .float { display: none; } .facts { grid-template-columns: repeat(3, minmax(0, 120px)); } .facts b { font-size: 1.2rem; } }
@media (prefers-reduced-motion: reduce) { .fizz { display: none; } .squiggle path { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}