/* Opening screen based on hangulas.com; the artwork is served locally. */
.home-page { background: #14161c; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Preloader styles live in loader.css, which every page loads. */

/* The homepage keeps its original picture and animated brand introduction. */
.home-hero {
  position: relative;
  min-height: 970px;
  padding: 244px 0 440px;
  overflow: hidden;
  background: #14102a;
}
.home-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Sits above the picture and below the copy so the text always has contrast. */
.home-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, rgba(20,16,42,.82) 0%, rgba(20,16,42,.45) 38%, rgba(20,16,42,0) 66%);
  pointer-events: none;
}
.home-hero-inner { position: relative; z-index: 1; width: 100%; }
.home-hero-wave { z-index: 2; }
.home-hero-copy { max-width: 100%; }
.home-hero-title { margin: 0 0 14px; color: #fdfdfd; font: 700 clamp(70px, 7.9vw, 113.675px)/1.095 'Inter', sans-serif; letter-spacing: -.035em; }
.home-hero-type { display: block; min-height: 1.1em; white-space: nowrap; }
.home-hero-cursor { display: inline-block; font-weight: 400; animation: home-cursor-blink .8s step-end infinite; }
.home-hero-tagline { position: relative; display: inline-block; max-width: calc(100% - 20px); padding: 11px 21px 10px; border: 1px solid #fff; color: #fff; font: 700 35.52px/1.25 'Inter', sans-serif; text-transform: uppercase; }
.home-hero-tagline::after { content: ''; position: absolute; width: 43px; height: 43px; bottom: -19px; right: -20px; border: 1px solid #fff; }
.js .home-hero-copy { animation: home-copy-in .8s 1.6s both; }
.home-service-preview .section-head { margin-bottom: 36px; }
.home-service-card { padding: 24px; }
.home-service-card .service-card-icon { width: 36px; height: 36px; margin-bottom: 16px; }
.home-service-card p { margin-bottom: 16px; }
.home-service-card .card-more { margin-top: auto; }
@keyframes home-cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes home-copy-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (max-width: 1366px) {
  .home-hero { min-height: 700px; padding: 230px 0; }
}
@media (max-width: 1100px) {
  .home-hero { min-height: 620px; padding: 190px 0 180px; }
  .home-hero-title { font-size: 72px; }
  .home-hero-tagline { font-size: 24px; }
  html:not(.nav-ready) .home-hero { padding-top: 90px; }
}
@media (max-width: 767px) {
  .home-hero { min-height: 0; padding: calc(var(--nav-h) + 52px) 0 140px; }
  .home-hero-image { object-position: 62% center; }
  .home-hero::after {
    background: linear-gradient(180deg, rgba(20,16,42,.88) 0%, rgba(20,16,42,.66) 38%, rgba(20,16,42,.5) 62%, rgba(20,16,42,.9) 100%);
  }
  .home-hero-title { margin-bottom: 18px; font-size: clamp(42px, 12.4vw, 68px); letter-spacing: -.03em; }
  .home-hero-tagline { max-width: calc(100% - 14px); padding: 10px 16px; font-size: clamp(17px, 4.4vw, 26px); }
  .home-hero-tagline::after { width: 30px; height: 30px; right: -14px; bottom: -14px; }
  .loader-name { font-size: clamp(28px, 7vw, 66px); }
}

/* Small phones: 'Technologies' is the longest typed word and must not clip. */
@media (max-width: 380px) {
  .home-hero-title { font-size: clamp(30px, 11.3vw, 44px); }
  .home-hero-tagline { font-size: 16px; padding: 9px 13px; }
  .home-hero-keyline { font-size: 15.5px; }
}
html:not(.js) .home-hero-type { white-space: normal; }
@media (prefers-reduced-motion: reduce) {
  .js .home-hero-copy { animation: none; }
  .home-hero-cursor { display: none; }
  .home-hero-type { white-space: normal; }
}

/* Keyword line under the hero tagline: states what the company does and where. */
.home-hero-keyline {
  margin-top: 16px;
  max-width: 540px;
  color: #eceaf9;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .home-hero-keyline { margin-top: 22px; max-width: 30ch; font-size: 16.5px; line-height: 1.65; }
}