.v2-page {
  background: #fff;
  color: var(--green);
}

/* The homepage uses main::before to cover its sticky hero image. V2 pages have
   no sticky hero, so that cover must not sit above their page content. */
.v2-page main::before {
  display: none;
}

.v2-page .site-header--subpage,
.news-page .desktop-nav {
  color: var(--green);
}

.v2-page .site-header--subpage .menu-toggle {
  border-color: var(--green);
}

.v2-page .site-header--subpage .contact {
  color: #fff;
}

.v2-page .v2-header {
  top: 43px;
}

.v2-page footer {
  background: var(--grey);
}

.v2-pill {
  min-height: 48px;
  padding: 10px 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border: 0;
  border-radius: 50px;
  background: var(--green);
  color: #fff;
  font-size: 16px;
  line-height: normal;
  font-weight: 700;
  letter-spacing: .1em;
  cursor: pointer;
}

.v2-pill img {
  width: 20px;
  height: 23px;
  object-fit: contain;
  transform: rotate(90deg);
  transition: transform .3s var(--ease), translate .3s var(--ease);
}

.hotspot-load-more[aria-expanded="true"] img {
  transform: rotate(-90deg);
}

.v2-pill:hover img,
.v2-pill:focus-visible img {
  translate: 0 var(--button-arrow-travel);
}

.hotspot-load-more[aria-expanded="true"]:hover img,
.hotspot-load-more[aria-expanded="true"]:focus-visible img {
  translate: 0 calc(-1 * var(--button-arrow-travel));
}

/* News */
.news-overview {
  width: min(calc(100% - 178px), 1550px);
  height: 2081px;
  margin-inline: auto;
  padding-top: 237px;
}

.news-overview > h1 {
  font-size: 60px;
  line-height: 1.2;
  font-weight: 700;
  text-align: left;
}

.news-overview > h1 span { display: inline; }

.news-feature-card {
  margin-top: 120px;
  display: grid;
  grid-template-columns: 358px minmax(0, 1072px);
  gap: 116px;
  align-items: start;
}

.news-feature-copy {
  padding-top: 164px;
}

.news-tag {
  width: max-content;
  padding: 5.5px 9px;
  display: block;
  border-radius: 24px;
  background: var(--green);
  color: #fff;
  font-size: 11.5px;
  line-height: normal;
  font-weight: 700;
  text-transform: uppercase;
}

.news-feature-copy h2,
.news-overview-card h2 {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
}

.news-feature-copy h2 {
  margin-top: 14px;
}

.news-feature-copy p {
  margin-top: 8px;
  font-size: 20px;
  line-height: 1.2;
}

.news-text-link {
  width: max-content;
  margin-top: 18px;
  display: block;
  font-size: 18px;
  line-height: normal;
  font-weight: 700;
}

.news-text-link::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 3px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}

.news-text-link:hover::after,
.news-text-link:focus-visible::after {
  transform: scaleX(1);
}

.news-feature-image {
  width: 100%;
  height: 629px;
  border-radius: 35px;
}

.news-feature-media { display: block; }

.news-filters {
  margin-top: 46px;
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.news-filters button {
  height: 48px;
  padding: 0 21px;
  border: 0;
  border-radius: 46px;
  background: var(--green);
  color: #fff;
  font-size: 16px;
  line-height: normal;
  font-weight: 700;
  letter-spacing: .1em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.news-filters button.is-active,
.news-filters button:hover {
  background: var(--sage);
  color: var(--green);
}

.news-card-grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 38px;
}

.news-overview-card {
  min-width: 0;
}

.news-overview-card[hidden] {
  display: none;
}

.news-overview.has-more-open {
  height: auto;
  padding-bottom: 174px;
}

.news-card-media {
  position: relative;
  height: 335px;
}

.news-card-media > img {
  border-radius: 35px;
}

.news-card-media .news-tag {
  position: absolute;
  top: 26px;
  left: 27px;
}

.news-overview-card h2 {
  margin-top: 23px;
}

.news-overview-card p {
  min-height: 88px;
  margin-top: 9px;
  font-size: 18px;
  line-height: 1.22;
}

.news-overview-card .news-text-link {
  margin-top: 10px;
}

.news-load-more {
  margin: 80px auto 0;
  display: flex;
}

.news-load-more[hidden] {
  display: none;
}

/* Neighborhood */
.neighborhood-page {
  background: var(--grey);
}

.neighborhood-main {
  background: #fff;
}

.neighborhood-hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  color: #fff;
}

.neighborhood-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: var(--hero-top-shade);
  pointer-events: none;
}

.neighborhood-hero > img {
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

.neighborhood-hero-image {
  --hero-parallax-y: 0px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  translate: 0 var(--hero-parallax-y);
  transform: scale(1.02);
  transform-origin: center;
  animation: heroSettle 1.8s var(--ease) both;
  will-change: translate;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .neighborhood-hero-image { translate: none; transform: none; animation: none; }
}

.neighborhood-hero-copy {
  position: absolute;
  z-index: 2;
  right: var(--side);
  bottom: 95px;
  left: var(--side);
}

.neighborhood-hero-copy > span {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 48px;
  background: var(--green);
  font-size: 23px;
  line-height: 28px;
  font-weight: 700;
}

.neighborhood-hero-copy h1 {
  margin-top: 38px;
  font-size: clamp(72px, 5.96vw, 103px);
  line-height: 1.2;
  font-weight: 700;
}

.neighborhood-content {
  position: relative;
  z-index: 2;
  margin-top: -52px;
  padding-top: 120px;
  border-radius: 50px 50px 0 0;
  background: #fff;
}

.hotspots-section,
.services-section,
.neighborhood-gallery {
  width: min(calc(100% - 180px), 1548px);
  margin-inline: auto;
}

.v2-section-label {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: var(--font);
  font-size: 23px;
  line-height: 28px;
  font-weight: 700;
  text-transform: uppercase;
}

.v2-section-label::before {
  content: "";
  width: 30px;
  height: 20px;
  flex: 0 0 auto;
  background: url("../images/section-symbol-green.webp") center / contain no-repeat;
}

.v2-section-label b {
  height: 1px;
  flex: 1 1 auto;
  background: currentColor;
}

.hotspots-section > h2,
.services-section > h2 {
  font-size: 60px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
}

.hotspots-section > h2 span,
.services-section > h2 span { display: inline; }

.hotspots-section > h2 {
  margin-top: 160px;
}

.hotspots-intro,
.services-intro {
  max-width: 1310px;
  margin-inline: auto;
  font-family: var(--font);
  font-size: 28px;
  line-height: 36px;
  font-weight: 300;
  text-align: left;
}

.hotspots-intro {
  margin-top: 60px;
}

.neighborhood-map-frame {
  width: 100%;
  height: 845px;
  margin-top: 160px;
  border-radius: 35px;
  overflow: hidden;
}

.neighborhood-map {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hotspot-list {
  margin-top: 100px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 90px;
  row-gap: 23px;
}

.hotspot-item {
  min-height: 190px;
  padding: 0 0 22px;
  border: 0;
  border-bottom: 1px solid var(--green);
  overflow: visible;
}

.hotspot-item summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  list-style: none;
  pointer-events: none;
}

.hotspot-number {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  overflow: visible;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-family: var(--font);
  font-style: normal;
  font-size: 23px;
  line-height: 1;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
}

.hotspot-number::before,
.hotspot-number::after {
  content: none;
  display: none;
}

.hotspot-item summary strong {
  margin-left: 38px;
  font-size: 23px;
  line-height: 30px;
  font-weight: 700;
}

.hotspot-item summary em {
  margin-left: 38px;
  padding: 5.5px 9px;
  border-radius: 24px;
  background: var(--green);
  color: #fff;
  font-size: 11.5px;
  line-height: normal;
  font-style: normal;
  font-weight: 700;
}

.hotspot-item[data-hotspot-category="culture"] summary em {
  background: var(--hotspot-culture, #b4ceeb);
  color: var(--green);
}

.hotspot-item[data-hotspot-category="gastronomy"] summary em {
  background: var(--hotspot-gastronomy, #eddd9f);
  color: var(--green);
}

.hotspot-item[data-hotspot-category="park"] summary em,
.hotspot-item[data-hotspot-category="parks"] summary em {
  background: var(--hotspot-parks, #97c392);
  color: var(--green);
}

.hotspot-item summary i {
  display: none;
}

/* Keep names and category tags inside the restored tablet content column. */
@media (min-width: 721px) and (max-width: 1200px) {
  .hotspot-list { column-gap: 40px; }
  .hotspot-item summary {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px 18px;
  }
  .hotspot-item summary strong {
    min-width: 0;
    margin-left: 0;
    overflow-wrap: break-word;
  }
  .hotspot-item summary em {
    grid-column: 2;
    justify-self: start;
    max-width: 100%;
    margin-left: 0;
  }
}

@media (min-width: 721px) and (max-width: 980px) {
  .hotspot-list { grid-template-columns: minmax(0, 1fr); }
}

.hotspot-item p {
  padding-top: 23px;
  font-size: 18px;
  line-height: 1.33;
}

.hotspot-load-more {
  margin: 100px auto 0;
  display: flex;
}

.hotspot-item.hotspot-more {
  display: none;
}

.hotspot-list.show-more .hotspot-more {
  display: block;
  animation: hotspot-item-reveal .42s var(--ease) both;
}

@keyframes hotspot-item-reveal {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.neighborhood-gallery {
  margin-top: 100px;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  align-items: start;
  row-gap: clamp(56px, 4vw, 68px);
  column-gap: clamp(70px, 6.94vw, 120px);
}

.neighborhood-gallery figure {
  min-width: 0;
}

.neighborhood-gallery-media {
  width: 100%;
  aspect-ratio: 713 / 475;
  border-radius: 35px;
  overflow: hidden;
}

.neighborhood-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.neighborhood-gallery figcaption {
  margin-top: 20px;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.2;
}

.services-section {
  margin-top: 200px;
  padding-bottom: 200px;
}

.services-section > h2 {
  margin-top: 160px;
}

.services-intro {
  margin-top: 60px;
  font-size: 23px;
}

.service-slider {
  margin-top: 160px;
  overflow: visible;
}

.service-track {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  align-items: start;
  row-gap: clamp(42px, 3.5vw, 60px);
  column-gap: clamp(70px, 7.18vw, 124px);
}

.service-card img {
  height: auto;
  aspect-ratio: 713 / 475;
  border-radius: 35px;
}

.service-card h3 {
  margin-top: 14px;
  font-size: 23px;
  line-height: 30px;
}

.service-card p {
  margin-top: 6px;
  font-size: 18px;
  line-height: 1.22;
}

.service-controls {
  display: none;
}

@media (max-width: 980px) {
  .v2-page .v2-header { top: 67px; }
  .news-page .menu-toggle img { filter: brightness(0) saturate(100%) invert(22%) sepia(24%) saturate(1324%) hue-rotate(118deg) brightness(88%) contrast(99%); }
}

@media (max-width: 720px) {
  .v2-page .v2-header { top: 67px; }
  .neighborhood-hero .neighborhood-hero-image { position: absolute; top: 0; width: 100%; height: var(--site-hero-media-height); translate: none; transform: none; object-fit: cover; object-position: center center; animation: none; will-change: auto; }
  .v2-page footer { height: 842px; min-height: 842px; overflow: hidden; }
  .v2-pill { min-height: 38px; padding: 8px 17px; gap: 10px; font-size: 12.667px; }
  .v2-pill img { width: 16px; height: 18px; }

  /* News mobile */
  .news-overview {
    width: calc(100% - 30px);
    height: auto;
    padding-top: 176px;
    padding-bottom: 80px;
  }
  .news-overview > h1 {
    width: 100%;
    font-size: 31px;
    line-height: 36px;
    text-align: center;
  }
  .news-overview > h1 span {
    display: block;
    white-space: nowrap;
  }
  .news-feature-card {
    margin-top: 38px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .news-feature-image {
    order: -1;
    height: auto;
    aspect-ratio: 1;
    border-radius: 23px;
  }
  .news-feature-copy { padding-top: 23px; margin-bottom: 38px; }
  .news-tag { padding: 5.5px 9px; font-size: 11.5px; }
  .news-feature-copy h2,
  .news-overview-card h2 { font-size: 20px; line-height: 1.25; }
  .news-feature-copy h2 { margin-top: 14px; }
  .news-feature-copy p { margin-top: 9px; font-size: 18px; line-height: 1.25; }
  .news-text-link { margin-top: 10px; font-size: 16px; }
  .news-filters { margin-top: 98px; gap: 7px; }
  .news-filters button { height: 38px; padding: 0 16.75px; font-size: 12.667px; letter-spacing: .1em; }
  .news-card-grid {
    margin-top: 45px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .news-overview-card,
  .news-overview-card + .news-overview-card {
    height: auto;
    margin: 0;
  }
  .news-card-media { height: auto; aspect-ratio: 372 / 254; }
  .news-card-media > img { border-radius: 23px; }
  .news-card-media .news-tag { top: 18px; left: 19px; }
  .news-overview-card h2 { margin-top: 18px; }
  .news-overview-card p { min-height: 0; margin-top: 9px; font-size: 16px; line-height: 1.25; }
  .news-overview-card .news-text-link { margin-top: 10px; }
  .news-load-more { margin-top: 39px; }
  .news-overview.has-more-open { padding-bottom: 80px; }
  .news-page footer { margin-top: 0; }

  /* Neighborhood mobile */
  .neighborhood-hero {
    isolation: isolate;
  }
  .neighborhood-hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    height: 72px;
    background: var(--green);
    pointer-events: none;
  }
  .neighborhood-content {
    margin-top: -31px;
    padding-top: 62px;
    border-radius: 31px 31px 0 0;
    box-shadow: none;
  }
  .hotspots-section,
  .services-section,
  .neighborhood-gallery { width: calc(100% - 30px); }
  .hotspots-section > .v2-section-label { display: none; }
  .hotspots-section > h2,
  .services-section > h2 {
    font-size: 31px;
    line-height: 1.2;
    text-align: center;
  }
  .hotspots-section > h2 { margin-top: 0; }
  .hotspots-section > h2 span,
  .services-section > h2 span { display: block; }
  .hotspots-intro,
  .services-intro {
    max-width: none;
    font-size: 18px;
    line-height: 1.28;
    text-align: left;
  }
  .hotspots-intro { min-height: 184px; margin-top: 38px; }
  .neighborhood-map-frame {
    margin-top: 60px;
    height: 371px;
    border-radius: 23px;
  }
  .neighborhood-map {
    aspect-ratio: auto;
    height: 371px;
    object-fit: cover;
  }
  .hotspot-list {
    margin-top: 60px;
    display: block;
  }
  .hotspot-item {
    min-height: 45px;
    margin-top: 14px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 23px;
    background: #b4ceeb;
    color: var(--green);
    transition: border-radius .35s var(--ease), min-height .45s var(--ease);
  }
  .hotspot-item[data-hotspot-category="culture"] { background: var(--hotspot-culture, #b4ceeb); }
  .hotspot-item[data-hotspot-category="gastronomy"] { background: var(--hotspot-gastronomy, #eddd9f); }
  .hotspot-item[data-hotspot-category="park"],
  .hotspot-item[data-hotspot-category="parks"] { background: var(--hotspot-parks, #97c392); }
  .hotspot-item:first-child { margin-top: 0; }
  .hotspot-item summary {
    min-height: 45px;
    height: auto;
    padding: 3.5px 18px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 20px;
    grid-template-rows: minmax(38px, auto) 0;
    align-items: center;
    pointer-events: auto;
    cursor: pointer;
    transition: min-height .4s var(--ease);
  }
  .hotspot-number {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    grid-column: 1;
    grid-row: 1;
    justify-items: start;
    background: transparent;
    color: var(--green);
    font-family: var(--font);
    font-size: 18px;
    font-weight: 300;
  }
  .hotspot-item summary strong {
    min-width: 0;
    margin-left: 0;
    padding-left: 0;
    grid-column: 2;
    grid-row: 1;
    flex: 1 1 auto;
    font-size: 20px;
    line-height: 25px;
    overflow-wrap: anywhere;
  }
  .hotspot-item summary em {
    max-height: 0;
    margin: 0;
    padding: 0;
    grid-column: 2;
    grid-row: 2;
    display: block;
    overflow: hidden;
    background: transparent;
    color: var(--green);
    font-size: 11.5px;
    line-height: 16px;
    opacity: 0;
    transition: max-height .26s ease, opacity .18s ease;
  }
  .hotspot-item.is-expanded summary {
    min-height: 68px;
    grid-template-rows: minmax(38px, auto) 23px;
  }
  .hotspot-item.is-expanded summary em {
    max-height: 18px;
    opacity: 1;
  }
  .hotspot-item summary .toggle-icon {
    --toggle-icon-size: 20px;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    display: block;
  }
  .hotspot-item[open]:not(.is-expanded) > summary .toggle-icon::after {
    transform: rotate(90deg);
  }
  .hotspot-item.is-expanded > summary .toggle-icon::after {
    transform: rotate(0deg);
  }
  .hotspot-content {
    display: grid !important;
    grid-template-rows: 0fr;
    overflow: hidden;
    opacity: 0;
    transition: grid-template-rows .3s ease, opacity .18s ease;
  }
  .hotspot-content-inner {
    min-height: 0;
    overflow: hidden;
  }
  .hotspot-content p {
    padding: 7px 30px 25px;
    font-size: 16px;
    line-height: 1.25;
  }
  .hotspot-item.is-expanded .hotspot-content {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .hotspot-item.is-expanded {
    min-height: 0;
    border-radius: 23px;
  }
  .hotspot-load-more { margin-top: 60px; }
  .neighborhood-gallery {
    margin-top: 100px;
    min-height: 0;
    display: block;
  }
  .neighborhood-gallery figure { height: 313px; }
  .neighborhood-gallery figure + figure { margin-top: 60px; }
  .neighborhood-gallery-media {
    height: 248px;
    aspect-ratio: auto;
    border-radius: 23px;
  }
  .neighborhood-gallery figcaption {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.06;
  }
  .services-section {
    margin-top: 100px;
    padding-bottom: 98px;
  }
  .v2-section-label {
    gap: 7px;
    font-size: 16px;
    line-height: 19px;
  }
  .v2-section-label::before { width: 21px; height: 14px; }
  .services-section > h2 { margin-top: 60px; }
  .services-intro { margin-top: 38px; }
  .services-intro { min-height: 161px; }
  .service-slider {
    margin-top: 60px;
    overflow: hidden;
  }
  .service-track {
    min-height: 0;
    display: flex;
    gap: 0;
    transition: transform .45s var(--ease);
  }
  .service-card {
    width: 100%;
    height: auto;
    min-height: 344px;
    min-width: 100%;
    flex: 0 0 100%;
    overflow: visible;
  }
  .service-card img {
    height: 248px;
    aspect-ratio: auto;
    border-radius: 23px;
  }
  .service-card h3 {
    margin-top: 14px;
    font-size: 20px;
    line-height: 25px;
  }
  .service-card p {
    margin-top: 6px;
    font-size: 16px;
    line-height: 1.06;
  }
  .service-controls {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 8px;
  }
  .service-controls button {
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--green);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .service-controls button img { display: none; }
  .service-controls button::before {
    content: "";
    position: absolute;
    inset: 10px 8px;
    background: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
    transition: transform .18s var(--ease);
  }
  .service-controls [data-service-prev]::before {
    -webkit-mask-image: url("../images/arrow-next.svg");
    mask-image: url("../images/arrow-next.svg");
    transform: scaleX(-1);
  }
  .service-controls [data-service-next]::before {
    -webkit-mask-image: url("../images/arrow-prev.svg");
    mask-image: url("../images/arrow-prev.svg");
  }
  .service-controls button:active::before { transform: scale(.88); }
  .service-controls [data-service-prev]:active::before { transform: scaleX(-1) scale(.88); }
  .service-controls button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 50%;
  }
  .service-progress {
    position: relative;
    height: 2px;
    background: rgba(3, 70, 56, .35);
  }
  .service-progress i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 25%;
    background: var(--green);
    transform: translateX(0);
    transition: transform .4s var(--ease);
  }
}

@media (min-width: 721px) {
  .neighborhood-page footer { height: 558px; min-height: 558px; }
}

@media (prefers-reduced-motion: reduce) {
  .hotspot-item,
  .hotspot-item summary,
  .hotspot-item summary em,
  .hotspot-content {
    transition: none;
  }
  .hotspot-list.show-more .hotspot-more {
    animation: none;
  }
}