/* HERO
   ----------------------------- */

section.hero {
   position: relative;
   display: flex;
   min-height: max(36rem, 100vh);
   min-height: max(36rem, var(--hero-h, 100svh));
   color: var(--beige);
   background-color: var(--dark-grey);
   isolation: isolate;
}

section.hero .slides {
   position: absolute;
   inset: 0;
   z-index: -1;
}

section.hero::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background-color: var(--overlay-bg);
   pointer-events: none;
}

section.hero .c-wrap {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 3rem;
   padding-top: calc(var(--header-h) + var(--row-padding-s));
   padding-bottom: 1.75rem;
}

section.hero .content-wrap {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: clamp(0.75rem, calc(0.0039rem + 1.5564vw), 1rem) 4rem;
   margin-block: auto;
   padding-bottom: clamp(1.875rem, calc(0.8333rem + 2.6042vw), 5rem);
}

section.hero h1 {
   max-width: 11em;
   padding-bottom: var(--title-balance);
}

section.hero .info {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 1.5rem;
   width: 23.5rem;
   flex-shrink: 0;
}

section.hero .bottom-wrap {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 1.5rem;
}

@media (max-width: 1024px) {
   section.hero .content-wrap {
      flex-direction: column;
      align-items: center;
      text-align: center;
   }

   section.hero .info {
      align-items: center;
      width: auto;
      max-width: 26rem;
   }
}

@media (max-width: 500px) {
   section.hero .content-wrap {
      align-items: flex-start;
      text-align: left;
   }

   section.hero .info {
      align-items: flex-start;
   }

   section.hero .bottom-wrap {
      flex-direction: column;
      align-items: flex-start;
   }
}


/* PAGE HERO
   ----------------------------- */

section.page-hero {
   --hero-gap: 3rem;
   --icon-size: clamp(4.5rem, calc(3.2367rem + 4.0426vw), 6.875rem);
   position: relative;
   display: flex;
   flex-direction: column;
   min-height: max(32rem, 80vh);
   min-height: max(32rem, calc(var(--hero-h, 100svh) * 0.8));
   padding: calc(var(--header-h) - var(--header-trim, 0px) + var(--hero-top-gap, var(--row-padding-xs))) 0 clamp(2rem, calc(1.9003rem + 0.3191vw), 2.1875rem);
   overflow: hidden;
   background-color: var(--beige);
}

section.page-hero:not(.has-icons) {
   --header-trim: var(--header-padding);
   --hero-top-gap: var(--hero-gap);
}

section.page-hero.page-hero-blue {
   background-color: var(--blue);
}

section.page-hero.page-hero-sand {
   background-color: var(--sand);
}

section.page-hero.has-icons {
   min-height: max(36rem, 100vh);
   min-height: max(36rem, var(--hero-h, 100svh));
   padding-bottom: calc(var(--icon-size) * 2 + 6rem);
}

section.page-hero .c-wrap {
   flex: 1 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--hero-gap);
}

section.page-hero .content-wrap {
   margin-block: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 2.1875rem;
   width: 100%;
}

section.page-hero.has-icons .content-wrap {
   gap: 1.5rem;
}

section.page-hero .title-wrap {
   position: relative;
   display: flex;
   justify-content: center;
   width: 100%;
}

section.page-hero .title-wrap:has(.media) {
   margin-top: calc(var(--impact-size) * -0.195);
}

section.page-hero .tag {
   position: absolute;
   top: 50%;
   translate: 0 -50%;
}

section.page-hero .tag:first-child {
   left: 0;
}

section.page-hero .tag:last-child {
   right: 0;
}

section.page-hero .tag .suffix {
   display: none;
}

section.page-hero h1 {
   max-width: 9em;
   padding-bottom: var(--title-balance);
   text-align: center;
}

section.page-hero h1:has(.media) {
   line-height: 1.2;
}

section.page-hero h1 .media {
   --media-w: 2.24em;
   display: inline-block;
   width: var(--media-w);
   height: 1em;
   margin: 0;
   overflow: hidden;
   vertical-align: -0.2em;
   border-radius: var(--radius);
}

section.page-hero h1 .media .image {
   display: block;
   width: var(--media-w);
   max-width: none;
   height: 100%;
   margin-left: 50%;
   object-fit: cover;
   translate: -50% 0;
}

section.page-hero .text {
   max-width: 17em;
   text-align: center;
}

section.page-hero .icons {
   position: absolute;
   left: 50%;
   bottom: 0;
   display: flex;
   translate: -50% 0;
}

section.page-hero .icons .icon {
   display: block;
   flex-shrink: 0;
   width: var(--icon-size);
   margin: 0 -0.25rem;
}

section.page-hero .icons .icon-raised {
   position: absolute;
   left: 50%;
   bottom: calc(100% - 0.125rem);
   translate: calc(-50% - var(--icon-size) / 2) 0;
}

section.page-hero .icons .icon:nth-child(1) .image { rotate: -23deg; }
section.page-hero .icons .icon:nth-child(2) .image { rotate: -20deg; }
section.page-hero .icons .icon:nth-child(3) .image { rotate: -24deg; }
section.page-hero .icons .icon:nth-child(5) .image { rotate: 19deg; }
section.page-hero .icons .icon:nth-child(6) .image { rotate: -20deg; }
section.page-hero .icons .icon:nth-child(7) .image { rotate: -14deg; }
section.page-hero .icons .icon:nth-child(8) .image { rotate: -15deg; }
section.page-hero .icons .icon:nth-child(9) .image { rotate: 17deg; }
section.page-hero .icons .icon:nth-child(10) .image { rotate: 16deg; }
section.page-hero .icons .icon:nth-child(11) .image { rotate: -15deg; }
section.page-hero .icons .icon:nth-child(12) .image { rotate: 53deg; }
section.page-hero .icons .icon:nth-child(13) .image { rotate: 25deg; }
section.page-hero .icons .icon:nth-child(14) .image { rotate: 23deg; }
section.page-hero .icons .icon:nth-child(15) .image { rotate: -18deg; }
section.page-hero .icons .icon:nth-child(16) .image { rotate: 12deg; }

html[data-reveal-pending] section.page-hero .icons .icon,
section.page-hero.is-physics-pending .icons .icon {
   visibility: hidden;
}

section.page-hero.is-physics .icons {
   inset: 0;
   display: block;
   translate: none;
   overflow: hidden;
}

section.page-hero.is-physics .icons .icon {
   display: none;
}

section.page-hero .icons canvas {
   display: block;
   position: relative;
   top: -1px;
   left: -1px;
   width: calc(100% + 2px);
   height: calc(100% + 2px);
   max-width: none;
}

@media (max-width: 1024px) {
   section.page-hero .tag {
      position: static;
      translate: none;
   }

   section.page-hero:not(.has-icons) {
      --header-trim: calc(var(--bar-padding) / 2);
   }

   section.page-hero .title-wrap,
   section.page-hero .title-wrap:has(.media) {
      margin-top: 0;
      flex-direction: column;
      align-items: center;
      gap: clamp(0.875rem, calc(0.5172rem + 1.145vw), 1.25rem);
   }

   section.page-hero .tag:last-child {
      display: none;
   }

   section.page-hero .tag .suffix {
      display: inline;
   }
}


/* PAGE INTRO
   ----------------------------- */

section.page-intro {
   padding-top: calc(var(--header-h) + var(--row-padding-m));
}

section.page-intro .c-wrap {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 1.25rem;
}

section.page-intro h1 {
   max-width: 12em;
}


/* PAGE CONTENT
   ----------------------------- */

section.page-content {
   padding: var(--row-padding-s) 0 var(--row-padding-l);
}

section.page-content .content {
   font-size: var(--paragraph-size);
   line-height: 1.333;
}

section.page-content .content > * {
   margin: 0;
}

section.page-content .content > * + * {
   margin-top: 0.75rem;
}

section.page-content .content > * + :is(h2, h3, h4, h5, h6) {
   margin-top: 2.5rem;
}

section.page-content .content > :is(h2, h3, h4, h5, h6) + * {
   margin-top: 1.25rem;
}

section.page-content .content > h2 + :is(h3, h4, h5, h6) {
   margin-top: 1.5rem;
}

section.page-content .content h2 {
   font-size: var(--h3-size);
}

section.page-content .content :is(h3, h4, h5, h6) {
   font-size: var(--h5-size);
   line-height: 1.273;
}

section.page-content .content .title {
   font-weight: 500;
}

section.page-content .content :is(ul, ol) {
   padding-left: 1.25rem;
}

section.page-content .content ul {
   list-style: disc;
}

section.page-content .content ol {
   list-style: decimal;
}

section.page-content .content li + li {
   margin-top: 0.375rem;
}

section.page-content .content a {
   text-decoration: underline;
   text-underline-offset: 0.2em;
}

@media (hover: hover) and (pointer: fine) {
   section.page-content .content a:hover {
      text-decoration: none;
   }
}


/* PAGE FALLBACK
   ----------------------------- */

section.page-fallback {
   padding: calc(var(--header-h) + var(--row-padding-m)) 0 var(--row-padding-l);
}

section.page-fallback .c-wrap {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}


/* CAROUSEL
   ----------------------------- */

section.carousel {
   display: flex;
   flex-direction: column;
   gap: var(--content-gap-l);
   padding: var(--row-padding-l) 0 calc(var(--row-padding-l) + 0.625rem);
}

section.carousel .slider-wrap {
   display: flex;
   flex-direction: column;
   gap: var(--row-padding-xs);
}

section.carousel .top-wrap {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 1.5rem 4rem;
}

section.carousel h2 {
   max-width: 11em;
}

section.carousel .top-wrap p {
   max-width: 24em;
}

section.carousel .slider {
   --slide-w: 18rem;
   --slide-gap: 1rem;
}

section.carousel .track {
   display: flex;
   margin: 0;
   padding: 0 0 0 calc(50% - var(--slide-w) / 2 - var(--slide-gap) / 2);
   list-style: none;
   overflow-x: auto;
   -webkit-user-select: none;
   user-select: none;
}

section.carousel .slider.is-ready .track {
   overflow: hidden;
   touch-action: pan-y;
   cursor: grab;
}

section.carousel .slider.is-ready .track:active {
   cursor: grabbing;
}

section.carousel .item {
   flex: none;
   padding-inline: calc(var(--slide-gap) / 2);
}

section.carousel .item .inner {
   display: flex;
   flex-direction: column;
   width: var(--slide-w);
   height: 100%;
   padding: 0.625rem 0.625rem 0;
   background-color: var(--surface);
   border-radius: var(--radius-card);
}

section.carousel .media {
   flex: none;
   aspect-ratio: 67 / 69;
   margin: 0;
   overflow: hidden;
   border-radius: var(--radius);
}

section.carousel .media .image {
   height: 100%;
   object-fit: cover;
   pointer-events: none;
}

section.carousel .item .subtitle {
   flex: 1 0 auto;
   display: grid;
   place-items: center;
   padding: clamp(0.9375rem, calc(0.6462rem + 0.3774vw), 1.25rem) 0.75rem;
   text-align: center;
}

section.carousel .controls {
   display: flex;
   justify-content: center;
   gap: 0.75rem;
}

@media (max-width: 1024px) {
   section.carousel .top-wrap {
      flex-direction: column;
      align-items: center;
      text-align: center;
   }

   section.carousel .slider {
      --slide-w: 16rem;
   }
}


/* LOCATION
   ----------------------------- */

section.location {
   padding: var(--row-padding-l) 0;
   background-color: var(--blue);
}

section.location .c-wrap {
   display: grid;
   grid-template-columns: minmax(0, 670fr) minmax(0, 440fr);
   align-items: start;
   column-gap: clamp(5.625rem, calc(-20.0675rem + 40.1442vw), 16.0625rem);
}

section.location .content-main {
   display: flex;
   flex-direction: column;
   gap: var(--row-padding-l);
}

section.location h2 {
   max-width: 12em;
}

section.location .content-aside {
   display: flex;
   flex-direction: column;
   gap: 2.875rem;
}

section.location .media {
   margin: 0;
   overflow: hidden;
   border-radius: var(--radius);
}

section.location .content-main .media {
   aspect-ratio: 676 / 672;
}

section.location .content-aside .media {
   aspect-ratio: 443 / 583;
}

section.location .media .image {
   height: 100%;
   object-fit: cover;
}

section.location .info {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: clamp(1.5rem, calc(1.234rem + 0.8511vw), 2rem);
   max-width: 19em;
}

@media (max-width: 1024px) {
   section.location .c-wrap {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      column-gap: clamp(4.375rem, calc(0.625rem + 7.8125vw), 5.625rem);
   }
}

@media (max-width: 767px) {
   section.location .c-wrap {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-areas:
         "title title"
         "main aside"
         "info info";
      gap: 2.5rem 0.75rem;
   }

   section.location :is(.content-main, .content-aside) {
      display: contents;
   }

   section.location h2 {
      grid-area: title;
   }

   section.location .content-main .media {
      grid-area: main;
   }

   section.location .content-aside .media {
      grid-area: aside;
   }

   section.location :is(.content-main, .content-aside) .media {
      aspect-ratio: 4 / 5;
   }

   section.location .c-wrap:not(:has(.content-aside .media)) .content-main .media,
   section.location .c-wrap:not(:has(.content-main .media)) .content-aside .media {
      grid-column: 1 / -1;
      aspect-ratio: 16 / 9;
   }

   section.location .info {
      grid-area: info;
   }
}

@media (scripting: none) {
   section.carousel .controls,
   section.carousel .item[aria-hidden="true"] {
      display: none;
   }
}


/* PLANS TEASER
   ----------------------------- */

section.plans-teaser {
   padding: var(--row-padding-l) 0;
}

section.plans-teaser .c-wrap {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--content-gap-l);
}

section.plans-teaser .c-wrap > .top-wrap {
   --top-wrap-gap: clamp(1.125rem, calc(0.992rem + 0.4255vw), 1.375rem);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--top-wrap-gap);
   text-align: center;
}

section.plans-teaser .title-wrap {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1.5rem;
}

section.plans-teaser .c-wrap > .top-wrap h2 {
   max-width: 11em;
}

section.plans-teaser .c-wrap > .top-wrap .text {
   max-width: 26em;
   margin: 0;
}

section.plans-teaser .cards {
   position: relative;
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 1.5rem;
   width: 100%;
   margin: 0;
   padding: 0;
   list-style: none;
}

section.plans-teaser .card {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 1.5rem;
   aspect-ratio: 4 / 5;
   padding: 1.5rem;
   color: var(--dark-grey);
   border-radius: var(--radius-big);
}

section.plans-teaser .card-dark {
   color: var(--beige);
   background-color: var(--dark-grey);
}

section.plans-teaser .card-olive {
   color: var(--beige);
   background-color: var(--olive);
}

section.plans-teaser .card-sand {
   background-color: var(--sand);
}

section.plans-teaser .card-blue {
   background-color: var(--blue);
}

section.plans-teaser .card .top-wrap {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 1rem;
}

section.plans-teaser .card h3 {
   --trim-top: var(--trim-title-top);
   --trim-bottom: var(--trim-title-bottom);
   font-size: var(--h3-size);
}

section.plans-teaser .card .subtitle {
   --trim-top: var(--trim-mono-top);
   --trim-bottom: var(--trim-mono-bottom);
}

section.plans-teaser .card :is(h3, .subtitle) {
   display: flow-root;
}

section.plans-teaser .card :is(h3, .subtitle)::before,
section.plans-teaser .card :is(h3, .subtitle)::after {
   content: "";
   display: table;
}

section.plans-teaser .card :is(h3, .subtitle)::before {
   margin-bottom: calc(-0.5lh + var(--trim-top));
}

section.plans-teaser .card :is(h3, .subtitle)::after {
   margin-top: calc(-0.5lh + var(--trim-bottom));
}

section.plans-teaser .card .plan svg {
   display: block;
   width: 100%;
   height: auto;
}

@media (max-width: 1024px) {
   section.plans-teaser .cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-width: 42rem;
   }
}

@media (max-width: 767px) {
   section.plans-teaser .cards {
      gap: 1rem;
   }

   section.plans-teaser .card {
      padding: 1.125rem;
   }

   section.plans-teaser .card .top-wrap {
      flex-direction: column;
      gap: 0.875rem;
   }
}


/* CTA
   ----------------------------- */

section.cta {
   --badge-w: clamp(4.5rem, calc(2.5714rem + 4.0179vw), 6.1875rem);
   --media-gap: 1rem;
   padding-bottom: var(--row-padding-xs);
}

section.cta .c-wrap {
   padding: 0 max(0.5rem, calc(var(--container-padding) - 0.75rem));
}

section.cta .inner-wrap {
   display: flex;
   justify-content: space-between;
   gap: 3rem 2rem;
   min-height: 42.5rem;
   padding: 2rem;
   background-color: var(--sand);
   border-radius: var(--radius-big);
}

section.cta .content-wrap {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 3rem;
   padding: 0.625rem 0 1.25rem;
}

section.cta .top-wrap {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 2.25rem;
}

section.cta h2 {
   max-width: 11em;
}

section.cta .features {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   margin: 0;
   padding: 0;
   list-style: none;
}

section.cta .media-wrap {
   display: flex;
   flex-direction: column;
   gap: var(--media-gap);
   flex-shrink: 0;
   width: 31.875rem;
}

section.cta .media {
   position: relative;
   flex: 1 0 auto;
   width: 100%;
   min-width: 0;
   min-height: 16.25rem;
   margin: 0;
   aspect-ratio: 17 / 10;
}

section.cta .media:first-child {
   z-index: 1;
}

section.cta .media .image {
   height: 100%;
   object-fit: cover;
   border-radius: var(--radius);
}

section.cta .badge {
   position: absolute;
   top: calc(100% + var(--media-gap) + var(--badge-w) * 0.414);
   left: calc(var(--badge-w) * -0.596);
   z-index: 1;
   width: var(--badge-w);
}

section.cta .media:only-child .badge {
   top: calc(var(--badge-w) * 0.414);
}

section.cta .badge svg {
   display: block;
   width: 100%;
   height: auto;
}

section.cta .badge .letters {
   transform-box: view-box;
   transform-origin: 50% 50%;
   animation: badge-spin 18s linear infinite;
}

section.cta .badge.is-paused .letters {
   animation-play-state: paused;
}

@keyframes badge-spin {
   to {
      rotate: 360deg;
   }
}

@media (prefers-reduced-motion: reduce) {
   section.cta .badge .letters {
      animation: none;
   }
}

@media (max-width: 1024px) {
   section.cta .inner-wrap {
      min-height: 0;
   }

   section.cta .media-wrap {
      width: 44%;
   }
}

@media (max-width: 767px) {
   section.cta .inner-wrap {
      flex-direction: column;
      gap: 1.5rem;
      padding: 1.25rem;
   }

   section.cta .media-wrap {
      width: 100%;
   }

   section.cta .content-wrap {
      gap: 4rem;
      padding: 0.5rem 0 0;
   }

   section.cta .top-wrap {
      gap: 2rem;
   }

   section.cta .badge,
   section.cta .media:only-child .badge {
      top: calc(var(--badge-w) * -0.53);
      right: calc(var(--badge-w) * 0.45 - 0.25rem);
      left: auto;
   }
}


/* WIDE IMAGE
   ----------------------------- */

section.wide-image .media {
   position: relative;
   aspect-ratio: 16 / 8;
   min-height: 22rem;
   max-height: 56.25rem;
   width: 100%;
   margin: 0;
}

section.wide-image .media .image {
   width: 100%;
   height: 100%;
   object-fit: cover;
}


/* OVERVIEW
   ----------------------------- */

section.overview {
   padding: var(--row-padding-l) 0;
}

section.overview .c-wrap {
   display: flex;
   flex-direction: column;
   gap: clamp(4rem, calc(1.8059rem + 7.0213vw), 8.125rem);
}

section.overview .top-wrap {
   --top-wrap-gap: clamp(1.125rem, calc(1.0585rem + 0.2128vw), 1.25rem);
   display: grid;
   grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
   align-items: start;
   gap: var(--top-wrap-gap) 1rem;
}

section.overview .top-wrap p {
   max-width: 18em;
}

section.overview h2 {
   max-width: 13em;
}

section.overview .items {
   display: flex;
   align-items: stretch;
   gap: 1rem;
}

section.overview .item {
   flex: 1 1 0;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 1.125rem;
   margin: 0;
}

section.overview .item .media {
   width: 100%;
   min-width: 0;
   overflow: hidden;
   border-radius: var(--radius);
}

section.overview .item:has(figcaption) {
   padding-bottom: 2rem;
}

section.overview .item:not(:has(figcaption)) .media {
   flex-grow: 1;
}

section.overview .item-landscape .media {
   aspect-ratio: 4 / 3;
}

section.overview .item-portrait .media {
   aspect-ratio: 448 / 597;
}

section.overview .item-square .media {
   aspect-ratio: 1;
}

section.overview .item .media .image {
   height: 100%;
   object-fit: cover;
}

section.overview figcaption {
   max-width: 20em;
   padding-left: 0.25rem;
}

@media (max-width: 1024px) {
   section.overview .top-wrap {
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      text-align: center;
   }

   section.overview .top-wrap p {
      order: 2;
      max-width: 26em;
   }
}

@media (max-width: 767px) {
   section.overview .items {
      flex-direction: column;
      align-items: stretch;
      gap: 2rem;
   }

   section.overview .item {
      flex: none;
   }

   section.overview .item:has(figcaption) {
      padding-bottom: 0;
   }

   section.overview .item-portrait .media,
   section.overview .item-portrait:not(:has(figcaption)) {
      display: none;
   }

   section.overview .item .media {
      min-height: 16.25rem;
      aspect-ratio: 17 / 10;
   }
}


/* NEIGHBOURHOOD
   ----------------------------- */

section.neighbourhood {
   padding: var(--row-padding-l) 0;
   background-color: var(--blue);
}

section.neighbourhood .c-wrap {
   display: flex;
   flex-direction: column;
   gap: clamp(3.125rem, calc(2.4269rem + 2.234vw), 4.4375rem);
}

section.neighbourhood .top-wrap {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--top-wrap-gap);
   text-align: center;
}

section.neighbourhood .top-wrap h2 {
   max-width: 7em;
}

section.neighbourhood .content-wrap {
   --expanded-w: 25.25rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: clamp(1.5rem, calc(1.234rem + 0.8511vw), 2rem);
   width: 100%;
   max-width: 70.125rem;
   margin: 0 auto;
}

section.neighbourhood .items {
   flex: 0 0 var(--expanded-w);
   min-width: 0;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: clamp(1.125rem, calc(1.0585rem + 0.2128vw), 1.25rem);
   margin: 0;
   padding: 0;
   list-style: none;
}

section.neighbourhood .item {
   position: relative;
   max-width: 100%;
}

section.neighbourhood .item .bg {
   position: absolute;
   inset: 0;
   z-index: 0;
   background-color: var(--surface-strong);
   border-radius: var(--radius-big);
   transition: border-radius 0.5s var(--ease-in-out);
}

section.neighbourhood .item.is-active .bg {
   border-radius: 2rem;
}

section.neighbourhood .summary {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 1em 1.6em;
   color: inherit;
   font-family: var(--font-mono);
   font-variation-settings: var(--mono-medium);
   font-size: var(--btn-size);
   line-height: 1.067;
   text-align: left;
   text-transform: uppercase;
   white-space: nowrap;
   background: none;
   border: none;
   border-radius: var(--radius-big);
   cursor: pointer;
   opacity: 1;
   transition: opacity 0.4s var(--ease-fade-in-out) 0.3s;
}

section.neighbourhood .item.is-active .summary {
   opacity: 0;
   transition: opacity 0.05s var(--ease-fade-in-out);
}

section.neighbourhood .summary .icon {
   position: relative;
   flex-shrink: 0;
   width: 1.25rem;
   height: 1.25rem;
   background-color: var(--sand);
   border-radius: 50%;
}

section.neighbourhood .summary .icon::before,
section.neighbourhood .summary .icon::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   width: 50%;
   height: 1px;
   background-color: currentColor;
   translate: -50% -50%;
}

section.neighbourhood .summary .icon::after {
   rotate: 90deg;
}

section.neighbourhood .content {
   position: absolute;
   inset: 0;
   z-index: 2;
   pointer-events: none;
}

section.neighbourhood .mask {
   width: 100%;
   height: 100%;
   overflow: hidden;
}

section.neighbourhood .item .inner {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   width: max-content;
   max-width: var(--expanded-w);
   padding: 1.875rem 1.25rem 1.5rem;
   opacity: 0;
   transition: opacity 0.3s var(--ease-fade-in-out);
}

section.neighbourhood .item.is-active .inner {
   opacity: 1;
}

section.neighbourhood .item .inner p {
   max-width: 20em;
}

section.neighbourhood .item .inner p:not(.title) {
   opacity: var(--muted-opacity);
}

section.neighbourhood .content-wrap:not(.is-ready) .item .summary {
   display: none;
}

section.neighbourhood .content-wrap:not(.is-ready) .item .content {
   position: relative;
}

section.neighbourhood .content-wrap:not(.is-ready) .item .inner {
   opacity: 1;
}

section.neighbourhood .content-wrap:not(.is-ready) .close {
   display: none;
}

section.neighbourhood .item.is-active:has(.summary:focus-visible) {
   outline: 2px solid var(--dark-grey);
   outline-offset: 2px;
}

section.neighbourhood .media {
   flex: 0 1 37.375rem;
   align-self: flex-start;
   min-width: 0;
   position: relative;
   aspect-ratio: 598 / 716;
   overflow: hidden;
   border-radius: var(--radius-big);
}

section.neighbourhood .layer {
   position: absolute;
   inset: 0;
   margin: 0;
   opacity: 0;
   transition: opacity 0.35s var(--ease-fade-in-out);
}

section.neighbourhood .layer.is-active,
section.neighbourhood .layer-cover {
   opacity: 1;
}

section.neighbourhood .content-wrap.is-active .layer-cover {
   opacity: 0;
}

section.neighbourhood .layer .image {
   height: 100%;
   object-fit: cover;
}

section.neighbourhood .close {
   --btn-radius: var(--radius-pill);
   --btn-color: var(--white);
   --btn-bg-color: var(--overlay-soft);
   --btn-icon-size: clamp(2.25rem, calc(1.984rem + 0.8511vw), 2.75rem);
   --btn-square-icon-size: clamp(1.0625rem, calc(0.9628rem + 0.3191vw), 1.25rem);
   --close-offset: clamp(0.75rem, calc(0.6835rem + 0.2128vw), 0.875rem);
   position: absolute;
   top: round(var(--close-offset), 1px);
   right: round(var(--close-offset), 1px);
   z-index: 2;
   border-radius: var(--btn-radius);
   -webkit-backdrop-filter: blur(var(--glass-blur));
   backdrop-filter: blur(var(--glass-blur));
   opacity: 0;
   pointer-events: none;
   transform: scale(0) rotate(90deg);
   transition: transform 0.5s var(--ease-in-out), opacity 0.5s var(--ease-in-out), scale 0.15s var(--ease-btn-click);
}

section.neighbourhood .content-wrap.is-active .close {
   opacity: 1;
   pointer-events: auto;
   transform: none;
}

section.neighbourhood .content-wrap:not(.is-active) .close :is(.hover, .default) {
   transition: none;
}

@media (forced-colors: active) {
   section.neighbourhood .summary .icon::before,
   section.neighbourhood .summary .icon::after {
      forced-color-adjust: none;
      background-color: CanvasText;
   }
}

@media (prefers-reduced-motion: reduce) {
   section.neighbourhood :is(.item .bg, .summary, .item.is-active .summary, .item .inner, .layer, .close) {
      transition: none;
   }
}

@media (max-width: 1024px) {
   section.neighbourhood .content-wrap {
      --expanded-w: 100%;
   }

   section.neighbourhood :is(.items, .media) {
      flex: 1 1 0;
   }
}

@media (max-width: 767px) {
   section.neighbourhood .content-wrap {
      flex-direction: column;
      align-items: stretch;
   }

   section.neighbourhood :is(.items, .media) {
      flex: none;
   }

   section.neighbourhood .media {
      order: -1;
      align-self: stretch;
      aspect-ratio: 4 / 3;
   }

   section.neighbourhood .item {
      width: 100%;
   }

   section.neighbourhood .summary {
      justify-content: space-between;
      width: 100%;
   }

   section.neighbourhood .item .inner {
      width: 100%;
   }
}


/* INCLUSIONS
   ----------------------------- */

section.inclusions {
   padding: var(--row-padding-l) 0;
}

section.inclusions .c-wrap {
   display: flex;
   flex-direction: column;
   gap: var(--content-gap);
}

section.inclusions .top-wrap {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 1.5rem 2rem;
}

section.inclusions h2 {
   max-width: 7em;
}

section.inclusions .items {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0.75rem;
   margin: 0;
   padding: 0;
   list-style: none;
}

section.inclusions .item {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: clamp(2rem, calc(1.4681rem + 1.7021vw), 3rem);
   min-height: 18.5rem;
   padding: clamp(1.25rem, calc(1.117rem + 0.4255vw), 1.5rem);
   background-color: var(--surface);
   border-radius: var(--radius);
}

section.inclusions .icon {
   display: block;
   width: clamp(2.875rem, calc(2.3431rem + 1.7021vw), 3.875rem);
   aspect-ratio: 1;
}

section.inclusions .info {
   display: flex;
   flex-direction: column;
   gap: clamp(0.375rem, calc(0.242rem + 0.4255vw), 0.625rem);
}

section.inclusions .info p {
   max-width: 17em;
   opacity: var(--muted-opacity);
}

@media (max-width: 1024px) {
   section.inclusions .items {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   section.inclusions .item {
      min-height: 15rem;
   }
}

@media (max-width: 767px) {
   section.inclusions .top-wrap {
      flex-direction: column;
      align-items: center;
      text-align: center;
   }

   section.inclusions .items {
      grid-template-columns: minmax(0, 1fr);
   }

   section.inclusions .item {
      min-height: 0;
   }
}


/* GALLERY
   ----------------------------- */

section.gallery {
   position: relative;
}

section.gallery .media {
   position: relative;
   aspect-ratio: 16 / 8;
   min-height: 22rem;
   max-height: 56.25rem;
   width: 100%;
   margin: 0;
}

section.gallery .slides {
   position: absolute;
   inset: 0;
}

section.gallery.has-thumbs .media::after {
   content: "";
   position: absolute;
   inset: auto 0 0;
   z-index: 2;
   height: 12.5rem;
   background: linear-gradient(to top, var(--overlay-fade), transparent);
   pointer-events: none;
}

section.gallery .c-wrap {
   position: absolute;
   inset: auto 0 1.75rem;
   display: flex;
   justify-content: flex-end;
}

@media (max-width: 1024px) {
   section.gallery .c-wrap {
      justify-content: center;
   }
}


/* FAQ
   ----------------------------- */

section.faq {
   padding: var(--row-padding-l) 0;
}

section.faq .c-wrap {
   display: flex;
   flex-direction: column;
   gap: var(--content-gap);
}

section.faq .top-wrap {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--top-wrap-gap);
   text-align: center;
}

section.faq .top-wrap h2 {
   max-width: 7em;
}

section.faq .items {
   width: 100%;
   max-width: 40.625rem;
   margin: 0 auto;
}


/* PLANS
   ----------------------------- */

section.plans {
   --plan-available: var(--blue);
   --plan-rented: var(--brick-light);
   --floor-ratio: 2400 / 2514;
   padding-top: var(--row-padding-l);
}

section.plans .c-wrap {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--content-gap);
   padding-bottom: calc(var(--row-padding-m) + 1px);
}

section.plans .c-wrap::after {
   content: "";
   position: absolute;
   inset: auto var(--container-padding) 0;
   height: 1px;
   background-color: var(--line);
}

section.plans .c-wrap > .top-wrap {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1.5rem;
   text-align: center;
}

section.plans .c-wrap > .top-wrap h2 {
   max-width: 9em;
}

section.plans .map-wrap {
   position: relative;
   overflow: hidden;
   border-radius: var(--radius-big);
}

section.plans .building {
   position: absolute;
   inset: 0;
   display: block;
   width: 100%;
   height: 100%;
}

section.plans .building path {
   fill: var(--blue);
   fill-opacity: 0;
   stroke: var(--beige);
   stroke-width: 1.5;
   stroke-opacity: 0;
   vector-effect: non-scaling-stroke;
   outline: none;
   transition: fill-opacity 0.3s var(--ease-fade), stroke-opacity 0.3s var(--ease-fade);
}

section.plans .building path:focus-visible {
   fill-opacity: 0.6;
   stroke: var(--dark-grey);
   stroke-width: 3;
   stroke-opacity: 1;
}

section.plans .map-wrap .hint {
   position: absolute;
   top: 1.5rem;
   left: 1.5rem;
   max-width: 15em;
   margin: 0;
   padding: 0.75rem 1.125rem;
   background-color: var(--beige);
   border-radius: var(--radius-small);
   pointer-events: none;
}

section.plans .list-wrap {
   display: none;
   flex-direction: column;
   gap: 2rem;
}

section.plans .list-wrap .media {
   margin: 0;
   overflow: hidden;
   border-radius: var(--radius-big);
}

section.plans .list-wrap .summary .count {
   margin-left: auto;
   font-size: var(--small-text-size);
   opacity: var(--muted-opacity);
}

section.plans .list-wrap .floor {
   max-width: 30rem;
   margin: 0 auto;
   padding: 0 1.5rem 1.5rem;
}

section.plans .list-wrap .floor .plan {
   position: relative;
}

section.plans .list-wrap .floor svg {
   position: absolute;
   inset: 0;
   display: block;
   width: 100%;
   height: 100%;
}

section.plans .list-wrap .units {
   margin: 0;
   padding: 0;
   list-style: none;
}

section.plans .list-wrap .unit {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   padding: 1rem var(--accordion-padding-x);
   border-top: 1px solid var(--line);
}

section.plans .list-wrap .unit .info {
   flex: 1 1 auto;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 0.375rem;
}

section.plans .list-wrap .unit .top-wrap {
   display: flex;
   align-items: center;
   gap: 0.75rem;
}

section.plans .list-wrap .unit .number {
   font-family: var(--font-title);
   font-size: var(--h6-size);
}

section.plans .list-wrap .unit .state {
   padding: 0.25rem 0.5rem;
}

section.plans .list-wrap .unit .meta {
   font-size: var(--small-text-size);
   opacity: var(--muted-opacity);
}

@media (hover: hover) and (pointer: fine) {
   section.plans .building path:hover {
      fill-opacity: 0.6;
      stroke-opacity: 1;
   }
}

/* Modal */

section.plans .modal-wrap {
   position: fixed;
   inset: 0;
   z-index: var(--z-modal);
   display: none;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.5s var(--ease-fade), visibility 0s 0.5s;
}

section.plans .modal-wrap.is-visible {
   display: block;
   will-change: opacity;
}

section.plans .modal-wrap.is-open {
   opacity: 1;
   visibility: visible;
   transition: opacity 0.5s var(--ease-fade);
}

section.plans .modal {
   --map-padding: clamp(1.5rem, calc(0.7021rem + 2.5532vw), 3rem);
   --modal-bar-padding: 1rem;
   --modal-gap: 2.5rem;
   --floor-button-size: 2.75rem;
   --modal-ui: calc(var(--btn-square-size) + var(--modal-bar-padding) * 2 + 1px + var(--map-padding) * 2 + var(--floor-button-size) + var(--modal-gap));
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
   overflow-y: auto;
   overscroll-behavior: contain;
   background-color: var(--beige);
}

section.plans .modal:focus {
   outline: none;
}

section.plans .modal .bar {
   position: sticky;
   top: 0;
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding: var(--modal-bar-padding) var(--container-padding);
   background-color: var(--beige);
   border-bottom: 1px solid var(--line);
}

section.plans .modal .close {
   --btn-radius: var(--radius-pill);
}

section.plans .modal .content-wrap {
   flex: 1 0 auto;
   display: flex;
}

section.plans .modal .content-main {
   flex: 1 1 0;
   min-width: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: var(--modal-gap);
   padding: var(--map-padding);
}

section.plans .modal .viewport {
   width: min(100%, calc((100vh - var(--modal-ui)) * var(--floor-ratio)));
   width: min(100%, calc((100dvh - var(--modal-ui)) * var(--floor-ratio)));
   min-width: 18rem;
   aspect-ratio: var(--floor-ratio);
   overflow: hidden;
}

section.plans .modal .track {
   height: 100%;
   transform: translateY(calc(var(--floor-index, 0) * -100%));
}

section.plans .modal-wrap.is-ready .track {
   transition: transform 0.9s var(--ease-in-out);
}

section.plans .modal .floor {
   position: relative;
   width: 100%;
   height: 100%;
}

section.plans .modal .floor :is(.image, svg) {
   position: absolute;
   inset: 0;
   display: block;
   width: 100%;
   height: 100%;
}

:is(section.plans .modal, section.plans .list-wrap) .floor path {
   fill: var(--plan-available);
   fill-opacity: 0.55;
   outline: none;
   transition: fill-opacity 0.25s var(--ease-fade);
}

:is(section.plans .modal, section.plans .list-wrap) .floor path[data-status="rented"] {
   fill: var(--plan-rented);
   fill-opacity: 0.35;
}

section.plans .modal .floor path.is-active {
   fill-opacity: 0.9;
}

section.plans .modal .floor path:focus-visible {
   fill-opacity: 0.9;
   stroke: var(--dark-grey);
   stroke-width: 3;
   vector-effect: non-scaling-stroke;
}

section.plans .modal .floors-wrap {
   display: flex;
   align-items: center;
   gap: 1rem;
}

section.plans .modal .floors-wrap .subtitle {
   margin: 0;
}

section.plans .modal .floors {
   display: flex;
   gap: 0.375rem;
   margin: 0;
   padding: 0;
   list-style: none;
}

section.plans .modal .floors button {
   position: relative;
   isolation: isolate;
   display: flex;
   justify-content: center;
   align-items: center;
   width: var(--floor-button-size);
   height: var(--floor-button-size);
   padding: 0;
   color: var(--dark-grey);
   font-family: var(--font-mono);
   font-variation-settings: var(--mono-medium);
   font-size: var(--label-size);
   background: none;
   border: 1px solid var(--line);
   border-radius: 50%;
   cursor: pointer;
   transition: color 0.3s var(--ease-fade), border-color 0.3s var(--ease-fade);
}

section.plans .modal .floors button::before {
   content: "";
   position: absolute;
   inset: -1px;
   z-index: -1;
   background-color: var(--dark-grey);
   border-radius: inherit;
   opacity: 0;
   transition: opacity 0.3s var(--ease-fade);
}

section.plans .modal .floors button[aria-pressed="true"] {
   color: var(--beige);
   border-color: var(--dark-grey);
}

section.plans .modal .floors button[aria-pressed="true"]::before {
   opacity: 1;
}

section.plans .modal .legend-wrap {
   display: flex;
   align-items: center;
   gap: 1.5rem;
}

section.plans .modal .legend-wrap .subtitle {
   margin: 0;
}

section.plans .modal .legend {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem 1.5rem;
   margin: 0;
   padding: 0;
   font-size: var(--small-text-size);
   list-style: none;
}

section.plans .modal .legend .item {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

section.plans .modal .legend .swatch {
   width: 0.875rem;
   height: 0.875rem;
   background-color: var(--plan-available);
   border-radius: var(--radius-xs);
}

section.plans .modal .legend .item-rented .swatch {
   background-color: var(--plan-rented);
}

section.plans .modal .content-aside {
   flex: 0 0 clamp(20rem, 28vw, 26rem);
   display: flex;
   flex-direction: column;
   gap: 2rem;
   padding: var(--map-padding) var(--container-padding);
   border-left: 1px solid var(--line);
}

section.plans .modal .content-aside .top-wrap {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
}

section.plans .modal .content-aside .top-wrap h3 {
   margin: 0;
}

section.plans .state {
   flex-shrink: 0;
   margin: 0;
   padding: 0.5rem 0.75rem;
   font-family: var(--font-mono);
   font-variation-settings: var(--mono-medium);
   font-size: var(--label-size);
   line-height: 1;
   text-transform: uppercase;
   background-color: var(--blue);
   border-radius: var(--radius-pill);
}

section.plans :is(.content-aside.is-rented, .unit.is-rented) .state {
   background-color: var(--brick-light);
}

section.plans .modal .details {
   margin: 0;
   padding: 0;
   list-style: none;
   border-top: 1px solid var(--line);
}

section.plans .modal .details li {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
   padding: 0.875rem 0;
   border-bottom: 1px solid var(--line);
}

section.plans .modal [data-row][hidden] {
   display: none;
}

section.plans .modal .details .label {
   opacity: var(--muted-opacity);
}

section.plans .modal .details .value {
   text-align: right;
}

@media (hover: hover) and (pointer: fine) {
   section.plans .modal .floor path:hover {
      fill-opacity: 0.75;
   }

   section.plans .modal .floors button:hover {
      border-color: var(--dark-grey);
   }
}

@media (forced-colors: active) {
   section.plans :is(.building, .modal .floor) path:focus-visible {
      stroke: Highlight;
   }

   section.plans .modal .legend .swatch {
      forced-color-adjust: none;
   }

   section.plans .modal .floors button[aria-pressed="true"] {
      forced-color-adjust: none;
      background-color: Highlight;
      color: HighlightText;
   }

   section.plans .modal .floors button[aria-pressed="true"]::before {
      display: none;
   }
}

@media (prefers-reduced-motion: reduce) {
   section.plans .building path,
   section.plans .modal-wrap,
   section.plans .modal-wrap.is-open,
   section.plans .modal,
   section.plans .modal-wrap.is-ready .track,
   section.plans .modal .floor path,
   section.plans .modal .floors button,
   section.plans .modal .floors button::before {
      transition: none;
   }
}

@media (max-width: 1300px) {
   section.plans .modal .content-aside .top-wrap {
      flex-direction: column;
      align-items: flex-start;
   }
}

@media (max-width: 1024px) {
   section.plans :is(.map-wrap, .modal-wrap) {
      display: none;
   }

   section.plans .list-wrap {
      display: flex;
   }
}

@media (max-width: 767px) {
   section.plans .list-wrap .floor {
      padding-inline: var(--accordion-padding-x);
   }
}

@media (max-width: 479px) {
   section.plans .list-wrap .unit .btn-square {
      --btn-square-size: 2.125rem;
      --btn-square-icon-size: 1rem;
   }
}

@media (scripting: none) {
   section.plans .map-wrap {
      display: none;
   }

   section.plans .list-wrap {
      display: flex;
   }
}

:is(html[data-scripts-failed]:not([data-scripts-ready]) section.plans, html[data-scripts-ready] section.plans:not(.is-ready)) :is(.map-wrap, .modal-wrap) {
   display: none;
}

:is(html[data-scripts-failed]:not([data-scripts-ready]) section.plans, html[data-scripts-ready] section.plans:not(.is-ready)) .list-wrap {
   display: flex;
}


/* CONTACT
   ----------------------------- */

section.contact {
   padding: var(--row-padding-m) 0 var(--row-padding-l);
}

section.contact .c-wrap {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
}

section.contact .content-aside {
   flex: 5 1 0;
   min-width: 0;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 2.1875rem;
}

section.contact .item {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.625rem;
}

section.contact .item .label {
   opacity: var(--muted-opacity);
}

section.contact .item .h5 {
   font-style: normal;
   text-decoration: none;
}

section.contact address .line {
   display: block;
}

section.contact .socials .btn-icon {
   --btn-color: var(--dark-grey);
}

section.contact .form-wrap {
   flex: 7 1 0;
   min-width: 0;
}

section.contact .wpcf7-form {
   margin-top: -0.75rem;
}

@media (max-width: 767px) {
   section.contact .c-wrap {
      flex-direction: column;
      align-items: stretch;
      gap: 3.5rem;
   }

   section.contact :is(.content-aside, .form-wrap) {
      flex: none;
   }

   section.contact .wpcf7-form {
      margin-top: -0.5rem;
   }
}


/* ERROR 404
   ----------------------------- */

section.error-404 {
   padding: var(--row-padding-l) 0;
}

section.error-404 .info {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: clamp(1.75rem, calc(1.3511rem + 1.2766vw), 2.5rem);
}

section.error-404 h1 {
   max-width: 10em;
}