/* The language selector is a regular footer column. Only the current language
   is visible until its native details menu is opened. */
body > footer { grid-template-columns: 1.5fr 1fr 1fr .8fr; }
body > footer .footer-language {
  display: grid;
  gap: 1.1rem;
  font: 600 .65rem Montserrat, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body > footer .footer-language > span { color: var(--color-text-secondary); }
.footer-language-menu { position: relative; width: max-content; }
.footer-language-menu summary {
  display: inline-flex;
  gap: .55rem;
  align-items: center;
  color: var(--color-text-primary);
  cursor: pointer;
  list-style: none;
}
.footer-language-menu summary::-webkit-details-marker { display: none; }
.footer-language-menu summary::after {
  content: "";
  width: .42rem;
  height: .42rem;
  margin-top: -.2rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.footer-language-menu[open] summary::after {
  margin-top: .2rem;
  transform: rotate(225deg);
}
body > footer .footer-languages {
  position: absolute;
  z-index: 2;
  bottom: calc(100% + .75rem);
  left: -.8rem;
  display: grid;
  min-width: 9rem;
  padding: .55rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}
body > footer .footer-languages a {
  padding: .55rem .65rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
}
body > footer .footer-languages a:hover,
body > footer .footer-languages a:focus-visible,
body > footer .footer-languages a[aria-current] {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}
/* Translations may need more lines than the French editorial lockups. */
html:not([lang="fr"]) .hero-title-lockup { width: auto; }
html:not([lang="fr"]) .hero-title-line { white-space: normal; }
html:not([lang="fr"]) .story-copy h2 span { white-space: normal; }
html:not([lang="fr"]) .button { white-space: normal; text-align: center; }
@media (max-width: 900px) {
  body > footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  body > footer { grid-template-columns: 1fr; }
}
html[lang="de"] .legal-card h2 {
  hyphens: auto;
  overflow-wrap: anywhere;
}
html:not([lang="fr"]) .approach h2 span,
html:not([lang="fr"]) .intro h2 span,
html:not([lang="fr"]) .portfolio h2 span,
html:not([lang="fr"]) .home-process h2 span,
html:not([lang="fr"]) .home-process .portfolio-head > p { white-space: normal; }
@media (max-width: 1100px) {
  .approach h2 span { white-space: normal; }
}

body.language-suggestion-open { overflow: hidden; }
.language-suggestion:not([open]) { display: none; }
.language-suggestion {
  width: min(28rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: clamp(1.5rem, 5vw, 2.25rem);
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .4);
}
.language-suggestion::backdrop { background: rgba(3, 10, 18, .55); }
.language-suggestion-flag {
  display: inline-block;
  width: 18px;
  height: 12px;
  margin-right: .65rem;
  vertical-align: .08em;
  border-radius: 2px;
  background: linear-gradient(to right, #002654 0 33.333%, #fff 33.333% 66.666%, #ed2939 66.666%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
}
.language-suggestion h2 {
  margin: 0 0 .9rem;
  font-size: clamp(1.35rem, 4vw, 1.65rem);
  line-height: 1.25;
  letter-spacing: -.025em;
  text-transform: none;
}
.language-suggestion h2:focus { outline: none; }
.language-suggestion p { margin: 0; font-size: .9rem; line-height: 1.7; color: var(--color-text-secondary); }
.language-suggestion-actions { display: grid; gap: .8rem; margin-top: 1.5rem; }
.language-suggestion .button { justify-content: center; padding: 1rem; font-size: .7rem; }
.language-suggestion-stay {
  padding: .55rem;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font: 400 .8rem/1.5 Inter, sans-serif;
  cursor: pointer;
}
.language-suggestion-stay:hover { color: var(--color-text-primary); text-decoration: underline; text-underline-offset: .2em; }