/* Home-page hero visual and contrast tuning. */
.hero-media {
  background: #071a31;
  overflow: hidden;
  animation: none;
}
.hero-look {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: none;
}
.hero-look.active {
  display: block;
  animation: heroBackgroundZoom 18s ease-in-out infinite alternate;
}
@keyframes heroBackgroundZoom {
  from { transform: scale(1); }
  to { transform: scale(1.045); }
}
.hero-shade {
  background: linear-gradient(90deg, rgba(3, 13, 25, .77) 0%, rgba(3, 13, 25, .56) 40%, rgba(3, 13, 25, .12) 72%, rgba(3, 13, 25, .08) 100%), linear-gradient(0deg, rgba(3, 13, 25, .38), transparent 55%);
}
.hero h1 { color: #fffdf8; }
.hero h1 em { color: #e8c875; }
.hero-title-rotator { display: grid; height: 1em; overflow: hidden; }
.hero-title-phrase { display: block; grid-area: 1 / 1; white-space: nowrap; animation: heroTitleCycle 7s cubic-bezier(.65, 0, .35, 1) infinite; }
.hero-title-static { display: block; margin-top: .18em; color: #fffdf8; font-size: .62em; font-weight: 500; letter-spacing: -.02em; }
.hero-title-phrase:nth-child(1) { animation-name: heroTitleBespoke; }
.hero-title-phrase:nth-child(2) { animation-name: heroTitleTimeless; }
@keyframes heroTitleBespoke {
  0%, 40% { opacity: 1; transform: translateY(0); }
  48%, 92% { opacity: 0; transform: translateY(-105%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes heroTitleTimeless {
  0%, 40% { opacity: 0; transform: translateY(105%); }
  48%, 92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(105%); }
}
.hero-copy { color: #f4ead7; }
.hero .eyebrow { color: #e8c875; }
.hero .button { background: #d8b566; border-color: #d8b566; }
.hero .button:hover { background: #f0d997; }
.hero .button-ghost { background: rgba(7, 26, 49, .2); color: #fffdf8; border-color: rgba(255, 255, 255, .7); }
.hero .button-ghost:hover { background: #fffdf8; color: #071a31; }
.hero-look-selector { position: absolute; z-index: 1; bottom: 54px; right: max(24px, calc((100vw - 1180px) / 2)); display: flex; align-items: center; gap: 14px; }
.hero-look-selector > span { color: #e8c875; font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.hero-look-selector > div { display: flex; gap: 8px; }
.hero-look-button { width: 72px; height: 50px; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.45); background: transparent; cursor: pointer; }
.hero-look-button img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hero-look-button.active { border: 2px solid #e8c875; }
.hero-look-button:hover { border-color: #fffdf8; }
.hero-scroll { bottom: 54px; color: #fffdf8; }
.hero-scroll span { background: #e8c875; }
.brand-showcase .showcase-content h2 { display: flex; align-items: center; justify-content: center; gap: .16em; line-height: 1; }
.brand-showcase .showcase-content h2 em { display: inline-block; transform: translateY(-.16em); }
@media (max-width: 520px) {
  /* Keep the model's face below the fixed mobile header and in frame. */
  .hero-look {
    top: 70px;
    height: calc(100% - 70px);
    object-position: 76% center;
  }
  /* Place both labels on the left, away from the model's face. */
  .hero-kicker { font-size: 0; line-height: 1.6; }
  .hero-kicker span { display: none; }
  .hero-kicker::after {
    content: "Karachi · Pakistan\A Since 1996";
    white-space: pre;
    font-size: 10px;
  }
  .hero-scroll { display: none; }
  .hero-title-phrase { font-size: .88em; letter-spacing: -.035em; }
  .hero-look-selector {
    bottom: 20px;
    right: auto;
    left: 50%;
    width: max-content;
    transform: translateX(-50%);
    align-items: center;
    flex-direction: column;
    gap: 8px;
  }
  .hero-look-button { width: 58px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title-phrase:nth-child(2) { display: none; }
  .hero-look.active { animation: none; }
}