.location-page {
  --location-green: #244b43;
  --location-copper: #c87945;
  position: relative;
  isolation: isolate;
  min-height: 720px;
  background-color: var(--location-green);
  background-image: var(--location-hero);
  background-position: center;
  background-size: cover;
}

.location-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(14, 34, 30, .52), rgba(14, 34, 30, .82));
}

.location-content {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding: 56px 0 72px;
}

.location-title-section {
  max-width: 900px;
  margin: 0 auto 36px;
  color: #fff;
  text-align: center;
}

.back-button {
  display: inline-block;
  margin-bottom: 24px;
  border-radius: 8px;
  padding: 10px 16px;
  background: rgba(22, 57, 49, .88);
  color: #fff;
  font: 600 14px/1.3 Poppins, sans-serif;
  text-decoration: none;
}

.location-eyebrow {
  margin: 0 0 12px;
  color: #f2c39b;
  font: 600 13px/1.4 Poppins, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.location-title-section h1 {
  margin: 0;
  color: #fff;
  font: 700 clamp(34px, 6vw, 58px)/1.08 Poppins, sans-serif;
}

.location-lead {
  max-width: 760px;
  margin: 20px auto 0;
  color: rgba(255, 255, 255, .96);
  font: 500 clamp(18px, 2.2vw, 23px)/1.55 "Source Sans 3", sans-serif;
}

.location-actions,
.location-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.location-button,
.location-detail-actions a {
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  padding: 11px 18px;
  background: rgba(22, 57, 49, .86);
  color: #fff;
  font: 600 14px/1.3 Poppins, sans-serif;
  text-decoration: none;
}

.location-button.secondary { background: rgba(154, 81, 40, .9); }

.location-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.location-tile {
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(5, 20, 17, .22);
}

.location-image-tile {
  aspect-ratio: 3 / 2;
  background: #244b43;
}

.location-image-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location-copy-tile {
  padding: 34px;
  background: rgba(10, 24, 21, .82);
  color: #fff;
}

.location-copy-tile h2 {
  margin: 0 0 18px;
  color: #fff;
  font: 700 24px/1.25 Poppins, sans-serif;
}

.location-copy-tile p {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, .95);
  font: 400 16px/1.68 "Source Sans 3", sans-serif;
}

.location-copy-tile p:last-child { margin-bottom: 0; }

.location-details { margin: 0; }

.location-detail-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding: 0 0 16px;
}

.location-detail-row:last-child { padding-bottom: 0; }

.location-detail-row dt {
  flex: 0 0 80px;
  color: #e0a06b;
  font: 700 13px/1.45 Poppins, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.location-detail-row dd {
  min-width: 0;
  margin: 0;
  color: rgba(255, 255, 255, .96);
  font: 400 15px/1.6 "Source Sans 3", sans-serif;
  overflow-wrap: anywhere;
}

.location-detail-row a {
  color: #fff;
  text-decoration: none;
  transition: color .3s ease;
}

.location-detail-row a:hover { color: #9a5128; }

.location-editorial-note {
  margin-top: 20px !important;
  border-left: 3px solid var(--location-copper);
  padding-left: 14px;
  color: rgba(255, 255, 255, .78) !important;
  font-size: 13px !important;
}

@media (max-width: 760px) {
  .location-content { width: min(calc(100% - 32px), 1280px); padding: 38px 0 48px; }
  .location-grid { grid-template-columns: 1fr; gap: 16px; }
  .location-copy-tile { padding: 24px 20px; }
  .location-detail-row dt { flex-basis: 70px; font-size: 12px; }
  .location-detail-row dd { font-size: 14px; }
}

@media (max-width: 480px) {
  .location-detail-row dt { flex-basis: 60px; font-size: 11px; }
  .location-detail-row dd { font-size: 13px; }
  .location-detail-row { padding-bottom: 12px; }
}