/* ===========================================================================
   Shared site navbar. Every page uses the same markup (header.topbar) and
   these rules only - do not restyle .topbar in a page stylesheet.
   Desktop lengths are in the 853 px comp's rem, same scale on every page.
   =========================================================================== */
.topbar{background:#fff}
.topbar .brand{display:flex;align-items:center}
.topbar .brand img{object-fit:contain;background:#fff}
.topbar .brand-copy b{display:block;line-height:1}
.topbar .brand-copy b span{display:block;color:var(--green)}
.topbar .brand-copy small{display:block;color:#75839a;font-weight:800;letter-spacing:.12em}
.topbar .nav a:hover{color:var(--navy)}
/* i18n.js wraps the .lang button in .language-select, so the auto margin lives here */
.topbar .language-select{position:relative;flex:none;margin-left:auto;z-index:80}
.topbar .language-select .lang{margin-left:0}
.topbar .lang:focus-visible,.topbar .nav-quote:focus-visible,.topbar .mobile-toggle:focus-visible{outline:2px solid var(--green);outline-offset:2px}

@media (min-width:1200px){
  .topbar{height:65rem;border-bottom:1rem solid var(--line)}
  .topbar .topbar__in{height:65rem;display:flex;align-items:center;width:813rem;max-width:calc(100% - 40rem)}
  .topbar .brand{width:178rem;gap:7rem;flex:none}
  .topbar .brand img{width:52rem;height:48rem}
  .topbar .brand-copy b{font-size:15rem;line-height:16rem}
  .topbar .brand-copy small{font-size:5.2rem;margin-top:2rem}
  .topbar .nav{display:flex;align-items:center;gap:29rem;margin-left:14rem}
  .topbar .nav a{position:relative;padding:23rem 0;font-size:8rem;font-weight:600;color:#33415c}
  .topbar .nav a.active{color:var(--green)}
  .topbar .nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:13rem;height:1.5rem;background:var(--green)}
  .topbar .lang{display:flex;align-items:center;gap:5rem;margin-left:auto;font-size:8rem}
  .topbar .nav-quote{
    display:flex;align-items:center;gap:8rem;height:30rem;padding:0 13rem;margin-left:15rem;
    background:var(--green);color:#fff;border-radius:3rem;font-size:6.2rem;font-weight:800;text-transform:uppercase;
  }
  .topbar .mobile-toggle{display:none}
  html[lang="ru"] .topbar .nav{gap:14rem}
  html[lang="ru"] .topbar .nav a{font-size:7rem}
  html[lang="ru"] .topbar .nav-quote{padding:0 9rem;margin-left:9rem;font-size:5.7rem}
}
@media (max-width:1199px){
  :root{--header-h:clamp(74px,23.4vw,92px)}
  .topbar,.topbar .topbar__in{height:var(--header-h)}
  .topbar{border-bottom:1px solid var(--line)}
  .topbar .topbar__in{display:flex;align-items:center}
  .topbar .brand{gap:6px}
  .topbar .brand img{width:clamp(48px,7.5vw,58px);height:clamp(42px,7vw,54px)}
  .topbar .brand-copy b{font-size:clamp(14px,2.55vw,20px)}
  .topbar .brand-copy small{font-size:clamp(6px,1.3vw,10px);margin-top:3px}
  .topbar .nav{
    display:none;position:absolute;z-index:50;top:var(--header-h);left:0;right:0;
    background:#fff;padding:15px 5%;box-shadow:0 8px 20px rgba(8,40,92,.12);
  }
  .topbar .nav.open{display:flex;flex-direction:column;gap:14px}
  .topbar .nav a{font-size:14px;font-weight:600;color:#33415c}
  .topbar .nav a.active{color:var(--green)}
  .topbar .lang{margin-left:auto;font-size:12px}
  .topbar .nav-quote{display:none}
  .topbar .mobile-toggle{display:block;margin-left:14px;border:0;background:none;font-size:22px;color:var(--navy)}
}