/* Urban Sky - v1 */
:root {
  --ink: #0a0806;
  --ink-2: #13100c;
  --ink-3: #1c1712;
  --gold: #c9a45c;
  --gold-2: #e9d29b;
  --gold-3: #8a6a32;
  --green: #0f3b2a;
  --green-2: #16503a;
  --cream: #f4ecdc;
  --muted: #a99b86;
  --line: rgba(233, 210, 155, 0.18);
  --amber: #c8741c;
  --serif: "Cormorant Garamond", "Times New Roman", serif;   /* the one typeface, used everywhere */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; touch-action: manipulation; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19.5px;
  line-height: 1.65;
  font-variant-numeric: lining-nums;   /* full-height figures, so phone numbers and years read cleanly */
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
b, strong { font-weight: 600; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: var(--ink); }

/* keyboard focus: visible on every interactive element */
:focus { outline: none; }
:focus-visible { outline: 1px solid var(--gold-2); outline-offset: 5px; border-radius: 1px; }
.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 300;
  padding: 12px 20px; background: var(--gold); color: var(--ink);
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  transition: top 0.3s var(--ease);
}
.skip-link:focus { top: 16px; }

/* slim gold scrollbar */
html { scrollbar-color: var(--gold-3) var(--ink); scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold-3), var(--gold)); border-radius: 8px; }

/* film grain over everything: a layer only slightly bigger than the screen, moved on the GPU */
body::after {
  content: "";
  position: fixed; inset: -6%;
  pointer-events: none; z-index: 90;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
  will-change: transform;
}
@keyframes grain {
  0% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(-3%, 2%, 0); }
  40% { transform: translate3d(2%, -3%, 0); } 60% { transform: translate3d(-2%, -1%, 0); }
  80% { transform: translate3d(3%, 3%, 0); } 100% { transform: translate3d(0, 0, 0); }
}
/* AVIF <picture> wrappers must not change layout around the images */
picture { display: contents; }
[data-parallax] { will-change: transform; }

.wrap { width: min(var(--max), 100% - var(--gutter) * 2); margin-inline: auto; }

.eyebrow {
  font-family: var(--serif);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: 14px;
}
.eyebrow::before { content: ""; width: 38px; height: 1px; background: currentColor; opacity: 0.7; }

.h-display {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.05;
  margin: 0;
}
.h-serif {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5.4vw, 76px);
  line-height: 1.05;
  margin: 0;
}
.h-serif em { font-style: italic; color: var(--gold-2); }
.lead { font-family: var(--serif); font-size: clamp(21px, 2.1vw, 27px); line-height: 1.5; color: #e9e0cf; font-weight: 400; }
.gold-text {
  background: linear-gradient(100deg, #8a6a32 0%, #e9d29b 30%, #fff4d6 45%, #c9a45c 60%, #8a6a32 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* background-position repaints text every frame, so the sheen sweeps twice and then rests */
  animation: sheen 3.6s var(--ease) 0.8s 2 both;
}
@keyframes sheen { 0% { background-position: 100% 0; } 60%, 100% { background-position: -20% 0; } }

/* buttons */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 52px; padding: 0 30px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold-2);
  font-family: var(--serif); font-size: 13.5px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
  cursor: pointer;
  transition: color 0.5s var(--ease), box-shadow 0.6s var(--ease), border-color 0.5s;
  isolation: isolate;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, var(--gold-3), var(--gold-2), var(--gold));
  transform: translateY(101%); transition: transform 0.6s var(--ease);
}
.btn:hover { color: var(--ink); box-shadow: 0 18px 40px -16px rgba(201, 164, 92, 0.55); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(1px); }
.btn--solid { background: linear-gradient(120deg, #b8924d, var(--gold-2) 55%, var(--gold)); border-color: transparent; color: var(--ink); }
.btn--solid::before { background: var(--cream); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 13.5px; letter-spacing: 0.24em; }

/* ===== age gate: ember-lit background, the Urban Sky crest centred, the question below it ===== */
.gate {
  --gl: clamp(170px, 30vh, 260px);         /* logo height */
  position: fixed; inset: 0; z-index: 200; overflow: hidden;
  display: grid; place-items: center; padding: 24px;
  background: radial-gradient(ellipse 90% 80% at 50% 70%, #2a0d05 0%, #0d0503 55%, #040302 100%);
  text-align: center;
}
.gate[hidden], .age-ok .gate { display: none; }
.gate__scene { position: absolute; inset: 0; }
/* a slow, gentle breath of heat behind the crest, kept subtle on purpose */
.gate__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 34% 40% at 50% 40%, rgba(255, 118, 36, 0.2), transparent 70%),
    radial-gradient(ellipse 90% 45% at 50% 100%, rgba(214, 66, 18, 0.24), transparent 72%);
  animation: gate-breathe 7s ease-in-out infinite;
}
@keyframes gate-breathe { 0%, 100% { opacity: 0.86; } 50% { opacity: 1; } }
/* soft, out-of-focus flames across the whole screen; screen blending drops the black */
.gate__fire {
  position: absolute; left: -16%; width: 132%; top: -4vh; height: 110vh;
  object-fit: cover; object-position: 40% 100%;
  mix-blend-mode: screen; opacity: 0; transition: opacity 2.4s var(--ease);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 52%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, #000 52%, transparent 100%);
}
.gate.fire-on .gate__fire { opacity: 0.9; }
/* vignette, a little darker at the top */
.gate__scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(2, 1, 1, 0.5) 0%, transparent 24%),
    radial-gradient(ellipse at 50% 55%, transparent 48%, rgba(0, 0, 0, 0.66) 100%);
}
.gate__embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* centred column: the crest, then the question floating on a soft pool of shade (no frame, no base) */
.gate__content { position: relative; z-index: 2; width: min(480px, 100%); display: flex; flex-direction: column; align-items: center; }
.gate__logo { position: relative; height: var(--gl); aspect-ratio: 536 / 600; flex: none; }
.gate__logo::before {                 /* warm halo so the crest sits in the firelight */
  content: ""; position: absolute; left: 50%; top: 42%; width: 230%; height: 120%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255, 138, 48, 0.26), transparent 64%);
  pointer-events: none;
}
.gate__logo picture {
  display: block; position: relative; width: 100%; height: 100%;
  filter: drop-shadow(0 0 22px rgba(255, 124, 44, 0.2)) drop-shadow(0 8px 26px rgba(0, 0, 0, 0.55));
}
.gate__logo img { display: block; width: 100%; height: 100%; }
.gate__card { position: relative; width: 100%; margin-top: clamp(30px, 4.8vh, 46px); }
.gate__card::before {                 /* shade behind the words, edgeless, so they hold over bright flame */
  content: ""; position: absolute; z-index: -1; left: -40%; right: -40%; top: -34%; bottom: -38%;
  background: radial-gradient(closest-side, rgba(5, 3, 2, 0.8) 0%, rgba(5, 3, 2, 0.55) 45%, rgba(5, 3, 2, 0.2) 75%, transparent 100%);
  pointer-events: none;
}
.gate h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.7vw, 38px); line-height: 1.15;
  margin: 0 0 8px; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}
.gate__card > p:not(.note) {
  font-size: clamp(19px, 1.25vw, 21px); line-height: 1.5; margin: 0 0 30px;
  color: rgba(244, 236, 220, 0.9); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.75); text-wrap: balance;
}
.gate .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.gate .btn--plain { background: rgba(8, 5, 3, 0.4); min-width: 104px; }
.gate .note {
  margin: 20px 0 0; font-size: 16px; letter-spacing: 0.06em; line-height: 1.55;
  color: rgba(244, 236, 220, 0.62); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}
@media (max-width: 860px) {
  .gate { --gl: clamp(150px, 26vh, 210px); padding: 16px; }
  .gate__card { margin-top: 30px; }
  .gate h2 { font-size: 26px; margin-bottom: 6px; }
  .gate__card > p:not(.note) { font-size: 18px; margin-bottom: 24px; }
  .gate .row { flex-wrap: nowrap; gap: 10px; }
  .gate .row .btn { padding: 0 18px; letter-spacing: 0.2em; }
  .gate .btn--plain { min-width: 88px; }
  .gate .note { margin-top: 16px; font-size: 15px; }
}
/* short landscape screens: a smaller crest so the whole check fits without scrolling */
@media (max-height: 640px) {
  .gate { --gl: clamp(110px, 26vh, 160px); }
  .gate__card { margin-top: 18px; }
  .gate__card > p:not(.note) { margin-bottom: 16px; }
  .gate .note { margin-top: 10px; }
}

/* ===== loader ===== */
.loader {
  position: fixed; inset: 0; z-index: 150;
  background: var(--ink);
  display: grid; place-items: center;
}
.loader__crest { width: 90px; opacity: 0; }
.loader__bar { position: absolute; bottom: 12vh; left: 50%; width: 160px; height: 1px; margin-left: -80px; background: var(--line); overflow: hidden; }
.loader__bar i { position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(0); }

/* ===== header ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: padding 0.6s var(--ease), border-color 0.6s;
  padding: 22px 0;
  border-bottom: 1px solid transparent;
}
/* the frosted bar lives on a pseudo-element: backdrop-filter on .nav itself would
   trap the fixed mobile menu inside the bar */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(10, 8, 6, 0.72);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  opacity: 0; transition: opacity 0.6s var(--ease);
}
.nav.is-scrolled::before { opacity: 1; }
.nav.is-scrolled {
  padding: 12px 0;
  border-image: linear-gradient(90deg, transparent, rgba(233, 210, 155, 0.35), transparent) 1;
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; }
.nav__brand { display: flex; align-items: center; gap: 14px; min-width: 48px; min-height: 48px; }
.nav__brand img { width: 46px; transition: width 0.6s var(--ease); }
.nav.is-scrolled .nav__brand img { width: 38px; }
.nav__brand span { font-family: var(--serif); font-weight: 600; letter-spacing: 0.2em; font-size: 17px; color: var(--gold-2); }
.nav__links { display: flex; align-items: center; gap: 38px; list-style: none; margin: 0; padding: 0; }
.nav__links a:not(.btn) {
  position: relative; font-size: 14px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: #e2d8c4;
  transition: color 0.4s;
}
.nav__links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease);
}
.nav__links a:not(.btn):hover, .nav__links a[aria-current="page"] { color: var(--gold-2); }
.nav__links a:not(.btn):hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { margin-left: 6px; }
.nav__toggle { display: none; width: 48px; height: 48px; margin-right: -11px; background: none; border: 0; padding: 0 11px; cursor: pointer; }
.nav__toggle span { display: block; width: 26px; height: 1px; background: var(--gold-2); margin: 7px 0; transition: transform 0.4s var(--ease); }

@media (max-width: 860px) {
  .nav__toggle { display: block; z-index: 2; }
  .nav__links {
    position: fixed; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 34px;
    background: rgba(10, 8, 6, 0.97);
    opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease);
  }
  .nav__links a:not(.btn) { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; font-size: 18px; }
  .nav__links a:not(.btn)::after { left: 16px; right: 16px; bottom: 6px; }
  .nav__links { gap: 14px; }
  .nav__cta { margin: 12px 0 0; }
  .nav.is-open .nav__links { opacity: 1; pointer-events: auto; }
  .nav.is-open .nav__toggle span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav.is-open .nav__toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .nav__brand span { display: none; }
}

/* ===== hero / pour scene ===== */
.hero { position: relative; }
.hero__stage {
  position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
}
.hero__dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__copy { position: relative; z-index: 3; padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2)); padding-right: 24px; }
.hero__welcome { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.4vw, 34px); color: var(--gold-2); margin: 0 0 6px; }
.hero__title { font-size: clamp(44px, 6.2vw, 108px); white-space: nowrap; }
.hero__title .char { display: inline-block; will-change: transform, opacity; }
.hero__sub { margin: 18px 0 0; font-family: var(--serif); font-weight: 500; letter-spacing: 0.55em; font-size: clamp(13px, 1.2vw, 17px); color: #d8ccb6; text-transform: uppercase; }
.hero__rule { width: 120px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); margin: 34px 0 26px; transform-origin: left; }
.hero__tag { font-family: var(--serif); font-size: clamp(21px, 2vw, 28px); line-height: 1.4; margin: 0 0 38px; color: #efe5d2; max-width: 30ch; }
/* pour film: portrait video on the right, edges masked so the black footage melts into the page */
.hero__scene { position: absolute; inset: 0; z-index: 1; display: block; height: auto; }
.hero__filmbox {
  position: absolute; height: 104%; aspect-ratio: 9 / 16; left: 70%; top: -12%; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 84%, transparent 100%);
  mask-composite: intersect;
}
.hero__film { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
/* cinematic finish over the film: vignette and a warm low glow */
.hero__scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 45% 40% at 70% 78%, rgba(214, 140, 50, 0.14), transparent 70%),
    radial-gradient(ellipse at 62% 50%, transparent 45%, rgba(6, 5, 4, 0.7) 100%);
}
.hero__crest {
  position: absolute; z-index: 2; width: clamp(64px, 6vw, 92px); height: auto;
  left: 70%; top: 9%; transform: translateX(-50%);
  opacity: 0; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6));
  transition: opacity 1.6s var(--ease);
}
.hero.is-full .hero__crest { opacity: 1; }
.hero__dust { z-index: 2; }
.hero__stage::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 8, 6, 0.85) 0%, rgba(10, 8, 6, 0.4) 32%, transparent 52%),
              linear-gradient(to top, var(--ink) 0%, transparent 16%);
}
@media (max-width: 860px) {
  .hero__stage::after { background: linear-gradient(to bottom, rgba(10, 8, 6, 0.9) 0%, rgba(10, 8, 6, 0.45) 36%, transparent 52%), linear-gradient(to top, var(--ink) 0%, transparent 14%); }
  .hero__crest { left: 50%; top: 47%; }
  .hero__filmbox { height: auto; width: 115%; left: 50%; top: auto; bottom: -4%; }
}
.hero__scroll {
  position: absolute; z-index: 4; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.36em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.hero__scroll i { width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent); animation: drip 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

@media (max-width: 860px) {
  .hero__stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; padding-top: 104px; }
  .hero__copy { padding: 0 var(--gutter); text-align: center; }
  .hero__rule { margin: 22px auto 18px; }
  .hero__tag { margin: 0 auto 0; font-size: 19px; }
  .hero__cta { display: none; }
}

/* ===== marquee ===== */
.marquee { border-block: 1px solid var(--line); padding: 26px 0; overflow: hidden; background: var(--ink-2); }
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; will-change: transform; }
.marquee span { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 3vw, 40px); color: #d8ccb6; padding-right: 56px; white-space: nowrap; display: inline-flex; align-items: center; gap: 56px; }
.marquee span::after { content: "✦"; font-style: normal; font-size: 0.5em; color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ===== sections ===== */
.section { position: relative; padding: clamp(96px, 14vw, 180px) 0; }
.reveal { opacity: 0; transform: translateY(40px); }
.no-motion .reveal { opacity: 1; transform: none; }

.story { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.story__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.story__media img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; }
/* product shots fill the frame exactly and stay still, so the bottle is never clipped */
.story__media--still img { inset: 0; height: 100%; }
.story__media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--line); }
.story__frame { position: absolute; inset: 22px -22px -22px 22px; border: 1px solid var(--gold-3); z-index: -1; }
.story__copy p { color: #ddd3c0; }
.story__copy strong { color: var(--gold-2); font-weight: 500; }
.story__copy h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3vw, 42px); margin: 54px 0 14px; }
.story__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 52px; counter-reset: stat; }
.story__stats > div { position: relative; padding: 30px 22px 6px 0; border-top: 1px solid transparent; border-image: linear-gradient(90deg, var(--gold), rgba(201, 164, 92, 0.1)) 1; counter-increment: stat; }
.story__stats > div::before { content: "0" counter(stat); display: block; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--gold); margin-bottom: 10px; }
.story__stats b { display: block; font-family: var(--serif); font-weight: 600; font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-2); }
.story__stats span { font-size: 16.5px; color: #c9bea9; line-height: 1.55; display: block; margin-top: 8px; }
@media (max-width: 860px) {
  .story { grid-template-columns: 1fr; }
  .story__frame { inset: 14px -10px -14px 10px; }
  .story__stats { grid-template-columns: 1fr; }
}

/* parallax band */
.band { position: relative; height: 110vh; min-height: 560px; overflow: hidden; display: grid; place-items: center; text-align: center; }
.band__img { position: absolute; inset: -15% 0; background-size: cover; background-position: center; }
.band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(10, 8, 6, 0.35), rgba(10, 8, 6, 0.85)); }
.band__inner { position: relative; z-index: 2; padding: 0 var(--gutter); }
.band__crest { width: clamp(130px, 14vw, 200px); margin: 0 auto 34px; opacity: 0.9; filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.6)); }
.band__quote { font-family: var(--serif); font-style: italic; font-size: clamp(30px, 4.4vw, 62px); line-height: 1.15; max-width: 18ch; margin: 0 auto; }

/* vision / mission */
.vm { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.vm__card {
  position: relative; overflow: hidden; min-height: 620px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(28px, 4vw, 54px);
  border: 1px solid var(--line);
  transform-style: preserve-3d;
  transition: border-color 0.6s;
}
.vm__card:hover { border-color: rgba(233, 210, 155, 0.45); }
.vm__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.6s var(--ease); }
.vm__card:hover img { transform: scale(1.0); }
.vm__card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(10, 8, 6, 0.97) 24%, rgba(10, 8, 6, 0.6) 58%, rgba(10, 8, 6, 0.1)); }
/* inset gold hairline frame that brightens on hover */
.vm__card::after { content: ""; position: absolute; inset: 14px; z-index: 2; border: 1px solid rgba(233, 210, 155, 0.16); pointer-events: none; transition: border-color 0.6s, inset 0.8s var(--ease); }
.vm__card:hover::after { border-color: rgba(233, 210, 155, 0.5); inset: 10px; }
.vm__card > *:not(img) { position: relative; z-index: 3; }
.vm__num {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 22px;
  border: 1px solid rgba(233, 210, 155, 0.5); border-radius: 50%;
  font-family: var(--serif); font-weight: 600; font-size: 16px; letter-spacing: 0.1em; color: var(--gold-2);
  background: rgba(10, 8, 6, 0.4); backdrop-filter: blur(4px);
}
.vm__card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 3.6vw, 54px); margin: 0 0 16px; }
.vm__card p { margin: 0; color: #e4dbc9; font-size: 18.5px; max-width: 46ch; }
@media (max-width: 860px) { .vm { grid-template-columns: 1fr; } .vm__card { min-height: 520px; } }

/* brands */
.brands { background: radial-gradient(ellipse at 50% 0%, #1a1309 0%, var(--ink) 60%); overflow: hidden; }
.brands__head { text-align: center; max-width: 760px; margin: 0 auto; }
.brands__logo { width: clamp(220px, 26vw, 340px); margin: 34px auto 0; }
.brands__range { position: relative; margin: clamp(40px, 6vw, 80px) auto 0; max-width: 1000px; }
.brands__range img { position: relative; z-index: 2; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.6)); }
.brands__range::before {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 6%; height: 40%; z-index: 1;
  background: radial-gradient(ellipse at center, rgba(201, 164, 92, 0.35), transparent 70%);
  filter: blur(30px);
}
.brands__floor { height: 1px; background: linear-gradient(90deg, transparent, var(--gold-3), transparent); margin-top: -4px; }

.bottles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: clamp(70px, 9vw, 120px); }
.bottle {
  position: relative; padding: 40px 16px 28px; text-align: center;
  /* gradient hairline border via padding-box / border-box backgrounds */
  background:
    radial-gradient(ellipse 70% 22% at 50% 66%, rgba(201, 164, 92, 0.16), transparent 70%) padding-box,
    linear-gradient(180deg, #16120d, #0d0a07) padding-box,
    linear-gradient(160deg, rgba(233, 210, 155, 0.45), rgba(233, 210, 155, 0.06) 40%, rgba(233, 210, 155, 0.28)) border-box;
  border: 1px solid transparent;
  overflow: hidden;
  transition: transform 0.8s var(--ease), box-shadow 0.8s var(--ease);
}
.bottle::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(233, 210, 155, 0.16), transparent 55%);
  opacity: 0; transition: opacity 0.5s;
}
.bottle:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -30px rgba(201, 164, 92, 0.45); }
.bottle:hover::before { opacity: 1; }
/* bottles stand on a glossy floor: soft reflection beneath (Chromium/Safari) */
.bottle img {
  height: 250px; width: auto; margin: 0 auto; object-fit: contain;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.55));
  -webkit-box-reflect: below 2px linear-gradient(transparent 72%, rgba(255, 255, 255, 0.14));
  transition: transform 0.9s var(--ease);
}
.bottle:hover img { transform: translateY(-6px) scale(1.04) rotate(-2deg); }
.bottle h4 { font-family: var(--serif); font-weight: 500; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.2; margin: 70px 0 6px; }
.bottle span { font-size: 12.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 1060px) { .bottles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .bottles { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .bottle { padding: 30px 10px 22px; }
  .bottle img { height: 180px; }
  .bottle h4 { margin-top: 52px; font-size: 19px; }
  .bottle span { font-size: 13.5px; letter-spacing: 0.1em; }
}

.whisky {
  position: relative; margin-top: clamp(70px, 9vw, 120px);
  display: grid; grid-template-columns: 220px 1fr; align-items: stretch;
  border: 1px solid var(--line);
}
.whisky__flag { background: var(--ink-3); display: grid; place-items: center; padding: 20px; border-right: 1px solid var(--line); }
.whisky__flag img { width: 170px; }
.whisky__img { overflow: hidden; }
.whisky__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .whisky { grid-template-columns: 1fr; } .whisky__flag { border-right: 0; border-bottom: 1px solid var(--line); } }

/* contact */
.contact { position: relative; overflow: hidden; }
.contact__bg {
  position: absolute; inset: -10% 0;
  background: url("../img/bar.jpg") center/cover;
  background-image: image-set(url("../img/bar.avif") type("image/avif"), url("../img/bar.jpg") type("image/jpeg"));
  filter: brightness(0.28);
}
.contact::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, var(--ink), transparent 25%, transparent 75%, var(--ink)); }
.contact .wrap { position: relative; z-index: 2; }
.contact__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.contact__lines { list-style: none; padding: 0; margin: 40px 0 0; border-top: 1px solid var(--line); }
.contact__lines li { display: grid; grid-template-columns: 110px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.contact__lines b { font-size: 13.5px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); padding-top: 4px; }
.contact__lines a, .contact__lines p { margin: 0; font-family: var(--serif); font-size: 23px; line-height: 1.4; color: var(--cream); }
.contact__lines a { display: inline-block; padding: 6px 0; margin: -6px 0; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--ease), color 0.4s; }
.contact__lines a:hover { color: var(--gold-2); background-size: 100% 1px; }
.form {
  background: rgba(19, 16, 12, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); padding: clamp(26px, 3.4vw, 44px);
}
.form h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; margin: 0 0 24px; }
.field { position: relative; margin-bottom: 22px; }
.field input, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(233, 210, 155, 0.3);
  padding: 28px 0 10px; color: var(--cream); font: inherit; font-size: 18px; outline: none; resize: vertical;
  transition: border-color 0.4s;
}
.field textarea { min-height: 110px; }
.field label { position: absolute; left: 0; top: 22px; font-size: 17px; color: #b9ad97; pointer-events: none; transition: transform 0.4s var(--ease), color 0.4s, font-size 0.4s; transform-origin: left; }
.field input:focus, .field textarea:focus { border-color: var(--gold); box-shadow: 0 1px 0 0 var(--gold); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-20px); font-size: 12.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.form .btn { margin-top: 12px; width: 100%; }
.field .req { color: var(--gold); margin-left: 2px; }
.field__error { margin: 6px 0 0; min-height: 1.2em; font-size: 15.5px; color: #f2a58e; }
.field.is-invalid input, .field.is-invalid textarea { border-color: #e2775c; }
.form__note { margin: 14px 0 0; font-size: 15.5px; color: #b9ad97; }
.form__status { margin: 14px 0 0; font-size: 16.5px; color: var(--gold-2); min-height: 1.4em; }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } .contact__lines li { grid-template-columns: 1fr; gap: 4px; } }

/* page hero (inner pages) */
.phero { position: relative; height: 82vh; min-height: 520px; overflow: hidden; display: grid; align-items: end; padding-bottom: clamp(60px, 9vw, 120px); }
.phero__img { position: absolute; inset: -10% 0; background-size: cover; background-position: center; }
.phero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--ink) 4%, rgba(10, 8, 6, 0.55) 45%, rgba(10, 8, 6, 0.35)); }
.phero .wrap { position: relative; z-index: 2; }
.phero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(54px, 9vw, 140px); line-height: 0.95; margin: 18px 0 0; }
.phero h1 em { font-style: italic; color: var(--gold-2); }

/* cta */
.cta { text-align: center; }
.cta h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5vw, 72px); line-height: 1.1; margin: 22px auto 18px; max-width: 18ch; }
.cta p { color: var(--muted); margin: 0 auto 40px; max-width: 52ch; }
.cta__cheers { font-family: var(--serif); font-style: italic; font-size: clamp(28px, 3vw, 40px); color: var(--gold-2); margin-top: 28px; }

/* footer */
.footer { position: relative; padding: 84px 0 34px; background: radial-gradient(ellipse 60% 120% at 50% 0%, #1a140c, var(--ink-2) 60%); }
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.6; }
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.footer__brand { display: flex; gap: 20px; align-items: center; }
.footer__brand img { width: 76px; filter: drop-shadow(0 8px 24px rgba(201, 164, 92, 0.25)); }
.footer__brand p { margin: 0; font-family: var(--serif); font-weight: 600; letter-spacing: 0.18em; color: var(--gold-2); font-size: 17px; line-height: 1.5; }
.footer__tag { margin: 22px 0 0; font-family: var(--serif); font-style: italic; font-size: 19px; color: #cbbfab; max-width: 30ch; }
.footer__title { margin: 0 0 8px; font-family: var(--serif); font-size: 13.5px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: 17.5px; color: #d4c9b5; }
.footer li { min-height: 44px; display: flex; align-items: center; }
.footer a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; transition: color 0.4s; }
.footer a:hover { color: var(--gold-2); }
.footer__base { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 14px; color: #92856f; letter-spacing: 0.06em; }
.to-top { display: inline-flex; align-items: center; min-height: 44px; background: none; border: 0; color: var(--gold-2); font: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; cursor: pointer; padding: 0; }
@media (max-width: 960px) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__top > :first-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer__top { grid-template-columns: 1fr; } }

/* cursor glow (pointer devices only) */
.cursor { position: fixed; top: 0; left: 0; z-index: 80; width: 420px; height: 420px; margin: -210px 0 0 -210px; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(201, 164, 92, 0.07), transparent 60%); will-change: transform; }
@media (hover: none) { .cursor { display: none; } }

@media (prefers-reduced-motion: reduce) {
  body::after, .marquee__track, .gold-text, .hero__scroll i, .gate__glow { animation: none; }
  .reveal { opacity: 1; transform: none; }
}