/* Agency-access entry + mobile menu, shared by every public page.
   The menu button appears only when THAT page's own nav links are hidden
   (see js/site-nav.js), so pages with different breakpoints all behave. */
.agency-access{display:inline-flex;align-items:center;flex:0 0 auto;padding:12px 16px;border:1px solid #c5cbc7;color:#10282a;background:transparent;font-size:12px;font-weight:700;letter-spacing:.6px;line-height:1;white-space:nowrap;text-decoration:none;font-family:Arial,sans-serif}
.agency-access:hover,.agency-access:focus-visible{background:#10282a;color:#fff;border-color:#10282a}

.menu-toggle{display:none;flex:0 0 auto;width:42px;height:42px;padding:0;border:1px solid #c5cbc7;background:transparent;cursor:pointer;align-items:center;justify-content:center}
.menu-toggle .menu-bars,.menu-toggle .menu-bars::before,.menu-toggle .menu-bars::after{display:block;width:18px;height:2px;background:#10282a;content:"";position:relative}
.menu-toggle .menu-bars::before{position:absolute;top:-6px;left:0}
.menu-toggle .menu-bars::after{position:absolute;top:6px;left:0}
.nav-collapsed .menu-toggle{display:inline-flex}
.nav-collapsed .agency-access{display:none}
@media(max-width:768px){.agency-access{display:none}}

.site-menu{position:fixed;left:0;right:0;top:var(--menu-top,68px);z-index:9998;background:#fff;border-bottom:1px solid #ddd;box-shadow:0 14px 32px rgba(0,0,0,.14);padding:6px 6% 22px;max-height:calc(100vh - var(--menu-top,68px));overflow-y:auto;font-family:Arial,sans-serif}
.site-menu[hidden]{display:none}
.site-menu a{display:block;padding:15px 0;border-bottom:1px solid #eee;font-size:15px;color:#10282a;text-decoration:none;overflow-wrap:anywhere}
.site-menu a:last-child{border-bottom:0}
.site-menu .site-menu-cta{margin-top:14px;padding:15px 18px;background:#103b38;color:#fff;text-align:center;font-weight:700;font-size:13px;border-bottom:0}
.site-menu .site-menu-agency{margin-top:12px;padding:14px 18px;border:1px solid #10282a;text-align:center;font-weight:700;font-size:13px}

/* Small screens: the header must fit logo + language button + menu button (+ CTA
   when there is room). main.css keeps a 45px gap between header items, which
   only fits without the extra menu button; tighten it, and let the menu carry
   the CTA on phones (it is listed there too) instead of overflowing. */
@media(max-width:800px){
  .navbar{gap:12px}
  .navbar .nav-cta{padding:11px 12px;white-space:nowrap}
}
@media(max-width:560px){
  .navbar.nav-collapsed .nav-cta{display:none}
}

/* Mid-width desktops (801-1100px): logo + 4 links + language + agency link + CTA
   need more room than main.css's 45px gaps leave, especially in German/French/
   Spanish. Tighter gaps keep everything on one row; if a language still does not
   fit, js/site-nav.js switches to the menu (class nav-tight) instead of letting
   the header overflow. */
@media(min-width:801px) and (max-width:1100px){
  .navbar{gap:18px;padding-left:4%;padding-right:4%}
  .navbar nav{gap:18px}
  .agency-access{padding:11px 12px;font-size:11px}
  .navbar .nav-cta{padding:12px 14px}
}
.nav-tight nav{display:none !important}