/* Cinematic hero — shared across every page that carries it.
   Atmospheric glow on deep black, no video, text centered.
   Structure per-page (below the sticky Studio nav):
     <div class="hero-zone">
       <div class="hero-overlay hero-overlay-btm"></div>
       <div class="hero-content"><div class="hero-content-inner">
         <span class="hero-eyebrow-line"><span class="dot"></span><span class="mark">{PAGE LABEL}</span></span>
         <h1 class="hero-h1">
           <span class="hero-h1-line-1">{line 1 gradient}</span>
           <span class="hero-h1-line-2">{line 2 white}</span>
         </h1>
         <p class="hero-sub-dark">{subhead}</p>
       </div></div>
     </div>
   The <main class="studio-pane hero-follows"> that follows removes its own
   peek + rounded-top so the hero and pane join seamlessly. */

.hero-zone {
    position: relative;
    background:
      radial-gradient(ellipse 900px 600px at 15% 20%, rgba(74,181,237,0.18), transparent 60%),
      radial-gradient(ellipse 700px 500px at 90% 90%, rgba(0,136,219,0.10), transparent 60%),
      #0A0A0A;
    color: #FFFFFF;
    overflow: hidden;
    /* Real black space below the stats + room for the fade to sit lower.
       Ask Forte peeks through the very bottom of the fade (see negative
       margin-top on the first pane child below). */
    padding-bottom: 6rem;
}
/* Comfortable gap between hero and first pane section. Homepage overrides
   inline to pull Ask Forte up into the fade (that's its specific "peek"
   composition). Other pages keep this generous default. */
main.studio-pane.hero-follows > :first-child { margin-top: 0 !important; padding-top: 3rem; position: relative; z-index: 2; }
main.studio-pane.hero-follows { margin-top: 0; padding-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
main.studio-pane.hero-follows::before { display: none; }

/* Bottom fade dissolves the hero into the white pane below */
.hero-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hero-overlay-btm {
    background: linear-gradient(180deg, transparent 82%, rgba(10,10,10,0.55) 94%, #FFFFFF 100%);
}
[data-theme="dark"] .hero-overlay-btm {
    background: linear-gradient(180deg, transparent 82%, rgba(10,10,10,0.4) 94%, #0A0A0A 100%);
}

/* Nav sits transparent-over-dark on the cinematic hero. Only applied when
   the header carries .hero-nav (opt-in per page). */
.hero-nav { position: sticky; top: 0; z-index: 40; padding: 1.15rem 0; background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom: 1px solid transparent !important; transition: background 0.2s ease, border-color 0.2s ease; }
.hero-nav.is-scrolled { background: rgba(10, 10, 10, 0.82) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important; backdrop-filter: saturate(180%) blur(20px) !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
.hero-nav .studio-nav-inner { max-width: var(--max-wide); margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.hero-nav .studio-logo img { filter: brightness(0) invert(1); height: 28px; width: auto; display: block; }
.hero-nav .studio-nav-cta { background: #FFFFFF; color: #0A0A0A; }
.hero-nav .studio-nav-cta:hover { background: #F5F5F5; color: #0A0A0A; }
.hero-nav #hamburger { border-color: rgba(255,255,255,0.24); }
.hero-nav #hamburger span { background: #FFFFFF; }
@media (max-width: 640px) {
    .hero-nav { padding: 0.7rem 0 !important; }
    .hero-nav .studio-nav-inner { padding: 0 1rem; gap: 0.75rem; }
    .hero-nav .studio-nav-cta { display: none; }
    .hero-nav .studio-nav-right { gap: 0.5rem; }
    /* Theme toggle stays visible at page-top on mobile (was hidden until scrolled) */
}

.hero-content { position: relative; z-index: 20; padding: 6rem 0 3rem; }
.hero-content-inner { max-width: 900px; margin: 0 auto; padding: 0 1.5rem; text-align: center; }
@media(min-width: 640px) { .hero-content-inner { padding: 0 2rem; } }

.hero-eyebrow-line { display: inline-flex; align-items: center; gap: 0.85rem; margin: 0 0 1.5rem; font-family: var(--font-display); font-variation-settings: var(--font-display-vars); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #FFFFFF; }
.hero-eyebrow-line .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(0,136,219,0.18); flex: none; }

.hero-h1 { font-family: var(--font-display); font-variation-settings: var(--font-display-vars); font-weight: 500; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.06; letter-spacing: -0.03em; margin: 0 auto 1.5rem; max-width: 22ch; }
.hero-h1 .hero-h1-line-1 { display: block; background: linear-gradient(90deg, #FFFFFF 0%, #4AB5ED 55%, #0088DB 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero-h1 .hero-h1-line-2 { display: block; color: #FFFFFF; }

.hero-sub-dark { color: rgba(255,255,255,0.75); font-size: 1.125rem; line-height: 1.55; margin: 0 auto; max-width: 60ch; }

/* Mobile hero: atmospheric glow bg, vertically-centered content stack.
   Padding-bottom kept tight, no overlap between pane + hero on mobile. */
@media (max-width: 768px) {
  .hero-zone {
    padding-bottom: 0.5rem;
    min-height: 55vh;
    display: flex;
    align-items: center;
  }
  .hero-zone .hero-content {
    padding: var(--sp-4) 0 !important;
    width: 100%;
  }
  .hero-zone .hero-content-inner { text-align: center; }
  .hero-zone .hero-h1 { max-width: 100% !important; }
  /* No pull-up on mobile — hero is already tight, don't overlap the pane */
  main.studio-pane.hero-follows > :first-child { margin-top: 0 !important; padding-top: 1rem; }
}