/* Keep the desktop composition; group the mobile copy so the rating follows it. */
.hero-intro{display:contents}
.hero-cocktail{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.hero-cocktail img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}

@media(max-width:700px){
  .nav-ribbon{
    height:152px;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:108px 44px;
    column-gap:12px;
  }
  .nav-ribbon .brand{
    grid-column:1;
    grid-row:1;
    max-width:100%;
  }
  .nav-ribbon .phone{
    max-width:100%;
    font-size:clamp(15px,4.8vw,19px);
    padding-left:12px;
    gap:6px;
  }
  .nav-ribbon .navlinks{
    grid-column:1 / -1;
    grid-row:2;
    justify-self:stretch;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    font-size:12px;
  }
  .nav-ribbon .navlinks a{
    justify-self:center;
    justify-content:center;
    min-width:44px;
    min-height:44px;
  }
  .hero-editorial{height:calc(100% - 152px)}
  .hero-intro{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    position:absolute;
    top:62px;
    left:0;
    width:33%;
    max-width:180px;
    z-index:5;
  }
  .hero-intro .hero-word--left{
    position:static;
    flex-shrink:0;
    white-space:nowrap;
  }
  .hero-intro .hero-support--left{
    position:static;
    width:100%;
    margin:24px 0 0;
  }
  .hero-intro .hero-badge--top{
    position:static;
    flex-shrink:0;
    margin-top:20px;
    white-space:nowrap;
  }
  /* The tumbler needs its own vertical space above the lower-right headline. */
  .hero{height:880px}
  .hero-cocktail{left:56%;width:300px;height:330px;bottom:244px}
  .hero-cocktail:before{width:260px;height:260px;bottom:12px}
  .hero-word--right{font-size:48px;z-index:5}
  .hero-support--right{font-size:clamp(8px,2.3vw,11px);width:53%}
}

/* Wider phones have room for the glass alongside the lower-right copy. */
@media(min-width:521px) and (max-width:700px){
  .hero{height:820px}
  .hero-cocktail{left:calc(60% - 90px);height:400px;bottom:100px}
}

/* The halal seal belongs to the dish card, not a separate row in its heading. */
.craving-result .hero-halal{
  position:absolute;
  z-index:3;
  top:auto;
  left:24px;
  bottom:20px;
  width:68px;
  height:68px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--cream);
  box-shadow:none;
  transform:rotate(7deg);
  pointer-events:none;
}
.craving-result .hero-halal::before{
  inset:0;
  border:1.5px dashed rgba(17,47,39,.52);
  border-radius:48% 52% 45% 55% / 53% 46% 54% 47%;
  box-shadow:none;
}
.craving-result .hero-halal img{
  display:block;
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  padding:8px;
  box-sizing:border-box;
  object-fit:contain;
  filter:brightness(0) saturate(100%) invert(14%) sepia(18%) saturate(1650%) hue-rotate(103deg) brightness(86%) contrast(91%);
  transform:rotate(-7deg);
}

@media(max-width:374px){
  .hero-cocktail{left:62%;height:310px}
  .nav-ribbon .phone{height:42px;padding-left:9px}
  .nav-ribbon .phone-icon{width:30px;height:30px;flex-basis:30px}
  .hero-intro .hero-support--left{font-size:10px}
  .hero-intro .hero-badge--top{font-size:8px;gap:8px;padding:8px}
  .hero-intro .hero-badge--top span{font-size:8px}
}