/* ==========================================================================
   DRAM LOCH — Core Stylesheet
   A global scotch whisky brand site built for two audiences:
   the consumer, and the distributor deciding what to put on their trucks.
   ========================================================================== */

/* -------------------------------- Fonts ---------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* -------------------------------- Tokens ---------------------------------- */
:root{
  /* Colour system — highland night + copper still + amber pour */
  --ink:            #0D1015;
  --ink-soft:       #171B22;
  --ink-elevated:   #1F2530;
  --parchment:      #F4EEE0;
  --parchment-dim:  #DCD3BE;
  --amber:          #CC9448;
  --amber-bright:   #E6B36C;
  --amber-deep:     #8C5A22;
  --copper:         #B5652D;
  --burgundy:       #6E1F2A;
  --burgundy-bright:#8F2C3B;
  --mist:           #929AAB;
  --mist-dim:       #5C6373;
  --line:           rgba(244,238,224,0.14);
  --line-strong:    rgba(244,238,224,0.28);
  --shadow-deep:    0 40px 80px -30px rgba(0,0,0,0.65);

  /* Type — BEVRA / Dram Loch system: Cormorant Garamond (display/headlines,
     regular weight throughout), IBM Plex Sans (body), IBM Plex Mono
     (labels, nav, eyebrows, buttons) */
  --f-display: 'Cormorant Garamond', 'Iowan Old Style', serif;
  --f-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:    'IBM Plex Mono', 'SF Mono', monospace;

  /* Rhythm */
  --section-pad: clamp(72px, 10vw, 160px);
  --gutter: clamp(20px, 5vw, 64px);
  --radius-sm: 3px;
  --radius-md: 6px;
  --ease-cinema: cubic-bezier(.16,.84,.24,1);
  --dur-slow: 1.4s;
  --dur-med: .8s;
}

/* -------------------------------- Reset ---------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: auto; /* Lenis takes over smooth scroll */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body{
  margin:0;
  background: var(--ink);
  color: var(--parchment);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
video{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font-family: inherit; }
svg{ display:block; }

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

/* Custom scrollbar (webkit) — thin, amber */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background: var(--ink); }
::-webkit-scrollbar-thumb{ background: var(--amber-deep); border-radius:4px; }

/* -------------------------------- Type scale ------------------------------ */
.eyebrow{
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{
  content:''; width:28px; height:1px; background: var(--amber-deep);
}
.eyebrow.center{ justify-content:center; }
.eyebrow.center::before{ display:none; }

/* All real headings default to the display face — fixes the inconsistency
   where a size utility (.h-lg/.h-md/.h-sm) was applied without its required
   .h-display companion class, silently falling back to the body font. */
h1, h2, h3, h4{
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.04;
  color: var(--parchment);
}

.h-display{
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.04;
  color: var(--parchment);
}
.h-xl{ font-size: clamp(44px, 7.2vw, 118px); }
.h-lg{ font-size: clamp(34px, 5vw, 72px); }
.h-md{ font-size: clamp(26px, 3.2vw, 42px); }
.h-sm{ font-size: clamp(20px, 2vw, 26px); font-weight:400; }

.italic{ font-style: italic; font-weight:400; color: var(--amber-bright); }

.lede{
  font-size: clamp(17px, 1.6vw, 21px);
  color: var(--parchment-dim);
  line-height: 1.7;
  font-weight: 400;
  max-width: 46ch;
}
.body-copy{ color: var(--parchment-dim); font-size:16px; line-height:1.75; max-width: 60ch; }

/* -------------------------------- Layout ---------------------------------- */
.section{ padding: var(--section-pad) var(--gutter); position:relative; }
.section-tight{ padding-top: calc(var(--section-pad) * .5); padding-bottom: calc(var(--section-pad) * .5); }
.wrap{ max-width: 1360px; margin:0 auto; }
.wrap-narrow{ max-width: 920px; margin:0 auto; }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); align-items:center; }
.stack{ display:flex; flex-direction:column; }
.center-col{ text-align:center; margin-inline:auto; }

.on-light{ background: var(--parchment); color: var(--ink); }
.on-light .eyebrow{ color: var(--burgundy); }
.on-light .eyebrow::before{ background: var(--burgundy); }
.on-light h1, .on-light h2, .on-light h3, .on-light h4, .on-light .h-display{ color: var(--ink); }
.on-light .lede, .on-light .body-copy{ color: #4A4437; }
.on-light .italic{ color: var(--burgundy); }

/* -------------------------------- Buttons ---------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 16px 30px;
  font-family: var(--f-mono); font-weight:600; font-size:13px;
  letter-spacing: .03em;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .5s var(--ease-cinema), background .4s ease, border-color .4s ease, color .4s ease;
  white-space: nowrap;
}
.btn svg{ width:14px; height:14px; transition: transform .4s var(--ease-cinema); }
.btn:hover svg{ transform: translateX(4px); }
.btn:hover{ transform: translateY(-2px); }

.btn-amber{ background: var(--amber); color: var(--ink); }
.btn-amber:hover{ background: var(--amber-bright); }

.btn-ghost{ border-color: var(--line-strong); color: var(--parchment); }
.btn-ghost:hover{ border-color: var(--amber); color: var(--amber-bright); }

.btn-dark{ background: var(--ink); color: var(--parchment); border-color: var(--ink); }
.btn-dark:hover{ background: var(--burgundy); border-color: var(--burgundy); }

.cta-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:40px; }

/* -------------------------------- Nav ---------------------------------- */
.site-nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px var(--gutter);
  transition: padding .5s var(--ease-cinema), background .5s ease, border-color .5s ease;
  border-bottom: 1px solid transparent;
}
.site-nav.is-scrolled{
  padding: 14px var(--gutter);
  background: rgba(13,16,21,0.62);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav-logo{ display:flex; align-items:center; gap:10px; }
.nav-logo img{ height:34px; width:auto; transition: height .5s var(--ease-cinema); }
.site-nav.is-scrolled .nav-logo img{ height:28px; }
.nav-logo span{ font-family: var(--f-mono); font-size:10px; letter-spacing:.2em; color: var(--mist); text-transform:uppercase; margin-top: 2px;}

.nav-links{ display:flex; align-items:center; gap: 36px; }
.nav-links a{
  font-family: var(--f-mono);
  font-size: 12.5px; font-weight:500; letter-spacing:.03em;
  color: var(--parchment-dim);
  position:relative; padding: 4px 0;
  transition: color .3s ease;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background: var(--amber); transition: width .4s var(--ease-cinema);
}
.nav-links a:hover{ color: var(--parchment); }
.nav-links a:hover::after, .nav-links a.is-active::after{ width:100%; }
.nav-links a.is-active{ color: var(--amber-bright); }

.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-cta .btn{ padding:11px 20px; font-size:12.5px; }

.nav-burger{ display:none; width:26px; height:18px; position:relative; cursor:pointer; background:none; border:none; }
.nav-burger span{ position:absolute; left:0; right:0; height:1px; background: var(--parchment); transition: all .35s var(--ease-cinema); }
.nav-burger span:nth-child(1){ top:0; }
.nav-burger span:nth-child(2){ top:8px; }
.nav-burger span:nth-child(3){ top:16px; }
.nav-burger.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2){ opacity:0; }
.nav-burger.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset:0; z-index:460;
  background: var(--ink);
  display:flex; flex-direction:column; justify-content:center; padding: 40px var(--gutter);
  transform: translateY(-100%);
  transition: transform .6s var(--ease-cinema);
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu a{ font-family: var(--f-display); font-size: 36px; padding: 14px 0; border-bottom:1px solid var(--line); color: var(--parchment); }
.mobile-menu .cta-row{ margin-top:32px; }

/* --------------------------- Pour-line progress --------------------------
   Signature element: a fixed vertical amber "pour" that fills as the visitor
   scrolls the page — a dram, measured out, over the length of the story. */
.pour-rail{
  position: fixed; left: 22px; top: 50%; transform: translateY(-50%);
  z-index: 400; height: 38vh; width: 2px;
  display:flex; flex-direction:column; align-items:center;
  pointer-events:none;
}
.pour-rail .rail-track{
  position:relative; flex:1; width:1px; background: var(--line);
  overflow:visible;
}
.pour-rail .rail-fill{
  position:absolute; left:0; right:0; bottom:0; top:auto; height:0%;
  background: linear-gradient(var(--amber-bright), var(--copper));
  box-shadow: 0 0 12px 1px rgba(204,148,72,.55);
}
.pour-rail .rail-glass{
  margin-top:10px; width:16px; height:20px;
  border: 1px solid var(--line-strong); border-top:none;
  border-radius: 0 0 4px 4px;
  position:relative; overflow:hidden;
  background: rgba(244,238,224,.02);
}
.pour-rail .rail-glass .fill{
  position:absolute; left:0; right:0; bottom:0; height:0%;
  background: linear-gradient(var(--amber-bright), var(--amber-deep));
  transition: height .1s linear;
}
@media (max-width: 980px){ .pour-rail{ display:none; } }

/* -------------------------------- Hero ---------------------------------- */
.hero{
  position:relative; min-height:100vh; min-height:100dvh; display:flex; align-items:flex-end;
  overflow:hidden; padding: var(--gutter);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img, .hero-media video{ width:100%; height:100%; object-fit:cover; object-position:center 30%; transform: scale(1.12); }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(13,16,21,.20) 0%, rgba(13,16,21,.08) 30%, rgba(13,16,21,.35) 68%, rgba(13,16,21,.68) 100%),
    linear-gradient(90deg, rgba(13,16,21,.48) 0%, rgba(13,16,21,.03) 45%);
}
.hero-content{ position:relative; z-index:2; padding: 0 clamp(8px,2vw,24px) 64px; max-width: 1360px; margin:0 auto; width:100%; }
.hero-eyebrow{ color: var(--amber-bright); margin-bottom:22px; }
.hero-title{ font-family: var(--f-display); font-weight:400; font-size: clamp(46px, 8vw, 128px); line-height:.98; color: var(--parchment); letter-spacing:-.01em; }
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .line span{ display:inline-block; will-change: transform; }
.hero-sub{ margin-top:26px; max-width: 46ch; font-size: clamp(16px,1.6vw,19px); color: var(--parchment-dim); }
.hero-scroll{
  position:absolute; right: var(--gutter); bottom: 40px; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family: var(--f-mono); font-size:10px; letter-spacing:.2em; color: var(--mist); text-transform:uppercase;
}
.hero-scroll .wire{ width:1px; height:52px; background: var(--line-strong); position:relative; overflow:hidden; }
.hero-scroll .wire::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%; background: var(--amber);
  animation: wire-drop 2.4s var(--ease-cinema) infinite;
}
@keyframes wire-drop{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* --------------------------- Split statement blocks ----------------------- */
.statement{ padding: var(--section-pad) var(--gutter); }
.statement .wrap-narrow{ text-align:center; }
.statement .h-display{ font-size: clamp(28px, 4vw, 52px); line-height:1.25; }

.statement--media{ position:relative; overflow:hidden; }
.statement-media{ position:absolute; inset:0; z-index:0; }
.statement-media video, .statement-media img{ width:100%; height:100%; object-fit:cover; }
.statement-media::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(13,16,21,.50) 0%, rgba(13,16,21,.36) 45%, rgba(13,16,21,.60) 100%);
}
.statement--media .wrap-narrow{ position:relative; z-index:2; }

.contact--media{ position:relative; overflow:hidden; }
.contact-media{ position:absolute; inset:0; z-index:0; }
.contact-media video, .contact-media img{ width:100%; height:100%; object-fit:cover; }
.contact-media::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(13,16,21,.55) 0%, rgba(13,16,21,.42) 30%, rgba(13,16,21,.5) 100%);
}
.contact--media > .wrap, .contact--media > .contact-shell{ position:relative; z-index:2; }

.story-recap--media{ position:relative; overflow:hidden; }
.story-recap-media{ position:absolute; inset:0; z-index:0; }
.story-recap-media video, .story-recap-media img{ width:100%; height:100%; object-fit:cover; }
.story-recap-media::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(13,16,21,.55) 0%, rgba(13,16,21,.4) 40%, rgba(13,16,21,.6) 100%);
}
.story-recap--media > .wrap{ position:relative; z-index:2; }

.distributors--media{ position:relative; overflow:hidden; }
.distributors-media{ position:absolute; inset:0; z-index:0; }
.distributors-media img{ width:100%; height:100%; object-fit:cover; }
.distributors-media::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(13,16,21,.6) 0%, rgba(13,16,21,.45) 40%, rgba(13,16,21,.62) 100%);
}
.distributors--media > .wrap{ position:relative; z-index:2; }

.whisky--media{ position:relative; overflow:hidden; }
.whisky-media{ position:absolute; inset:0; z-index:0; }
.whisky-media img{ width:100%; height:100%; object-fit:cover; }
.whisky-media::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(13,16,21,.62) 0%, rgba(13,16,21,.5) 35%, rgba(13,16,21,.68) 100%);
}
.whisky--media > .wrap{ position:relative; z-index:2; }
/* .tasting-col has no fill of its own (by design, elsewhere it just shows
   the page's flat dark background) — over a photo it needs one, so it
   reads as a card rather than a see-through grid over a busy image. */
.whisky--media .tasting-col{ background: rgba(13,16,21,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* --------------------------- Comparison bullets ---------------------------- */
.compare-bullets{ margin-top:56px; border-top:1px solid var(--line); }
.compare-bullets li{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding: 22px 0; border-bottom:1px solid var(--line);
}
.compare-bullets .bullet-icon{ flex:none; width:16px; height:16px; color: var(--amber); }
.compare-bullets .them{
  color: var(--mist-dim); font-size: clamp(14px,1.6vw,17px);
  text-decoration: line-through; text-decoration-color: rgba(146,154,171,.35); text-decoration-thickness:1px;
}
.compare-bullets .us{
  color: var(--amber-bright); font-family: var(--f-display); font-weight:400;
  font-size: clamp(18px,2.2vw,24px);
}

/* --------------------------- Pinned story sequence ------------------------ */
.story-pin{ position:relative; height: 600vh; }
.story-stage{ position: sticky; top:0; height:100vh; height:100dvh; overflow:hidden; }
.story-panel{
  position:absolute; inset:0; opacity:0; display:flex; align-items:flex-end;
}
.story-panel .panel-media{ position:absolute; inset:0; }
.story-panel .panel-media img, .story-panel .panel-media .swatch{ width:100%; height:100%; object-fit:cover; }
.story-panel .panel-media::after{ content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(13,16,21,.65) 6%, rgba(13,16,21,.12) 46%, rgba(13,16,21,.35) 100%); }
.story-panel .panel-body{ position:relative; z-index:2; padding: 0 var(--gutter) 90px; max-width:1360px; margin:0 auto; width:100%; }
.story-panel .step-count{ font-family: var(--f-mono); font-size:12px; color: var(--amber); letter-spacing:.2em; margin-bottom:18px; }
.story-panel h3{ font-family: var(--f-display); font-size: clamp(30px,5vw,64px); color: var(--parchment); max-width:14ch; }
.story-panel p{ margin-top:16px; max-width:44ch; color: var(--parchment-dim); font-size:16px; }
.story-progress{ position:absolute; left: var(--gutter); top: 40px; z-index:3; display:flex; gap:8px; }
.story-progress i{ width:34px; height:2px; background: var(--line-strong); display:block; position:relative; overflow:hidden; }
.story-progress i em{ position:absolute; inset:0; background: var(--amber); transform-origin:left; transform: scaleX(0); }

/* --------------------------- Story plate swatches --------------------------
   Placeholder cinematic "plates" for journey steps not yet covered by real
   production photography — replace with Higgsfield-produced stills/video
   per the production pipeline noted in README.md. */
.swatch{ position:relative; background: var(--ink); overflow:hidden; }
.swatch::before{
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 3px 3px; opacity:.4;
}
.swatch--still{ background: radial-gradient(120% 90% at 30% 20%, #4a3018 0%, #24170c 45%, #0d1015 100%); }
.swatch--still::after{ content:'STILL'; position:absolute; right:6%; bottom:6%; font-family:var(--f-display); font-size:16vw; color:rgba(204,148,72,.08); letter-spacing:-.02em; line-height:1; }
.swatch--blend{ background: radial-gradient(120% 90% at 70% 30%, #5c3a1c 0%, #241608 45%, #0d1015 100%); }
.swatch--blend::after{ content:'BLEND'; position:absolute; left:6%; bottom:6%; font-family:var(--f-display); font-size:15vw; color:rgba(204,148,72,.08); letter-spacing:-.02em; line-height:1; }
.swatch--bottle{ background: radial-gradient(120% 90% at 50% 15%, #402315 0%, #1b120c 45%, #0d1015 100%); }
.swatch--bottle::after{ content:'BOTTLE'; position:absolute; right:6%; bottom:6%; font-family:var(--f-display); font-size:13vw; color:rgba(204,148,72,.08); letter-spacing:-.02em; line-height:1; }

/* -------------------------------- Stat band -------------------------------- */
.stat-band{ display:grid; grid-template-columns: repeat(5,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat{ padding: 44px 20px; text-align:center; border-left:1px solid var(--line); }
.stat:first-child{ border-left:none; }
.stat .num{ font-family: var(--f-display); font-size: clamp(30px,3.4vw,52px); color: var(--amber-bright); }
.stat .label{ margin-top:10px; font-family: var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--mist); }
@media (max-width: 900px){ .stat-band{ grid-template-columns: repeat(2,1fr);} .stat:nth-child(3){ border-left:none; } .stat{ border-bottom:1px solid var(--line);} }

/* -------------------------------- World map -------------------------------- */
.map-wrap{ position:relative; margin-top:60px; border:1px solid var(--line); background: var(--ink-soft); padding: clamp(20px,4vw,50px); }
.map-svg{ width:100%; height:auto; }
.map-wrap--compact{ margin-top:0; padding: 20px; max-width:460px; }
.map-wrap--compact .map-legend{ margin-top:16px; gap:16px; }
.map-wrap--compact .map-legend .item{ font-size:10.5px; }
@media (max-width: 860px){ .map-wrap--compact{ max-width:none; } }
.map-svg .landmass{ fill: var(--ink-elevated); }
.map-dot{ cursor:pointer; }
.map-dot circle.core{ fill: var(--amber); }
.map-dot circle.pulse{ fill:none; stroke: var(--amber); stroke-width:1.4; opacity:.7; transform-origin:center; animation: map-pulse 2.6s ease-out infinite; }
.map-dot.ghost circle.core{ fill: var(--mist-dim); }
.map-dot.ghost circle.pulse{ stroke: var(--mist-dim); animation-duration:3.4s; }
.map-dot.origin circle.core{ fill: var(--copper); }
.map-dot.origin circle.pulse{ stroke: var(--copper); }
.map-dot.distribution circle.core{ fill: var(--burgundy-bright); }
.map-dot.distribution circle.pulse{ stroke: var(--burgundy-bright); }
@keyframes map-pulse{ 0%{ r:4; opacity:.8; } 100%{ r:22; opacity:0; } }
.map-legend{ display:flex; gap:28px; margin-top:30px; flex-wrap:wrap; }
.map-legend .item{ display:flex; align-items:center; gap:10px; font-family: var(--f-mono); font-size:12px; letter-spacing:.06em; color: var(--mist); }
.map-legend .swatch{ width:10px; height:10px; border-radius:50%; background: var(--amber); }
.map-legend .swatch.ghost{ background:none; border:1px solid var(--mist-dim); }
.map-legend .swatch.origin{ background: var(--copper); }
.map-legend .swatch.distribution{ background: var(--burgundy-bright); }
.map-tooltip{
  position:absolute; pointer-events:none; z-index:5;
  background: var(--ink); border:1px solid var(--line-strong); padding: 10px 14px;
  font-family: var(--f-mono); font-size:11px; color: var(--parchment); white-space:nowrap;
  transform: translate(-50%,-130%); opacity:0; transition: opacity .25s ease; box-shadow: var(--shadow-deep);
}
.map-tooltip.is-visible{ opacity:1; }
.map-tooltip .status{ color: var(--amber); }

/* -------------------------------- Footer ---------------------------------- */
.site-footer{ background: var(--ink); border-top:1px solid var(--line); padding: 80px var(--gutter) 32px; }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 60px; border-bottom:1px solid var(--line); }
.footer-brand img{ height:40px; margin-bottom:18px; }
.footer-brand p{ color: var(--mist); font-size:14px; max-width:32ch; line-height:1.7; }
.footer-col h4{ font-family: var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color: var(--mist-dim); margin-bottom:20px; }
.footer-col a, .footer-col span{ display:block; color: var(--parchment-dim); font-size:14.5px; margin-bottom:12px; transition: color .3s ease; }
.footer-col a:hover{ color: var(--amber-bright); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; flex-wrap:wrap; gap:16px; }
.footer-bottom p{ color: var(--mist-dim); font-size:12.5px; }
.footer-social{ display:flex; gap:18px; }
.footer-social a{ width:34px; height:34px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.footer-social svg{ width:14px; height:14px; color: var(--mist); }
.footer-social a:hover{ border-color: var(--amber); }
.footer-social a:hover svg{ color: var(--amber); }
.age-gate-note{ font-family: var(--f-mono); font-size:11px; color: var(--mist-dim); letter-spacing:.05em; }
@media (max-width: 980px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } }

/* -------------------------------- Utilities -------------------------------- */
.reveal{ opacity:0; transform: translateY(34px); }
.tag-pill{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px;
  border:1px solid var(--line-strong); border-radius:100px;
  font-family: var(--f-mono); font-size:11px; letter-spacing:.08em; color: var(--parchment-dim);
}
.divider{ height:1px; background: var(--line); width:100%; }
.badge-corner{ position:absolute; top:28px; left:var(--gutter); z-index:2; }

/* --------------------------- Age verification gate ------------------------- */
.age-gate{
  position: fixed; inset:0; z-index: 900;
  background: var(--ink);
  display:flex; align-items:center; justify-content:center;
  padding: var(--gutter);
  touch-action: none;
}
.age-gate-box{ max-width: 440px; text-align:center; }
.age-gate-box img{ height:44px; margin: 0 auto 30px; }
.age-gate-box h2{ font-family: var(--f-display); font-size: clamp(24px,3vw,32px); color: var(--parchment); }
.age-gate-box p{ margin-top:14px; color: var(--mist); font-size:14.5px; }
.age-gate-actions{ display:flex; gap:14px; justify-content:center; margin-top:32px; }
.age-gate-legal{ margin-top:26px; font-family: var(--f-mono); font-size:10.5px; color: var(--mist-dim); letter-spacing:.04em; }
.age-gate-denied{ display:none; }
.age-gate-denied.is-active{ display:block; }

.age-gate-dob{ margin-top:26px; }
.age-gate-fields{ display:flex; gap:12px; justify-content:center; }
.age-gate-field{ flex:1; max-width:130px; text-align:left; }
.age-gate-field label{
  display:block; font-family: var(--f-mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color: var(--mist); margin-bottom:8px;
}
.age-gate-field select{
  width:100%; background: var(--ink-soft); border:1px solid var(--line-strong); color: var(--parchment);
  padding: 13px 12px; font-family: var(--f-body); font-size:14.5px; border-radius:2px;
  transition: border-color .3s ease, background .3s ease;
}
.age-gate-field select:invalid{ color: var(--mist); }
.age-gate-field select:focus{ outline:none; border-color: var(--amber); background: var(--ink-elevated); }
.age-gate-error{
  margin-top:16px; color: var(--burgundy-bright); font-size:13px; font-family: var(--f-body);
}

/* ------------------------- Single-page anchor targets ---------------------
   Offsets so a fixed-nav anchor jump doesn't tuck content under the header. */
#why-choose-us, #whisky, #story, #distributors, #markets, #news, #contact{ scroll-margin-top: 88px; }

.subhero--chapter{ min-height: 56vh; min-height: 56dvh; }
.chapter-index{ font-family: var(--f-mono); font-size:12px; letter-spacing:.22em; color: var(--amber-bright); text-transform:uppercase; margin-bottom:22px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* Responsive nav collapse */
@media (max-width: 980px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-burger{ display:block; }
}