/* Partners (/partners/, page 6936): the locked mockup's own rules after the shared stylesheet (partners.html, tag
   partners-design-locked-2026-10-31). Loads after design-system.css. */
  /* Partners page (round P1): same system as the homepage and About. Hero and intro as About, then three paths
     (retail, hospitality, distribution), the retail block with the shelf bottles, why partners choose her, Gold or
     Rosé, who reaches for her, the trade quotes on cream with bubbles, how it works, Natalie as the call to action
     (the homepage's partner block), the partner FAQ, close and footer */
  .intro h1 .g, .intro .kicker .g, .paths-sec h2 .g, .retail h2 .g, .retail .retail-pay .g,
  .heard h2 .g, .steps-sec h2 .g, .faq h2 .g { color: var(--gold); }
  .intro .kicker { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 22px; line-height: 1.25; color: var(--ink); margin: 20px 0 22px; }
  .intro .ctas { justify-content: center; }
  @media (min-width: 900px) { .intro .kicker { font-size: 26px; } }
  .paths-sec h2, .retail h2, .heard h2, .steps-sec h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; }

  /* three paths: one card each, the whole card is the link */
  .paths { display: grid; gap: 12px; margin: 26px auto 0; max-width: 1040px; text-align: left; }
  .path { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px; border-radius: 16px; background: var(--paper); text-decoration: none; color: var(--ink);
          border: 1px solid transparent; transition: border-color .25s, transform .25s; }
  .path:hover { border-color: rgba(134,102,28,.4); transform: translateY(-2px); }
  .path-k { font-size: 14px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
  .path strong { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 22px; line-height: 1.2; }
  .path .path-p { font-size: 18px; line-height: 1.45; color: var(--body); }
  .path em { margin-top: auto; padding-top: 8px; font-style: normal; font-weight: 500; font-size: 17px; color: var(--green); }
  @media (min-width: 900px) { .paths { grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; } .path { padding: 28px 26px 24px; } .path .path-p { font-size: 19px; } }

  /* retail: the shelf bottles from the live homepage, set big so they jump off the page. Each bottle steps out of
     its black and white shelf (transparent PNG cut, kept as WebP with alpha) */
  .retail { background: var(--white); }
  .retail-lede { font-size: 18px; max-width: 30em; margin: 14px auto 0; }
  /* phones: one bottle per row, near full width, so each one jumps off the screen; side by side from 600px */
  .shelf { display: grid; gap: 30px; max-width: 340px; margin: 26px auto 0; }
  @media (min-width: 600px) { .shelf { grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; } }
  .shelf figure { margin: 0; }
  .shelf img { width: 100%; height: auto; }
  .shelf figcaption { margin-top: 10px; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 22px; line-height: 1.2; }
  .shelf figcaption span { display: block; color: var(--ink); }
  .shelf .r figcaption { color: var(--rose-ink); } .shelf .d figcaption { color: var(--gold); }
  .retail-pay { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; color: var(--ink); margin: 30px 0 12px; letter-spacing: -.015em; }
  .retail-note { font-size: 18px; max-width: 30em; margin: 0 auto 22px; }
  @media (prefers-reduced-motion: no-preference) {
    .shelf img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
    .shelf figure:hover img { transform: translateY(-6px) rotate(-1deg); }
  }
  @media (min-width: 900px) {
    .shelf { gap: 48px; margin-top: 34px; } .shelf figcaption { font-size: 26px; margin-top: 12px; }
    .retail-lede, .retail-note { font-size: 20px; }
  }

  /* Gold or Rosé, as a story row: each wine leads with its name in its own colour */
  .taste-pair strong { display: block; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 22px; margin-bottom: 2px; }
  .taste-pair .gd { color: var(--gold); } .taste-pair .rs { color: var(--rose-ink); }
  .story p.taste-pair { margin-bottom: 16px; }
  .story p.spec { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 16px; letter-spacing: .04em; color: var(--ink); }

  /* trade quotes: cream with bubbles (the bubble rule), the club quote style */
  .heard .heard-lede { font-size: 18px; max-width: 30em; margin: 14px auto 0; }
  .mock-note { max-width: 36em; margin: 18px auto 0; padding: 10px 14px; border: 1px dashed rgba(134,102,28,.5); border-radius: 10px; font-size: 15px; color: var(--body); }
  @media (min-width: 900px) { .heard .heard-lede { font-size: 20px; } }

  /* how it works: three numbered steps */
  .steps { list-style: none; padding: 0; margin: 26px auto 0; display: grid; gap: 22px; max-width: 1040px; }
  .steps li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .steps .n { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold);
              font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 22px; margin-bottom: 6px; }
  .steps strong { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 21px; color: var(--ink); }
  .steps p { font-size: 18px; line-height: 1.45; max-width: 22em; margin: 0; }
  .steps-note { font-size: 18px; max-width: 32em; margin: 26px auto 0; padding-top: 20px; border-top: 1px solid var(--rule); }
  @media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 36px; } .steps p, .steps-note { font-size: 19px; } }

  /* Natalie as the call to action: the homepage block, with the email and WhatsApp under the button */
  .natalie .contact-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 14px 0 0; font-size: 17px; }
  .natalie .contact-line a { display: inline-flex; align-items: center; min-height: 44px; color: var(--green); font-weight: 500; text-underline-offset: 3px; }
  .natalie .contact-line span { align-self: center; color: var(--body); }
  @media (max-width: 599px) { .natalie .contact-line { flex-direction: column; align-items: center; gap: 0; } .natalie .contact-line span { display: none; } }
  .natalie .trade .partner-line { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; color: var(--ink); }

  /* Round P2. The street interviews lead, as one row that drifts sideways on its own. It pauses on hover or focus,
     and every tile still opens its reel. With reduced motion it becomes a row you swipe. The list is doubled so the
     loop has no seam; the copy is hidden from screen readers and from tabbing */
  .fans { background: var(--white); padding-bottom: 56px; }
  .ig-head { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -.02em; color: var(--ink); margin: 0; }
  .ig-head .g { color: var(--gold); }
  .ig-lede { font-size: 18px; max-width: 30em; margin: 12px auto 0; }
  .reel-strip { display: flex; margin: 28px 0 26px; overflow: hidden;
                -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .reel-track { list-style: none; margin: 0; padding: 0 6px; display: flex; gap: 12px; flex: none; }
  .reel-track li { width: 172px; flex: none; }
  .reel-track a { position: relative; display: block; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 30px -18px rgba(23,22,20,.55); }
  .reel-track img { display: block; width: 100%; height: auto; aspect-ratio: 361 / 640; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .reel-track a::after { content: ""; position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.88) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='%231f4d36'/%3E%3C/svg%3E") center / 18px no-repeat; }
  .reel-track a:hover img, .reel-track a:focus-visible img { transform: scale(1.05); }
  .reel-track a:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
  @media (prefers-reduced-motion: no-preference) {
    .reel-track { animation: reel-drift 60s linear infinite; }
    .reel-strip:hover .reel-track, .reel-strip:focus-within .reel-track { animation-play-state: paused; }
  }
  @keyframes reel-drift { to { transform: translateX(-100%); } }
  @media (prefers-reduced-motion: reduce) {
    .reel-strip { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; padding: 0 10px; }
    .reel-track[aria-hidden] { display: none; } .reel-track li { scroll-snap-align: start; }
  }
  @media (min-width: 900px) { .ig-lede { font-size: 20px; } .reel-track li { width: 228px; } .reel-track { gap: 16px; padding: 0 8px; } .reel-strip { margin: 40px 0 34px; } }

  /* Round P4, choose your business: seven rooms on one filmstrip. On desktop the section pins under the nav and the
     page's own scroll slides the strip sideways (the scroll speed is never changed), each photo settling from a slow
     push as its room arrives. A rail names the seven rooms; its gold line fills with the scroll and the butterfly
     rides its tip. Tap a name to go to that room. Phones get the same strip as a native swipe with snap points */
  .rooms { background: var(--green); color: #e9e3d4; padding-bottom: 0; }
  .rooms .eyebrow { color: #e2c27a; } .rooms h2 { color: var(--paper); font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; } .rooms h2 .g { color: #e2c27a; }
  .rooms-rail { position: relative; width: min(100% - 32px, 1240px); margin: 22px auto 0; }
  .rooms-rail ol { list-style: none; margin: 0; padding: 0 0 14px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .rooms-rail ol::-webkit-scrollbar { display: none; }
  .rooms-rail button { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; white-space: nowrap;
                       font: 500 15px/1 "SF Pro Display", sans-serif; color: rgba(233,227,212,.6); cursor: pointer; transition: color .3s, background .3s; }
  .rooms-rail button span { font-size: 12px; letter-spacing: .08em; color: rgba(226,194,122,.7); }
  .rooms-rail button.on { color: var(--paper); background: rgba(255,255,255,.08); } .rooms-rail button.on span { color: #e2c27a; }
  .rail-line { position: relative; height: 1px; background: rgba(226,194,122,.25); }
  .rail-line i { position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: #e2c27a; transform-origin: 0 50%; transform: scaleX(0); }
  .rail-fly { position: absolute; top: -9px; left: 0; width: 22px; height: 19px; fill: #e2c27a; transform: translateX(-11px); }
  .rooms-view { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 22px 0 56px; }
  .rooms-view::-webkit-scrollbar { display: none; }
  .rooms-track { display: flex; gap: 14px; padding: 0 16px; width: max-content; }
  .room { scroll-snap-align: center; width: 84vw; max-width: 420px; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #17392a;
          box-shadow: 0 40px 70px -40px rgba(0,0,0,.7); }
  .room-img { margin: 0; aspect-ratio: 4 / 4.2; overflow: hidden; }
  .room-img img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 50% 60%; }
  .room-copy { position: relative; padding: 22px 22px 22px; }
  .room-n { position: absolute; right: 16px; top: -58px; margin: 0; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 96px; line-height: 1;
            color: transparent; -webkit-text-stroke: 1px rgba(245,241,232,.85); letter-spacing: -.04em; pointer-events: none; }
  .room-k { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #e2c27a; }
  .room h3 { margin: 6px 0 0; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 28px; line-height: 1.1; letter-spacing: -.015em; color: var(--paper); }
  .room-what { margin: 10px 0 0; font-size: 18px; line-height: 1.45; color: #e9e3d4; }
  .room-how { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(226,194,122,.3); font-size: 16px; line-height: 1.45; color: rgba(233,227,212,.85); }
  .room-how span { display: block; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #e2c27a; margin-bottom: 4px; }
  .room-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; color: #e2c27a; font-weight: 500; text-underline-offset: 3px; }
  @media (min-width: 900px) {
    .rooms-pin { height: 560vh; }
    .rooms-sticky { position: sticky; top: var(--nav); height: calc(100vh - var(--nav)); display: flex; flex-direction: column; overflow: hidden; }
    .rooms-rail { margin-top: 18px; } .rooms-rail ol { justify-content: space-between; overflow: visible; }
    .rooms-view { flex: 1; overflow: visible; padding: 26px 0 40px; scroll-snap-type: none; display: flex; align-items: center; }
    .rooms-track { gap: 3vw; padding: 0 max(16px, calc((100vw - 1240px) / 2)); will-change: transform; height: 100%; }
    .room { width: min(64vw, 980px); max-width: none; height: 100%; max-height: 640px; flex-direction: row; align-self: center; }
    .room-img { aspect-ratio: auto; width: 46%; height: 100%; }
    .room-copy { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px 48px 40px; }
    .room-n { top: 26px; right: 32px; font-size: clamp(120px, 12vw, 190px); -webkit-text-stroke-color: rgba(226,194,122,.55); }
    .room h3 { font-size: clamp(34px, 3.2vw, 48px); } .room-what { font-size: 21px; max-width: 22em; } .room-how { font-size: 18px; max-width: 26em; }
  }

  /* Round P5: the page takes its discipline from the printed sell sheet. The sheet: the card art (bottle on sky or pink,
     butterfly wings and vines) with the spec line under it, and three headed blocks on gold rules beside it. Gold and
     Rosé swap the card. The postcard closes the page: the sell sheet's handwritten note in airmail stripes, with the
     Veneto postmark, the trade contacts and the distributor */
  .sheet-sec { background: #eef3e6; }
  .sheet { display: grid; gap: 30px; align-items: center; }
  .sheet-art { position: relative; max-width: 520px; margin: 0 auto; width: 100%; }
  .sheet-card { display: block; width: 100%; height: auto; border-radius: 6px; }
  .sheet-pick { position: absolute; right: 12px; top: 12px; z-index: 1; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.9); }
  .sheet-pick button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; font: 500 15px/1 "SF Pro Display", sans-serif; color: var(--ink); cursor: pointer; }
  .sheet-pick button[aria-pressed="true"] { background: var(--green); color: #fff; }
  .sheet-spec { margin: 10px 0 0; border-radius: 10px; padding: 12px 14px; background: #bfe3ec; text-align: center; font-size: 14px; line-height: 1.6; color: var(--ink); }
  .sheet-spec i { font-style: normal; color: rgba(23,22,20,.35); margin: 0 3px; } .sheet-spec .t { color: #2a8a97; font-weight: 500; }
  .sheet-copy .eyebrow { text-align: left; }
  .sheet-copy h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; margin-bottom: 8px; } .sheet-copy h2 .g { color: var(--gold); }
  .sheet-block { margin-top: 22px; }
  .sheet-block h3 { margin: 0 0 8px; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 22px; color: var(--ink); }
  .sheet-block p { margin: 0; padding: 4px 0 4px 14px; border-left: 2px solid rgba(134,102,28,.45); font-size: 18px; line-height: 1.5; color: var(--body); }
  .sheet-block p + p { margin-top: 6px; }
  .sheet-block a { color: var(--green); font-weight: 500; text-underline-offset: 3px; }
  .sheet-more { display: inline-flex; align-items: center; min-height: 44px; }
  @media (min-width: 900px) { .sheet { grid-template-columns: 1fr 1fr; gap: 64px; } .sheet-art { margin: 0; } .sheet-block p { font-size: 19px; } }
  .post-sec { background: var(--white); } .postcard { text-align: left; }
  .postcard { max-width: 1040px; margin: 0 auto; padding: 14px; border-radius: 6px;
              background: repeating-linear-gradient(-45deg, #4fb9d0 0 18px, #fff 18px 30px, #bfe3ec 30px 48px, #fff 48px 60px);
              box-shadow: 0 30px 60px -40px rgba(23,22,20,.5); display: grid; }
  .postcard > div { background: #e9f6f8; }
  .post-msg { padding: 28px 24px 18px; font-family: "Kalam", "Bradley Hand", cursive; font-size: 21px; line-height: 1.45; color: #1d2a2e; }
  .post-msg p { margin: 0 0 14px; text-align: left; } .post-side p { text-align: right; } .post-msg u { text-underline-offset: 4px; text-decoration-thickness: 1px; }
  .post-side { position: relative; padding: 8px 24px 28px; display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-family: "Kalam", "Bradley Hand", cursive; font-size: 19px; }
  .post-side > a:not(.btn) { display: flex; align-items: center; justify-content: flex-end; min-height: 44px; width: 100%; border-bottom: 1px solid rgba(29,42,46,.25); color: #1d2a2e; text-decoration: none; }
  .post-stamp { width: 150px; height: auto; align-self: flex-end; margin-bottom: 6px; mix-blend-mode: multiply; }
  .post-for { margin: 0; width: 100%; padding-bottom: 6px; border-bottom: 1px solid rgba(29,42,46,.25); text-decoration: underline; text-underline-offset: 4px; }
  .post-dist { margin: 14px 0 18px; line-height: 1.3; } .post-dist span { font-size: 21px; }
  .post-side .btn { font-family: "SF Pro Display", sans-serif; }
  @media (min-width: 900px) {
    .postcard { grid-template-columns: 1.25fr 1fr; padding: 18px; }
    .post-msg { padding: 44px 40px 30px 48px; font-size: 24px; } .post-side { padding: 36px 44px 36px 20px; font-size: 20px; } .post-stamp { width: 190px; }
  }

  /* Round P6: the buyer's three questions and nothing else. Each answer is one screen: 1 the street interviews and
     the Florida facts, 2 the sell-sheet card with the tasting offer, 3 the money. Then the postcard and four FAQs */
  main > section.intro.q-intro { padding-top: calc(var(--nav) + 40px); } .q-intro .wrap { padding: 0 16px; } .q-intro .eyebrow { max-width: none; text-align: center; } .q-intro h1 .g { color: var(--gold); }
  .q-index { list-style: none; margin: 26px auto 0; padding: 0; display: grid; gap: 8px; max-width: 360px; text-align: left; }
  .q-index a { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 18px; border-radius: 14px; background: #fff; border: 1px solid rgba(134,102,28,.2);
               font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 19px; color: var(--ink); text-decoration: none; transition: border-color .25s, transform .25s; }
  .q-index a:hover { border-color: rgba(134,102,28,.6); transform: translateX(3px); }
  .q-index span, .q-n { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; color: var(--gold); }
  .q-index span { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gold); display: grid; place-items: center; font-size: 15px; flex: none; }
  @media (min-width: 900px) { .q-index { grid-template-columns: repeat(3, 1fr); max-width: 900px; } .q-index a { justify-content: center; } }
  .q-sec h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -.02em; margin: 0; }
  .q-n { margin: 0 0 6px; font-size: 18px; letter-spacing: .1em; }
  .q-n::before { content: "Question "; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; }
  .q-lede { font-size: 19px; max-width: 30em; margin: 14px auto 0; }
  .q-want { background: var(--white); padding-bottom: 56px; }
  .q-facts { list-style: none; margin: 4px auto 0; padding: 0; display: grid; gap: 10px; max-width: 1040px; }
  .q-facts li { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 14px; background: var(--paper); font-size: 17px; line-height: 1.4; color: var(--body); }
  .q-facts b { flex: none; min-width: 56px; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 38px; line-height: 1; color: var(--green); text-align: center; }
  .q-facts a { color: var(--green); font-weight: 500; text-underline-offset: 3px; }
  @media (min-width: 900px) { .q-facts { grid-template-columns: repeat(3, 1fr); gap: 16px; } .q-facts li { font-size: 18px; } }
  .q-good { background: #eef3e6; }
  .q-good .sheet-copy h2 { margin-bottom: 4px; }
  .sheet-block b.gd { color: var(--gold); } .sheet-block b.rs { color: var(--rose-ink); }
  .q-money { background: var(--white); }
  .q-money-grid { list-style: none; margin: 30px auto 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 1040px; text-align: left; }
  .q-money-grid li { padding: 20px 18px 18px; border-radius: 16px; background: var(--green); color: #e9e3d4; }
  .q-money-grid b { display: block; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: clamp(26px, 3vw, 40px); line-height: 1.05; color: var(--paper); margin-bottom: 8px; }
  .q-money-grid span { font-size: 15px; line-height: 1.4; }
  .q-money-grid li.todo { background: transparent; border: 1px dashed rgba(134,102,28,.6); color: var(--body); } .q-money-grid li.todo b { color: var(--gold); }
  @media (min-width: 900px) { .q-money-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } .q-money-grid li { padding: 26px 24px 24px; } .q-money-grid span { font-size: 16px; } }

  /* Round P7: the hook is the homepage street film beside the category line; "why partners choose" comes back from the
     original partner page, as a hub: the Rosé on its shelf in a disc, a gold ring carrying "Product of Italy", and
     three points a side whose rules run in toward the disc (drawn in as the section arrives) */
  .q-hook { display: grid; gap: 26px; align-items: center; }
  .q-hook-text { text-align: center; } .q-hook-text h1 .g { color: var(--gold); }
  .q-hook-pay { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 20px; color: var(--ink); margin: 18px 0 0; }
  .q-hook .vox { max-width: 380px; width: 100%; margin: 0 auto; }
  @media (min-width: 900px) {
    .q-hook { grid-template-columns: 1.15fr 1fr; gap: 64px; } .q-hook-text { text-align: left; }
    .q-hook-text .eyebrow { text-align: left !important; } .q-hook .q-index { grid-template-columns: 1fr; max-width: 380px; margin-left: 0; } .q-hook .q-index a { justify-content: flex-start; }
    .q-hook .vox { max-width: 440px; justify-self: end; margin: 0; }
  }
  .vox { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 9 / 14; background: #2a2622; box-shadow: 0 30px 60px -36px rgba(23,22,20,.55); }
  .vox video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .vox-cue { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; padding: 24px; text-align: center; color: #fff;
             background: rgba(60,45,30,.38); font-family: "Favorit", sans-serif; font-weight: 300; font-size: clamp(30px, 4vw, 46px); line-height: 1.05; text-transform: uppercase; transition: opacity .8s ease; pointer-events: none; }
  .vox-cue span { font-size: .8em; } .vox.playing .vox-cue { opacity: 0; }
  .vox-sound { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.82); color: var(--ink); cursor: pointer; }
  .vox-sound[aria-pressed="true"] .x { display: none; } .vox-sound[aria-pressed="true"] .on { display: inline !important; }

  .why-sec { background: var(--paper); }
  .why-sec h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; } .why-sec h2 .g { color: var(--gold); }
  .why-top { font-size: 18px; max-width: 34em; margin: 16px auto 0; } .why-top b { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; color: var(--gold); }
  .why-map { display: grid; gap: 18px; margin-top: 26px; align-items: center; }
  .why-hub { position: relative; width: 250px; aspect-ratio: 1; margin: 0 auto; order: -1; }
  .why-ring { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); overflow: visible; }
  .why-ring circle { fill: none; stroke: var(--gold); stroke-width: .6; }
  .why-ring text { font: 600 7.4px "SF Pro Display", sans-serif; letter-spacing: 2.4px; fill: var(--gold); }
  .why-disc { position: absolute; inset: 9%; border-radius: 50%; overflow: hidden; box-shadow: 0 24px 40px -22px rgba(23,22,20,.55); background: #222; }
  .why-disc img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  .why-col { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 16px; max-width: 34em; width: 100%; }
  .why-col li { padding-left: 16px; border-left: 2px solid rgba(134,102,28,.45); }
  .why-col h3 { margin: 0 0 4px; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 22px; color: var(--gold); }
  .why-col p { margin: 0; font-size: 18px; line-height: 1.45; color: var(--ink); }
  @media (min-width: 900px) {
    .why-map { grid-template-columns: 1fr 340px 1fr; gap: 0; margin-top: 44px; }
    .why-hub { order: 0; width: 280px; }
    .why-col { gap: 40px; } .why-col li { position: relative; border: 0; padding: 0 0 14px; }
    .why-col li::after { content: ""; position: absolute; bottom: 0; height: 1px; background: var(--gold); width: calc(100% + 30px); transform: scaleX(0); transition: transform .9s cubic-bezier(.22,1,.36,1); }
    .why-col.l li { text-align: right; } .why-col.l li::after { left: 0; transform-origin: 0 50%; }
    .why-col.r li::after { right: 0; transform-origin: 100% 50%; }
    .why-map.drawn li::after { transform: scaleX(1); } .why-map.drawn li:nth-child(2)::after { transition-delay: .12s; } .why-map.drawn li:nth-child(3)::after { transition-delay: .24s; }
    .why-col p { font-size: 19px; }
  }
  @media (prefers-reduced-motion: reduce) { .why-col li::after { transform: scaleX(1) !important; transition: none; } }

  /* Round P8: "who's reaching for her", the second diagram from the original partner page, inside Question 1 after
     the street interviews (the faces, then the types). Same hub as "why partners choose": bottles on ice in the disc,
     Prosecco lovers above, Enthusiasts below, two a side */
  .reach-head { margin-top: 44px; }
  .reach-h { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -.015em; color: var(--ink); margin: 0; }
  .reach-h .g { color: var(--gold); }
  .reach-map { display: grid; gap: 16px; margin: 24px 0 56px; align-items: center; }
  .reach-map .why-hub { order: -1; }
  .reach-item { max-width: 34em; margin: 0 auto; width: 100%; padding-left: 16px; border-left: 2px solid rgba(134,102,28,.45); }
  .reach-item h3 { margin: 0 0 4px; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 22px; color: var(--gold); }
  .reach-item p { margin: 0; font-size: 18px; line-height: 1.45; color: var(--ink); }
  @media (min-width: 900px) {
    .reach-map { grid-template-columns: 1fr 340px 1fr; grid-template-areas: ". t ." "l hub r" ". b ."; gap: 18px 0; margin-top: 36px; }
    .reach-map .t { grid-area: t; } .reach-map .b { grid-area: b; } .reach-map .why-col.l { grid-area: l; } .reach-map .why-col.r { grid-area: r; } .reach-map .why-hub { grid-area: hub; order: 0; }
    .reach-item { border: 0; padding: 0; text-align: center; max-width: 26em; } .reach-item p { font-size: 19px; }
    .reach-map .why-col { gap: 48px; }
    .reach-map .why-col li::after { transform: scaleX(0); } .reach-map.drawn .why-col li::after { transform: scaleX(1); } .reach-map.drawn li:nth-child(2)::after { transition-delay: .12s; }
  }

  /* Round P9: both diagrams become scroll stacks (after the React Bits Scroll Stack, rebuilt in CSS and plain JS).
     Each point is a big card that pins below the nav; the next card slides up over it, and the cards underneath ease
     back a little in scale and light, so the deck builds as you scroll. The page's own scroll drives it; nothing is
     taken over. Reduced motion keeps the pinned stack with no scaling */
  .scroll-stack { list-style: none; margin: 30px auto 0; padding: 0 0 6vh; max-width: 1100px; }
  .sc { position: sticky; top: calc(var(--nav) + 18px + var(--i) * 12px); display: grid; grid-template-rows: 1fr auto; height: min(74vh, 600px); margin-bottom: 9vh;
        border-radius: 28px; overflow: hidden; transform-origin: 50% 0; will-change: transform; box-shadow: 0 30px 60px -34px rgba(23,22,20,.55); }
  .sc:last-child { margin-bottom: 0; }
  .sc-img { margin: 0; order: -1; overflow: hidden; min-height: 0; }
  .sc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .sc-copy { padding: 22px 22px 24px; }
  .sc-n { margin: 0; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 15px; letter-spacing: .06em; } .sc-n span { opacity: .55; }
  .sc-k { margin: 10px 0 0; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
  .sc h3 { margin: 4px 0 0; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: clamp(30px, 4vw, 58px); line-height: 1.02; letter-spacing: -.025em; }
  .sc-p { margin: 10px 0 0; font-size: 18px; line-height: 1.45; max-width: 24em; }
  .t-green { background: var(--green); color: var(--paper); } .t-green .sc-n, .t-green .sc-k { color: #e2c27a; }
  .t-sky { background: #bfe3ec; color: var(--ink); } .t-sky .sc-n { color: #1f6f7d; }
  .t-paper { background: #fbf8f1; color: var(--ink); } .t-paper .sc-n, .t-paper h3 { color: var(--gold); }
  .t-pink { background: #ffcde4; color: var(--ink); } .t-pink .sc-n { color: var(--rose-ink); }
  .t-gold { background: #e9dcbc; color: var(--ink); } .t-gold .sc-n { color: #6b4f12; }
  .sc a.fn { color: inherit; }
  @media (min-width: 900px) {
    .sc { grid-template-rows: none; grid-template-columns: 1fr 1fr; height: min(70vh, 560px); }
    .sc-img { order: 0; } .sc-copy { display: flex; flex-direction: column; justify-content: flex-end; padding: 44px 48px; }
    .sc-p { font-size: 21px; }
  }

  /* fade content (after React Bits Fade Content): blocks below the hook arrive out of a soft blur as they reach the
     screen, once each, 60 ms apart within a group. Content is only hidden once the script has marked the page ready,
     so nothing is lost without it; the hook itself is never hidden */
  .fade-ready .fc { opacity: 0; filter: blur(10px); transform: translateY(14px); transition: opacity .9s cubic-bezier(.22,1,.36,1), filter .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); transition-delay: var(--fd, 0s); }
  .fade-ready .fc.in { opacity: 1; filter: none; transform: none; }

  /* Round P10: "Watch the table when she arrives". Apple's method for a lifestyle product: one idea per screen, the
     object big and close, few words, scroll revealing the detail.
     1 arrival: full-bleed table, the headline over it, the photo settling as you scroll
     2 the object: the Rosé close-up pins and the camera moves in on the painted glass, the butterfly and the name,
       one line per stop
     3 the reaction: the street film and the reels   4 the table: a bento of evenings, fading up
     5 who's reaching: the scroll stack   6 starting is easy: three steps   7 the postcard */
  .arrival { height: 100svh; min-height: 560px; overflow: hidden; background: var(--deep); color: #fff; display: flex; align-items: flex-end; }
  .arr-media { position: absolute; inset: 0; }
  .arr-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform-origin: 50% 60%; will-change: transform; }
  .arrival::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,6,.15) 0%, rgba(10,8,6,.2) 40%, rgba(10,8,6,.82) 100%); }
  .arr-copy { position: relative; z-index: 1; padding-bottom: 72px; text-align: left; }
  .arr-copy .eyebrow { color: #e2c27a; text-align: left; max-width: none; }
  .arrival h1 { color: #fff; font-size: clamp(42px, 7vw, 104px); line-height: .98; letter-spacing: -.03em; margin: 10px 0 0; } .arrival h1 .g { color: #e2c27a; }
  .arr-sub { color: rgba(255,255,255,.88); font-size: 19px; max-width: 30em; margin: 18px 0 22px; }
  .arr-cue { position: absolute; z-index: 1; right: 24px; bottom: 26px; margin: 0; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.7); }
  @media (min-width: 900px) { .arr-copy { padding-bottom: 96px; } .arr-sub { font-size: 22px; } }

  .object { background: #120d0a; color: #fff; padding: 0; }
  .obj-pin { position: relative; height: 420vh; overflow: clip; }
  .obj-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
  .obj-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; max-width: none; }
  .obj-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,6,0) 45%, rgba(10,8,6,.75) 100%); pointer-events: none; }
  @media (min-width: 900px) { .obj-shade { background: linear-gradient(90deg, rgba(10,8,6,.8) 0%, rgba(10,8,6,.45) 35%, rgba(10,8,6,0) 60%); } .obj-lines li { align-items: center; padding-bottom: 0; } .obj-lines h2, .obj-lines p { max-width: 9.5em; } }
  .obj-lines { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; top: 0; height: 420vh; pointer-events: none; }
  .obj-lines li { position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; display: flex; align-items: flex-end; padding: 0 24px 15svh; opacity: 0; transition: opacity .6s ease; }
  .obj-lines li.on { opacity: 1; }
  .obj-lines h2, .obj-lines p { margin: 0; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: clamp(36px, 6vw, 88px); line-height: 1; letter-spacing: -.03em; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
  @media (min-width: 900px) { .obj-lines li { padding: 0 max(48px, calc((100vw - 1240px) / 2)) 18svh; } }

  .reaction { background: var(--white); padding-bottom: 56px; }
  .react-grid { display: grid; gap: 26px; align-items: center; }
  .react-copy h2 { font-size: clamp(40px, 6vw, 84px); line-height: 1; letter-spacing: -.03em; margin: 0; } .react-copy h2 .g { color: var(--gold); }
  .react-lede { font-size: 19px; max-width: 26em; margin: 16px 0 0; }
  .reaction .vox { max-width: 360px; width: 100%; margin: 0 auto; }
  @media (min-width: 900px) { .react-grid { grid-template-columns: 1.1fr 1fr; gap: 64px; } .reaction .vox { max-width: 420px; justify-self: end; margin: 0; } .react-lede { font-size: 21px; } }

  .table-sec { background: #120d0a; color: #fff; }
  .table-sec .eyebrow { color: #e2c27a; } .table-sec h2 { color: #fff; font-size: clamp(40px, 6vw, 84px); line-height: 1; letter-spacing: -.03em; } .table-sec h2 .g { color: #e2c27a; }
  .bento { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; gap: 10px; margin-top: 30px; }
  .bento figure { margin: 0; border-radius: 18px; overflow: hidden; }
  .bento img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
  .bento figure:hover img { transform: scale(1.04); }
  .b1 { grid-row: span 2; } .b2 { grid-column: span 1; } .b4 { grid-row: span 2; } .b5 { grid-column: span 1; }
  @media (min-width: 900px) {
    .bento { grid-template-columns: 1.1fr 1.4fr 1fr; grid-auto-rows: 220px; gap: 16px; margin-top: 44px; }
    .b1 { grid-row: span 2; } .b2 { grid-column: 2; } .b3 { grid-column: 3; grid-row: span 2; } .b4 { grid-column: 2; grid-row: span 1; } .b5 { display: none; }
  }

  .reach-sec2 { background: var(--paper); }
  .reach-sec2 h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; } .reach-sec2 h2 .g { color: var(--gold); }

  .start-sec { background: var(--white); }
  .start-sec h2 { font-size: clamp(40px, 6vw, 84px); line-height: 1; letter-spacing: -.03em; } .start-sec h2 .g { color: var(--gold); }
  .start { list-style: none; margin: 34px auto 0; padding: 0; display: grid; gap: 12px; max-width: 1040px; text-align: left; }
  .start li { position: relative; padding: 24px 22px 22px; border-radius: 20px; background: var(--paper); }
  .start span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--green); color: #fff; font: 600 15px/1 "SF Pro Display", sans-serif; }
  .start h3 { margin: 14px 0 4px; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 24px; color: var(--ink); }
  .start p { margin: 0; font-size: 17px; line-height: 1.45; color: var(--body); } .start a, .start-proof a { color: var(--green); font-weight: 500; text-underline-offset: 3px; }
  .start-proof { font-size: 17px; max-width: 34em; margin: 24px auto 0; color: var(--body); }
  @media (min-width: 900px) { .start { grid-template-columns: repeat(3, 1fr); gap: 16px; } .start li { padding: 30px 28px 28px; } .start p { font-size: 18px; } .start-proof { font-size: 19px; } }

  /* Round P11: the street interviews as a wall (after the testimonial wall on ui.aceternity.com). Each card is one
     reel: the face, "@proseccobella · Miami", the line from the reel's title card, and every third card the cover
     itself. The whole card opens the reel on Instagram, where the follow button is. Masonry columns; phones show six
     and a "See all 12" button */
  .wall { list-style: none; margin: 40px 0 0; padding: 0; columns: 1; column-gap: 16px; }
  .w-card { break-inside: avoid; margin: 0 0 16px; }
  .w-card a { display: block; padding: 20px 20px 16px; border-radius: 20px; background: #fff; border: 1px solid rgba(23,22,20,.07); text-decoration: none; color: var(--ink);
              box-shadow: 0 1px 2px rgba(23,22,20,.04), 0 18px 36px -26px rgba(23,22,20,.35); transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s; }
  .w-card a:hover, .w-card a:focus-visible { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(23,22,20,.04), 0 26px 46px -24px rgba(23,22,20,.45); }
  .w-head { display: flex; align-items: center; gap: 12px; }
  .w-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
  .w-who { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; } .w-who b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; } .w-who span { font-size: 14px; color: var(--body); }
  .w-ig { width: 22px; height: 22px; fill: none; stroke: #b83d82; stroke-width: 1.8; flex: none; } .w-ig circle:last-child { fill: #b83d82; stroke: none; }
  .w-q { display: block; margin: 16px 0 0; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; }
  .w-media { position: relative; display: block; margin-top: 14px; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; }
  .w-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
  .w-media i { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='%231f4d36'/%3E%3C/svg%3E") center / 26px no-repeat; }
  .w-go { display: block; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--green); }
  .wall-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
  @media (min-width: 600px) { .wall { columns: 2; } .wall-more { display: none; } }
  @media (min-width: 900px) { .wall { columns: 3; column-gap: 20px; } .w-card { margin-bottom: 20px; } }
  @media (min-width: 1200px) { .wall { columns: 4; } }

  /* Round P12: the wall leads screen 3 under "That's me."; the street film moves to its own screen about the category
     ("America's favourite sparkling wine. Name one."), where it belongs: the test the viewer takes too */
  .react-copy.center { text-align: center; } .react-copy.center .react-lede { margin-left: auto; margin-right: auto; }
  .cat-sec { background: var(--deep); color: #fff; }
  .cat-grid { display: grid; gap: 28px; align-items: center; }
  .cat-sec .eyebrow { color: #e2c27a; }
  .cat-sec h2 { color: #fff; font-size: clamp(40px, 5.6vw, 80px); line-height: 1; letter-spacing: -.03em; margin: 0; } .cat-sec h2 .g { color: #e2c27a; }
  .cat-lede { font-size: 20px; line-height: 1.45; color: rgba(255,255,255,.88); max-width: 26em; margin: 20px 0 0; } .cat-lede .fn { color: #e2c27a; }
  .cat-pay { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 22px; line-height: 1.3; color: #fff; max-width: 22em; margin: 16px 0 0; }
  .cat-sec .vox { max-width: 380px; width: 100%; margin: 0 auto; }
  @media (min-width: 900px) { .cat-grid { grid-template-columns: 1.1fr 1fr; gap: 64px; } .cat-sec .vox { max-width: 440px; justify-self: end; margin: 0; } .cat-lede { font-size: 22px; } .cat-pay { font-size: 24px; } }

  /* Round P13: "Made to be held" as one compact section. The green bottles on ice on the left; the six points of
     difference on the right, numbered, each arriving a beat after the last as the section comes in */
  .six-sec { background: var(--deep); color: #fff; }
  .six { display: grid; gap: 28px; align-items: center; }
  .six-img { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 40px 70px -40px rgba(0,0,0,.8); }
  .six-img img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%; transform: scale(1.08); transition: transform 1.6s cubic-bezier(.22,1,.36,1); }
  .six-sec.lit .six-img img { transform: scale(1); }
  .six-copy .eyebrow { color: #e2c27a; text-align: left; }
  .six-copy h2 { color: #fff; font-size: clamp(40px, 5.4vw, 76px); line-height: 1; letter-spacing: -.03em; margin: 0 0 18px; }
  .six-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .six-list li { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-top: 1px solid rgba(226,194,122,.22); }
  .six-n { flex: none; width: 34px; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 26px; line-height: 1.1; color: #e2c27a; }
  .six-list h3 { margin: 0 0 3px; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 21px; color: #fff; }
  .six-list p { margin: 0; font-size: 17px; line-height: 1.45; color: rgba(255,255,255,.78); }
  .six-spec { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(226,194,122,.22); font-size: 14px; letter-spacing: .04em; color: rgba(255,255,255,.65); } .six-spec .fn { color: #e2c27a; }
  .fade-ready .six-list li { opacity: 0; transform: translateX(18px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--k) * .14s + .2s); }
  .fade-ready .six-sec.lit .six-list li { opacity: 1; transform: none; }
  @media (min-width: 900px) { .six { grid-template-columns: 1fr 1.1fr; gap: 72px; } .six-img { aspect-ratio: 4 / 5; max-height: 720px; } .six-list h3 { font-size: 23px; } .six-list p { font-size: 18px; } }

  /* Round P14: "who's reaching" is just the six names, as coloured tiles that arrive in turn; the postcard is gone and
     the call to action closes "Starting is easy" */
  .who-tiles { list-style: none; margin: 28px auto 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 1100px; }
  .who-tiles li { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 18px 14px; border-radius: 18px; text-align: center;
                  font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 20px; line-height: 1.15; letter-spacing: -.01em; }
  .who-tiles .t-paper { background: #fff; border: 1px solid rgba(134,102,28,.25); color: var(--gold); }
  .fade-ready .who-tiles li { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--k) * .08s); }
  .fade-ready .who-tiles.in li { opacity: 1; transform: none; }
  @media (min-width: 900px) { .who-tiles { grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 36px; } .who-tiles li { min-height: 150px; font-size: 22px; } }
  .start-cta { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .start-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px; margin: 4px 0 0; font-size: 17px; }
  .start-contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--green); font-weight: 500; text-underline-offset: 3px; }
  .start-contact span { align-self: center; color: var(--body); }
  @media (max-width: 599px) { .start-contact { flex-direction: column; align-items: center; } .start-contact span { display: none; } }

  /* Round P15: luxury pass. The dark sections move from near-black to the brand's bottle green, lit from one side like
     glass in candlelight; the arrival copy sits high so the bottles below it stay clear; gold hairlines frame the dark
     screens; headlines balance their lines */
  :root { --deep: radial-gradient(120% 90% at 22% 18%, #2c6447 0%, #1f4d36 42%, #12301f 100%); }
  .six-sec, .cat-sec { background: var(--deep); position: relative; }
  .six-sec::before, .cat-sec::before { content: ""; position: absolute; left: 50%; top: 0; width: min(1240px, calc(100% - 32px)); height: 1px; transform: translateX(-50%);
                                       background: linear-gradient(90deg, transparent, rgba(226,194,122,.55), transparent); }
  .arrival { background: #12301f; align-items: flex-start; }
  .arr-media img { object-position: 50% 78%; }
  .arrival::after { background: linear-gradient(180deg, rgba(14,40,27,.88) 0%, rgba(14,40,27,.62) 30%, rgba(14,40,27,.12) 58%, rgba(14,40,27,0) 75%, rgba(14,40,27,.35) 100%); }
  .arr-copy { padding-top: calc(var(--nav) + 32px); padding-bottom: 0; }
  @media (min-width: 900px) { .arr-copy { padding-top: calc(var(--nav) + 44px); padding-bottom: 0; } }
  .arr-cue { color: rgba(255,255,255,.8); }
  h1, h2 { text-wrap: balance; }
  .six-img { box-shadow: 0 40px 80px -40px rgba(5,20,12,.9), 0 0 0 1px rgba(226,194,122,.18); }
  .cat-sec .vox { box-shadow: 0 40px 80px -40px rgba(5,20,12,.9), 0 0 0 1px rgba(226,194,122,.18); }

  /* light sweep: once, as "Made to be held" arrives, a narrow band of warm light crosses the bottles like a glint
     moving over glass. Soft, slow, never repeated; off with reduced motion */
  .six-img { position: relative; }
  .six-img::after { content: ""; position: absolute; inset: -10% -60%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
                    background: linear-gradient(105deg, transparent 38%, rgba(255,232,180,0) 41%, rgba(255,232,180,.58) 50%, rgba(255,232,180,0) 59%, transparent 62%);
                    transform: translateX(-60%); }
  @media (prefers-reduced-motion: no-preference) {
    .six-sec.lit .six-img::after { animation: glint 2.4s cubic-bezier(.45,.05,.25,1) .7s 1 both; }
  }
  @keyframes glint { 0% { opacity: 0; transform: translateX(-60%); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(60%); } }

  /* Round P17: one photo, one message per screen. The page opens on the green bottles on ice with the brand line
     ("Everyone remembers Prosecco. Almost no one remembers who made it."); "Made to be held" follows as six numbered
     points on paper with no second photo; the category screen links to the blog post as its proof */
  main > section.bp-hero { height: auto; min-height: 0; padding: calc(var(--nav) + 28px) 0 56px; }
  .bp-hero .hero-btn { background: #e2c27a; border-color: #e2c27a; color: #17251c; }
  @media (max-width: 899px) { .bp-hero .six-copy { order: -1; } .bp-hero .six-img { aspect-ratio: 5 / 4; } }
  .bp-hero h1 { color: #fff; font-size: clamp(38px, 4.6vw, 66px); line-height: 1.02; letter-spacing: -.03em; margin: 8px 0 0; } .bp-hero h1 .g { color: #e2c27a; }
  .hero-pay { font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: clamp(22px, 2.2vw, 30px); color: #fff; margin: 22px 0 26px; }
  @media (min-width: 900px) { main > section.bp-hero { padding: calc(var(--nav) + 48px) 0 88px; } .bp-hero .six-img { aspect-ratio: 4 / 5; } }
  .held-sec { background: var(--paper); }
  .held-sec h2 { font-size: clamp(40px, 5.4vw, 76px); line-height: 1; letter-spacing: -.03em; }
  .held-grid { list-style: none; margin: 34px auto 0; padding: 0; display: grid; gap: 12px; max-width: 1100px; }
  .held-grid li { display: flex; gap: 16px; align-items: flex-start; padding: 22px 22px 20px; border-radius: 18px; background: #fff; border: 1px solid rgba(134,102,28,.14); }
  .held-grid .six-n { color: var(--gold); }
  .held-grid h3 { margin: 0 0 4px; font-family: "Favorit", "SF Pro Display", sans-serif; font-weight: 500; font-size: 21px; color: var(--ink); }
  .held-grid p { margin: 0; font-size: 17px; line-height: 1.45; color: var(--body); }
  .held-spec { max-width: 1100px; margin: 18px auto 0; text-align: center; color: var(--body); border-top: 0; } .held-spec .fn { color: var(--green); }
  .fade-ready .held-grid li { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--k) * .1s); }
  .fade-ready .held-grid.in li { opacity: 1; transform: none; }
  @media (min-width: 900px) { .held-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } .held-grid li { padding: 28px 26px 26px; } .held-grid p { font-size: 18px; } }
  .cat-proof { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px; color: #e2c27a; font-weight: 500; font-size: 18px; text-underline-offset: 4px; }

  /* Round P18: the homepage's format. A full-width masthead (the green bottles on ice, bottles to the right), then the
     centred intro on cream with the fizz; the category screen follows; "Made to be held" is six titles as coloured
     tiles; the film runs full width on phones */
  main > section.bp-mast { height: 62svh; min-height: 420px; background: #12301f; overflow: hidden; }
  .bp-mast .ph-img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 62%; }
  .bp-mast::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0;
                    background: linear-gradient(105deg, transparent 40%, rgba(255,232,180,.5) 50%, transparent 60%); transform: translateX(-60%); }
  @media (prefers-reduced-motion: no-preference) { .bp-mast::after { animation: glint 2.6s cubic-bezier(.45,.05,.25,1) .9s 1 both; } }
  @media (min-width: 900px) { main > section.bp-mast { height: min(72svh, 46vw); } }
  .intro h1 .g { color: var(--gold); }
  .held-tiles li { flex-direction: column; gap: 10px; }
  .ht-n { font-size: 15px; letter-spacing: .1em; opacity: .7; }
  .held-tiles { margin-top: 30px; }
  @media (min-width: 900px) { .held-tiles { grid-template-columns: repeat(3, 1fr); } .held-tiles li { min-height: 170px; font-size: 26px; } }
  @media (max-width: 899px) { .cat-sec .vox { max-width: none; width: calc(100% + 32px); margin: 0 -16px; border-radius: 0; aspect-ratio: 9 / 15; } }

  /* Round P19: one rhythm, the homepage's. Every section uses the base padding (40px phones, 56px desktop); section
     headlines use the homepage size (30 to 46px); content sits 26px under the headline (34px on desktop); the
     category screen is centred like everything else, with the film under the words */
  .react-copy h2, .cat-sec h2, .held-sec h2, .start-sec h2, .reach-sec2 h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; letter-spacing: normal; margin: 0; }
  .reaction { padding-bottom: 40px; }
  .wall, .who-tiles, .held-tiles, .start { margin-top: 26px; }
  .react-lede, .cat-lede { margin-top: 14px; }
  .wall-foot, .start-proof, .start-cta { margin-top: 22px; }
  .cat-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 26px; }
  .cat-copy { max-width: 34em; } .cat-lede, .cat-pay { margin-left: auto; margin-right: auto; }
  .cat-pay { font-size: 20px; margin-top: 10px; } .cat-proof { margin-top: 8px; }
  @media (min-width: 900px) {
    .reaction { padding-bottom: 56px; }
    .wall, .who-tiles, .held-tiles, .start { margin-top: 34px; }
    .cat-grid { grid-template-columns: 1fr; gap: 34px; } .cat-sec .vox { justify-self: center; max-width: 420px; }
    .cat-lede { font-size: 20px; } .cat-pay { font-size: 22px; }
  }

  /* Round P20: the intro on the section rhythm (no extra gap above the eyebrow, even gaps below); the brand line is the
     headline's third line; the category screen lighter at its foot, closing on a gold rule, the film flush on phones */
  main > .ph-hero + .intro { padding: 40px 0; }
  .ph-hero + .intro .eyebrow { margin-bottom: 14px; }
  .intro h1 { margin: 0; }
  @media (min-width: 900px) { main > .ph-hero + .intro { padding: 56px 0; } .ph-hero + .intro .eyebrow { margin-bottom: 18px; } }
  .cat-sec { border-bottom: 3px solid #c9a24e; }
  .cat-sec::before { display: none; }
  @media (max-width: 899px) { .cat-sec { padding-bottom: 0; } .cat-sec .vox { margin-bottom: 0; } }

  /* Round P21: on phones the wall becomes an Instagram-style grid, three covers across with the handle on each; every
     reel shows at once (no "See all"), and each tile still opens its reel */
  @media (max-width: 599px) {
    .wall { columns: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-left: -12px; margin-right: -12px; }
    .w-card { margin: 0; min-width: 0; } .w-card.more { display: block; } .w-media img { display: block; }
    .w-card a { position: relative; padding: 0; border: 0; border-radius: 6px; overflow: hidden; box-shadow: none; }
    .w-card a:hover, .w-card a:focus-visible { transform: none; box-shadow: none; }
    .w-q, .w-go, .w-av, .w-ig, .w-who span { display: none; }
    .w-head { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: block; padding: 18px 6px 6px; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
    .w-who b { display: block; font-size: 10.5px; line-height: 1.2; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
    .w-media { margin: 0; border-radius: 0; aspect-ratio: 9 / 16 !important; }
    .w-media img { object-position: 50% 30%; }
    .w-media i { width: 32px; height: 32px; margin: -16px 0 0 -16px; background-size: 16px; }
    .wall-more { display: none !important; }
  }

  /* Round P22: blocks, cards and tiles behave like the scroll-lit headlines. They wait grey and soft, come into full
     colour as they rise into view, and go back to grey if you scroll up past them, so up and down the page reads the
     same way */
  .fade-ready .fc { opacity: .35; filter: grayscale(1) blur(2px); transform: translateY(12px); transition: opacity .8s cubic-bezier(.22,1,.36,1), filter .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); transition-delay: var(--fd, 0s); }
  .fade-ready .fc.in { opacity: 1; filter: none; transform: none; }
  .fade-ready .who-tiles li { opacity: .35; filter: grayscale(1); }
  .fade-ready .who-tiles.in li { opacity: 1; filter: none; }