/* Styles for partials/header.html */
[data-include*="header"]{display:block;min-height:7rem} /* holds the space until the header loads */

/* Announcement ticker: two copies of the same list slide left forever (the second is a seamless repeat).
   Pauses on hover and keyboard focus; with reduced motion it shows only the first message, centred. */
.announce{position:relative;overflow:hidden;color:#dbe9f3;font-size:.84rem;font-weight:500;letter-spacing:.01em;
  background:linear-gradient(100deg,var(--night) 0%,var(--night-2) 28%,#0a3a5c 50%,var(--night-2) 72%,var(--night) 100%);background-size:220% 100%;animation:announce-sky 14s ease-in-out infinite alternate}
.announce::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 140% at 12% 0%,rgba(41,169,225,.3),transparent 60%),radial-gradient(50% 140% at 88% 100%,rgba(255,194,26,.16),transparent 60%)}
.announce::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--blue) 25%,#fff 50%,var(--gold) 75%,transparent);background-size:200% 100%;opacity:.7;animation:announce-line 6s linear infinite}
.announce-track{position:relative;display:flex;width:max-content;animation:announce-slide 42s linear infinite;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.announce:hover .announce-track,.announce:focus-within .announce-track{animation-play-state:paused}
.announce-list{display:flex;flex-shrink:0;list-style:none;margin:0;padding:0}
.announce-list li{position:relative;padding:.6rem 2.4rem;white-space:nowrap}
.announce-list li>svg,.announce .pulse{display:inline-block;vertical-align:-3px;margin-right:.6rem}
.announce .pulse{vertical-align:0}
.announce-list li>a{margin-left:.5rem}
.announce-list li::after{content:"";position:absolute;right:-3px;top:50%;width:6px;height:6px;margin-top:-3px;transform:rotate(45deg);background:linear-gradient(135deg,var(--gold),#ffe08a);box-shadow:0 0 10px rgba(255,194,26,.6)}
.announce-list svg{flex:none;width:16px;height:16px;color:var(--blue-l);filter:drop-shadow(0 0 6px rgba(111,203,243,.55))}
.announce-list b{font-weight:700;background:linear-gradient(90deg,#fff 0%,#fff 35%,var(--blue-l) 50%,#fff 65%,#fff 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:announce-shine 4.5s linear infinite}
.announce-list a{color:#fff;text-decoration:none;display:inline-block;padding:.08rem .75rem;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);transition:background .3s,border-color .3s}
.announce-list a:hover{background:var(--blue-d);border-color:var(--blue-d)}
.announce-list a span{display:inline-block;margin-left:.3rem;transition:transform .3s var(--ease)}
.announce-list a:hover span{transform:translateX(3px)}
.announce .pulse{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.announce .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--gold);animation:announce-pulse 1.8s ease-out infinite}
@keyframes announce-slide{to{transform:translateX(-50%)}}
@keyframes announce-sky{to{background-position:100% 0}}
@keyframes announce-line{to{background-position:-200% 0}}
@keyframes announce-shine{from{background-position:100% 0}to{background-position:-150% 0}}
@keyframes announce-pulse{to{transform:scale(3.2);opacity:0}}
@media(max-width:600px){.announce{font-size:.78rem}.announce-list li{padding:.55rem 1.6rem}.announce-track{animation-duration:34s}}
@media(prefers-reduced-motion:reduce){
  .announce-track{width:auto;justify-content:center;-webkit-mask-image:none;mask-image:none}
  .announce-list[aria-hidden],.announce-list li:not(:first-child),.announce-list li::after{display:none}
}
header{position:sticky;top:0;z-index:20;background:rgba(244,248,251,.74);-webkit-backdrop-filter:blur(16px) saturate(1.8);backdrop-filter:blur(16px) saturate(1.8);border-bottom:1px solid rgba(6,17,28,.08)}
header .bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-top:.85rem;padding-bottom:.85rem}
#site-nav ul{display:flex;gap:1.6rem;list-style:none}
#site-nav ul a{position:relative;text-decoration:none;font-weight:500;white-space:nowrap}
#site-nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
#site-nav ul a:hover::after,#site-nav ul a[aria-current]::after{transform:scaleX(1)}
.nav-cta,.nav-scrim,.menu-btn{display:none}

/* Mobile: logo centred between the quote button (left) and the menu button (right), slide-out frosted panel */
@media(max-width:1100px){
  header{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(244,248,251,.97);box-shadow:0 8px 24px -18px rgba(6,17,28,.45)} /* backdrop-filter would trap the fixed panel inside the header */
  header::after{content:"";position:absolute;left:50%;bottom:-1px;width:56px;height:2px;margin-left:-28px;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--gold))}
  header .bar{display:grid;grid-template-columns:1fr auto 1fr;gap:.7rem;padding-top:.6rem;padding-bottom:.7rem}
  .bar .logo{grid-column:2;grid-row:1;transition:transform .3s var(--ease)}
  .bar .logo:active{transform:scale(.96)}
  .bar .btn.sm{grid-column:1;grid-row:1;justify-self:start}
  .menu-btn{grid-column:3;grid-row:1;justify-self:end}

  .menu-btn{display:block;position:relative;z-index:3;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--night);cursor:pointer;transition:color .3s}
  .menu-btn span{position:absolute;left:11px;width:22px;height:2.5px;border-radius:2px;background:currentColor;transition:transform .4s var(--ease),opacity .2s}
  .menu-btn span:nth-child(1){top:14px}
  .menu-btn span:nth-child(2){top:21px}
  .menu-btn span:nth-child(3){top:28px}
  .menu-btn[aria-expanded="true"]{color:#fff}
  .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
  .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .nav-scrim{display:block;position:fixed;inset:0;z-index:1;background:rgba(6,17,28,.4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
  .nav-scrim.show{opacity:1;visibility:visible;transition:opacity .4s}

  #site-nav{position:fixed;top:0;right:0;bottom:0;z-index:2;width:min(86vw,380px);overflow-y:auto;color:#fff;padding:6.5rem 2rem 2rem;
    background:linear-gradient(160deg,rgba(41,169,225,.24),transparent 45%),rgba(6,17,28,.88);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);border-left:1px solid rgba(255,255,255,.12);
    transform:translateX(100%);visibility:hidden;transition:transform .45s var(--ease),visibility 0s .45s}
  #site-nav.open{transform:none;visibility:visible;transition:transform .5s var(--ease)}
  #site-nav ul{flex-direction:column;gap:0}
  #site-nav ul a{display:block;padding:.85rem 0;font-size:1.8rem;font-weight:500;letter-spacing:-.01em;line-height:1.1;border-bottom:1px solid rgba(255,255,255,.12)}
  #site-nav ul a::after{display:none}
  #site-nav ul a:hover,#site-nav ul a[aria-current]{color:var(--blue-l)}
  .btn.nav-cta{display:block;margin-top:2rem;text-align:center;font-size:1.05rem}

  /* Links slide in one after another */
  #site-nav li,.nav-cta{opacity:0;transform:translateX(32px);transition:opacity .2s,transform .2s}
  #site-nav.open li,#site-nav.open .nav-cta{opacity:1;transform:none;transition:opacity .4s,transform .55s var(--ease)}
  #site-nav.open li:nth-child(1){transition-delay:.12s}
  #site-nav.open li:nth-child(2){transition-delay:.17s}
  #site-nav.open li:nth-child(3){transition-delay:.22s}
  #site-nav.open li:nth-child(4){transition-delay:.27s}
  #site-nav.open li:nth-child(5){transition-delay:.32s}
  #site-nav.open li:nth-child(6){transition-delay:.37s}
  #site-nav.open .nav-cta{transition-delay:.42s}

  .nav-open{overflow:hidden} /* stop the page scrolling behind the open menu */
}
@media(max-width:560px){.bar .btn.sm{display:none}.bar .logo span{font-size:1.15rem}.bar .logo img{height:40px}}
