.page-concept-i .hero-opening {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; overflow: hidden;
  background: #fff; opacity: 0; visibility: hidden; pointer-events: none;
}
.hero-intro-pending .page-concept-i .hero-opening,
.hero-opening-active .page-concept-i .hero-opening {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.page-concept-i .hero-opening-content {
  display: flex; flex-direction: column; align-items: center;
  gap: 36px; padding: 24px; margin-top: -2vh; opacity: 0;
}
.page-concept-i .hero-opening-mark { width: clamp(110px,11vw,150px); }
.page-concept-i .hero-opening-mark svg { display: block; width: 100%; height: auto; }
.page-concept-i .hero-opening-title {
  margin: 0; color: #183c50;
  font-size: clamp(1.12rem,2.1vw,1.85rem); font-weight: 500;
  line-height: 1.6; letter-spacing: .14em; text-align: center; white-space: nowrap;
}
.page-concept-i .hero-opening-skip {
  position: absolute; right: 2rem; bottom: 2rem;
  padding: .65rem 1rem; border: 1px solid #dce5e9; border-radius: 99px;
  background: #fff; color: #6e808a;
  font: inherit; font-size: .7rem; letter-spacing: .09em; cursor: pointer;
}
.page-concept-i .hero-opening-skip:focus-visible { outline: 2px solid #168aaf; outline-offset: 4px; }
.page-concept-i .hero::before,
.page-concept-i .hero::after { content: none; }
.page-concept-i .hero-art {
  inset: 0; clip-path: none; background: transparent; box-shadow: none;
  filter: saturate(.94) contrast(.99); animation: none;
}
.page-concept-i .hero-art::before {
  background-image: url("assets/concept-i-hero-final.webp");
  background-size: cover; background-position: right center; animation: none;
}
.page-concept-i .hero-art::after { background: none; animation: none; }
.page-concept-i .hero-scan { display: none; }
.page-concept-i .hero-phrase { display: inline-block; vertical-align: top; }
.page-concept-i .hero-phrase-final { font-weight: 750; }
.page-concept-i .hero-motion {
  position: absolute; inset: 0; z-index: 1; opacity: 1;
  pointer-events: none; transition: none;
}
.page-concept-i .hero-static-art { display: block; width: 100%; height: 100%; }
.page-concept-i .is-motion-ready .hero-motion { opacity: 1; }
.page-concept-i .is-motion-ready .hero-art::before { opacity: 0; }
.page-concept-i .hero-intro-replay {
  position: absolute; z-index: 5; top: 8rem; right: 2rem;
  display: flex; align-items: center; gap: .5rem; height: 36px; padding: 0 .9rem;
  border: 1px solid rgba(69,140,177,.2); border-radius: 30px;
  background: rgba(249,254,255,.82); color: #346f85;
  font: inherit; font-size: .65rem; font-weight: 600; letter-spacing: .04em; cursor: pointer;
}
.page-concept-i .hero-intro-replay[hidden] { display: none; }
.page-concept-i .hero-intro-replay:hover { background: #fff; }
.page-concept-i .hero-intro-replay:focus-visible { outline: 3px solid #127b9e; outline-offset: 4px; }
.page-concept-i .hero-intro-replay svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (min-width: 701px) and (max-width: 1000px) {
  .page-concept-i .hero-art { inset: 0; }
  .page-concept-i .hero-art::before { background-size: auto 100%; }
  .page-concept-i .hero-shade {
    background: linear-gradient(90deg, rgba(249,253,255,.99), rgba(247,253,255,.95) 32%, rgba(242,251,254,.60) 49%, transparent 75%);
  }
}
@media (max-width: 700px) {
  .page-concept-i .hero-opening-content { gap: 28px; }
  .page-concept-i .hero-opening-title { letter-spacing: .08em; }
  .page-concept-i .hero-opening-skip { right: 1.3rem; bottom: 1.5rem; }
  .page-concept-i .hero { min-height: 840px; align-items: flex-start; padding-top: 8rem; }
  .page-concept-i .hero h1 { font-size: clamp(1.65rem,7.6vw,2.9rem); line-height: 1.3; letter-spacing: -.045em; }
  .page-concept-i .hero h1 > span { white-space: nowrap; }
  .page-concept-i .hero-lead { font-size: .9rem; line-height: 1.95; }
  .page-concept-i .hero-art { inset: 38% -3% 0 -30%; }
  .page-concept-i .hero-shade {
    background: linear-gradient(180deg, #f9fdff 0%, rgba(247,253,255,.96) 40%, rgba(242,251,254,.62) 57%, transparent 76%);
  }
  .page-concept-i .hero-motion { mask-image: linear-gradient(180deg, transparent, #000 20%); }
  .page-concept-i .hero-intro-replay { top: 6rem; right: 1.1rem; height: 32px; padding-inline: .7rem; font-size: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .page-concept-i .hero-intro-replay { display: none; }
}