/* ============================================================
   Hero (Home) + Page Banner (inner pages)
   ============================================================ */
.hero{
  position:relative;
  background:var(--black-950);
  color:var(--on-black);
  overflow:hidden;
  padding-top: clamp(56px, 10vw, 96px);
  padding-bottom: clamp(48px, 8vw, 80px);
}
.hero-bg{
  position:absolute; inset:0;
  z-index:0;
}
.hero-bg img{
  width:100%; height:100%;
  object-fit:cover;
  opacity:.34;
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,7,10,.65) 0%, rgba(6,7,10,.86) 60%, var(--black-950) 100%),
    linear-gradient(90deg, var(--black-950) 0%, rgba(6,7,10,.4) 45%, rgba(6,7,10,.15) 100%);
}
.ambient-canvas{
  position:absolute; inset:0;
  z-index:1;
  opacity:.55;
  pointer-events:none;
}
.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-8);
}
.hero-copy{ max-width:44rem; }
.hero-copy .eyebrow{ margin-bottom:var(--sp-5); }
.hero-copy h1{ font-size:var(--fs-h1); margin-bottom:var(--sp-5); }
.hero-copy .lead{
  font-size:var(--fs-lead);
  color:var(--on-black-soft);
  max-width:38em;
  margin-bottom:var(--sp-7);
}
.hero-copy .cta-row{ margin-bottom:var(--sp-8); }

/* Entrance choreography — plays once on page load (and replays
   whenever Home becomes active again, since display:none restarts
   CSS animations on re-entry). */
@keyframes hero-rise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: no-preference){
  .hero-copy > *{
    animation: hero-rise .8s var(--ease) both;
  }
  .hero-copy > *:nth-child(1){ animation-delay:.05s; }
  .hero-copy > *:nth-child(2){ animation-delay:.15s; }
  .hero-copy > *:nth-child(3){ animation-delay:.28s; }
  .hero-copy > *:nth-child(4){ animation-delay:.4s; }
  .hero-copy > *:nth-child(5){ animation-delay:.5s; }
}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line-on-black);
  border:1px solid var(--line-on-black);
  max-width:40rem;
}
.hero-stat{
  background:var(--black-950);
  padding:var(--sp-4) var(--sp-5);
}
.hero-stat .num{
  font-family:var(--font-mono);
  font-size:1.5rem;
  font-weight:500;
  color:var(--jodhpur-300);
  font-variant-numeric:tabular-nums;
  display:block;
}
.hero-stat .label{
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--on-black-soft);
}

/* Inner page banner — smaller hero used on About/Products/etc. */
.page-banner{
  position:relative;
  background:var(--black-950);
  color:var(--on-black);
  overflow:hidden;
  padding-block: clamp(72px,11vw,132px) clamp(56px,8vw,88px);
}
.page-banner .hero-bg img{ opacity:.28; }
.page-banner-inner{ position:relative; z-index:2; max-width:46rem; }
.page-banner .eyebrow{ margin-bottom:var(--sp-4); }
.page-banner h1{ font-size:clamp(2.1rem, 1.7rem + 1.8vw, 3.25rem); margin-bottom:var(--sp-4); }
.page-banner p:not(.eyebrow){ color:var(--on-black-soft); font-size:var(--fs-lead); max-width:38em; }
.page-banner-crumb{
  display:flex; align-items:center; gap:8px;
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.04em;
  color:var(--on-black-soft);
  margin-bottom:var(--sp-5);
  text-transform:uppercase;
}
.page-banner-crumb svg{ width:12px; height:12px; opacity:.6; }
.page-banner-crumb b{ color:var(--jodhpur-300); font-weight:700; }

@media (min-width:860px){
  .hero-inner{ grid-template-columns: minmax(0,1fr) auto; align-items:end; }
}

/* ============================================================
   Jodhpur-blue ambient edge glow — the signature atmosphere on
   every dark band (hero, page banners, CTA bands, dark content
   sections). A bright hairline plus a soft bloom top and bottom,
   like a horizon lit from behind. Gold stays the only accent used
   on text, icons and controls; this blue never touches type or
   buttons — it only lights the edges of the black.
   ============================================================ */
.hero::before, .page-banner::before, .cta-band::before, .bg-black::before{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height:min(55%, 380px);
  background:
    linear-gradient(180deg, rgba(var(--jodhpur-rgb),.85) 0%, transparent 2px),
    radial-gradient(60% 100% at 50% 0%, rgba(var(--jodhpur-rgb),.16), transparent 70%);
  z-index:1;
  pointer-events:none;
}
.hero::after, .page-banner::after, .cta-band::after, .bg-black::after{
  content:"";
  position:absolute; inset:auto 0 0 0;
  height:min(40%, 260px);
  background:
    linear-gradient(0deg, rgba(var(--jodhpur-rgb),.5) 0%, transparent 2px),
    radial-gradient(60% 100% at 50% 100%, rgba(var(--jodhpur-rgb),.11), transparent 70%);
  z-index:1;
  pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  .hero::before, .page-banner::before, .cta-band::before, .bg-black::before{
    animation: glow-breathe 7s ease-in-out infinite;
  }
}
@keyframes glow-breathe{
  0%, 100%{ opacity:1; }
  50%{ opacity:.72; }
}