html[lang="ka"] body {
  font-family: "Noto Sans Georgian", Manrope, system-ui, sans-serif;
}

html[lang="ka"] .brand,
html[lang="ka"] .hero h1,
html[lang="ka"] .service-head h2,
html[lang="ka"] .mission h2,
html[lang="ka"] .contact h2 {
  font-family: "Noto Serif Georgian", serif;
}

.hero {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
}

.hero-copy,
.hero-visual,
.service-head > div {
  min-width: 0;
}

.hero h1 {
  font-size: 4.5rem;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

html[lang="ka"] .hero h1 {
  font-size: 3.5rem;
}

.mission {
  grid-template-columns: minmax(0, .43fr) minmax(0, .57fr);
}

.mission-image {
  min-height: 0;
  min-width: 0;
  aspect-ratio: 16 / 9;
}

.mission-copy {
  min-width: 0;
}

.mission-image img {
  display: block;
}

.reveal,
.reveal.visible {
  opacity: 1;
  transform: none;
  transition: none;
}

.delay-1 {
  transition-delay: 0s;
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-copy {
    padding: 48px 0 28px;
  }

  .hero-visual {
    min-height: 330px;
    border-radius: 16px;
  }

  .hero h1,
  html[lang="ka"] .hero h1 {
    font-size: 3.5rem;
  }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero h1,
  html[lang="ka"] .hero h1 {
    font-size: 3.25rem;
  }

  .mission {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .hero h1,
  html[lang="ka"] .hero h1 {
    font-size: 2.5rem;
  }
}

@media (max-width: 480px) {
  html[lang="ka"] .hero h1 {
    font-size: 2.2rem;
    overflow-wrap: normal;
  }
}

@media (max-width: 400px) {
  html[lang="ka"] .hero h1 {
    font-size: 1.9rem;
  }
}

@media (max-width: 360px) {
  .hero h1 {
    font-size: 2rem;
  }
}

@media (max-width: 340px) {
  html[lang="ka"] .hero h1 {
    font-size: 1.65rem;
  }
}