/* More Steel Inc — hero.
   One video that plays through once and holds on its last frame, which is the
   client's own photograph of the finished canopy. No scroll coupling: scroll
   position and playback are unrelated, so there is no state in which the hero
   can show an empty stage.

   Two crops of the same render ship, and the browser picks by aspect ratio:
   1920x660 (2.91:1) above 2:1, 1920x830 (2.31:1) below it. Both are the 16:9
   master with sky cut off the top, 420px and 250px respectively.

   Why two. object-fit:cover crops height on a window wider than the source and
   width on a narrower one, so a single deep crop that frames well at 2.15:1
   would start cutting the ends of the beams at 16:9. Measured off a difference
   of the last frame against the empty first frame, the steel spans columns
   476..1603 of 1920, so there is 316px of margin on the tighter side. Neither
   crop comes within 16px of that at any viewport down to 1.6:1.

   The camera was pointed up at the canopy, so the red clay is only the bottom
   ~9% of the source. Cropping sky is the only lever on how much ground shows. */

/* The top of the frame is open sky, the brightest thing in the shot. Measured,
   the nav links sat at 1.14:1 against it. The gradient runs well past the links
   before it reaches transparent, so it reads as a vignette and not as a bar. */
.nav{
  position:absolute; inset:0 0 auto; z-index:20;
  display:flex; align-items:center; gap:24px;
  padding:clamp(18px,3vh,30px) 6vw clamp(46px,7vh,72px);
  background:linear-gradient(to bottom,
    rgba(5,7,11,.90) 0%, rgba(5,7,11,.68) 30%, rgba(5,7,11,.34) 60%, transparent 100%);
}
.nav__brand{
  display:flex; align-items:center; gap:12px; margin-right:auto; min-height:44px;
  font:700 clamp(17px,2vw,21px)/1 var(--disp-2); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
}
/* The real mark, not a placeholder square. The source is a 400px raster of a
   badge that already carries its own ring and has no internal margin, so it is
   never dropped inside another chip - that reads as a badge inside a badge. The
   monogram is used bare, and never near the ~200px where the raster shows. */
.nav__mark{
  width:auto; height:27px; flex:none; display:block;
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.55));
}
.nav__links{display:flex; gap:26px}
.nav__links a{
  font:600 15px/1 var(--body); letter-spacing:.01em; text-decoration:none;
  color:rgba(242,244,247,.88);
}
.nav__links a:hover{color:var(--ink)}
.nav__cta{
  font:700 17px/1 var(--disp-2); letter-spacing:.03em; text-decoration:none;
  color:var(--ink); padding:11px 18px; border:1px solid rgba(255,255,255,.28);
}
.nav__cta:hover{border-color:var(--ink); color:var(--ink)}
/* Below 860px the inline links give way to a disclosure, and the phone
   button steps aside so the brand stops wrapping. */
.navmenu{display:none}
@media (max-width:860px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .navmenu{display:block; position:relative}
}
.navmenu__btn{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border:1px solid rgba(255,255,255,.28);
}
.navmenu__btn::-webkit-details-marker{display:none}
.navmenu__btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.navmenu__bars, .navmenu__bars::before, .navmenu__bars::after{
  content:''; display:block; width:21px; height:2px; background:var(--ink);
  transition:transform .18s ease, top .18s ease, background .18s ease;
}
.navmenu__bars{position:relative}
.navmenu__bars::before{position:absolute; top:-7px}
.navmenu__bars::after{position:absolute; top:7px}
.navmenu[open] .navmenu__bars{background:transparent}
.navmenu[open] .navmenu__bars::before{top:0; transform:rotate(45deg)}
.navmenu[open] .navmenu__bars::after{top:0; transform:rotate(-45deg)}
/* Anchored to the button rather than to the header, because the header carries
   a tall bottom padding to run its gradient out past the links; hanging the
   panel off the bottom of that would leave it floating in the middle of the
   hero. */
.navmenu:not([open]) .navmenu__panel{display:none}
.navmenu__panel{
  position:absolute; top:calc(100% + 12px); right:0; z-index:30;
  min-width:min(268px,74vw); display:flex; flex-direction:column;
  background:#0e1116; border:1px solid var(--line-soft);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.navmenu__panel a{
  display:flex; align-items:center; min-height:48px; padding:0 18px;
  font:600 16px/1.2 var(--body); letter-spacing:.01em; text-decoration:none;
  color:rgba(242,244,247,.88); border-bottom:1px solid var(--line-soft);
}
.navmenu__panel a:last-child{border-bottom:0}
.navmenu__panel a:hover{color:var(--ink); background:rgba(255,255,255,.04)}
.navmenu__panel a[aria-current=page]{color:var(--ink); box-shadow:inset 3px 0 0 var(--accent)}
.navmenu__call{font-family:var(--disp-2)!important; letter-spacing:.03em!important; color:var(--ink)!important; background:rgba(255,255,255,.05)}
@media (prefers-reduced-motion:reduce){
  .navmenu__bars, .navmenu__bars::before, .navmenu__bars::after{transition:none}
}

/* One inset drives both the copy block and the playback readout, so neither
   can drift into the strip of ground at the bottom of the frame. It has to
   clear the clay band: at 1190px tall that band is ~144px, hence the 150 cap.
   Deeper crops do not help here. The video already shows its full height, so
   cropping sky pulls the ground UP toward the copy rather than freeing it.
   The copy block was what covered the column bases. */
.hero{
  --hero-inset:clamp(60px,11vh,132px);
  position:relative; overflow:hidden; background:var(--bg-2);
  min-height:100svh; display:flex; align-items:flex-end;
}
.hero__media{position:absolute; inset:0}
.hero__vid, .hero__fallback{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center 56%;
}
.hero__fallback{display:none}

/* Scrims. All soft gradients with no hard stops, so nothing reads as a bar.
   The copy sits over sunlit steel, the brightest thing in the frame, so the
   first layer is a pool of shadow anchored under the text.

   The red clay only occupies the bottom ~9% of the frame, and a conventional
   dark-at-the-bottom gradient lands its heaviest point exactly there: measured,
   it took clay at rgb(130,77,61) down to roughly rgb(23,16,14), which is why
   the ground read as black. So the vertical gradient peaks in the band BEHIND
   the copy and eases off again below it, leaving the clay legible. */
.hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(66% 30% at 22% 55%, rgba(5,7,11,.94) 0%, rgba(5,7,11,.78) 30%, rgba(5,7,11,.44) 54%, rgba(5,7,11,.14) 76%, transparent 92%),
    linear-gradient(to top, transparent 0%, rgba(5,7,11,.05) 8%, rgba(5,7,11,.34) 13%, rgba(5,7,11,.62) 19%, rgba(5,7,11,.44) 33%, rgba(5,7,11,.16) 48%, transparent 66%),
    linear-gradient(to right, rgba(5,7,11,.30) 0%, rgba(5,7,11,.08) 26%, transparent 46%);
}

/* Align the hero copy to the same left edge as the page sections below it.
   site.css pads a section by 6vw then centres a 1240px wrap inside that, so
   the matching outer width here is 1240px plus both 6vw gutters. Without this
   the copy sits ~150px right of everything else on a wide window, which also
   pushes it off the dark part of the scrim. */
.hero__inner{
  position:relative; z-index:10; width:100%;
  padding:0 6vw var(--hero-inset);
  max-width:calc(1240px + 12vw); margin:0 auto;
}
.hero__h1{
  margin:0 0 13px; max-width:16ch;
  font:400 clamp(34px,min(6vw,9.5vh),76px)/0.96 var(--disp);
  text-transform:uppercase; letter-spacing:.005em;
  text-shadow:0 2px 30px rgba(0,0,0,.55);
}
.hero__sub{
  margin:0 0 24px; max-width:40ch;
  font:700 clamp(17px,min(2vw,2.7vh),22px)/1.45 var(--body);
  color:rgba(242,244,247,.95); text-wrap:pretty;
  text-shadow:0 1px 16px rgba(0,0,0,.7);
}
.hero__btns{display:flex; flex-wrap:wrap; gap:12px}

/* Playback readout. Sits bottom-right, out of the copy's way. */
.hero__meta{
  position:absolute; z-index:10; right:6vw; bottom:var(--hero-inset);
  display:flex; align-items:center; gap:14px;
}
/* Sits over the sunlit clay now that the ground is exposed, so it needs its
   own ground the same way the eyebrow does. Matches the Replay chip beside it. */
.hero__phase{
  padding:8px 12px;
  font:600 10.5px/1 ui-monospace,Menlo,monospace; letter-spacing:.18em;
  text-transform:uppercase; color:#d6d9de;
  background:rgba(5,7,11,.82);
  border:1px solid rgba(255,255,255,.14);
}
.hero__replay{
  display:inline-flex; align-items:center; gap:8px; min-height:38px;
  padding:0 16px; cursor:pointer;
  font:700 13px/1 var(--body); letter-spacing:.05em;
  color:var(--ink); background:rgba(28,32,40,.92);
  border:1px solid rgba(255,255,255,.24);
}
.hero__replay:hover{background:rgba(255,255,255,.14)}
.hero__replay[hidden]{display:none}

.hero__prog{
  position:absolute; z-index:10; left:0; right:0; bottom:0; height:2px;
  background:rgba(255,255,255,.10);
}
.hero__prog i{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:left;
  background:var(--accent); transition:transform .12s linear;
}

/* The phone rail duplicates the hero CTA, so hold it back until the hero is
   behind you. site.css keeps it fixed and above everything. */
.railcta{opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s}
body.past-hero .railcta{opacity:1; visibility:visible; transition-delay:0s}

@media (max-width:820px){
  /* No full-bleed crop on phones. Show the whole frame at its own aspect and
     put the copy underneath, so nothing is cut off. A native 9:16 render would
     be better still; this at least never crops. */
  .hero{min-height:0; display:block}
  .hero__media{position:relative; inset:auto; aspect-ratio:1920/1080}
  .hero__vid, .hero__fallback{object-position:center center}
  /* Copy sits below the video here, so the frame needs only enough of a fade
     to seat it against the page. Anything heavier just blacks out the clay. */
  .hero__scrim{
    background:linear-gradient(to top, rgba(5,7,11,.55) 0%, rgba(5,7,11,.16) 18%, transparent 38%);
  }
  .hero__inner{padding:26px 6vw 40px}
  .hero__h1{max-width:none}
  .hero__meta{position:static; margin:0 6vw 22px; justify-content:flex-end}
  .hero__prog{position:relative}
}

@media (prefers-reduced-motion: reduce){
  .hero__vid{display:none}
  .hero__fallback{display:block}
  .hero__meta, .hero__prog{display:none}
}