/* The original hero font and scene are reused for the uppercase brand. */
@font-face {
  font-family: "Humane";
  src: url("../assets/yoovoy-brand/Humane-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.yoovoy-brand-live { background:#000; }
.yoovoy-brand-fallback {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding-bottom:18.5vh; color:#fff; pointer-events:none;
  font:400 36vw/.909736 "Humane",sans-serif; letter-spacing:.015em;
}
.yoovoy-brand-live:has(canvas) .yoovoy-brand-fallback { visibility:hidden; }
.yoovoy-hero-cantonese {
  margin:0 0 20px; color:#fff; opacity:1; text-align:center;
  font-family:"PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:clamp(26px,2.5vw,36px); font-weight:600; line-height:1.3;
  letter-spacing:.24em; text-indent:.24em;
}
/* Keep the animated wordmark and bilingual introduction in separate bands.
   Cap the scene width by viewport height on wide/short screens. */
@media(min-width:992px) {
  .hero {
    /* Centre the visible Humane wordmark and introduction as one group.
       Compensate for the fonts' empty line-box space; move both layers together. */
    --yoovoy-hero-center-offset:calc(1.6vh + min(6.67vw,12.34vh) - 76px);
  }
  .hero .yoovoy-brand-live {
    left:50%; right:auto; bottom:22%;
    width:min(100%,185vh); transform:translate(-50%,var(--yoovoy-hero-center-offset));
  }
  .hero .yoovoy-brand-fallback {
    font-size:min(36vw,66.6vh); padding-bottom:14.44vh;
  }
  .hero .container.down.nm {
    position:absolute; top:calc(65% + var(--yoovoy-hero-center-offset)); left:0; right:0;
    transform:none; z-index:2;
  }
}

/* Replace the legacy placeholder on the homepage brand badges. */
.ceo-photo, .ceo-photo._01 {
  background: #000 url("../assets/images/I055.svg") center / 85% no-repeat;
}
.menu-wrapper { background-image:none; }