/* Landing hero video artwork */
.v3-hero{
  min-height:calc(100svh - 82px)!important;
  display:grid!important;
  align-items:center!important;
  padding:clamp(90px,9vw,136px) clamp(22px,5vw,72px) clamp(76px,8vw,118px)!important;
  overflow:hidden!important;
  background:#02170d!important;
}
.v3-hero::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(1,12,7,.88) 0%,rgba(1,12,7,.68) 30%,rgba(1,12,7,.22) 66%,rgba(1,12,7,.06) 100%),
    linear-gradient(180deg,rgba(1,12,7,.16) 0%,rgba(1,12,7,.05) 42%,rgba(1,12,7,.62) 100%)!important;
}
.v3-hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  z-index:-2;
  pointer-events:none!important;
  user-select:none;
  -webkit-user-select:none;
  filter:brightness(.78) saturate(.98) contrast(1.01)!important;
  opacity:.98!important;
  transform:scale(1.01);
}
.v3-hero-video::-webkit-media-controls,.v3-hero-video::-webkit-media-controls-panel,.v3-hero-video::-webkit-media-controls-enclosure,.v3-hero-video::-webkit-media-controls-overlay-play-button,.v3-hero-video::-webkit-media-controls-start-playback-button{
  display:none!important;
  opacity:0!important;
  pointer-events:none!important;
  -webkit-appearance:none!important;
}
.v3-hero-sticker{display:none!important}
.v3-hero-copy{max-width:700px!important;transform:none!important}
.v3-kicker{max-width:650px;color:rgba(249,236,199,.78)!important;text-shadow:0 2px 18px rgba(0,0,0,.32)}
.v3-display{font-size:clamp(70px,13vw,176px)!important;line-height:.86!important;max-width:none;text-shadow:0 8px 34px rgba(0,0,0,.22)}
.v3-hero p:not(.v3-kicker){max-width:650px!important;font-size:clamp(17px,1.8vw,22px)!important;line-height:1.5!important;text-shadow:0 3px 20px rgba(0,0,0,.38)}
.v3-hero .v3-actions{margin-top:28px!important;gap:12px!important}
.v3-hero-metrics{
  position:absolute!important;
  right:clamp(24px,4vw,64px)!important;
  bottom:clamp(18px,3vw,42px)!important;
  left:auto!important;
  width:min(860px,43vw)!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  z-index:3!important;
  transform:none!important;
}
.v3-hero-metric{
  min-width:0!important;
  min-height:142px!important;
  padding:20px 20px 18px!important;
  background:rgba(5,59,34,.72)!important;
  border-color:rgba(249,236,199,.24)!important;
  box-shadow:0 22px 64px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
.v3-hero-metric strong{font-size:clamp(42px,3.8vw,68px)!important;line-height:.9!important}
.v3-hero-metric small{font-size:10px!important;line-height:1.25!important;letter-spacing:.08em!important}
@media(max-width:1180px){
  .v3-hero{padding-bottom:clamp(154px,18vw,220px)!important}
  .v3-hero-copy{max-width:720px!important}
  .v3-hero-metrics{left:clamp(22px,5vw,66px)!important;right:clamp(22px,5vw,66px)!important;width:auto!important}
}
@media(max-width:760px){
  .v3-hero{align-items:center!important;padding:96px 18px 34px!important;min-height:auto!important}
  .v3-hero-copy{max-width:100%!important;transform:none}
  .v3-display{font-size:clamp(64px,21vw,112px)!important}
  .v3-hero-metrics{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;grid-template-columns:1fr!important;margin-top:28px!important}
  .v3-hero-metric{min-height:112px!important}
  .v3-hero-video{object-position:58% bottom!important;filter:brightness(.72) saturate(.96) contrast(1.01)!important}
}

/* Landing-only global menu pin.
   The News page keeps its own implementation; the landing page gets one server-rendered
   bar that stays visible over every landing slide from Hero through Store. */
:root{--na-nav-height:84px}
html body.motion-draft > header.topbar[data-na-landing-topbar="server"]{
  position:fixed!important;
  top:0!important;
  right:0!important;
  bottom:auto!important;
  left:0!important;
  z-index:10000!important;
  width:100%!important;
  height:var(--na-nav-height)!important;
  min-height:var(--na-nav-height)!important;
  margin:0!important;
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  transform:none!important;
  clip-path:none!important;
  overflow:visible!important;
  contain:none!important;
  isolation:isolate!important;
}
html body.motion-draft > main.v3-main{
  padding-top:var(--na-nav-height)!important;
}
#campaigns,#movement,#community-calendar,#news,#about,#athletes,#shop{
  scroll-margin-top:var(--na-nav-height)!important;
}
@media(max-width:760px){
  :root{--na-nav-height:68px}
  html body.motion-draft > header.topbar[data-na-landing-topbar="server"]{
    height:var(--na-nav-height)!important;
    min-height:var(--na-nav-height)!important;
  }
}

/* Keep the global landing bar in one stable News-style dark state.
   The landing observer may still toggle .on-dark, but that must never change
   the bar's background, logo, text or controls while moving between slides. */
html body.motion-draft > header.topbar[data-na-landing-topbar="server"],html body.motion-draft > header.topbar[data-na-landing-topbar="server"].on-dark{
  background:linear-gradient(90deg,rgba(3,32,19,.72) 0%,rgba(5,59,34,.5) 48%,rgba(7,95,54,.28) 100%)!important;
  border-bottom:1px solid rgba(246,232,189,.22)!important;
  box-shadow:inset 0 1px 0 rgba(246,232,189,.18),0 18px 52px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(16px) saturate(1.16)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.16)!important;
  color:#F9ECC7!important;
}
html body.motion-draft > header.topbar[data-na-landing-topbar="server"] .brand img{
  content:url('/img/logo_cream_on_transparent.png')!important;
}
html body.motion-draft > header.topbar[data-na-landing-topbar="server"] .nav,html body.motion-draft > header.topbar[data-na-landing-topbar="server"] .nav a,html body.motion-draft > header.topbar[data-na-landing-topbar="server"] .mobile-nav-toggle,html body.motion-draft > header.topbar[data-na-landing-topbar="server"] .involve-toggle{
  color:#F9ECC7!important;
}
html body.motion-draft > header.topbar[data-na-landing-topbar="server"] .nav a{
  opacity:.82!important;
}
html body.motion-draft > header.topbar[data-na-landing-topbar="server"] .nav a:hover,html body.motion-draft > header.topbar[data-na-landing-topbar="server"] .nav a:focus-visible{
  opacity:1!important;
}
html body.motion-draft > header.topbar[data-na-landing-topbar="server"] .mobile-nav-toggle,html body.motion-draft > header.topbar[data-na-landing-topbar="server"] .involve-toggle{
  border-color:rgba(249,236,199,.55)!important;
  background:radial-gradient(circle at 24% 0%,rgba(249,236,199,.22),transparent 43%),linear-gradient(180deg,rgba(249,236,199,.17),rgba(249,236,199,.075))!important;
}
html body.motion-draft > header.topbar[data-na-landing-topbar="server"] .nav-actions>.nb.primary{
  background:#F9ECC7!important;
  border-color:#F9ECC7!important;
  color:#053B22!important;
}

/* Restore the original live-main News composition. The fixed landing nav stays
   independent; the embedded News canvas keeps its authored responsive heights. */
html body.motion-draft main.v3-main #news.na-main-news-landing{
  height:100svh!important;
  min-height:720px!important;
}
@media(max-width:800px){
  html body.motion-draft main.v3-main #news.na-main-news-landing{
    height:82svh!important;
    min-height:620px!important;
  }
}
@media(max-width:470px){
  html body.motion-draft main.v3-main #news.na-main-news-landing{
    height:72svh!important;
    min-height:560px!important;
  }
}

/* About / Impact already uses the original live-main birds-and-paper assets.
   Keep the outer section in natural flow so global fullscreen rules cannot
   reinterpret the authored .na-about-scene composition or its mobile layout. */