/* Final mobile fidelity layer. It intentionally loads after every legacy mobile
   stylesheet so desktop grid coordinates cannot leak into the mobile flow. */
@media(max-width:780px){
  html,body{max-width:100%;overflow-x:clip}

  /* Preserve the three-act hero motion, but size first-act copy in normal flow. */
  .hero-cinematic{height:185svh;min-height:1320px;padding:0;background:#f5f3ee}
  .hero-sticky{position:sticky;top:70px;height:calc(100svh - 70px);min-height:610px;overflow:hidden}
  .hero-copy-new{
    position:absolute;inset:0;z-index:4;width:100%;height:100%;min-height:0;
    padding:20px 20px 0;display:flex;flex-direction:column;align-items:flex-start;
    pointer-events:none;
  }
  .hero-eyebrow,.hero-cinematic h1,.hero-cinematic .hero-intro,.hero-actions{
    position:relative;inset:auto;width:auto;
  }
  .hero-eyebrow{max-width:calc(100% - 88px);margin:0 0 24px;font-size:6.5px;line-height:1.45}
  .hero-cinematic h1{
    width:100%;margin:0;font-size:clamp(50px,15.2vw,64px);line-height:.88;
    letter-spacing:-.075em;
  }
  .hero-cinematic h1 span{display:inline;white-space:normal}
  .hero-cinematic .hero-intro{
    align-self:flex-end;width:min(72vw,300px);max-width:none;margin:13px 0 0;
    color:#292b27;text-align:right;font-size:clamp(13px,4vw,16px);line-height:1.16;
    letter-spacing:-.035em;
  }
  .hero-actions{align-self:flex-end;margin:14px 0 0;pointer-events:auto}
  .hero-actions a{min-width:152px;flex:none;padding:12px 14px;font-size:7px}
  .hero-media .hero-product{
    left:50%;right:auto;top:auto;bottom:-2vh;width:100vw;max-width:560px;height:59vh;
    object-fit:contain;object-position:center bottom;
    transform:translate3d(calc(-50% + var(--hero-progress,0) * 6vw),calc(var(--hero-progress,0) * -3vh),0) scale(calc(1 + var(--hero-progress,0) * .06))!important;
    filter:drop-shadow(0 24px 30px rgba(93,65,105,.13));
  }
  .hero-proof-row{
    left:14px;bottom:47px;gap:7px 13px;padding:9px 10px;border:1px solid rgba(41,43,39,.08);
    border-radius:9px;background:rgba(249,247,243,.72);color:#292b27;
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  }
  .hero-proof-row span{color:#686a63}

  /* The hidden 214px menu is absolute so it no longer recentres the trigger. */
  .site-language{top:17px;right:78px;width:58px}
  .site-language-toggle{width:58px;min-width:58px;height:36px;padding:0 10px}
  .site-language-menu{position:absolute;top:100%;right:0;width:min(214px,calc(100vw - 24px));margin-top:8px}
  html[dir="rtl"] .site-language{right:auto;left:78px}
  html[dir="rtl"] .site-language-menu{right:auto;left:0}

  /* Reset every desktop grid line assignment on the one-column mobile grid. */
  .desire-grid,.brand-portal-grid{display:grid;grid-template-columns:minmax(0,1fr);overflow:visible}
  .desire-card,.desire-card:nth-child(n),.brand-portal-grid a,.brand-portal-grid a:nth-child(n){
    grid-column:1 / -1!important;grid-row:auto!important;min-width:0;width:100%;margin:0;
  }
  .desire-card,.desire-card:nth-child(n){height:76svh;min-height:590px;max-height:760px}
  .desire-card img{inset:0;width:100%;height:100%;object-fit:cover;transform:none}
  .desire-honey img{object-position:center 48%}
  .desire-berry img{object-position:center 44%}
  .desire-pomegranate img{object-position:center 48%}
  .desire-citrus img{object-position:center 48%}
  .desire-noir img{object-position:center 34%}
  .desire-coffee img{object-position:center 46%}
  .desire-card>div{left:20px;right:20px;bottom:24px}

  .brand-portal-grid{gap:12px}
  .brand-portal-grid a,.brand-portal-grid a:nth-child(n){height:72svh;min-height:560px;max-height:730px}

  .mobile-cta{bottom:calc(10px + env(safe-area-inset-bottom));left:10px;right:10px}
}

@media(max-width:390px){
  .hero-copy-new{padding-left:17px;padding-right:17px}
  .hero-eyebrow{margin-bottom:20px}
  .hero-cinematic h1{font-size:clamp(48px,14.8vw,58px)}
  .hero-cinematic .hero-intro{font-size:13px;margin-top:10px}
  .hero-actions{margin-top:11px}
  .site-language{right:72px}
  html[dir="rtl"] .site-language{left:72px}
}