/* Shared inner-page hero system
   Keeps each page's artwork while standardising scale, spacing and content treatment. */

body.inner-page {
  --inner-hero-min-height: 560px;
  --inner-hero-gutter: max(28px, calc((100vw - 1320px) / 2 + 40px));
  --inner-hero-panel-width: min(680px, 52vw);
  --inner-hero-panel-bg: rgba(255, 255, 255, .95);
  --inner-hero-border: #dfe5ed;
  --inner-hero-shadow: 0 22px 55px rgba(12, 31, 69, .10);
}

body.inner-page .inner-hero {
  min-height: var(--inner-hero-min-height);
  padding: 72px var(--inner-hero-gutter) 64px;
  align-items: center;
}

body.inner-page .inner-hero-content,
body.inner-page .contact-hero-copy,
body.inner-page .services-hero-copy {
  position: relative;
  z-index: 4;
  box-sizing: border-box;
  width: var(--inner-hero-panel-width);
  max-width: 680px;
  padding: clamp(30px, 3vw, 40px);
  border: 1px solid var(--inner-hero-border);
  border-radius: 12px;
  background: var(--inner-hero-panel-bg);
  box-shadow: var(--inner-hero-shadow);
  text-align: left;
}

body.inner-page .inner-hero h1,
body.inner-page .contact-hero h1,
body.inner-page .services-overview-hero h1 {
  max-width: 650px;
  margin: 0;
  color: #0c1f45;
  font-size: clamp(42px, 4vw, 56px);
  line-height: 1.04;
  letter-spacing: -1.6px;
}

body.inner-page .inner-hero-lead,
body.inner-page .contact-hero-copy>p:last-of-type,
body.inner-page .services-hero-copy>p:last-of-type {
  max-width: 610px;
  margin: 18px 0 0;
  color: #536174;
  font-size: 15px;
  line-height: 1.7;
}

body.inner-page .inner-hero .inner-breadcrumb,
body.inner-page .contact-hero .inner-breadcrumb,
body.inner-page .services-overview-hero .inner-breadcrumb {
  margin: 0 0 28px;
}

body.inner-page .inner-hero .inner-kicker,
body.inner-page .contact-hero .inner-kicker,
body.inner-page .services-overview-hero .inner-kicker {
  margin: 0 0 12px;
}

/* Services overview: prevent the shared panel width from being applied twice. */
body[data-page="services"] .services-overview-hero {
  grid-template-columns: minmax(520px, .95fr) minmax(0, 1.05fr);
  min-height: var(--inner-hero-min-height);
  padding: 72px var(--inner-hero-gutter) 64px;
}

body[data-page="services"] .services-hero-copy {
  width: 100%;
  max-width: 620px;
}

body[data-page="services"] .services-hero-visual {
  width: 108%;
  margin: 0 0 0 -2%;
}

/* Contact uses the same two-column proportions and panel rhythm. */
body[data-page="contact"] .contact-hero {
  grid-template-columns: minmax(520px, .95fr) minmax(0, 1.05fr);
  min-height: var(--inner-hero-min-height);
  padding: 72px var(--inner-hero-gutter) 64px;
}

body[data-page="contact"] .contact-hero-copy {
  width: 100%;
  max-width: 620px;
}

body[data-page="contact"] .contact-hero-visual {
  width: 108%;
  margin-left: -2%;
}

/* Investor and statutory pages now use the same readable content panel. */
body.governance-page .line-art-governance-hero {
  grid-template-columns: minmax(520px, .95fr) minmax(0, 1.05fr);
  min-height: var(--inner-hero-min-height);
  padding: 72px var(--inner-hero-gutter) 64px;
  background: linear-gradient(135deg, #fff 0 54%, #f6f8fb 54% 100%);
}

body.governance-page .line-art-governance-hero .inner-hero-content {
  width: 100%;
  max-width: 620px;
  padding: clamp(30px, 3vw, 40px);
  border: 1px solid var(--inner-hero-border);
  border-radius: 12px;
  background: var(--inner-hero-panel-bg);
  box-shadow: var(--inner-hero-shadow);
}

body.governance-page .line-art-governance-hero .governance-hero-art {
  width: 108%;
  margin-left: -2%;
}

/* Management retains its bespoke line art but follows the shared proportions. */
body[data-page="management"] .management-hero {
  min-height: var(--inner-hero-min-height);
  padding: 72px var(--inner-hero-gutter) 64px;
}

body[data-page="management"] .management-hero .inner-hero-content {
  width: min(620px, 49vw);
  max-width: 620px;
}

body[data-page="management"] .management-hero-art {
  right: max(18px, calc((100vw - 1320px) / 2));
  width: min(690px, 49vw);
  opacity: .9;
}

/* Journey keeps its paper-plane motion and photographic backdrop. */
body[data-page="journey"] .journey-flight-hero {
  min-height: var(--inner-hero-min-height);
  padding: 72px var(--inner-hero-gutter) 64px;
}

body[data-page="journey"] .journey-flight-hero .inner-hero-content {
  width: min(640px, 80vw);
  max-width: 640px;
}

body[data-page="journey"] .journey-flight-hero h1 {
  font-size: clamp(42px, 4vw, 56px);
}

/* Enlarge line-art compositions and crop their built-in empty canvas space. */
@media (min-width: 1001px) {

  body[data-page="services"] .services-hero-visual,
  body[data-page="contact"] .contact-hero-visual,
  body.governance-page .line-art-governance-hero .governance-hero-art {
    display: flex;
    align-items: flex-end;
    height: 330px;
    overflow: hidden;
  }

  body[data-page="contact"] .contact-hero-visual img,
  body.governance-page .line-art-governance-hero .governance-hero-art img {
    flex: 0 0 auto;
    /*width: 120%;*/
    max-width: none;
    height: auto;
    /*margin-left: -10%;*/
  }

  body[data-page="services"] .services-hero-visual img {
    flex: 0 0 auto;
    width: 108%;
    max-width: none;
    height: auto;
    margin-left: -4%;
  }

  body[data-page="management"] .management-hero-art {
    right: max(8px, calc((100vw - 1380px) / 2));
    bottom: 24px;
    width: min(830px, 56vw);
    max-height: 455px;
  }
}

/* Line-art previews inside Company/Investor dropdown panels. */
.mega-image-frame {
  position: relative;
  width: 100%;
  height: 350px;
  overflow: hidden;
  border-radius: 18px;
}

.mega-image-frame>img {
  border-radius: 0;
}

.mega-image-frame.line-art-preview {
  height: 300px;
  border: 1px solid #e4e8ee;
  border-radius: 14px;
  background: #fff;
}

.mega-image-frame.line-art-preview>img,
.mega-card img[src$="investor-line-art.png"],
.mega-card img[src$="annual-return-line-art.png"],
.mega-card img[src$="tariff-line-art.png"],
.mega-card img[src$="management-line-art.png"] {
  position: absolute;
  top: -76px;
  left: 50%;
  width: auto;
  min-width: 200%;
  max-width: none;
  height: 360px;
  transform: translateX(-50%);
  padding: 0;
  object-fit: initial;
  border: 0;
  border-radius: 0;
  background: #fff;
}

.mega-image-frame.line-art-preview img.preview-switch {
  animation: megaLineArtPreviewSwitch .34s cubic-bezier(.22, 1, .36, 1);
}

@keyframes megaLineArtPreviewSwitch {
  from {
    opacity: .55;
    transform: translateX(-50%) scale(1.025);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@media (max-width: 1000px) {
  body.inner-page {
    --inner-hero-panel-width: min(650px, 68%);
  }

  body[data-page="services"] .services-overview-hero,
  body[data-page="contact"] .contact-hero,
  body.governance-page .line-art-governance-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 76px;
  }

  body[data-page="services"] .services-hero-copy,
  body[data-page="contact"] .contact-hero-copy,
  body.governance-page .line-art-governance-hero .inner-hero-content {
    width: min(650px, 100%);
  }

  body[data-page="services"] .services-hero-visual,
  body[data-page="contact"] .contact-hero-visual,
  body.governance-page .line-art-governance-hero .governance-hero-art {
    width: min(760px, 100%);
    margin: 30px auto 0;
  }
}

@media (max-width: 680px) {
  body.inner-page {
    --inner-hero-min-height: 520px;
    --inner-hero-gutter: 18px;
    --inner-hero-panel-width: 100%;
    --inner-hero-shadow: 0 15px 36px rgba(12, 31, 69, .09);
  }

  body.inner-page .inner-hero {
    min-height: var(--inner-hero-min-height);
    padding: 88px 18px 34px;
    align-items: flex-end;
  }

  body.inner-page .inner-hero-content,
  body.inner-page .contact-hero-copy,
  body.inner-page .services-hero-copy {
    width: 100%;
    max-width: none;
    padding: 20px;
  }

  body.inner-page .inner-hero h1,
  body.inner-page .contact-hero h1,
  body.inner-page .services-overview-hero h1,
  body[data-page="journey"] .journey-flight-hero h1 {
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: -1px;
  }

  body.inner-page .inner-hero-lead,
  body.inner-page .contact-hero-copy>p:last-of-type,
  body.inner-page .services-hero-copy>p:last-of-type {
    font-size: 14px;
    line-height: 1.6;
  }

  body.inner-page .inner-hero .inner-breadcrumb,
  body.inner-page .contact-hero .inner-breadcrumb,
  body.inner-page .services-overview-hero .inner-breadcrumb {
    margin-bottom: 16px;
  }

  body[data-page="services"] .services-overview-hero,
  body[data-page="contact"] .contact-hero,
  body.governance-page .line-art-governance-hero {
    min-height: auto;
    padding: 88px 18px 30px;
    background: #f6f8fb;
  }

  body[data-page="services"] .services-hero-copy,
  body[data-page="contact"] .contact-hero-copy,
  body.governance-page .line-art-governance-hero .inner-hero-content {
    width: 100%;
    max-width: none;
  }

  body[data-page="services"] .services-hero-visual,
  body[data-page="contact"] .contact-hero-visual,
  body.governance-page .line-art-governance-hero .governance-hero-art {
    width: 118%;
    height: 170px;
    margin: 20px 0 0 -9%;
    overflow: hidden;
  }

  body[data-page="services"] .services-hero-visual img,
  body[data-page="contact"] .contact-hero-visual img,
  body.governance-page .line-art-governance-hero .governance-hero-art img {
    width: 132%;
    max-width: none;
    height: auto;
    margin-left: -16%;
    object-fit: initial;
  }

  body[data-page="management"] .management-hero {
    min-height: 540px;
    padding: 88px 18px 34px;
  }

  body[data-page="management"] .management-hero .inner-hero-content,
  body[data-page="journey"] .journey-flight-hero .inner-hero-content {
    width: 100%;
    max-width: none;
  }

  body[data-page="management"] .management-hero-art {
    right: -25%;
    bottom: 0;
    width: 132%;
    opacity: .16;
  }

  body[data-page="journey"] .journey-flight-hero {
    min-height: 560px;
    padding: 88px 18px 34px;
  }

  body[data-page="company"] .inner-hero {
    min-height: 570px;
    padding: 132px 20px 34px;
  }

  body[data-page="company"] .hero-page-badge {
    display: none;
  }

  body[data-page="kamigumi"] .inner-hero-content {
    width: 100%;
    max-width: none;
    flex: 1 0 100%;
  }

  body[data-page="kamigumi"] .hero-partner-mark {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  body.inner-page .inner-hero-content,
  body.inner-page .contact-hero-copy,
  body.inner-page .services-hero-copy {
    transition: none;
  }
      body.inner-page .inner-hero h1, body.inner-page .contact-hero h1, body.inner-page .services-overview-hero h1, body[data-page="journey"] .journey-flight-hero h1 {
        font-size: 30px;
        line-height: 1.08;
        letter-spacing: -1px;
    }
}