:root{
  --hero-logo-size: clamp(140px, 16vw, 260px);
  --hero-logo-offset: clamp(138px, 20.7vw, 345px);
}
.hero-animated{ position: relative; }
.hero-brand{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 6;
  pointer-events: none;
}
.hero-brand img{
  width: var(--hero-logo-size);
  height: auto;
  opacity: .96;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.35)) drop-shadow(0 2px 8px rgba(0,0,0,.25));
  animation: heroLogoIn .7s ease-out .05s both;
}
@keyframes heroLogoIn{
  from{ opacity: 0; transform: translateY(6px) scale(.985); }
  to  { opacity: .96; transform: none; }
}
/* Push hero copy down */
.hero-copy,
.hero-animated .copy,
.hero-animated .content,
.hero-animated .hero-content,
.hero-animated .container,
.hero-animated .inner{
  position: relative;
  z-index: 7;
  padding-top: var(--hero-logo-offset);
}
@media (max-width: 768px){
  :root{
    --hero-logo-size: clamp(120px, 26vw, 170px);
    --hero-logo-offset: clamp(115px, 34.5vw, 241px);
  }
}


/* Nudge hero copy down via transform */
.hero-animated .hero-copy{
  transform: translateY(var(--hero-logo-offset));
  will-change: transform;
}


/* Center stack (logo + CTA) */
.hero-brand{ pointer-events: auto; }
.hero-brand .brand-stack{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.4vw, 28px);
  transform: translateY(0);
}
.hero-brand img{ pointer-events: none; }

/* CTA below logo */
.hero-logo-cta{
  pointer-events: auto;
  display: inline-block;
  font-weight: 600;
  line-height: 1;
  font-size: clamp(15px, 1.2vw, 17px);
  padding: clamp(12px, 1.1vw, 14px) clamp(18px, 1.6vw, 22px);
  border-radius: 9999px;
  color: #fff;
  text-decoration: none;
  background: rgba(20, 49, 58, .92);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 6px 18px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, opacity .2s ease;
}
.hero-logo-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.28), 0 6px 10px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.1);
  background: rgba(23, 58, 68, .96);
}
.hero-logo-cta:active{
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.1);
}

/* Mobile tweaks */
@media (max-width: 768px){
  .hero-logo-cta{
    font-size: 16px;
    padding: 14px 22px;
  }
}

/* === desktop nav hairlines: scope to header only; dedupe === */
@media (min-width: 961px){

  header.nav-glass{
}