@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("inter-tight-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("inter-tight-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  font-family: system-ui, sans-serif;
  color: #090b20;
}

body {
  margin: 0;
}

.hero {
  position: relative;
  background: #e5edf5 url("skyline.webp") 50% 74% / cover no-repeat;
  contain: paint;
  overflow: hidden;
  box-sizing: border-box;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  grid-template-rows: minmax(0, 33fr) auto minmax(min-content, 67fr);
  justify-items: center;
  padding: max(20px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
}

.announcement {
  grid-row: 2;
  width: min(100%, 38rem);
  text-align: center;
}

.brand {
  position: relative;
  --intro-scale: 1.15;
  width: min(100%, 66vw, 20rem);
  height: auto;
  margin: 0 auto clamp(1.75rem, 4svh, 2.25rem);
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
}

.brand canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 202.13%;
  aspect-ratio: 1.9 / 1.5;
  height: auto;
  transform: translate(-50%, -50%);
  visibility: hidden;
  pointer-events: none;
}

.announcement h1 {
  margin: 0;
  font-family: "Inter Tight", system-ui, sans-serif;
  font-size: clamp(1.875rem, 1.25rem + 1.25vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.12;
  text-wrap: balance;
}

.contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  justify-content: center;
  margin-top: 1.25rem;
  font-size: 1rem;
  font-style: normal;
}

.contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  box-sizing: border-box;
  min-height: 50px;
  padding: 0.625rem 1.125rem;
  color: inherit;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .contact a:hover {
    border-color: #fff;
    box-shadow: inset 0 1px 0 #fff, 0 5px 16px #090b2024;
  }
}


.contact a:focus-visible {
  outline: 2px solid #174b73;
  outline-offset: 3px;
}

.contact a:active { box-shadow: inset 0 1px 4px #090b2026; }

.site-footer {
  position: relative;
  isolation: isolate;
  grid-row: 3;
  margin-top: 1.25rem;
  align-self: end;
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
}

.site-footer::before {
  position: absolute;
  inset: -1.25rem -2.75rem;
  z-index: -1;
  background:
    radial-gradient(ellipse at 52% 58%, #f5f8fc 24%, #f5f8fcdb 45%, transparent 72%),
    radial-gradient(ellipse at 26% 64%, #edf3fae8, transparent 54%),
    radial-gradient(ellipse at 72% 40%, #f5f8fcee, transparent 53%);
  filter: blur(4px);
  pointer-events: none;
  content: "";
}

.glass {
  border: 1px solid #ffffffb8;
  border-radius: 999px;
  background: #f1f3f5;
  box-shadow: inset 0 1px 0 #ffffffb3, 0 2px 10px #090b2014;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  @media (prefers-reduced-transparency: no-preference) and (prefers-contrast: no-preference) {
    .glass {
      background: #f1f3f5a8;
      -webkit-backdrop-filter: blur(10px) saturate(130%);
      backdrop-filter: blur(10px) saturate(130%);
    }
  }
}

@media (prefers-reduced-transparency: no-preference) and (prefers-contrast: no-preference) {
  .glass[href^="tel:"] {
    background-color: #f7faffde;
    border-color: #ffffffe6;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .contact a {
    transition: transform 150ms ease-out, box-shadow 150ms ease-out,
      border-color 150ms ease-out;
  }

  :is(.reveal-ready, .intro-active) :is(.brand img, .announcement h1, .contact) {
    visibility: hidden;
  }

  .intro-glass .brand canvas { visibility: visible; }

  @media (hover: hover) and (pointer: fine) {
    .contact a:hover { transform: translateY(-1px); }
  }

  .contact a:active { transform: scale(0.98); }
}

@media (max-width: 700px) {
  :root {
    --skyline-bleed: 3.25rem;
    overscroll-behavior-y: none;
  }

  .hero {
    grid-template-rows: minmax(0, 34fr) auto minmax(min-content, 66fr);
  }

  .hero {
    background-position: 46% bottom;
    background-size: max(100%, calc(100lvh + var(--skyline-bleed))) auto;
  }

  .brand {
    --intro-scale: 1.4;
    width: min(100%, 48.4vw, 12.1rem);
    margin-bottom: clamp(0.875rem, 2svh, 1.125rem);
  }

  .announcement h1 {
    max-width: 10em;
    margin-inline: auto;
    font-size: clamp(1.7875rem, 8.36vw, 2.2275rem);
    line-height: 1.16;
  }

  .contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    width: min(100%, 19.25rem);
    margin: clamp(1.25rem, 3svh, 1.625rem) auto 0;
    font-size: clamp(0.9375rem, 4.25vw, 1.03125rem);
  }

  .contact a {
    justify-content: center;
    gap: 0.375rem;
    min-height: 53px;
    padding-inline: 0.375rem;
  }

  .contact svg { flex: 0 0 16px; }

  .site-footer { display: none; }
}

@media (max-width: 700px) and (min-height: 400px) {
  :root { overflow: hidden; }
}

@media (max-width: 700px) and (max-resolution: 2dppx) {
  .hero { background-image: url("skyline-mobile.webp"); }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 700px) {
    :root {
      --safari-skyline: url("skyline.webp");
      background:
        linear-gradient(to bottom, #fff, transparent 4rem,
          transparent calc(100% - 4.5rem), #fff),
        var(--safari-skyline) 46% bottom /
          max(100%, calc(100svh + var(--skyline-bleed))) auto no-repeat;
    }

    .hero { background: none; }
  }

  @media (max-width: 700px) and (max-resolution: 2dppx) {
    :root { --safari-skyline: url("skyline-mobile.webp"); }
  }
}