/* Shared six-sekitori hero, v1.20.44.
 * Give the photographs their own full-width row. The cast is still laid out
 * from its original canvas ratios, so increasing its size cannot overlap feet.
 * These scoped selectors also win after the deferred legacy stylesheet loads.
 */
.smg-home > :is(.cinematic-dohyo-hero, .sm-cinematic-dohyo-hero),
.smg-main > .smg-sales-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  gap: 0;
  margin-inline: 0;
  border-radius: 0;
  background: #080907;
}
.smg-home > :is(.cinematic-dohyo-hero, .sm-cinematic-dohyo-hero) {
  direction: ltr;
}
.smg-home > :is(.cinematic-dohyo-hero, .sm-cinematic-dohyo-hero) > .hero-scene-six,
.smg-main > .smg-sales-hero > .smg-sales-art {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  inset: auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  aspect-ratio: auto;
  order: 0;
  transform: none;
  overflow: hidden;
  background-position: center;
  background-size: cover;
}
.smg-home > :is(.cinematic-dohyo-hero, .sm-cinematic-dohyo-hero) > .hero-scene-six,
.smg-sales-art > .hero-scene-six {
  position: relative;
  inset: auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding-block: 32px 12px;
  box-sizing: border-box;
  direction: ltr;
  background: #080907 url('../images/optimized/hero-dohyo-environment-v1.webp') center / cover no-repeat !important;
  animation: none !important;
  transform: none !important;
}
:is(.smg-home, .smg-sales-art) .hero-scene-six::after {
  pointer-events: none;
  background: linear-gradient(180deg, #080907bb, transparent 52px),
    linear-gradient(0deg, #08090722, transparent 28%);
}
.smg-home .hero-scene-six .hero-real-cast,
.smg-sales-art .hero-scene-six .hero-real-cast {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.41382049fr) minmax(0, 0.45361381fr) minmax(0, 0.50271739fr) minmax(0, 0.45535714fr) minmax(0, 0.52176825fr) minmax(0, 0.43880389fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: 1.2%;
  align-items: end;
  inset: auto;
  width: 98%;
  max-width: 1920px;
  min-width: 0;
  height: auto;
  max-height: none;
  aspect-ratio: 3;
  margin: 0 auto;
  direction: ltr;
  animation: none !important;
  transform: none !important;
}
.smg-home .hero-scene-six .hero-real-figure,
.smg-sales-art .hero-scene-six .hero-real-figure {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  margin: 0;
  animation: none !important;
  transform: none !important;
}
.hero-scene-six .hero-real-figure picture {
  display: block;
  width: 100%;
  height: 100%;
}
/* Keep every original portrait, skin tone and aspect ratio unchanged. */
.hero-scene-six .hero-real-figure .hero-real-person {
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
.smg-home .hero-scene-six .hero-real-figure .hero-real-person,
.smg-sales-art .hero-scene-six .hero-real-figure .hero-real-person {
  position: absolute !important;
  inset: auto auto var(--smg-person-bottom) 50% !important;
  width: auto !important;
  height: var(--smg-person-height) !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: translateX(var(--smg-person-shift, -50%)) !important;
}
/* Physical rank order is unchanged on RTL pages. Each silhouette has its own column. */
.hero-scene-six .hero-real-shiden { z-index: 2; }
.hero-scene-six .hero-real-daikiho { z-index: 3; }
.hero-scene-six .hero-real-akiseyama { z-index: 4; }
.hero-scene-six .hero-real-daishoho { z-index: 5; }
.hero-scene-six .hero-real-tenkaiho { z-index: 6; }
.hero-scene-six .hero-real-hidenoumi { z-index: 7; }
.hero-scene-six .hero-real-daikiho .hero-real-person {
  -webkit-mask-image: none;
  mask-image: none;
  filter: none !important;
}
/* Normalize visible crowns and soles, including transparent margins.
 * Six complete silhouettes fit in a 3:1 row, separated by 1.2% gutters. */
.hero-scene-six .hero-real-shiden { --smg-person-height: 119.14217633%; --smg-person-bottom: -11.11993646%; --smg-person-shift: -49.02642559%; }
.hero-scene-six .hero-real-daikiho { --smg-person-height: 109.91154261%; --smg-person-bottom: -6.65480043%; --smg-person-shift: -49.95117188%; }
.hero-scene-six .hero-real-akiseyama { --smg-person-height: 101.90217391%; --smg-person-bottom: -0.20380435%; --smg-person-shift: -50.66666667%; }
.hero-scene-six .hero-real-daishoho { --smg-person-height: 111.60714286%; --smg-person-bottom: -2.67857143%; --smg-person-shift: -49.86072423%; }
.hero-scene-six .hero-real-tenkaiho { --smg-person-height: 100.46885466%; --smg-person-bottom: -0.20093771%; --smg-person-shift: -50.05000000%; }
.hero-scene-six .hero-real-hidenoumi { --smg-person-height: 104.24200278%; --smg-person-bottom: -2.01668985%; --smg-person-shift: -49.92378049%; }

/* The copy determines its own height in every language. On desktop the
 * heading occupies the left column; the summary and actions occupy the right.
 */
.smg-home > :is(.cinematic-dohyo-hero, .sm-cinematic-dohyo-hero) > :is(.hero-copy-panel, .sm-hero-copy-panel) {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  border: 0;
  background: #080907;
}
.smg-home > :is(.cinematic-dohyo-hero, .sm-cinematic-dohyo-hero) > :is(.hero-copy-panel, .sm-hero-copy-panel)::after,
.smg-home > :is(.cinematic-dohyo-hero, .sm-cinematic-dohyo-hero) :is(.banzuke-axis, .sm-banzuke-axis) {
  display: none;
}
.smg-home > :is(.cinematic-dohyo-hero, .sm-cinematic-dohyo-hero) > :is(.hero-copy-panel, .sm-hero-copy-panel) > :is(.hero-content, .sm-hero-content) {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
  grid-template-areas: "eyebrow summary" "heading summary" "heading actions";
  grid-template-rows: auto auto auto;
  align-content: center;
  align-items: start;
  justify-content: normal;
  gap: 12px clamp(30px, 5vw, 76px);
  width: min(100%, 1728px);
  min-width: 0;
  min-height: 0;
  height: auto;
  margin-inline: auto;
  padding: 28px clamp(22px, 3vw, 52px);
  box-sizing: border-box;
}
.smg-home > :is(.cinematic-dohyo-hero, .sm-cinematic-dohyo-hero) :is(.hero-content, .sm-hero-content) > * {
  min-width: 0;
  max-width: 100%;
}
.smg-home > :is(.cinematic-dohyo-hero, .sm-cinematic-dohyo-hero) :is(.hero-content, .sm-hero-content) > :is(.eyebrow, .sm-eyebrow) {
  grid-area: eyebrow;
  margin: 0;
}
.smg-home > :is(.cinematic-dohyo-hero, .sm-cinematic-dohyo-hero) h1 {
  grid-area: heading;
  max-width: 100%;
  margin: 0;
  font-size: clamp(36px, 4vw, 58px) !important;
  line-height: 1.08 !important;
  overflow-wrap: break-word;
}
.smg-home > :is(.cinematic-dohyo-hero, .sm-cinematic-dohyo-hero) h1 > span {
  white-space: normal;
}
.smg-home > :is(.cinematic-dohyo-hero, .sm-cinematic-dohyo-hero) :is(.hero-content, .sm-hero-content) h1 em {
  max-width: 100%;
  margin-top: 12px;
  font-size: 1rem;
}
.smg-home > :is(.cinematic-dohyo-hero, .sm-cinematic-dohyo-hero) :is(.hero-content, .sm-hero-content) > .smg-home-summary {
  grid-area: summary;
  max-width: 100%;
  margin: 0;
}
.smg-home > :is(.cinematic-dohyo-hero, .sm-cinematic-dohyo-hero) :is(.hero-actions, .sm-actions) {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}
.smg-home > :is(.cinematic-dohyo-hero, .sm-cinematic-dohyo-hero) :is(.primary-button, .ghost-button, .sm-button, .sm-ghost-button) {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  gap: 18px;
}
.sm-localized-full[dir="rtl"] .sm-cinematic-dohyo-hero .sm-hero-copy-panel {
  direction: rtl;
}
.smg-main > .smg-sales-hero > .smg-sales-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr);
  grid-template-areas: "breadcrumb breadcrumb" "kicker lead" "title lead" "title actions" "title reassurance";
  grid-template-rows: repeat(5, auto);
  align-items: start;
  gap: 12px clamp(30px, 5vw, 76px);
  grid-column: 1;
  grid-row: 1;
  order: 0;
  width: min(100%, 1728px);
  min-width: 0;
  margin-inline: auto;
  padding: 28px clamp(22px, 3vw, 52px);
  box-sizing: border-box;
}
.smg-main > .smg-sales-hero > .smg-sales-copy > * {
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
.smg-main > .smg-sales-hero > .smg-sales-copy > .smg-breadcrumb { grid-area: breadcrumb; }
.smg-main > .smg-sales-hero > .smg-sales-copy > .smg-kicker { grid-area: kicker; }
.smg-main > .smg-sales-hero > .smg-sales-copy > h1 {
  grid-area: title;
  font-size: clamp(36px, 4vw, 58px);
}
.smg-main > .smg-sales-hero > .smg-sales-copy > .smg-lead { grid-area: lead; }
.smg-main > .smg-sales-hero > .smg-sales-copy > .smg-actions { grid-area: actions; }
.smg-main > .smg-sales-hero > .smg-sales-copy > .smg-reassurance { grid-area: reassurance; }
.smg-main > .smg-sales-hero > .smg-sales-copy .smg-actions > a {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}
.hero-scene-six:focus-visible {
  outline: 3px solid #c89a5a;
  outline-offset: -4px;
}

@media (max-width: 1000px) {
  .smg-home > :is(.cinematic-dohyo-hero, .sm-cinematic-dohyo-hero) > :is(.hero-copy-panel, .sm-hero-copy-panel) > :is(.hero-content, .sm-hero-content),
  .smg-main > .smg-sales-hero > .smg-sales-copy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 28px clamp(22px, 4vw, 40px) 24px;
  }
  .smg-home > :is(.cinematic-dohyo-hero, .sm-cinematic-dohyo-hero) h1,
  .smg-main > .smg-sales-hero > .smg-sales-copy > h1 {
    font-size: clamp(34px, 5.4vw, 52px) !important;
  }
}
@media (max-width: 900px) {
  /* Only the artwork scrolls. The fixed 960px cast is 320px tall, instead of
   * shrinking six full-length performers into the width of a phone screen.
   * Native scrollbars and keyboard focus expose the complete photograph.
   */
  .smg-home > :is(.cinematic-dohyo-hero, .sm-cinematic-dohyo-hero) > .hero-scene-six,
  .smg-sales-art > .hero-scene-six {
    padding-block: 24px 12px;
    overflow-x: scroll;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: auto;
    scrollbar-color: #c89a5a #24211d;
    -webkit-overflow-scrolling: touch;
    background-image: url('../images/optimized/hero-dohyo-environment-mobile-v1.webp') !important;
    background-size: 992px auto !important;
    background-position: left center !important;
    background-attachment: local !important;
  }
  .smg-home .hero-scene-six .hero-real-cast,
  .smg-sales-art .hero-scene-six .hero-real-cast {
    width: 960px;
    min-width: 960px;
    max-width: none;
    height: 320px;
    margin-inline: 16px;
  }
  .hero-scene-six::-webkit-scrollbar { height: 12px; }
  .hero-scene-six::-webkit-scrollbar-track { background: #24211d; }
  .hero-scene-six::-webkit-scrollbar-thumb {
    background: #c89a5a;
    border: 3px solid #24211d;
    border-radius: 8px;
  }
  /* Match the mobile delivery images and their rounded transparent padding. */
  .hero-scene-six .hero-real-shiden { --smg-person-height: 119.20529801%; --smg-person-bottom: -11.12582781%; --smg-person-shift: -49.07192575%; }
  .hero-scene-six .hero-real-daikiho { --smg-person-height: 110.01228501%; --smg-person-bottom: -6.72297297%; --smg-person-shift: -50.00000000%; }
  .hero-scene-six .hero-real-akiseyama { --smg-person-height: 101.92525481%; --smg-person-bottom: -0.22650057%; --smg-person-shift: -50.66666667%; }
  .hero-scene-six .hero-real-daishoho { --smg-person-height: 111.52416357%; --smg-person-bottom: -2.60223048%; --smg-person-shift: -49.88399072%; }
  .hero-scene-six .hero-real-tenkaiho { --smg-person-height: 100.44642857%; --smg-person-bottom: -0.22321429%; --smg-person-shift: -50.08333333%; }
  .hero-scene-six .hero-real-hidenoumi { --smg-person-height: 103.91414141%; --smg-person-bottom: -1.89393939%; --smg-person-shift: -50.00000000%; }
}
