.location-page {
  min-height: 100vh;
  padding: 150px 0 90px;
  background: linear-gradient(180deg, #092019 0, var(--ink) 620px);
}

.location-page .crumbs {
  display: flex;
  gap: 10px;
  margin-bottom: 35px;
  color: var(--muted);
  font-size: 14px;
}

.location-page .crumbs a:hover { color: var(--aqua); }

.location-hero {
  position: relative;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
  padding: 58px 38% 64px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.location-hero::after {
  content: "";
  position: absolute;
  right: 4%;
  top: 50%;
  width: min(27vw, 330px);
  aspect-ratio: 1;
  background: url('/assets/img/logo-mark.png') center / contain no-repeat;
  opacity: .28;
  transform: translateY(-50%) rotate(7deg);
}

.location-hero h1 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(44px, 7vw, 82px);
  line-height: .98;
  letter-spacing: -.04em;
}

.location-hero > p {
  max-width: 68ch;
  margin: 28px 0 0;
  color: #c9d5d1;
  font-size: clamp(18px, 2vw, 22px);
}

.location-body {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, .65fr);
  gap: 72px;
  margin-top: 110px;
}

.location-copy { max-width: 72ch; color: #c9d5d1; }
.location-copy h2 { margin: 68px 0 16px; color: var(--white); font-size: clamp(28px, 4vw, 42px); line-height: 1.08; letter-spacing: -.03em; }
.location-copy h2:first-child { margin-top: 0; }
.location-copy p { margin: 0 0 18px; }

.location-aside { position: sticky; top: 110px; height: max-content; padding: 32px; border: 1px solid rgba(1,254,207,.2); border-radius: 16px; background: #10241e; box-shadow: 0 24px 60px rgba(0,0,0,.24); }
.location-aside h2 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.location-aside ul { margin: 18px 0 27px; padding: 0; list-style: none; color: var(--muted); }
.location-aside li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.location-aside .button { width: 100%; }

.location-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.location-links a { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--aqua-soft); font-size: 14px; }
.location-links a:hover { border-color: var(--aqua); color: var(--aqua); }

@media (max-width: 760px) {
  .location-page { padding-top: 120px; }
  .location-page .crumbs { margin-bottom: 22px; }
  .location-hero { width: 100%; min-width: 0; max-width: 100%; min-height: auto; padding: 44px 0 58px; }
  .location-hero::after { display: none; }
  .location-hero h1 { width: 100%; max-width: 100%; font-size: clamp(38px, 10.8vw, 52px); line-height: 1; overflow-wrap: anywhere; }
  .location-hero > p { width: 100%; max-width: 100%; font-size: 17px; overflow-wrap: anywhere; }
  .location-body { grid-template-columns: 1fr; gap: 42px; margin-top: 60px; }
  .location-aside { position: static; }
}

@media (prefers-reduced-motion: no-preference) {
  .location-hero::after {
    animation: location-mark-arrive 820ms cubic-bezier(.16, 1, .3, 1) both;
  }

  .location-hero h1 {
    animation: location-title-arrive 720ms 80ms cubic-bezier(.16, 1, .3, 1) both;
  }

  .location-hero > p {
    animation: location-copy-arrive 620ms 180ms cubic-bezier(.16, 1, .3, 1) both;
  }

  .location-hero > p + p {
    animation-delay: 250ms;
  }
}

@keyframes location-mark-arrive {
  from { opacity: 0; transform: translateY(-46%) rotate(18deg) scale(.86); }
  to { opacity: .28; transform: translateY(-50%) rotate(7deg) scale(1); }
}

@keyframes location-title-arrive {
  from { opacity: .25; clip-path: inset(0 0 100% 0); transform: translateY(18px); }
  to { opacity: 1; clip-path: inset(0); transform: none; }
}

@keyframes location-copy-arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}