/* Home scroll story: phone layout (loaded with media="(max-width: 760px)").
   The export is a desktop composition (absolute positions in vw/vh); here every chapter is re-stacked:
   media on top, text below. The animation values written by page3.js are kept where they still make sense. */

/* 1 · statement: wraps inside the screen instead of running off the sides */
#bv-hero > div > div:nth-child(3) h2 { font-size: clamp(16px, 4.6vw, 21px) !important; white-space: normal !important; letter-spacing: .05em !important; gap: .35em !important; max-width: 100%; }
#bv-hero > div > div:nth-child(3) h2 span { width: auto !important; max-width: 100%; text-align: center; }
#bv-hero > div > div:nth-child(3) { padding: 0 20px !important; }

/* 2 · globe on top (drawn by page3.js in the upper half on phones), text at the bottom */
#bv-map > div > div:nth-child(2) { left: 20px !important; right: 20px !important; width: auto !important; top: auto !important; bottom: 7vh !important; transform: none !important; gap: 14px !important; }

/* 3 · Brand creation / Liquid development / Production & bottling / Logistics: video on top, text below */
#bv-brand, #bv-lab, #bv-prod, #bv-logi { height: auto !important; }
#bv-brand > div, #bv-lab > div, #bv-prod > div, #bv-logi > div { position: relative !important; height: auto !important; padding: 84px 20px 64px; display: flex; flex-direction: column; gap: 30px; }
#bv-brand > div > div:nth-child(1), #bv-lab > div > div:nth-child(1), #bv-prod > div > div:nth-child(1), #bv-logi > div > div:nth-child(1) {
  position: relative !important; left: auto !important; right: auto !important; top: auto !important; width: 100% !important; height: 54vh !important; flex: none; }
#bv-brand > div > div:nth-child(2), #bv-lab > div > div:nth-child(2), #bv-prod > div > div:nth-child(2), #bv-logi > div > div:nth-child(2) {
  position: relative !important; left: auto !important; right: auto !important; top: auto !important; width: 100% !important; transform: none !important; gap: 18px !important; }
#bv-logi > div > div:nth-child(2) > div:last-child { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px 14px !important; max-width: 360px; }

/* 4 · Retail-ready solutions: no side indicator; the three cards fully shown, stacked, sliding up as they arrive */
#bv-story { height: auto !important; }
#bv-story > div { position: relative !important; height: auto !important; overflow: visible !important; padding: 72px 20px 64px; display: flex; flex-direction: column; gap: 24px; }
#bv-story > div > h2 { position: relative !important; left: auto !important; top: auto !important; transform: none !important; clip-path: none !important; }
#bv-story > div > div:nth-child(2) { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; display: flex; flex-direction: column; gap: 22px; }
#bv-story > div > div:nth-child(2) > div { position: relative !important; height: auto !important; overflow: visible !important; display: flex; flex-direction: column; gap: 16px; order: 1; }
#bv-story > div > div:nth-child(2) > a { position: relative !important; right: auto !important; bottom: auto !important; order: 2; align-self: flex-start; background: #141210 !important; color: #fff !important; }
#bv-story figure { position: relative !important; inset: auto !important; height: 66vh; min-height: 420px; transform: none !important; overflow: hidden; }
#bv-story figure figcaption { left: 20px !important; right: 20px !important; bottom: 22px !important; gap: 10px !important; }
#bv-story figure figcaption > span { opacity: 1 !important; transform: none !important; }
#bv-story figure figcaption > span:first-child { font-size: 24px !important; }
#bv-story figure figcaption > span:nth-child(2) { font-size: 14px !important; }
#bv-story figure > div:last-child:not(.rr-shade) { opacity: 0 !important; }
#bv-story figure figcaption { top: 0 !important; bottom: 0 !important; }
#bv-story > div > div:nth-child(3) { display: none !important; }

/* slide-up entrance used on phones (classes added by assets/js/mobile.js) */
#dc-root .m-reveal { opacity: 0; transform: translateY(48px) !important; transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
#dc-root .m-reveal.m-in { opacity: 1; transform: none !important; }
@media (prefers-reduced-motion: reduce) { #dc-root .m-reveal { opacity: 1; transform: none !important; transition: none; } }