#top{position:relative;z-index:5;color:var(--brand)}
#top .banner{width:100%;height:38px;display:flex;align-items:center;justify-content:center;background:var(--brand)}
#top .banner p{color:#fff;font-size:14px;font-weight:600;line-height:1.3;text-align:center}
#top .nav{width:100%;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,8.333vw,120px)}
#top .nav-logo img{height:41px;width:auto}
#top .nav-links{display:flex;gap:34px;font-size:15px;font-weight:500}
#top .nav-links a{color:var(--nav-text)}
#top .nav-links a:hover{color:var(--brand)}
#top .nav-cta{height:40px;padding:0 20px;border-radius:var(--radius-pill);background:var(--brand);color:#fff;font-size:14px;font-weight:600;display:inline-flex;align-items:center;white-space:nowrap;transition:background-color .15s ease}
#top .nav-cta:hover{background:var(--brand-dark);color:#fff}
@media (max-width:900px){
  #top .banner{height:auto;min-height:36px;padding:8px 16px}
  #top .banner p{font-size:12.5px}
  #top .nav{height:60px;padding:0 20px}
  #top .nav-logo img{height:32px}
  #top .nav-links{display:none}
  #top .nav-cta{height:36px;padding:0 16px;font-size:13px}
}
/* Leylek Rota lockup is ~1.9x wider than the old Rota one: shrink it (and the CTA padding) on the narrowest phones so the two never touch */
@media (max-width:374px){
  #top .nav-logo img{height:27px}
}
@media (max-width:340px){
  #top .nav-logo img{height:24px}
  #top .nav-cta{padding:0 12px}
}

/* --- motion (ANIM-A): nav pill shrinks slightly once the page is scrolled past 80px --- */
#top .nav-sentinel{position:absolute;top:0;left:0;width:1px;height:80px;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  #top .nav-cta{transition:background-color .15s ease,transform .2s cubic-bezier(.2,.7,.2,1);transform-origin:50% 50%}
  #top.is-scrolled .nav-cta{transform:scale(.94)}
}