/* Photo-led first view, shared by the Japanese and English homepages. */
.home-photo .global-nav {
  background: rgba(3, 12, 15, .94);
  border-bottom-color: rgba(255, 255, 255, .1);
}

.home-photo .hero--photo {
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: min(900px, calc(100svh - 60px));
  padding: 0;
  background: #030c0f;
  color: #fff;
  text-align: left;
}

.home-photo .hero--photo::before,
.home-photo .hero--photo::after {
  display: none;
}

.hero__photograph {
  position: absolute;
  inset: 0 0 0 36%;
  z-index: -2;
}

.hero__photograph img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 60% 50%;
}

.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #030c0f 26%, rgba(3, 12, 15, .94) 36%, rgba(3, 12, 15, .12) 43%, transparent 49%),
    linear-gradient(0deg, rgba(3, 12, 15, .6), transparent 16%);
  pointer-events: none;
}

.home-photo .hero--photo > .container {
  display: flex;
  align-items: center;
  flex: 1;
  width: 100%;
  max-width: 1440px;
  padding: 88px clamp(32px, 6.7vw, 112px) 104px;
}

.hero__copy {
  width: min(100%, 640px);
}

.hero__eyebrow {
  margin: 0 0 30px;
  color: #c4cccb;
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .22em;
}

.home-photo .hero--photo .hero__title {
  margin: 0 0 28px;
  color: #fff;
  font-size: clamp(2.4rem, 4.1vw, 4.1rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.06em;
  background: none;
  -webkit-text-fill-color: currentColor;
  text-wrap: initial;
  animation: none;
}

.hero__title-line {
  display: block;
}

.home-photo .hero--photo .hero__subtitle {
  max-width: 460px;
  margin: 0 0 32px;
  color: #d8dedd;
  font-size: 1rem;
  line-height: 1.95;
  letter-spacing: .015em;
  animation: none;
}

.home-photo .hero--photo .hero-cta-row {
  justify-content: flex-start;
  gap: 24px;
  margin: 0;
}

.home-photo .hero--photo .app-store-badge {
  flex: none;
  animation: none;
  box-shadow: none;
}

.home-photo .hero--photo .app-store-badge img {
  height: 52px;
  border-color: rgba(255, 255, 255, .65);
  border-radius: 9px;
}

.home-photo .hero--photo .hero-cta-secondary {
  min-height: 48px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: #fff;
  font-size: .85rem;
  font-weight: 500;
}

.home-photo .hero--photo .hero-cta-secondary:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
  transform: none;
}

.hero__availability {
  margin: 16px 0 0;
  color: #c4cccb;
  font-size: .73rem;
  letter-spacing: .035em;
}

.hero__footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(32px, 6.7vw, 112px) 30px;
  color: #d3d8d5;
  font-size: .75rem;
}

.hero__airpods {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

.hero__airpods svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.hero__airpods:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.hero__scene {
  margin: 0;
  color: #d3d8d5;
  font-size: .7rem;
  letter-spacing: .12em;
}

.hero--photo a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 6px;
}

.home-photo:lang(en) .hero--photo .hero__title {
  font-size: clamp(2.4rem, 4.1vw, 4.1rem);
  line-height: 1.12;
  letter-spacing: -.055em;
}

@media (max-width: 1023px) {
  .home-photo .global-nav__inner { height: 56px; }
  .home-photo .hero--photo { min-height: 0; }
  .hero__photograph { position: relative; inset: auto; order: 2; z-index: 0; width: 100%; aspect-ratio: 3 / 2; }
  .hero__photograph img { object-position: center; }
  .hero__shade {
    display: none;
  }
  .home-photo .hero--photo > .container {
    order: 1;
    align-items: flex-start;
    padding: 30px 24px 26px;
  }
  .hero__eyebrow { margin-bottom: 18px; font-size: .59rem; letter-spacing: .19em; }
  .home-photo .hero--photo .hero__title {
    margin-bottom: 18px;
    font-size: clamp(1.9rem, 8.6vw, 3.4rem);
    line-height: 1.45;
    letter-spacing: -.055em;
  }
  .home-photo .hero--photo .hero__subtitle {
    margin-bottom: 22px;
    font-size: .84rem;
    line-height: 1.9;
  }
  .home-photo .hero--photo .hero-cta-row { gap: 20px; }
  .home-photo .hero--photo .app-store-badge img { height: 48px; }
  .home-photo .hero--photo .hero-cta-secondary { font-size: .77rem; }
  .hero__availability { margin-top: 12px; font-size: .66rem; }
  .hero__footer { order: 3; align-items: flex-start; flex-direction: column; gap: 0; padding: 12px 24px 20px; }
  .hero__scene { margin-top: 2px; font-size: .62rem; }
  .home-photo:lang(en) .hero--photo .hero__title {
    font-size: clamp(2.4rem, 10.6vw, 4rem);
    line-height: 1.12;
  }
}

@media (max-width: 359px) {
  .home-photo .hero--photo > .container { padding-inline: 20px; }
  .home-photo .hero--photo .hero-cta-row { gap: 16px; }
  .hero__footer { padding-inline: 20px; }
}