/* ==========================================================================
   Lilasons Industries Limited — website styles
   --------------------------------------------------------------------------
   The design was supplied as a 1920px-wide artboard. Every size below is
   written in "design pixels" multiplied by --u, so on desktop the page is a
   faithful, proportional copy of the design at any screen width.
   1 design px = 1/1920 of the page width (viewport minus any scrollbar).
   On tablets/phones (<= 900px) --u is fixed and the layouts stack.
   ========================================================================== */

/* ---------- Fonts (all SIL Open Font License, bundled locally) ---------- */
@font-face { font-family: "Bebas Neue"; src: url("../fonts/bebas-neue-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/roboto-condensed-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/roboto-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Antonio"; src: url("../fonts/antonio-latin-100-normal.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; }  /* age gate: free stand-in for Gobold Thin */

/* ---------- Design tokens ---------- */
:root {
  --u: calc((100vw - var(--sbw, 0px)) / 1920); /* --sbw = scrollbar width, set by main.js */

  --red: #d01e25;
  --red-bright: #ec1d27;
  --ink: #232223;          /* body copy */
  --black: #231f20;        /* K-black text & lines */
  --dark: #161413;         /* dark sections, dropdown */
  --charcoal: #232223;     /* contract / distribution blocks */
  --graphite: #2f2e2d;     /* stat numbers */
  --rule: #58595b;         /* thin dividers */
  --white: #ffffff;
  --off-white: #fdfdfe;

  --f-display: "Bebas Neue", "Oswald", Impact, sans-serif;
  --f-body: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --f-ui: "Figtree", "Helvetica Neue", Arial, sans-serif;

  --btn-halo: rgba(120, 122, 128, .22);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  font-size: calc(29.7 * var(--u));
  line-height: 1.2;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
main, .site-footer { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
strong, b { font-weight: 700; }
:focus-visible { outline: calc(3 * var(--u)) solid var(--red-bright); outline-offset: calc(4 * var(--u)); }

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

/* Text helpers */
.display { font-family: var(--f-display); font-weight: 400; line-height: .851; text-transform: uppercase; letter-spacing: 0; }
.display--loose { line-height: .889; }
.c-red { color: var(--red); }
.c-white { color: var(--white); }

/* ==========================================================================
   Buttons — rebuilt from the pill graphics in the design
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(50.6 * var(--u));
  min-width: calc(365 * var(--u));
  padding: 0 calc(30 * var(--u));
  border: calc(1.3 * var(--u)) solid rgba(255, 255, 255, .8);
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: calc(25.6 * var(--u));
  line-height: 1;
  letter-spacing: -.005em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease;
}
.btn:hover { background-color: #e0232b; }
.btn:active { transform: scale(.97); }
.btn--auto { min-width: 0; padding: 0 calc(30.5 * var(--u)); }
.btn--grey { background: #525254; }
.btn--grey:hover { background-color: #606063; }
.btn--on-dark { --btn-halo: rgba(150, 152, 158, .12); }
.btn--on-red { --btn-halo: rgba(60, 40, 50, .16); }

/* ==========================================================================
   Header & navigation
   ========================================================================== */
/* Sticky header. .site-header keeps the space in the page; the bar inside stays fixed
   at the top and shrinks smoothly as you scroll (--hp: 0 at the top, 1 once compact,
   set by assets/js/main.js). */
.site-header {
  position: relative; z-index: 50; background: var(--white); height: var(--h0);
  --h0: calc(203.6 * var(--u)); --h1: calc(112 * var(--u));
  --logo-top0: calc(22.7 * var(--u)); --logo-top1: calc(14.7 * var(--u)); --logo-w0: calc(195.9 * var(--u)); --logo-w1: calc(108 * var(--u));
  --nav-top0: calc(138.9 * var(--u)); --nav-top1: calc(41 * var(--u));
}
.site-header--tall { --h0: calc(233.6 * var(--u)); --logo-top0: calc(51.8 * var(--u)); --nav-top0: calc(168.1 * var(--u)); }
.site-header__bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: var(--white);
  height: calc(var(--h0) - (var(--h0) - var(--h1)) * var(--hp, 0));
}
.site-header__bar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: calc(18 * var(--u)); pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, .09), rgba(0, 0, 0, 0)); opacity: var(--hp, 0); }
.logo { position: absolute; left: calc(128.5 * var(--u));
  top: calc(var(--logo-top0) + (var(--logo-top1) - var(--logo-top0)) * var(--hp, 0));
  width: calc(var(--logo-w0) + (var(--logo-w1) - var(--logo-w0)) * var(--hp, 0)); }
.logo img { width: 100%; height: auto; }

.main-nav { position: absolute; right: calc(43.4 * var(--u)); top: calc(var(--nav-top0) + (var(--nav-top1) - var(--nav-top0)) * var(--hp, 0)); }
.nav-list { display: flex; gap: calc(56.4 * var(--u)); }
.nav-item { position: relative; }
.nav-link {
  display: block;
  font-family: var(--f-ui);
  font-size: calc(29.7 * var(--u));
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  transition: color .15s ease;
}
.nav-link:hover, .nav-item:hover > .nav-link, .nav-link.is-active { color: var(--red); }

/* Dropdown (shown on hover / keyboard focus) */
.nav-item--dd::after { /* hover bridge between the link and the panel */
  content: ""; position: absolute; left: calc(-28 * var(--u)); right: calc(-28 * var(--u)); top: 100%; height: calc(36 * var(--u));
}
.dropdown {
  position: absolute;
  left: calc(-27.4 * var(--u));
  top: calc(calc(65.5 * var(--u)) + calc(5.5 * var(--u)) * var(--hp, 0));   /* hangs from the bottom of the header */
  padding: calc(17.2 * var(--u)) calc(30 * var(--u)) calc(31.7 * var(--u)) calc(30.4 * var(--u));
  background: var(--dark);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-6 * var(--u)));
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-item--dd:hover .dropdown,
.nav-item--dd:focus-within .dropdown,
.nav-item--dd.is-touched .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a {
  display: block;
  font-family: var(--f-ui);
  font-size: calc(29.7 * var(--u));
  line-height: 1.5657;
  color: var(--white);
  white-space: nowrap;
  transition: color .15s ease;
}
.dropdown a:hover, .dropdown a.is-active { color: var(--red); }

.nav-toggle { display: none; }

/* ==========================================================================
   Shared page sections
   ========================================================================== */
/* Full-bleed photo hero */
.hero { position: relative; height: calc(899 * var(--u)); overflow: hidden; background: #222 center / cover no-repeat; }
.hero > img.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__title { position: relative; color: var(--white); font-size: calc(150.2 * var(--u)); padding-left: calc(135.7 * var(--u)); padding-top: calc(478.4 * var(--u)); }

.lead { font-size: calc(40.4 * var(--u)); line-height: 1.2; color: var(--ink); }

/* "The floor is open" call-to-action footer */
.site-footer { position: relative; background: var(--red); color: var(--white); padding: calc(72 * var(--u)) 0 calc(66 * var(--u)) calc(135.7 * var(--u)); }
.footer__title { font-size: calc(140 * var(--u)); white-space: nowrap; }   /* 140px on the 1920px design (banner headings are 150px) */
.footer__text { font-size: calc(28.8 * var(--u)); line-height: 1.198; margin-top: calc(14 * var(--u)); }
.footer__body { display: flex; align-items: flex-start; }
.footer__main { flex: 0 0 calc(1131 * var(--u)); }
.footer__ready { font-size: calc(69.2 * var(--u)); white-space: nowrap; margin-top: calc(30 * var(--u)); }
.footer__address { font-style: normal; font-size: calc(28.8 * var(--u)); line-height: 1.198; margin-top: calc(20 * var(--u)); white-space: nowrap; }   /* same size as the footer text */
.footer__social { display: flex; gap: calc(49.8 * var(--u)); margin-top: calc(36 * var(--u)); margin-left: calc(-4.9 * var(--u)); }
.footer__social a { display: inline-flex; align-items: center; gap: calc(7.2 * var(--u)); font-size: calc(29.7 * var(--u)); line-height: 1; transition: opacity .15s; }
.footer__social a:hover { opacity: .8; }
.footer__social svg { width: calc(40.7 * var(--u)); height: calc(40.7 * var(--u)); flex: none; }

.social-ico { --glyph: var(--red); }

/* ==========================================================================
   HOME
   ========================================================================== */
.home-hero { height: calc(897.9 * var(--u)); }
.home-hero .hero__title { padding-top: calc(104.9 * var(--u)); }
.home-hero__text { position: relative; color: var(--white); padding-left: calc(135.7 * var(--u)); margin-top: calc(10.2 * var(--u)); }
.home-hero .btn { margin-left: calc(142.3 * var(--u)); margin-top: calc(46.5 * var(--u)); }

/* This is what excellence tastes like */
.excellence { position: relative; background: var(--off-white); text-align: center; }
.excellence__title { font-size: calc(170 * var(--u)); color: var(--red); }
.excellence__title, .excellence__text { padding-right: calc(36.8 * var(--u)); }
.excellence__text { margin-top: calc(25.4 * var(--u)); }
.excellence .btn { margin-top: calc(37.1 * var(--u)); margin-left: calc(1.5 * var(--u)); z-index: 5; }   /* stays clickable above the bottles */
.excellence__pin { position: relative; padding: calc(100 * var(--u)) 0 calc(82 * var(--u)); }
.js-carousel .excellence__pin { position: sticky; top: var(--pin-top, 0px); }
/* computers: main.js may shrink the pinned section slightly (--fit) so heading and bottles fit on screen together */
.js-carousel .excellence__pin { --u: calc((100vw - var(--sbw, 0px)) / 1920 * var(--fit, 1)); }
.js-carousel .products { width: calc(100% * var(--fit, 1)); margin-left: auto; margin-right: auto; }

/* Rotating product carousel. Slots run clockwise: center -> left -> back -> right -> center.
   Positions use cqw (1cqw = 1% of the carousel width) so the same rules scale to any screen. */
.products { position: relative; container-type: inline-size; aspect-ratio: 100 / 27.5; margin-top: calc(20 * var(--u)); }
.product {
  position: absolute; left: 0; top: 0; width: 22cqw; margin: 0; border: 0; padding: 0; background: none;
  transform-origin: 0 0; cursor: pointer;
  transition: transform 1s cubic-bezier(.65, 0, .35, 1), filter 1s ease, opacity .7s ease, visibility 0s;
}
.product img { width: 100%; height: auto; pointer-events: none; }
/* a 3D turntable seen from the front: the four places form a diamond -
   back (top, smallest), left / right (middle), front (bottom, largest) */
.product[data-slot="center"] { z-index: 3; transform: translate3d(39cqw, -2.85cqw, 0); cursor: default; }   /* bottle tops line up just below the button, as in the design */
.product[data-slot="left"]   { z-index: 2; transform: translate3d(19cqw, -1cqw, 0) scale(.75); filter: brightness(.98); }
.product[data-slot="right"]  { z-index: 2; transform: translate3d(64.5cqw, -1cqw, 0) scale(.75); filter: brightness(.98); }
.product[data-slot="back"]   { z-index: 1; transform: translate3d(44.5cqw, -3cqw, 0) scale(.5); filter: brightness(.93); }
/* only three bottles show at a time: the one in the back place is hidden, so the fourth
   only appears as the products turn (it fades out going to the back and in coming out of it) */
.product[data-slot="back"]   { opacity: 0; visibility: hidden; pointer-events: none; transition: transform 1s cubic-bezier(.65, 0, .35, 1), filter 1s ease, opacity .7s ease, visibility 0s 1s; }
.product:focus-visible { outline-offset: 0; }

.products__dots { display: flex; justify-content: center; gap: calc(14 * var(--u)); margin-top: calc(4 * var(--u)); }
.products__dot { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 999px; background: #d4d2d2; transition: width .4s ease, background-color .4s ease; }
.products__dot.is-active { width: calc(44 * var(--u)); background: var(--red); }
.products__hint { display: none; }
.is-swipe .products__hint { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 10px; font-family: var(--f-ui); font-size: 13px; color: #8a8888; transition: opacity .4s ease; }
.is-swipe .products__hint svg { width: 16px; height: 16px; animation: hint-nudge 1.4s ease-in-out infinite; }
.is-swipe.is-done .products__hint { opacity: 0; }
@keyframes hint-nudge { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-4px); } }
/* while the carousel holds the screen on touch devices */
html.carousel-locked, html.carousel-locked body { overflow: hidden; overscroll-behavior: none; }

/* A trusted manufacturing partner */
.mfg-band { position: relative; height: calc(769 * var(--u)); overflow: hidden; }
.mfg-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mfg-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.27) 0%, rgba(0,0,0,.24) 20%, rgba(0,0,0,.13) 50%, rgba(0,0,0,.04) 85%, rgba(0,0,0,.02) 100%); }
.mfg-band__title { position: relative; z-index: 1; color: var(--white); font-size: calc(170 * var(--u)); padding: calc(215.3 * var(--u)) 0 0 calc(135.7 * var(--u)); }
.mfg-copy { padding: calc(57.5 * var(--u)) 0 calc(100 * var(--u)) calc(135.7 * var(--u)); }
.mfg-copy p + p { margin-top: calc(35.6 * var(--u)); }
.mfg-copy .btn { margin-top: calc(50.4 * var(--u)); margin-left: calc(10.3 * var(--u)); }

/* Lights. Camera. Brewery. */
.film { position: relative; height: calc(944.4 * var(--u)); }
.film__copy { padding: calc(146.6 * var(--u)) 0 0 calc(135.7 * var(--u)); }
.film__title { font-size: calc(129.1 * var(--u)); color: var(--red); }
.film__text { margin-top: calc(23.1 * var(--u)); }
.film__copy .btn { margin-top: calc(39.1 * var(--u)); margin-left: calc(10.3 * var(--u)); }
.film-strip { position: absolute; top: 0; left: calc(643.9 * var(--u)); right: 0; height: 100%; display: flex; overflow: hidden; background: #000; }
/* Expanding video panels: widths come from flex-grow (--g). At rest 5 x 1 + 3.305 matches
   the design (153.65 + main 507.85). The active panel widens, the rest narrow and dim. */
.film-panel {
  position: relative; flex: var(--g, 1) 1 0; min-width: 0; overflow: hidden; cursor: pointer; outline: none;
  transition: flex-grow .75s cubic-bezier(.65, 0, .35, 1), filter .5s ease;
}
.film-panel--main { --g: 3.305; }
.film-strip.has-active .film-panel { --g: .7; filter: brightness(.6) saturate(.85); }
.film-strip.has-active .film-panel--main { --g: 1.6; }
.film-strip.has-active .film-panel.is-active { --g: 3.6; filter: none; }
.film-strip.has-active .film-panel--main.is-active { --g: 4.5; }
.film-strip.main-active .film-panel:not(.film-panel--main) { --g: .75; }
.film-panel > img, .film-panel > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-panel > video { opacity: 0; transition: opacity .5s ease; }
.film-panel.is-playing > video { opacity: 1; }
.film-panel:not(.film-panel--main)::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%); pointer-events: none; transition: opacity .5s ease; }
.film-panel.is-active::after { opacity: 0; }
.film-panel:focus-visible { box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--red-bright); }
.film-panel__arrow { position: absolute; left: 50%; bottom: calc(46 * var(--u)); z-index: 2; width: calc(52 * var(--u)); height: calc(52 * var(--u)); transform: translateX(-50%); transition: transform .35s ease; pointer-events: none; }
.film-panel.is-active .film-panel__arrow { transform: translateX(-50%) scale(1.15); }
.play-btn { position: absolute; left: 50%; top: calc(382.5 * var(--u)); z-index: 2; width: calc(185.2 * var(--u)); height: calc(185.2 * var(--u)); margin-left: calc(-92.6 * var(--u)); border-radius: 50%; pointer-events: none; transition: transform .45s ease, opacity .45s ease; }
.play-btn svg { width: 100%; height: 100%; }
.film-panel--main.is-active .play-btn { opacity: 0; transform: scale(.8); }   /* hidden while its video plays */
.film-strip.has-active .film-panel--main:not(.is-active) .play-btn { transform: scale(.7); }

/* Golden pour around India */
.golden { padding: calc(100 * var(--u)) 0 calc(100 * var(--u)); }
.golden { display: flex; }
.golden__copy { flex: 0 0 calc(987.6 * var(--u)); padding-left: calc(135.7 * var(--u)); }
.golden__title { font-size: calc(129.1 * var(--u)); color: var(--red); margin-top: calc(200 * var(--u)); }
.golden__text { margin-top: calc(20.9 * var(--u)); }
.golden__copy .btn { margin-top: calc(47.3 * var(--u)); margin-left: calc(10.3 * var(--u)); }
.golden__map { position: relative; width: calc(773 * var(--u)); }
.golden__map img { width: 100%; height: auto; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.intro { padding: calc(56.3 * var(--u)) 0 0 calc(146.6 * var(--u)); }
.intro__title { font-size: calc(101 * var(--u)); color: var(--red); }
.intro__text { margin-top: calc(21.8 * var(--u)); margin-left: calc(-1.7 * var(--u)); }

.stats { display: flex; align-items: flex-end; margin-top: calc(43.6 * var(--u)); padding-bottom: calc(117.6 * var(--u)); }
.stat { display: flex; flex-direction: column; }
.stat__top { display: flex; align-items: flex-end; }
.stat__icon { flex: none; height: auto; }
.stat__num-wrap { display: flex; align-items: baseline; }
.stat__num { font-family: var(--f-display); font-size: calc(121.5 * var(--u)); line-height: .851; color: var(--graphite); }
.stat__unit { font-weight: 700; font-size: calc(41.4 * var(--u)); line-height: 1; color: var(--ink); margin-left: calc(1.3 * var(--u)); }
.stat__label { font-weight: 700; font-size: calc(29.7 * var(--u)); line-height: 1; color: var(--black); margin-top: calc(-1.9 * var(--u)); }
.stat--1 { margin-left: calc(5.9 * var(--u)); }
.stat--1 .stat__icon { width: calc(88.5 * var(--u)); margin: 0 calc(21.4 * var(--u)) calc(7.7 * var(--u)) 0; }
.stat--1 .stat__label { margin-left: calc(4 * var(--u)); }
.stat--2 { margin-left: calc(139.9 * var(--u)); }
.stat--2 .stat__icon { width: calc(83.2 * var(--u)); margin: 0 calc(24.1 * var(--u)) calc(10.1 * var(--u)) 0; }
.stat--2 .stat__label { margin-left: calc(1.5 * var(--u)); }
.stat--3 { margin-left: calc(213.1 * var(--u)); }
.stat--3 .stat__icon { width: calc(94 * var(--u)); margin: 0 calc(12.7 * var(--u)) calc(3.3 * var(--u)) 0; }
.stat--3 .stat__unit { margin-left: calc(12.5 * var(--u)); }
.stat--3 .stat__label { margin-left: calc(.8 * var(--u)); }

/* The story behind the golden pour */
.story { background: var(--dark); color: var(--white); padding: calc(110.1 * var(--u)) 0 calc(89.2 * var(--u)) calc(156.2 * var(--u)); }
.story__title { font-size: calc(64.1 * var(--u)); }
.chapters { margin-top: calc(44.3 * var(--u)); }
.chapter { display: flex; align-items: flex-start; }
.chapter__img { flex: none; width: calc(588.4 * var(--u)); height: calc(221 * var(--u)); object-fit: cover; margin: calc(6.6 * var(--u)) calc(31 * var(--u)) 0 calc(9.8 * var(--u)); }
.chapter__label { font-weight: 700; font-size: calc(29.7 * var(--u)); line-height: 1; color: var(--red); }
.chapter__title { font-size: calc(101 * var(--u)); color: var(--red); margin-top: calc(9.8 * var(--u)); white-space: nowrap; }
.chapter__text { margin-top: calc(-5 * var(--u)); }
.chapter:nth-child(2) { margin-top: calc(52 * var(--u)); }
.chapter:nth-child(3) { margin-top: calc(48.4 * var(--u)); }
.chapter:nth-child(4) { margin-top: calc(53 * var(--u)); }

.statement { display: flex; align-items: flex-start; margin: calc(116.4 * var(--u)) 0 0 calc(11.1 * var(--u)); width: calc(1585.4 * var(--u)); height: calc(269.8 * var(--u)); border: calc(1.4 * var(--u)) solid var(--white); padding: calc(35.2 * var(--u)) 0 0 calc(50.2 * var(--u)); }
.statement__icon { flex: none; width: calc(140.5 * var(--u)); }
.statement__body { margin-left: calc(23.1 * var(--u)); padding-top: calc(24.7 * var(--u)); }
.statement__title { font-size: calc(63.4 * var(--u)); line-height: .85; }
.statement__sub { font-size: calc(35.7 * var(--u)); line-height: 1.2; color: var(--red); margin: calc(8.3 * var(--u)) 0 0 calc(2.6 * var(--u)); }

/* The legacy in motion */
.legacy-motion { padding: calc(104 * var(--u)) 0 0 calc(156.2 * var(--u)); }
.legacy-motion__title { font-size: calc(101 * var(--u)); color: #191817; }
.timeline { display: grid; grid-template-columns: calc(255.5 * var(--u)) calc(224.8 * var(--u)) calc(228.3 * var(--u)) calc(226.1 * var(--u)) calc(224.8 * var(--u)) calc(233 * var(--u)) calc(181 * var(--u)); margin: calc(11.4 * var(--u)) 0 0 calc(11.1 * var(--u)); }
.milestone__icon { width: calc(181 * var(--u)); height: calc(181 * var(--u)); }
.milestone__body { padding-left: calc(4.1 * var(--u)); }
.milestone:nth-child(4) .milestone__body { padding-left: calc(5.3 * var(--u)); }
.milestone__year { font-weight: 700; font-size: calc(48 * var(--u)); line-height: 1; color: var(--black); margin-top: calc(31.6 * var(--u)); }
.milestone__hl { font-weight: 700; font-size: calc(39 * var(--u)); line-height: 1; color: var(--red); margin-top: calc(7.6 * var(--u)); white-space: nowrap; }
.milestone__desc { font-size: calc(26.9 * var(--u)); line-height: 1.197; color: var(--black); margin-top: calc(.8 * var(--u)); }

/* Our commitment */
.commitment { padding: calc(91.9 * var(--u)) 0 calc(109.7 * var(--u)) calc(158.1 * var(--u)); }
.commitment__title { font-size: calc(101 * var(--u)); color: var(--red); }
.pillars { display: grid; grid-template-columns: calc(385.9 * var(--u)) calc(403.1 * var(--u)) calc(403 * var(--u)) calc(403.1 * var(--u)); margin: calc(32.4 * var(--u)) 0 0 calc(4.7 * var(--u)); }
.pillar { padding-top: calc(21.2 * var(--u)); }
.pillar + .pillar { border-left: calc(1.3 * var(--u)) solid var(--rule); padding-left: calc(15 * var(--u)); }
.pillar__title { font-weight: 700; font-size: calc(41.2 * var(--u)); line-height: .947; color: var(--black); }
.pillar__text { font-size: calc(29.7 * var(--u)); line-height: 1.0774; margin-top: calc(13.3 * var(--u)); margin-left: calc(2.2 * var(--u)); }
.pillar-imgs { display: grid; grid-template-columns: repeat(4, calc(386.9 * var(--u))); gap: calc(16.2 * var(--u)); margin: calc(23.2 * var(--u)) 0 0 calc(3.7 * var(--u)); }
.pillar-imgs img { width: 100%; height: calc(281.9 * var(--u)); object-fit: cover; }

/* ==========================================================================
   VISIONARIES
   ========================================================================== */
.visionaries-hero .hero__title { padding: calc(449 * var(--u)) 0 0 calc(147 * var(--u)); }
.brands-hero .hero__title { padding-top: calc(198.5 * var(--u)); }
.vm { padding: calc(65.1 * var(--u)) 0 calc(116.8 * var(--u)) calc(146.9 * var(--u)); }
.vm__title { font-size: calc(101 * var(--u)); color: var(--red); }
.vm__text { margin: calc(23.9 * var(--u)) 0 0 calc(4.5 * var(--u)); }
.vm__title--mission { margin: calc(113.1 * var(--u)) 0 0 calc(5.6 * var(--u)); }
.vm__list { margin: calc(11.4 * var(--u)) 0 0 calc(12.4 * var(--u)); line-height: 1.3468; }

.leadership { position: relative; background: var(--red); color: var(--white); height: calc(806.8 * var(--u)); padding: calc(63.4 * var(--u)) 0 0 calc(160.6 * var(--u)); }
.leadership__title { font-size: calc(101 * var(--u)); }
.leadership__quote { position: relative; margin: calc(101.3 * var(--u)) 0 0 calc(105.4 * var(--u)); font-size: calc(104.9 * var(--u)); color: var(--dark); }
.leadership__q { position: absolute; width: calc(86 * var(--u)); }
.leadership__q--open { left: calc(-101.2 * var(--u)); top: calc(-44.9 * var(--u)); }
.leadership__q--close { left: calc(460 * var(--u)); top: calc(292.4 * var(--u)); }
.leadership__text { position: absolute; left: calc(960 * var(--u)); top: calc(251.1 * var(--u)); line-height: 1.3468; }

.directors { padding: calc(107.2 * var(--u)) 0 calc(42.4 * var(--u)) calc(241 * var(--u)); }
.directors__title { font-size: calc(101 * var(--u)); color: var(--red); }
.director { position: relative; display: flex; width: calc(1364 * var(--u)); height: calc(594 * var(--u)); margin: calc(20.2 * var(--u)) 0 0 calc(-23.8 * var(--u)); border: calc(1.3 * var(--u)) solid var(--black); padding: calc(25.3 * var(--u)) calc(25.1 * var(--u)) 0 calc(26.6 * var(--u)); }
.director + .director { margin-top: calc(23.8 * var(--u)); }
.director__photo { flex: none; width: calc(421.1 * var(--u)); height: calc(542.5 * var(--u)); background: var(--black); object-fit: cover; }
.director__body { margin-left: calc(77.2 * var(--u)); padding-top: calc(40.1 * var(--u)); }
.director--right { flex-direction: row-reverse; }
.director--right .director__body { margin: 0 calc(69.4 * var(--u)) 0 0; padding-top: calc(72.1 * var(--u)); text-align: right; }
.director__name { font-weight: 700; font-size: calc(48.3 * var(--u)); line-height: 1; color: var(--ink); }
.director__role { font-weight: 700; font-size: calc(39 * var(--u)); line-height: 1; color: var(--red); margin-top: calc(6.3 * var(--u)); }
.director__h { font-weight: 700; font-size: calc(48.3 * var(--u)); line-height: 1; color: var(--ink); margin-top: calc(74.4 * var(--u)); }
.director__text { margin-top: calc(7.2 * var(--u)); }

.legacy-community { background: var(--dark); color: var(--white); padding: calc(91.5 * var(--u)) 0 calc(120.4 * var(--u)) calc(224 * var(--u)); }
.legacy-community__title { font-size: calc(104.9 * var(--u)); color: var(--red); margin-left: calc(4.5 * var(--u)); }
.legacy-community__text { margin-top: calc(58.4 * var(--u)); }
.legacy-community__text + .legacy-community__text { margin-top: calc(35.6 * var(--u)); }

/* ==========================================================================
   CERTIFICATIONS
   ========================================================================== */
.certs { display: flex; height: calc(1400.4 * var(--u)); margin-bottom: calc(22.4 * var(--u)); }
.certs__side { position: relative; flex: 0 0 calc(729.3 * var(--u)); overflow: hidden; color: var(--white); }
.certs__side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.certs__side::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.56) 0%, rgba(0,0,0,.11) 100%); }
.certs__side-inner { position: relative; z-index: 1; padding: calc(393.9 * var(--u)) 0 0 calc(132.1 * var(--u)); }
.certs__title { font-size: calc(150.2 * var(--u)); }
.certs__intro { margin: calc(12.7 * var(--u)) 0 0 calc(12.1 * var(--u)); }
.certs__panel { flex: 1; margin-left: calc(17.2 * var(--u)); background: var(--red); color: var(--white); padding: calc(137.8 * var(--u)) 0 0 calc(106 * var(--u)); }
.cert p { line-height: 1.1987; }
.cert p + p { margin-top: calc(35.6 * var(--u)); }
.cert p.cert__num { margin-top: calc(49.7 * var(--u)); }
.cert__name { display: flex; align-items: flex-start; }
.cert__name img { margin-left: calc(8 * var(--u)); }
.cert--fssai .cert__name img { width: calc(130.8 * var(--u)); margin: calc(-16.7 * var(--u)) 0 calc(-12.4 * var(--u)) calc(8 * var(--u)); }
.cert__divider { border: 0; border-top: calc(1.3 * var(--u)) solid rgba(255,255,255,.9); width: calc(999.3 * var(--u)); margin: calc(101 * var(--u)) 0 calc(75.8 * var(--u)); }
.cert p.cert__iso { font-weight: 700; font-size: calc(41.4 * var(--u)); line-height: 1; margin-top: calc(7.2 * var(--u)); }
.cert--iso .cert__name img { width: calc(122.8 * var(--u)); margin: calc(-2.5 * var(--u)) 0 0 calc(22.1 * var(--u)); }
.cert--iso p.cert__num { margin-top: calc(50.9 * var(--u)); }

/* ==========================================================================
   BRANDS
   ========================================================================== */
.page-intro { padding: calc(74.1 * var(--u)) 0 calc(131.3 * var(--u)) calc(141.2 * var(--u)); }
.page-intro p { font-size: calc(40.4 * var(--u)); line-height: 1.2; }

.brand-row { display: flex; height: calc(818.4 * var(--u)); }
.brand-row + .brand-row { margin-top: calc(23.6 * var(--u)); }
.brand-row:last-of-type { margin-bottom: calc(36.8 * var(--u)); }
.brand-row--reverse { flex-direction: row-reverse; }
.brand-card {
  flex: 0 0 calc(611.4 * var(--u));
  background: linear-gradient(180deg, #2e2e2b 0%, #3b3c3b 45%, #4b4b4d 100%);
  color: var(--white);
  text-align: center;
  padding: var(--pt, calc(185.5 * var(--u))) var(--pr, 0) 0 var(--pl, 0);
}
.brand-row--reverse .brand-card { flex-basis: calc(612.1 * var(--u)); }
.brand-media { flex: 1; margin-left: calc(20.4 * var(--u)); overflow: hidden; }
.brand-row--reverse .brand-media { margin: 0 calc(20.4 * var(--u)) 0 0; }
.brand-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.brand-row:hover .brand-media img { transform: scale(1.03); }
.brand-card__logo { width: calc(165.2 * var(--u)); margin: 0 auto; }
.brand-card__logo--k1000 { width: calc(181.4 * var(--u)); }
.brand-card__logo--khaj { width: calc(204.7 * var(--u)); }
.brand-card__title { font-family: var(--f-display); font-size: calc(46.3 * var(--u)); line-height: 1; text-transform: uppercase; margin-top: var(--tt, calc(29.8 * var(--u))); }
.brand-card__desc { font-size: calc(22.6 * var(--u)); line-height: 1.2; margin-top: calc(5.3 * var(--u)); }
.brand-card__spec { font-weight: 700; font-size: calc(22.6 * var(--u)); line-height: 1.2; margin-top: var(--st, calc(31.5 * var(--u))); }
.brand-card__links { display: flex; justify-content: center; gap: calc(17.9 * var(--u)); margin-top: var(--lt, calc(33 * var(--u))); }
.brand-card__links a { width: calc(40.7 * var(--u)); height: calc(40.7 * var(--u)); transition: transform .15s ease; }
.brand-card__links a:hover { transform: translateY(calc(-3 * var(--u))); }
.brand-card__links svg { width: 100%; height: 100%; --glyph: #3a3a3a; }
.brand-card__stay { font-weight: 700; font-size: calc(38.6 * var(--u)); line-height: 1; margin-top: calc(18.9 * var(--u)); }

/* ==========================================================================
   DISTRIBUTION NETWORK
   ========================================================================== */
.dist { position: relative; padding: calc(397.8 * var(--u)) 0 0 calc(135.7 * var(--u)); }
.dist__title { font-size: calc(150.2 * var(--u)); color: var(--red); }
.dist__text { font-size: calc(40.4 * var(--u)); line-height: 1.2; margin: calc(19.3 * var(--u)) 0 0 calc(5.5 * var(--u)); }
.dist__map { position: absolute; left: calc(987.6 * var(--u)); top: calc(96.8 * var(--u)); width: calc(773 * var(--u)); }
.dist__map img { width: 100%; height: auto; }
.markets { margin-top: calc(277 * var(--u)); padding-bottom: calc(96.9 * var(--u)); font-size: calc(40.4 * var(--u)); line-height: 1.3861; color: var(--black); }
.markets strong { font-weight: 700; }
.join-band { background: var(--charcoal); color: var(--white); height: calc(722.8 * var(--u)); padding: calc(152.9 * var(--u)) 0 0 calc(130.8 * var(--u)); margin-bottom: calc(18.9 * var(--u)); }
.join-band__title { font-size: calc(121.2 * var(--u)); }

/* ==========================================================================
   CONTRACT MANUFACTURING
   ========================================================================== */
.contract-intro { padding-bottom: calc(92.8 * var(--u)); }
.cm-block { background: var(--charcoal); color: var(--white); padding: calc(79.9 * var(--u)) 0 0 calc(151.4 * var(--u)); }
.cm-block + .cm-block { margin-top: calc(18.4 * var(--u)); }
.cm-block:last-of-type { margin-bottom: calc(19.3 * var(--u)); }
.cm-block--1 { height: calc(420.1 * var(--u)); }
.cm-block--2 { height: calc(561.9 * var(--u)); }
.cm-block--3 { height: calc(791.9 * var(--u)); }
.cm-block__title { font-size: calc(116 * var(--u)); white-space: nowrap; }
.cm-block__title span { color: var(--red); }
.cm-block p { font-size: calc(32.8 * var(--u)); line-height: 1.3872; }
.cm-block__text { margin: calc(25.7 * var(--u)) 0 0 calc(4.5 * var(--u)); }
.cm-block__sub { margin: calc(-2.4 * var(--u)) 0 0 calc(181.5 * var(--u)); }
.cm-logos { position: relative; height: calc(223.5 * var(--u)); margin-top: calc(40.6 * var(--u)); }
.cm-logos img { position: absolute; }
.cm-logos__tuborg { left: calc(554.8 * var(--u)); top: 0; width: calc(374 * var(--u)); }
.cm-logos__carlsberg { left: calc(1029.4 * var(--u)); top: calc(26.3 * var(--u)); width: calc(389.8 * var(--u)); }
.cm-reasons { margin: calc(22.6 * var(--u)) 0 0 calc(4.5 * var(--u)); }
.cm-reasons dt { font-weight: 700; font-size: calc(44 * var(--u)); line-height: 1; }
.cm-reasons dt:not(:first-child) { margin-top: calc(42.4 * var(--u)); }
.cm-reasons dd { font-size: calc(32.8 * var(--u)); line-height: 1.3872; margin-top: calc(4.5 * var(--u)); }

/* ==========================================================================
   MEDIA & GALLERY
   ========================================================================== */
.media-hero .hero__title { padding-top: calc(298.1 * var(--u)); }
.media-hero { height: calc(898.9 * var(--u)); }
.media-intro { padding-bottom: 0; }
.tabs { display: flex; align-items: center; margin: calc(131.8 * var(--u)) 0 0 calc(3.7 * var(--u)); font-weight: 700; font-size: calc(44 * var(--u)); line-height: 1; }
.tab { font-weight: 700; color: var(--black); text-transform: uppercase; transition: color .15s ease; }
.tab:hover, .tab.is-active { color: var(--red); }
.tabs__sep { margin: 0 calc(18 * var(--u)); color: var(--black); }
.gallery { position: relative; width: calc(1623.6 * var(--u)); height: calc(1565.9 * var(--u)); margin: calc(42.4 * var(--u)) 0 calc(132.3 * var(--u)) calc(2.9 * var(--u)); }
.gallery__item { position: absolute; display: block; overflow: hidden; cursor: zoom-in; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery__item:hover img { transform: scale(1.04); }
.g1 { left: 0;        top: 0;        width: calc(507.6 * var(--u)); height: calc(774.2 * var(--u)); }
.g2 { left: calc(522.3 * var(--u)); top: 0;        width: calc(359.5 * var(--u)); height: calc(382.5 * var(--u)); }
.g3 { left: calc(522.3 * var(--u)); top: calc(394.9 * var(--u)); width: calc(359.5 * var(--u)); height: calc(379.3 * var(--u)); }
.g4 { left: calc(896.3 * var(--u)); top: 0;        width: calc(727.1 * var(--u)); height: calc(777.4 * var(--u)); }
.g5 { left: 0;        top: calc(791.5 * var(--u)); width: calc(727 * var(--u));   height: calc(379.5 * var(--u)); }
.g6 { left: calc(741.5 * var(--u)); top: calc(791.6 * var(--u)); width: calc(359.7 * var(--u)); height: calc(379.5 * var(--u)); }
.g7 { left: calc(1115.8 * var(--u));top: calc(791.6 * var(--u)); width: calc(507.8 * var(--u)); height: calc(774 * var(--u)); }
.g8 { left: 0;        top: calc(1183.8 * var(--u));width: calc(581 * var(--u));   height: calc(381.8 * var(--u)); }
.g9 { left: calc(593.5 * var(--u)); top: calc(1183.1 * var(--u));width: calc(507.6 * var(--u)); height: calc(382.9 * var(--u)); }
.tab-panel[hidden] { display: none; }
.ig-feed { width: calc(1623.6 * var(--u)); margin: calc(42.4 * var(--u)) 0 0 calc(2.9 * var(--u)); min-height: calc(300 * var(--u)); }   /* Instagram feed (Behold JSON, built by main.js) */
.ig-feed.is-loaded:not(.is-ready) {                          /* soft placeholder while the feed loads */
  min-height: calc(540 * var(--u)); border-radius: calc(4 * var(--u));
  background: linear-gradient(100deg, #efefef 30%, #f7f7f7 50%, #efefef 70%) 0 0 / 300% 100%;
  animation: ig-wait 1.4s linear infinite;
}
@keyframes ig-wait { to { background-position: -150% 0; } }
.ig-feed__fallback { display: none; font-size: calc(32.8 * var(--u)); }
.ig-feed.is-empty { min-height: 0; }
.ig-feed.is-empty .ig-feed__fallback { display: block; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(18 * var(--u)); }
/* every tile is Instagram's 4:5 shape; the whole post always shows (square posts sit on a blurred copy of themselves) */
.ig-post { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate; background: #1c1c1d;
  animation: ig-in .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes ig-in { from { opacity: 0; transform: translate3d(0, 30px, 0); } to { opacity: 1; transform: none; } }
.ig-post__bg { position: absolute; inset: -12%; z-index: -1; background: #1c1c1d center / cover no-repeat; filter: blur(22px) saturate(1.1) brightness(.72); }
.ig-post__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.ig-post::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); opacity: 0; transition: opacity .3s ease; }
.ig-post__icon { position: absolute; left: 50%; top: 50%; z-index: 1; width: calc(62 * var(--u)); height: calc(62 * var(--u)); min-width: 34px; min-height: 34px;
  transform: translate(-50%, -50%) scale(.8); opacity: 0; transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.ig-post__type { position: absolute; top: calc(16 * var(--u)); right: calc(16 * var(--u)); z-index: 1; width: calc(30 * var(--u)); height: calc(30 * var(--u)); min-width: 18px; min-height: 18px;
  color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); pointer-events: none; }
.ig-post:hover::after, .ig-post:focus-visible::after { opacity: 1; }
.ig-post:hover .ig-post__icon, .ig-post:focus-visible .ig-post__icon { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ig-post:hover .ig-post__img { transform: scale(1.04); }
.ig-post:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.ig-feed__follow { margin: calc(52 * var(--u)) 0 calc(132.3 * var(--u)) calc(2.9 * var(--u)); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(10, 9, 9, .92); padding: 4vh 4vw; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__content { display: flex; align-items: center; justify-content: center; max-width: 100%; }
.lightbox img, .lightbox video { max-width: 100%; max-height: 92vh; width: auto; height: auto; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox__close { position: absolute; top: 16px; right: 20px; width: 44px; height: 44px; color: #fff; font-size: 40px; line-height: 44px; }
.lightbox__msg { color: #fff; font-family: var(--f-ui); font-size: 20px; text-align: center; max-width: 520px; line-height: 1.5; }

/* ==========================================================================
   BEYOND BREWING
   ========================================================================== */
.beyond-hero .hero__title, .contact-hero .hero__title { padding: calc(377.5 * var(--u)) 0 0 calc(198.3 * var(--u)); }
.beyond-intro { padding: calc(57 * var(--u)) 0 0 calc(198.5 * var(--u)); }
.beyond-intro > p { font-size: calc(40.4 * var(--u)); line-height: 1.2; }
.beyond-intro__title { font-size: calc(275 * var(--u)); line-height: .889; color: var(--red); margin: calc(83.7 * var(--u)) 0 0 calc(-.2 * var(--u)); }
.initiatives { display: grid; grid-template-columns: calc(749.1 * var(--u)) calc(748.6 * var(--u)); column-gap: calc(22.1 * var(--u)); row-gap: calc(19 * var(--u)); margin: calc(26.6 * var(--u)) 0 calc(129.9 * var(--u)) calc(1.7 * var(--u)); }
.initiative { position: relative; height: calc(796.4 * var(--u)); overflow: hidden; color: var(--white); display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 calc(67.2 * var(--u)) calc(78 * var(--u)); }
.initiative img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.initiative::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.3) 35%, rgba(0,0,0,.42) 50%, rgba(0,0,0,.54) 70%, rgba(0,0,0,.65) 90%, rgba(0,0,0,.68) 100%); }
.initiative:hover img { transform: scale(1.04); }
.initiative > *:not(img) { position: relative; z-index: 2; }
.initiative__title { font-size: calc(116.2 * var(--u)); line-height: .888; }
.initiative__text { font-size: calc(32.8 * var(--u)); line-height: 1.3872; margin: calc(6.5 * var(--u)) 0 0 calc(-1.5 * var(--u)); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-intro { padding: calc(58.9 * var(--u)) 0 calc(38 * var(--u)) calc(198.5 * var(--u)); }
.contact-cols { position: relative; display: flex; height: calc(560 * var(--u)); }
.contact-cols::before { content: ""; position: absolute; left: calc(922.2 * var(--u)); top: 0; bottom: 0; border-left: calc(1.3 * var(--u)) solid var(--black); }
.contact-col { padding-top: calc(8 * var(--u)); }
.contact-col--left { flex: 0 0 calc(1051.5 * var(--u)); padding-left: calc(183.5 * var(--u)); }
.contact-col__title { font-size: calc(116.2 * var(--u)); line-height: .888; color: var(--red); }
.contact-col__text { font-size: calc(34.2 * var(--u)); line-height: 1.2018; margin: calc(34.1 * var(--u)) 0 0 calc(5.5 * var(--u)); }
.contact-col__mail { margin: calc(17.4 * var(--u)) 0 0 calc(6.8 * var(--u)); }
.contact-col--right .contact-col__mail { margin-top: calc(23.5 * var(--u)); }
.contact-col__mail a { font-weight: 700; transition: color .15s ease; }
.contact-col__mail a:hover, .talk__mail a:hover { color: var(--red); }

.talk { position: relative; height: calc(722 * var(--u)); overflow: hidden; margin-top: calc(3.3 * var(--u)); }
.talk > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.talk__box { position: absolute; left: calc(302.2 * var(--u)); top: calc(149.1 * var(--u)); width: calc(1315.6 * var(--u)); height: calc(423.5 * var(--u)); background: rgba(0,0,0,.75); color: var(--white); text-align: center; padding-top: calc(55 * var(--u)); }
.talk__title { font-size: calc(116.2 * var(--u)); color: var(--red); }
.talk__text { font-size: calc(34.2 * var(--u)); line-height: 1.2018; margin-top: calc(16.9 * var(--u)); }
.talk__mail { font-size: calc(45.9 * var(--u)); line-height: 1.2; margin-top: calc(11 * var(--u)); }

.find-us { display: flex; align-items: center; justify-content: space-between; padding: calc(87 * var(--u)) calc(102 * var(--u)) calc(92 * var(--u)) calc(186 * var(--u)); }
.find-us__map { flex: 0 0 calc(694 * var(--u)); height: calc(379 * var(--u)); background: #262a30; overflow: hidden; }
.find-us__map { position: relative; }
.find-us__map iframe { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 0; }
/* shown only if the map can't load (no internet, blocked by an ad-blocker...) */
.find-us__fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; text-align: center; font-family: var(--f-ui); font-size: clamp(13px, calc(24 * var(--u)), 18px); }
.find-us__fallback svg { width: clamp(30px, calc(54 * var(--u)), 44px); height: auto; }
.find-us__fallback strong { padding: .55em 1.2em; border-radius: 999px; background: var(--red); font-size: .9em; transition: background-color .15s; }
.find-us__fallback:hover strong { background: #e0232b; }
.find-us__title { font-size: calc(116.2 * var(--u)); color: var(--red); }
.find-us address { font-style: normal; font-size: calc(40.4 * var(--u)); line-height: 1.2; color: var(--black); margin-top: calc(11.8 * var(--u)); }

/* ==========================================================================
   Interactive India map (assets/js/india-map.js)
   ========================================================================== */
.india-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.map-state {
  fill: #58595b; stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round;
  outline: none; transform-box: fill-box; transform-origin: center;
  transition: fill .18s ease, transform .3s ease;
}
.india-map svg.is-pointing { cursor: pointer; }                       /* only over the Lilasons markets */
.map-state.is-market { fill: var(--red); }                                  /* the six Lilasons markets are always red */
.map-state.is-market.is-hover:not(.is-active), .map-state.is-market:focus-visible:not(.is-active) { fill: #ee3d44; }
.map-dots circle { stroke: #fff; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.map-state.is-active { fill: var(--red); transform: translate(-3px, -5px); }
/* globe turn: the whole map swings round as if it sat on a turning globe (india-map.js sets the transform) */
.globe-turn svg { transform-origin: 50% 50%; }
.globe-turn.is-turning .map-state { filter: none !important; }   /* no shadow while it turns: keeps the motion clean */
html.map-locked, html.map-locked body { overflow: hidden; overscroll-behavior: none; }   /* phones: page holds still while the map turns */
.map-label {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px)); padding: .55em .9em; border-radius: 8px;
  background: var(--dark); color: var(--white); box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
  font-family: var(--f-ui); font-size: clamp(12px, calc(22 * var(--u)), 18px); line-height: 1.2; text-align: center;
  width: max-content; max-width: min(300px, 86%);
  opacity: 0; transition: opacity .2s ease, left .25s ease, top .25s ease;
}
.map-label strong { display: block; font-weight: 700; }
.map-label small { display: block; margin-top: 2px; font-size: .78em; font-weight: 500; color: #cfcfcf; }
.map-label::after { content: ""; position: absolute; left: calc(50% + var(--arrow, 0px)); top: 100%; margin-left: -7px; border: 7px solid transparent; border-top-color: var(--dark); }
.map-label.is-on { opacity: 1; }

/* ==========================================================================
   Line-break helpers: the design's exact line breaks apply on desktop only
   ========================================================================== */
.hy { display: inline; }

/* ==========================================================================
   Tablet & mobile (<= 900px)
   ========================================================================== */
@media (max-width: 900px) {
  :root { --u: .5px; }
  body { font-size: 15px; line-height: 1.45; }
  br.lb, .hy { display: none; }

  /* Header */
  .site-header, .site-header--tall { --h0: 76px; --h1: 60px; --logo-top0: 8px; --logo-top1: 5px; --logo-w0: 76px; --logo-w1: 64px; }
  .logo { left: 16px; }
  .nav-toggle { display: flex; position: absolute; right: 12px; top: calc(16px - 8px * var(--hp, 0)); width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
  .nav-toggle span { display: block; width: 26px; height: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .main-nav, .site-header--tall .main-nav { position: absolute; top: 100%; right: 0; left: 0; background: var(--white); border-top: 1px solid #eee; box-shadow: 0 12px 24px rgba(0,0,0,.12); display: none; max-height: calc(100vh - 60px); overflow-y: auto; }
  .nav-open .main-nav { display: block; }
  .nav-list { flex-direction: column; gap: 0; padding: 8px 0 16px; }
  .nav-link { font-size: 18px; padding: 12px 20px; }
  .nav-item--dd::after { display: none; }
  .dropdown { position: static; opacity: 1; visibility: visible; transform: none; background: none; padding: 0 0 6px 36px; }
  .dropdown a { font-size: 16px; line-height: 1; padding: 9px 0; color: #555; }

  /* Generic */
  .btn { height: 44px; min-width: 0; padding: 0 24px; font-size: 14px; }
  /* page banners: an exact, scaled-down copy of the computer banner, so the whole photo shows
     (nothing cut off, never enlarged past the photo's own resolution) with the heading in the same place */
  .hero:not(.home-hero) { --u: calc((100vw - var(--sbw, 0px)) / 1920); }
  .lead, .page-intro p, .beyond-intro > p, .dist__text { font-size: 17px; }

  .site-footer { height: auto; padding: 36px 20px 40px; }
  .footer__title { font-size: 12.1vw; white-space: normal; }
  .footer__text { font-size: 15px; margin-top: 10px; }
  .footer__body { flex-direction: column; }
  .footer__main { flex: none; }
  .footer__ready { font-size: 7.4vw; white-space: normal; margin-top: 16px; }
  .footer__address { font-size: 15px; line-height: 1.45; margin-top: 18px; white-space: normal; }
  .footer__social { flex-wrap: wrap; gap: 14px 28px; margin: 26px 0 0; }
  .footer__social a { font-size: 15px; gap: 8px; }
  .footer__social svg { width: 28px; height: 28px; }

  /* Home */
  .home-hero { height: auto; min-height: 0; }
  .home-hero { background: #2d2d2e; }
  /* the bottles are cropped tight (left 24.5%-97.5%, top 26%-94% of the photo), so no empty dark band sits above them */
  .home-hero > img.hero__bg { position: relative; inset: auto; display: block; width: calc((100% + 40px) / .73); max-width: none; height: auto; aspect-ratio: 3.146; object-fit: cover; object-position: 50% 81%;
    margin: 0 0 -56px calc(-20px - (100% + 40px) * .3356);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32%); mask-image: linear-gradient(to bottom, transparent 0, #000 32%); }
  .home-hero > .btn { margin-bottom: 8px; }
  .home-hero { display: flex; flex-direction: column; align-items: flex-start; padding: 44px 20px 56px; }
  .home-hero > img.hero__bg { order: 9; }
  .home-hero .hero__title { position: relative; left: auto; right: auto; bottom: auto; padding: 0; margin: 0; font-size: 15vw; }
  .home-hero__text { padding: 0; margin-top: 12px; max-width: 320px; }
  .home-hero .btn { margin: 24px 0 0; }
  .excellence__pin { padding: 48px 20px 48px; }
  .excellence__title { font-size: 12.5vw; }
  .excellence__text { margin-top: 14px; }
  .excellence .btn { margin: 22px 0 0; }
  /* phones: a 3D turntable seen from the front, the four places form a diamond:
     back (top, smallest) - left / right (middle) - front (bottom, largest) */
  .products { aspect-ratio: 100 / 56; margin: 18px -20px 0; touch-action: pan-y; }
  .product { width: 46cqw; }
  .product[data-slot="center"] { transform: translate3d(27cqw, -7.5cqw, 0); }
  .product[data-slot="left"]   { transform: translate3d(1.5cqw, -2.4cqw, 0) scale(.652); filter: brightness(.98); }
  .product[data-slot="right"]  { transform: translate3d(68.5cqw, -2.4cqw, 0) scale(.652); filter: brightness(.98); }
  .product[data-slot="back"]   { transform: translate3d(39cqw, -6cqw, 0) scale(.478); filter: brightness(.93); }
  .products__dots { gap: 8px; margin-top: 10px; }
  .products__dot { width: 8px; height: 8px; }
  .products__dot.is-active { width: 26px; }
  .mfg-band { height: 70vw; min-height: 280px; }
  .mfg-band__title { position: absolute; left: 20px; bottom: 24px; padding: 0; font-size: 13vw; }
  .mfg-copy { padding: 28px 20px 48px; }
  .mfg-copy p + p { margin-top: 14px; }
  .mfg-copy .btn { margin: 24px 0 0; }
  .film { height: auto; }
  .film__copy { padding: 0 20px 32px; }
  .film__title { font-size: 15vw; }
  .film__text { margin-top: 12px; max-width: 360px; }
  .film__copy .btn { margin: 22px 0 0; }
  .film-strip { position: relative; left: 0; height: 82vw; }
  .film-panel__arrow { width: 26px; height: 26px; bottom: 14px; }
  .play-btn { left: 50%; top: 50%; width: 22vw; height: 22vw; margin: -11vw 0 0 -11vw; }
  .film-strip.has-active .film-panel--main:not(.is-active) .play-btn { transform: scale(.5); }
  .golden { padding: 48px 20px; }
  .golden { flex-direction: column; }
  .golden__copy { flex: none; padding: 0; }
  .golden__title { font-size: 13vw; margin-top: 0; }
  .golden__text { margin-top: 12px; }
  .golden__copy .btn { margin: 22px 0 0; }
  .golden__map { width: 100%; max-width: 480px; margin: 32px auto 0; }

  /* About */
  .intro { padding: 36px 20px 0; }
  .intro__title { font-size: 10vw; }
  .intro__text { margin: 12px 0 0; }
  .stats { flex-wrap: wrap; gap: 24px 32px; margin-top: 28px; padding-bottom: 48px; }
  .stat--1, .stat--2, .stat--3 { margin-left: 0; }
  .stat__top { height: auto; }
  .stat__num { font-size: 52px; }
  .stat__unit { font-size: 18px; }
  .stat__label { font-size: 14px; margin-top: 4px; }
  .stat__label, .stat--1 .stat__label, .stat--2 .stat__label { margin-left: 0; }
  .stat--1 .stat__icon { width: 40px; margin: 0 10px 4px 0; }
  .stat--2 .stat__icon { width: 38px; margin: 0 10px 4px 0; }
  .stat--3 .stat__icon { width: 42px; margin: 0 8px 2px 0; }
  .stat__top .stat__num-wrap { padding-bottom: 4px; }
  .story { padding: 48px 20px; }
  .story__title { font-size: 9vw; }
  .chapters { margin-top: 28px; }
  .chapter, .chapter:nth-child(n) { flex-direction: column; margin-top: 0; }
  .chapter + .chapter { margin-top: 32px; }
  .chapter__img { width: 100%; height: auto; aspect-ratio: 2.66; margin: 0 0 14px; }
  .chapter__label { font-size: 14px; }
  .chapter__title { font-size: 10vw; margin-top: 4px; white-space: normal; }
  .chapter__text { margin-top: 6px; }
  .statement { width: 100%; height: auto; margin: 40px 0 0; padding: 22px 18px; gap: 14px; }
  .statement__icon { width: 54px; }
  .statement__body { margin: 0; padding: 0; }
  .statement__title { font-size: 26px; }
  .statement__sub { font-size: 15px; margin: 8px 0 0; }
  .legacy-motion { padding: 48px 20px 0; }
  .legacy-motion__title { font-size: 11vw; }
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; margin: 20px 0 0; }
  .milestone__icon { width: 72px; height: 72px; }
  .milestone__body, .milestone:nth-child(4) .milestone__body { padding: 0; }
  .milestone__year { font-size: 22px; margin-top: 8px; }
  .milestone__hl { font-size: 18px; margin-top: 4px; }
  .milestone__desc { font-size: 14px; margin-top: 4px; }
  .commitment { padding: 48px 20px 56px; }
  .commitment__title { font-size: 11vw; }
  .pillars { grid-template-columns: 1fr 1fr; gap: 24px 0; margin: 20px 0 0; }
  .pillar { padding: 0 14px 0 0; }
  .pillar + .pillar { padding-left: 14px; }
  .pillar:nth-child(3) { border-left: 0; padding-left: 0; }
  .pillar__title { font-size: 19px; }
  .pillar__text { font-size: 15px; line-height: 1.35; margin: 8px 0 0; }
  .pillar-imgs { grid-template-columns: 1fr 1fr; gap: 8px; margin: 28px 0 0; }
  .pillar-imgs img { height: auto; aspect-ratio: 1.37; }

  /* Visionaries */
  .vm { padding: 40px 20px 48px; }
  .vm__title, .vm__title--mission { font-size: 11vw; margin-left: 0; }
  .vm__title--mission { margin-top: 36px; }
  .vm__text, .vm__list { margin: 12px 0 0; }
  .vm__list li + li { margin-top: 8px; }
  .leadership { height: auto; padding: 48px 20px 56px; }
  .leadership__title { font-size: 11vw; }
  .leadership__quote { margin: 40px 0 0 40px; font-size: 10.5vw; }
  .leadership__q { width: 34px; }
  .leadership__q--open { left: -40px; top: -12px; }
  .leadership__q--close { left: auto; right: 0; top: auto; bottom: -28px; }
  .leadership__text { position: static; margin-top: 48px; line-height: 1.5; }
  .directors { padding: 48px 20px 40px; }
  .directors__title { font-size: 11vw; }
  .director, .director--right { flex-direction: column; width: 100%; height: auto; margin: 20px 0 0; padding: 16px; }
  .director__photo { width: 62%; height: auto; aspect-ratio: 421 / 542; max-width: 260px; }
  .director__body, .director--right .director__body { margin: 18px 0 0; padding: 0; text-align: left; }
  .director__name, .director__h { font-size: 22px; }
  .director__role { font-size: 17px; margin-top: 4px; }
  .director__h { margin-top: 22px; }
  .director__text { margin-top: 6px; }
  .legacy-community { padding: 48px 20px 56px; }
  .legacy-community__title { font-size: 11vw; margin: 0; }
  .legacy-community__text { margin-top: 18px; }
  .legacy-community__text + .legacy-community__text { margin-top: 14px; }

  /* Certifications */
  .certs { flex-direction: column; height: auto; margin-bottom: 10px; }
  .certs__side { flex: none; width: 100%; height: min(150vw, 680px); }   /* tall, close to the photo's own shape (fixed height: iPhone Safari narrows aspect-ratio boxes) */
  .certs__side img { object-position: 50% 22%; }
  .certs__side::after { background: linear-gradient(180deg, rgba(0,0,0,.08) 35%, rgba(0,0,0,.62) 100%); }   /* keeps the white heading readable over the lab coat */
  .certs__side-inner { position: absolute; left: 20px; right: 20px; bottom: 28px; padding: 0; }
  .certs__title { font-size: 17vw; }
  .certs__intro { margin: 10px 0 0; }
  .certs__panel { margin: 10px 0 0; padding: 40px 20px 48px; }
  .cert p + p, .cert p.cert__num, .cert--iso p.cert__num { margin-top: 14px; }
  .cert--fssai .cert__name img { width: 76px; margin: -10px 0 -8px 8px; }
  .cert--iso .cert__name img { width: 60px; margin: 0 0 0 14px; }
  .cert p.cert__iso { font-size: 20px; margin-top: 4px; }
  .cert__divider { width: 100%; margin: 32px 0; }

  /* Brands */
  .page-intro { padding: 32px 20px 40px; }
  .brand-row, .brand-row--reverse { flex-direction: column-reverse; height: auto; }
  .brand-row + .brand-row { margin-top: 12px; }
  .brand-row:last-of-type { margin-bottom: 12px; }
  .brand-media, .brand-row--reverse .brand-media { margin: 0 0 0; height: 64vw; flex: none; }
  .brand-card, .brand-row--reverse .brand-card { flex: none; padding: 36px 20px 40px; }
  .brand-card__logo { width: 104px; }
  .brand-card__logo--k1000 { width: 112px; }
  .brand-card__logo--khaj { width: 128px; }
  .brand-card__title { font-size: 28px; margin-top: 18px; }
  .brand-card__desc, .brand-card__spec { font-size: 14px; }
  .brand-card__spec { margin-top: 14px; }
  .brand-card__links { gap: 12px; margin-top: 22px; }
  .brand-card__links a { width: 32px; height: 32px; }
  .brand-card__stay { font-size: 20px; margin-top: 14px; }

  /* Distribution */
  .dist { padding: 0 20px; display: flex; flex-direction: column; }
  .dist__map { position: static; order: -1; width: 100%; max-width: 440px; margin: 24px auto 8px; }
  .dist__title { font-size: 14vw; }
  .dist__text { margin: 10px 0 0; }
  .markets { margin-top: 32px; padding-bottom: 48px; font-size: 16px; line-height: 1.5; }
  .markets li + li { margin-top: 8px; }
  .join-band { height: auto; padding: 48px 20px 56px; margin-bottom: 10px; }
  .join-band__title { font-size: 9.5vw; }

  /* Contract */
  .contract-intro { padding-bottom: 40px; }
  .cm-block, .cm-block--1, .cm-block--2, .cm-block--3 { height: auto; padding: 40px 20px 44px; }
  .cm-block + .cm-block { margin-top: 10px; }
  .cm-block:last-of-type { margin-bottom: 10px; }
  .cm-block__title { font-size: 9vw; white-space: normal; }
  .cm-block p, .cm-reasons dd { font-size: 15px; line-height: 1.5; }
  .cm-block__text, .cm-block__sub, .cm-reasons { margin: 14px 0 0; }
  .cm-logos { height: auto; margin-top: 28px; display: flex; justify-content: center; align-items: center; gap: 28px; }
  .cm-logos img { position: static; }
  .cm-logos__tuborg { width: 42%; } .cm-logos__carlsberg { width: 44%; }
  .cm-reasons dt { font-size: 19px; }
  .cm-reasons dt:not(:first-child) { margin-top: 20px; }
  .cm-reasons dd { margin-top: 4px; }

  /* Media */
  .tabs { flex-wrap: wrap; gap: 6px 0; margin: 36px 0 0; font-size: 17px; }
  .tabs__sep { margin: 0 10px; }
  /* a gap-free 2-column mosaic: tall photos take two rows, the big one two by two, wide ones the full width */
  .gallery { width: auto; height: auto; margin: 20px 0 48px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: calc((100vw - var(--sbw, 0px) - 48px) / 2); gap: 8px; }
  .gallery__item { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .gallery__item.g1, .gallery__item.g7 { grid-row: span 2; }
  .gallery__item.g4 { grid-column: span 2; grid-row: span 2; }
  .gallery__item.g5, .gallery__item.g9 { grid-column: span 2; }
  .media-intro { padding-left: 20px; padding-right: 20px; }
  .ig-feed { width: auto; margin: 20px 0 0; min-height: 0; }
  .ig-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ig-feed__fallback { font-size: 15px; }
  .ig-feed.is-loaded:not(.is-ready) { min-height: 240px; }
  .ig-feed__follow { margin: 26px 0 48px; }

  /* Beyond brewing */
  .beyond-intro { padding: 32px 20px 0; }
  .beyond-intro__title { font-size: 21vw; margin: 28px 0 0; }
  .initiatives { grid-template-columns: 1fr; gap: 10px; margin: 24px 0 48px; }
  .initiative { height: 98vw; max-height: 520px; padding: 0 22px 28px; }
  .initiative__title { font-size: 12vw; }
  .initiative__text { font-size: 15px; line-height: 1.45; margin: 8px 0 0; }

  /* Contact */
  .contact-intro { padding: 28px 20px 22px; }
  .contact-cols { flex-direction: column; height: auto; padding: 0 20px 40px; }
  .contact-cols::before { display: none; }
  .contact-col, .contact-col--left { flex: none; padding: 0; }
  .contact-col--right { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--black); }
  .contact-col__title { font-size: 12vw; }
  .contact-col__text { font-size: 16px; margin: 12px 0 0; }
  .contact-col__mail, .contact-col--right .contact-col__mail { margin: 10px 0 0; font-size: 15px; }
  .talk { height: auto; margin: 0; padding: 48px 16px; }
  .talk__box { position: relative; left: auto; top: auto; width: auto; height: auto; padding: 32px 18px 36px; }
  .talk__title { font-size: 11vw; }
  .talk__text { font-size: 15px; margin-top: 10px; }
  .talk__mail { font-size: 17px; margin-top: 12px; word-break: break-word; }
  .find-us { padding: 48px 20px 56px; }
  .find-us__title { font-size: 12vw; }
  .find-us address { font-size: 16px; line-height: 1.5; margin-top: 8px; }
  .find-us { flex-direction: column; align-items: stretch; gap: 24px; }
  .find-us__map { flex: none; width: 100%; height: 280px; }
}

@media (max-width: 900px) and (min-width: 600px) {
  .products { width: min(600px, 100%); margin: 18px auto 0; }
  .initiatives { grid-template-columns: 1fr 1fr; }
  .initiative { height: 64vw; }
  .initiative__title { font-size: 7vw; }
  .timeline { grid-template-columns: repeat(4, 1fr); }
  .pillars { grid-template-columns: repeat(4, 1fr); }
  .pillar:nth-child(3) { border-left: 1px solid var(--rule); padding-left: 14px; }
}

/* ==========================================================================
   Page-to-page transition
   --------------------------------------------------------------------------
   html.pt-enter  page has just loaded: panels cover the screen
   html.pt-reveal panels sweep up and away, hero heading rises in
   html.pt-leave  a link was clicked: panels sweep up from the bottom
   (classes are set by the inline <head> script and assets/js/main.js)
   ========================================================================== */
.page-transition { position: fixed; inset: 0; z-index: 1000; overflow: hidden; pointer-events: none; }
.page-transition__layer { position: absolute; inset: 0; transform: translate3d(0, 101%, 0); will-change: transform; }
.page-transition__layer--red { background: var(--red); }
.page-transition__layer--dark { background: var(--dark); }
.page-transition__logo { position: absolute; left: 50%; top: 50%; width: clamp(110px, 11vw, 200px); height: auto; opacity: 0; transform: translate(-50%, -50%) scale(.92); }

/* covered (just loaded) */
.pt-enter .page-transition,
.pt-leave .page-transition { pointer-events: auto; }
.pt-enter .page-transition__layer { transform: none; }
.pt-enter .page-transition__logo { opacity: 1; transform: translate(-50%, -50%); }
/* fail-safe: never leave the page covered if the script didn't run */
.pt-enter .page-transition { animation: pt-failsafe 0s 4s forwards; }
@keyframes pt-failsafe { to { visibility: hidden; } }

/* reveal the new page */
.pt-reveal .page-transition__layer { transform: translate3d(0, -101%, 0); transition: transform .62s cubic-bezier(.76, 0, .24, 1); }
.pt-reveal .page-transition__layer--dark { transition-delay: .08s; }
.pt-reveal .page-transition__layer--red { transition-delay: .2s; }
.pt-reveal .page-transition__logo { opacity: 0; transform: translate(-50%, -62%); transition: opacity .25s ease, transform .4s ease; }

/* leave the current page */
.pt-leave .page-transition__layer { transform: none; transition: transform .55s cubic-bezier(.76, 0, .24, 1); }
.pt-leave .page-transition__layer--dark { transition-delay: .1s; }
.pt-leave .page-transition__logo { opacity: 1; transform: translate(-50%, -50%); transition: opacity .3s ease .4s, transform .5s cubic-bezier(.2, .7, .2, 1) .35s; }

/* ==========================================================================
   Scroll reveals: text slides in from the right, images from the left,
   large photos wipe in from the left. Classes are added by assets/js/main.js,
   so without JavaScript everything is simply visible.
   ========================================================================== */
:root { --rv-x: 90px; }
.rv { transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1) !important; transition-delay: var(--rv-delay, 0s) !important; }
.rv-text:not(.rv-in) { opacity: 0; transform: translate3d(var(--rv-x), 0, 0); }
.rv-img:not(.rv-in)  { opacity: 0; transform: translate3d(calc(var(--rv-x) * -1), 0, 0); }
.rv-wipe { transition: clip-path 1.25s cubic-bezier(.77, 0, .18, 1), transform 1.6s cubic-bezier(.2, .7, .2, 1) !important; transition-delay: var(--rv-delay, 0s) !important; }
.rv-wipe:not(.rv-in) { clip-path: inset(0 100% 0 0); transform: scale(1.08); }
.rv-wipe.rv-in { clip-path: inset(0 0 0 0); }
@media (max-width: 900px) { :root { --rv-x: 44px; } }

/* ==========================================================================
   Age gate — "Are you of legal drinking age" (first visit only)
   --------------------------------------------------------------------------
   The markup is in every page; the <head> script adds html.ag-open until the
   visitor has said yes once, and assets/js/main.js runs the buttons.
   Desktop sizes are the 1920 x 1080 design, scaled to fit the window (--g).
   ========================================================================== */
.age-gate {
  --g: min(calc((100vw - var(--sbw, 0px)) / 1920), calc(100vh / 1080));
  position: fixed; inset: 0; z-index: 3000;
  display: none; flex-direction: column; align-items: center;
  padding: calc(40 * var(--g)) 20px calc(156 * var(--g));
  overflow-y: auto; overscroll-behavior: contain;
  background: #0f0f10; color: #d1d3d4; text-align: center;
}
html.ag-open .age-gate { display: flex; }
.age-gate:focus { outline: none; }
html.ag-open .page-transition { animation: none; }       /* keep the page covered until the visitor enters */
.age-gate__inner { margin: auto 0; display: flex; flex-direction: column; align-items: center; }
.age-gate__logo { width: calc(195.9 * var(--g)); height: auto; }
.age-gate__title {
  margin-top: calc(41 * var(--g)); font-family: var(--f-display); font-weight: 400; font-size: calc(101 * var(--g));
  line-height: 1; letter-spacing: 0; text-transform: uppercase; color: var(--red);
}
.age-gate__sub {
  margin-top: calc(29 * var(--g)); font-family: "Antonio", var(--f-display); font-weight: 100; font-size: calc(43.8 * var(--g));
  line-height: 1; letter-spacing: 0; text-transform: uppercase; color: #d1d3d4;
}
.age-gate__btns { display: flex; justify-content: center; gap: calc(40 * var(--g)); margin: calc(84 * var(--g)) 0 0; }
.age-gate__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(270 * var(--g)); height: calc(72 * var(--g)); border: max(1px, calc(1.6 * var(--g))) solid #d1d3d4; border-radius: 999px;
  font-family: "Antonio", var(--f-display); font-weight: 100; font-size: calc(42 * var(--g)); line-height: 1;
  letter-spacing: .01em; text-transform: uppercase; color: #d1d3d4; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.age-gate__btn--yes { background: #d02027; }
.age-gate__btn--no { background: #0f0f10; }
.age-gate__btn:hover { color: #fff; border-color: #fff; }
.age-gate__btn--yes:hover { background: #e0232b; }
.age-gate__btn--no:hover { background: #1b1b1d; }
.age-gate__btn:active { transform: scale(.97); }
.age-gate__btn:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.age-gate__note {
  margin-top: calc(66 * var(--g)); font-family: var(--f-body); font-size: calc(26.7 * var(--g)); line-height: 1.2;
  letter-spacing: -.012em; color: #5a5858;
}

/* entrance: the parts come in one after another */
@keyframes ag-in { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@keyframes ag-logo { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
html.ag-open .age-gate__logo { animation: ag-logo .9s cubic-bezier(.2, .7, .2, 1) .1s both; }
html.ag-open .age-gate__title { animation: ag-in .9s cubic-bezier(.2, .7, .2, 1) .25s both; }
html.ag-open .age-gate__sub { animation: ag-in .9s cubic-bezier(.2, .7, .2, 1) .4s both; }
html.ag-open .age-gate__btns { animation: ag-in .9s cubic-bezier(.2, .7, .2, 1) .55s both; }
html.ag-open .age-gate__note { animation: ag-in .9s cubic-bezier(.2, .7, .2, 1) .7s both; }
/* leaving: the gate lifts away like the page-transition panels underneath it */
html.ag-leaving .age-gate { transform: translate3d(0, -101%, 0); transition: transform .8s cubic-bezier(.76, 0, .24, 1); }
html.ag-leaving .age-gate__inner { opacity: 0; transition: opacity .3s ease; }

/* phones and small tablets */
@media (max-width: 900px) {
  .age-gate { padding: 40px 20px 56px; }
  .age-gate__logo { width: 118px; }
  .age-gate__title { margin-top: 24px; font-size: clamp(38px, 12.2vw, 64px); line-height: .95; max-width: 9.5em; }
  .age-gate__sub { margin-top: 14px; font-size: clamp(18px, 5.4vw, 26px); line-height: 1.15; max-width: 22em; }
  .age-gate__btns { gap: 14px; margin: 34px 0 0; width: 100%; max-width: 300px; }
  .age-gate__btn { flex: 1 1 0; width: auto; min-width: 0; max-width: 140px; height: 42px; border-width: 1px; font-size: 19px; }
  .age-gate__btn:hover { transform: none; }
  .age-gate__btn:active { transform: scale(.97); }
  .age-gate__note { margin-top: 30px; font-size: 13px; line-height: 1.45; letter-spacing: 0; max-width: 300px; color: #6a6868; }
}
@media (max-width: 900px) and (max-height: 520px) {          /* phone held sideways */
  .age-gate { padding: 18px 20px 22px; }
  .age-gate__logo { width: 72px; }
  .age-gate__title { margin-top: 10px; font-size: 34px; max-width: none; }
  .age-gate__sub { margin-top: 8px; font-size: 17px; }
  .age-gate__btns { margin-top: 18px; }
  .age-gate__btn { height: 38px; font-size: 18px; }
  .age-gate__note { margin-top: 16px; max-width: 600px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  .age-gate, .age-gate * { animation: none !important; }
  .ig-post { animation: none !important; }
}