
.c-hero {
  padding-top: clamp(176px, 20vw, 280px);
  padding-bottom: clamp(112px, 14vw, 200px);
}
.c-hero__grid {
  display: grid;
  gap: clamp(72px, 10vw, 104px);
}
@media (min-width: 900px) {
  .c-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(56px, 7vw, 112px);
    align-items: center;
  }
}
.c-hero__title {
  font-weight: 300;
  font-size: clamp(48px, 8vw, 116px);
  white-space: nowrap;
  line-height: .98;
  letter-spacing: -0.04em;
  color: var(--paper);
}
@media (min-width: 900px) { .c-hero__title { font-size: clamp(44px, 7.4vw, 92px); } }
.c-hero__line {
  margin-top: clamp(20px, 2.2vw, 32px);
  max-width: 24em;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--mist);
}
.c-details {
  margin-top: clamp(56px, 6vw, 80px);
  display: grid;
  border-top: 1px solid var(--rule);
}
.c-detail {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  padding-block: 22px;
  border-bottom: 1px solid var(--rule);
}
.c-detail__label {
  font-size: 15px;
  line-height: 1.75;
  color: var(--paper);
}
.c-detail__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--mist);
}
.c-map-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-size: 15px;
  color: var(--mist);
  transition: color .2s var(--ease);
}
.c-map-link svg { transition: transform .25s var(--ease); }
.c-map-link:hover { color: var(--paper); }
.c-map-link:hover svg { transform: translate(2px, -2px); }
.c-map {
  position: relative;
  margin: 0;
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 900px) { .c-map { max-width: 600px; justify-self: end; } }
.c-map__img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(.72) contrast(1.08); 
}
.c-dot {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 50%;        
  top: 48.4%;       
  transform: translate(-50%, -50%);
}
.c-dot__middle {
  width: 16px;
  height: 16px;
  border-radius: 30px;
  position: absolute;
  left: 2px;
  top: 2px;
  background: var(--signal);
}
.c-dot__middle::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  border-radius: 30px;
  opacity: 0;
  animation: c-signal2 2s cubic-bezier(0,.55,.55,1) .78s infinite forwards;
}
.c-dot__signal,
.c-dot__signal2 {
  width: 180px;
  height: 180px;
  border-radius: 200px;
  position: absolute;
  left: -80px;
  top: -80px;
  opacity: 0;
  pointer-events: none;
  background: var(--signal);
  transform-origin: 50% 50%;
}
.c-dot__signal { animation: c-signal 2s cubic-bezier(0,.55,.55,1) .78s infinite forwards; }
.c-dot__signal2 { animation: c-signal 2s cubic-bezier(0,.55,.55,1) 1s infinite forwards; }
@keyframes c-signal {
  0% { opacity: 0; transform: scale(0); }
  1% { opacity: .25; }
  20% { opacity: .25; }
  60% { transform: scale(1); opacity: 0; }
}
@keyframes c-signal2 {
  0% { opacity: 0; }
  1% { opacity: .2; }
  20% { opacity: .17; }
  60% { opacity: 0; }
}
@media (max-width: 899px) {
  .c-hero__line { margin-top: 32px; }
  .c-details { margin-top: 48px; }
  .c-detail { padding-block: 26px; }
  .c-map-link { margin-top: 40px; }
  .c-hero__grid { gap: 64px; }
  .c-map { width: 100%; margin-inline: 0; }
}
.c-band {
  background: var(--ink-2);
  padding-block: clamp(112px, 14vw, 200px);
}
.c-band__inner { text-align: center; }
.c-band__title {
  margin-inline: auto;
  max-width: 16ch;
  font-weight: 300;
  font-size: clamp(34px, 5vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--paper);
}
.c-band__line {
  margin: clamp(20px, 2vw, 28px) auto 0;
  max-width: 30em;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--mist);
}
@keyframes c-rise {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: none; }
}
.c-load { animation: c-rise 1.1s var(--ease) both; }
.c-load--2 { animation-delay: .12s; }
.c-load--3 { animation-delay: .26s; }
@media (prefers-reduced-motion: reduce) {
  .c-dot__signal, .c-dot__signal2 { display: none; }
  .c-dot__middle::after { animation: none; opacity: 0; }
}
