body{font-family:Avenir Next,Arial,sans-serif;margin:0;color:#02102A;background-image:url('images/Background.jpeg');background-repeat:no-repeat;background-size:cover;background-position:center center}
header{padding:24px 8%;display:flex;justify-content:space-between;border-bottom:1px solid #e5e5e5;background:#fff}
nav a{margin-left:24px;color:#333;text-decoration:none}
.hero{padding:90px 8%;background:#f5f6f8}
h1{font-size:52px;max-width:900px}
.sub{max-width:700px;color:#555;font-size:20px}
.btn{display:inline-block;margin-top:20px;padding:14px 24px;background:#111;color:#fff;text-decoration:none}
section{padding:70px 8%}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.card{background:#fff;padding:24px;border:1px solid #e8e8e8}
footer{padding:40px 8%;background:#111;color:#fff}
.small{color:#777}

.launch-page{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 8%;background:transparent;gap:40px}
.launch-content{width:min(50vw,720px);position:relative}
.logo-wrap{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%}
.logo-wrap img{width:100%;max-width:100%;height:auto;display:block}
.logo-divider{width:180px;height:2px;background:#fff}
.launch-copy{margin-top:40px}
.tagline{ font-size:38px;margin:0;color:#fff;letter-spacing:.02em;line-height:1.2}
.tagline-divider{width:146px;height:1px;background:#D89F6A;margin:22px auto 0;border-radius:1px}
.domains{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;font-size:16px;color:#fff}
.domain-item{display:inline-flex;align-items:center;white-space:nowrap;text-transform:uppercase}
.domain-item:not(:first-child)::before{content:'•';display:inline-flex;align-items:center;height:1em;margin:16px;color:#fff}
.domain-item.line-start::before{content:'';margin-right:0}
.locations{display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);align-items:center;justify-content:center;column-gap:24px;margin-top:32px}
.location-block{display:flex;flex-direction:column;gap:4px;font-size:17px;color:#D89F6A;line-height:1.4;cursor:pointer;outline:none;transition:color .2s ease;width:100%}
.location-block div:first-child{font-size:24px;font-weight:600;text-transform:uppercase}
.location-block div:not(:first-child){opacity:0;max-height:0;overflow:hidden;transition:opacity .2s ease,max-height .2s ease}
.location-divider{width:1px;height:56px;background:#D89F6A;justify-self:center}
.location-block:hover div:not(:first-child),
.location-block.active div:not(:first-child),
.location-block:focus-within div:not(:first-child){opacity:1;max-height:48px}
.location-block:hover,
.location-block.active{color:#D89F6A}
.location-divider{width:1px;height:56px;background:#D89F6A;flex-shrink:0}
.location-email{margin:20px auto 0;font-size:20px;opacity:.8;color:white}
.location-email a{color:white;text-decoration:none}
.location-divider-horizontal{width:400px;height:1px;background:#D89F6A;margin:16px auto 0;border-radius:1px}
.launch-note{margin-top:18px;margin-bottom:200px;color:#D89F6A;font-size:14px;letter-spacing:.12em;text-transform:uppercase}
@font-face {
  font-family: 'Alphabet Asri Regular';
  src: url('fonts/AlphabetAsri-Regular.woff2') format('woff2'),
       url('fonts/AlphabetAsri-Regular.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

.tagline {
  font-family: 'Avenir Next', 'Alphabet Asri Regular', cursive, sans-serif;
  font-weight: 200;
}
.location-block {
  font-family: 'Avenir Next', 'Alphabet Asri Regular', cursive, sans-serif;
  font-weight: 200;
}
.location-email {
  font-family: 'Avenir Next', 'Alphabet Asri Regular', cursive, sans-serif;
  font-weight: 200;
}

@media (max-width:900px){.logo-wrap img{width:min(60vw,520px)}.tagline{font-size:32px}.logo-divider{width:140px}.tagline-divider{width:72px}}
@media (max-width:640px){.launch-page{padding:0 5%}.launch-content{width:100%;max-width:none}.tagline{font-size:28px}.logo-wrap img{width:min(72vw,420px)}.logo-divider{width:120px}.tagline-divider{width:56px}.locations{display:flex;flex-direction:column;align-items:center;gap:18px}.location-divider{display:none}.location-divider-horizontal{display:none}.location-email{display:block;opacity:1}}

@font-face {
  font-family: 'Avenir Next';
  src: url('fonts/AvenirNextCyr-Light.woff2') format('woff2'),
       url('fonts/AvenirNextCyr-Light.woff') format('woff');
  font-weight: 200;
  font-style: normal;
}