/* Officium — language switcher (shared by every page, both languages) */
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:100px;
  background:var(--ivory-deep);
  flex-shrink:0;
}
.lang-switch a{
  display:inline-block;
  padding:6px 14px;
  border-radius:100px;
  font-size:0.78rem;
  font-weight:800;
  letter-spacing:0.02em;
  color:var(--navy);
  opacity:0.62;
  white-space:nowrap;
  transition:background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.lang-switch a:hover{opacity:1;}
.lang-switch a[aria-current="true"]{
  background:var(--navy);
  color:var(--ivory);
  opacity:1;
}
.lang-switch .lang-short{display:none;}

/* Nav needs a little breathing room once the switcher sits next to the CTA */
nav{gap:18px;}
.logo-mark{flex-shrink:0;}

@media (max-width:1040px){
  .lang-switch a{padding:6px 12px; font-size:0.74rem;}
}
@media (max-width:880px){
  nav{gap:12px;}
  .lang-switch .lang-full{display:none;}
  .lang-switch .lang-short{display:inline;}
}
/* Below this the header carries logo + switcher + CTA, so give the CTA a smaller footprint. */
@media (max-width:760px){
  nav{padding-left:22px; padding-right:22px; gap:10px;}
  .nav-links{max-width:170px;}
  .nav-cta{padding:9px 15px; font-size:0.78rem;}
}
@media (max-width:400px){
  .lang-switch a{padding:5px 9px; font-size:0.72rem;}
  /* The hero already repeats this call to action a few pixels further down. */
  .nav-cta{display:none;}
}