/* Approved Hero typography and graphic refinement. Scope: Hero only. */
.gate2-hero{
  min-height:min(980px,100svh);
}
.gate2-hero .hero-content{
  width:min(calc(100% - 48px),1180px);
  max-width:1180px;
  padding-top:clamp(148px,17vh,188px);
  padding-bottom:150px;
}
.gate2-hero .hero-slogan{
  margin:0 0 19px;
  color:var(--archival-ivory);
  font-size:clamp(13px,1.05vw,16px);
  line-height:1.2;
  font-weight:780;
  letter-spacing:.14em;
  text-shadow:0 2px 20px rgba(2,24,28,.42);
}
.gate2-hero h1{
  width:100%;
  max-width:1120px;
  margin:0 0 20px;
  font-size:clamp(62px,6.55vw,96px);
  line-height:.94;
  font-weight:760;
  letter-spacing:-.058em;
  text-wrap:balance;
}
.gate2-hero h1 .hero-line{
  display:block;
  width:max-content;
  max-width:100%;
  color:#fff;
  white-space:nowrap;
  overflow-wrap:normal;
  text-shadow:0 12px 42px rgba(1,20,23,.24);
}
.gate2-hero h1 .hero-line-accent{
  color:var(--reserve-green);
  font:inherit;
  letter-spacing:inherit;
  text-shadow:0 12px 42px rgba(48,72,42,.22);
}
.gate2-hero .hero-descriptor{
  max-width:700px;
  margin:0 0 23px;
  color:var(--archival-ivory);
  font-size:clamp(15px,1.22vw,19px);
  line-height:1.35;
  font-weight:650;
  letter-spacing:.045em;
}
.gate2-hero .hero-editorial{
  max-width:680px;
}
.gate2-hero .hero-editorial .lead{
  margin-bottom:12px;
}
.gate2-hero .actions{
  margin-top:24px;
}
.gate2-hero .actions .button{
  border:1px solid rgba(234,233,212,.22);
  background:linear-gradient(135deg,var(--infrastructure-moss),#78966a);
  color:#fff;
  box-shadow:0 12px 30px rgba(4,28,30,.2);
}
.gate2-hero .actions .button:hover,
.gate2-hero .actions .button:focus-visible{
  border-color:var(--reserve-green);
  background:linear-gradient(135deg,#78966a,var(--institutional-sage));
  color:var(--premium-night);
  outline:2px solid rgba(187,200,138,.34);
  outline-offset:3px;
}

/* Localized contrast keeps the authentic infrastructure open and luminous. */
.gate2-hero .hero-infrastructure{
  background-image:
    linear-gradient(90deg,rgba(3,25,28,.83) 0%,rgba(3,25,28,.59) 31%,rgba(3,25,28,.16) 59%,rgba(3,25,28,.08) 100%),
    linear-gradient(180deg,rgba(3,25,28,.04),rgba(3,25,28,.2)),
    url('assets/history/monte-plata-solar-aerial-archive.jpg');
  background-position:center 44%;
}
.gate2-hero .hero-infrastructure:after{
  background:
    radial-gradient(circle at 72% 39%,rgba(234,233,212,.075),transparent 29%),
    linear-gradient(90deg,rgba(6,31,34,.16),transparent 48%);
  animation:heroArchitecturalLight 18s ease-in-out infinite alternate;
}
.gate2-hero .hero-vignette{
  background:
    linear-gradient(90deg,rgba(3,25,28,.26),transparent 58%),
    linear-gradient(180deg,rgba(3,25,28,.04),transparent 64%,rgba(3,25,28,.27));
}

/* The signal travels through the existing infrastructure-aligned network. */
.gate2-hero .hero-static-links path{
  stroke-dasharray:8 18;
  animation:heroSignalFlow 12s linear infinite;
}
.gate2-hero .hero-static-links path:nth-child(2){animation-delay:-4s}
.gate2-hero .hero-static-links path:nth-child(3){animation-delay:-8s}
.gate2-hero .hero-static-nodes circle{
  transform-box:fill-box;
  transform-origin:center;
  animation:heroNodeBreath 5.6s ease-in-out infinite;
}
.gate2-hero .hero-static-nodes circle:nth-child(2n){animation-delay:-2.4s}
.gate2-hero .hero-static-nodes circle:nth-child(3n){animation-delay:-4.2s}

@keyframes heroSignalFlow{
  to{stroke-dashoffset:-104}
}
@keyframes heroNodeBreath{
  0%,100%{opacity:.52;transform:scale(.82)}
  50%{opacity:.96;transform:scale(1.08)}
}
@keyframes heroArchitecturalLight{
  from{opacity:.72;transform:translate3d(-.35%,0,0)}
  to{opacity:1;transform:translate3d(.35%,0,0)}
}

@media(max-width:900px){
  .gate2-hero{min-height:100svh}
  .gate2-hero .hero-content{
    width:calc(100% - 40px);
    padding-top:126px;
    padding-bottom:150px;
  }
  .gate2-hero h1{
    max-width:800px;
    font-size:clamp(50px,7.15vw,62px);
    line-height:.96;
  }
  .gate2-hero .hero-descriptor{font-size:16px}
}

@media(max-width:600px){
  .gate2-hero{
    min-height:100svh;
  }
  .gate2-hero .hero-content{
    width:calc(100% - 28px);
    padding-top:105px;
    padding-bottom:126px;
  }
  .gate2-hero .hero-slogan{
    margin-bottom:14px;
    font-size:12px;
    letter-spacing:.11em;
  }
  .gate2-hero h1{
    margin-bottom:16px;
    font-size:clamp(31px,8.55vw,37px);
    line-height:.98;
    letter-spacing:-.047em;
  }
  .gate2-hero h1 .hero-line{
    width:100%;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }
  .gate2-hero .hero-descriptor{
    margin-bottom:18px;
    font-size:14px;
    line-height:1.35;
    letter-spacing:.025em;
  }
  .gate2-hero .hero-editorial .lead{
    font-size:15px;
    line-height:1.42;
  }
  .gate2-hero .hero-editorial>p:not(.lead){
    font-size:12px;
    line-height:1.42;
  }
  .gate2-hero .hero-editorial .hero-proof{font-size:10px}
  .gate2-hero .actions{
    gap:12px;
    margin-top:18px;
  }
  .gate2-hero .actions a{min-height:44px}
  .gate2-hero .hero-infrastructure{
    background-image:
      linear-gradient(180deg,rgba(3,25,28,.52) 0%,rgba(3,25,28,.42) 46%,rgba(3,25,28,.13) 100%),
      linear-gradient(90deg,rgba(3,25,28,.41),rgba(3,25,28,.08) 86%),
      url('assets/history/monte-plata-solar-aerial-archive.jpg');
    background-position:58% 44%;
  }
  .gate2-hero .hero-static{opacity:.4}
  .gate2-hero .hero-static-links path{animation-duration:17s}
  .gate2-hero .hero-static-nodes circle:nth-child(n+5){display:none}
}

@media(prefers-reduced-motion:reduce){
  .gate2-hero .hero-infrastructure:after,
  .gate2-hero .hero-static-links path,
  .gate2-hero .hero-static-nodes circle{
    animation:none!important;
    transform:none!important;
  }
}