/* ============================================================
   05a — HERO SECTION
   ============================================================ */

.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:120px;
  padding-bottom:60px;
}

.hero-eyebrow{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.2em;
  color: var(--ink-dim);
  text-transform:uppercase;
  margin-bottom:34px;
}
.hero-eyebrow span{ color:var(--teal); }

.hero h1{
  font-family:var(--serif);
  font-weight:400;
  font-size: clamp(3rem, 9vw, 7.2rem);
  line-height:0.98;
  letter-spacing:-0.02em;
  color:var(--ink);
}
.hero h1 em{
  font-style:italic;
  font-weight:400;
  color:var(--gold);
}

.hero-sub{
  margin-top:34px;
  max-width:640px;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight:300;
  color: var(--ink-dim);
}
.hero-sub b{ color:var(--ink); font-weight:500; }

.hero-meta{
  margin-top:56px;
  display:flex;
  gap:36px;
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:0.8rem;
  color: var(--ink-faint);
}
.hero-meta a{ color:var(--ink-dim); border-bottom:1px solid transparent; transition:color .3s, border-color .3s; }
.hero-meta a:hover{ color:var(--gold); border-color:var(--gold-dim); }

.hero-cta{ margin-top:36px; }

.scroll-cue{
  position:absolute;
  bottom:48px; left:clamp(24px,6vw,96px);
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.18em;
  color:var(--ink-faint); text-transform:uppercase;
}
.scroll-cue .line{
  width:1px; height:40px;
  background:linear-gradient(var(--ink-faint), transparent);
  animation: scrollpulse 2.4s ease-in-out infinite;
}
@keyframes scrollpulse{ 0%,100%{ opacity:.3 } 50%{ opacity:1 } }