/* =========================================================
   Acqua Fiuggi — site styles
   ========================================================= */

:root {
  /* Design tokens read off the source site's own stylesheet: an indigo/white
     palette, a two-step type scale, and a 10px spacing grid. */
  --ink:        #171647;   /* the brand indigo — text, dark grounds, buttons */
  --ink-soft:   #4a4a72;
  --ink-faint:  #9ca3af;
  --line:       #ebebeb;
  --line-soft:  #f2f2f2;
  --gray-light: #e8e7e7;   /* the source's bg-gray-light */
  --dark-gray:  #bebebe;   /* the source's text-dark-gray */
  --paper:      #ffffff;
  --paper-2:    #fafafa;
  --water:      #171647;
  --water-deep: #0e0d2e;
  --water-pale: #c9c8dd;
  --gold:       #b0955f;
  --white:      #ffffff;

  /* type scale (mobile) */
  --body-l:          2.75rem;
  --title-section-l: 2.45rem;
  --title-menu-m:    2.375rem;
  --title-section-m: 2rem;
  --body-m:          1.5rem;
  --label-s:         1.25rem;
  --body-s:          1rem;
  --body-xs:         .875rem;

  --lead-tight: 100%;
  --lead-base:  120%;
  --lead-prose: 145%;

  /* spacing grid */
  --sides: 20px;
  --s10: 10px; --s20: 10px; --s30: 15px; --s40: 20px;
  --s50: 25px; --s60: 30px; --s70: 35px; --s80: 40px;

  --gut: var(--sides);
  --sec: var(--s80);
  --maxw: 1536px;

  --display: "Instrument Serif", "Noto Serif KR", "Times New Roman", serif;
  --script: "Pinyon Script", "Instrument Serif", cursive;
  --sans: "Inter", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Motion and spacing tokens taken from the source stylesheet. */
  --ease: cubic-bezier(.2, 0, 0, 1);              /* ease-standard */
  --ease-decel: cubic-bezier(0, 0, 0, 1);         /* ease-standard-decelerate */
  --ease-emph: cubic-bezier(.05, .7, .1, 1);      /* ease-emphasized-decelerate */
  --t-short: .2s;
  --t-medium: .4s;
  --t-long: .45s;
  --t-long-4: .6s;
  --t-xlong: 1s;
  --s160: 160px;
  --r-img: 15px;
}

@media (min-width: 1024px) {
  :root {
    --body-l:          5rem;
    --title-section-l: 4rem;
    --title-menu-m:    4rem;
    --title-section-m: 3rem;
    --body-m:          2rem;
    --label-s:         1.5rem;
    --body-s:          1.25rem;
    --body-xs:         1rem;

    --s20: 20px; --s30: 30px; --s40: 40px;
    --s50: 50px; --s60: 60px; --s70: 70px; --s80: 80px;
    --r-img: 30px;
  }
}

html[lang="ko"] {
  --display: "Instrument Serif", "Noto Serif KR", serif;
  --sans: "Inter", "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Korean breaks at word (eojeol) boundaries, never inside a word — without
   this a phrase such as "공식 수입원입니다" splits mid-word at the wrap. */
html[lang="ko"] body { word-break: keep-all; overflow-wrap: break-word; }

html[lang="ja"] {
  --display: "Instrument Serif", "Noto Serif JP", serif;
  --sans: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: smooth; } }

/* Lenis. Its own scroll-behavior must stay `auto`, so CSS smooth scrolling
   is only enabled where Lenis is not running (reduced motion). */
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: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Scrollbar hidden, as on the source site. */
::-webkit-scrollbar { width: 0; height: 0; }
html { scrollbar-width: none; }
html { -webkit-tap-highlight-color: transparent; }
:root { color-scheme: light; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--body-s);
  line-height: var(--lead-base);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

/* Without an explicit height:auto here, a bare <img> that only carries the
   width/height HTML attributes (added for layout-shift prevention) gets its
   used height pinned to that raw attribute pixel value in some layout
   contexts, defeating any aspect-ratio the author CSS sets for it. */
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: var(--lead-tight); letter-spacing: 0; }
p { margin: 0 0 .8em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--water-pale); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--water);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- layout primitives ---------- */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 940px; }
@media (min-width: 1024px) {
  .wrap { padding-inline: 8.3333%; }
  .wrap--narrow,
  .wrap--full { padding-inline: var(--sides); }
}
/* The source spaces plain sections with margins, which collapse between
   neighbours to one 80px gap. Only sections carrying a background use
   padding, so their colour extends the full 80px. */
.section { margin-block: var(--s80); }
.section--tight { margin-block: var(--s60); }
.section--paper2,
.section--gray,
.section--ink { margin-block: 0; padding-block: var(--s80); }
.section--statement { margin-block: 0; padding-block: var(--s160); }
.section--paper2 { background: var(--paper-2); }
.section--gray { background: var(--gray-light); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink .kicker { color: var(--water-pale); }
.section--ink .rule { background: rgba(255,255,255,.18); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.kicker {
  font-size: var(--body-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 22px;
  font-weight: 400;
}

.h-display {
  font-family: var(--display);
  font-size: var(--body-l);
  line-height: var(--lead-tight);
  letter-spacing: 0;
}
.h1 { font-family: var(--display); font-size: var(--title-section-l); font-style: italic; line-height: var(--lead-tight); }
.h2 { font-family: var(--display); font-size: var(--title-section-m); font-style: italic; line-height: var(--lead-base); }
.h3 { font-family: var(--display); font-size: var(--label-s); font-weight: 400; line-height: var(--lead-base); }

.lead { font-size: var(--body-m); line-height: var(--lead-base); color: var(--ink); max-width: 30ch; }
.section--ink .lead { color: rgba(247,245,240,.76); }

.prose { color: var(--ink); max-width: 62ch; font-size: var(--body-s); line-height: var(--lead-prose); }
.prose strong { font-weight: 500; color: var(--ink); }
.section--ink .prose { color: rgba(247,245,240,.76); }
.section--ink .prose strong { color: var(--paper); }

/* ---------- links & buttons ---------- */

.link {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  color: var(--ink);
  transition: gap .35s var(--ease), color .25s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { gap: 1.1em; color: var(--water); }
}
.link .arw { transition: transform .35s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .link:hover .arw { transform: translateX(2px); }
}
.section--ink .link { color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .section--ink .link:hover { color: var(--water-pale); }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  padding: 15px 34px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--water-deep); transform: translateY(-1px); }
}
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
}

/* ---------- header ---------- */

.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 48px;
  padding: 10px var(--sides);
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.hdr::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  opacity: 0;
  transition: opacity .4s var(--ease);
  z-index: -1;
}
.hdr.is-stuck::before, .hdr--light::before { opacity: 1; }
.hdr { transition: background .4s var(--ease), transform .45s var(--ease); }
.hdr.is-hidden { transform: translateY(-100%); }

/* Every page opens on a dark hero, so the bare header is light and only
   flips to ink once it gains its paper background. A page whose hero has
   no dark backdrop at all (Contacts) starts in that flipped state instead,
   since it never gets the scroll past the hero that would normally trigger
   it -- otherwise the header renders paper-on-paper, invisible. */
.hdr { color: var(--paper); }
.hdr.is-stuck, .hdr--light { color: var(--ink); }
/* Only the menu button sits over the drawer; the centred logo and the
   language links stay over the page, so they keep their normal colour. */
.hdr.is-nav-open .menu-btn { color: var(--paper); }

/* Logo sits absolutely centred in the 48px bar, at the source's 62x31. */
.hdr__brand {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  z-index: 2;
  display: block;
}
.logo-mark {
  width: 62px;
  height: 31px;
  display: block;
  transition: opacity .4s var(--ease);
}
.logo-full { width: 148px; height: auto; }

/* The source logo carries a colour transition only — no entrance animation. */
.logo-mark { transition: color var(--t-long-4) var(--ease); }

.langs {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--body-xs);
  font-weight: 600;
  text-transform: uppercase;
  line-height: var(--lead-base);
}
.langs__sep { opacity: 1; }
.langs__link { position: relative; color: inherit; }
.langs__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 0;
  background: currentColor;
  transition: width .3s cubic-bezier(.2, 0, 0, 1);
}
.langs__link.is-active::after { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .langs__link:hover::after { width: 100%; }
}

.menu-btn {
  position: relative;
  z-index: 2;
  font-size: var(--body-xs);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1;
  transition: opacity .4s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .menu-btn:hover { opacity: .65; }
}
.menu-btn__label { display: inline-block; }

/* ---------- overlay nav ---------- */

/* Left drawer sitting ABOVE the header, as on the source site (panel z-55
   over header z-50). That is why it carries its own close button: the
   header's menu button is deliberately covered, so a sticky header can
   never overlap the control that dismisses the drawer. */
.nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 70;
  background: var(--ink);
  color: var(--paper);
  padding: 0 var(--s40) var(--s30);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s80);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .72s cubic-bezier(.16, 1, .3, 1), visibility .72s;
}
.nav.is-open { transform: translateX(0); visibility: visible; }

@media (min-width: 1024px) { .nav { width: 41.6667%; gap: var(--s30); } }
@media (min-width: 1280px) { .nav { width: 33.3333%; } }

.nav__close {
  padding: var(--s40) 0 0;
  width: fit-content;
  flex: none;
  color: var(--paper);
  opacity: 0;
  transition: opacity .45s var(--ease) .1s;
}
.nav.is-open .nav__close { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .nav__close:hover { opacity: .5; }
}
.nav__close svg { width: 20px; height: 20px; display: block; }
@media (min-width: 1024px) { .nav__close { padding-top: var(--s20); } }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(10, 10, 35, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

.nav__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s80);
  flex: 1 1 auto;
  min-height: 0;
}

.nav__list { display: flex; flex-direction: column; gap: var(--s30); }
@media (min-width: 1024px) { .nav__list { gap: var(--s10); } }
.nav__list a, .nav__group > summary {
  display: inline-block;
  font-family: var(--display);
  font-size: var(--body-m);
  line-height: 1.3;
  color: var(--paper);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.nav.is-open .nav__list a, .nav.is-open .nav__group > summary { opacity: 1; transform: none; }
/* Source fades these to 50% opacity on hover -- not a colour swap, not an
   underline -- which against the indigo drawer reads as the text visibly
   dimming/greying. */
@media (hover: hover) and (pointer: fine) {
  .nav.is-open .nav__list a:hover,
  .nav.is-open .nav__group > summary:hover { opacity: .5; }
}

/* Products is a disclosure group, matching the source site. */
.nav__group > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  width: fit-content;
}
.nav__group > summary::-webkit-details-marker { display: none; }
.nav__group > summary i {
  position: relative; width: 11px; height: 11px; flex: none; opacity: .6;
}
.nav__group > summary i::before, .nav__group > summary i::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: currentColor;
  transition: transform .35s var(--ease);
}
.nav__group > summary i::after { transform: rotate(90deg); }
.nav__group[open] > summary i::after { transform: rotate(0); }

.nav__sub { padding: var(--s40) 0 0; display: grid; gap: var(--s30); }
@media (min-width: 1024px) { .nav__sub { padding-top: var(--s10); gap: var(--s10); } }
.nav__sub a {
  font-family: var(--sans);
  font-size: var(--body-s);
  letter-spacing: .01em;
  color: var(--dark-gray);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.nav.is-open .nav__sub a { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .nav.is-open .nav__sub a:hover { opacity: .5; }
}

.nav__aside {
  display: grid; gap: var(--s30);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease) .18s, transform .5s var(--ease) .18s;
}
.nav.is-open .nav__aside { opacity: 1; transform: none; }
.nav__aside .kicker { color: rgba(247,245,240,.45); margin-bottom: 12px; }
.nav__aside a { color: rgba(247,245,240,.72); font-size: 14px; }
@media (hover: hover) and (pointer: fine) {
  .nav__aside a:hover { color: var(--paper); }
}
.nav__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s40);
  padding-bottom: var(--s20);
  flex: none;
  font-size: var(--body-xs);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease) .18s, transform .5s var(--ease) .18s;
}
.nav.is-open .nav__foot { opacity: 1; transform: none; }
.nav__foot a {
  display: flex;
  align-items: center;
  gap: var(--s10);
  color: var(--paper);
}
.nav__foot img { width: 15px; height: 15px; flex: none; display: block; }
@media (hover: hover) and (pointer: fine) {
  .nav__foot a:hover { color: var(--paper); }
}
.nav__contact { font-size: 14px; color: rgba(247,245,240,.72); line-height: 1.9; }



/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: clamp(560px, 92vh, 960px);
  display: flex;
  align-items: flex-end;
  padding: 140px 0 clamp(48px, 7vw, 96px);
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  isolation: isolate;
}
.hero--short { min-height: clamp(440px, 66vh, 660px); }
.hero-plain {
  margin: 0;
  padding-top: 140px;
  padding-bottom: var(--s40);
  font-family: var(--display);
  font-size: var(--title-section-m);
  line-height: var(--lead-tight);
  color: var(--ink);
  text-align: center;
}
.hero-band {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 325px;
  background: var(--ink);
}
.hero-band h1 {
  margin: 0;
  font-family: var(--display);
  font-size: var(--title-section-l);
  font-style: italic;
  line-height: var(--lead-tight);
  color: var(--paper);
  text-align: center;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg svg, .hero__bg canvas { width: 100%; height: 100%; }

/* Background film. Sits above the generated backdrop, which stays behind it
   as the fallback layer while the video buffers or if it cannot play. */
.hero__bg--video { z-index: -2; }
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero__video--tall { display: none; }
@media (max-width: 1023px) {
  .hero__video--wide { display: none; }
  .hero__video--tall { display: block; }
}

/* Hero photography, layered over the generated backdrop. */
.hero__bg--photo { z-index: -2; }
.hero__bg--photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Seamless sideways drift: each band is drawn twice, so translating by half
   its width loops without a seam. */
.wave { animation: drift var(--d, 30s) linear var(--delay, 0s) infinite; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-1440px); } }

.ripples ellipse {
  transform-origin: 1080px 250px;
  animation: swell 9s ease-in-out infinite;
  animation-delay: calc(var(--i) * -3s);
}
@keyframes swell {
  0%, 100% { transform: scale(1); opacity: .55; }
  50%      { transform: scale(1.07); opacity: 1; }
}
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,10,35,.28) 0%, rgba(10,10,35,.06) 40%, rgba(10,10,35,.55) 100%),
    linear-gradient(90deg, rgba(10,10,35,.30) 0%, rgba(10,10,35,0) 55%);
}
.hero--bare::after { background: none; }
.hero__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); position: relative; }

/* Official colonnade emblem, sitting above the headline as a brand marker. */
.hero__emblem {
  width: clamp(120px, 13vw, 190px);
  height: auto;
  color: var(--paper);
  opacity: .9;
  margin-bottom: var(--s30);
}
.hero .kicker { color: rgba(247,245,240,.66); }
.hero h1 { max-width: 16ch; }
.hero__lead + .hero__lead { margin-top: 10px; }
.hero__lead { margin-top: 26px; max-width: 58ch; color: rgba(247,245,240,.82); font-size: clamp(15px, 1.35vw, 19px); }
.hero__cta { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 28px; }

/* ---------- generic blocks ---------- */

.head { display: grid; gap: var(--s20); margin-bottom: var(--s60); }
.head--center { justify-items: center; text-align: center; }
.head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
@media (max-width: 800px) { .head--split { grid-template-columns: 1fr; align-items: start; } }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split--reverse .split__art { order: 2; }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split--reverse .split__art { order: 0; }
}
.split__body .link, .split__body .btn { margin-top: 30px; }

.art {
  position: relative;
  border-radius: var(--r-img);
  overflow: hidden;
  background: linear-gradient(160deg, #e9eef1 0%, #cfdde5 45%, #a9c4d2 100%);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
}
.art--wide { aspect-ratio: 16 / 9; }
.art--deep { background: linear-gradient(160deg, #23485c 0%, #12293a 60%, #0b1a26 100%); }
.art--sand { background: linear-gradient(160deg, #f2ece1 0%, #e2d9c8 60%, #cfc3ad 100%); }
/* Absolutely centred so a tall bottle can never stretch its frame. */
.art--photo, .card__art--photo { background: var(--line-soft); }
/* Bottle cut-outs sit on a plain ground, so they are letterboxed inside
   the frame rather than cropped to fill it. */
.art--contain img { object-fit: contain !important; padding: 8%; }
.art--photo img, .card__art--photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__art--photo img { transform: scale(1.03); }
}

/* A second photo cross-fades in on hover, as on the source's collection cards. */
.media__swap {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .media__swap { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__art--photo img.media__swap { transform: none; }
}

.art > svg, .card__art > svg {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
}
.art > svg.svg--tall { height: 84%; width: auto; }
.art > svg.svg--square { width: 66%; height: auto; }
.art--wide > svg.svg--tall { height: 76%; }
.art--wide > svg.svg--square { width: 42%; }

/* ---------- cards ---------- */

.cards { display: grid; gap: clamp(22px, 3vw, 40px); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .cards--3, .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cards--2, .cards--3, .cards--4 { grid-template-columns: 1fr; } }

.card { display: flex; flex-direction: column; gap: 18px; color: inherit; }
a.card { text-decoration: none; }
a.card .link { pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  a.card:hover .link { gap: 1.1em; color: var(--water); }
}
.card__art {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-img);
  overflow: hidden;
  background: linear-gradient(165deg, #eef2f4 0%, #d5e2e9 55%, #b6cdd9 100%);
  display: grid; place-items: center;
  transition: transform .6s var(--ease);
}
.card__art > svg { transition: transform .6s var(--ease); }
.card__art > svg.svg--tall { height: 82%; width: auto; }
.card__art > svg.svg--square { width: 60%; height: auto; }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__art > svg { transform: translateY(-8px) scale(1.03); }
}
/* Soft lift behind the artwork so glass reads on the dark card grounds. */
.card__art::before, .art::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(58% 50% at 50% 58%, rgba(255,255,255,.18), transparent 72%);
  pointer-events: none;
}
.card__art--sand { background: linear-gradient(165deg, #f4efe5 0%, #e6dccb 55%, #d3c6ae 100%); }
.card__art--deep { background: linear-gradient(165deg, #2a5a74 0%, #12293a 100%); }
.card__art--night { background: linear-gradient(165deg, #2b5566 0%, #101f2b 100%); }
.card__body { display: grid; gap: 10px; }
.card__body p { color: var(--ink-soft); font-size: 15px; }
.card .link { margin-top: 6px; align-self: start; }

.partners {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px var(--s40);
}
@media (min-width: 620px) { .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.partner-card { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; }
.partner-card__art {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-img);
  overflow: hidden;
  background: var(--line-soft);
  display: grid;
  place-items: center;
  padding: 14%;
}
.partner-card__art img { width: 100%; height: auto; object-fit: contain; }
.partner-card__wordmark {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--title-section-m);
  color: var(--ink);
  text-align: center;
}
.partner-card__name { font-size: var(--body-m); }

.tile {
  border: 1px solid var(--line);
  border-radius: var(--r-img);
  padding: clamp(24px, 2.6vw, 38px);
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .tile:hover { border-color: var(--ink); transform: translateY(-2px); }
}
.tile p { color: var(--ink-soft); font-size: 15px; }
.tile .link { margin-top: auto; align-self: start; padding-top: 8px; }
.tile__num { font-family: var(--display); font-size: 30px; color: var(--water); line-height: 1; }

/* ---------- editorial / partner grid ---------- */

.grid-list { display: grid; gap: clamp(22px, 3vw, 38px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid-list { grid-template-columns: 1fr; } }

.plate {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-img);
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.plate {
  flex-direction: column;
  gap: 10px;
  align-content: center;
}
.plate span {
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.2;
  letter-spacing: .01em;
  display: block;
}
.plate em {
  display: block;
  font-style: normal;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-faint);
  max-width: 26ch;
  margin-inline: auto;
  transition: color .35s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .plate:hover em { color: rgba(247,245,240,.72); }
}
@media (hover: hover) and (pointer: fine) {
  a.plate:hover, .plate:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
}

.post__art {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-img);
  background: linear-gradient(150deg, #dfe8ed 0%, #b9cfda 100%);
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.post__art i {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 20% 15%, rgba(255,255,255,.6), transparent 55%);
}
.post__date { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- product formats ---------- */

.formats { display: grid; gap: clamp(28px, 4vw, 56px); justify-items: center; }
.formats > div:first-child { width: 100%; }
.formats__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s20);
}
.dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--dot, var(--ink));
  position: relative;
  transition: transform .25s var(--ease);
}
.dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--dot, var(--ink));
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.dot[aria-selected="true"]::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .dot:hover { transform: scale(1.12); }
}

.formats__name {
  transition: opacity var(--t-long) var(--ease-emph);
  margin-top: var(--s30);
  text-align: center;
  font-family: var(--script);
  font-style: normal;
  font-size: var(--title-section-m);
  line-height: var(--lead-base);
  color: var(--ink);
}
.tab {
  padding: 10px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: all .25s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .tab:hover { border-color: var(--ink); color: var(--ink); }
}
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.formats__panel { display: none; }
.formats__panel.is-active { display: block; position: relative; animation: fade var(--t-long) var(--ease-emph); }

/* Phones take one size at a time, swiped or stepped with the arrows; from
   1024px every size stands together in a row and the arrows go away. */
.bottles__arw { display: none; }

.formats > div:last-child { width: 100%; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.bottles {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(20px, 5vw, 68px);
}

.bottle { display: grid; justify-items: center; gap: 0; }
.bottle svg { height: calc(clamp(180px, 30vw, 330px) * var(--s, 1)); width: auto; }
/* The photos are shot on one shared canvas per line, bottom-aligned, so a
   smaller format is already drawn at its true fraction of the 1 L frame's
   height -- a 0.25 L bottle occupies about 62% of it. Multiplying that by
   --s as well compounded with the real difference, so every size below 1 L
   rendered smaller than intended; the photos need only a fixed frame, and
   --s stays for the abstract SVG fallback below, which has no built-in
   scale of its own. mix-blend-mode: multiply was left over from when these
   cut-outs sat on a white square -- they carry real alpha, and multiply was
   tinting the visible glass wherever it crossed a dark ground. */
.bottle__shot {
  height: clamp(220px, 40vw, 470px);
  width: auto;
  object-fit: contain;
  object-position: bottom center;
}

@media (max-width: 1023px) {
  .bottles {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 0;
  }
  .bottles::-webkit-scrollbar { width: 0; height: 0; }
  .bottle {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }
  .bottle__shot { height: min(58vh, 135vw); }
  .bottle svg { height: calc(min(52vh, 120vw) * var(--s, 1)); }
  .bottles__arw {
    display: block;
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 3;
    width: 44px;
    height: 44px;
    color: var(--ink);
    opacity: .55;
  }
  .bottles__arw--prev { left: 0; }
  .bottles__arw--next { right: 0; }
  .bottles__arw::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 12px; height: 12px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
  }
  .bottles__arw--next::before { translate: -70% -50%; rotate: 45deg; }
  .bottles__arw--prev::before { translate: -30% -50%; rotate: -135deg; }
  .bottles__arw[disabled] { opacity: .2; }
}

.bottle span {
  font-size: var(--body-s);
  font-weight: 600;
  color: var(--ink);
  padding-top: var(--s30);
}

/* ---------- analysis ---------- */
/* The source pairs the copy and the table side by side: a rounded grey card
   on the left, the table with its heading and reference date on the right. */

.analysis {
  display: flex;
  flex-direction: column;
  gap: var(--s80);
}
@media (min-width: 1024px) { .analysis { flex-direction: row; gap: var(--s40); } }

.analysis__card {
  border-radius: 15px;
  background: var(--gray-light);
  color: var(--ink);
  padding: var(--s80) var(--s40);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s10);
  text-align: center;
  font-size: var(--body-s);
  line-height: var(--lead-base);
}
@media (min-width: 1024px) { .analysis__card { border-radius: 30px; width: 50%; } }

.analysis__panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s20);
}
.analysis__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s10);
  text-align: center;
}
.analysis__title {
  font-family: var(--display);
  font-size: var(--title-section-m);
  line-height: var(--lead-base);
}
.analysis__note { font-size: var(--body-s); color: var(--ink); }

.analysis__table { width: 100%; border-collapse: collapse; }
@media (min-width: 1024px) { .analysis__table { max-width: 80%; } }
.analysis__table tr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 5px 0;
  border-bottom: 1px solid var(--ink);
}
.analysis__table td { font-size: var(--body-s); line-height: var(--lead-base); }
.analysis__table td:first-child { font-family: var(--display); font-size: var(--label-s); }
.analysis__table td:last-child { white-space: nowrap; }

/* Bottles ride up over the indigo band and its arc. */
.section--overlap { position: relative; z-index: 1; margin-top: -190px; padding-top: 0; }
@media (max-width: 1023px) { .section--overlap { margin-top: -240px; } }

/* ---------- faq ---------- */

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  text-align: left;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 400;
  line-height: 1.4;
  transition: color .25s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .faq__q:hover { color: var(--water); }
}
.faq__sign { position: relative; flex: none; width: 14px; height: 14px; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: currentColor;
  transition: transform .35s var(--ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item.is-open .faq__sign::after { transform: rotate(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { color: var(--ink-soft); max-width: 78ch; padding-bottom: 26px; }
.faq__a p:first-child { padding-top: 2px; }

/* ---------- pillars ---------- */

.pillar { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(24px, 5vw, 72px); padding-block: clamp(38px, 5vw, 64px); border-top: 1px solid var(--line); }
.pillar:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 820px) { .pillar { grid-template-columns: 1fr; gap: 22px; } }
.pillar__num { font-family: var(--display); font-size: clamp(30px, 3vw, 44px); color: var(--water); line-height: 1; margin-bottom: 14px; }
.pillar__blocks { display: grid; gap: 30px; }
.pillar__blocks h4 { font-size: 16px; font-weight: 400; margin-bottom: 8px; }
.pillar__blocks p { color: var(--ink-soft); font-size: 15px; max-width: 70ch; }

/* ---------- places ---------- */

.place { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; padding-block: clamp(36px, 5vw, 66px); border-top: 1px solid var(--line); }
@media (max-width: 880px) { .place { grid-template-columns: 1fr; gap: 28px; } }
.place__meta { border: 1px solid var(--line); border-radius: var(--r-img); padding: 26px; background: var(--paper-2); display: grid; gap: 14px; margin-top: 26px; }
.place__meta dt { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; }
.place__meta dd { margin: 0; font-size: 15px; color: var(--ink-soft); }
.ticks { display: grid; gap: 9px; margin-top: 6px; }
.ticks li { position: relative; padding-left: 22px; color: var(--ink-soft); font-size: 15px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--water); }

/* ---------- quote ---------- */

.quote { max-width: 46ch; }
.quote blockquote { margin: 0; font-family: var(--display); font-size: clamp(23px, 2.6vw, 36px); line-height: 1.28; }
.quote figcaption { margin-top: 20px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.section--ink .quote figcaption { color: rgba(247,245,240,.55); }

/* ---------- carousel ---------- */

.rail { display: flex; gap: clamp(16px, 2.4vw, 30px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 clamp(240px, 30vw, 400px); scroll-snap-align: start; }
.rail__nav { display: flex; gap: 10px; margin-top: 26px; }
.rail__nav button {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: all .25s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .rail__nav button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
}
.section--ink .rail__nav button { border-color: rgba(255,255,255,.25); }
@media (hover: hover) and (pointer: fine) {
  .section--ink .rail__nav button:hover { background: var(--paper); color: var(--ink); }
}

.story {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-img);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 24px;
}
.story i { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(6,18,26,.7) 100%); }
.story span { position: relative; font-family: var(--display); font-size: 22px; color: #fff; line-height: 1.2; }

/* ---------- contact tiles ---------- */

.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-img); overflow: hidden; }
/* An odd number of channels would leave the container colour showing as an
   empty cell, so the last one widens to close the row. */
.contact-cell:last-child:nth-child(3n+2) { grid-column: span 2; }
@media (max-width: 980px) {
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-cell:last-child:nth-child(3n+2) { grid-column: auto; }
  .contact-cell:last-child:nth-child(2n+1) { grid-column: span 2; }
}
@media (max-width: 620px) {
  .contact-grid { grid-template-columns: 1fr; }
  /* Single column now, so nothing needs to span two to close the row --
     left unset this also spans the implicit grid an extra track wider
     than the page, squeezing every cell's text into half its width. */
  .contact-cell:last-child:nth-child(2n+1) { grid-column: auto; }
}
.contact-cell { background: var(--paper-2); padding: clamp(26px, 3vw, 42px); display: flex; flex-direction: column; gap: 12px; min-height: 240px; }
.contact-cell p { color: var(--ink-soft); font-size: 15px; }
.contact-cell .link { margin-top: auto; align-self: start; }

/* ---------- forms ---------- */

.form { display: grid; gap: 18px; max-width: 560px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
.field input, .field textarea, .field select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  transition: border-color .25s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink); }
.field textarea { min-height: 130px; resize: vertical; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink-soft); }
.check input { margin-top: 4px; accent-color: var(--water); }
.form__note { font-size: 13px; color: var(--water); min-height: 1.4em; }

/* ---------- footer ---------- */

.ftr { background: var(--ink); color: var(--gray-light); padding-block: var(--s50); }
.ftr a { color: var(--gray-light); transition: color .2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .ftr a:hover { color: var(--paper); }
}
/* Brand block and the four nav lists sit in one row -- the source has no
   visible column headings (its nav labels are aria-label only) and no
   separate bottom bar; the copyright/address line lives under the logo
   instead. Track 3 is left empty on purpose: the source gives the nav row
   only 5 of its 12 columns (the rest going to a newsletter form this site
   doesn't have), and matching that width keeps the nav's own internal
   proportions -- and the social row's position within it -- true to source
   instead of stretching to fill space source never gave this row either. */
.ftr__top { display: grid; grid-template-columns: 3fr 5fr 4fr; gap: clamp(28px, 4vw, 60px); align-items: stretch; }
@media (max-width: 1000px) { .ftr__top { grid-template-columns: 1fr; } }
.ftr__brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: center;
}
.ftr__brand .logo-full { width: 106px; height: auto; }
.ftr__copy { color: var(--gray-light); font-size: var(--body-xs); line-height: 1.6; }
.ftr__nav { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-width: 0; }
.ftr__cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px clamp(24px, 4vw, 60px); }
.ftr ul { display: grid; gap: 10px; font-size: 14px; }
.ftr__social { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 20px; font-size: var(--body-xs); }
.ftr__social a { display: inline-flex; align-items: center; gap: 8px; }
.ftr__social img { width: 14px; height: 14px; }
@media (max-width: 1000px) { .ftr__social { justify-content: flex-start; } }
.offices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s40);
}
.offices__item h3 {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
}
.offices__item p { color: var(--ink-soft); font-size: var(--body-xs); line-height: 1.7; }
.offices__item a { color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .offices__item a:hover { color: var(--water); }
}
@media (max-width: 980px) { .offices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .offices { grid-template-columns: 1fr; } }

/* ---------- reveal ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--t-xlong) var(--ease-decel),
              transform var(--t-xlong) var(--ease-decel);
}
.js .reveal.is-in { opacity: 1; transform: none; }
/* Product pages: the source animates the hero and the image-text block and
   nothing else, so every other revealed block is shown outright. */
.js main.anim-hero-only .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
.js main.anim-hero-only .split.reveal,
.js main.anim-hero-only .feature.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--t-xlong) var(--ease-decel),
              transform var(--t-xlong) var(--ease-decel);
}
.js main.anim-hero-only .split.reveal.is-in,
.js main.anim-hero-only .feature.reveal.is-in { opacity: 1; transform: none; }

/* Siblings revealed together come in one after another. */
.js .cards > .reveal:nth-child(2),
.js .products__row { transition-delay: .08s; }
.js .cards > .reveal:nth-child(3) { transition-delay: .16s; }
.js .cards > .reveal:nth-child(4) { transition-delay: .24s; }

.products__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s20);
  text-align: center;
  color: var(--ink);
}
.products__head h2 {
  font-family: var(--display);
  font-size: var(--body-l);
  line-height: var(--lead-tight);
}
.products__lead {
  font-size: var(--body-s);
  line-height: var(--lead-base);
  max-width: 600px;
}
@media (min-width: 1024px) { .products__lead { max-width: 50%; } }

/* Two stacked layers: the texture masked into the FIUGGI letterforms, with
   the bottles sitting along its bottom edge. */
.products__stage {
  position: relative;
  width: 100%;
  margin-top: var(--s30);
  margin-bottom: var(--s80);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media (min-width: 1024px) { .products__stage { margin-top: var(--s20); } }

.products__logo { width: 100%; }
.products__logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  mask-image: url("../img/products-logo.svg");
  mask-size: 100% auto;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("../img/products-logo.svg");
  -webkit-mask-size: 100% auto;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.products__row {
  position: absolute;
  bottom: 0; left: 0;
  z-index: 10;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--s20);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 1024px) { .products__row { gap: var(--s80); padding-inline: 8.3333%; } }

.products__row > li { flex: 0 0 auto; width: calc((100% - var(--s20) * 2) / 3); }
@media (min-width: 1024px) { .products__row > li { width: 25%; } }

.products__row a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  color: var(--ink);
}
.products__row > li { display: flex; justify-content: center; }
/* A fixed-aspect frame per line: bottles keep their own heights inside it,
   so the names below all sit on one baseline with even space above them. */
.products__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: 182 / 600;
}
@media (min-width: 1024px) { .products__figure { width: 70%; } }

.products__row img {
  display: block;
  width: 80%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: bottom center;
  transition: transform .45s cubic-bezier(0, 0, 0, 1);
}

.products__name {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--title-section-m);
  line-height: var(--lead-base);
  transition: opacity .6s var(--ease);
}
@media (min-width: 1024px) {
  .products__row a:hover img { transform: scale(1.05); }
  .products__row a:hover .products__name { opacity: .5; }
}

@media (max-width: 1023px) {
  .products__stage { overflow: visible; }
  .products__logo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
  }
  .products__row { position: static; transform: none; }
  .products__name {
    font-size: var(--body-s);
    text-align: center;
    overflow-wrap: break-word;
  }
}


/* ---------- centred home blocks (source layout) ---------- */

.feature .wrap { display: flex; flex-direction: column; gap: var(--s80); }
@media (min-width: 1024px) { .feature .wrap { padding-inline: 8.333%; } }

.feature__title {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: var(--title-section-l);
  line-height: var(--lead-tight);
  text-align: center;
  color: var(--ink);
}
.feature--display .feature__title { font-style: normal; font-size: var(--body-l); }

.feature__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 15px;
  display: block;
}
@media (min-width: 1024px) { .feature__media { border-radius: 30px; } }

.feature__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s40);
}
@media (min-width: 1024px) { .feature__foot { gap: var(--s20); } }

.feature__body {
  text-align: center;
  font-size: var(--body-s);
  line-height: var(--lead-base);
  max-width: 600px;
  margin-inline: auto;
}
@media (min-width: 1024px) { .feature__body { max-width: none; margin-inline: 16.666%; } }

/* Underlined link: the rule is drawn by default and retracts on hover. */
.link-u {
  position: relative;
  display: inline-block;
  font-size: var(--body-xs);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: inherit;
}
.link-u__line {
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: width .3s cubic-bezier(.2, 0, 0, 1);
}
@media (hover: hover) and (pointer: fine) {
  .link-u:hover .link-u__line { width: 0; }
}

.badge-block .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s60);
}
.badge-block img { width: 112px; height: auto; object-fit: contain; }
@media (min-width: 1024px) { .badge-block img { width: 132px; } }
.badge-block p {
  max-width: 600px;
  text-align: center;
  font-size: var(--body-s);
  line-height: var(--lead-base);
}

.cover {
  position: relative;
  padding: var(--s160) var(--sides);
  isolation: isolate;
}
.cover__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
}
.cover__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s20);
  color: var(--paper);
  text-align: center;
}
.cover__title {
  font-family: var(--display);
  font-size: var(--body-l);
  line-height: var(--lead-tight);
  padding-bottom: var(--s10);
}
.cover__text { max-width: 600px; font-size: var(--body-s); line-height: var(--lead-base); }

/* ---------- landing intro ---------- */

.intro {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 90;
  background: var(--ink);
  display: grid;
  place-items: center;
  place-content: center;
}
.intro[hidden] { display: none; }

/* The three beats sit on top of one another and take the stage in turn. */
.intro__stage { position: relative; display: grid; place-items: center; }
.intro__beat {
  grid-area: 1 / 1;
  display: block;
  color: #fff;
  opacity: 0;
}
.intro__beat svg, .intro__beat img { display: block; width: 100%; height: auto; }
.intro__beat--a, .intro__beat--c { width: 132px; }
.intro__beat--b { width: 190px; }

/* The first two beats rise into the middle, hold, and carry on up and out. */
@keyframes intro-beat {
  0%   { opacity: 0; transform: translateY(46px); }
  24%  { opacity: 1; transform: translateY(0); }
  64%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-46px); }
}
.js .intro.is-playing .intro__beat { animation: intro-beat .9s var(--ease) both; }
.js .intro.is-playing .intro__beat--a { animation-delay: .1s; }
.js .intro.is-playing .intro__beat--b { animation-delay: .8s; }

/* The wordmark rises the same way, but holds rather than falling away — it
   is still on screen when the leaving phase begins, so it can shrink into
   the header logo instead of fading out on its own. */
@keyframes intro-beat-hold {
  0%   { opacity: 0; transform: translateY(46px) scale(1); }
  24%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.js .intro.is-playing .intro__beat--c { animation: intro-beat-hold .9s var(--ease) both; animation-delay: 1.5s; }

/* Leaving: the indigo panel closes from full screen to the 48px header bar,
   and only its background fades to transparent -- not its content -- so the
   wordmark stays crisp throughout. At the same time the wordmark itself
   scales from its held size (132px) down to the header logo's own size
   (62px). Both animations share this duration and easing, so the shrinking
   panel and the shrinking wordmark move in lockstep: since the wordmark
   sits centred inside the panel on both axes, and the panel's centre point
   travels from mid-viewport to the middle of the 48px bar as it collapses,
   the wordmark lands exactly on the real header logo's position the moment
   both finish, and the fading background simply uncovers it there. */
@keyframes intro-collapse {
  0%   { height: 100vh; background-color: var(--ink); }
  70%  { height: 48px;  background-color: var(--ink); }
  100% { height: 48px;  background-color: transparent; }
}
.js .intro.is-leaving { animation: intro-collapse 1s var(--ease) forwards; }

@keyframes intro-dock {
  to { transform: translateY(0) scale(calc(62 / 132)); }
}
.js .intro.is-leaving .intro__beat--c { animation: intro-dock 1s var(--ease) forwards; }

body.is-intro { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  @keyframes intro-beat {
    0%   { opacity: 0; transform: none; }
    24%  { opacity: 1; transform: none; }
    64%  { opacity: 1; transform: none; }
    100% { opacity: 0; transform: none; }
  }
  @keyframes intro-beat-hold {
    0%   { opacity: 0; transform: none; }
    24%  { opacity: 1; transform: none; }
    100% { opacity: 1; transform: none; }
  }
  @keyframes intro-collapse {
    0%   { height: 100vh; opacity: 1; }
    70%  { height: 100vh; opacity: 1; }
    100% { height: 100vh; opacity: 0; }
  }
  @keyframes intro-dock {
    to { transform: none; }
  }
}

/* ---------- utilities (restored) ---------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  font-size: var(--body-xs);
}
.skip:focus { left: 12px; top: 12px; }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- product page intro ---------- */

.pintro {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--s80);
}
.pintro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s20);
  text-align: center;
}
.pintro__title {
  font-family: var(--display);
  font-size: var(--title-section-m);
  line-height: var(--lead-base);
}
.pintro__lead {
  max-width: 600px;
  font-size: var(--body-s);
  line-height: var(--lead-base);
}
@media (min-width: 1024px) { .pintro__lead { max-width: 696px; } }

/* The indigo carries on below the copy and closes with a centred arc. */
.pintro__tail { position: relative; background: var(--paper); }
.pintro__tail::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 100%;
  height: 160px;
  background: var(--ink);
}
.pintro__arc {
  position: absolute;
  top: 158px; left: 0;
  display: block;
  width: 100%;
  height: var(--arc-h);
  background: var(--ink);
  clip-path: url(#pintro-arc);
}
.pintro__tail { --arc-h: calc(100vw / 8.2316); height: calc(158px + var(--arc-h)); }
@media (min-width: 1024px) {
  .pintro__tail { height: calc(87px + var(--arc-h)); }
  .pintro__tail::before { height: 90px; }
  .pintro__arc { top: 87px; }
}