/* A typographic cover for the infrastructure film. */
.opening-hero {
  --opening-gutter: 5vw;
  position: relative;
  height: max(850px, 55vw);
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #f7f7f4;
  color: #151515;
}
.opening-hero .nav { padding: 30px var(--opening-gutter); gap: 28px; }
.opening-hero .nav img { width: 148px; }
.opening-hero .nav-links { gap: 30px; margin-right: 30px; }
.opening-hero .nav-links a { position: relative; font-size: 12px; }
.opening-hero .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.opening-hero .nav-links a:hover::after { transform: scaleX(1); }
.opening-hero .nav-contact { gap: 30px; border-bottom-color: #a4a49c; font-size: 12px; }
.opening-hero .nav-contact span { color: #bf5426; }
.opening-backing { position: absolute; z-index: 3; top: 116px; right: var(--opening-gutter); display: flex; align-items: center; gap: 10px; max-width: calc(100% - var(--opening-gutter) - var(--opening-gutter)); color: #66665e; }
.opening-backing img { flex: 0 0 24px; width: 24px; height: 24px; }
.opening-backing span { font-size: 12px; line-height: 1.5; white-space: nowrap; }
.opening-backing strong { margin-left: 3px; color: #30302c; font-weight: 500; }
.opening-heading { position: relative; z-index: 2; padding: 160px var(--opening-gutter) 0; pointer-events: none; }
.opening-heading h1 { font-weight: 500; letter-spacing: -.075em; line-height: .85; }
.opening-title { display: block; font-size: 18vw; width: max-content; }
.opening-stop { color: #d96632; }
.opening-definition { display: block; font-size: clamp(24px, 2.8vw, 42px); letter-spacing: -.035em; font-weight: 400; line-height: 1.2; margin-top: 28px; }
.opening-backdrop { position: absolute; z-index: 0; top: 170px; left: 0; width: 95%; aspect-ratio: 16 / 9; pointer-events: none; }
.opening-backdrop img, .opening-backdrop video { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; background: #f7f7f4; }
.opening-backdrop video { position: absolute; inset: 0; opacity: 0; }
.opening-hero.is-film-ready .opening-backdrop video { opacity: 1; }
.opening-intro { position: absolute; z-index: 3; left: var(--opening-gutter); bottom: 145px; max-width: 275px; }
.opening-intro p { color: #51514b; font-size: 16px; line-height: 1.5; letter-spacing: -.015em; }
.opening-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 38px; min-height: 60px; margin-top: 27px; border-bottom: 1px solid #b6b6ae; font-size: 14px; font-weight: 500; }
.opening-cta span { display: grid; place-items: center; height: 44px; width: 44px; border: 1px solid #c66034; border-radius: 50%; color: #ad4b20; font-size: 25px; transition: color .25s, background .25s, transform .25s; }
.opening-cta:hover span { color: #fff; background: #b65025; transform: translateY(2px); }
.opening-hero :focus-visible { outline: 2px solid #151515; outline-offset: 5px; }
@keyframes cover-enter { from { clip-path: inset(100% 0 0 0); transform: translateY(28px); } to { clip-path: inset(0); transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .opening-title { animation: cover-enter 1.05s cubic-bezier(.16, 1, .3, 1) both; }
  .opening-definition { animation: cover-enter 1.05s .12s cubic-bezier(.16, 1, .3, 1) both; }
}
@media (min-width: 1700px) {
  .opening-backdrop { top: 190px; }
  .opening-intro { bottom: 180px; }
}
@media (min-width: 2100px) {
  .opening-hero { height: 55vw; }
  .opening-heading { padding-top: 200px; }
  .opening-backdrop { top: 170px; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .opening-hero { height: 875px; min-height: 100svh; }
  .opening-hero .nav { gap: 20px; }
  .opening-hero .nav-links { gap: 20px; margin-right: 8px; }
  .opening-hero .nav img { width: 130px; }
  .opening-heading { padding-top: 185px; }
  .opening-backdrop { top: 190px; left: -15%; width: 115%; }
  .opening-intro { bottom: 155px; max-width: 240px; }
  .opening-intro p { font-size: 14px; }
}
@media (max-width: 760px) {
  .opening-hero { --opening-gutter: 6vw; display: flex; flex-direction: column; height: auto; min-height: 0; }
  .opening-hero .nav { position: relative; padding: 18px 6vw; gap: 16px; }
  .opening-hero .nav img { width: 123px; }
  .opening-hero .nav-contact { font-size: 11px; gap: 16px; margin-left: auto; }
  .opening-hero .nav-links { gap: 0; margin: 0; }
  .opening-hero .nav-links a { font-size: 18px; }
  .opening-hero .nav-links a::after { display: none; }
  .opening-backing { top: 94px; gap: 8px; }
  .opening-backing img { flex-basis: 22px; width: 22px; height: 22px; }
  .opening-backing span { font-size: 11px; }
  .opening-heading { padding: 71px 6vw 0; }
  .opening-title { font-size: 22.2vw; }
  .opening-definition { font-size: clamp(18px, 5vw, 24px); margin-top: 20px; }
  .opening-backdrop { position: relative; top: auto; left: auto; width: 166%; aspect-ratio: 16 / 9; margin: -42px 0 -43px -68%; flex-shrink: 0; }
  .opening-intro { position: relative; inset: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: none; margin: 0 6vw 27px; }
  .opening-intro p { font-size: 12px; line-height: 1.5; }
  .opening-cta { gap: 15px; margin-top: 0; font-size: 12px; min-height: 49px; flex-shrink: 0; }
  .opening-cta span { height: 36px; width: 36px; font-size: 23px; }
}
@media (max-width: 390px) {
  .opening-heading { padding-top: 60px; }
  .opening-hero .nav img { width: 112px; }
  .opening-hero .nav { gap: 10px; }
  .opening-intro { display: block; }
  .opening-intro p { font-size: 14px; }
  .opening-cta { margin-top: 18px; gap: 36px; font-size: 13px; }
}

/* The product film keeps its existing native-scroll choreography. */
.hero-track { height:420svh; border-top:1px solid #deded8; border-bottom:1px solid #deded8; scroll-margin-top:0; }
.hero-topline { top:42px; left:5vw; }
.hero-opening { max-width:44%; left:5vw; bottom:25%; }
.hero-opening h2 { font-size:clamp(56px,6.3vw,102px); font-weight:500; line-height:.97; letter-spacing:-.052em; color:var(--ink); }
.hero-opening p { max-width:310px; font-size:14px; line-height:1.6; margin-top:26px; }
.hero-story { left:5vw; }
.hero-story h2 { font-size:clamp(56px,6.3vw,102px); }
.hero-bottom { left:5vw; right:5vw; }
.hero-spec { right:5vw; }
.hero-track.is-reduced-motion, .hero-track.is-reduced-motion .hero-sticky { min-height:650px; }
@media (max-width:760px) {
  .hero-track { height:340svh; }
  .hero-topline { top:38px; left:6vw; }
  .hero-opening { max-width:88%; left:6vw; bottom:27%; }
  .hero-opening h2 { font-size:clamp(42px,12.3vw,68px); }
  .hero-opening p { font-size:13px; margin-top:18px; max-width:300px; }
  .hero-story { left:6vw; }
  .hero-story h2 { font-size:clamp(46px,12.5vw,70px); }
  .hero-bottom { left:6vw; right:6vw; }
  .hero-spec { right:6vw; }
}
@media (max-width:380px) { .hero-opening h2 { font-size:40px; } }
@media (max-width:760px) and (max-height:699px) {
  .hero-opening { bottom:29%; }
  .hero-opening h2 { font-size:clamp(36px,11vw,52px); }
  .hero-opening p { font-size:11px; line-height:1.4; margin-top:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-track { height:100svh; min-height:650px; }
}