/* Brand announcement and multilingual layouts. */
header { align-items: flex-start; gap: 32px; }
.brand { display: block; width: min(48vw, 650px); flex-shrink: 0; line-height: 0; }
.brand img { display: block; width: 100%; height: auto; }
.language-control { display: flex; align-items: center; gap: 9px; margin-top: 26px; color: #c2e3e8; }
.language-control > span[aria-hidden] { color: var(--teal); font-size: 23px; }
.language-control select { font: 500 13px Inter, Arial, sans-serif; color: #e8f6f7; background: #071c2ee8; border: 1px solid #6ca5ae65; border-radius: 24px; padding: 10px 14px; cursor: pointer; max-width: 160px; }
.language-control select:focus-visible, .brand:focus-visible { outline: 2px solid var(--teal); outline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
main { padding-top: 12px; max-width: 680px; }
h1 > span { display: block; color: inherit; text-shadow: none; }
h1 > .accent { color: var(--teal); text-shadow: 0 0 70px #00e5d120; }
.status > span:not(:first-child) { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; animation: none; }
.intro p { max-width: 370px; }
.footer-right > span:first-child { font-size: inherit; color: inherit; margin-left: 0; }
html[lang="uk"] h1 { font-size: clamp(62px, 6vw, 98px); letter-spacing: -4px; }
html[lang="it"] h1, html[lang="fr"] h1 { font-size: clamp(72px, 7vw, 112px); }
@media (max-width: 850px) {
  .brand { width: min(65vw, 540px); }
  .language-control { margin-top: 16px; }
  main { padding-top: 30px; }
}
@media (max-width: 520px) {
  header { gap: 4px; flex-wrap: wrap; }
  .brand { width: 100%; }
  .language-control { margin-top: 0; margin-left: auto; }
  .language-control select { padding: 8px 12px; font-size: 12px; }
  main { padding-top: 22px; }
  h1 { font-size: clamp(62px, 18.5vw, 95px); }
  html[lang="uk"] h1 { font-size: clamp(43px, 12.5vw, 67px); letter-spacing: -2px; }
  html[lang="it"] h1, html[lang="fr"] h1 { font-size: clamp(60px, 17.5vw, 90px); letter-spacing: -3px; }
  .coming { align-items: flex-start; }
  .coming .arrow { flex-shrink: 0; }
  .coming strong { line-height: 1.6; }
  .footer-right { max-width: 155px; }
}

/* Keep the whole announcement within the available screen height. */
.page {
  height: 100svh;
  min-height: 0;
  padding: clamp(12px, 2.5svh, 30px) 5vw clamp(10px, 2svh, 24px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(8px, 1.5svh, 18px);
}
header { min-height: 0; align-items: center; }
.brand { width: min(49vw, 650px); }
.brand img { height: min(9.8vw, 130px); max-height: 17svh; object-fit: cover; object-position: center; }
.language-control { margin-top: 0; }
main {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(7px, 1.25svh, 16px);
  min-height: 0;
}
.status { align-self: flex-start; padding: clamp(6px, .8svh, 10px) 14px; }
.eyebrow { margin: 0; font-size: clamp(8px, 1svh, 10px); }
h1, html[lang="it"] h1, html[lang="fr"] h1 {
  font-size: clamp(42px, min(7.3vw, 10.2svh), 120px);
  letter-spacing: -.045em;
}
html[lang="uk"] h1 { font-size: clamp(38px, min(6.1vw, 9.5svh), 100px); letter-spacing: -.04em; }
.english { margin: 0; font-size: clamp(12px, 1.8svh, 18px); }
.intro p { font-size: clamp(11px, 1.4svh, 14px); line-height: 1.6; }
.line { margin-top: 8px; }
.promise { margin-top: 0; margin-bottom: 0; font-size: clamp(11px, 1.4svh, 14px); }
.coming { margin-top: 0; }
.coming .arrow { width: clamp(28px, 4.2svh, 42px); height: clamp(28px, 4.2svh, 42px); font-size: 21px; }
.coming strong { font-size: clamp(10px, 1.2svh, 12px); }
.coming div > span { margin-top: 4px; font-size: clamp(9px, 1.1svh, 11px); }
footer { margin-top: 0; padding-top: clamp(8px, 1.7svh, 22px); }
.image-caption { bottom: 13svh; }
@media (max-width: 850px) {
  .page { padding-left: 6vw; padding-right: 6vw; }
  .brand { width: min(64vw, 540px); }
  .brand img { height: min(12.8vw, 108px); }
}
@media (max-width: 520px) {
  .page { gap: clamp(6px, 1.1svh, 12px); }
  header { gap: 5px; }
  .brand { width: 100%; }
  .brand img { height: 17.6vw; max-height: 12svh; object-position: center; }
  .language-control { margin-left: auto; }
  .language-control select { padding: 5px 10px; font-size: 11px; }
  .language-control > span[aria-hidden] { font-size: 20px; }
  main { padding: 0; gap: clamp(6px, 1.2svh, 12px); }
  h1, html[lang="it"] h1, html[lang="fr"] h1 {
    font-size: clamp(35px, min(17.5vw, 9.7svh), 83px);
    letter-spacing: -.045em;
  }
  html[lang="uk"] h1 { font-size: clamp(29px, min(12vw, 8svh), 63px); letter-spacing: -.035em; }
  .status { font-size: 7px; letter-spacing: 1px; padding: 6px 11px; }
  .eyebrow { font-size: 7px; letter-spacing: 2px; }
  .english { font-size: clamp(10px, 1.7svh, 14px); }
  .intro { gap: 11px; }
  .intro p { font-size: clamp(10px, 1.45svh, 12px); line-height: 1.5; }
  .line { width: 20px; }
  .promise, .coming { margin-left: 31px; }
  .promise { font-size: clamp(10px, 1.45svh, 12px); line-height: 1.4; }
  .coming { gap: 10px; align-items: center; }
  .coming strong { font-size: 9px; line-height: 1.4; }
  .coming div > span { font-size: 9px; line-height: 1.4; }
  .footer-right { font-size: 6px; max-width: 135px; }
  .footer-right > span[aria-hidden] { font-size: 13px; margin-left: 4px; }
}
@media (max-height: 520px) and (min-width: 521px) {
  .page { padding-top: 8px; padding-bottom: 8px; gap: 4px; }
  .brand img { max-height: 12svh; }
  main { gap: 5px; max-width: 56%; }
  h1, html[lang="it"] h1, html[lang="fr"] h1 { font-size: 9svh; }
  html[lang="uk"] h1 { font-size: 8svh; }
  .status { font-size: 7px; padding: 4px 9px; }
  .intro p, .promise { font-size: 10px; }
  .footer-center, .image-caption { display: none; }
}