/* ==========================================================
   MUR MUR RUM — murmurrum.com rebuild
   Fonts: Arimo (body/nav) · Oswald (headings)

   BRAND: PANTONE 2975 C = #96D4E9 (sampled from the official logo).
   2975 is a pale tint: on white it only reaches 1.6:1 contrast, which is
   unreadable for text. So it is used for the logo, map pins, fills and for
   text on DARK surfaces; small text/links on white use #207998 — the same
   hue darkened to 4.9:1. Anything sitting ON 2975 uses dark ink #0D1B21.
   ========================================================== */
:root{
  --mm-blue:#96D4E9;   /* Pantone 2975 C — logo, pins, fills, text on dark */
  --mm-deep:#207998;   /* same hue darkened — links/text on white          */
  --mm-ink:#0D1B21;    /* text that sits on top of Pantone 2975            */
}

*{margin:0;padding:0;box-sizing:border-box;}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:'Arimo',Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.5;color:#000;background:#fff;
  overflow-x:clip;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}

/* ---------- Header (transparent, overlays hero) ---------- */
.site-header{
  position:absolute;top:0;left:0;right:0;z-index:100;
  padding:9px 32px 0;
}
.header-inner{display:flex;align-items:flex-end;gap:33px;}
.header-logo img{width:169px;height:auto;} /* 25% smaller than the Squarespace original (225px) */
.site-nav{
  display:flex;gap:16px;align-items:center;
  padding-bottom:72px; /* aligns links with lower third of logo */
}
.site-nav a{
  font-family:'Arimo',sans-serif;font-size:16px;color:#207998;/* white page */
  padding:2px 4px;white-space:nowrap;
}
.site-nav a:hover{opacity:.75;}
.site-nav a.active{text-decoration:underline;text-underline-offset:5px;}
.header-right{
  margin-left:auto;display:flex;align-items:center;gap:22px;
  padding-bottom:72px;
}
.header-right a{font-size:16px;color:#207998;}
.header-right .icon-instagram svg{width:22px;height:22px;display:block;fill:#207998;}

/* on the photo pages the header sits on dark imagery: use the true brand tint */
.theme-dark .site-nav a,
.theme-dark .header-right a{color:#96D4E9;}
.theme-dark .site-nav a.active{text-decoration-color:#96D4E9;}
.theme-dark .header-right .login{color:#e3d7de;}
.theme-dark .burger span{background:#96D4E9;}

/* mobile burger */
.burger{display:none;background:none;border:0;cursor:pointer;margin-left:auto;padding:10px;}
.burger span{display:block;width:26px;height:2px;background:#207998;margin:6px 0;}
.mobile-menu{
  display:none;position:fixed;inset:0;background:#fff;z-index:200;
  padding:100px 32px;flex-direction:column;gap:26px;text-align:left;
}
.mobile-menu a{font-size:26px;color:#207998;font-family:'Oswald',sans-serif;font-weight:300;}
.mobile-menu .close-menu{position:absolute;top:24px;right:28px;font-size:34px;color:#207998;background:none;border:0;cursor:pointer;}
body.menu-open .mobile-menu{display:flex;}

@media(max-width:960px){
  .site-nav,.header-right{display:none;}
  .burger{display:block;}
  .site-header{padding:9px 18px 0;}
  .header-inner{align-items:center;}
  .header-logo img{width:105px;}
}

/* ---------- Full-bleed photo sections ---------- */
.photo-section{
  position:relative;width:100%;
  background-size:cover;background-position:center;
  display:flex;align-items:center;
}
.photo-section .content{position:relative;z-index:2;width:100%;}

/* ABOUT
   The bottle sits right-of-center in the source photo, so a left-to-right
   scrim keeps the copy legible without ever masking the bottle. Text width
   is capped well short of the bottle at every breakpoint tested. */
.about-section{min-height:100vh;background-color:#000;scroll-margin-top:96px;overflow:hidden;}
.about-bg-layer{--bg-img:url('../assets/about-bg.webp?v=2');background-position:center;}
.about-section::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(0,0,0,.82) 0%, rgba(0,0,0,.66) 26%, rgba(0,0,0,.32) 42%, rgba(0,0,0,0) 56%);
}
.about-content{
  max-width:440px;margin-left:6.3%;padding:220px 0 80px;
  text-align:left;color:#fff;
}
.about-content p{
  font-size:15px;line-height:1.65;white-space:pre-wrap;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.about-buy{margin-top:34px;display:flex;justify-content:flex-start;}
@media(max-width:960px){
  /* stack fully: a solid dark panel under the text, bottle cropped to the
     lower portion of the frame so it never sits behind the copy */
  .about-section::before{
    /* extended further and less agnostic to exact copy length than a tight
       percentage taper — the scroller adds a tag-label above the paragraph,
       which pushed the last few lines past where a tighter taper protected */
    background:linear-gradient(180deg,
      rgba(0,0,0,.94) 0%, rgba(0,0,0,.9) 65%, rgba(0,0,0,.5) 82%, rgba(0,0,0,0) 96%);
  }
  .about-content{margin:0 auto;max-width:440px;padding:150px 26px 60px;text-align:center;}
  .about-buy{justify-content:center;}
}

/* WHERE — store locator (dark page) */
.where-section{min-height:100vh;background:#000;padding:230px 32px 90px;}
.where-inner{max-width:1180px;margin:0 auto;}
.where-title{
  font-family:'Oswald',sans-serif;font-weight:200;font-size:34px;
  color:#fff;margin-bottom:8px;
}
.where-sub{font-size:15px;color:#a9b6bd;margin-bottom:26px;}

/* --- locator controls (dark) --- */
.loc-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.loc-search{
  flex:1 1 320px;min-width:0;height:48px;padding:0 16px;font:400 15px 'Arimo',sans-serif;
  border:1px solid #2a2e30;border-radius:6px;outline:none;color:#fff;background:#141618;
}
.loc-search::placeholder{color:#7a8489;}
.loc-search:focus{border-color:var(--mm-blue);}
.loc-btn{
  /* Pantone 2975 fill with dark ink — white on 2975 is only 1.6:1 */
  height:48px;padding:0 20px;border:1px solid var(--mm-blue);border-radius:6px;background:var(--mm-blue);
  color:var(--mm-ink);font:400 15px 'Arimo',sans-serif;cursor:pointer;white-space:nowrap;
}
.loc-btn:hover{filter:brightness(1.06);}
.loc-btn[disabled]{opacity:.6;cursor:default;}
.loc-select{
  height:48px;padding:0 12px;border:1px solid #2a2e30;border-radius:6px;background:#141618;
  font:400 15px 'Arimo',sans-serif;color:#fff;cursor:pointer;outline:none;
}
.loc-select:focus{border-color:var(--mm-blue);}
.loc-meta{font-size:13.5px;color:#8b969b;margin-bottom:22px;min-height:20px;}
.loc-meta b{color:var(--mm-blue);font-weight:700;}

/* --- map (Leaflet + free CARTO dark tiles, real street-level zoom) --- */
.mm-map-wrap{
  position:relative;margin-bottom:26px;border:1px solid #1e2224;border-radius:10px;
  overflow:hidden;background:#000;height:clamp(340px,46vh,520px);
}
.mm-map-wrap .leaflet-container{background:#000;font-family:'Arimo',sans-serif;}
.mm-pin-icon{cursor:pointer;}
.mm-pin-icon svg{display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));}
.mm-cluster-icon-wrap{background:transparent!important;border:none!important;}
.mm-cluster-icon{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  border-radius:50%;background:var(--mm-blue);border:2px solid #fff;
  color:var(--mm-ink);font:700 13px 'Arimo',sans-serif;cursor:pointer;
  box-shadow:0 0 0 8px rgba(150,212,233,.22);
}
/* dark-theme the Leaflet chrome (zoom buttons + attribution) to match the page */
.mm-map-wrap .leaflet-control-zoom{border:none;box-shadow:none;}
.mm-map-wrap .leaflet-control-zoom a{
  width:34px;height:34px;line-height:34px;border:1px solid #2a2e30!important;
  background:rgba(20,22,24,.92)!important;color:var(--mm-blue)!important;
}
.mm-map-wrap .leaflet-control-zoom a:hover{background:var(--mm-blue)!important;color:var(--mm-ink)!important;}
.mm-map-wrap .leaflet-control-attribution{
  background:rgba(10,10,10,.7)!important;color:#8b969b!important;font-size:10.5px;
}
.mm-map-wrap .leaflet-control-attribution a{color:#a9b3b8!important;}
/* popup, restyled to match the old .mm-pop card */
.mm-map-wrap .leaflet-popup-content-wrapper{
  background:#141618;border:1px solid #2a2e30;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.mm-map-wrap .leaflet-popup-tip{background:#141618;}
.mm-map-wrap .leaflet-popup-content{margin:14px 16px;width:auto!important;max-width:280px;}
.mm-map-wrap .leaflet-popup-content h4{font-family:'Oswald',sans-serif;font-weight:200;font-size:17px;color:#fff;margin-bottom:4px;}
.mm-map-wrap .leaflet-popup-content p{font-size:13px;color:#a9b3b8;line-height:1.45;margin-bottom:8px;}
.mm-map-wrap .leaflet-popup-content a{font-size:13px;color:var(--mm-blue);border-bottom:1px solid rgba(150,212,233,.38);margin-right:10px;}
.mm-map-wrap .leaflet-popup-close-button{color:#7a8489!important;}
.loc-card{cursor:pointer;}
.loc-card.active{border-color:var(--mm-blue);box-shadow:0 0 0 2px rgba(150,212,233,.28);}

/* --- results (dark) --- */
.loc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.loc-card{
  border:1px solid #22262a;border-radius:8px;padding:18px 20px;background:#101214;
  display:flex;flex-direction:column;gap:6px;
}
.loc-card:hover{border-color:var(--mm-blue);}
.loc-card h3{
  font-family:'Oswald',sans-serif;font-weight:200;font-size:19px;color:#fff;
  letter-spacing:.01em;line-height:1.25;
}
.loc-card .addr{font-size:14px;color:#a9b3b8;line-height:1.5;}
.loc-card .dist{
  font-size:12px;color:var(--mm-blue);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.loc-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;}
.loc-links a{font-size:13.5px;color:var(--mm-blue);border-bottom:1px solid rgba(150,212,233,.38);}
.loc-links a:hover{border-bottom-color:var(--mm-blue);}
.loc-more{display:flex;justify-content:center;margin-top:30px;}
.loc-empty{padding:50px 10px;text-align:center;color:#8b969b;font-size:15px;}

@media(max-width:960px){
  .where-section{padding:150px 18px 60px;}
  .where-title{font-size:27px;}
  .loc-grid{grid-template-columns:1fr;}
  .mm-map-wrap .leaflet-popup-content{max-width:calc(100vw - 80px);}
}

/* ---------- DRINK MENU carousel ---------- */
.drinks-section{
  min-height:100vh;background-image:url('../assets/drinks-bg.webp');
  background-color:#0a0a0a;padding:210px 0 90px;
  align-items:flex-start;
}
.carousel-wrap{position:relative;width:100%;max-width:1500px;margin:0 auto;padding:0 70px;}
.carousel-viewport{overflow:hidden;}
.carousel-track{
  display:flex;align-items:flex-start;
  transition:transform .55s ease;will-change:transform;
}
.recipe-card{
  flex:0 0 50%;padding:0 3% 40px;
}
.recipe-card-inner{
  background:#101214;border:1px solid #22262a;border-radius:14px;overflow:hidden;
  height:100%;transition:border-color .2s ease,transform .2s ease;
}
.recipe-card-inner:hover{border-color:var(--mm-blue);transform:translateY(-3px);}
.recipe-card-media{
  position:relative;aspect-ratio:4/5;background:#1a1c1f;overflow:hidden;
}
.recipe-card-media img{width:100%;height:100%;object-fit:cover;display:block;}
.recipe-card-media .no-photo{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:#3a4045;font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
}
.recipe-card-body{padding:24px 26px 30px;}
.recipe-card h2{
  font-family:'Oswald',sans-serif;font-weight:200;font-size:22px;
  margin-bottom:2px;color:#fff;
}
/* every recipe photo (real or generated) is the full branded template —
   name baked in at the top of the image itself — so the redundant text
   heading below only shows for the placeholder tile (no photo loaded yet) */
.recipe-card-inner.has-photo h2{display:none;}
.recipe-card .venue{
  font-family:'Arimo',sans-serif;font-size:13px;color:var(--mm-blue);margin:0 0 16px;
}
.recipe-card-section{margin-top:18px;}
.recipe-card-section:first-of-type{margin-top:16px;}
.recipe-card-section h3{
  font-family:'Oswald',sans-serif;font-weight:400;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mm-blue);margin-bottom:9px;
}
.recipe-card-section ul,.recipe-card-section ol{margin:0;padding-left:18px;}
.recipe-card-section li{font-size:13.8px;line-height:1.55;color:#c2cbcf;margin-bottom:6px;}
.recipe-card-section li::marker{color:#5c666b;}
.recipe-card-section p.note{font-size:13.8px;line-height:1.55;color:#9aa4a9;font-style:italic;margin:0;}
.carousel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.7);
  background:rgba(0,0,0,.25);color:#fff;font-size:19px;line-height:1;
  cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center;
}
.carousel-arrow:hover{background:rgba(0,0,0,.5);}
.carousel-arrow.prev{left:12px;}
.carousel-arrow.next{right:12px;}
.carousel-count{
  text-align:center;color:#fff;font-size:13px;margin-top:26px;
  font-family:'Arimo',sans-serif;opacity:.85;
}
@media(max-width:900px){
  .recipe-card{flex:0 0 100%;}
  .carousel-wrap{padding:0 46px;}
  .drinks-section{padding:150px 0 60px;}
}

/* ---------- AGE GATE (replica of Elfsight popup) ---------- */
html.ag-open,html.ag-open body{overflow:hidden;}
#ageGate{
  position:fixed;inset:0;z-index:2147483647;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.82);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  padding:20px;
}
.ag-card{
  width:100%;max-width:560px;background:#0d0d0f;border-radius:14px;
  padding:56px 70px 40px;text-align:center;color:#fff;
  font-family:Helvetica,Arial,sans-serif;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.ag-card .ag-logo{width:104px;margin:0 auto 18px;}
.ag-card h2{font-size:28px;font-weight:700;margin-bottom:14px;font-family:Helvetica,Arial,sans-serif;}
.ag-card .ag-sub{font-size:16px;color:#e8e8e8;margin-bottom:30px;}
.ag-fields{display:flex;justify-content:center;gap:14px;margin-bottom:34px;}
.ag-fields input{
  /* min-width:0 is required — inputs default to min-width:auto and refuse to
     shrink below their intrinsic size, which pushed the year box past the card. */
  flex:1;min-width:0;max-width:190px;width:100%;
  height:54px;text-align:center;font-size:18px;letter-spacing:.14em;color:#fff;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.4);
  border-radius:4px;outline:none;
}
.ag-field-label{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:#b9b9bf;margin-bottom:10px;
}
.ag-fields input::placeholder{color:#9a9aa0;}
.ag-fields input:focus{border-color:#96D4E9;}
.ag-err{color:#FF8A8A;font-size:13px;min-height:18px;margin:-20px 0 10px;}
.ag-enter{
  width:100%;height:50px;border:0;border-radius:4px;background:#96D4E9;
  color:#1D2129;font-size:16px;font-weight:700;cursor:pointer;
  font-family:Helvetica,Arial,sans-serif;
}
.ag-enter:hover{filter:brightness(1.05);}
.ag-legal{font-size:12px;line-height:1.5;color:#b9b9bf;margin-top:22px;}
@media(max-width:600px){
  .ag-card{padding:40px 26px 30px;}
}

/* ==========================================================
   SCROLLER (index.html) — Home/About/Cocktails-teaser/Contact
   merged into one page. Where and Drink Menu stay separate —
   both are heavy, focused tools (659-location map, 50 recipes)
   that work better as destinations than as scroll-past sections.
   ========================================================== */

/* ---------- shared image layer (hero + every full-bleed section below) ----------
   A dedicated, overscaled, absolutely-positioned layer so JS (scroll.js)
   can scale/translate the PHOTO on scroll (Ken-Burns zoom + drift)
   without touching the section's own layout box. inset:-18% gives room
   to pan/zoom into without ever exposing an edge — sized for the current
   scale range (up to 1.32x) plus drift (up to 60px); if either grows
   further, grow this margin proportionally or short sections can expose
   an edge at the scroll extremes. Individual sections set their own
   background-image + background-position below; this just supplies the
   shared mechanics. */
.bg-layer{
  position:absolute;inset:-18%;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;
  /* will-change is managed dynamically by scroll.js's updateZoom() — ON
     only for a layer currently in or near the viewport, OFF for any
     scrolled well out of view. A static rule here permanently promotes
     EVERY section's full-size background image to its own composited GPU
     layer at once (5-6 of them on the homepage), which is a much heavier
     memory cost than the same mistake on a text span — plausibly a real
     contributor to iOS Safari repeatedly crashing the page. */
}
/* Every non-hero .bg-layer declares its photo as --bg-img (a custom
   property, inert on its own) instead of a direct background-image — the
   actual background-image only turns on once scroll.js adds .bg-ready,
   right before the section nears the viewport. Without this, every one of
   these below-the-fold photos (about/cocktails/findus/closing/murch) was
   fetched and decoded unconditionally on initial page load regardless of
   scroll position — real, wasted bytes+decode time on first paint for
   photos nobody has scrolled to yet. .hero-visual-bg is deliberately NOT
   part of this system — it's the very first thing on the page and should
   stay eager. */
.bg-layer.bg-ready{background-image:var(--bg-img);}
/* Every full-bleed background was a 1.5-3.7 megapixel desktop-res source
   (up to ~700KB) — decoded as a full-resolution GPU texture and, with the
   will-change issue above, potentially several at once. On a phone that's
   a lot of simultaneous image memory for a background photo nobody's
   examining at desktop-monitor resolution. -mobile variants (moved to the
   very end of this file — see the closing comment block for why) are the
   same crops resized to a 1000px longest edge (~30-90KB, 6-9x fewer
   decoded pixels) — visually identical at phone screen sizes. */

/* bracket-style micro label, used everywhere a small eyebrow was a pill before */
.tag-label{
  display:inline-block;font:600 12px/1 'Arimo',sans-serif;letter-spacing:.06em;
  color:var(--mm-blue);margin-bottom:18px;
}

/* fixed, persistent header for the scroller only — other pages keep the
   original absolute-over-hero header untouched */
body.scroller .site-header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:0 32px;height:96px;display:flex;align-items:center;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,height .3s ease,backdrop-filter .3s ease;
}
body.scroller .site-header.scrolled{
  height:76px;background:rgba(6,7,8,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom-color:rgba(255,255,255,.08);
}
/* While actively scrolling, drop the blur and go near-opaque instead
   (2026-08-02) -- this header is the one element with backdrop-filter
   active continuously for the rest of the page once scrolled past 50px,
   the highest duty-cycle blur on the site and the most likely single
   contributor to the recurring iOS Safari "A problem repeatedly
   occurred" crash (only ever reported after sustained scrolling, which
   matches sustained-compositing-load crash patterns). js/scroll.js
   toggles .is-scrolling on during scroll and removes it ~160ms after
   scrolling stops, so the frosted look is only paid for at rest. */
body.scroller .site-header.scrolled.is-scrolling{
  backdrop-filter:none;-webkit-backdrop-filter:none;
  background:rgba(6,7,8,.96);
}
body.scroller .header-inner{width:100%;display:flex;align-items:center;gap:28px;padding:0;}
/* logo is 3000x2318 (~1.29:1) — width here must leave real headroom against
   the header height above, not just look plausible; verified in-browser
   after the previous 118px/98px pair silently overflowed both states */
body.scroller .header-logo img{width:88px;height:auto;transition:width .3s ease;}
body.scroller .site-header.scrolled .header-logo img{width:68px;}
body.scroller .site-nav,body.scroller .header-right{padding-bottom:0;}
/* every section on the scroller (hero-split, about, teasers, closing
   visual, contact) is dark, so nav uses the true brand tint everywhere —
   no light/dark branching needed */
body.scroller .site-nav a,body.scroller .header-right a{color:var(--mm-blue);}
body.scroller .header-right .login{color:#dfeaf0;}
body.scroller .burger span{background:var(--mm-blue);}
@media(max-width:960px){
  body.scroller .site-header{padding:0 18px;}
}

/* ---------- HERO ----------
   Full-bleed Bonzi-White bottle shot — the hero IS the photo, no text on
   top of it. .hero-visual-bg is a dedicated layer so scroll parallax can
   use a compositor-friendly transform instead of background-position. */
.hero-visual{
  position:relative;min-height:100vh;overflow:hidden;background:#050506;
}
/* inset:0, NOT the shared .bg-layer -18% oversize — that margin only ever
   existed so the old translateY drift wouldn't expose an edge. The hero's
   zoom-into-the-logo effect (js/scroll.js updateHeroZoom) never translates,
   only scales up from a fixed origin point well inside the image, which by
   definition can never expose an edge either. Oversizing this layer by 36%
   for a drift that no longer happens was pure extra GPU compositing area
   on every scroll frame — real cost on a section that's transformed
   continuously for the whole hero scroll range, unlike the other sections'
   brief in-then-out Ken-Burns. */
.hero-visual-bg{background-image:url('../assets/hero-bonzi.webp');inset:0;}
.hero-visual::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:220px;z-index:1;
  background:linear-gradient(180deg,transparent,#050506 100%);
}
@media(max-width:600px){
  /* was 78vh — deliberately shorter than the viewport, which is exactly
     why #home-copy ("Vacation in a Bottle") was visibly peeking in at the
     bottom of the screen on first load, before any scroll. The ask is
     zero visible next-section on load: only the hero. 100dvh (dynamic
     viewport height) is the fix, not just reverting to 100vh — mobile
     Safari's address bar collapses/expands as you scroll, and plain `vh`
     is calculated once against whichever state the browser used at load,
     which is exactly the kind of mismatch that causes a sliver of the
     next section to show or a dead gap to appear depending on chrome
     state. `dvh` tracks the CURRENT true visible height live. Browsers
     without dvh support simply ignore this one declaration and fall back
     to the unconditional `min-height:100vh` rule above — safe either way. */
  .hero-visual{min-height:100vh;min-height:100dvh;}
}

/* ---------- HERO COPY ----------
   Sits right after the hero photo, before About — same dark background
   as the rest of the scroller so the fixed nav's brand-blue stays legible
   without needing a photo scrim. */
.hero-copy-section{
  position:relative;background:#050506;color:#fff;
  padding:110px 4% 100px;text-align:center;
}
.hero-copy-section .tag-label{
  text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;
}
/* Title-card scale on purpose — per reference (27-b.com), the headline
   should feel like it's genuinely commanding the section, not just "a big
   heading". max-width:none lets a single short word run edge-to-edge on
   wide viewports instead of being capped to a "readable measure" — this
   is a poster moment, not a paragraph. */
.hero-copy-section h1{
  font-family:'Oswald',sans-serif;font-weight:200;font-size:clamp(72px,15vw,260px);
  line-height:0.92;margin:0 auto 28px;max-width:none;letter-spacing:-.02em;
}
/* Not italic — deliberately, as of 2026-07-27. Every single "E cut off in
   Safari" report across six rounds of fixes involved this italic "Bottle"
   specifically; removing the italic entirely (rather than continuing to
   chase increasingly speculative rendering-bug theories) removes whatever
   about it was the actual trigger, confirmed or not. Bold + brand blue
   keeps it a distinct "accent word" against the thin (200) rest of the
   headline without slanting anything. font-style:normal is required, not
   just omitting italic — <em> is italic by default in every browser's
   user-agent stylesheet, so leaving this off would silently re-italicize it. */
.hero-copy-section h1 em{font-style:normal;font-weight:700;color:var(--mm-blue);}
.hero-copy-section p{
  font-size:16px;line-height:1.65;max-width:520px;margin:0 auto 32px;color:#c7ced2;
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
/* Every pill (.btn-fill and .btn-ghost alike) shares one resting look —
   the outlined/blurred "Explore Cocktails" style — and one hover
   behavior: fills with the brand blue. .btn-fill/.btn-ghost stay as
   class names so existing markup doesn't need touching, but both now
   resolve to the same rules below rather than diverging looks. */
/* backdrop-filter dropped (2026-08-02) — 7 of these render at once across
   the homepage, each its own GPU-composited blur layer stacked on top of
   the 5 Ken-Burns background zooms and the fixed header's own blur. A
   real, plausible contributor to the recurring iOS Safari "A problem
   repeatedly occurred" crash, which only surfaces after sustained
   scrolling — exactly the sustained-compositing-load pattern this class
   of bug fits. Slightly higher background opacity compensates for the
   lost frosted-glass softness without the ongoing cost. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 28px;border-radius:100px;font:500 15px 'Arimo',sans-serif;
  cursor:pointer;background:rgba(255,255,255,.12);color:#fff;
  border:1px solid rgba(255,255,255,.35);
  transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
}
.btn-fill,.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35);}
.btn:hover,.btn-fill:hover,.btn-ghost:hover{
  transform:translateY(-2px);background:var(--mm-blue);color:var(--mm-ink);border-color:var(--mm-blue);
}

.scroll-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  width:36px;height:36px;border:1.5px solid rgba(255,255,255,.35);border-radius:50%;
  background:rgba(255,255,255,.05);cursor:pointer;
}
.scroll-cue span{
  display:block;width:7px;height:7px;margin:10px auto 0 9px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);
  animation:cueBounce 1.8s ease-in-out infinite;
}
@keyframes cueBounce{0%,100%{transform:rotate(45deg) translate(0,0);}50%{transform:rotate(45deg) translate(3px,3px);}}

@media(max-width:600px){
  .hero-copy-section{padding:70px 20px 80px;}
  .hero-copy-section h1{font-size:clamp(48px,17vw,84px);}
}

/* ---------- CLOSING VISUAL ----------
   The original full-bleed ice/bottle macro photo, alone, no text — a
   dramatic pause between the Find-Us teaser and Contact. */
.closing-visual{
  position:relative;min-height:85vh;overflow:hidden;
}
.closing-bg-layer{--bg-img:url('../assets/home-hero.webp');background-position:65% center;}
.closing-visual::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:160px;
  background:linear-gradient(180deg,transparent,#000 100%);
}
@media(max-width:600px){
  .closing-visual{min-height:55vh;}
}

/* ---------- reveal-on-scroll ----------
   Copy doesn't just fade up — it also "inverts" from a dim, desaturated
   grey into full brightness as it lands (filter:brightness, cheap and
   compositor-friendly, vs. animating color which would fight inherited
   brand-color text like the hero's blue <em>). Direction is a modifier:
   default is up; .dir-down/.dir-left/.dir-right override the off-screen
   transform so copy doesn't always arrive from the same place. */
.reveal{
  opacity:0;filter:brightness(.4) contrast(.85);
  transition:opacity 2.6s cubic-bezier(.16,1,.3,1),transform 2.6s cubic-bezier(.16,1,.3,1),filter 2.8s cubic-bezier(.16,1,.3,1);
}
.reveal,.reveal.dir-up{transform:translateY(30px);}
.reveal.dir-down{transform:translateY(-30px);}
.reveal.dir-left{transform:translateX(-52px);}
.reveal.dir-right{transform:translateX(52px);}
.reveal.in-view{opacity:1;transform:translate(0,0);filter:brightness(1) contrast(1);}

/* ---------- headline word-reveal (scroll-scrubbed) ----------
   Applied via JS (splitWords in scroll.js) to h1/h2 copy. Motion
   (transform/filter) is set directly by setupWordScrub()'s rAF loop every
   scroll frame, NOT a CSS transition — scrubbing needs the value to track
   scroll position exactly, and a transition racing to catch up to
   rapidly-changing inline styles reads as laggy/rubbery instead of
   locked-to-scroll. .line-reveal cancels the generic .reveal fade/rise on
   the heading itself so only the per-word motion shows (avoids animating
   twice, once as a block and once per word).

   No clipping mask (deliberately, as of the 2026-07-27 rebuild — see
   scroll.js's splitWords comment for why): .word-inner is a plain
   inline-block, so normal text flow determines word spacing and nothing
   ever needs its width predicted or fixed. transform/filter are purely
   visual/compositor properties — they never affect layout — so a word can
   be scaled up, rotated, and slid from off-position without disturbing
   where any other word sits, and no ancestor needs overflow:hidden. */
.reveal.line-reveal{opacity:1;transform:none;filter:none;}
/* "line" motion (cocktails teaser): cancels the generic block fade/rise
   the same way .line-reveal does for word-split headings — this one isn't
   split into words at all, setupLineScrub() in scroll.js drives its
   brightness directly every scroll frame instead. Default here matches
   that function's progress=0 output so there's no flash of full-bright
   text before JS attaches. */
.reveal[data-motion="line"]{opacity:1;transform:none;filter:brightness(.22);}
/* Resting/pre-JS default matches setupWordScrub()'s progress=0 output —
   heavy-looking (oversized, dim, rotated) start position — so there's no
   flash of fully-settled text before scroll.js's first update() runs. */
.word-inner{
  display:inline-block;
  transform:translateY(65%) scale(1.85) rotate(-11deg);
  opacity:.12;
  /* will-change is managed dynamically by scroll.js — ON only while a
     word is actively mid-transition, OFF at rest. A word that hasn't
     started yet has nothing to composite ahead of, so no hint here. */
}
/* "read" motion (About paragraph): no motion at all, just dim→sharp
   opacity — overrides the shared heavy/rotated default above. */
[data-motion="read"] .word-inner{transform:none;opacity:.32;}

/* ---------- teaser sections (Cocktails / Find Us) ---------- */
.teaser-section{position:relative;background:#000;padding:130px 32px;text-align:center;overflow:hidden;scroll-margin-top:96px;}
.teaser-section::before{
  content:'';position:absolute;top:-220px;left:50%;transform:translateX(-50%);
  width:920px;height:520px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(150,212,233,.09),transparent 70%);
}
.teaser-inner{position:relative;z-index:1;max-width:1100px;margin:0 auto;}
.teaser-section h2{
  font-family:'Oswald',sans-serif;font-weight:200;color:#fff;
  font-size:clamp(30px,4.2vw,46px);margin-bottom:18px;text-wrap:balance;
}
/* "659" — 3x the heading's own size (em, not px, so it stays 3x at every
   viewport width the clamp() above already handles) and brand blue, with
   its own count-up-from-1 animation (see scroll.js) independent of the
   word-slide-in the rest of the heading uses. */
.stat-number{
  display:inline-block;font-size:3em;font-weight:700;color:var(--mm-blue);
  line-height:.85;vertical-align:middle;
}
.teaser-section > .teaser-inner > p{
  color:#a9b6bd;font-size:16px;line-height:1.65;max-width:560px;margin:0 auto 48px;
}
.teaser-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:48px;text-align:left;}
.teaser-card{background:#101214;border:1px solid #22262a;border-radius:10px;padding:28px 26px;transition:border-color .2s ease,transform .2s ease;}
.teaser-card:hover{border-color:var(--mm-blue);transform:translateY(-3px);}
.teaser-card h3{font-family:'Oswald',sans-serif;font-weight:200;font-size:21px;color:#fff;margin-bottom:12px;}
.teaser-card p{font-size:13.5px;color:#8b969b;line-height:1.65;}

/* both teasers carry real photography now — a dark scrim keeps the
   existing white/light-grey text at the same contrast it had on flat
   black. ::after (not ::before, which already holds the radial glow)
   so both layers stack correctly under the z-index:1 .teaser-inner. */
.cocktails-bg-layer{--bg-img:url('../assets/cocktails-bg.webp');background-position:center 30%;}
.findus-bg-layer{--bg-img:url('../assets/findus-bg.webp');background-position:center 22%;}
.cocktails-teaser::after,.find-us-teaser::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.78) 45%,rgba(0,0,0,.92) 100%);
}
/* MURch teaser reuses the shared .teaser-section base (padding, radial
   glow, heading/paragraph styles). Cards are image-forward (unlike
   .teaser-card, which is text-only for the cocktail previews) since
   apparel sells on how it looks, not a spec list.
   .murch-bg-layer reuses the SAME bottle photo already used behind the
   Cocktails teaser (cocktails-bg.webp/-mobile.webp — no new asset),
   rendered as a low-opacity "ghost" rather than the near-full-strength
   treatment .cocktails-bg-layer/.findus-bg-layer use, so it reads as
   texture behind the product cards rather than competing with them —
   no dark-gradient ::after scrim needed on top of it like those two get,
   since the low opacity alone already keeps it well below the cards'
   contrast floor. Uses the shared .bg-layer class so it gets the same
   scroll-driven Ken-Burns zoom + will-change + unload/reload treatment
   as every other full-bleed section background (see js/scroll.js). */
.murch-bg-layer{--bg-img:url('../assets/cocktails-bg.webp');background-position:center 30%;opacity:.14;}
.murch-mark{position:absolute;left:-140px;top:50%;transform:translateY(-50%);width:640px;opacity:.05;pointer-events:none;z-index:0;}
@media(max-width:900px){ .murch-mark{display:none;} }
.murch-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:48px;}
.murch-card{
  display:block;background:#101214;border:1px solid #22262a;border-radius:10px;overflow:hidden;
  text-decoration:none;color:inherit;cursor:pointer;
  transition:border-color .2s ease,transform .2s ease;
}
.murch-card:hover{border-color:var(--mm-blue);transform:translateY(-3px);}
.murch-card-media{aspect-ratio:2/3;background:#1a1c1f;overflow:hidden;}
.murch-card-media img{width:100%;height:100%;object-fit:cover;display:block;}
.murch-card h3{
  font-family:'Oswald',sans-serif;font-weight:200;font-size:15.5px;color:#fff;
  padding:16px 18px;text-align:center;
}
@media(max-width:900px){
  .teaser-cards{grid-template-columns:1fr;}
  .murch-cards{grid-template-columns:1fr;max-width:340px;margin-left:auto;margin-right:auto;}
}
@media(max-width:600px){
  .teaser-section{padding:90px 24px;}
}

/* ---------- CONTACT (redesigned) ---------- */
.contact-redesign{position:relative;background:#000;padding:140px 32px 120px;overflow:hidden;scroll-margin-top:96px;}
.contact-mark{position:absolute;right:-100px;top:50%;transform:translateY(-50%);width:640px;opacity:.0625;pointer-events:none;z-index:0;}
.contact-wrap{position:relative;z-index:1;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;}
.contact-side h2{font-family:'Oswald',sans-serif;font-weight:200;font-size:clamp(34px,4.5vw,54px);color:#fff;margin-bottom:26px;}
.contact-side address{font-style:normal;color:#c7ced2;line-height:1.85;font-size:15px;margin-bottom:32px;}
.contact-social{display:flex;gap:14px;}
.contact-social a{
  width:42px;height:42px;border:1px solid #2a2e30;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--mm-blue);
  transition:border-color .2s ease,background .2s ease;
}
.contact-social a:hover{border-color:var(--mm-blue);background:rgba(150,212,233,.08);}

.contact-form-new{display:flex;flex-direction:column;gap:28px;}
.contact-form-new[hidden]{display:none;} /* the class's own display:flex otherwise beats the hidden attribute */
/* honeypot: off-screen (not display:none — some bots skip hidden fields
   entirely) so it's invisible/unreachable for real visitors but still a
   normal field a scripted form-filler will populate */
.cf-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.cf-row{display:flex;gap:20px;}
.cf-field{position:relative;flex:1;}
.cf-field input,.cf-field textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid #2a2e30;
  color:#fff;font:400 16px 'Arimo',sans-serif;padding:10px 2px 12px;outline:none;
  transition:border-color .25s ease;
}
.cf-field textarea{min-height:84px;resize:vertical;}
.cf-field label{
  position:absolute;left:2px;top:10px;color:#7a8489;font-size:16px;pointer-events:none;
  transition:transform .2s ease,font-size .2s ease,color .2s ease;transform-origin:left top;
}
.cf-field input:focus + label,.cf-field input:not(:placeholder-shown) + label,
.cf-field textarea:focus + label,.cf-field textarea:not(:placeholder-shown) + label{
  transform:translateY(-20px);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mm-blue);
}
.cf-field input:focus,.cf-field textarea:focus{border-color:var(--mm-blue);}
.cf-submit{
  align-self:flex-start;margin-top:6px;height:54px;padding:0 34px;border:0;border-radius:100px;
  background:var(--mm-blue);color:var(--mm-ink);font:600 15px 'Arimo',sans-serif;cursor:pointer;
  transition:transform .2s ease,filter .2s ease;
}
.cf-submit:hover{transform:translateY(-2px);filter:brightness(1.05);}
.cf-status{font-size:13.5px;color:var(--mm-blue);min-height:18px;}

@media(max-width:900px){
  .contact-wrap{grid-template-columns:1fr;gap:50px;}
  .cf-row{flex-direction:column;gap:28px;}
  .contact-mark{display:none;}
}
@media(max-width:600px){
  .contact-redesign{padding:100px 24px 80px;}
}

/* ACCOUNT page (login / create account / manage) */
.account-section{position:relative;overflow:hidden;min-height:100vh;background:#000;padding:230px 32px 100px;}
.account-mark{position:absolute;right:-260px;top:-140px;width:1150px;opacity:.3;pointer-events:none;z-index:0;}
.account-inner{position:relative;z-index:1;max-width:460px;margin:0 auto;}
.account-title{
  font-family:'Oswald',sans-serif;font-weight:200;font-size:32px;color:#fff;margin-bottom:8px;
}
.account-sub{font-size:15px;color:#a9b6bd;margin-bottom:28px;}
.account-tabs{display:flex;gap:6px;margin-bottom:30px;border-bottom:1px solid #2a2e30;}
.account-tab{
  background:none;border:0;padding:10px 4px;margin-right:22px;font:600 14px 'Arimo',sans-serif;
  color:#7a8489;cursor:pointer;border-bottom:2px solid transparent;transform:translateY(1px);
}
.account-tab.active{color:var(--mm-blue);border-bottom-color:var(--mm-blue);}
.account-checkbox{
  display:flex;align-items:center;gap:10px;font-size:14px;color:#c7d0d3;cursor:pointer;
}
.account-checkbox input{width:16px;height:16px;accent-color:var(--mm-blue);}
.account-logout{
  margin-top:26px;background:none;border:1px solid #2a2e30;border-radius:100px;padding:12px 26px;
  color:#c7d0d3;font:600 14px 'Arimo',sans-serif;cursor:pointer;transition:border-color .2s ease,color .2s ease;
}
.account-logout:hover{border-color:var(--mm-blue);color:var(--mm-blue);}
.account-forgot-link{
  display:block;margin-top:16px;background:none;border:0;padding:0;
  font:14px 'Arimo',sans-serif;color:#7a8489;cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;
}
.account-forgot-link:hover{color:var(--mm-blue);}

@media(max-width:600px){
  .account-section{padding:150px 20px 70px;}
  .account-mark{width:640px;right:-180px;top:-80px;}
}

/* LEGAL pages (Privacy Notice, Terms of Use, Your Privacy Choices) */
.legal-section{background:#fff;padding:220px 32px 100px;}
.legal-inner{max-width:760px;margin:0 auto;}
.legal-inner h1{
  font-family:'Oswald',sans-serif;font-weight:300;font-size:32px;color:var(--mm-ink);margin-bottom:6px;
}
.legal-updated{font-size:13px;color:#7a8489;margin-bottom:40px;}
.legal-inner h2{
  font-family:'Oswald',sans-serif;font-weight:400;font-size:19px;color:var(--mm-ink);
  margin:34px 0 10px;
}
.legal-inner p,.legal-inner li{font-size:15px;line-height:1.7;color:#33393c;margin-bottom:14px;}
.legal-inner ul{padding-left:22px;margin-bottom:14px;}
.legal-inner a{color:var(--mm-deep);text-decoration:underline;text-underline-offset:3px;}

@media(max-width:600px){
  .legal-section{padding:150px 20px 70px;}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--mm-ink);color:#fff;padding:64px 32px 28px;}
.footer-inner{max-width:1100px;margin:0 auto;}
.footer-signup{
  display:flex;flex-wrap:wrap;align-items:center;gap:24px 32px;
  padding-bottom:40px;margin-bottom:28px;border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-signup-copy{flex:1 1 260px;}
.footer-signup-copy h3{font-family:'Oswald',sans-serif;font-weight:400;font-size:22px;letter-spacing:.02em;margin-bottom:6px;}
.footer-signup-copy p{font-size:14px;color:rgba(255,255,255,.65);}
.footer-signup-field{display:flex;flex:1 1 340px;gap:10px;}
.footer-signup-field input{
  flex:1;height:50px;padding:0 18px;border-radius:100px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);color:#fff;font:15px 'Arimo',sans-serif;
}
.footer-signup-field input::placeholder{color:rgba(255,255,255,.5);}
.footer-signup-field input:focus{outline:none;border-color:var(--mm-blue);}
.footer-signup-field button{
  height:50px;padding:0 30px;border:0;border-radius:100px;white-space:nowrap;
  background:var(--mm-blue);color:var(--mm-ink);font:600 15px 'Arimo',sans-serif;cursor:pointer;
  transition:transform .2s ease,filter .2s ease;
}
.footer-signup-field button:hover{transform:translateY(-2px);filter:brightness(1.05);}
.footer-signup-field button:disabled{opacity:.6;cursor:default;transform:none;}
.footer-signup-status{flex-basis:100%;font-size:13px;color:var(--mm-blue);min-height:16px;}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 24px;}
.footer-legal-links{display:flex;flex-wrap:wrap;gap:20px;}
.footer-legal-links a{font-size:13px;color:rgba(255,255,255,.75);}
.footer-legal-links a:hover{color:#fff;}
.footer-copyright{font-size:12.5px;color:rgba(255,255,255,.5);}
.footer-prop65{
  margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);
  font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.4);max-width:900px;
}
.footer-prop65 a{color:rgba(255,255,255,.55);text-decoration:underline;text-underline-offset:2px;}
.footer-prop65 a:hover{color:rgba(255,255,255,.8);}

/* ---------- Cookie consent banner ----------
   Slim, non-blocking bar pinned to the bottom of the viewport — unlike
   the age gate, the rest of the page stays fully usable behind it.
   .in is added a frame after insertion (see site.js) so the transition
   actually runs instead of the element just appearing already in its
   final position. */
#cookieBanner{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  /* backdrop-filter dropped (2026-08-02) -- background is already 97%
     opaque, so the blur was doing almost nothing visually while still
     costing a full-width fixed-position composited blur layer for as
     long as a first-time visitor scrolls before dismissing this banner.
     Plausible contributor to the iOS Safari crash alongside the header's
     own blur -- see the .btn comment above for the fuller reasoning. */
  background:rgba(8,10,11,.97);
  border-top:1px solid rgba(255,255,255,.12);
  padding:18px 32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;
  transform:translateY(100%);transition:transform .35s ease;
}
#cookieBanner.in{transform:translateY(0);}
#cookieBanner p{flex:1 1 380px;font-size:13.5px;line-height:1.55;color:#c7d0d3;margin:0;}
#cookieBanner a{color:var(--mm-blue);}
.cookie-banner-actions{display:flex;gap:10px;flex-shrink:0;}
.cookie-btn{
  height:42px;padding:0 22px;border-radius:100px;font:600 13.5px 'Arimo',sans-serif;
  cursor:pointer;white-space:nowrap;transition:transform .2s ease,filter .2s ease,background .2s ease,color .2s ease;
}
.cookie-btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.3);}
.cookie-btn-fill{background:var(--mm-blue);color:var(--mm-ink);border:1px solid var(--mm-blue);}
.cookie-btn:hover{transform:translateY(-2px);filter:brightness(1.05);}
@media(max-width:600px){
  #cookieBanner{padding:16px 20px;}
  .cookie-banner-actions{width:100%;}
  .cookie-btn{flex:1;}
}

@media(max-width:600px){
  .site-footer{padding:48px 22px 24px;}
  .footer-signup{flex-direction:column;align-items:stretch;}
  /* .footer-signup-copy/-field both carry a desktop flex-basis (260px/
     340px) meant as a min-WIDTH hint for the normal row layout. Once this
     switches to flex-direction:column, that same basis is read against the
     column's main axis instead — i.e. as a preferred HEIGHT — and
     flex-grow:1 then stretches it further into any extra vertical space.
     That's what was ballooning the email input into a huge rounded blob:
     the field wrapper inflated to ~340px+ tall, and the input's own
     flex:1 filled it, dragging its border-radius:100px (sized for a slim
     50px-tall pill) along with it. flex:none makes both wrappers take
     their natural auto height in the column layout instead. */
  .footer-signup-copy{flex:none;}
  .footer-signup-field{flex-direction:column;flex:none;}
  .footer-signup-field button{width:100%;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
}

@media(prefers-reduced-motion:reduce){
  .scroll-cue span{animation:none !important;}
  .reveal{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important;}
  .word-inner{transition:none !important;transform:none !important;filter:none !important;opacity:1 !important;}
  .bg-layer{transform:none !important;}
  html{scroll-behavior:auto !important;}
}

/* ================================================================
   MOBILE BACKGROUND IMAGES — kept as the LAST rules in this file,
   deliberately.

   This block used to sit up near the shared .bg-layer rule (right after
   the comment explaining WHY mobile variants exist). That was a real bug,
   not just poor organization: .hero-visual-bg, .cocktails-bg-layer,
   .findus-bg-layer, and .closing-bg-layer are each declared UNCONDITIONALLY
   again later in this file (in their own section's style block), with the
   exact same specificity (one class selector). CSS resolves equal-
   specificity conflicts by source order — later wins — so those four
   sections' desktop, full-resolution backgrounds were silently overriding
   this mobile swap on every phone, the whole time. Only .about-bg-layer
   and .drinks-section happened to escape it, because their unconditional
   rule was written earlier in the file than this block was.

   Net effect: phones were still decoding up to 3.7-megapixel desktop
   source images for 4 of 5 sections on the homepage despite the "fix" —
   a completely plausible explanation for why the iOS Safari
   "A problem repeatedly occurred" crash came right back. Moving this
   block to the true end of the stylesheet makes it immune to this class
   of bug permanently: no matter what gets added above it later, an
   equal-specificity mobile override placed last always wins. If a NEW
   full-bleed section is added in the future, its mobile image override
   belongs HERE, not next to its desktop rule. */
@media(max-width:600px){
  .hero-visual-bg{background-image:url('../assets/hero-bonzi-mobile.webp');}
  .about-bg-layer{--bg-img:url('../assets/about-bg-mobile.webp');}
  .cocktails-bg-layer{--bg-img:url('../assets/cocktails-bg-mobile.webp');}
  .findus-bg-layer{--bg-img:url('../assets/findus-bg-mobile.webp');}
  .closing-bg-layer{--bg-img:url('../assets/home-hero-mobile.webp');}
  .drinks-section{background-image:url('../assets/drinks-bg-mobile.webp');}
  .murch-bg-layer{--bg-img:url('../assets/cocktails-bg-mobile.webp');}
}