/* home — page-specific styles. Shared fonts/colors/reset live in base.css. */

    /* Whiskey Jill — vintage display face that matches the SUPERFLY wordmark on the bottle.
     DEMO build — license the full family for production. */
  :root {
    /* Premium dark charcoal + warm cream + muted copper.
       Boutique hotel bar meets premium editorial spirits brand —
       warm, tactile, moody, refined. */
/* primary background */
/* secondary dark */
/* deep espresso section background */
/* warm cream — headings, key text */
/* muted body text */
/* muted copper — primary accent */
/* brighter copper for hover states */
/* soft tan — secondary accent */
/* divider / border */
/* soft shadow tint */

    /* How far up from the viewport bottom the sticky bottle's BASE rests.
       Tune this so the bottle sits exactly on the bar surface in the
       landing-scene photo. Lower value = bottle sits lower (closer to floor),
       higher value = bottle sits higher up. */
    --bottle-floor: 14vh;
  }

  html, body {
    /* Solid fallback for layout integrity. */
    background-color: var(--bg-1);
    color: var(--cream);
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
  }
  /* Continuous vertical gradient on body that flows through the page's
     three palette moods — charcoal opening, copper product depth, warm
     bar payoff — using ONLY the existing palette (charcoal, espresso,
     copper, walnut). background-attachment: fixed gives a cinematic
     "still backdrop" feel as content scrolls past. Section-level bgs
     below are made transparent so this gradient reads continuously. */
  body {
    background-image:
      linear-gradient(180deg,
        #0E0D0B 0%,        /* hero zone — smoked charcoal */
        #100E0B 15%,       /* top testimonial / features intro */
        #14110D 30%,       /* deeper espresso into benefits scroll */
        #1C160F 45%,       /* warm brown — bottle scroll deepens */
        #221710 58%,       /* aged copper undertone — landing peak */
        #1E140D 72%,       /* visit / lead-magnet warmth recedes */
        #150F0A 86%,       /* final-call cool back to charcoal */
        #0E0D0B 100%       /* footer settles */
      );
    background-attachment: fixed;
  }
  /* iOS Safari has long-standing quirks with background-attachment:fixed
     (and it can be GPU-heavy on small devices). Drop to a normal scroll
     attachment with a flatter gradient on phones. */
  @media (max-width: 768px) {
    body {
      background-attachment: scroll;
      background-image:
        linear-gradient(180deg,
          #0E0D0B 0%,
          #16110C 40%,
          #1E140D 65%,
          #0E0D0B 100%);
    }
  }

  /* Universal film grain overlay — sits as a fixed pseudo-element above
     all page content (but below modals/age-gate which use z-index >= 100).
     Tiles a 256×256 noise PNG at low opacity with screen blend so the
     grain LIFTS the dark surfaces rather than dirtying them. Effect: a
     premium "shot on film" tactile noise across the whole page, without
     competing with the material textures (wood, copper) on individual
     sections.
       opacity: 0.06 — barely perceptible up close, accumulates as
                       organic texture across the eye's full field
       mix-blend-mode: screen — additive: lifts dark pixels slightly,
                       leaves light pixels alone. Best fit for dark sites.
       pointer-events: none — never interferes with clicks/hovers
       z-index: 50 — above content (sections at z:5), below floating CTA
                     (z:60), drawer (z:60), age-gate (z:99999) */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    background-image: url('../images/texture-grain.png');
    background-size: 256px 256px;
    background-repeat: repeat;
    opacity: 0.06;
    mix-blend-mode: screen;
  }
  /* Reduced motion users — keep the grain, it's static. No change needed. */

  /* ============ TYPOGRAPHY ============ */
  h1, h2, h3 {
    font-family: 'neue-haas-grotesk-display', 'Neue Haas Grotesk Display Pro', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
  }
  h1 em, h2 em, h3 em { font-style: italic; color: var(--gold); }
  h1 {
    /* Whiskey Jill — matches the bottle wordmark style. Adjusted size/spacing
       for the wider, display-y nature of the face. */
    font-family: 'Whiskey Jill', 'neue-haas-grotesk-display', 'Neue Haas Grotesk Display Pro', serif;
    font-weight: 400;
    font-size: clamp(60px, 7.5vw, 104px);
    letter-spacing: 0.005em;
    line-height: 1.02;
  }
  h1 em {
    font-family: 'Whiskey Jill', 'neue-haas-grotesk-display', 'Neue Haas Grotesk Display Pro', serif;
    font-style: normal;  /* Whiskey Jill is its own display style; no need for italic */
    color: var(--gold);
  }
  /* All section headings share the Whiskey Jill display face with the
     hero h1 — keeps the typographic identity consistent throughout.
     Only font-family + weight set globally; size/letter-spacing/line-
     height left to section-specific rules so individual layouts (like
     .top-testimonial h3) keep their carefully-tuned wrapping. */
  h2 {
    font-family: 'Whiskey Jill', 'neue-haas-grotesk-display', 'Neue Haas Grotesk Display Pro', serif;
    font-weight: 400;
    font-size: clamp(40px, 4.8vw, 64px);
  }
  h3 {
    font-family: 'Whiskey Jill', 'neue-haas-grotesk-display', 'Neue Haas Grotesk Display Pro', serif;
    font-weight: 400;
    font-size: clamp(22px, 2vw, 28px);
    letter-spacing: -0.01em;
  }

  p { font-family: 'Helvetica Neue LT Std', sans-serif; font-weight: 300; }

  .eyebrow {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--gold);
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
  }
  .eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--gold); }
  .eyebrow.center::after { content: ''; width: 36px; height: 1px; background: var(--gold); }

  /* Section divider — Fall of Icarus line drawing (sun + clouds + falling
     winged figure + mountains, connected by a horizontal rule). A nod to
     Superfly's original logo lineage. Centered between sections; same
     six placements as before — only the visual changes, the markup
     stays as <div class="section-divider"><span class="mark"></span></div>
     so existing HTML doesn't need touching. */
  .section-divider {
    display: block;
    text-align: center;
    padding: 36px 24px;
    pointer-events: none;
  }
  .section-divider .mark {
    /* display: block with explicit width + height for max browser
       compatibility. aspect-ratio on inline-block spans has known
       quirks in some Safari versions — block-level + margin auto is
       rock solid. */
    display: block;
    margin: 0 auto;
    width: min(600px, 88vw);
    /* Hard-coded height as a fallback in case aspect-ratio isn't
       computing correctly (540 * 816 / 1200 = 367). aspect-ratio
       is listed last so modern browsers use it for responsive
       proportions; older ones fall back to the explicit height. */
    height: 367px;
    max-height: calc(min(540px, 88vw) * 0.68);
    aspect-ratio: 1200 / 816;
    background-image: url('../images/icarus-line-divider.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Reset all the previous diamond-mark styles so the span becomes
       a plain image-host: */
    background-color: transparent;
    transform: none;
    box-shadow: none;
    opacity: 1;
  }

  .lede {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(18px, 1.6vw, 22px);
    color: var(--cream-dim);
    margin-bottom: 28px;
    line-height: 1.5;
  }

  .body-copy {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.75;
    color: var(--cream-dim);
    max-width: 560px;
  }
  .body-copy strong { font-weight: 500; color: var(--cream); }

  .cta {
    display: inline-block;
    font-family: 'Helvetica Neue LT Std', sans-serif;
    /* Bumped to bold weight, larger font, normal letter-spacing — much easier
       to read at a glance than the cramped tracked uppercase we had. */
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 17px 34px;
    cursor: pointer;
    transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
    border: 1px solid var(--gold);
    background: var(--gold);
    color: var(--bg-1);
    box-shadow: 0 8px 24px var(--shadow);
  }
  .cta:hover {
    background: var(--gold-hover);
    border-color: var(--gold-hover);
    color: var(--bg-1);
  }
  /* Ghost CTAs use the brighter tan accent for text so they read clearly
     against dark backgrounds instead of disappearing into them. */
  .cta.ghost {
    background: transparent;
    color: var(--gold-soft);
    border-color: var(--gold-soft);
    box-shadow: none;
  }
  .cta.ghost:hover {
    background: var(--gold-hover);
    border-color: var(--gold-hover);
    color: var(--bg-1);
  }

  /* ============ TEXTURE LAYERS ============ */
  /* THREE stacked overlays for that "boutique hotel bar" surface depth:
       1. Procedural noise grain (SVG turbulence — works without any files)
       2. Optional dark grunge bitmap (texture-grunge.jpg)
       3. Optional copper warmth bitmap (texture-copper.jpg)
     If you save the bitmaps later they auto-layer in; without them, the grain
     alone already gives the page real character. */

  /* 1. Procedural grain — no file dependency, works immediately. */
  .texture-grain {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.20;
    mix-blend-mode: screen;
    background-image: url('../images/texture-grain.png');
    background-size: 256px 256px;
    background-repeat: repeat;
  }

  /* Paper-fiber texture on lighter brown sections.
     Targets sections that use --bg-3 (deep espresso) — features, USP, pricing,
     transformation, lead-magnet — and gives them a tactile aged-paper feel
     distinct from the film grain on darker sections. */
  .features,
  .usp,
  .pricing,
  .transformation,
  .lead-magnet,
  .top-testimonial {
    position: relative;
  }
  .features::before,
  .usp::before,
  .pricing::before,
  .transformation::before,
  .lead-magnet::before,
  .top-testimonial::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url('../images/texture-paper.png');
    background-size: 384px 384px;
    background-repeat: repeat;
    opacity: 0.10;
    mix-blend-mode: overlay;
    pointer-events: none;
    /* Stay behind images and content (z:0 inside parent) */
    z-index: 0;
  }
  /* All direct children sit above the paper texture; images inside them inherit
     this stacking and stay visible even on mobile where stacking can be touchy. */
  .features > *,
  .usp > *,
  .pricing > *,
  .transformation > *,
  .lead-magnet > *,
  .top-testimonial > * {
    position: relative;
    z-index: 2;
  }

  /* 2. + 3. Bitmap overlays (auto-engage if files are saved into the folder). */
  .texture-overlay,
  .texture-warm {
    position: fixed; inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
  }
  .texture-overlay {
    background-image: url('../images/texture-grunge.jpg');
    opacity: 0.06;
    mix-blend-mode: overlay;
    z-index: 2;
  }
  .texture-warm {
    background-image: url('../images/texture-copper.jpg');
    opacity: 0.04;
    mix-blend-mode: soft-light;
    z-index: 2;
  }

  .dust {
    position: fixed; inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(1px 1px at 20% 30%, rgba(216, 184, 138, 0.4), transparent),
      radial-gradient(1px 1px at 80% 70%, rgba(216, 184, 138, 0.3), transparent),
      radial-gradient(1px 1px at 60% 20%, rgba(216, 184, 138, 0.35), transparent),
      radial-gradient(1px 1px at 40% 80%, rgba(216, 184, 138, 0.25), transparent),
      radial-gradient(1px 1px at 90% 40%, rgba(216, 184, 138, 0.35), transparent);
    opacity: 0.4;
    animation: drift 24s linear infinite;
    z-index: 3;
  }
  @keyframes drift { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-10px,-8px,0); } }

  /* ============ HEADER ============ */
  header {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 22px 56px;
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(to bottom, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.7) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rule);
  }
  .brand {
    height: 32px;
    width: auto;
    display: block;
  }
  .header-nav {
    display: flex;
    align-items: center;
    gap: 26px;
  }
  .header-nav a {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 400;
    font-size: 10.5px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--cream-dim);
    text-decoration: none;
    transition: color 200ms;
  }
  .header-nav a:hover { color: var(--gold); }
  .header-nav a.btn {
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 10px 20px;
  }
  .header-nav a.btn:hover { background: var(--gold); color: #0d0a07; }

  /* ============ MOBILE HAMBURGER MENU ============ */
  .nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(243, 234, 216, 0.25);
    width: 42px; height: 42px;
    padding: 0;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: border-color 200ms;
  }
  .nav-toggle:hover { border-color: var(--gold); }
  .nav-toggle span {
    display: block;
    width: 18px; height: 1.5px;
    background: var(--cream);
    transition: transform 250ms, opacity 250ms;
  }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .mobile-drawer {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(5, 4, 3, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transition: opacity 350ms;
  }
  body.nav-open .mobile-drawer {
    opacity: 1;
    pointer-events: auto;
  }
  .mobile-drawer-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    padding: 80px 24px;
  }
  .mobile-drawer a {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--cream);
    text-decoration: none;
    padding: 12px 18px;
    transition: color 200ms;
  }
  .mobile-drawer a:hover, .mobile-drawer a:focus { color: var(--gold); }
  .mobile-drawer a.btn {
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 14px 32px;
    margin-top: 18px;
  }

  /* ============ SECTIONS ============ */
  section { position: relative; z-index: 5; padding: 120px 56px; }
  .container { max-width: 1200px; margin: 0 auto; }
  .container.narrow { max-width: 820px; }

  /* ============ HERO (full-bleed cinematic) ============ */
  .hero {
    position: relative;
    min-height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0;
    background: #000;
  }
  /* Bottom fade — softens the transition out of the hero by bleeding
     the video/poster into the body's continuous gradient. Removes the
     hard cutoff that previously existed at the hero/next-section seam.
     z-index 4 sits above the hero-bg video (1) and its left-right
     gradient overlay (2) but BELOW the .hero .container text (2 with
     later DOM order). pointer-events:none keeps interactions intact. */
  .hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 160px;
    pointer-events: none;
    z-index: 4;
    background: linear-gradient(to bottom,
      rgba(14, 13, 11, 0) 0%,
      rgba(14, 13, 11, 0.55) 55%,
      rgba(14, 13, 11, 0.95) 100%);
  }
  .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .hero-bg img {
    /* Fallback still image — sits BEHIND the video. Explicit position
       + z-index: 0 so the stacking order is deterministic; previously
       the painting order was correct in spec but a cross-browser
       quirk was leaving the img on top of a never-started video. */
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
  }
  /* Looping hero video — sits OVER the fallback image (z-index 1)
     and UNDER the gradient overlay (z-index 2 — see ::after below). */
  .hero-bg video {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-bg video { display: none; }
  }
  /* Dark gradient on the left so the white text always reads */
  .hero-bg::after {
    content: '';
    position: absolute; inset: 0;
    z-index: 2;
    background:
      linear-gradient(to right,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.55) 35%,
        rgba(0,0,0,0.15) 65%,
        rgba(0,0,0,0.0) 100%),
      linear-gradient(to bottom,
        rgba(0,0,0,0.3) 0%,
        rgba(0,0,0,0) 30%,
        rgba(0,0,0,0) 70%,
        rgba(0,0,0,0.5) 100%);
  }
  .hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 56px;
  }
  .hero-text {
    max-width: 600px;
  }
  .hero h1 {
    margin-bottom: 32px;
    color: #fff;
    font-family: 'Whiskey Jill', 'neue-haas-grotesk-display', 'Neue Haas Grotesk Display Pro', serif;
    font-weight: 400;
    font-size: clamp(52px, 6vw, 88px);
    line-height: 1.02;
    letter-spacing: 0.005em;
    word-spacing: 0.02em;
    text-shadow: 0 2px 20px rgba(0,0,0,0.4);
  }
  .hero h1 em {
    color: var(--gold);
    font-style: normal;
    font-weight: 400;
  }
  .hero .hero-text { max-width: 460px; }
  .hero .body-copy { font-size: 15px; line-height: 1.7; max-width: 430px; }
  .hero .body-copy { margin-bottom: 36px; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 10px rgba(0,0,0,0.4); }
  .hero .eyebrow { color: var(--gold); }
  .hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
  }
  .hero-microcopy {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 22px;
    max-width: 460px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.4);
  }

  /* ============ TOP TESTIMONIAL (replaces logo strip) ============ */
  .top-testimonial {
    padding: 80px 56px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    text-align: center;
    background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 100%);
  }
  .top-testimonial .container { max-width: 860px; }
  /* Top-testimonial typography — simplified to two voices:
       Whiskey Jill (display headings, matches the rest of the page)
       Helvetica Neue LT Std (body + body italic, matches the body copy)
     The Helvetica eyebrow stays as a small UI label, consistent with
     every other eyebrow on the page. Two body fonts → one (Helvetica
     does both UI labels and body now that Choplin is retired). */
  .top-testimonial h3 {
    font-family: 'Whiskey Jill', 'neue-haas-grotesk-display', 'Neue Haas Grotesk Display Pro', serif;
    font-weight: 400;
    font-size: clamp(22px, 2.2vw, 30px);
    letter-spacing: 0.005em;
    color: var(--cream);
    margin-bottom: 36px;
  }
  .pull-quote {
    position: relative;
    padding: 0 40px;
    margin-bottom: 32px;
  }
  /* Decorative opening quote — uses the Whiskey Jill display face so
     it reads as part of the heading typography (instead of a third
     italic-sans voice with the previous Neue Haas). */
  .pull-quote::before {
    content: '"';
    font-family: 'Whiskey Jill', 'neue-haas-grotesk-display', 'Neue Haas Grotesk Display Pro', serif;
    font-weight: 400;
    font-size: clamp(80px, 8vw, 120px);
    color: var(--gold);
    line-height: 0.6;
    position: absolute;
    left: 0; top: -10px;
  }
  /* The actual quote text — Helvetica Neue light italic. Same family
     as the surrounding body so the quote reads as a quieter editorial
     pull-out rather than a competing typographic moment. */
  .pull-quote p {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.35;
    color: var(--cream);
    max-width: 720px;
    margin: 0 auto;
  }
  .quote-context {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 300;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--cream-dim);
    max-width: 620px;
    margin: 0 auto;
  }

  /* ============ FEATURED CARDS ============ */
  .features-cards {
    /* Was solid bg-3 — now transparent so the body's continuous
       vertical gradient flows through. The dark .feature-card
       containers below still give cards their own contrast. */
    background: transparent;
    /* Center the section content (eyebrow, h2, lede). The cards-grid
       below uses grid layout so text-align doesn't affect its columns. */
    text-align: center;
  }
  .features-cards h2 {
    margin-bottom: 14px;
  }
  .features-cards .lede { margin-bottom: 60px; }
  .cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  .feature-card {
    border: 1px solid var(--rule);
    background: rgba(10, 8, 7, 0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 250ms, transform 250ms;
  }
  .feature-card:hover {
    border-color: rgba(216, 184, 138, 0.4);
    transform: translateY(-3px);
  }
  .card-image {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #000;
    overflow: hidden;
  }
  .card-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .card-image::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.6) 100%);
  }
  .card-body { padding: 32px 28px 28px 28px; flex: 1; display: flex; flex-direction: column; }
  .card-eyebrow {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
  }
  .card-body h3 { margin-bottom: 14px; font-size: 24px; }
  .card-body p {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.65;
    color: var(--cream-dim);
    margin-bottom: 24px;
    flex: 1;
  }
  .card-cta {
    align-self: flex-start;
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 6px;
    transition: gap 200ms;
  }
  .card-cta:hover { color: var(--cream); border-color: var(--cream); }

  /* ============ BENEFITS — STICKY SCROLL EXPERIENCE ============ */
  .benefits {
    position: relative;
    padding: 0;
    background: linear-gradient(180deg, var(--bg-1) 0%, #08060a 50%, var(--bg-1) 100%);
  }

  /* Intro that appears above the scroll experience */
  .benefits-intro {
    padding: 110px 56px 60px 56px;
    text-align: center;
  }
  .benefits-intro h2 { margin-bottom: 22px; max-width: 820px; margin-left: auto; margin-right: auto; }
  .benefits-intro .body-copy { margin: 0 auto; text-align: left; max-width: 660px; }

  /* The scroll container — its height is set by the number of benefit slots */
  .bottle-scroll-container {
    position: relative;
  }

  /* Wrapper that contains the sticky bottle + benefit scroll + landing scene.
     The sticky bottle's range is now limited to this stage, so it doesn't
     start sticky over the intro headline at the top of the section. */
  .bottle-stage {
    position: relative;
  }

  /* The sticky bottle pinned to the viewport while the section scrolls past.
     Sits IN FRONT of the landing scene (so the bottle visibly "lands" on the empty
     bar table) but BEHIND the benefit cards (z:6 below) so cards stay readable. */
  .bottle-sticky-wrapper {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 5;
  }
  .bottle-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    /* Anchor bottle to the BOTTOM of the sticky stage so its base lands on
       the bar surface in the landing-scene photo. Tune --bottle-floor to
       fine-tune the landing height (% from bottom of viewport). */
    align-items: flex-end;
    justify-content: center;
    padding-bottom: var(--bottle-floor, 14vh);
  }
  .scroll-bottle {
    height: 82vh;
    max-height: 820px;
    max-width: 90vw;
    width: auto;
    object-fit: contain;
    object-position: bottom center;
    /* mix-blend-mode removed: the old square photo had a baked dark background
       that 'lighten' was hiding. The new portrait WebP has a real alpha channel,
       so blending against the page would create a faint box around the image
       bounds. Drop-shadow alone is enough for the floating depth. */
    filter: drop-shadow(0 30px 40px rgba(0,0,0,0.75));
    transition: opacity 700ms ease, transform 700ms ease;
    /* No clip-path needed: the current sticky bottle file is a tall portrait
       crop (~1:3.9) with the bottle already filling the frame. If you ever
       swap back to a square crop with empty sides, re-add clip-path here. */
  }
  .scroll-bottle.fading {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  /* Soft halo behind sticky bottle */
  .bottle-sticky::before {
    content: '';
    position: absolute;
    width: 50vh;
    height: 50vh;
    background: radial-gradient(ellipse at center, rgba(201,169,97,0.16) 0%, transparent 60%);
    filter: blur(30px);
    pointer-events: none;
  }

  /* The benefits scroll past — each slot is one viewport tall.
     z-index 6 keeps cards IN FRONT of the bottle wrapper (z:5) so cards remain
     readable. Card backgrounds are semi-transparent with backdrop-blur, so the
     bottle is subtly visible behind them. */
  .benefits-trail {
    position: relative;
    z-index: 6;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .benefit-slot {
    /* Each slot used to be 100vh, which left a lot of black above/below each
       short benefit card as it scrolled past. 60vh keeps the bottle pinned
       through all eight slots but cuts ~40% of the dead scroll. */
    min-height: 60vh;
    display: flex;
    align-items: center;
    padding: 0 6%;
  }
  .benefit-slot.left { justify-content: flex-start; }
  .benefit-slot.right { justify-content: flex-end; }

  .benefit-card {
    max-width: 380px;
    /* Default to visible — the observer will still smoothly slide them up
       as they enter the viewport. If JS doesn't fire for any reason, cards
       remain readable rather than invisible. */
    opacity: 1;
    transform: translateY(0);
    transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1), transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, rgba(20, 16, 11, 0.7) 0%, rgba(10, 8, 7, 0.55) 100%);
    border: 1px solid var(--rule);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 36px 32px;
    position: relative;
    z-index: 1;
  }
  /* Pre-scroll-in state: applied only when JS confirms IntersectionObserver works */
  .js-ready .benefit-card { opacity: 0; transform: translateY(40px); }
  .js-ready .benefit-card.active { opacity: 1; transform: translateY(0); }
  .benefit-card .card-num {
    font-family: 'neue-haas-grotesk-display', 'Neue Haas Grotesk Display Pro', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 16px;
    color: var(--gold);
    display: block;
    margin-bottom: 14px;
  }
  .benefit-card h4 {
    font-family: 'neue-haas-grotesk-display', 'Neue Haas Grotesk Display Pro', sans-serif;
    font-weight: 700;
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--cream);
    margin-bottom: 12px;
  }
  .benefit-card h4 em { font-style: italic; color: var(--gold); }
  .benefit-card p {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 300;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--cream-dim);
  }

  /* Landing scene — empty bar table that the sticky bottle lands ON.
     No z-index: lets children compete directly with the bottle wrapper.
     The landing-bg img stays at z-0 (behind bottle), the landing-text
     uses z-7 (above bottle) so the headline isn't cropped by the bottle. */
  .landing-scene {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: #000;
  }
  .landing-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    /* Bottle-less version of the bar shot is naturally darker without the
       bright bottle as a light source — brighten it so the bar surface and
       martini glass are still visible for the bottle to land on. */
    filter: brightness(1.4) contrast(0.95) saturate(1.05);
  }
  .landing-scene::before {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to bottom,
      rgba(0,0,0,0.5) 0%,
      rgba(0,0,0,0.0) 30%,
      rgba(0,0,0,0.0) 60%,
      rgba(0,0,0,0.8) 95%,
      rgba(0,0,0,0.95) 100%);
  }
  /* Soft radial copper glow behind where the sticky bottle lands. Reads
     like a warm bar light catching the bottle and the table surface as
     the bottle "arrives." Sits ABOVE the existing dark gradient (::before
     at z-1) but BELOW the bottle/text (bottle wrapper z-5, text z-7).
     Center positioned where the bottle's base lands; pulled slightly
     toward 60% horizontally and 65% vertically to feel anchored on the
     bar surface rather than floating dead center. */
  .landing-scene::after {
    content: '';
    position: absolute; inset: 0; z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 50% at 50% 65%,
      rgba(216, 152, 82, 0.22) 0%,    /* aged copper at center */
      rgba(181, 122, 69, 0.12) 35%,
      rgba(0, 0, 0, 0) 70%);
    mix-blend-mode: screen;
  }
  /* Landing-scene text split into top heading + bottom CTAs so the bottle
     can land in the middle without covering either. Both use z-7 to stay
     above the bottle wrapper (z-5). */
  .landing-text-top {
    position: absolute;
    z-index: 7;
    top: 60px;
    left: 0; right: 0;
    text-align: center;
    padding: 0 30px;
    pointer-events: none;
  }
  .landing-text-bottom {
    position: absolute;
    z-index: 7;
    /* Sit below the sticky bottle's base (which lands at --bottle-floor from
       the bottom) so the CTAs never cover the bottle. */
    bottom: 24px;
    left: 0; right: 0;
    text-align: center;
    padding: 0 30px;
  }
  .landing-text-bottom .hero-ctas { justify-content: center; }
  .landing-text h3 {
    font-family: 'neue-haas-grotesk-display', 'Neue Haas Grotesk Display Pro', sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 4.5vw, 60px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 16px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.5);
  }
  .landing-text h3 em { font-style: italic; color: var(--gold); }
  .landing-text .lede {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: 18px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 32px;
    text-shadow: 0 1px 10px rgba(0,0,0,0.5);
  }
  .landing-text .hero-ctas { justify-content: center; }

  @media (max-width: 900px) {
    .benefits-intro { padding: 80px 24px 40px 24px; }
    .benefit-slot { padding: 0 24px; min-height: 65vh; }
    .benefit-slot.left, .benefit-slot.right { justify-content: center; }
    /* Mobile bottle sizing — tuned for the new portrait-crop WebP (1:3.92),
       which fills the frame. The previous 95vh value was sized for a 1:1
       square image where the visible bottle was only ~36% of the canvas;
       with the new image filling the frame, 95vh now renders the bottle
       almost full-screen. 55vh keeps it as a prominent landing-scene
       element next to the martini glass without dominating the viewport. */
    .scroll-bottle { height: 55vh; max-height: none; opacity: 1; }
    /* Bottle base position on mobile. Smaller = bottle sits lower in the
       viewport, larger = higher. Tuned to land on the bar surface in the
       (now shorter) landing-scene photo while keeping clear of the CTAs. */
    .bottle-sticky { padding-bottom: 12vh; }
    /* Shorter landing scene on mobile so the landscape bar photo doesn't
       have to scale up ~6x to cover a full 100vh portrait container
       (which is what made the image look way too zoomed in). Anchoring
       the image to the bottom keeps the bar surface visible where the
       bottle lands. */
    .landing-scene { min-height: 65vh; }
    .landing-bg { object-position: center bottom; }
    /* Hide the "Right where it belongs." headline on mobile. With the
       shorter landing scene, the headline scrolls through the bottle's
       sticky area and visually cuts the bottle in half during transition.
       The landing visual (bottle on bar) already carries the meaning;
       CTAs at the bottom carry the conversion. Remove this rule to
       bring the headline back. */
    .landing-text-top { display: none; }
    .benefit-card { max-width: 100%; padding: 28px 24px; }
    .landing-scene { padding-bottom: 30px; }
    /* CTAs in the landing scene pulled to the very bottom AND sized down so
       they live entirely below the bottle's base, never overlapping it. */
    .landing-text-bottom { bottom: 16px; }
    .landing-text-bottom .hero-ctas {
      gap: 8px;
      flex-direction: row;
      flex-wrap: wrap;
    }
    .landing-text-bottom .cta {
      font-size: 12px;
      padding: 12px 20px;
      letter-spacing: 0.08em;
      font-weight: 600;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .benefit-card { opacity: 1; transform: none; }
    .scroll-bottle { transition: none; }
  }

  /* ============ PROBLEM ============ */
  .problem {
    text-align: center;
    background: var(--bg-3);
  }
  .problem h2 { margin-bottom: 30px; }
  .problem .body-copy { margin: 0 auto; }
  .problem-list {
    list-style: none;
    margin-top: 38px;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  .problem-list li {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 300;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--cream-dim);
    padding: 12px 0 12px 28px;
    position: relative;
    border-bottom: 1px solid var(--rule);
  }
  .problem-list li::before {
    content: '—';
    color: var(--gold);
    position: absolute;
    left: 0; top: 12px;
  }
  .problem-list .ask {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: 18px;
    color: var(--gold);
    text-align: center;
    padding: 16px 0;
    border: none;
  }
  .problem-list .ask::before { content: none; }

  /* ============ TESTIMONIALS ============ */
  .testimonials { text-align: center; }
  .testimonials h2 { margin-bottom: 22px; }
  .testimonials .lede { margin: 0 auto 50px auto; max-width: 720px; }
  .quote-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .quote-grid.four {
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 50px;
  }
  .quote-grid.four .quote {
    padding: 30px 24px;
  }
  .quote-grid.four .quote p {
    font-size: 15px;
    line-height: 1.45;
  }
  .quote .attribution em {
    font-style: italic;
    font-weight: 300;
    text-transform: none;
    letter-spacing: 0.05em;
    color: var(--gold);
    margin-left: 2px;
  }
  .quote {
    padding: 36px 26px;
    border: 1px solid var(--rule);
    background: rgba(20, 16, 11, 0.4);
    text-align: left;
  }
  .quote-mark {
    font-family: 'neue-haas-grotesk-display', 'Neue Haas Grotesk Display Pro', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 56px;
    color: var(--gold);
    line-height: 0.6;
    margin-bottom: 14px;
  }
  .quote p {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.55;
    color: var(--cream-dim);
  }
  .quote .attribution {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--cream-faint);
    margin-top: 22px;
    display: block;
  }

  /* ============ USP / CORNERSTONE ============ */
  .usp {
    /* Premium product-proof section ("It's not just the look. It's the
       liquid.") — copper texture under a slightly LESS opaque dark
       wash than the final-CTA, so the metal reads a touch more clearly
       here as a "the liquid itself is premium" backdrop. */
    background-color: var(--bg-3);
    background-image:
      linear-gradient(180deg,
        rgba(20, 16, 12, 0.90) 0%,
        rgba(20, 16, 12, 0.94) 100%),
      url('../images/texture-copper.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
  }
  .usp .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .usp-image {
    position: relative;
    aspect-ratio: 4 / 5;
    background: #000;
    overflow: hidden;
    border: 1px solid rgba(216, 184, 138, 0.2);
  }
  .usp-image img {
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .usp-image .quote-overlay {
    position: absolute;
    bottom: 30px; left: 30px; right: 30px;
    font-family: 'neue-haas-grotesk-display', 'Neue Haas Grotesk Display Pro', sans-serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(20px, 2vw, 26px);
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  }
  .usp h2 { margin-bottom: 26px; }

  /* ============ ABOUT (now: Visit the Home of Superfly) ============ */
  .visit {
    background: var(--bg-3);
  }
  .visit-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 70px;
    align-items: center;
  }
  .visit-image {
    position: relative;
    border: 1px solid rgba(216, 184, 138, 0.25);
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  }
  /* gold corner accents to match the pricing-card treatment */
  .visit-image::before, .visit-image::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border: 1px solid var(--gold);
    z-index: 2;
    pointer-events: none;
  }
  .visit-image::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
  .visit-image::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
  .visit-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    filter: brightness(0.96) saturate(1.04);
  }
  .visit-text h2 { margin-bottom: 24px; }
  .visit-text h2 em { display: block; margin-top: 4px; font-size: 0.78em; }
  .visit-text .body-copy { margin-bottom: 32px; }
  .visit-text .hero-ctas { flex-wrap: wrap; }
  @media (max-width: 900px) {
    .visit-grid { grid-template-columns: 1fr; gap: 36px; }
    .visit-image img { aspect-ratio: 16 / 10; }
  }

  /* Keep old .about rules for any legacy references */
  .about { text-align: center; }
  .about h2 { margin-bottom: 22px; }
  .about .body-copy { margin: 0 auto 36px auto; }

  /* ============ LEAD MAGNET ============ */
  .lead-magnet {
    /* Reverted to the original dark gradient (NO parchment texture).
       The parchment was clashing with the copper-textured .final-call
       directly below — and tone-matching the parchment to copper just
       blurred the two sections together, killing the copper's standout
       moment. Letting this section stay a quiet dark warm interlude
       lets the final-call copper be the climactic visual close it
       was designed to be. */
    background:
      linear-gradient(135deg, rgba(216, 184, 138, 0.06) 0%, transparent 60%),
      var(--bg-2);
    text-align: center;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .lead-magnet h2 { margin-bottom: 22px; max-width: 820px; margin-left: auto; margin-right: auto; }
  .lead-magnet .body-copy { margin: 0 auto 36px auto; max-width: 600px; }
  .signup-form {
    display: flex;
    gap: 12px;
    max-width: 520px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .signup-form input {
    flex: 1;
    min-width: 220px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(216, 184, 138, 0.3);
    color: var(--cream);
    padding: 14px 18px;
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 0.05em;
  }
  .signup-form input::placeholder { color: var(--cream-faint); font-style: italic; }
  .signup-form input:focus { outline: none; border-color: var(--gold); }
  .signup-form .cta { padding: 14px 28px; }
  /* ============ A LOVE LETTER (Brookings short film) ============
     Click-to-play video section. Poster is shown; user taps → video
     plays with sound. Never autoplays audio. */
  .love-letter {
    padding: 100px 24px;
    background: var(--bg-2);
    color: var(--cream);
    text-align: center;
    position: relative;
  }
  .love-letter h2 {
    font-family: 'Whiskey Jill', 'neue-haas-grotesk-display', 'Neue Haas Grotesk Display Pro', sans-serif;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.05;
    margin: 14px 0 20px;
  }
  .love-letter h2 em {
    color: var(--gold);
    font-style: italic;
  }
  .love-letter .body-copy {
    max-width: 620px;
    margin: 0 auto 36px;
    color: var(--cream-dim);
    font-size: 15px;
    line-height: 1.7;
  }
  .love-letter-video {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5),
                0 4px 12px rgba(0,0,0,0.35);
  }
  .love-letter-video .ll-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  .love-letter-video .ll-cover {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 400ms ease;
  }
  .love-letter-video .ll-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .love-letter-video .ll-play {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--gold);
    color: #0E0D0B;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 250ms ease, background 250ms ease;
  }
  .love-letter-video .ll-cover:hover .ll-play {
    transform: scale(1.08);
    background: var(--gold-hover);
  }
  .love-letter-video .ll-caption {
    position: absolute;
    bottom: 24px;
    left: 0; right: 0;
    z-index: 2;
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cream);
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  }
  .love-letter-video.is-playing .ll-cover {
    opacity: 0;
    pointer-events: none;
  }
  @media (max-width: 640px) {
    .love-letter { padding: 60px 16px; }
    .love-letter-video .ll-play { width: 64px; height: 64px; }
    .love-letter-video .ll-play svg { width: 22px; height: 22px; }
  }

  /* Honeypot: invisible to humans, catches bots. Uses absolute + off-screen
     positioning + zero opacity, display:none is skipped by some bots. */
  .nl-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }
  .lead-microcopy {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: 12px;
    color: var(--cream-faint);
    margin-top: 18px;
  }

  /* ============ FINAL CALL ============ */
  /* Final CTA — "last pour" feel. Brushed copper texture as the base
     layer, muted heavily by a dark overlay so only hints of the metal
     grain catch the eye. Radial copper glow on top lifts the center
     where the closing CTA sits. Reads as quiet, refined, premium —
     like a backlit copper bar surface under low light.
     Three background layers (top→bottom):
       1. Dark vertical wash — keeps the section dark, mutes the texture
       2. Radial copper glow — center spotlight
       3. Brushed copper photo — base texture (mostly hidden, peeks at
          edges + brighter spots) */
  .final-call {
    text-align: center;
    position: relative;
    background-color: #0E0D0B;
    background-image:
      linear-gradient(180deg,
        rgba(14, 13, 11, 0.86) 0%,
        rgba(14, 13, 11, 0.92) 100%),
      radial-gradient(ellipse 55% 65% at 50% 50%,
        rgba(216, 152, 82, 0.22) 0%,
        rgba(181, 122, 69, 0.10) 35%,
        rgba(0, 0, 0, 0) 75%),
      url('../images/texture-copper.jpg');
    background-size: cover, auto, cover;
    background-position: center, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
  }
  .final-call h2 { max-width: 820px; margin: 0 auto 26px auto; position: relative; z-index: 2; }
  .final-call .body-copy { margin: 0 auto 36px auto; text-align: center; position: relative; z-index: 2; }
  .final-call .hero-ctas { justify-content: center; position: relative; z-index: 2; }
  .final-call .cta { font-size: 12px; padding: 20px 40px; }

  /* ============ FOOTER ============ */
  footer {
    /* Copper texture under a very dark wash — adds warmth to the
       footer so the page doesn't bottom out into pure black. Heavier
       opacity (94-96%) than other sections because the footer has
       small text + many links that need to stay legible. */
    background-color: #000;
    background-image:
      linear-gradient(180deg,
        rgba(0, 0, 0, 0.94) 0%,
        rgba(0, 0, 0, 0.96) 100%),
      url('../images/texture-copper.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    border-top: 1px solid var(--rule);
    padding: 70px 56px 30px 56px;
    position: relative;
    z-index: 6;
  }
  .footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 50px;
    margin-bottom: 50px;
  }
  .footer-brand .brand-foot { height: 30px; margin-bottom: 18px; }
  .footer-brand p {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: 13px;
    color: var(--cream-dim);
  }
  .footer-grid h4 {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
  }
  .footer-grid ul { list-style: none; }
  .footer-grid li { padding: 5px 0; }
  .footer-grid a {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: var(--cream-dim);
    text-decoration: none;
    transition: color 200ms;
  }
  .footer-grid a:hover { color: var(--gold); }
  .footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 28px;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }
  .footer-bottom p, .footer-bottom a {
    font-family: 'Helvetica Neue LT Std', sans-serif;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--cream-faint);
    text-decoration: none;
  }
  .footer-bottom a:hover { color: var(--gold); }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 1100px) {
    .cards-grid { grid-template-columns: 1fr; gap: 24px; max-width: 560px; margin: 0 auto; }
    .benefits-list { grid-template-columns: 1fr; }
    .benefits .container,
    .usp .container { grid-template-columns: 1fr; gap: 50px; }
    .quote-grid { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
    .quote-grid.four { grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  }
  @media (max-width: 720px) {
    section { padding: 80px 24px; }
    .social-proof { padding: 40px 24px; }
    header { padding: 16px 22px; }
    .header-nav { display: none; }
    .nav-toggle { display: flex; }
    .mobile-drawer { display: block; }
    footer { padding: 50px 24px 24px 24px; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; margin-bottom: 36px; }
    .logo-strip { gap: 30px; }
    .hero-ctas { flex-direction: column; align-items: stretch; }
    .hero-ctas .cta { text-align: center; }
    .signup-form { flex-direction: column; }
    .signup-form .cta { width: 100%; text-align: center; }
    .quote-grid.four { grid-template-columns: 1fr; }

    /* Hero on mobile — STACKED so the headline never overlaps the video.
       The video/photo becomes a banner at the top; the text sits below it
       on the dark background. */
    .hero {
      display: block;
      min-height: 0;
      align-items: stretch;
      overflow: visible;
      padding: 0 0 48px 0;
      background: #000;
    }
    .hero-bg {
      position: relative;
      inset: auto;
      height: 52vh;
      min-height: 300px;
    }
    .hero-bg img, .hero-bg video { object-position: 50% 50%; }
    /* fade the bottom of the banner into the dark text area below */
    .hero-bg::after {
      background: linear-gradient(to bottom,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.0) 45%,
        rgba(0,0,0,0.0) 75%,
        #000 100%);
    }
    .hero .container { position: relative; width: 100%; padding: 30px 24px 0 24px; }
    .hero .hero-text, .hero-text { max-width: none; }
    .hero-microcopy { font-size: 12px; }
  }


/* ============================================================
   PREMIUM POLISH — marquee credit-roll strip.
   Slow, restrained, pure CSS animation. No JS, no scroll override.
   Sits as a thin band between major sections.
   ============================================================ */
.marquee {
  position: relative;
  z-index: 5;
  padding: 14px 0;
  background: #0a0907;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 48px;
  white-space: nowrap;
  animation: marquee-scroll 55s linear infinite;
  will-change: transform;
}
.marquee-item {
  font-family: 'neue-haas-grotesk-display', 'Neue Haas Grotesk Display Pro', sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cream);
}
.marquee-dot {
  color: var(--gold);
  font-size: 14px;
  opacity: 0.75;
  display: inline-block;
  transform: translateY(-1px);
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  /* Hold the strip mid-roll instead of looping; copy stays readable. */
  .marquee-track { animation: none; transform: translateX(-25%); }
}
@media (max-width: 720px) {
  .marquee-track { gap: 32px; animation-duration: 38s; }
  .marquee-item { font-size: 10.5px; letter-spacing: 0.28em; }
}


/* ============================================================
   SMALL BATCH / BEHIND THE BOTTLE
   Magazine-style 2-column spread: bottle-prep hero photo on the
   left, brand copy + hand-labeling detail photo on the right.
   Stacks on mobile.
   ============================================================ */
.craft {
  position: relative;
  z-index: 5;
  padding: 110px 56px;
  /* Dark walnut wood texture under a heavy dark wash. The "Every bottle
     still starts by hand" section reads as handcrafted distillery — wood
     grain is the natural backdrop. Layered like the final-CTA copper:
       1. Vertical dark overlay (88-93% opacity) — keeps the section
          legibly dark, wood grain barely peeks through
       2. Wood texture as base — provides organic warmth + tactile depth
     The overlay opacity is high enough that the wood doesn't fight with
     the section's images/text but adds a subtle "bar surface" warmth. */
  background-color: var(--bg-1);
  background-image:
    linear-gradient(180deg,
      rgba(14, 13, 11, 0.88) 0%,
      rgba(14, 13, 11, 0.93) 100%),
    url('../images/texture-wood.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.craft .container { max-width: 1280px; margin: 0 auto; }
.craft-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 72px;
  align-items: center;
}
.craft-hero { margin: 0; }
.craft-hero img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--rule);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
.craft-text { max-width: 460px; }
.craft-text h2 {
  margin-bottom: 30px;
  font-size: clamp(34px, 4vw, 56px);
}
.craft-text .body-copy { margin-bottom: 18px; }
.craft-text .body-copy:last-of-type { margin-bottom: 36px; }
.craft-detail { margin: 0 0 28px 0; }
.craft-detail img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--rule);
  filter: saturate(0.9) brightness(0.95);
}
.craft-caption {
  font-family: 'Helvetica Neue LT Std', sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--cream-dim);
  margin-top: 14px;
  text-align: center;
}
.craft-micro {
  font-family: 'Helvetica Neue LT Std', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
@media (max-width: 900px) {
  .craft { padding: 70px 24px; }
  .craft-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .craft-text { max-width: none; }
  .craft-text h2 { font-size: clamp(28px, 7vw, 40px); margin-bottom: 22px; }
}