/* =========================================================
   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;
  --icon-gray:  #BEBEBE;

  /* 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;
  /* The source sets its whole body type in FaktSemiCondensed, a licensed
     face this site can't ship. Everywhere that condensed, tighter-tracked
     look is actually visible against our own Inter -- the Instagram/
     Facebook/LinkedIn labels reused in the footer and the drawer menu --
     Inter Tight (same foundry, SIL OFL, self-hosted like the rest) stands
     in for it. Latin-only: these labels never carry CJK text. */
  --sans-tight: "Inter Tight", "Inter", 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(--icon-gray);
  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);
  font-family: var(--sans-tight);
  letter-spacing: -.01em;
  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: 100vh;
  min-height: 100svh;
  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. The source reserves 3 of its 12 columns for the brand block and
   gives the rest (9) to a newsletter-and-nav row; this site has no
   newsletter form, so the nav gets that full remaining width instead of
   leaving it as dead space -- its own justify-content:space-between then
   spreads the four link columns out to fill it. */
/* Uncapping wrap--full here (tried in an earlier pass, reasoning it should
   match the source's own edge-to-edge footer) backfires past ~1600px: the
   3fr brand column is much wider than the logo itself, so centering it
   leaves visible breathing room on the left, while the 9fr nav's own
   justify-content:space-between fills its column right to the padding
   edge -- past the width the rest of the page caps out at, that gap grows
   lopsided instead of just proportionally wider. Keeping .wrap's own
   max-width here matches the hero/header's own cap so the footer's left
   and right padding read the same as everywhere else on the page. */
.ftr__top { display: grid; grid-template-columns: 3fr 9fr; gap: var(--s10); 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); }
/* Both need their own line-height: unset, they'd inherit body's fixed
   24px (120% of the page's much larger base size) instead of one scaled
   to their own small font, leaving the whole footer visibly taller. */
.ftr ul { display: grid; gap: 10px; font-size: var(--body-xs); line-height: var(--lead-base); }
.ftr .ftr__social { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 20px; font-size: var(--body-xs); line-height: var(--lead-base); font-family: var(--sans-tight); letter-spacing: -.01em; }
.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; } }

.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; }
}