/* Prototype study: a single-focus opening frame. */
.hero{height:138vh}
.hero .system-pill,.hero__copy>.eyebrow,.hero__title .intro,.hero__lede,.hero__actions,.hero__meta,.hero-intel,.hero-portrait figcaption,.hero-portrait__scan{display:none!important}
.hero__layout{grid-template-columns:minmax(420px,.9fr) minmax(520px,1.1fr);align-items:center;column-gap:clamp(1rem,3vw,4rem)}
.hero__copy{grid-column:1;max-width:760px;padding-left:clamp(0rem,2vw,2rem);z-index:5}
.hero__title{margin:0;line-height:.76}
.hero__title .name{font-size:clamp(5.8rem,10.3vw,10.5rem);letter-spacing:-.09em}
.role{margin:2.35rem 0 0;gap:0}
.role>span{display:none}
.role h2{font-size:clamp(1rem,1.55vw,1.38rem);font-weight:500;letter-spacing:-.02em;padding-left:.15rem}
.role h2:before{content:"";display:inline-block;width:34px;height:1px;margin:0 .9rem .28rem 0;background:var(--green);box-shadow:0 0 9px rgba(98,245,183,.45)}
.hero__tagline{margin:.95rem 0 0;padding-left:50px;color:#61766e;font:400 clamp(.58rem,.7vw,.7rem) var(--mono);letter-spacing:.24em;text-transform:uppercase}
.hero__tagline span{color:var(--green)}
.hero-portrait{grid-column:2;align-self:end;justify-self:center;position:relative;z-index:2;width:min(57vw,900px);height:94vh;min-height:660px;margin:0 -10% -4rem -15%;pointer-events:none}
.hero-portrait__frame:after{opacity:.35}
.scroll-cue{opacity:.42;transition:opacity .35s}.scroll-cue:hover{opacity:1}
.home-active .hud-nav{opacity:.48}.home-active .hud-nav:hover,.home-active .hud-nav:focus-within{opacity:1}
.home-active .rail,.home-active .corner-data{opacity:.12}
.hud-nav,.rail,.corner-data{transition:opacity .45s,background .4s,border-color .4s}

@media(min-width:761px) and (max-width:1200px){
  .hero__layout{grid-template-columns:minmax(360px,.88fr) minmax(430px,1.12fr)}
  .hero__copy{grid-column:1;padding-left:0}
  .hero__title .name{font-size:clamp(4.8rem,10.4vw,7.4rem)}
  .hero-portrait{grid-column:2;width:70vw;height:88vh;margin:0 -25% -4rem -31%}
}

@media(max-width:760px){
  .hero{min-height:118vh;height:auto}
  .hero__layout{display:flex;min-height:100svh;flex-direction:column;justify-content:flex-start;padding-top:6.2rem}
  .hero__copy{width:100%;padding:7vh 0 0;z-index:4}
  .hero__title .name{font-size:clamp(4.15rem,21vw,6.7rem)}
  .role{margin-top:1.6rem}.role h2{font-size:.98rem}
  .hero__tagline{padding-left:49px;font-size:.54rem;letter-spacing:.18em}
  .hero-portrait{position:relative;z-index:1;width:125%;height:59vh;min-height:420px;margin:-1rem -12.5% -3rem}
  .home-active .hud-nav{opacity:.72}
}