/* 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 {
    background: #000;
    color: var(--cream);
    font-family: 'Choplin', sans-serif;
    font-weight: 200;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
  }

  /* ============ TYPOGRAPHY ============ */
  h1, h2, h3 {
    font-family: '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 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 Pro', serif;
    font-style: normal;  /* Whiskey Jill is its own display style; no need for italic */
    color: var(--gold);
  }
  h2 { font-size: clamp(40px, 4.8vw, 64px); }
  h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.01em; }

  p { font-family: 'Choplin', sans-serif; font-weight: 200; }

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

  .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: 'Choplin', sans-serif;
    font-weight: 200;
    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;
    mix-blend-mode: lighten;
  }
  .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;
  }
  .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .hero-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* Hero video/poster are kept at the source's native 1920x1080 framing
       so the browser never has to upscale and the bottle reads at its
       natural size. Centered object-position preserves the framing as shot. */
    object-position: 50% 50%;
    display: block;
  }
  /* Looping hero video — sits over the fallback image with the same framing. */
  .hero-bg video {
    position: absolute;
    inset: 0;
    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: 1;
    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 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 h3 {
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
    font-weight: 500;
    font-size: clamp(22px, 2.2vw, 30px);
    letter-spacing: -0.01em;
    color: var(--cream);
    margin-bottom: 36px;
  }
  .pull-quote {
    position: relative;
    padding: 0 40px;
    margin-bottom: 32px;
  }
  .pull-quote::before {
    content: '"';
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(80px, 8vw, 120px);
    color: var(--gold);
    line-height: 0.6;
    position: absolute;
    left: 0; top: -10px;
  }
  .pull-quote p {
    font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(24px, 3vw, 38px);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--cream);
    max-width: 720px;
    margin: 0 auto;
  }
  .quote-context {
    font-family: 'Choplin', sans-serif;
    font-weight: 200;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--cream-dim);
    max-width: 620px;
    margin: 0 auto;
  }

  /* ============ FEATURED CARDS ============ */
  .features-cards { background: var(--bg-3); }
  .features-cards h2 {
    text-align: center;
    margin-bottom: 14px;
  }
  .features-cards .lede { text-align: center; 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: 'Choplin', sans-serif;
    font-weight: 200;
    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 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 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: 'Choplin', sans-serif;
    font-weight: 200;
    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%);
  }
  /* 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 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: 'Choplin', sans-serif;
    font-weight: 200;
    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 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 {
    background: var(--bg-3);
  }
  .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 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 {
    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: 'Choplin', sans-serif;
    font-weight: 200;
    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; }
  .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-call { text-align: center; }
  .final-call h2 { max-width: 820px; margin: 0 auto 26px auto; }
  .final-call .body-copy { margin: 0 auto 36px auto; text-align: center; }
  .final-call .hero-ctas { justify-content: center; }
  .final-call .cta { font-size: 12px; padding: 20px 40px; }

  /* ============ FOOTER ============ */
  footer {
    background: #000;
    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; mix-blend-mode: lighten; }
  .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: 'Choplin', sans-serif;
    font-weight: 200;
    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 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; }
}