/* =========================================================================
   Nightlyfe — site v2 components (loaded after styles.css)
   New blocks: liquid-glass buttons, sticky app CTA, QR/download, marker
   highlight, container-scroll, macbook-scroll dashboard, typewriter,
   in-works ribbon, FAQ, Philly map, big footer, + two hero variants.
   Inherits every token from styles.css. One palette, 8pt grid, one elevation.
   ========================================================================= */

/* keep the persistent CTA from hiding page-bottom content */
body { padding-bottom: 0; }

/* ---------------------------------------------------------------------------
   LIQUID GLASS BUTTON  (approximation — Apple Liquid Glass is platform-only;
   this is backdrop-filter + layered borders + a moving sheen, per taste-skill)
--------------------------------------------------------------------------- */
.btn-glass {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--display); font-weight: 600; font-size: 15px;
  padding: 13px 24px; border-radius: var(--r-pill); cursor: pointer;
  color: var(--ink);
  background: rgba(31, 182, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22),
              inset 0 -1px 0 rgba(0,0,0,0.25),
              0 8px 24px -10px rgba(0,0,0,0.6);
  transition: transform .3s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.btn-glass::before { /* travelling specular sheen */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.35) 48%, transparent 62%);
  transform: translateX(-120%); transition: transform .6s var(--ease);
}
.btn-glass:hover { transform: translateY(-2px); border-color: rgba(31,182,255,0.6); background: rgba(31,182,255,0.16); }
.btn-glass:hover::before { transform: translateX(120%); }
.btn-glass:active { transform: scale(0.98); }
.btn-glass .ico { width: 18px; height: 18px; }
@media (prefers-reduced-transparency: reduce) {
  .btn-glass { background: var(--card-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) { .btn-glass::before { display: none; } }

/* ---------------------------------------------------------------------------
   STICKY "GET THE APP" — pinned bottom-center, follows the whole scroll
--------------------------------------------------------------------------- */
.app-dock {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: var(--s3);
  padding: 8px 8px 8px 18px; border-radius: var(--r-pill);
  background: rgba(14,20,27,0.72);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 18px 48px -16px rgba(0,0,0,0.7);
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.app-dock .label { font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--ink); }
.app-dock .dock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(31,182,255,.6); animation: dock-pulse 2.2s var(--ease) infinite; }
@keyframes dock-pulse { 0%{box-shadow:0 0 0 0 rgba(31,182,255,.5)} 70%{box-shadow:0 0 0 9px rgba(31,182,255,0)} 100%{box-shadow:0 0 0 0 rgba(31,182,255,0)} }
.app-dock.hide { transform: translateX(-50%) translateY(140%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .app-dock .dock-dot { animation: none; } }
@media (max-width: 520px) { .app-dock .label { display: none; } .app-dock { padding: 8px; } }

/* ---------------------------------------------------------------------------
   DOWNLOAD MODAL — App Store badge + live QR (signifies it is a phone app)
--------------------------------------------------------------------------- */
.dl-backdrop {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(5,9,13,0.72); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease);
}
.dl-backdrop.open { opacity: 1; pointer-events: auto; }
.dl-card {
  width: min(440px, 92vw); background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-xl); padding: var(--s8); text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  transform: translateY(12px) scale(.98); transition: transform .3s var(--ease);
}
.dl-backdrop.open .dl-card { transform: none; }
.dl-card h3 { font-size: 24px; }
.dl-card p { margin-top: var(--s2); color: var(--ink-2); font-size: 15px; }
.dl-qr { width: 168px; height: 168px; margin: var(--s6) auto 0; padding: 12px; background: #fff; border-radius: var(--r-md); }
.dl-qr img { width: 100%; height: 100%; }
.dl-badges { display: flex; gap: var(--s3); justify-content: center; margin-top: var(--s6); flex-wrap: wrap; }
.store-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--card);
  color: var(--ink); transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.store-badge:hover { border-color: var(--accent); transform: translateY(-2px); }
.store-badge small { display: block; font-size: 10px; color: var(--ink-3); line-height: 1; }
.store-badge b { font-family: var(--display); font-size: 15px; line-height: 1.2; }
.dl-close { position: absolute; top: 14px; right: 16px; color: var(--ink-3); font-size: 22px; background: none; border: none; cursor: pointer; }
.dl-card { position: relative; }

/* QR strip near footer */
.qr-strip { display: grid; grid-template-columns: auto 1fr; gap: var(--s8); align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s8); }
.qr-strip .qr { width: 132px; height: 132px; padding: 10px; background: #fff; border-radius: var(--r-md); flex: none; }
.qr-strip .qr img { width: 100%; height: 100%; }
.qr-strip h3 { font-size: clamp(22px, 3vw, 30px); }
.qr-strip p { margin-top: var(--s2); }
@media (max-width: 640px) { .qr-strip { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* ---------------------------------------------------------------------------
   MARKER HIGHLIGHT — highlighter sweep behind "Made for bar managers"
--------------------------------------------------------------------------- */
.marker { position: relative; white-space: nowrap; padding: 0 4px; color: var(--ink); }
.marker::before {
  content: ''; position: absolute; left: -2px; right: -2px; bottom: 2px; top: 8%;
  background: var(--accent); opacity: .22; border-radius: 4px;
  transform: scaleX(0); transform-origin: left center; z-index: -1;
  transition: transform .7s var(--ease);
}
.marker.lit::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .marker::before { transform: scaleX(1); } }

/* ---------------------------------------------------------------------------
   CONTAINER SCROLL — perspective tilt that flattens as it enters view
   (aceternity container-scroll, recreated with a JS-driven --p var)
--------------------------------------------------------------------------- */
.cscroll { perspective: 1200px; margin-top: var(--s8); }
.cscroll-card {
  transform-style: preserve-3d;
  transform: rotateX(calc((1 - var(--p, 0)) * 26deg)) scale(calc(0.9 + var(--p, 0) * 0.1));
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.8);
  border: 1px solid var(--line-2); border-radius: var(--r-xl); overflow: hidden;
  background: var(--surface); will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .cscroll-card { transform: none; } }

/* ---------------------------------------------------------------------------
   MACBOOK SCROLL — laptop frame; lid screen scales up on scroll-in,
   shows the bar dashboard. Recreated from aceternity macbook-scroll.
--------------------------------------------------------------------------- */
.mac { max-width: 880px; margin: 0 auto; perspective: 1000px; }
.mac-lid {
  position: relative; margin: 0 auto; width: 100%; aspect-ratio: 16/10;
  background: #0a0f14; border: 2px solid #20303c; border-radius: 18px 18px 4px 4px;
  padding: 12px; transform: scale(calc(0.62 + var(--p, 0) * 0.38)); transform-origin: center bottom;
  box-shadow: 0 30px 70px -28px rgba(0,0,0,.85); will-change: transform;
}
.mac-cam { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: #1b2730; }
.mac-screen { width: 100%; height: 100%; border-radius: 8px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.mac-base { position: relative; width: 112%; margin: -2px 0 0 -6%; height: 22px;
  background: linear-gradient(#2a3a46, #16222c); border-radius: 0 0 14px 14px; box-shadow: 0 18px 30px -18px rgba(0,0,0,.8); }
.mac-base::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 16%; height: 7px; background: #0c151c; border-radius: 0 0 8px 8px; }
@media (prefers-reduced-motion: reduce) { .mac-lid { transform: scale(1); } }

/* dashboard rendered inside the mac screen */
.dboard { display: grid; grid-template-columns: 168px 1fr; height: 100%; font-size: 12px; }
.dboard .side { background: var(--surface); border-right: 1px solid var(--line); padding: 14px 12px; }
.dboard .side .b { display:flex; align-items:center; gap:8px; font-family:var(--display); font-weight:700; color:var(--ink); margin-bottom:14px; }
.dboard .side .b i { width:18px;height:18px;border-radius:6px;background:var(--card-2);display:grid;place-items:center; }
.dboard .nav-i { padding:8px 10px; border-radius:8px; color:var(--ink-2); margin-bottom:4px; }
.dboard .nav-i.on { background: var(--accent-soft); color: var(--accent); }
.dboard .main { padding: 16px; overflow:hidden; }
.dboard .row { display:flex; gap:10px; }
.dboard .kc { flex:1; border:1px solid var(--line); border-radius:10px; padding:12px; background:var(--card); }
.dboard .kc .v { font-family:var(--display); font-weight:700; font-size:22px; color:var(--ink); }
.dboard .kc .l { color:var(--ink-3); margin-top:2px; }
.dboard .kc .up { color: var(--chill); }
.dboard .chart { margin-top:12px; border:1px solid var(--line); border-radius:10px; padding:12px; background:var(--card); }
.dboard .bars { display:flex; align-items:flex-end; gap:6px; height:88px; margin-top:10px; }
.dboard .bars i { flex:1; background: linear-gradient(var(--accent), rgba(31,182,255,.25)); border-radius:3px 3px 0 0; }

/* ---------------------------------------------------------------------------
   TYPEWRITER
--------------------------------------------------------------------------- */
.tw-wrap { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; }
.tw { color: var(--accent); }
.tw-caret { display: inline-block; width: 3px; margin-left: 2px; background: var(--accent);
  animation: tw-blink 1s steps(1) infinite; vertical-align: -0.12em; }
@keyframes tw-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tw-caret { animation: none; } }

/* ---------------------------------------------------------------------------
   IN-THE-WORKS RIBBON — diagonal scrolling banner over the game-day card
--------------------------------------------------------------------------- */
.ribbon-host { position: relative; overflow: hidden; }
.ribbon {
  position: absolute; top: 26px; right: -64px; z-index: 2;
  width: 260px; transform: rotate(38deg);
  background: var(--accent); color: var(--accent-ink);
  overflow: hidden; white-space: nowrap;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.6);
  border-top: 1px solid rgba(255,255,255,.4); border-bottom: 1px solid rgba(0,0,0,.2);
}
.ribbon-track { display: inline-flex; padding: 7px 0; animation: ribbon 9s linear infinite; }
.ribbon-track span { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; padding: 0 14px; }
@keyframes ribbon { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ribbon-track { animation: none; } }
/* dim the feature it covers to read as "not live yet" */
.is-wip { position: relative; }
.is-wip .wip-veil { position:absolute; inset:0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px); border-radius: inherit; pointer-events:none; }

/* ---------------------------------------------------------------------------
   FAQ — accordion, 3 items
--------------------------------------------------------------------------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  background: none; border: none; cursor: pointer; text-align: left; color: var(--ink);
  font-family: var(--display); font-weight: 600; font-size: clamp(17px, 2.4vw, 20px); padding: var(--s6) 0; }
.faq-q .pm { flex: none; width: 28px; height: 28px; position: relative; }
.faq-q .pm::before, .faq-q .pm::after { content:''; position:absolute; top:50%; left:50%; width:13px; height:2px;
  background: var(--accent); transform: translate(-50%,-50%); transition: transform .3s var(--ease); border-radius: 2px; }
.faq-q .pm::after { transform: translate(-50%,-50%) rotate(90deg); }
.faq-item.open .pm::after { transform: translate(-50%,-50%) rotate(0); }
/* height animation via grid-template-rows (no layout-property thrash) */
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > .faq-inner { overflow: hidden; }
.faq-a p { padding: 0 0 var(--s6); color: var(--ink-2); max-width: 65ch; }
@media (prefers-reduced-motion: reduce) { .faq-a { transition: none; } }

/* ---------------------------------------------------------------------------
   PHILLY MAP — partnered bars in accent, the rest neutral
--------------------------------------------------------------------------- */
.map-wrap { position: relative; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
  background: radial-gradient(120% 90% at 60% 10%, #16232e, var(--bg)); }
.map-wrap svg { width: 100%; height: auto; display: block; }
.map-legend { display: flex; gap: var(--s6); flex-wrap: wrap; margin-top: var(--s4); }
.map-legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.map-legend i { width: 12px; height: 12px; border-radius: 50%; }
.mk { transition: r .3s var(--ease); }
.mk-partner { fill: var(--accent); }
.mk-partner.glow { filter: drop-shadow(0 0 6px rgba(31,182,255,.9)); }
.mk-reg { fill: #44535f; }
.map-pop { fill: var(--ink); font-family: var(--body); font-size: 11px; font-weight: 600; }

/* ---------------------------------------------------------------------------
   BIG FOOTER  (aceternity-style: brand column + link columns + meta)
--------------------------------------------------------------------------- */
.bigfoot { border-top: 1px solid var(--line); background: var(--surface); padding: var(--s16) 0 var(--s8); margin-top: var(--s12); }
.bigfoot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s8); }
.bigfoot .lede { max-width: 32ch; margin-top: var(--s4); color: var(--ink-2); }
.bigfoot .socials { display: flex; gap: var(--s2); margin-top: var(--s6); }
.bigfoot .socials a { width: 40px; height: 40px; border-radius: var(--r-md); border: 1px solid var(--line-2);
  display: grid; place-items: center; color: var(--ink-2); transition: border-color .2s var(--ease), color .2s var(--ease); }
.bigfoot .socials a:hover { border-color: var(--accent); color: var(--accent); }
.bigfoot h5 { color: var(--ink); font-size: 14px; margin-bottom: var(--s4); }
.bigfoot a.fl { display: block; color: var(--ink-3); font-size: 14px; padding: 6px 0; transition: color .2s var(--ease); }
.bigfoot a.fl:hover { color: var(--ink); }
.bigfoot .meta { margin-top: var(--s12); padding-top: var(--s6); border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.bigfoot .wordmark { font-family: var(--display); font-weight: 700; font-size: clamp(48px, 12vw, 140px);
  letter-spacing: -0.04em; line-height: .9; color: transparent; -webkit-text-stroke: 1px var(--line-2);
  margin-top: var(--s12); user-select: none; }
@media (max-width: 860px) { .bigfoot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .bigfoot-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   HERO VARIANT A — BEFORE / AFTER  (dead bar → packed bar, scroll-reactive)
   Placeholder colours stand in for the AI before/after photos.
   ========================================================================= */
.hero-ba { position: relative; height: 100svh; min-height: 620px; overflow: hidden; border-bottom: 1px solid var(--line);
  display: grid; place-items: center; }
.ba-layer { position: absolute; inset: 0; display: grid; place-items: center; }
/* BEFORE: dead, grey, sparse */
.ba-before { background:
    linear-gradient(rgba(7,11,15,.66), rgba(7,11,15,.78)),
    url('bar-before.jpg') center/cover no-repeat;
}
/* AFTER: packed, alive (clipped to reveal amount) */
.ba-after { clip-path: inset(0 0 calc(100% * (1 - var(--reveal, 0))) 0);
  background:
    linear-gradient(rgba(7,11,15,.42), rgba(7,11,15,.6)),
    url('bar-after.jpg') center/cover no-repeat;
}
.ba-dots { display: none; }
.ba-dots i { position: absolute; width: 10px; height: 10px; border-radius: 50%; }
/* divider line at the reveal seam */
.ba-seam { position: absolute; left: 0; right: 0; top: calc(100% * var(--reveal, 0)); height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); z-index: 4;
  display: flex; justify-content: center; }
.ba-seam b { transform: translateY(-50%); background: var(--accent); color: var(--accent-ink);
  font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: var(--r-pill); white-space: nowrap; }
.ba-copy { position: relative; z-index: 5; text-align: center; max-width: 760px; padding: 0 var(--s6); }
.ba-copy .eyebrow { justify-content: center; }
.ba-copy h1 { font-size: clamp(38px, 6.4vw, 76px); line-height: 1.02; letter-spacing: -0.03em; color: var(--ink); }
.ba-copy h1 em { font-style: normal; color: var(--accent); }
.ba-copy p { margin: var(--s4) auto 0; font-size: clamp(16px, 2vw, 20px); color: var(--ink); max-width: 52ch; }
.ba-tags { display: flex; gap: var(--s3); justify-content: center; margin-top: var(--s2); flex-wrap: wrap; }
.ba-tag { font-family: var(--display); font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: var(--r-pill); }
.ba-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 5;
  font-size: 12px; color: var(--ink-2); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.ba-cue svg { margin: 6px auto 0; animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
@media (prefers-reduced-motion: reduce){ .ba-cue svg{ animation:none } }

/* =========================================================================
   HERO VARIANT B — ROTATING BEER MUG  (scroll rotates it, features pop in)
   CSS-built mug (no WebGL); rotateY driven by scroll progress.
   ========================================================================= */
.hero-beer { position: relative; height: 100svh; min-height: 640px; overflow: hidden; border-bottom: 1px solid var(--line);
  display: grid; place-items: center;
  background: radial-gradient(70% 60% at 50% 38%, #18242f, var(--bg)); }
.beer-stage { position: relative; width: min(420px, 78vw); aspect-ratio: 3/4; transform-style: preserve-3d;
  perspective: 900px; display: grid; place-items: center; }
.mug { position: relative; width: 200px; height: 260px; transform-style: preserve-3d;
  transform: rotateY(calc(var(--rot, 0) * 1deg)); will-change: transform; }
.mug-body { position: absolute; inset: 0; border-radius: 18px 18px 26px 26px;
  background: linear-gradient(100deg, #e7a13a 0%, #f4c563 38%, #b9791f 72%, #8a5712 100%);
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: inset -18px 0 30px rgba(0,0,0,.35), inset 18px 0 26px rgba(255,255,255,.25); overflow: hidden; }
.mug-body::after { content:''; position:absolute; top:14%; left:18%; width:18px; height:64%; border-radius:999px;
  background: rgba(255,255,255,.35); filter: blur(2px); } /* glass highlight */
.mug-foam { position: absolute; top: -22px; left: -6px; right: -6px; height: 56px; border-radius: 999px;
  background: radial-gradient(circle at 30% 40%, #fff, #e9eef2 70%); box-shadow: 0 6px 12px rgba(0,0,0,.3);
  z-index: 3; }
.mug-foam::before, .mug-foam::after { content:''; position:absolute; border-radius:50%; background:#f3f6f8; }
.mug-foam::before { width:42px; height:42px; top:-14px; left:24px; }
.mug-foam::after { width:54px; height:54px; top:-20px; right:30px; }
.mug-drop { position:absolute; right:-2px; top:34px; width:14px; height:20px; border-radius:0 0 50% 50%/0 0 60% 60%;
  background:#f3c463; z-index:4; box-shadow: inset 2px -2px 4px rgba(0,0,0,.3); }
.mug-handle { position:absolute; right:-44px; top:60px; width:54px; height:120px; border:16px solid transparent;
  border-right-color:#d39a39; border-top-color:#d39a39; border-bottom-color:#d39a39; border-radius:0 60px 60px 0;
  transform: translateZ(-2px); }
.beer-fizz i { position:absolute; bottom:30px; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.7);
  animation: fizz 2.6s linear infinite; }
@keyframes fizz { 0%{transform:translateY(0);opacity:0} 20%{opacity:.9} 100%{transform:translateY(-150px);opacity:0} }
@media (prefers-reduced-motion: reduce){ .beer-fizz i{animation:none; display:none} }

/* floating feature labels that pop as the mug turns */
.beer-feat { position: absolute; z-index: 6; max-width: 200px;
  background: rgba(14,20,27,0.7); border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-md); padding: 12px 14px;
  opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.beer-feat.show { opacity: 1; transform: none; }
.beer-feat h4 { font-size: 15px; color: var(--ink); }
.beer-feat p { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.beer-feat .k { font-family: var(--display); font-weight: 700; color: var(--accent); font-size: 12px; letter-spacing: .04em; }
.bf-1 { top: 12%; left: 4%; } .bf-2 { top: 30%; right: 4%; }
.bf-3 { bottom: 24%; left: 2%; } .bf-4 { bottom: 14%; right: 6%; }
.beer-copy { position: absolute; top: var(--s12); left: 0; right: 0; text-align: center; z-index: 6; padding: 0 var(--s6); }
.beer-copy h1 { font-size: clamp(34px, 5.6vw, 64px); line-height: 1.04; letter-spacing: -0.03em; color: var(--ink); }
.beer-copy h1 em { font-style: normal; color: var(--accent); }
.beer-copy p { margin: var(--s3) auto 0; max-width: 46ch; color: var(--ink); font-size: clamp(15px,2vw,19px); }
.beer-cue { position:absolute; bottom: 24px; left:50%; transform:translateX(-50%); z-index:6;
  font-size:12px; color:var(--ink-2); letter-spacing:.1em; text-transform:uppercase; }
@media (max-width: 720px){ .beer-feat { position: static; display:none; } .beer-copy { position: static; padding-top: var(--s16); } .hero-beer{ display:block; } .beer-stage{ margin: var(--s8) auto; } }