:root {
  --paper: #e9e5dc;
  --ink: #18201c;
  --pine: #14231c;
  --sage: #768070;
  --gold: #b69a6a;
  --white: #f6f3ec;
  --serif: 'Italiana', Georgia, serif;
  --sans: 'DM Sans', Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1)
}

* {
  box-sizing: border-box
}

html {
  background: var(--pine);
  scroll-behavior: smooth
}

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden
}

body.locked {
  overflow: hidden
}

a {
  color: inherit;
  text-decoration: none
}

button {
  font: inherit
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.micro,
.section-index {
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .24em
}

.section-index {
  display: flex;
  align-items: center;
  gap: 14px
}

.section-index i {
  width: 70px;
  height: 1px;
  background: currentColor;
  opacity: .4
}

em {
  font-weight: 400
}

.preloader {
  position: fixed;
  z-index: 10000;
  inset: 0;
  background: var(--pine);
  color: var(--white);
  display: grid;
  place-items: center;
  transition: clip-path 1s var(--ease);
  clip-path: inset(0)
}

.preloader.done {
  clip-path: inset(0 0 100% 0);
  pointer-events: none
}

.load-brand {
  font: 400 clamp(3rem, 8vw, 8rem)/1 var(--serif);
  letter-spacing: .08em
}

.load-line {
  position: absolute;
  left: 8vw;
  right: 8vw;
  bottom: 10vh;
  height: 1px;
  background: #ffffff22
}

.load-line i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width .1s
}

.load-count {
  position: absolute;
  right: 8vw;
  bottom: calc(10vh + 18px);
  font-size: 12px
}

.page-wipe {
  position: fixed;
  z-index: 9000;
  inset: 0;
  background: var(--gold);
  transform: translateY(100%);
  pointer-events: none
}

.topbar {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  height: 98px;
  padding: 0 3.2vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: var(--white);
  mix-blend-mode: difference;
  transition: .4s
}

.wordmark {
  font: 400 22px var(--serif);
  letter-spacing: .14em;
  text-align: center
}

.wordmark small {
  display: block;
  font: 400 7px var(--sans);
  letter-spacing: .5em;
  margin-top: 4px
}

.nav-trigger,
.lang {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer
}

.nav-trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .2em;
  padding: 12px 0
}

.nav-trigger i {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  position: absolute;
  transition: .5s
}

.nav-trigger i:first-child {
  transform: translateY(-4px)
}

.nav-trigger i:nth-child(2) {
  transform: translateY(4px)
}

.nav-trigger span {
  margin-left: 34px
}

.nav-trigger.open i:first-child {
  transform: rotate(45deg)
}

.nav-trigger.open i:nth-child(2) {
  transform: rotate(-45deg)
}

.top-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 24px
}

.lang {
  font-size: 9px;
  letter-spacing: .14em
}

.lang span {
  opacity: .4
}

.round-link {
  width: 94px;
  height: 42px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .14em;
  transition: .4s
}

.round-link:hover {
  background: var(--white);
  color: var(--ink)
}

.menu-panel {
  position: fixed;
  z-index: 950;
  inset: 0;
  background: var(--pine);
  color: var(--white);
  display: grid;
  grid-template-columns: 40% 60%;
  padding: 120px 6vw 55px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .9s var(--ease);
  visibility: hidden
}

.menu-panel.open {
  clip-path: inset(0);
  visibility: visible
}

.menu-visual {
  position: relative;
  overflow: hidden
}

.menu-visual img {
  filter: brightness(.75);
  transform: scale(1.08);
  transition: 1.4s var(--ease)
}

.menu-panel.open .menu-visual img {
  transform: scale(1)
}

.menu-visual span {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase
}

.menu-links {
  padding-left: 7vw;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.menu-links a {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  border-bottom: 1px solid #ffffff18;
  padding: 7px 0;
  overflow: hidden
}

.menu-links em {
  font: 400 9px var(--sans);
  opacity: .4
}

.menu-links span {
  font: 400 clamp(1.7rem, 3.7vw, 3.8rem)/1.08 var(--serif);
  transition: .45s var(--ease)
}

.menu-links a:hover span {
  transform: translateX(18px);
  color: var(--gold)
}

.menu-foot {
  position: absolute;
  left: calc(40% + 13vw);
  right: 6vw;
  bottom: 35px;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .16em
}

.cursor {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  transform: translate(-50%, -50%);
  transition: width .35s, height .35s, background .35s;
  display: grid;
  place-items: center
}

.cursor span {
  font-size: 8px;
  opacity: 0
}

.cursor.hover {
  width: 76px;
  height: 76px;
  background: #e9e5dce8;
  color: var(--ink)
}

.cursor.hover span {
  opacity: 1
}

.scroll-meter {
  position: fixed;
  z-index: 800;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  height: 160px;
  color: var(--white);
  mix-blend-mode: difference;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 8px
}

.scroll-meter i {
  height: 120px;
  width: 1px;
  background: #ffffff44
}

.scroll-meter b {
  position: absolute;
  top: 18px;
  width: 2px;
  height: 0;
  background: currentColor
}

.hero {
  height: 100svh;
  min-height: 650px;
  position: relative;
  color: var(--white);
  overflow: hidden
}

.hero-media,
.hero-media img,
.hero-shade {
  position: absolute;
  inset: 0
}

.hero-media img {
  opacity: 0;
  transition: opacity 1.4s, transform 1.8s;
  transform: scale(1.03)
}

.hero-media img.active {
  opacity: 1;
  transform: scale(1)
}

.hero-shade {
  background: linear-gradient(180deg, #07100c8a 0%, transparent 35%, #07100ca3 100%)
}

.hero-copy {
  position: absolute;
  left: 7vw;
  right: 7vw;
  top: 21vh
}

.hero-title {
  font: 400 clamp(5rem, 13.2vw, 13rem)/.73 var(--serif);
  letter-spacing: -.055em;
  margin: 3vh 0 5vh
}

.hero-title span {
  display: block
}

.hero-title span:last-child {
  text-align: right
}

.hero-line {
  display: flex;
  align-items: end;
  justify-content: space-between;
  width: 70%;
  margin-left: auto
}

.hero-line p {
  font: 300 clamp(.9rem, 1.25vw, 1.2rem)/1.5 var(--sans)
}

.day-toggle {
  display: flex;
  align-items: center;
  gap: 12px
}

.day-toggle button {
  border: 0;
  background: transparent;
  color: #ffffff70;
  padding: 8px;
  cursor: pointer;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .15em
}

.day-toggle button.active {
  color: #fff
}

.day-toggle i {
  width: 36px;
  height: 1px;
  background: #ffffff55
}

.hero-cta {
  position: absolute;
  right: 7vw;
  bottom: 8vh;
  width: 135px;
  height: 135px;
  display: grid;
  place-items: center;
  text-align: center;
  color: inherit
}

.hero-cta svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: .6
}

.hero-cta span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .16em;
  line-height: 1.5
}

.hero-cta b {
  position: absolute;
  right: 12px;
  top: 9px;
  font-weight: 300
}

.hero-cta:hover svg {
  animation: spin 12s linear infinite
}

.scroll-cue {
  position: absolute;
  left: 3.2vw;
  bottom: 5vh;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .18em
}

.scroll-cue i {
  display: block;
  height: 1px;
  width: 55px;
  background: currentColor;
  animation: pulse 2s infinite
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes pulse {
  50% {
    width: 25px
  }
}

.manifesto {
  position: relative;
  min-height: 115vh;
  padding: 12vw 7vw 10vw
}

.manifesto-side {
  position: absolute;
  right: 7vw;
  top: 12vw;
  font-size: 11px;
  line-height: 1.5
}

.manifesto h2 {
  font: 400 clamp(3.4rem, 8.5vw, 9rem)/.93 var(--serif);
  margin: 18vh 0 12vh;
  letter-spacing: -.045em
}

.manifesto h2 em {
  color: var(--sage)
}

.manifesto-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end
}

.manifesto-bottom p {
  grid-column: 2;
  max-width: 530px;
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  line-height: 1.55
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  border-bottom: 1px solid currentColor;
  padding: 12px 0;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .18em;
  width: max-content
}

.text-link span {
  transition: .4s
}

.text-link:hover span {
  transform: translate(5px, -5px)
}

.story-stage {
  height: 240vh;
  position: relative
}

.story-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  color: #fff
}

.story-image,
.story-image img,
.story-overlay {
  position: absolute;
  inset: 0
}

.story-image img {
  transform: scale(1.15)
}

.story-overlay {
  background: linear-gradient(90deg, #0b1510d9, transparent 70%)
}

.story-copy {
  position: absolute;
  left: 8vw;
  top: 24vh;
  max-width: 580px
}

.story-copy h2 {
  font: 400 clamp(4rem, 9vw, 9rem)/.85 var(--serif);
  letter-spacing: -.04em;
  margin: 4vh 0
}

.story-copy p {
  max-width: 390px;
  line-height: 1.65
}

.story-mark {
  position: absolute;
  right: -2vw;
  bottom: -16vh;
  font: 400 60vw/1 var(--serif);
  color: #ffffff09
}

.pillars {
  position: relative;
  padding: 10vw 7vw 13vw;
  min-height: 120vh
}

.pillar-head {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: end;
  margin: 9vh 0 7vh
}

.pillar-head h2,
.res-intro h2,
.loc-copy h2,
.amenity-title h2,
.payment-head h2,
.closing-copy h2 {
  font: 400 clamp(3.5rem, 7.2vw, 7.5rem)/.9 var(--serif);
  letter-spacing: -.04em;
  margin: 0
}

.pillar-head p {
  max-width: 320px
}

.pillar-list {
  width: 64%;
  position: relative;
  z-index: 2
}

.pillar-list article {
  display: grid;
  grid-template-columns: 55px 1fr 1fr 30px;
  align-items: center;
  border-top: 1px solid #18201c42;
  padding: 28px 0;
  cursor: pointer
}

.pillar-list article:last-child {
  border-bottom: 1px solid #18201c42
}

.pillar-list span {
  font-size: 9px
}

.pillar-list h3 {
  font: 400 clamp(1.8rem, 3vw, 3.2rem) var(--serif);
  margin: 0
}

.pillar-list p {
  font-size: 12px;
  max-width: 260px
}

.pillar-list i {
  font-style: normal;
  font-size: 18px
}

.pillar-preview {
  position: absolute;
  right: 7vw;
  bottom: 12vw;
  width: 29vw;
  height: 50vh;
  overflow: hidden
}

.pillar-preview img {
  transition: .7s var(--ease)
}

.residence-types {
  padding: 10vw 0 8vw;
  color: #fff;
  background: var(--pine)
}

.res-intro {
  padding: 0 7vw;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: end;
  margin-bottom: 9vh
}

.res-intro .section-index {
  grid-column: 1/-1;
  margin-bottom: 8vh
}

.res-intro p {
  max-width: 360px;
  margin-left: auto
}

.residence-swiper {
  padding-left: 7vw
}

.res-card {
  width: 47vw !important
}

.res-img {
  height: 63vh;
  overflow: hidden
}

.res-img img {
  transition: 1s var(--ease)
}

.res-card:hover img {
  transform: scale(1.045)
}

.res-card-copy {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: end;
  padding-top: 22px
}

.res-card-copy span {
  font-size: 9px
}

.res-card-copy h3 {
  font: 400 clamp(1.7rem, 3vw, 3rem) var(--serif);
  margin: 0
}

.res-card-copy p {
  grid-column: 2;
  font-size: 11px;
  opacity: .65
}

.res-card-copy i {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .15em
}

.swiper-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 60px 7vw 0
}

.swiper-nav button {
  border: 1px solid #ffffff55;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: none;
  color: #fff
}

.swiper-pagination {
  position: static !important;
  width: 160px !important
}

.swiper-pagination-progressbar-fill {
  background: var(--gold) !important
}

.location-scene {
  height: 110vh;
  min-height: 750px;
  position: relative;
  color: #fff;
  overflow: hidden
}

.location-bg,
.location-bg:after,
.location-grid {
  position: absolute;
  inset: 0
}

.location-bg:after {
  content: '';
  background: #0c1711b8
}

.location-grid {
  background-image: linear-gradient(#ffffff16 1px, transparent 1px), linear-gradient(90deg, #ffffff16 1px, transparent 1px);
  background-size: 10vw 10vw;
  mask-image: linear-gradient(to right, transparent, #000)
}

.loc-copy {
  position: absolute;
  left: 7vw;
  top: 20vh;
  max-width: 630px
}

.loc-copy h2 {
  margin: 4vh 0
}

.loc-copy p {
  max-width: 420px;
  line-height: 1.6
}

.text-link.light {
  margin-top: 4vh
}

.loc-times {
  position: absolute;
  right: 7vw;
  top: 22vh;
  display: flex;
  flex-direction: column;
  align-items: flex-end
}

.loc-times button {
  border: 0;
  border-bottom: 1px solid #ffffff35;
  background: none;
  color: #ffffff70;
  width: 280px;
  text-align: left;
  padding: 17px 0;
  font: 400 1.3rem var(--serif);
  cursor: pointer
}

.loc-times button.active {
  color: var(--gold);
  padding-left: 22px
}

.time-card {
  position: absolute;
  right: 7vw;
  bottom: 9vh;
  background: var(--paper);
  color: var(--ink);
  padding: 24px;
  width: 320px;
  display: grid;
  grid-template-columns: 1fr 1fr
}

.time-card>span {
  grid-column: 1/-1;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .18em;
  margin-bottom: 20px
}

.time-card div {
  display: flex;
  flex-direction: column
}

.time-card strong {
  font: 400 3.2rem var(--serif)
}

.time-card small {
  text-transform: uppercase;
  font-size: 8px;
  letter-spacing: .15em
}

.amenities-home {
  padding: 10vw 0 12vw;
  overflow: hidden
}

.amenities-home>.section-index,
.amenity-title {
  margin-left: 7vw;
  margin-right: 7vw
}

.amenity-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 8vh;
  margin-bottom: 8vh
}

.amenity-title h2 em {
  color: var(--sage)
}

.amenity-rail {
  display: flex;
  gap: 2vw;
  padding-left: 7vw;
  width: max-content
}

.amenity-rail article {
  width: 34vw;
  position: relative
}

.amenity-rail article:nth-child(even) {
  margin-top: 12vh
}

.amenity-rail img {
  height: 60vh
}

.amenity-rail span {
  display: block;
  font-size: 9px;
  margin-top: 18px
}

.amenity-rail h3 {
  font: 400 2.2rem var(--serif);
  margin: 5px 0
}

.panorama {
  height: 105vh;
  position: relative;
  color: #fff;
  overflow: hidden
}

.panorama>img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: 1.3s
}

.panorama>img.active {
  opacity: 1
}

.panorama:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0b1510a8, transparent)
}

.pano-copy {
  position: absolute;
  z-index: 2;
  left: 7vw;
  top: 22vh
}

.pano-copy h2 {
  font: 400 clamp(4rem, 9vw, 9rem)/.86 var(--serif);
  margin: 5vh 0
}

.pano-toggle {
  position: absolute;
  z-index: 2;
  right: 7vw;
  bottom: 8vh;
  border: 0;
  background: #eee;
  color: #222;
  border-radius: 40px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .14em
}

.pano-toggle i {
  width: 30px;
  height: 30px;
  background: var(--pine);
  border-radius: 50%;
  transition: .5s
}

.pano-toggle.night i {
  transform: translateX(44px)
}

.payment {
  padding: 11vw 7vw
}

.payment-head {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: end;
  margin: 10vh 0
}

.payment-head p {
  max-width: 330px
}

.payment-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid #18201c55
}

.payment-steps article {
  padding: 35px 18px 30px 0;
  border-right: 1px solid #18201c33;
  min-height: 230px;
  display: grid
}

.payment-steps strong {
  font: 400 clamp(2.8rem, 5vw, 5rem) var(--serif)
}

.payment-steps span {
  font-size: 9px
}

.payment-steps p {
  align-self: end;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em
}

.closing {
  height: 115vh;
  position: relative;
  color: #fff
}

.closing-image,
.closing-image:after {
  position: absolute;
  inset: 0
}

.closing-image:after {
  content: '';
  background: linear-gradient(90deg, #0b1510dc, transparent)
}

.closing-copy {
  position: absolute;
  left: 7vw;
  top: 19vh
}

.closing-copy h2 {
  margin: 5vh 0
}

.closing-copy p {
  max-width: 380px;
  line-height: 1.6
}

.closing .hero-cta {
  position: relative;
  right: auto;
  bottom: auto;
  margin-top: 6vh
}

.home-footer {
  background: #0c1511;
  color: var(--white);
  padding: 10vw 7vw 35px
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: end;
  border-bottom: 1px solid #ffffff28;
  padding-bottom: 8vh
}

.footer-logo {
  font: 400 clamp(5rem, 14vw, 14rem)/.7 var(--serif);
  letter-spacing: -.04em
}

.footer-top p {
  font-size: 12px
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 8vh 0
}

.footer-cols>div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px
}

.footer-cols span {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--gold);
  margin-bottom: 15px
}

.footer-cols a,
.footer-cols p {
  font-size: 12px;
  line-height: 1.6
}

.footer-bottom {
  border-top: 1px solid #ffffff28;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .15em
}

.to-top {
  border: 0;
  background: none;
  color: inherit;
  text-transform: inherit;
  font-size: inherit;
  letter-spacing: inherit
}

.reveal {
  opacity: 0;
  transform: translateY(25px)
}

@media(max-width:900px) {

  .cursor,
  .scroll-meter {
    display: none
  }

  .menu-panel {
    grid-template-columns: 1fr;
    padding: 100px 7vw 40px
  }

  .menu-visual {
    display: none
  }

  .menu-links {
    padding: 0
  }

  .menu-foot {
    left: 7vw
  }

  .hero-title {
    font-size: 15vw
  }

  .hero-line {
    width: 100%
  }

  .manifesto-side {
    display: none
  }

  .manifesto-bottom {
    display: block
  }

  .manifesto-bottom p {
    margin-left: auto
  }

  .pillar-head,
  .res-intro,
  .payment-head {
    grid-template-columns: 1fr;
    gap: 30px
  }

  .pillar-list {
    width: 100%
  }

  .pillar-preview {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 55vh;
    margin-top: 40px
  }

  .res-card {
    width: 75vw !important
  }

  .loc-times {
    display: none
  }

  .amenity-rail article {
    width: 65vw
  }

  .payment-steps {
    grid-template-columns: repeat(2, 1fr)
  }

  .footer-logo {
    font-size: 17vw
  }
}

@media(max-width:600px) {
  .topbar {
    height: 76px;
    padding: 0 18px
  }

  .wordmark {
    font-size: 17px
  }

  .lang {
    display: none
  }

  .round-link {
    width: 70px;
    height: 34px
  }

  .round-link i {
    display: none
  }

  .hero {
    min-height: 620px
  }

  .hero-copy {
    left: 20px;
    right: 20px;
    top: 23vh
  }

  .hero-title {
    font-size: 19vw;
    line-height: .8;
    margin: 5vh 0
  }

  .hero-title span:last-child {
    text-align: left
  }

  .hero-line {
    display: block
  }

  .day-toggle {
    margin-top: 20px
  }

  .hero-cta {
    right: 20px;
    bottom: 5vh;
    width: 105px;
    height: 105px
  }

  .scroll-cue {
    display: none
  }

  .manifesto,
  .pillars,
  .payment {
    padding: 100px 20px
  }

  .manifesto h2 {
    font-size: 15vw;
    margin: 15vh 0 10vh
  }

  .manifesto-bottom p {
    font-size: 15px
  }

  .story-copy {
    left: 20px;
    top: 25vh
  }

  .story-copy h2 {
    font-size: 17vw
  }

  .pillar-head {
    margin: 80px 0 40px
  }

  .pillar-head h2,
  .res-intro h2,
  .loc-copy h2,
  .amenity-title h2,
  .payment-head h2,
  .closing-copy h2 {
    font-size: 15vw
  }

  .pillar-list article {
    grid-template-columns: 35px 1fr 20px
  }

  .pillar-list article p {
    display: none
  }

  .residence-types {
    padding: 90px 0
  }

  .res-intro {
    padding: 0 20px;
    margin-bottom: 50px
  }

  .residence-swiper {
    padding-left: 20px
  }

  .res-card {
    width: 84vw !important
  }

  .res-img {
    height: 52vh
  }

  .res-card-copy {
    grid-template-columns: 30px 1fr
  }

  .res-card-copy i {
    display: none
  }

  .swiper-nav {
    padding: 35px 20px
  }

  .location-scene {
    height: 100vh
  }

  .loc-copy {
    left: 20px;
    right: 20px;
    top: 17vh
  }

  .time-card {
    left: 20px;
    right: 20px;
    bottom: 30px;
    width: auto
  }

  .amenities-home {
    padding: 100px 0
  }

  .amenities-home>.section-index,
  .amenity-title {
    margin-left: 20px;
    margin-right: 20px
  }

  .amenity-title {
    display: block
  }

  .amenity-title .text-link {
    margin-top: 30px
  }

  .amenity-rail {
    padding-left: 20px
  }

  .amenity-rail article {
    width: 80vw
  }

  .amenity-rail img {
    height: 52vh
  }

  .pano-copy {
    left: 20px
  }

  .pano-copy h2 {
    font-size: 18vw
  }

  .pano-toggle {
    right: 20px
  }

  .payment-steps {
    grid-template-columns: 1fr 1fr
  }

  .payment-steps article {
    min-height: 180px
  }

  .closing-copy {
    left: 20px;
    right: 20px
  }

  .home-footer {
    padding: 100px 20px 30px
  }

  .footer-top {
    display: block
  }

  .footer-logo {
    font-size: 20vw
  }

  .footer-cols {
    grid-template-columns: 1fr 1fr
  }

  .footer-bottom {
    gap: 20px;
    flex-wrap: wrap
  }
}

/* Location film */
.location-film>img,
.location-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.location-film>img {
  z-index: 0
}

.location-video {
  z-index: 1;
  opacity: 1;
  background: #0c1711
}

.location-film:after {
  z-index: 2;
  background: linear-gradient(90deg, #07120dcf 0%, #07120d80 45%, #07120d9e 100%)
}

.location-grid {
  z-index: 3;
  pointer-events: none
}

.loc-copy,
.loc-times,
.time-card {
  z-index: 5
}

.film-control {
  position: absolute;
  z-index: 6;
  left: 7vw;
  bottom: 8vh;
  width: 94px;
  height: 94px;
  border: 1px solid #ffffff85;
  border-radius: 50%;
  background: #0b15106b;
  color: #fff;
  display: grid;
  place-content: center;
  gap: 5px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: .35s
}

.film-control:hover {
  background: var(--paper);
  color: var(--ink);
  transform: scale(1.05)
}

.film-control-icon {
  font: 400 15px var(--sans)
}

.film-control small {
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .15em
}

.film-sound {
  position: absolute;
  z-index: 6;
  right: 7vw;
  bottom: 6vh;
  border: 0;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: end;
  gap: 3px;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 7px;
  letter-spacing: .15em
}

.film-sound i {
  display: block;
  width: 2px;
  height: 7px;
  background: currentColor;
  animation: filmWave .8s ease-in-out infinite alternate;
  animation-play-state: paused
}

.film-sound i:nth-child(2) {
  height: 14px;
  animation-delay: .15s
}

.film-sound i:nth-child(3) {
  height: 10px;
  animation-delay: .3s
}

.film-sound span {
  margin-left: 8px
}

.film-sound.sound-on i {
  animation-play-state: running
}

@keyframes filmWave {
  to {
    height: 18px
  }
}

@media(max-width:600px) {
  .film-label {
    left: 20px;
    top: 11vh
  }

  .film-control {
    left: auto;
    right: 20px;
    bottom: 34px;
    width: 72px;
    height: 72px
  }

  .film-sound {
    display: none !important
  }

  .location-film:after {
    background: linear-gradient(180deg, #07120d7d, #07120dc7)
  }
}

/* Cinematic property film */
.amenities-home {
  min-height: 100vh
}

.amenity-rail {
  will-change: transform
}

.amenity-rail article {
  will-change: transform, opacity;
  overflow: hidden;
  flex: 0 0 auto
}

.amenity-rail article img {
  will-change: transform
}

.amenity-title {
  overflow: hidden
}

.residence-grid {
  padding: 0 7vw
}

.residence-grid-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8vw 2vw
}

.residence-grid .res-card {
  width: auto !important
}

.residence-grid .res-card:nth-child(even) {
  transform: translateY(7vw)
}

.residence-grid .res-img {
  height: 62vh
}

.residence-grid .res-card-copy {
  padding-bottom: 1vw
}

@media(max-width:600px) {
  .residence-grid {
    padding: 0 20px
  }

  .residence-grid-wrap {
    grid-template-columns: 1fr;
    gap: 55px
  }

  .residence-grid .res-card:nth-child(even) {
    transform: none
  }

  .residence-grid .res-img {
    height: 52vh
  }
}

.location-scene {
  height: 115vh;
  min-height: 780px
}

.location-film {
  inset: 22px;
  overflow: hidden
}

.location-film:before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid #ffffff28;
  pointer-events: none
}

.location-film:after {
  background: linear-gradient(180deg, #07120d6b 0%, transparent 40%, #07120dd6 100%)
}

.location-grid {
  opacity: .35;
  mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 80%, transparent)
}

.property-film-copy {
  position: absolute;
  z-index: 5;
  left: 7vw;
  right: 7vw;
  top: 15vh
}

.property-film-copy>.micro {
  display: block;
  margin-bottom: 8vh
}

.property-film-copy h2 {
  font: 400 clamp(4.5rem, 10.5vw, 11rem)/.76 var(--serif);
  letter-spacing: -.055em;
  margin: 0;
  color: var(--white)
}

.property-film-copy h2 span,
.property-film-copy h2 em {
  display: block
}

.property-film-copy h2 em {
  color: #d1c39e;
  text-align: right
}

.property-film-copy p {
  max-width: 350px;
  margin: 6vh 0 0 auto;
  font-size: 13px;
  line-height: 1.65
}

.property-film-meta {
  position: absolute;
  z-index: 5;
  left: 7vw;
  bottom: 7vh;
  display: flex;
  align-items: center;
  gap: 18px
}

.property-film-meta i {
  width: 55px;
  height: 1px;
  background: #ffffff66
}

.property-film-link {
  position: absolute;
  z-index: 6;
  right: 7vw;
  bottom: 6vh;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  display: grid;
  place-items: center;
  text-align: center;
  text-transform: uppercase;
  font-size: 8px;
  letter-spacing: .15em;
  transition: .4s
}

.property-film-link b {
  position: absolute;
  right: 18px;
  top: 14px;
  font-weight: 400
}

.property-film-link:hover {
  transform: rotate(-8deg) scale(1.06);
  background: var(--gold)
}

.location-scene .film-control {
  left: 50%;
  bottom: 6vh;
  transform: translateX(-50%);
  width: 82px;
  height: 82px
}

.location-scene .film-control:hover {
  transform: translateX(-50%) scale(1.06)
}

.location-scene .film-sound {
  right: auto;
  left: calc(50% + 70px);
  bottom: 9vh
}

@media(max-width:600px) {
  .location-scene {
    height: 100svh;
    min-height: 680px
  }

  .location-film {
    inset: 10px
  }

  .property-film-copy {
    left: 28px;
    right: 28px;
    top: 13vh
  }

  .property-film-copy>.micro {
    margin-bottom: 9vh
  }

  .property-film-copy h2 {
    font-size: 17vw;
    line-height: .82
  }

  .property-film-copy h2 em {
    text-align: left;
    margin-left: 10vw
  }

  .property-film-copy p {
    font-size: 12px;
    margin-top: 5vh;
    max-width: 280px
  }

  .property-film-meta {
    left: 28px;
    bottom: 32px
  }

  .property-film-meta i,
  .property-film-meta span:last-child {
    display: none
  }

  .property-film-link {
    right: 25px;
    bottom: 24px;
    width: 94px;
    height: 94px
  }

  .location-scene .film-control {
    left: auto;
    right: 28px;
    bottom: auto;
    top: 48%;
    transform: none
  }

  .location-scene .film-control:hover {
    transform: scale(1.04)
  }
}

@media(prefers-reduced-motion:reduce) {

  *,
  *:before,
  *:after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important
  }

  .reveal {
    opacity: 1;
    transform: none
  }
}

/* ERA-inspired hero composition: Unicorn identity, matching interaction language */
.era-hero-mode .hero-copy {
  inset: 17vh 7vw auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center
}

.era-hero-mode .hero-copy>.micro {
  order: 2;
  margin-top: 20px;
  color: #fff
}

.era-hero-mode .hero-title {
  order: 1;
  margin: 0;
  font-size: clamp(4.7rem, 9.4vw, 9.5rem);
  line-height: .76;
  letter-spacing: -.045em
}

.era-hero-mode .hero-title span {
  overflow: hidden;
  text-align: center !important
}

.era-hero-mode .hero-title span:last-child {
  font-size: .72em;
  margin-top: .12em
}

.era-hero-mode .hero-line {
  order: 3;
  width: auto;
  margin: 9vh 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px
}

.era-hero-mode .hero-line>p {
  font: 400 clamp(1.6rem, 2.5vw, 2.8rem)/1.05 var(--serif);
  margin: 0
}

.era-hero-mode .hero-line>p span:first-child {
  display: inline-block;
  margin-left: -2.5em
}

.era-hero-mode .hero-line>p span:last-child {
  display: inline-block;
  margin-left: 2.5em
}

.era-hero-mode .day-toggle {
  order: -1
}

.era-hero-mode .day-toggle button {
  font-family: var(--serif);
  font-size: clamp(.85rem, 1.15vw, 1.1rem);
  text-transform: none;
  letter-spacing: 0;
  font-style: italic
}

.era-hero-mode .hero-cta {
  width: 122px;
  height: 122px;
  right: 6vw;
  bottom: 7vh;
  transition: transform .5s var(--ease)
}

.era-hero-mode .hero-shade {
  background: linear-gradient(180deg, #07100c70, transparent 45%, #07100c8f)
}

.era-hero-mode .hero-media.scene-changing {
  filter: blur(4px)
}

.era-hero-mode .hero-media {
  transition: filter .8s
}

.era-hero-mode .scroll-cue:before {
  content: '00';
  margin-right: 14px;
  font-size: 8px
}

.era-hero-mode .scroll-cue {
  bottom: 5vh
}

.era-hero-mode .hero:after {
  content: 'DHAKA · BANGLADESH';
  position: absolute;
  left: 50%;
  bottom: 4.7vh;
  transform: translateX(-50%);
  font-size: 8px;
  letter-spacing: .28em
}

@media(max-width:600px) {
  .era-hero-mode .hero-copy {
    inset: 19vh 18px auto
  }

  .era-hero-mode .hero-title {
    font-size: 23vw;
    line-height: .72
  }

  .era-hero-mode .hero-title span:last-child {
    font-size: .66em
  }

  .era-hero-mode .hero-copy>.micro {
    margin-top: 14px
  }

  .era-hero-mode .hero-line {
    margin-top: 8vh
  }

  .era-hero-mode .hero-line>p {
    font-size: 1.65rem
  }

  .era-hero-mode .day-toggle {
    gap: 6px
  }

  .era-hero-mode .hero-cta {
    display: grid;
    right: 20px;
    bottom: 4vh;
    width: 94px;
    height: 94px
  }

  .era-hero-mode .hero:after {
    left: 20px;
    transform: none;
    bottom: 5vh
  }

  .era-hero-mode .hero-media img {
    object-position: 56% center
  }
}

.era-hero-mode .hero-media {
  inset: -18% -8%;
  transition: filter .8s
}

.era-hero-mode .hero-media img,
.era-hero-mode .hero-media img.active {
  transform: scale(1.08)
}

@media(max-width:600px) {
  .era-hero-mode .hero-media {
    inset: -28% -12%
  }

  .era-hero-mode .hero-copy {
    top: 13vh
  }

  .era-hero-mode .hero-line {
    margin-top: 6vh
  }
}

/* Original architectural-window hero */
.unique-hero .hero {
  background: var(--pine);
  isolation: isolate
}

.unique-hero .hero:before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 7.5vh 24vw;
  border: 1px solid #ffffff2e;
  pointer-events: none
}

.unique-hero .hero-media {
  z-index: 0;
  inset: 7.5vh 24vw;
  overflow: hidden;
  clip-path: inset(0);
  transition: filter .8s, clip-path 1.2s var(--ease)
}

.unique-hero .hero-media img {
  transform: scale(1.1);
  object-position: 50% 48%
}

.unique-hero .hero-media img.active {
  transform: scale(1.1)
}

.unique-hero .hero-media.scene-changing {
  filter: blur(6px) saturate(.5)
}

.unique-hero .hero-shade {
  z-index: 1;
  background: linear-gradient(180deg, #0b17115c, transparent 50%, #0b171173)
}

.unique-hero .hero-copy {
  z-index: 3;
  inset: 0;
  position: absolute
}

.unique-hero .hero-copy>.micro {
  position: absolute;
  left: 4vw;
  top: 15vh;
  margin: 0;
  writing-mode: vertical-rl;
  color: #ffffff9e
}

.unique-hero .hero-title {
  margin: 0;
  position: absolute;
  inset: 0;
  font: 400 12.8vw/.78 var(--serif);
  letter-spacing: -.055em;
  pointer-events: none
}

.unique-hero .hero-title span:first-child {
  position: absolute;
  left: 3.5vw;
  top: 25vh
}

.unique-hero .hero-title span:last-child {
  position: absolute;
  right: 2.8vw;
  bottom: 16vh;
  text-align: right;
  font-size: .72em
}

.unique-hero .hero-line {
  position: absolute;
  left: 4vw;
  bottom: 8vh;
  width: 19vw;
  margin: 0;
  display: block
}

.unique-hero .hero-line>p {
  font: 400 clamp(1.1rem, 1.6vw, 1.7rem)/1.12 var(--serif);
  margin: 0 0 25px
}

.unique-hero .hero-line>p span:last-child {
  display: inline-block;
  margin-left: 2vw
}

.unique-hero .day-toggle {
  display: grid;
  grid-template-columns: auto 35px auto;
  align-items: center
}

.unique-hero .day-toggle button {
  border: 0;
  background: transparent;
  color: #ffffff70;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .17em;
  padding: 6px 0;
  cursor: pointer
}

.unique-hero .day-toggle button.active {
  color: #fff
}

.unique-hero .day-toggle i {
  height: 1px;
  background: #ffffff5c;
  margin: 0 8px
}

.unique-hero .hero-cta {
  z-index: 4;
  right: calc(24vw - 61px);
  bottom: 15vh;
  width: 122px;
  height: 122px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 50%;
  transition: transform .45s var(--ease), background .4s
}

.unique-hero .hero-cta:hover {
  background: var(--gold)
}

.unique-hero .hero-cta svg {
  stroke: #17201b50
}

.unique-hero .scroll-cue {
  z-index: 4;
  left: auto;
  right: 4vw;
  bottom: 5vh;
  writing-mode: vertical-rl
}

.unique-hero .scroll-cue i {
  width: 1px;
  height: 45px
}

.unique-hero .scroll-meter {
  display: flex
}

.unique-hero .hero:after {
  content: '23.8103° N  /  90.4125° E';
  position: absolute;
  z-index: 3;
  right: 4vw;
  top: 15vh;
  font-size: 8px;
  letter-spacing: .2em;
  color: #ffffff90;
  writing-mode: vertical-rl
}

.unique-hero .topbar {
  mix-blend-mode: normal
}

.unique-hero .wordmark {
  color: var(--gold)
}

@media(max-width:900px) {

  .unique-hero .hero:before,
  .unique-hero .hero-media {
    inset: 12vh 12vw
  }

  .unique-hero .hero-title {
    font-size: 17vw
  }

  .unique-hero .hero-title span:first-child {
    left: 4vw;
    top: 24vh
  }

  .unique-hero .hero-title span:last-child {
    right: 4vw;
    bottom: 20vh
  }

  .unique-hero .hero-line {
    left: 5vw;
    width: 34vw
  }

  .unique-hero .hero-cta {
    right: calc(12vw - 48px);
    width: 96px;
    height: 96px
  }
}

@media(max-width:600px) {
  .unique-hero .hero {
    min-height: 700px
  }

  .unique-hero .hero:before,
  .unique-hero .hero-media {
    inset: 10vh 18px 14vh
  }

  .unique-hero .hero-media img,
  .unique-hero .hero-media img.active {
    object-position: 52% center;
    transform: scale(1.04)
  }

  .unique-hero .hero-copy>.micro {
    left: 24px;
    top: 13vh
  }

  .unique-hero .hero-title {
    font-size: 22vw
  }

  .unique-hero .hero-title span:first-child {
    left: 18px;
    top: 25vh
  }

  .unique-hero .hero-title span:last-child {
    right: 18px;
    bottom: 25vh;
    font-size: .58em
  }

  .unique-hero .hero-line {
    left: 24px;
    bottom: 16vh;
    width: 55vw
  }

  .unique-hero .hero-line>p {
    font-size: 1.15rem
  }

  .unique-hero .day-toggle {
    grid-template-columns: auto 24px auto
  }

  .unique-hero .hero-cta {
    right: 18px;
    bottom: 9vh;
    width: 88px;
    height: 88px
  }

  .unique-hero .hero:after,
  .unique-hero .scroll-cue {
    display: none
  }

  .unique-hero .scroll-meter {
    display: none
  }
}

.unique-hero .hero-line,
.unique-hero .hero-cta {
  opacity: 1 !important
}

.unique-hero .hero-media {
  clip-path: inset(0) !important
}

.unique-hero .topbar {
  height: 82px;
  padding: 0 3.2vw;
  background: linear-gradient(180deg, #0a1510d9 0%, #0a15107d 55%, transparent 100%);
  grid-template-columns: 1fr auto 1fr
}

.unique-hero .topbar:after {
  content: '';
  position: absolute;
  left: 3.2vw;
  right: 3.2vw;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, #ffffff44, transparent 25%, transparent 75%, #ffffff44)
}

.unique-hero .nav-trigger {
  color: var(--white);
  position: relative;
  z-index: 1
}

.unique-hero .nav-trigger span {
  font-weight: 500
}

.unique-hero .top-actions {
  min-width: 110px;
  justify-content: flex-end
}

.unique-hero .lang {
  color: var(--white);
  padding: 12px 0
}

.unique-hero .wordmark {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 20px #0008
}

.unique-hero .hero-media:after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid #ffffff18;
  box-shadow: inset 0 0 90px #07100c44;
  pointer-events: none
}

.unique-hero .hero-title span:first-child {
  mix-blend-mode: difference
}

.unique-hero .hero-title span:last-child {
  text-shadow: 0 8px 30px #07100c66
}

.unique-hero .hero-cta:after {
  content: '';
  position: absolute;
  inset: -9px;
  border: 1px solid #e9e5dc5c;
  border-radius: 50%;
  animation: ctaOrbit 9s linear infinite
}

.unique-hero .hero-cta:before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  top: -11px;
  left: 50%;
  box-shadow: 0 0 0 5px #b69a6a22
}

@keyframes ctaOrbit {
  to {
    transform: rotate(360deg)
  }
}

@media(max-width:600px) {
  .unique-hero .topbar {
    height: 68px;
    padding: 0 18px
  }

  .unique-hero .topbar:after {
    left: 18px;
    right: 18px
  }

  .unique-hero .top-actions {
    min-width: 48px
  }

  .unique-hero .lang {
    font-size: 0
  }

  .unique-hero .lang:after {
    content: 'EN';
    font-size: 9px
  }

  .unique-hero .wordmark {
    font-size: 15px
  }

  .unique-hero .wordmark small {
    font-size: 6px
  }

  .unique-hero .nav-trigger span {
    display: none
  }

  .unique-hero .nav-trigger {
    width: 40px;
    height: 40px
  }

  .unique-hero .nav-trigger i {
    left: 0
  }
}

@media(max-width:600px) {
  .unique-hero .lang {
    display: block !important;
    color: #fff
  }

  .unique-hero .hero-title span:last-child {
    right: 24px;
    bottom: 22vh;
    font-size: .4em;
    max-width: 72vw;
    white-space: nowrap
  }

  .unique-hero .hero-cta {
    right: 28px;
    bottom: 8vh;
    width: 80px;
    height: 80px
  }

  .unique-hero .hero-cta span {
    font-size: 7px
  }

  .unique-hero .hero-line {
    bottom: 17vh;
    width: 52vw
  }

  .unique-hero .hero-line>p {
    font-size: 1rem
  }
}

/* ERA Residence-style hero composition for the Unicorn identity */
.era-exact-hero .topbar {
  height: 86px;
  padding: 0 3.2vw;
  background: linear-gradient(180deg, #07100c82, transparent);
  mix-blend-mode: normal;
  grid-template-columns: 1fr auto 1fr
}

.era-exact-hero .wordmark {
  color: #fff;
  font-size: 18px
}

.era-exact-hero .nav-trigger,
.era-exact-hero .lang {
  color: #fff
}

.era-exact-hero .top-actions {
  min-width: 90px;
  justify-content: flex-end
}

.era-exact-hero .hero {
  height: 100svh;
  min-height: 650px;
  background: #10221a
}

.era-exact-hero .hero-media {
  inset: -5%;
  clip-path: inset(0) !important
}

.era-exact-hero .hero-media img,
.era-exact-hero .hero-media img.active {
  transform: scale(1.06);
  object-position: center 45%
}

.era-exact-hero .hero-shade {
  background: linear-gradient(180deg, #06100b75 0%, transparent 42%, #06100b91 100%)
}

.era-exact-hero .hero-copy {
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 3
}

.era-exact-hero .hero-copy>.micro {
  position: absolute;
  top: 35vh;
  order: 2;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(.8rem, 1.1vw, 1rem);
  text-transform: none;
  letter-spacing: .2em;
  color: #fff
}

.era-exact-hero .hero-title {
  position: absolute;
  top: 16vh;
  left: 50%;
  transform: translateX(-50%);
  width: 70vw;
  margin: 0;
  font: 400 clamp(5rem, 9.5vw, 9.5rem)/.72 var(--serif);
  letter-spacing: -.045em
}

.era-exact-hero .hero-title span {
  display: block;
  text-align: center !important;
  overflow: hidden
}

.era-exact-hero .hero-title span:last-child {
  font-size: .64em;
  margin-top: .12em
}

.era-exact-hero .hero-line {
  position: absolute;
  left: 50%;
  bottom: 15vh;
  transform: translateX(-50%);
  width: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px
}

.era-exact-hero .hero-line>p {
  font: 400 clamp(1.7rem, 2.6vw, 2.8rem)/1.02 var(--serif);
  margin: 0
}

.era-exact-hero .hero-line>p span:first-child {
  display: inline-block;
  margin-left: -2.4em
}

.era-exact-hero .hero-line>p span:last-child {
  display: inline-block;
  margin-left: 2.4em
}

.era-exact-hero .day-toggle {
  order: -1;
  display: flex;
  align-items: center;
  gap: 11px
}

.era-exact-hero .day-toggle button {
  border: 0;
  background: transparent;
  color: #ffffff72;
  padding: 6px 3px;
  font: italic 400 1rem var(--serif);
  cursor: pointer
}

.era-exact-hero .day-toggle button.active {
  color: #fff
}

.era-exact-hero .day-toggle i {
  width: 42px;
  height: 1px;
  background: #ffffff65
}

.era-exact-hero .hero-cta {
  z-index: 4;
  right: 5vw;
  bottom: 5.5vh;
  width: 116px;
  height: 116px;
  background: transparent;
  color: #fff;
  opacity: 1 !important
}

.era-exact-hero .hero-cta svg {
  stroke-width: .6
}

.era-exact-hero .scroll-cue {
  z-index: 4;
  left: 3.2vw;
  bottom: 5vh
}

.era-exact-hero .scroll-cue:before {
  content: '00';
  margin-right: 5px
}

.era-exact-hero .hero:after {
  content: 'DHAKA';
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 5.2vh;
  transform: translateX(-50%);
  font-size: 8px;
  letter-spacing: .35em;
  color: #fff
}

.era-exact-hero .hero-media.scene-changing {
  filter: blur(5px) saturate(.7);
  transition: filter .8s
}

.era-exact-hero .scroll-meter {
  display: flex
}

@media(max-width:600px) {
  .era-exact-hero .topbar {
    height: 68px;
    padding: 0 18px
  }

  .era-exact-hero .nav-trigger {
    width: 40px
  }

  .era-exact-hero .nav-trigger span {
    display: none
  }

  .era-exact-hero .top-actions {
    min-width: 40px
  }

  .era-exact-hero .lang {
    display: block !important;
    font-size: 0
  }

  .era-exact-hero .lang:after {
    content: 'EN';
    font-size: 8px
  }

  .era-exact-hero .wordmark {
    font-size: 15px
  }

  .era-exact-hero .wordmark small {
    font-size: 5px
  }

  .era-exact-hero .hero {
    min-height: 700px
  }

  .era-exact-hero .hero-media {
    inset: -7%
  }

  .era-exact-hero .hero-media img,
  .era-exact-hero .hero-media img.active {
    object-position: 55% center;
    transform: scale(1.08)
  }

  .era-exact-hero .hero-title {
    top: 20vh;
    width: 94vw;
    font-size: 21vw
  }

  .era-exact-hero .hero-title span:last-child {
    font-size: .6em
  }

  .era-exact-hero .hero-copy>.micro {
    top: 37vh;
    font-size: .7rem
  }

  .era-exact-hero .hero-line {
    bottom: 19vh;
    width: 90vw
  }

  .era-exact-hero .hero-line>p {
    font-size: 1.65rem
  }

  .era-exact-hero .day-toggle button {
    font-size: .85rem
  }

  .era-exact-hero .hero-cta {
    right: 20px;
    bottom: 5vh;
    width: 88px;
    height: 88px
  }

  .era-exact-hero .hero-cta span {
    font-size: 7px
  }

  .era-exact-hero .scroll-cue {
    left: 18px;
    bottom: 6vh
  }

  .era-exact-hero .hero:after {
    bottom: 6.2vh
  }

  .era-exact-hero .scroll-meter {
    display: none
  }
}

.era-exact-hero .hero-media {
  inset: -20% -8%
}

.era-exact-hero .hero-line,
.era-exact-hero .hero-cta {
  opacity: 1 !important
}

@media(max-width:600px) {
  .era-exact-hero .hero-media {
    inset: -28% -12%
  }
}

.era-exact-hero .hero {
  background-color: #10221a;
  background-image: linear-gradient(180deg, #06100b55, transparent 45%, #06100b77), url('../images/home/hero-v2.png');
  background-position: center;
  background-size: cover
}

/* Hero-to-about overlap transition */
.era-exact-hero main {
  position: relative;
  background: var(--pine)
}

.era-exact-hero .hero {
  position: sticky;
  top: 0;
  z-index: 1;
  transform-origin: center top
}

.era-exact-hero .manifesto {
  position: relative;
  z-index: 3;
  margin-top: 0;
  border-radius: 34px 34px 0 0;
  box-shadow: 0 -30px 80px #07100c42;
  overflow: hidden
}

.era-exact-hero .manifesto:before {
  content: '';
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 2px;
  background: #18201c38;
  border-radius: 2px
}

.era-exact-hero .story-stage,
.era-exact-hero .pillars,
.era-exact-hero .residence-types,
.era-exact-hero .location-scene,
.era-exact-hero .amenities-home,
.era-exact-hero .panorama,
.era-exact-hero .payment,
.era-exact-hero .closing {
  position: relative;
  z-index: 3
}

.era-exact-hero .home-footer {
  position: relative;
  z-index: 4
}

.why-arvana {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: stretch;
  gap: 7vw;
  padding: 12vw 7vw;
  overflow: hidden;
  color: var(--white)
}

.why-visual {
  position: relative;
  align-self: stretch;
  height: 100%;
  min-height: 620px;
  overflow: hidden
}

.why-visual:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, #0b15108c)
}

.why-visual img {
  position: absolute;
  inset: 0;
  transform: scale(1.12)
}

.why-visual .micro {
  position: absolute;
  z-index: 1;
  left: 28px;
  bottom: 28px;
  color: #fff
}

.why-content {
  align-self: stretch;
  height: 100%;
  padding: 0
}

.why-content .section-index {
  margin-bottom: 10vh;
  color: var(--gold)
}

.why-content h2 {
  font: 400 clamp(3.5rem, 6.5vw, 7rem)/.9 var(--serif);
  letter-spacing: -.045em;
  margin: 0
}

.why-content h2 em {
  color: var(--gold)
}

.why-lead {
  max-width: 530px;
  margin: 5vh 0 7vh;
  line-height: 1.65;
  font-size: clamp(.95rem, 1.25vw, 1.18rem);
  color: #f6f3ecbd
}

.why-list {
  border-top: 1px solid #ffffff2e;
  margin-bottom: 6vh
}

.why-list article {
  display: grid;
  grid-template-columns: 52px 1fr;
  padding: 24px 0;
  border-bottom: 1px solid #ffffff2e
}

.why-list article>span {
  font-size: 9px;
  padding-top: 7px;
  color: var(--gold)
}

.why-list h3 {
  font: 400 clamp(1.45rem, 2.15vw, 2.25rem)/1.1 var(--serif);
  margin: 0 0 8px;
  color: var(--white)
}

.why-list p {
  max-width: 480px;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: #f6f3ec9c
}

.why-content .text-link {
  color: var(--white)
}

@media(max-width:900px) {
  .why-arvana {
    grid-template-columns: 1fr;
    padding: 100px 7vw;
    gap: 70px
  }

  .why-visual {
    height: 70vh;
    min-height: 520px
  }

  .why-content {
    height: auto
  }

  .why-content .section-index {
    margin-bottom: 55px
  }
}

@media(max-width:600px) {
  .why-arvana {
    padding: 80px 20px;
    gap: 55px
  }

  .why-visual {
    height: 62vh;
    min-height: 430px
  }

  .why-content h2 {
    font-size: 15vw
  }

  .why-lead {
    margin: 35px 0 45px
  }

  .why-list article {
    grid-template-columns: 36px 1fr
  }

  .why-list p {
    font-size: 11px
  }
}

@media(max-width:600px) {
  .era-exact-hero .manifesto {
    border-radius: 22px 22px 0 0
  }
}

.era-exact-hero .hero-overlap-wrap {
  position: relative;
  z-index: 1;
  background: var(--pine)
}

.era-exact-hero .manifesto {
  background: var(--paper);
  color: var(--ink)
}

.era-exact-hero .manifesto:after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(135deg, #f1eee7 0%, #e4dfd4 58%, #d8d2c5 100%);
  opacity: .98
}

.era-exact-hero .manifesto h2,
.era-exact-hero .manifesto p,
.era-exact-hero .manifesto a,
.era-exact-hero .manifesto .section-index {
  position: relative;
  z-index: 1
}

/* Structured about-panel layout */
.era-exact-hero .manifesto {
  min-height: 100svh;
  padding: clamp(72px, 8vw, 125px) 7vw clamp(70px, 7vw, 110px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 6vw;
  align-items: start
}

.era-exact-hero .manifesto>.section-index {
  grid-column: 1;
  grid-row: 1
}

.era-exact-hero .manifesto-side {
  position: static;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  text-align: right;
  margin: 0;
  max-width: 260px;
  font-size: 11px;
  line-height: 1.55
}

.era-exact-hero .manifesto>h2 {
  grid-column: 1/-1;
  grid-row: 2;
  align-self: center;
  margin: clamp(80px, 10vh, 135px) 0;
  font-size: clamp(4.2rem, 8.2vw, 8.8rem);
  line-height: .88;
  max-width: 1400px
}

.era-exact-hero .manifesto-bottom {
  grid-column: 1/-1;
  grid-row: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 6vw;
  align-items: end
}

.era-exact-hero .manifesto-bottom>p {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  max-width: 520px;
  font-size: clamp(1rem, 1.25vw, 1.22rem);
  line-height: 1.55
}

.era-exact-hero .manifesto-bottom>.text-link {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  margin: 0
}

.era-exact-hero .manifesto h2 em {
  color: #788276
}

.era-exact-hero .manifesto:before {
  top: 18px
}

@media(max-width:700px) {
  .era-exact-hero .manifesto {
    min-height: auto;
    padding: 75px 20px 85px;
    display: block
  }

  .era-exact-hero .manifesto-side {
    display: none
  }

  .era-exact-hero .manifesto>h2 {
    font-size: clamp(3.4rem, 15vw, 5.5rem);
    line-height: .9;
    margin: 100px 0 80px
  }

  .era-exact-hero .manifesto-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 45px
  }

  .era-exact-hero .manifesto-bottom>p {
    order: 1;
    font-size: 1rem
  }

  .era-exact-hero .manifesto-bottom>.text-link {
    order: 2
  }
}

/* Floating pill header */
.era-exact-hero .topbar {
  top: 18px;
  left: 20px;
  right: auto;
  width: min(640px, calc(100vw - 40px));
  height: 58px;
  padding: 0 9px 0 20px;
  border-radius: 32px;
  background: rgba(21, 34, 29, .92);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 10px 35px rgba(6, 15, 11, .2);
  backdrop-filter: blur(16px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  mix-blend-mode: normal
}

.era-exact-hero .topbar:after {
  display: none
}

.era-exact-hero .nav-trigger {
  justify-self: start;
  color: #f1eee7
}

.era-exact-hero .nav-trigger i {
  width: 40px;
  background: #809177
}

.era-exact-hero .nav-trigger span {
  margin-left: 52px;
  font-size: 11px
}

.era-exact-hero .wordmark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--gold);
  text-shadow: none
}

.era-exact-hero .wordmark svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: square
}

.era-exact-hero .top-actions {
  justify-self: end;
  min-width: 0
}

.header-inquire {
  width: 140px;
  height: 44px;
  padding: 0 15px 0 20px;
  border: 1px solid #718269;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #f1eee7;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .08em;
  transition: .4s var(--ease)
}

.header-inquire i {
  font-style: normal;
  color: #8ea082;
  font-size: 19px;
  transition: .4s var(--ease)
}

.header-inquire:hover {
  background: #718269;
  color: #fff
}

.header-inquire:hover i {
  color: #fff;
  transform: translateX(4px)
}

@media(max-width:700px) {
  .era-exact-hero .topbar {
    top: 12px;
    left: 12px;
    width: calc(100vw - 24px);
    height: 54px;
    padding-left: 15px
  }

  .era-exact-hero .nav-trigger i {
    width: 28px
  }

  .era-exact-hero .nav-trigger span {
    margin-left: 38px;
    font-size: 9px
  }

  .era-exact-hero .wordmark {
    width: 34px;
    height: 34px
  }

  .era-exact-hero .wordmark svg {
    width: 30px;
    height: 30px
  }

  .header-inquire {
    width: 105px;
    height: 40px;
    padding: 0 12px 0 15px;
    font-size: 9px
  }

  .header-inquire i {
    font-size: 15px
  }
}

@media(max-width:410px) {
  .era-exact-hero .topbar {
    grid-template-columns: 1fr 38px 1fr
  }

  .era-exact-hero .nav-trigger span {
    display: none
  }

  .era-exact-hero .nav-trigger {
    width: 36px
  }

  .header-inquire {
    width: 92px
  }
}

.era-exact-hero .topbar {
  left: 50%;
  right: auto;
  transform: translateX(-50%)
}

@media(max-width:700px) {
  .era-exact-hero .topbar {
    left: 50%;
    right: auto;
    transform: translateX(-50%)
  }
}

/* Distinctive architecture chapter */
.era-exact-hero .story-stage {
  height: 190vh;
  background: #102219
}

.era-exact-hero .story-sticky {
  background: #102219;
  color: #f2eee6;
  isolation: isolate
}

.era-exact-hero .story-sticky:before {
  content: '03  /  ARCHITECTURE';
  position: absolute;
  z-index: 5;
  right: 2.2vw;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 8px;
  letter-spacing: .24em;
  color: #aeb9ad
}

.era-exact-hero .story-sticky:after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 5vw;
  right: 5vw;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, #ffffff10, transparent 36%, transparent 70%, #ffffff10)
}

.era-exact-hero .story-image {
  inset: auto 6vw auto auto;
  top: 16vh;
  width: 38vw;
  height: 68vh;
  overflow: hidden;
  z-index: 2
}

.era-exact-hero .story-image:after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid #ffffff20;
  box-shadow: inset 0 0 80px #07100c4d
}

.era-exact-hero .story-image img {
  transform: scale(1.12);
  filter: saturate(.78) contrast(1.02)
}

.era-exact-hero .story-overlay {
  z-index: 3;
  background: linear-gradient(90deg, #102219 0%, #102219b5 38%, transparent 64%);
  pointer-events: none
}

.era-exact-hero .story-copy {
  z-index: 4;
  left: 5vw;
  top: 19vh;
  max-width: 76vw
}

.era-exact-hero .story-copy>.micro {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  color: #b69a6a
}

.era-exact-hero .story-copy>.micro:after {
  content: '';
  width: 72px;
  height: 1px;
  background: currentColor
}

.era-exact-hero .story-copy h2 {
  font-size: clamp(5rem, 10.5vw, 11rem);
  line-height: .78;
  letter-spacing: -.055em;
  margin: 9vh 0 0;
  max-width: 78vw
}

.era-exact-hero .story-copy h2 em {
  display: block;
  margin-left: 14vw;
  color: #d8d2c5
}

.era-exact-hero .story-copy p {
  position: absolute;
  left: 48vw;
  top: 61vh;
  width: 25vw;
  max-width: 380px;
  margin: 0;
  color: #d5d8d2;
  font-size: 12px;
  line-height: 1.7
}

.era-exact-hero .story-copy:after {
  content: 'VIEW';
  position: absolute;
  left: 38vw;
  top: 48vh;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e9e5dc;
  color: #172019;
  font-size: 8px;
  letter-spacing: .18em;
  box-shadow: 0 0 0 1px #e9e5dc55, 0 12px 45px #07100c4d;
  transition: .5s var(--ease)
}

.era-exact-hero .story-copy:hover:after {
  transform: scale(1.1);
  background: #b69a6a
}

.era-exact-hero .story-mark {
  right: auto;
  left: -2vw;
  bottom: -22vh;
  font-size: 58vw;
  color: #ffffff025;
  z-index: 0
}

@media(max-width:800px) {
  .era-exact-hero .story-stage {
    height: 150vh
  }

  .era-exact-hero .story-image {
    top: 24vh;
    right: 20px;
    width: 76vw;
    height: 53vh
  }

  .era-exact-hero .story-overlay {
    background: linear-gradient(180deg, #102219 0%, transparent 35%, #102219d9 80%)
  }

  .era-exact-hero .story-copy {
    left: 20px;
    right: 20px;
    top: 13vh;
    max-width: none
  }

  .era-exact-hero .story-copy h2 {
    font-size: 18vw;
    max-width: none;
    margin-top: 5vh
  }

  .era-exact-hero .story-copy h2 em {
    margin-left: 12vw
  }

  .era-exact-hero .story-copy p {
    left: 0;
    top: 70vh;
    width: 78vw;
    font-size: 11px
  }

  .era-exact-hero .story-copy:after {
    left: auto;
    right: 2vw;
    top: 55vh;
    width: 76px;
    height: 76px
  }

  .era-exact-hero .story-sticky:before {
    right: 8px
  }

  .era-exact-hero .story-mark {
    bottom: -8vh
  }
}

.story-stage {
  display: none !important
}

/* Signature architecture — original section */
.signature-section {
  height: 120vh;
  min-height: 820px;
  position: relative;
  overflow: hidden;
  background: #0d1d16;
  color: #f1eee7;
  isolation: isolate
}

.signature-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#ffffff0a 1px, transparent 1px), linear-gradient(90deg, #ffffff0a 1px, transparent 1px);
  background-size: 8.333vw 8.333vw;
  mask-image: linear-gradient(90deg, #000, transparent 70%)
}

.signature-label {
  position: absolute;
  z-index: 3;
  left: 6vw;
  top: 10vh;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: #b69a6a
}

.signature-label i {
  width: 70px;
  height: 1px;
  background: currentColor
}

.signature-title {
  position: absolute;
  z-index: 4;
  left: 6vw;
  top: 23vh;
  max-width: 78vw
}

.signature-title h2 {
  font: 400 clamp(5rem, 10.7vw, 11rem)/.76 var(--serif);
  letter-spacing: -.055em;
  margin: 0
}

.signature-title h2 span {
  display: block
}

.signature-title h2 span:last-child {
  margin-left: 20vw;
  color: #d8d2c5
}

.signature-title>p {
  margin: 7vh 0 0;
  width: 27vw;
  max-width: 420px;
  font-size: 13px;
  line-height: 1.65;
  color: #bdc3bc
}

.signature-portal {
  position: absolute;
  z-index: 2;
  right: 6vw;
  top: 13vh;
  width: 37vw;
  height: 74vh;
  margin: 0;
  overflow: hidden;
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%)
}

.signature-portal:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, #07100ca8)
}

.signature-portal img {
  transform: scale(1.08);
  object-position: center
}

.signature-portal figcaption {
  position: absolute;
  z-index: 2;
  left: 4vw;
  right: 4vw;
  bottom: 3vh;
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .18em
}

.signature-stats {
  position: absolute;
  z-index: 4;
  left: 34vw;
  bottom: 9vh;
  display: flex;
  border-top: 1px solid #ffffff2e
}

.signature-stats article {
  width: 140px;
  padding: 18px 15px 0 0;
  border-right: 1px solid #ffffff24
}

.signature-stats strong {
  display: block;
  font: 400 2.5rem var(--serif);
  color: #b69a6a
}

.signature-stats p {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .13em;
  line-height: 1.5
}

.signature-link {
  position: absolute;
  z-index: 5;
  right: calc(6vw + 31vw);
  bottom: 10vh;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: #e9e5dc;
  color: #14231c;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .14em
}

.signature-link i {
  position: absolute;
  right: 16px;
  top: 13px;
  font-style: normal
}

.signature-word {
  position: absolute;
  z-index: 0;
  left: -2vw;
  bottom: -.12em;
  font: 400 8.2vw/1 var(--serif);
  white-space: nowrap;
  color: #ffffff035;
  letter-spacing: .04em
}

@media(max-width:800px) {
  .signature-section {
    height: 115vh;
    min-height: 760px
  }

  .signature-label {
    left: 20px;
    top: 9vh
  }

  .signature-title {
    left: 20px;
    right: 20px;
    top: 18vh;
    max-width: none
  }

  .signature-title h2 {
    font-size: 18vw;
    line-height: .8
  }

  .signature-title h2 span:last-child {
    margin-left: 10vw
  }

  .signature-title>p {
    width: 72vw;
    margin-top: 4vh;
    font-size: 11px
  }

  .signature-portal {
    right: 20px;
    top: 43vh;
    width: 78vw;
    height: 47vh
  }

  .signature-stats {
    left: 20px;
    bottom: 4vh
  }

  .signature-stats article {
    width: 90px
  }

  .signature-stats strong {
    font-size: 1.8rem
  }

  .signature-stats p {
    font-size: 7px
  }

  .signature-link {
    right: 18px;
    bottom: 7vh;
    width: 82px;
    height: 82px;
    font-size: 7px
  }

  .signature-portal figcaption {
    display: none
  }

  .signature-word {
    font-size: 13vw
  }
}

/* Signature section layout correction */
@media(min-width:801px) {
  .signature-section {
    height: 100svh;
    min-height: 760px
  }

  .signature-label {
    left: 6vw;
    top: 8vh
  }

  .signature-title {
    left: 6vw;
    top: 18vh;
    max-width: 58vw
  }

  .signature-title h2 {
    font-size: clamp(5rem, 7.4vw, 8.8rem);
    line-height: .82
  }

  .signature-title h2 span:last-child {
    margin-left: 16vw;
    white-space: nowrap
  }

  .signature-title>p {
    position: absolute;
    left: 0;
    top: 42vh;
    width: 24vw;
    margin: 0
  }

  .signature-portal {
    right: 7vw;
    top: 11vh;
    width: 35vw;
    height: 66vh
  }

  .signature-stats {
    left: 6vw;
    bottom: 7vh
  }

  .signature-stats article {
    width: 140px
  }

  .signature-link {
    right: 40vw;
    bottom: 7vh;
    width: 100px;
    height: 100px
  }

  .signature-word {
    bottom: -.2em;
    font-size: 7.5vw
  }
}

@media(min-width:801px) and (max-height:820px) {
  .signature-title {
    top: 16vh
  }

  .signature-title h2 {
    font-size: 6.6vw
  }

  .signature-title>p {
    top: 38vh
  }

  .signature-portal {
    top: 10vh;
    height: 62vh
  }

  .signature-stats,
  .signature-link {
    bottom: 5vh
  }
}

.signature-word {
  display: none
}

.signature-stats {
  background: rgba(10, 25, 18, .7);
  backdrop-filter: blur(10px);
  border: 1px solid #ffffff18;
  padding: 0 0 16px 18px
}

.signature-stats article {
  padding-top: 16px
}

.signature-stats article:last-child {
  border-right: 0
}

.signature-stats p {
  margin: 6px 0 0
}

.signature-link {
  box-shadow: 0 14px 45px #06100c66
}

.signature-link:hover {
  background: var(--gold);
  transform: scale(1.06)
}

@media(min-width:801px) {
  .signature-stats {
    bottom: 6vh
  }

  .signature-link {
    bottom: 8vh;
    right: 40vw
  }
}

.best-properties {
  position: relative;
  z-index: 3;
  padding: 12vw 7vw;
  color: var(--white)
}

.best-head {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  align-items: end;
  gap: 6vw;
  margin-bottom: 9vh
}

.best-head .section-index {
  margin-bottom: 8vh;
  color: var(--gold)
}

.best-head h2 {
  font: 400 clamp(4rem, 8vw, 8.5rem)/.86 var(--serif);
  letter-spacing: -.05em;
  margin: 0
}

.best-head h2 em {
  color: var(--gold)
}

.best-head-copy {
  padding-bottom: 1vh
}

.best-head-copy p {
  max-width: 430px;
  line-height: 1.65;
  margin: 0 0 5vh;
  color: #f6f3ecbd
}

.property-list {
  border-top: 1px solid #ffffff2e
}

.property-item {
  border-bottom: 1px solid #ffffff2e;
  padding: 3.5vh 0
}

.property-item>a {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 5vw
}

.property-item:nth-child(even)>a {
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr)
}

.property-item:nth-child(even) .property-image {
  order: 2
}

.property-item:nth-child(even) .property-info {
  order: 1
}

.property-image {
  position: relative;
  height: 42vh;
  min-height: 330px;
  overflow: hidden
}

.property-image img {
  transform: scale(1.06);
  transition: transform 1s var(--ease)
}

.property-image>span {
  position: absolute;
  left: 18px;
  top: 18px;
  padding: 8px 12px;
  background: #14231ce8;
  color: var(--white);
  border: 1px solid #ffffff38;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .16em
}

.property-info {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end
}

.property-info>span {
  grid-column: 1/-1;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--gold);
  margin-bottom: 5vh
}

.property-info h3 {
  font: 400 clamp(2.8rem, 5vw, 5.6rem)/.9 var(--serif);
  letter-spacing: -.04em;
  margin: 0
}

.property-info p {
  grid-column: 1;
  margin: 18px 0 0;
  font-size: 12px;
  color: #f6f3ec9c
}

.property-info i {
  grid-column: 2;
  grid-row: 2/4;
  align-self: end;
  font-style: normal;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .14em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 8px
}

.property-item:hover .property-image img {
  transform: scale(1.015)
}

@media(max-width:900px) {
  .best-properties {
    padding: 100px 7vw
  }

  .best-head {
    grid-template-columns: 1fr
  }

  .property-item>a,
  .property-item:nth-child(even)>a {
    grid-template-columns: 1fr
  }

  .property-item:nth-child(even) .property-image {
    order: 0
  }

  .property-item:nth-child(even) .property-info {
    order: 0
  }

  .property-image {
    height: 55vh
  }

  .property-info>span {
    margin-bottom: 25px
  }

  .property-info i {
    grid-row: auto
  }
}

@media(max-width:600px) {
  .best-properties {
    padding: 80px 20px
  }

  .best-head {
    margin-bottom: 55px
  }

  .best-head .section-index {
    margin-bottom: 45px
  }

  .best-head h2 {
    font-size: 17vw
  }

  .property-item {
    padding: 30px 0
  }

  .property-image {
    height: 46vh;
    min-height: 320px
  }

  .property-info {
    grid-template-columns: 1fr
  }

  .property-info h3 {
    font-size: 12vw
  }

  .property-info i {
    grid-column: 1;
    margin-top: 28px;
    width: max-content
  }
}

.home-footer {
  position: relative;
  z-index: 4;
  overflow: hidden;
  background: #08110d;
  color: var(--white);
  padding: 11vw 7vw 32px
}

.footer-invite {
  position: relative;
  max-width: 900px;
  padding-bottom: 11vw
}

.footer-invite>.micro {
  color: var(--gold)
}

.footer-invite h2 {
  font: 400 clamp(4.7rem, 10vw, 11rem)/.78 var(--serif);
  letter-spacing: -.055em;
  margin: 7vh 0 5vh
}

.footer-invite h2 em {
  color: var(--gold)
}

.footer-invite>p {
  max-width: 370px;
  margin-left: 30%;
  line-height: 1.6;
  color: #f6f3ec99
}

.footer-visit {
  position: absolute;
  right: -22vw;
  bottom: 10vw;
  width: 170px;
  height: 170px;
  border: 1px solid #ffffff55;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .14em;
  line-height: 1.6
}

.footer-visit b {
  position: absolute;
  right: 19px;
  top: 18px;
  font-size: 16px;
  font-weight: 300
}

.footer-orbit {
  position: absolute;
  right: 7vw;
  top: 8vw;
  width: 27vw;
  aspect-ratio: 1;
  border: 1px solid #ffffff1f;
  border-radius: 50%
}

.footer-orbit:before,
.footer-orbit:after {
  content: '';
  position: absolute;
  border: 1px solid #ffffff12;
  border-radius: 50%
}

.footer-orbit:before {
  inset: 13%
}

.footer-orbit:after {
  inset: 30%
}

.footer-orbit i {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  left: 8%;
  top: 24%;
  box-shadow: 0 0 0 7px #b69a6a18
}

.footer-orbit span {
  position: absolute;
  right: 5%;
  bottom: 22%;
  font-size: 8px;
  letter-spacing: .15em;
  line-height: 1.7;
  color: #ffffff70
}

.footer-nav {
  display: grid;
  grid-template-columns: 1.2fr 1fr .7fr;
  gap: 7vw;
  border-top: 1px solid #ffffff26;
  padding: 7vh 0 8vh
}

.home-footer .footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px
}

.home-footer .footer-links>span {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--gold);
  margin-bottom: 20px
}

.home-footer .footer-links a,
.home-footer .footer-links p {
  font-size: 12px;
  line-height: 1.6;
  margin: 0
}

.home-footer .footer-links a {
  transition: .35s
}

.home-footer .footer-links a:hover {
  color: var(--gold);
  transform: translateX(6px)
}

.home-footer .footer-links a i {
  display: inline-block;
  width: 32px;
  font-style: normal;
  font-size: 8px;
  color: #ffffff55
}

.footer-wordmark {
  font: 400 18.1vw/.68 var(--serif);
  letter-spacing: -.065em;
  white-space: nowrap;
  margin-left: -.55vw;
  color: #f6f3ec;
  transform-origin: left bottom
}

.home-footer .footer-bottom {
  border-top: 1px solid #ffffff26;
  margin-top: 7vh;
  padding-top: 25px;
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: 4vw;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #ffffff8c
}

.home-footer .to-top {
  border: 0;
  background: none;
  color: var(--white);
  padding: 0;
  cursor: pointer
}

@media(max-width:900px) {
  .footer-orbit {
    width: 38vw;
    opacity: .65
  }

  .footer-invite {
    max-width: 70%
  }

  .footer-invite>p {
    margin-left: 0
  }

  .footer-visit {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 45px
  }

  .footer-nav {
    grid-template-columns: repeat(2, 1fr)
  }

  .footer-wordmark {
    font-size: 18vw
  }

  .home-footer .footer-bottom {
    grid-template-columns: 1fr auto
  }

  .home-footer .footer-bottom span:nth-child(2) {
    display: none
  }
}

@media(max-width:600px) {
  .home-footer {
    padding: 90px 20px 25px
  }

  .footer-orbit {
    right: -18vw;
    top: 45px;
    width: 70vw
  }

  .footer-invite {
    max-width: none;
    padding-bottom: 90px
  }

  .footer-invite h2 {
    font-size: 19vw;
    margin: 55px 0 35px
  }

  .footer-invite>p {
    max-width: 260px
  }

  .footer-visit {
    width: 135px;
    height: 135px
  }

  .footer-nav {
    grid-template-columns: 1fr 1fr;
    gap: 55px 25px
  }

  .footer-nav .footer-links:first-child {
    grid-column: 1/-1
  }

  .footer-wordmark {
    font-size: 18.5vw;
    margin-top: 40px
  }

  .home-footer .footer-bottom {
    gap: 18px
  }

  .home-footer .footer-bottom a {
    display: none
  }
}

.why-arvana {
  padding-top: 8vw;
  padding-bottom: 8vw
}

.best-properties {
  padding-top: 8vw;
  padding-bottom: 8vw
}

.best-head {
  margin-bottom: 6vh
}

.home-footer {
  padding-top: 8vw
}

.footer-invite {
  padding-bottom: 7vw
}

.footer-nav {
  padding-top: 5vh;
  padding-bottom: 5vh
}

@media(max-width:900px) {

  .why-arvana,
  .best-properties {
    padding-top: 72px;
    padding-bottom: 72px
  }

  .home-footer {
    padding-top: 72px
  }

  .footer-invite {
    padding-bottom: 65px
  }
}

@media(max-width:600px) {

  .why-arvana,
  .best-properties {
    padding-top: 60px;
    padding-bottom: 60px
  }

  .home-footer {
    padding-top: 65px
  }

  .best-head {
    margin-bottom: 42px
  }

  .footer-invite {
    padding-bottom: 55px
  }

  .footer-nav {
    padding-top: 42px;
    padding-bottom: 42px
  }
}

.about-page {
  background: var(--pine)
}

.about-hero {
  position: relative;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  color: var(--white)
}

.about-hero-media,
.about-hero-shade {
  position: absolute;
  inset: 0
}

.about-hero-media img {
  transform: scale(1.08)
}

.about-hero-shade {
  background: linear-gradient(180deg, #07100c6b 0%, #07100c17 38%, #07100cb8 100%)
}

.about-hero-copy {
  position: absolute;
  left: 7vw;
  right: 7vw;
  top: 22vh
}

.about-hero-copy h1 {
  font: 400 clamp(5rem, 11.5vw, 12rem)/.78 var(--serif);
  letter-spacing: -.055em;
  margin: 5vh 0
}

.about-hero-copy h1 span,
.about-hero-copy h1 em {
  display: block
}

.about-hero-copy h1 em {
  text-align: right;
  color: #ddd3bc
}

.about-hero-copy p {
  margin-left: auto;
  max-width: 360px;
  font-size: clamp(.95rem, 1.2vw, 1.15rem);
  line-height: 1.6
}

.about-belief {
  position: relative;
  z-index: 2;
  padding: 10vw 7vw;
  background: var(--paper)
}

.about-belief-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 7vw;
  align-items: end;
  margin-top: 13vh
}

.about-belief h2,
.about-values-head h2 {
  font: 400 clamp(4rem, 7.8vw, 8.5rem)/.88 var(--serif);
  letter-spacing: -.05em;
  margin: 0
}

.about-belief h2 em,
.about-values-head h2 em {
  color: var(--sage)
}

.about-belief-grid>div {
  padding-bottom: 1vh
}

.about-belief-grid p {
  line-height: 1.7;
  color: #18201ca6
}

.about-belief-grid .about-lead {
  font-size: clamp(1.15rem, 1.55vw, 1.45rem);
  color: var(--ink);
  margin-bottom: 5vh
}

.about-story {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 110vh;
  background: var(--pine);
  color: var(--white)
}

.about-story-image {
  min-height: 750px;
  overflow: hidden
}

.about-story-image img {
  transform: scale(1.1)
}

.about-story-copy {
  padding: 11vw 8vw
}

.about-story-copy .section-index {
  color: var(--gold);
  margin-bottom: 12vh
}

.about-story-copy h2 {
  font: 400 clamp(4rem, 7vw, 7.5rem)/.86 var(--serif);
  letter-spacing: -.045em;
  margin: 0 0 6vh
}

.about-story-copy>p {
  max-width: 480px;
  line-height: 1.7;
  color: #f6f3ecad
}

.about-story-copy blockquote {
  font: 400 clamp(1.7rem, 2.7vw, 3rem)/1.2 var(--serif);
  margin: 10vh 0 0;
  padding-top: 5vh;
  border-top: 1px solid #ffffff32;
  color: var(--gold)
}

.about-values {
  position: relative;
  z-index: 2;
  padding: 10vw 7vw 12vw;
  background: var(--paper)
}

.about-values-head {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  align-items: end;
  margin-bottom: 10vh
}

.about-values-head .section-index {
  align-self: start
}

.about-value-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #18201c45
}

.about-value-list article {
  min-height: 360px;
  padding: 30px 25px 25px 0;
  border-right: 1px solid #18201c35;
  display: flex;
  flex-direction: column
}

.about-value-list article:last-child {
  border-right: 0;
  padding-left: 25px
}

.about-value-list article:not(:first-child) {
  padding-left: 25px
}

.about-value-list span {
  font-size: 9px;
  color: var(--sage)
}

.about-value-list h3 {
  font: 400 clamp(2rem, 3.5vw, 4rem) var(--serif);
  margin: 7vh 0 0
}

.about-value-list p {
  margin-top: auto;
  font-size: 12px;
  line-height: 1.6;
  color: #18201ca6
}

.about-vision {
  position: relative;
  z-index: 2;
  height: 110vh;
  min-height: 750px;
  color: var(--white);
  overflow: hidden
}

.about-vision-media,
.about-vision-media:after {
  position: absolute;
  inset: 0
}

.about-vision-media:after {
  content: '';
  background: linear-gradient(90deg, #07100cdb, transparent 75%)
}

.about-vision-media img {
  transform: scale(1.08)
}

.about-vision-copy {
  position: absolute;
  left: 7vw;
  top: 19vh;
  max-width: 780px
}

.about-vision-copy h2 {
  font: 400 clamp(4.2rem, 8vw, 8.5rem)/.85 var(--serif);
  letter-spacing: -.05em;
  margin: 5vh 0
}

.about-vision-copy h2 em {
  color: #ddd3bc
}

.about-vision-copy p {
  max-width: 420px;
  line-height: 1.7;
  color: #ffffffb5
}

.about-footer {
  position: relative;
  z-index: 3;
  background: #08110d;
  color: var(--white);
  padding: 8vw 7vw 35px
}

.about-footer-mark {
  font: 400 18vw/.75 var(--serif);
  letter-spacing: -.06em;
  border-bottom: 1px solid #ffffff2b;
  padding-bottom: 7vh
}

.about-footer>div:not(:first-child) {
  display: flex;
  justify-content: space-between;
  padding-top: 28px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .15em
}

.about-footer>div:last-child {
  margin-top: 8vh;
  border-top: 1px solid #ffffff2b;
  color: #ffffff7a
}

@media(max-width:900px) {

  .about-belief-grid,
  .about-values-head {
    grid-template-columns: 1fr
  }

  .about-story {
    grid-template-columns: 1fr
  }

  .about-story-image {
    height: 75vh;
    min-height: 0
  }

  .about-value-list {
    grid-template-columns: 1fr 1fr
  }

  .about-value-list article:nth-child(2) {
    border-right: 0
  }

  .about-value-list article {
    min-height: 280px;
    border-bottom: 1px solid #18201c35
  }
}

@media(max-width:600px) {
  .about-hero-copy {
    left: 20px;
    right: 20px;
    top: 24vh
  }

  .about-hero-copy h1 {
    font-size: 18vw
  }

  .about-hero-copy h1 em {
    text-align: left
  }

  .about-belief,
  .about-values {
    padding: 80px 20px
  }

  .about-belief-grid {
    margin-top: 75px
  }

  .about-belief h2,
  .about-values-head h2 {
    font-size: 15vw
  }

  .about-story-copy {
    padding: 80px 20px
  }

  .about-story-copy .section-index {
    margin-bottom: 65px
  }

  .about-story-copy h2 {
    font-size: 16vw
  }

  .about-value-list {
    grid-template-columns: 1fr
  }

  .about-value-list article,
  .about-value-list article:not(:first-child),
  .about-value-list article:last-child {
    min-height: 230px;
    padding: 25px 0;
    border-right: 0
  }

  .about-value-list h3 {
    margin-top: 35px
  }

  .about-vision-copy {
    left: 20px;
    right: 20px
  }

  .about-vision-copy h2 {
    font-size: 17vw
  }

  .about-footer {
    padding: 75px 20px 25px
  }

  .about-footer-mark {
    font-size: 18vw
  }

  .about-footer>div:not(:first-child) {
    gap: 20px;
    flex-wrap: wrap
  }
}

.about-page {
  background: var(--pine)
}

.about-hero {
  position: relative;
  height: 500px;
  min-height: 500px;
  overflow: hidden;
  color: var(--white)
}

.about-hero-media,
.about-hero-shade {
  position: absolute;
  inset: 0
}

.about-hero-media img {
  transform: scale(1.08)
}

.about-hero-shade {
  background: linear-gradient(105deg, #07130ddd 0%, #173528a6 42%, #8b744f59 72%, #07100ca8 100%), linear-gradient(180deg, #07100c42 0%, transparent 42%, #07100cbf 100%);
  mix-blend-mode: multiply
}

.about-hero-copy {
  position: absolute;
  left: 7vw;
  right: 7vw;
  top: 125px
}

.about-hero-copy h1 {
  font: 400 clamp(4rem, 8.2vw, 8.5rem)/.78 var(--serif);
  letter-spacing: -.055em;
  margin: 28px 0
}

.about-hero-copy h1 span,
.about-hero-copy h1 em {
  display: block
}

.about-hero-copy h1 em {
  text-align: right;
  color: #ddd3bc
}

.about-hero-copy p {
  margin-left: auto;
  max-width: 360px;
  font-size: clamp(.95rem, 1.2vw, 1.15rem);
  line-height: 1.6
}

.about-belief {
  position: relative;
  z-index: 2;
  padding: 10vw 7vw;
  background: var(--paper)
}

.about-belief-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 7vw;
  align-items: end;
  margin-top: 13vh
}

.about-belief h2,
.about-values-head h2 {
  font: 400 clamp(4rem, 7.8vw, 8.5rem)/.88 var(--serif);
  letter-spacing: -.05em;
  margin: 0
}

.about-belief h2 em,
.about-values-head h2 em {
  color: var(--sage)
}

.about-belief-grid>div {
  padding-bottom: 1vh
}

.about-belief-grid p {
  line-height: 1.7;
  color: #18201ca6
}

.about-belief-grid .about-lead {
  font-size: clamp(1.15rem, 1.55vw, 1.45rem);
  color: var(--ink);
  margin-bottom: 5vh
}

.about-story {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 110vh;
  background: var(--pine);
  color: var(--white)
}

.about-story-image {
  min-height: 750px;
  overflow: hidden
}

.about-story-image img {
  transform: scale(1.1)
}

.about-story-copy {
  padding: 11vw 8vw
}

.about-story-copy .section-index {
  color: var(--gold);
  margin-bottom: 12vh
}

.about-story-copy h2 {
  font: 400 clamp(4rem, 7vw, 7.5rem)/.86 var(--serif);
  letter-spacing: -.045em;
  margin: 0 0 6vh
}

.about-story-copy>p {
  max-width: 480px;
  line-height: 1.7;
  color: #f6f3ecad
}

.about-story-copy blockquote {
  font: 400 clamp(1.7rem, 2.7vw, 3rem)/1.2 var(--serif);
  margin: 10vh 0 0;
  padding-top: 5vh;
  border-top: 1px solid #ffffff32;
  color: var(--gold)
}

.about-values {
  position: relative;
  z-index: 2;
  padding: 10vw 7vw 12vw;
  background: var(--paper)
}

.about-values-head {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  align-items: end;
  margin-bottom: 10vh
}

.about-values-head .section-index {
  align-self: start
}

.about-value-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #18201c45
}

.about-value-list article {
  min-height: 360px;
  padding: 30px 25px 25px 0;
  border-right: 1px solid #18201c35;
  display: flex;
  flex-direction: column
}

.about-value-list article:last-child {
  border-right: 0;
  padding-left: 25px
}

.about-value-list article:not(:first-child) {
  padding-left: 25px
}

.about-value-list span {
  font-size: 9px;
  color: var(--sage)
}

.about-value-list h3 {
  font: 400 clamp(2rem, 3.5vw, 4rem) var(--serif);
  margin: 7vh 0 0
}

.about-value-list p {
  margin-top: auto;
  font-size: 12px;
  line-height: 1.6;
  color: #18201ca6
}

.about-vision {
  position: relative;
  z-index: 2;
  height: 110vh;
  min-height: 750px;
  color: var(--white);
  overflow: hidden
}

.about-vision-media,
.about-vision-media:after {
  position: absolute;
  inset: 0
}

.about-vision-media:after {
  content: '';
  background: linear-gradient(90deg, #07100cdb, transparent 75%)
}

.about-vision-media img {
  transform: scale(1.08)
}

.about-vision-copy {
  position: absolute;
  left: 7vw;
  top: 19vh;
  max-width: 780px
}

.about-vision-copy h2 {
  font: 400 clamp(4.2rem, 8vw, 8.5rem)/.85 var(--serif);
  letter-spacing: -.05em;
  margin: 5vh 0
}

.about-vision-copy h2 em {
  color: #ddd3bc
}

.about-vision-copy p {
  max-width: 420px;
  line-height: 1.7;
  color: #ffffffb5
}

.about-footer {
  position: relative;
  z-index: 3;
  background: #08110d;
  color: var(--white);
  padding: 8vw 7vw 35px
}

.about-footer-mark {
  font: 400 18vw/.75 var(--serif);
  letter-spacing: -.06em;
  border-bottom: 1px solid #ffffff2b;
  padding-bottom: 7vh
}

.about-footer>div:not(:first-child) {
  display: flex;
  justify-content: space-between;
  padding-top: 28px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .15em
}

.about-footer>div:last-child {
  margin-top: 8vh;
  border-top: 1px solid #ffffff2b;
  color: #ffffff7a
}

@media(max-width:900px) {

  .about-belief-grid,
  .about-values-head {
    grid-template-columns: 1fr
  }

  .about-story {
    grid-template-columns: 1fr
  }

  .about-story-image {
    height: 75vh;
    min-height: 0
  }

  .about-value-list {
    grid-template-columns: 1fr 1fr
  }

  .about-value-list article:nth-child(2) {
    border-right: 0
  }

  .about-value-list article {
    min-height: 280px;
    border-bottom: 1px solid #18201c35
  }
}

@media(max-width:600px) {
  .about-hero {
    height: 500px;
    min-height: 500px
  }

  .about-hero-copy {
    left: 20px;
    right: 20px;
    top: 125px
  }

  .about-hero-copy h1 {
    font-size: 16vw
  }

  .about-hero-copy h1 em {
    text-align: left
  }

  .about-hero-copy p {
    font-size: 13px
  }

  .about-belief,
  .about-values {
    padding: 80px 20px
  }

  .about-belief-grid {
    margin-top: 75px
  }

  .about-belief h2,
  .about-values-head h2 {
    font-size: 15vw
  }

  .about-story-copy {
    padding: 80px 20px
  }

  .about-story-copy .section-index {
    margin-bottom: 65px
  }

  .about-story-copy h2 {
    font-size: 16vw
  }

  .about-value-list {
    grid-template-columns: 1fr
  }

  .about-value-list article,
  .about-value-list article:not(:first-child),
  .about-value-list article:last-child {
    min-height: 230px;
    padding: 25px 0;
    border-right: 0
  }

  .about-value-list h3 {
    margin-top: 35px
  }

  .about-vision-copy {
    left: 20px;
    right: 20px
  }

  .about-vision-copy h2 {
    font-size: 17vw
  }

  .about-footer {
    padding: 75px 20px 25px
  }

  .about-footer-mark {
    font-size: 18vw
  }

  .about-footer>div:not(:first-child) {
    gap: 20px;
    flex-wrap: wrap
  }
}

.services-page {
  background: var(--pine)
}

.service-hero {
  position: relative;
  height: 500px;
  min-height: 500px;
  overflow: hidden;
  color: var(--white)
}

.service-hero-media,
.service-hero-shade {
  position: absolute;
  inset: 0
}

.service-hero-media img {
  transform: scale(1.1)
}

.service-hero-shade {
  background: linear-gradient(105deg, #07130de0, #1735289e 48%, #9b80534f 75%, #07100ca8), linear-gradient(180deg, #07100c3d, transparent, #07100cb8);
  mix-blend-mode: multiply
}

.service-hero-copy {
  position: absolute;
  left: 7vw;
  right: 7vw;
  top: 125px
}

.service-hero-copy h1 {
  font: 400 clamp(4rem, 8vw, 8.3rem)/.8 var(--serif);
  letter-spacing: -.05em;
  margin: 28px 0
}

.service-hero-copy h1 span,
.service-hero-copy h1 em {
  display: block
}

.service-hero-copy h1 em {
  text-align: right;
  color: #ddd3bc
}

.service-hero-copy p {
  max-width: 390px;
  margin-left: auto;
  line-height: 1.6
}

.service-intro {
  padding: 9vw 7vw;
  background: var(--paper)
}

.service-intro-grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 7vw;
  align-items: end;
  margin-top: 10vh
}

.service-intro h2,
.service-catalog-head h2,
.service-feature-copy h2,
.service-journey-head h2,
.service-cta h2 {
  font: 400 clamp(3.8rem, 7vw, 7.5rem)/.88 var(--serif);
  letter-spacing: -.045em;
  margin: 0
}

.service-intro h2 em,
.service-feature-copy h2 em,
.service-journey-head h2 em {
  color: var(--sage)
}

.service-intro-grid p {
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.65;
  margin: 0 0 5vh
}

.service-catalog {
  padding: 9vw 7vw;
  background: var(--pine);
  color: var(--white)
}

.service-catalog-head {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  align-items: start;
  margin-bottom: 9vh
}

.service-catalog-head .section-index {
  color: var(--gold)
}

.service-catalog-head h2 em {
  color: var(--gold)
}

.service-list {
  border-top: 1px solid #ffffff2e
}

.service-list article {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 4vw;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid #ffffff2e
}

.service-number {
  font-size: 9px;
  color: var(--gold)
}

.service-list h3 {
  font: 400 clamp(2rem, 3.5vw, 3.8rem)/1 var(--serif);
  margin: 0 0 10px
}

.service-list p {
  max-width: 600px;
  margin: 0;
  color: #f6f3ec91;
  font-size: 12px;
  line-height: 1.6
}

.service-list article>span {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .16em;
  border-bottom: 1px solid;
  padding-bottom: 7px
}

.service-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--paper)
}

.service-feature-image {
  position: relative;
  min-height: 850px;
  overflow: hidden
}

.service-feature-image img {
  position: absolute;
  inset: 0;
  transform: scale(1.1)
}

.service-feature-image .micro {
  position: absolute;
  left: 28px;
  bottom: 28px;
  color: #fff
}

.service-feature-copy {
  padding: 10vw 8vw
}

.service-feature-copy .section-index {
  margin-bottom: 10vh
}

.service-feature-copy>p {
  line-height: 1.7;
  margin: 6vh 0
}

.service-feature-copy ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #18201c40
}

.service-feature-copy li {
  padding: 18px 0;
  border-bottom: 1px solid #18201c40;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em
}

.service-feature-copy li:before {
  content: '↗';
  color: var(--sage);
  margin-right: 20px
}

.service-journey {
  padding: 9vw 7vw 11vw;
  background: var(--paper)
}

.service-journey-head {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  margin-bottom: 9vh
}

.journey-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #18201c45
}

.journey-steps article {
  min-height: 270px;
  padding: 28px 24px;
  border-right: 1px solid #18201c35;
  display: flex;
  flex-direction: column
}

.journey-steps article:first-child {
  padding-left: 0
}

.journey-steps article:last-child {
  border: 0
}

.journey-steps span {
  font-size: 9px;
  color: var(--sage)
}

.journey-steps h3 {
  font: 400 clamp(2rem, 3.2vw, 3.6rem) var(--serif);
  margin: 6vh 0 0
}

.journey-steps p {
  margin-top: auto;
  font-size: 12px
}

.service-cta {
  position: relative;
  min-height: 720px;
  padding: 11vw 7vw;
  background: linear-gradient(90deg, #0b1711f2, #14231cd9), url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=2200&q=88') center/cover;
  color: var(--white)
}

.service-cta>div {
  position: relative;
  max-width: 900px
}

.service-cta h2 {
  margin: 6vh 0
}

.service-cta h2 em {
  color: var(--gold)
}

.service-cta p {
  max-width: 380px;
  line-height: 1.6
}

.service-cta .footer-visit {
  right: 0;
  bottom: -4vh
}

@media(max-width:900px) {

  .service-intro-grid,
  .service-catalog-head,
  .service-journey-head {
    grid-template-columns: 1fr;
    gap: 50px
  }

  .service-feature {
    grid-template-columns: 1fr
  }

  .service-feature-image {
    height: 70vh;
    min-height: 520px
  }

  .journey-steps {
    grid-template-columns: 1fr 1fr
  }

  .service-cta .footer-visit {
    position: relative;
    right: auto;
    bottom: auto
  }
}

@media(max-width:600px) {
  .service-hero-copy {
    left: 20px;
    right: 20px
  }

  .service-hero-copy h1 {
    font-size: 15vw
  }

  .service-hero-copy h1 em {
    text-align: left
  }

  .service-hero-copy p {
    font-size: 12px
  }

  .service-intro,
  .service-catalog,
  .service-journey {
    padding: 70px 20px
  }

  .service-intro-grid {
    margin-top: 60px
  }

  .service-intro h2,
  .service-catalog-head h2,
  .service-feature-copy h2,
  .service-journey-head h2,
  .service-cta h2 {
    font-size: 15vw
  }

  .service-list article {
    grid-template-columns: 35px 1fr
  }

  .service-list article>span {
    display: none
  }

  .service-feature-copy {
    padding: 70px 20px
  }

  .service-feature-copy .section-index {
    margin-bottom: 55px
  }

  .journey-steps {
    grid-template-columns: 1fr
  }

  .journey-steps article {
    min-height: 210px;
    padding: 25px 0;
    border-right: 0;
    border-bottom: 1px solid #18201c35
  }

  .service-cta {
    min-height: 680px;
    padding: 90px 20px
  }
}

.properties-page {
  background: var(--pine)
}

.properties-hero {
  position: relative;
  height: 500px;
  min-height: 500px;
  overflow: hidden;
  color: var(--white)
}

.properties-hero-media,
.properties-hero-shade {
  position: absolute;
  inset: 0
}

.properties-hero-media img {
  transform: scale(1.1)
}

.properties-hero-shade {
  background: linear-gradient(105deg, #07130de3, #1735289d 50%, #997a4e52 76%, #07100ca8), linear-gradient(180deg, #07100c30, transparent, #07100cbd);
  mix-blend-mode: multiply
}

.properties-hero-copy {
  position: absolute;
  left: 7vw;
  right: 7vw;
  top: 125px
}

.properties-hero-copy h1 {
  font: 400 clamp(4rem, 8vw, 8.3rem)/.8 var(--serif);
  letter-spacing: -.05em;
  margin: 28px 0
}

.properties-hero-copy h1 span,
.properties-hero-copy h1 em {
  display: block
}

.properties-hero-copy h1 em {
  text-align: right;
  color: #ddd3bc
}

.properties-hero-copy p {
  max-width: 380px;
  margin-left: auto;
  line-height: 1.6
}

.properties-catalog {
  padding: 9vw 7vw 11vw;
  background: var(--paper)
}

.properties-title {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  margin-bottom: 7vh
}

.properties-title .section-index {
  margin-bottom: 7vh
}

.properties-title h2 {
  font: 400 clamp(4rem, 8vw, 8.5rem)/.85 var(--serif);
  letter-spacing: -.05em;
  margin: 0
}

.properties-title>p {
  font-size: 11px
}

.properties-title strong {
  font: 400 2.8rem var(--serif);
  margin-right: 8px
}

.property-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #18201c45;
  border-bottom: 1px solid #18201c45;
  padding: 18px 0;
  margin-bottom: 7vh
}

.property-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.property-filters button,
.property-toolbar select {
  border: 1px solid #18201c3d;
  background: transparent;
  color: var(--ink);
  padding: 10px 16px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .12em
}

.property-filters button {
  border-radius: 30px;
  cursor: pointer
}

.property-filters button.active {
  background: var(--pine);
  color: var(--white)
}

.property-toolbar select {
  border: 0
}

.all-property-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7vw 2vw
}

.all-property-card:nth-child(even) {
  transform: translateY(6vw)
}

.all-property-image {
  position: relative;
  height: 60vh;
  min-height: 480px;
  overflow: hidden
}

.all-property-image img {
  transform: scale(1.06);
  transition: 1s var(--ease)
}

.all-property-image>span {
  position: absolute;
  left: 18px;
  top: 18px;
  background: #f6f3ecea;
  padding: 8px 12px;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .14em
}

.all-property-image>b {
  position: absolute;
  right: 18px;
  top: 18px;
  color: #fff;
  font-size: 9px;
  font-weight: 300
}

.all-property-copy {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding-top: 22px
}

.all-property-copy>span {
  grid-column: 1/-1;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--sage);
  margin-bottom: 14px
}

.all-property-copy h3 {
  font: 400 clamp(2rem, 3.4vw, 3.8rem)/1 var(--serif);
  margin: 0
}

.all-property-copy p {
  grid-column: 1;
  font-size: 11px
}

.all-property-copy i {
  grid-column: 2;
  grid-row: 2/4;
  font-style: normal;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .14em;
  border-bottom: 1px solid;
  padding-bottom: 7px
}

.all-property-card:hover img {
  transform: scale(1.015)
}

.property-empty {
  text-align: center;
  padding: 80px
}

.property-assist {
  position: relative;
  padding: 10vw 7vw 13vw;
  background: var(--pine);
  color: var(--white)
}

.property-assist .section-index {
  color: var(--gold)
}

.property-assist h2 {
  font: 400 clamp(4rem, 8vw, 8.5rem)/.86 var(--serif);
  letter-spacing: -.05em;
  margin: 8vh 0 5vh
}

.property-assist h2 em {
  color: var(--gold)
}

.property-assist>p {
  max-width: 400px;
  line-height: 1.65
}

.property-assist .footer-visit {
  right: 12vw;
  bottom: 11vw
}

@media(max-width:900px) {
  .properties-title {
    grid-template-columns: 1fr
  }

  .all-property-image {
    height: 48vh;
    min-height: 380px
  }

  .property-assist .footer-visit {
    position: relative;
    right: auto;
    bottom: auto
  }
}

@media(max-width:600px) {
  .properties-hero-copy {
    left: 20px;
    right: 20px
  }

  .properties-hero-copy h1 {
    font-size: 15vw
  }

  .properties-hero-copy h1 em {
    text-align: left
  }

  .properties-hero-copy p {
    font-size: 12px
  }

  .properties-catalog,
  .property-assist {
    padding: 70px 20px
  }

  .properties-title h2,
  .property-assist h2 {
    font-size: 16vw
  }

  .properties-title>p {
    margin-top: 30px
  }

  .property-toolbar {
    align-items: flex-start;
    gap: 18px;
    flex-direction: column
  }

  .all-property-grid {
    grid-template-columns: 1fr;
    gap: 55px
  }

  .all-property-card:nth-child(even) {
    transform: none
  }

  .all-property-image {
    height: 50vh;
    min-height: 360px
  }

  .all-property-copy {
    grid-template-columns: 1fr
  }

  .all-property-copy i {
    grid-column: 1;
    grid-row: auto;
    width: max-content;
    margin-top: 20px
  }
}

.contact-page {
  background: var(--pine)
}

.contact-hero {
  position: relative;
  height: 500px;
  min-height: 500px;
  overflow: hidden;
  color: var(--white)
}

.contact-hero-media,
.contact-hero-shade {
  position: absolute;
  inset: 0
}

.contact-hero-media img {
  transform: scale(1.1)
}

.contact-hero-shade {
  background: linear-gradient(105deg, #07130de2, #173528a1 47%, #98794e54 75%, #07100ca8), linear-gradient(180deg, #07100c30, transparent, #07100cbd);
  mix-blend-mode: multiply
}

.contact-hero-copy {
  position: absolute;
  left: 7vw;
  right: 7vw;
  top: 125px
}

.contact-hero-copy h1 {
  font: 400 clamp(4rem, 8vw, 8.3rem)/.8 var(--serif);
  letter-spacing: -.05em;
  margin: 28px 0
}

.contact-hero-copy h1 span,
.contact-hero-copy h1 em {
  display: block
}

.contact-hero-copy h1 em {
  text-align: right;
  color: #ddd3bc
}

.contact-hero-copy p {
  max-width: 390px;
  margin-left: auto;
  line-height: 1.6
}

.contact-main {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 9vw;
  padding: 9vw 7vw 11vw;
  background: var(--paper)
}

.contact-aside .section-index {
  margin-bottom: 9vh
}

.contact-aside h2,
.contact-visit-copy h2 {
  font: 400 clamp(3.8rem, 6.5vw, 7rem)/.88 var(--serif);
  letter-spacing: -.045em;
  margin: 0
}

.contact-aside h2 em {
  color: var(--sage)
}

.contact-aside>p {
  max-width: 440px;
  line-height: 1.7;
  margin: 6vh 0
}

.contact-direct {
  border-top: 1px solid #18201c40
}

.contact-direct>div {
  display: grid;
  grid-template-columns: 90px 1fr;
  padding: 20px 0;
  border-bottom: 1px solid #18201c40
}

.contact-direct span,
.contact-fields label>span {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--sage)
}

.contact-direct a,
.contact-direct p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6
}

.contact-form {
  background: #dcd8ce;
  padding: 4vw
}

.form-intro {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #18201c45;
  padding-bottom: 25px;
  margin-bottom: 5vh
}

.form-intro p {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .12em
}

.contact-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px 28px
}

.contact-fields label {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.contact-fields .field-wide {
  grid-column: 1/-1
}

.contact-fields input,
.contact-fields select,
.contact-fields textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #18201c63;
  background: transparent;
  border-radius: 0;
  padding: 10px 0 13px;
  color: var(--ink);
  font: 300 14px var(--sans);
  outline: none
}

.contact-fields textarea {
  resize: vertical
}

.contact-fields input:focus,
.contact-fields select:focus,
.contact-fields textarea:focus {
  border-color: var(--ink)
}

.validated input:invalid,
.validated select:invalid {
  border-color: #9b3b32
}

.form-submit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  margin-top: 6vh
}

.form-consent {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px
}

.form-submit button {
  border: 1px solid var(--ink);
  border-radius: 50%;
  width: 130px;
  height: 130px;
  background: var(--pine);
  color: var(--white);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .12em;
  cursor: pointer
}

.form-submit button i {
  display: block;
  margin-top: 8px
}

.form-submit button:disabled {
  opacity: .55
}

.contact-success {
  border-top: 1px solid #55745f;
  margin-top: 30px;
  padding-top: 20px;
  color: #36563f;
  font-size: 12px
}

.contact-visit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 850px;
  background: var(--pine);
  color: var(--white)
}

.contact-visit-image {
  position: relative;
  overflow: hidden
}

.contact-visit-image img {
  position: absolute;
  inset: 0;
  transform: scale(1.1)
}

.contact-visit-copy {
  padding: 10vw 8vw
}

.contact-visit-copy .section-index {
  color: var(--gold);
  margin-bottom: 10vh
}

.contact-visit-copy h2 em {
  color: var(--gold)
}

.contact-visit-copy>p {
  line-height: 1.7;
  color: #f6f3eca8;
  margin: 6vh 0
}

.visit-hours {
  display: grid;
  grid-template-columns: 1fr auto;
  border-top: 1px solid #ffffff2e;
  margin-bottom: 6vh
}

.visit-hours span,
.visit-hours strong {
  padding: 18px 0;
  border-bottom: 1px solid #ffffff2e;
  font-size: 10px
}

.visit-hours strong {
  font-weight: 300;
  color: var(--gold)
}

@media(max-width:900px) {

  .contact-main,
  .contact-visit {
    grid-template-columns: 1fr
  }

  .contact-form {
    padding: 7vw
  }

  .contact-visit-image {
    height: 70vh
  }

  .contact-visit-copy {
    padding: 90px 7vw
  }
}

@media(max-width:600px) {
  .contact-hero-copy {
    left: 20px;
    right: 20px
  }

  .contact-hero-copy h1 {
    font-size: 15vw
  }

  .contact-hero-copy h1 em {
    text-align: left
  }

  .contact-hero-copy p {
    font-size: 12px
  }

  .contact-main {
    padding: 70px 20px;
    gap: 70px
  }

  .contact-aside h2,
  .contact-visit-copy h2 {
    font-size: 15vw
  }

  .contact-form {
    padding: 35px 20px
  }

  .contact-fields {
    grid-template-columns: 1fr
  }

  .contact-fields .field-wide {
    grid-column: 1
  }

  .form-intro,
  .form-submit {
    align-items: flex-start;
    flex-direction: column
  }

  .form-submit button {
    width: 115px;
    height: 115px
  }

  .contact-visit-copy {
    padding: 70px 20px
  }
}

.location-page {
  background: var(--pine)
}

.location-hero {
  position: relative;
  height: 500px;
  min-height: 500px;
  overflow: hidden;
  color: var(--white)
}

.location-hero-media,
.location-hero-shade {
  position: absolute;
  inset: 0
}

.location-hero-media img {
  transform: scale(1.1)
}

.location-hero-shade {
  background: linear-gradient(105deg, #07130de2, #1735289e 48%, #98794e52 75%, #07100ca8), linear-gradient(180deg, #07100c30, transparent, #07100cbd);
  mix-blend-mode: multiply
}

.location-hero-copy {
  position: absolute;
  left: 7vw;
  right: 7vw;
  top: 125px
}

.location-hero-copy h1 {
  font: 400 clamp(4rem, 8vw, 8.3rem)/.8 var(--serif);
  letter-spacing: -.05em;
  margin: 28px 0
}

.location-hero-copy h1 span,
.location-hero-copy h1 em {
  display: block
}

.location-hero-copy h1 em {
  text-align: right;
  color: #ddd3bc
}

.location-hero-copy p {
  max-width: 390px;
  margin-left: auto;
  line-height: 1.6
}

.location-intro {
  padding: 9vw 7vw;
  background: var(--paper)
}

.location-intro-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 8vw;
  align-items: end;
  margin-top: 10vh
}

.location-intro h2,
.map-content h2,
.location-neighbourhood-head h2,
.location-arrival-copy h2 {
  font: 400 clamp(3.8rem, 7vw, 7.5rem)/.87 var(--serif);
  letter-spacing: -.045em;
  margin: 0
}

.location-intro h2 em,
.location-neighbourhood-head h2 em {
  color: var(--sage)
}

.location-intro-grid>div>p {
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.65
}

.location-address {
  border-top: 1px solid #18201c40;
  padding-top: 25px;
  margin: 5vh 0 !important
}

.location-address span {
  display: block;
  color: var(--sage);
  font-size: 9px;
  letter-spacing: .14em;
  margin-top: 14px
}

.location-map {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  min-height: 900px;
  background: var(--pine);
  color: var(--white)
}

.map-canvas {
  position: relative;
  overflow: hidden;
  background: #0d1c15
}

.map-grid {
  position: absolute;
  inset: -10%;
  background-image: linear-gradient(#ffffff12 1px, transparent 1px), linear-gradient(90deg, #ffffff12 1px, transparent 1px);
  background-size: 80px 80px;
  transform: rotate(-8deg) scale(1.2)
}

.map-grid:after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 52% 48%, transparent, #07100cd9 70%)
}

.map-ring {
  position: absolute;
  left: 52%;
  top: 48%;
  border: 1px solid #b69a6a52;
  border-radius: 50%;
  transform: translate(-50%, -50%)
}

.ring-one {
  width: 260px;
  height: 260px
}

.ring-two {
  width: 480px;
  height: 480px
}

.map-pin {
  position: absolute;
  left: 52%;
  top: 48%;
  transform: translate(-50%, -50%);
  text-align: center
}

.map-pin i {
  display: block;
  width: 17px;
  height: 17px;
  margin: auto auto 12px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 12px #b69a6a24
}

.map-pin span {
  font: 400 1.4rem var(--serif)
}

.map-pin small {
  font: 300 8px var(--sans);
  text-transform: uppercase;
  letter-spacing: .14em
}

.map-road,
.map-coordinate {
  position: absolute;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #ffffff70
}

.road-one {
  left: 12%;
  top: 22%;
  transform: rotate(-8deg)
}

.road-two {
  right: 8%;
  bottom: 25%;
  transform: rotate(18deg)
}

.map-coordinate {
  left: 30px;
  bottom: 30px;
  line-height: 1.7
}

.map-content {
  padding: 9vw 7vw
}

.map-content .section-index {
  color: var(--gold);
  margin-bottom: 9vh
}

.map-content h2 em {
  color: var(--gold)
}

.travel-list {
  margin-top: 7vh;
  border-top: 1px solid #ffffff2c
}

.travel-list button {
  display: grid;
  grid-template-columns: 1fr auto;
  width: 100%;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid #ffffff2c;
  background: none;
  color: #ffffff89;
  text-align: left;
  cursor: pointer
}

.travel-list button.active {
  color: var(--white);
  padding-left: 15px
}

.travel-list i {
  font-style: normal;
  color: var(--gold)
}

.travel-result {
  display: flex;
  align-items: end;
  gap: 10px;
  margin-top: 5vh
}

.travel-result span,
.travel-result small {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .14em
}

.travel-result strong {
  font: 400 4.5rem/.8 var(--serif);
  color: var(--gold)
}

.location-neighbourhood {
  padding: 9vw 7vw 11vw;
  background: var(--paper)
}

.location-neighbourhood-head {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  margin-bottom: 9vh
}

.neighbourhood-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2vw
}

.neighbourhood-grid article>div {
  height: 55vh;
  overflow: hidden
}

.neighbourhood-grid article:nth-child(2) {
  margin-top: 8vh
}

.neighbourhood-grid img {
  transition: 1s var(--ease)
}

.neighbourhood-grid article:hover img {
  transform: scale(1.04)
}

.neighbourhood-grid span {
  display: block;
  font-size: 9px;
  color: var(--sage);
  margin-top: 20px
}

.neighbourhood-grid h3 {
  font: 400 clamp(1.8rem, 3vw, 3.2rem) var(--serif);
  margin: 7px 0
}

.neighbourhood-grid p {
  font-size: 11px;
  line-height: 1.6
}

.location-arrival {
  position: relative;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  color: var(--white)
}

.location-arrival-image,
.location-arrival-image:after {
  position: absolute;
  inset: 0
}

.location-arrival-image:after {
  content: '';
  background: linear-gradient(90deg, #07100cdf, transparent 70%)
}

.location-arrival-copy {
  position: absolute;
  left: 7vw;
  top: 16vh
}

.location-arrival-copy h2 {
  margin: 5vh 0
}

.location-arrival-copy h2 em {
  color: var(--gold)
}

.location-arrival-copy p {
  max-width: 370px;
  line-height: 1.6
}

.location-arrival-copy .footer-visit {
  position: relative;
  right: auto;
  bottom: auto;
  margin-top: 5vh
}

@media(max-width:900px) {

  .location-intro-grid,
  .location-neighbourhood-head {
    grid-template-columns: 1fr;
    gap: 50px
  }

  .location-map {
    grid-template-columns: 1fr
  }

  .map-canvas {
    height: 70vh
  }

  .neighbourhood-grid {
    grid-template-columns: 1fr 1fr
  }

  .neighbourhood-grid article:last-child {
    grid-column: 1/-1
  }

  .neighbourhood-grid article:nth-child(2) {
    margin-top: 0
  }
}

@media(max-width:600px) {
  .location-hero-copy {
    left: 20px;
    right: 20px
  }

  .location-hero-copy h1 {
    font-size: 15vw
  }

  .location-hero-copy h1 em {
    text-align: left
  }

  .location-hero-copy p {
    font-size: 12px
  }

  .location-intro,
  .location-neighbourhood {
    padding: 70px 20px
  }

  .location-intro h2,
  .map-content h2,
  .location-neighbourhood-head h2,
  .location-arrival-copy h2 {
    font-size: 15vw
  }

  .map-content {
    padding: 70px 20px
  }

  .neighbourhood-grid {
    grid-template-columns: 1fr;
    gap: 55px
  }

  .neighbourhood-grid article:last-child {
    grid-column: auto
  }

  .neighbourhood-grid article>div {
    height: 52vh
  }

  .location-arrival-copy {
    left: 20px;
    right: 20px
  }
}

.map-canvas iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) sepia(.28) hue-rotate(92deg) saturate(.72) brightness(.72) contrast(1.15)
}

.map-label {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #0b1711e8;
  color: var(--white);
  border: 1px solid #b69a6a7a;
  box-shadow: 0 14px 45px #07100c70;
  pointer-events: none
}

.map-label i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 7px #b69a6a25
}

.map-label span {
  font: 400 1rem var(--serif);
  line-height: 1.1
}

.map-label small {
  font: 300 7px var(--sans);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #ffffff9c;
  white-space: nowrap
}

.office-location-lead {
  max-width: 480px;
  margin: 5vh 0;
  line-height: 1.65;
  color: #f6f3ec9c
}

.office-location-details {
  border-top: 1px solid #ffffff2e;
  margin-bottom: 5vh
}

.office-location-details>div {
  display: grid;
  grid-template-columns: 130px 1fr;
  padding: 17px 0;
  border-bottom: 1px solid #ffffff2e
}

.office-location-details span {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--gold)
}

.office-location-details p,
.office-location-details a {
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--white)
}

@media(max-width:600px) {
  .office-location-details>div {
    grid-template-columns: 105px 1fr
  }
}

.location-arrival {
  display: none !important
}

.property-detail-page {
  background: var(--pine)
}

.detail-hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  color: var(--white);
  overflow: hidden
}

.detail-hero-media,
.detail-hero-shade {
  position: absolute;
  inset: 0
}

.detail-hero-media img {
  transform: scale(1.07)
}

.detail-hero-shade {
  background: linear-gradient(180deg, #07100c62, transparent 40%, #07100cd6)
}

.detail-back {
  position: absolute;
  left: 7vw;
  top: 125px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .15em
}

.detail-hero-copy {
  position: absolute;
  left: 7vw;
  right: 7vw;
  bottom: 9vh
}

.detail-hero-copy h1 {
  font: 400 clamp(5rem, 11vw, 11.5rem)/.8 var(--serif);
  letter-spacing: -.055em;
  margin: 4vh 0
}

.detail-hero-meta {
  display: flex;
  gap: 40px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .15em
}

.detail-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  padding: 10vw 7vw;
  background: var(--paper)
}

.detail-overview h2,
.detail-gallery-head h2,
.detail-features-head h2,
.detail-inquiry h2 {
  font: 400 clamp(4rem, 7vw, 7.5rem)/.87 var(--serif);
  letter-spacing: -.045em;
  margin: 8vh 0 0
}

.detail-overview h2 em,
.detail-features-head h2 em {
  color: var(--sage)
}

.detail-overview-copy>p {
  font-size: clamp(1.05rem, 1.45vw, 1.3rem);
  line-height: 1.7;
  margin: 12vh 0 7vh
}

.detail-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #18201c40;
  margin-bottom: 6vh
}

.detail-specs>div {
  padding: 20px 0;
  border-bottom: 1px solid #18201c40;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.detail-specs span {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--sage)
}

.detail-specs strong {
  font: 400 1.5rem var(--serif)
}

.detail-gallery {
  padding: 10vw 7vw;
  background: var(--pine);
  color: var(--white)
}

.detail-gallery-head {
  display: grid;
  grid-template-columns: .6fr 1.4fr;
  margin-bottom: 9vh
}

.detail-gallery-head .section-index {
  color: var(--gold)
}

.detail-gallery-head h2 {
  margin: 0
}

.detail-gallery-head h2 em {
  color: var(--gold)
}

.detail-gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2vw
}

.detail-gallery-grid figure {
  height: 55vh;
  margin: 0;
  overflow: hidden
}

.detail-gallery-grid .gallery-large {
  grid-column: 1/-1;
  height: 85vh
}

.detail-features {
  padding: 10vw 7vw;
  background: var(--paper)
}

.detail-features-head {
  display: grid;
  grid-template-columns: .6fr 1.4fr;
  margin-bottom: 9vh
}

.detail-features-head h2 {
  margin: 0
}

.detail-feature-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #18201c40
}

.detail-feature-list article {
  min-height: 300px;
  padding: 28px 24px;
  border-right: 1px solid #18201c35;
  display: flex;
  flex-direction: column
}

.detail-feature-list span {
  font-size: 9px;
  color: var(--sage)
}

.detail-feature-list h3 {
  font: 400 2rem var(--serif);
  margin: 6vh 0 0
}

.detail-feature-list p {
  margin-top: auto;
  font-size: 11px;
  line-height: 1.6
}

.detail-inquiry {
  position: relative;
  padding: 11vw 7vw 14vw;
  background: var(--pine);
  color: var(--white)
}

.detail-inquiry h2 {
  margin: 7vh 0
}

.detail-inquiry h2 em {
  color: var(--gold)
}

.detail-inquiry>p {
  max-width: 400px;
  line-height: 1.6
}

.detail-inquiry .footer-visit {
  right: 12vw;
  bottom: 10vw
}

@media(max-width:900px) {

  .detail-overview,
  .detail-gallery-head,
  .detail-features-head {
    grid-template-columns: 1fr
  }

  .detail-feature-list {
    grid-template-columns: 1fr 1fr
  }

  .detail-inquiry .footer-visit {
    position: relative;
    right: auto;
    bottom: auto
  }
}

@media(max-width:600px) {
  .detail-hero {
    min-height: 650px
  }

  .detail-back,
  .detail-hero-copy {
    left: 20px;
    right: 20px
  }

  .detail-hero-copy h1 {
    font-size: 18vw
  }

  .detail-hero-meta {
    gap: 14px;
    flex-wrap: wrap
  }

  .detail-overview,
  .detail-gallery,
  .detail-features,
  .detail-inquiry {
    padding: 70px 20px
  }

  .detail-overview {
    grid-template-columns: 1fr
  }

  .detail-overview h2,
  .detail-gallery-head h2,
  .detail-features-head h2,
  .detail-inquiry h2 {
    font-size: 15vw
  }

  .detail-overview-copy>p {
    margin: 25px 0 50px
  }

  .detail-gallery-grid {
    grid-template-columns: 1fr
  }

  .detail-gallery-grid .gallery-large {
    grid-column: auto;
    height: 60vh
  }

  .detail-gallery-grid figure {
    height: 50vh
  }

  .detail-feature-list {
    grid-template-columns: 1fr
  }

  .detail-feature-list article {
    min-height: 230px;
    padding: 25px 0;
    border-right: 0;
    border-bottom: 1px solid #18201c35
  }
}

.cursor.hover {
  background: #fff !important;
  color: #14231c !important
}

.cursor.hover span {
  opacity: 1 !important;
  color: #14231c;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .08em
}

.cursor {
  display: none !important
}

.residence-grid .res-card {
  position: relative
}

.residence-grid .res-card>a,
.property-list .property-item>a {
  position: relative;
  z-index: 5;
  display: block;
  pointer-events: auto;
  cursor: pointer
}

.residence-grid .res-card-copy,
.residence-grid .res-card-copy *,
.property-list .property-info,
.property-list .property-info * {
  pointer-events: none
}

.detail-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 10vh;
  padding-top: 25px;
  border-top: 1px solid #18201c40
}

.detail-price span,
.detail-price small {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--sage)
}

.detail-price strong {
  font: 400 clamp(2.5rem, 4vw, 4.5rem) var(--serif);
  margin: 10px 0
}

.detail-specs {
  grid-template-columns: 1fr 1fr
}

.detail-actions {
  display: flex;
  align-items: center;
  gap: 35px;
  flex-wrap: wrap
}

.detail-gallery-grid figure {
  position: relative
}

.detail-gallery-grid figcaption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 8px 11px;
  background: #07100cb5;
  color: #fff;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .14em
}

.detail-plan {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 8vw;
  padding: 10vw 7vw;
  background: var(--paper)
}

.detail-plan-copy h2 {
  font: 400 clamp(3.8rem, 6.5vw, 7rem)/.88 var(--serif);
  letter-spacing: -.045em;
  margin: 8vh 0 5vh
}

.detail-plan-copy h2 em {
  color: var(--sage)
}

.detail-plan-copy>p {
  max-width: 480px;
  line-height: 1.7
}

.plan-key {
  border-top: 1px solid #18201c40;
  margin: 6vh 0
}

.plan-key>div {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid #18201c40
}

.plan-key span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .12em
}

.plan-key strong {
  font: 400 1.15rem var(--serif)
}

.detail-plan-visual {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr .8fr 1fr;
  grid-template-rows: 1fr 1fr .45fr;
  gap: 8px;
  min-height: 650px;
  padding: 35px;
  background: #d8d4ca;
  border: 1px solid #18201c30
}

.plan-room {
  display: grid;
  place-items: center;
  border: 1px solid #18201c6b;
  background: #e8e4da;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .13em
}

.plan-living {
  grid-row: 1/3
}

.plan-kitchen {
  grid-column: 2;
  grid-row: 1
}

.plan-bed {
  grid-column: 3;
  grid-row: 1/3
}

.plan-bed-two {
  grid-column: 2;
  grid-row: 2
}

.plan-terrace {
  grid-column: 1/4;
  grid-row: 3;
  background: #bdc5b5
}

.detail-plan-visual>span {
  position: absolute;
  right: 35px;
  bottom: 12px;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #18201c8a
}

@media(max-width:900px) {
  .detail-plan {
    grid-template-columns: 1fr
  }

  .detail-plan-visual {
    min-height: 560px
  }
}

@media(max-width:600px) {
  .detail-plan {
    padding: 70px 20px
  }

  .detail-plan-copy h2 {
    font-size: 15vw
  }

  .detail-plan-visual {
    min-height: 430px;
    padding: 18px
  }

  .detail-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px
  }
}

.detail-plan {
  grid-template-columns: minmax(320px, .62fr) minmax(0, 1.38fr);
  align-items: center;
  gap: 6vw;
  padding-top: 8vw;
  padding-bottom: 8vw
}

.detail-plan-copy h2 {
  margin-top: 6vh
}

.detail-plan-image {
  margin: 0;
  position: relative;
  background: #f5f1e8;
  padding: 18px;
  box-shadow: 0 25px 70px #18201c1c
}

.detail-plan-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: contain
}

.detail-plan-image figcaption {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding: 16px 4px 2px;
  border-top: 1px solid #18201c2d
}

.detail-plan-image figcaption span,
.detail-plan-image figcaption small {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .13em
}

.detail-plan-image figcaption small {
  color: #18201c85;
  text-align: right
}

@media(max-width:900px) {
  .detail-plan {
    grid-template-columns: 1fr
  }

  .detail-plan-image {
    margin-top: 20px
  }
}

@media(max-width:600px) {
  .detail-plan-image {
    padding: 8px
  }

  .detail-plan-image figcaption {
    align-items: flex-start;
    flex-direction: column
  }

  .detail-plan-image figcaption small {
    text-align: left
  }
}

.property-detail-page .detail-hero {
  height: 500px;
  min-height: 500px
}

.property-detail-page .detail-hero-shade {
  background: linear-gradient(105deg, #07130de0 0%, #173528a3 46%, #91764f55 74%, #07100ca8 100%), linear-gradient(180deg, #07100c38, transparent 45%, #07100cc4);
  mix-blend-mode: multiply
}

.property-detail-page .detail-back {
  top: 108px
}

.property-detail-page .detail-hero-copy {
  bottom: 42px
}

.property-detail-page .detail-hero-copy h1 {
  font-size: clamp(4rem, 8vw, 8.3rem);
  line-height: .8;
  margin: 22px 0
}

.property-detail-page .detail-hero-meta {
  padding-top: 15px;
  border-top: 1px solid #ffffff3b
}

@media(max-width:600px) {
  .property-detail-page .detail-hero {
    height: 500px;
    min-height: 500px
  }

  .property-detail-page .detail-back {
    top: 92px
  }

  .property-detail-page .detail-hero-copy {
    bottom: 35px
  }

  .property-detail-page .detail-hero-copy h1 {
    font-size: 15vw
  }

  .property-detail-page .detail-hero-meta {
    font-size: 8px
  }
}

/* Shared responsive hardening */
@media(max-width:1200px) {
  .topbar {
    padding-left: 4vw;
    padding-right: 4vw
  }

  .res-intro h2,
  .why-content h2,
  .best-head h2 {
    font-size: clamp(3.5rem, 7vw, 6.5rem)
  }

  .property-info h3 {
    font-size: clamp(2.5rem, 4.5vw, 4.6rem)
  }

  .why-arvana {
    gap: 5vw
  }

  .footer-visit {
    right: -15vw
  }

  .detail-plan {
    gap: 4vw
  }

  .contact-main {
    gap: 6vw
  }

  .map-content {
    padding-left: 5vw;
    padding-right: 5vw
  }
}

@media(max-width:900px) {

  html,
  body {
    max-width: 100%;
    overflow-x: hidden
  }

  .topbar {
    height: 78px;
    padding: 0 24px
  }

  .header-inquire {
    font-size: 8px
  }

  .menu-panel {
    padding-top: 88px
  }

  .menu-links a {
    padding: 5px 0
  }

  .menu-links span {
    font-size: clamp(1.65rem, 6vw, 3rem)
  }

  .menu-foot {
    bottom: 22px
  }

  .hero,
  .about-hero,
  .service-hero,
  .properties-hero,
  .contact-hero,
  .location-hero,
  .property-detail-page .detail-hero {
    min-height: 500px
  }

  .res-intro {
    padding-left: 7vw;
    padding-right: 7vw
  }

  .residence-grid {
    padding-left: 7vw;
    padding-right: 7vw
  }

  .why-arvana {
    gap: 55px
  }

  .why-visual {
    order: 1
  }

  .why-content {
    order: 0
  }

  .best-head-copy {
    max-width: 520px
  }

  .property-item>a,
  .property-item:nth-child(even)>a {
    gap: 30px
  }

  .property-info {
    padding: 10px 0 25px
  }

  .about-story-copy,
  .service-feature-copy,
  .contact-visit-copy {
    padding: 80px 7vw
  }

  .about-values-head,
  .service-journey-head,
  .location-neighbourhood-head,
  .detail-features-head {
    gap: 45px
  }

  .about-value-list,
  .journey-steps,
  .detail-feature-list {
    grid-template-columns: 1fr 1fr
  }

  .contact-main {
    gap: 65px
  }

  .contact-form {
    width: 100%
  }

  .location-map {
    min-height: 0
  }

  .map-content {
    padding: 80px 7vw
  }

  .detail-overview {
    gap: 55px
  }

  .detail-gallery-grid .gallery-large {
    height: 65vh
  }

  .home-footer {
    padding-left: 7vw;
    padding-right: 7vw
  }

  .footer-invite h2 {
    font-size: clamp(4.5rem, 13vw, 8rem)
  }

  .footer-visit {
    right: auto
  }

  .footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 55px
  }

  .footer-wordmark {
    font-size: 18vw
  }
}

@media(max-width:600px) {
  body {
    font-size: 14px
  }

  .topbar {
    height: 68px;
    padding: 0 16px
  }

  .nav-trigger span {
    font-size: 8px
  }

  .nav-trigger span {
    margin-left: 30px
  }

  .header-inquire {
    min-width: 76px
  }

  .header-inquire span {
    display: inline
  }

  .menu-panel {
    padding: 76px 20px 24px
  }

  .menu-links a {
    grid-template-columns: 30px 1fr;
    padding: 7px 0
  }

  .menu-links span {
    font-size: clamp(1.55rem, 8vw, 2.35rem)
  }

  .menu-foot {
    left: 20px;
    right: 20px;
    font-size: 7px
  }

  .hero,
  .about-hero,
  .service-hero,
  .properties-hero,
  .contact-hero,
  .location-hero,
  .property-detail-page .detail-hero {
    height: 500px;
    min-height: 500px
  }

  .section-index {
    font-size: 8px
  }

  .section-index i {
    width: 42px
  }

  .res-intro,
  .residence-grid {
    padding-left: 20px;
    padding-right: 20px
  }

  .residence-grid-wrap {
    gap: 48px
  }

  .residence-grid .res-img {
    height: 48vh;
    min-height: 330px
  }

  .res-card-copy h3 {
    font-size: 10vw
  }

  .why-arvana,
  .best-properties {
    padding-left: 20px;
    padding-right: 20px
  }

  .why-visual {
    height: 55vh;
    min-height: 390px
  }

  .why-content .section-index {
    margin-bottom: 40px
  }

  .why-list article {
    padding: 20px 0
  }

  .best-head-copy p {
    font-size: 13px
  }

  .property-item>a {
    gap: 22px
  }

  .property-image {
    height: 46vh;
    min-height: 320px
  }

  .property-info>span {
    margin-bottom: 15px
  }

  .property-info h3 {
    font-size: 11vw
  }

  .property-info i {
    justify-self: start
  }

  .about-belief,
  .about-values,
  .service-intro,
  .service-catalog,
  .service-journey,
  .properties-catalog,
  .contact-main,
  .location-intro,
  .location-neighbourhood,
  .detail-overview,
  .detail-gallery,
  .detail-plan,
  .detail-features {
    padding-left: 20px;
    padding-right: 20px
  }

  .about-story-image,
  .service-feature-image,
  .contact-visit-image,
  .map-canvas {
    height: 55vh;
    min-height: 400px
  }

  .about-story-copy,
  .service-feature-copy,
  .contact-visit-copy,
  .map-content {
    padding: 65px 20px
  }

  .about-value-list,
  .journey-steps,
  .detail-feature-list {
    grid-template-columns: 1fr
  }

  .service-list article {
    gap: 12px
  }

  .service-list h3 {
    font-size: 9vw
  }

  .properties-title {
    margin-bottom: 42px
  }

  .property-filters {
    gap: 6px
  }

  .property-filters button {
    padding: 9px 12px;
    font-size: 8px
  }

  .all-property-image {
    height: 46vh;
    min-height: 330px
  }

  .all-property-copy h3 {
    font-size: 11vw
  }

  .contact-fields {
    gap: 28px
  }

  .contact-form {
    padding: 30px 18px
  }

  .contact-direct>div {
    grid-template-columns: 75px 1fr
  }

  .form-submit {
    gap: 30px
  }

  .location-map {
    display: block
  }

  .map-content h2 {
    font-size: 14vw
  }

  .office-location-details>div {
    grid-template-columns: 90px 1fr;
    gap: 12px
  }

  .neighbourhood-grid article>div {
    height: 48vh
  }

  .detail-hero-copy h1 {
    overflow-wrap: anywhere
  }

  .detail-overview {
    gap: 20px
  }

  .detail-price {
    margin-top: 45px
  }

  .detail-specs {
    grid-template-columns: 1fr 1fr
  }

  .detail-gallery-grid {
    gap: 15px
  }

  .detail-gallery-grid figure,
  .detail-gallery-grid .gallery-large {
    height: 48vh
  }

  .detail-plan-visual {
    min-height: 400px
  }

  .home-footer {
    padding: 65px 20px 24px
  }

  .footer-invite {
    max-width: 100%
  }

  .footer-invite h2 {
    font-size: 18vw
  }

  .footer-orbit {
    opacity: .35
  }

  .footer-nav {
    grid-template-columns: 1fr 1fr;
    gap: 45px 20px
  }

  .footer-nav .footer-links:first-child {
    grid-column: 1/-1
  }

  .home-footer .footer-bottom {
    grid-template-columns: 1fr auto;
    font-size: 7px
  }

  .home-footer .footer-bottom span:nth-child(2),
  .home-footer .footer-bottom a {
    display: none
  }
}

/* Botanical editorial sequence — inspired by ERA's layered, scroll-led pacing */
.botanical-home .hero-media:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #07100c6b, transparent 42%, #07100c24), linear-gradient(0deg, #07100cb8, transparent 55%)
}

.hero-bloom {
  position: absolute;
  z-index: 2;
  width: 32vw;
  height: 45vh;
  border-radius: 50%;
  filter: blur(42px);
  opacity: .16;
  pointer-events: none;
  background: #d7788e;
  mix-blend-mode: screen
}

.hero-bloom-left {
  left: -15vw;
  bottom: -14vh
}

.hero-bloom-right {
  right: -13vw;
  top: -18vh;
  background: #f4d4c1
}

.residence-types {
  position: relative;
  overflow: hidden
}

.residence-progress {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: #ffffff0f;
  pointer-events: none
}

.residence-progress i {
  display: block;
  width: 2px;
  height: 100%;
  background: linear-gradient(var(--gold), #d9c49d);
  transform: scaleY(0);
  transform-origin: top
}

.residence-grid .res-card {
  will-change: transform, opacity
}

.residence-grid .res-img {
  position: relative;
  isolation: isolate
}

.residence-grid .res-img:after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none
}

.residence-grid .res-card:nth-child(even) .res-img:after {
  transform-origin: right
}

.res-card-copy h3 {
  will-change: transform, opacity
}

.res-card-copy span,
.res-card-copy p,
.res-card-copy i {
  will-change: transform, opacity
}

.amenities-home {
  position: relative;
  isolation: isolate;
  background: #0c1d16 !important;
  color: var(--white);
  min-height: 100vh
}

.amenities-home:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 45%, #25402f 0, transparent 35%), linear-gradient(90deg, #ffffff08 1px, transparent 1px);
  background-size: auto, 12.5vw 100%
}

.amenity-ghost {
  position: absolute;
  z-index: -1;
  left: -2vw;
  right: -2vw;
  top: 7vh;
  font: 400 clamp(9rem, 23vw, 25rem)/.64 var(--serif);
  letter-spacing: -.07em;
  color: #ffffff035;
  pointer-events: none
}

.amenity-ghost span {
  display: block
}

.amenity-ghost span:last-child {
  text-align: right;
  color: #b69a6a12
}

.amenity-orbit {
  position: absolute;
  z-index: 3;
  right: 6vw;
  top: 8vh;
  width: 110px;
  height: 110px;
  border: 1px solid #ffffff2c;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 400 1.4rem var(--serif)
}

.amenity-orbit:before,
.amenity-orbit:after {
  content: '';
  position: absolute;
  border: 1px solid #ffffff13;
  border-radius: 50%
}

.amenity-orbit:before {
  inset: 12px
}

.amenity-orbit:after {
  inset: 28px
}

.amenity-orbit i {
  position: absolute;
  top: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 6px #b69a6a24
}

.amenities-home .section-index {
  color: var(--gold)
}

.amenity-title {
  position: relative;
  z-index: 2
}

.amenity-title h2 em {
  color: #bfc7bb !important
}

.amenity-rail {
  position: relative;
  z-index: 2;
  align-items: flex-start;
  gap: 4vw
}

.amenity-rail article {
  width: 31vw;
  perspective: 1000px
}

.amenity-rail article:nth-child(2) {
  margin-top: 15vh
}

.amenity-rail article:nth-child(3) {
  margin-top: 3vh
}

.amenity-rail article:nth-child(4) {
  margin-top: 18vh
}

.amenity-rail img {
  height: 58vh;
  min-height: 460px;
  filter: saturate(.78);
  transition: filter .5s, transform .8s var(--ease)
}

.amenity-rail article:nth-child(1) img {
  clip-path: polygon(0 0, 92% 0, 100% 100%, 8% 100%)
}

.amenity-rail article:nth-child(2) img {
  border-radius: 48% 48% 3px 3px
}

.amenity-rail article:nth-child(3) img {
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%)
}

.amenity-rail article:nth-child(4) img {
  border-radius: 3px 3px 48% 48%
}

.amenity-rail article:hover img {
  filter: saturate(1);
  transform: scale(.985)
}

.amenity-rail article>span {
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 14px
}

.amenity-rail article>span:after {
  content: '';
  width: 44px;
  height: 1px;
  background: currentColor
}

.amenity-rail h3 {
  font-size: clamp(2rem, 3.2vw, 3.7rem);
  letter-spacing: -.035em
}

.manifesto {
  isolation: isolate;
  overflow: hidden
}

.manifesto>*:not(.manifesto-floral) {
  position: relative;
  z-index: 3
}

.manifesto-floral {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  margin: 0;
  will-change: transform
}

.manifesto-floral img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: saturate(.94) contrast(1.03) drop-shadow(0 20px 22px #5533171a)
}

.manifesto-floral-top {
  left: -8vw;
  top: -7vh;
  width: 43vw;
  transform-origin: left top
}

.manifesto-floral-bottom {
  right: -4vw;
  bottom: -2vh;
  width: 40vw;
  transform: rotate(180deg);
  transform-origin: center
}

.manifesto h2 {
  position: relative;
  z-index: 2
}

.manifesto-bottom {
  position: relative;
  z-index: 3
}

.manifesto>a.manifesto-side-cta {
  position: absolute;
  z-index: 6;
  right: 0;
  left: auto;
  top: 0;
  bottom: 0;
  width: 72px;
  height: auto;
  margin: 0;
  border-left: 1px solid #18201c24;
  background: #e1ddd3b8;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  writing-mode: vertical-rl;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .24em;
  transition: background .4s, color .4s;
  transform: none
}

.manifesto-side-cta:before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pine);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .65s var(--ease);
  z-index: -1
}

.manifesto-side-cta:hover {
  color: var(--white)
}

.manifesto-side-cta:hover:before {
  transform: scaleY(1)
}

.manifesto-side-cta i {
  font-style: normal;
  font-size: 18px;
  transform: rotate(90deg)
}

.botanical-story {
  height: 230vh;
  position: relative;
  background: #e9e5dc;
  color: #18201c;
  z-index: 3
}

.botanical-sticky {
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
  isolation: isolate
}

.botanical-sticky:before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#18201c0b 1px, transparent 1px), linear-gradient(90deg, #18201c0b 1px, transparent 1px);
  background-size: 10vw 10vw;
  mask-image: linear-gradient(90deg, #000, transparent 75%)
}

.botanical-kicker {
  position: absolute;
  z-index: 4;
  left: 6vw;
  top: 10vh;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .25em
}

.botanical-words {
  position: absolute;
  z-index: 4;
  left: 5vw;
  right: 5vw;
  top: 21vh;
  font: 400 clamp(5rem, 12vw, 13rem)/.74 var(--serif);
  letter-spacing: -.06em;
  pointer-events: none
}

.botanical-words span {
  display: block
}

.botanical-words span:last-child {
  text-align: right;
  color: #687467;
  font-style: italic
}

.botanical-window {
  position: absolute;
  z-index: 2;
  left: 35vw;
  top: 12vh;
  width: 31vw;
  height: 72vh;
  margin: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 0 round 48% 48% 3px 3px)
}

.botanical-window:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, #07100c9c)
}

.botanical-window img {
  transform: scale(1.22);
  object-position: 50% 60%
}

.botanical-window .botanical-flower-image {
  object-fit: cover;
  object-position: 42% 38%;
  background: #e9e5dc;
  filter: saturate(1.05) contrast(1.02)
}

.botanical-corner {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  will-change: transform
}

.botanical-corner img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: saturate(1.02) contrast(1.02) drop-shadow(0 20px 22px #55331718)
}

.manifesto-floral img,
.botanical-corner img {
  will-change: transform;
  transform-origin: 8% 8%;
  animation: botanical-stem-sway 5.8s ease-in-out infinite alternate
}

.manifesto-floral-bottom img,
.botanical-corner-bottom img {
  transform-origin: 92% 92%;
  animation-name: botanical-stem-sway-reverse;
  animation-duration: 6.7s;
  animation-delay: -2.3s
}

.botanical-corner-top img {
  animation-duration: 5.2s;
  animation-delay: -1.1s
}

@keyframes botanical-stem-sway {
  0% {
    transform: rotate(-.8deg) translate3d(-1px, 0, 0)
  }

  45% {
    transform: rotate(.65deg) translate3d(1px, -2px, 0)
  }

  100% {
    transform: rotate(1.15deg) translate3d(2px, 1px, 0)
  }
}

@keyframes botanical-stem-sway-reverse {
  0% {
    transform: rotate(.75deg) translate3d(1px, 0, 0)
  }

  52% {
    transform: rotate(-.55deg) translate3d(-1px, 2px, 0)
  }

  100% {
    transform: rotate(-1.05deg) translate3d(-2px, -1px, 0)
  }
}

@media(prefers-reduced-motion:reduce) {

  .manifesto-floral img,
  .botanical-corner img {
    animation: none
  }
}

.botanical-corner-top {
  left: -8vw;
  top: -7vh;
  width: 43vw
}

.botanical-corner-bottom {
  right: -4vw;
  bottom: -3vh;
  width: 40vw;
  transform: rotate(180deg)
}

@media(max-width:700px) {
  .botanical-corner-top {
    left: -24vw;
    top: -2vh;
    width: 88vw
  }

  .botanical-corner-bottom {
    right: -18vw;
    bottom: 2vh;
    width: 72vw
  }
}

.botanical-window figcaption {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 20px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .16em
}

.botanical-copy {
  position: absolute;
  z-index: 4;
  left: 7vw;
  bottom: 9vh;
  width: 26vw;
  max-width: 390px;
  font-size: 13px;
  line-height: 1.7
}

.botanical-link {
  position: absolute;
  z-index: 5;
  right: 7vw;
  bottom: 8vh;
  width: 128px;
  height: 128px;
  border: 1px solid #18201c;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .17em;
  line-height: 1.6;
  background: #e9e5dccc;
  backdrop-filter: blur(10px)
}

.botanical-link b {
  position: absolute;
  right: 15px;
  top: 12px;
  font-size: 14px;
  font-weight: 300
}

@media(max-width:700px) {
  .manifesto-floral-top {
    left: -24vw;
    top: -2vh;
    width: 88vw
  }

  .manifesto-floral-bottom {
    right: -18vw;
    bottom: 2vh;
    width: 72vw
  }

  .manifesto h2 {
    max-width: none
  }

  .manifesto>a.manifesto-side-cta {
    top: auto;
    left: auto;
    right: 20px;
    bottom: 28px;
    width: 170px;
    height: 48px;
    border: 1px solid #18201c55;
    writing-mode: horizontal-tb;
    flex-direction: row
  }

  .manifesto-side-cta i {
    transform: none
  }

  .botanical-story {
    height: 170vh
  }

  .botanical-kicker {
    left: 20px;
    top: 10vh
  }

  .botanical-words {
    left: 20px;
    right: 20px;
    top: 20vh;
    font-size: 20vw
  }

  .botanical-window {
    left: 15vw;
    top: 35vh;
    width: 70vw;
    height: 48vh
  }

  .botanical-copy {
    left: 20px;
    bottom: 6vh;
    width: 66vw;
    font-size: 11px
  }

  .botanical-link {
    right: 18px;
    bottom: 7vh;
    width: 88px;
    height: 88px;
    font-size: 7px
  }

  .botanical-window figcaption {
    display: none
  }
}

@media(max-width:700px) {
  .residence-progress {
    left: 12px
  }

  .residence-grid .res-img:after {
    display: none
  }
}

@media(max-width:700px) {
  .amenity-ghost {
    top: 14vh;
    font-size: 43vw
  }

  .amenity-orbit {
    right: 18px;
    top: 74px;
    width: 76px;
    height: 76px
  }

  .amenity-rail {
    gap: 28px
  }

  .amenity-rail article {
    width: 78vw
  }

  .amenity-rail article:nth-child(n) {
    margin-top: 0
  }

  .amenity-rail img {
    height: 52vh;
    min-height: 390px
  }

  .amenity-rail h3 {
    font-size: 10vw
  }
}

/* Amenities portal gallery */
.amenities-home {
  padding-top: 8vh !important;
  padding-bottom: 9vh !important;
  background: #0a1a13 !important
}

.amenities-home:before {
  background: radial-gradient(circle at 50% 34%, #2b4133 0, transparent 30%), linear-gradient(90deg, #ffffff08 1px, transparent 1px);
  background-size: auto, 12.5vw 100%
}

.amenity-ghost {
  top: auto;
  bottom: -8vh;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 34vw;
  line-height: .65;
  color: #ffffff025
}

.amenity-ghost span {
  display: inline
}

.amenity-ghost span:last-child {
  text-align: inherit;
  color: #ffffff025
}

.amenity-orbit {
  right: 7vw;
  top: 9vh;
  width: 82px;
  height: 82px;
  font-size: 1rem
}

.amenities-home>.section-index {
  margin-left: 7vw;
  margin-top: 0
}

.amenity-title {
  margin-top: 5vh;
  margin-bottom: 7vh;
  align-items: center
}

.amenity-title h2 {
  font-size: clamp(4.2rem, 8vw, 9rem) !important;
  line-height: .82;
  max-width: 900px
}

.amenity-title .text-link {
  align-self: flex-end;
  margin-bottom: 10px
}

.amenity-rail {
  gap: 2.2vw;
  align-items: center;
  padding-top: 2vh;
  padding-bottom: 4vh
}

.amenity-rail article,
.amenity-rail article:nth-child(n) {
  position: relative;
  width: 35vw;
  margin-top: 0;
  overflow: hidden;
  background: #13261d;
  border: 1px solid #ffffff18;
  box-shadow: 0 35px 80px #02090666;
  transform-origin: center bottom
}

.amenity-rail article:nth-child(even) {
  transform: translateY(7vh)
}

.amenity-rail img,
.amenity-rail article:nth-child(n) img {
  height: 65vh;
  min-height: 500px;
  clip-path: none;
  border-radius: 46% 46% 0 0;
  filter: saturate(.72) brightness(.82);
  transition: filter .6s, transform .9s var(--ease)
}

.amenity-rail article:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 46%, #07110cde 100%);
  pointer-events: none
}

.amenity-rail article>span {
  position: absolute;
  z-index: 3;
  left: 28px;
  top: 28px;
  width: 46px;
  height: 46px;
  border: 1px solid #ffffff70;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0;
  color: #fff;
  background: #08140d55;
  backdrop-filter: blur(8px)
}

.amenity-rail article>span:after {
  display: none
}

.amenity-rail h3 {
  position: absolute;
  z-index: 3;
  left: 28px;
  right: 28px;
  bottom: 25px;
  margin: 0;
  color: #fff;
  font-size: clamp(2.3rem, 3.5vw, 4rem);
  line-height: .95
}

.amenity-rail h3:after {
  content: 'Explore  ↗';
  display: block;
  margin-top: 16px;
  font: 300 8px/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold)
}

.amenity-rail article:hover img {
  filter: saturate(1) brightness(.95);
  transform: scale(1.035)
}

@media(max-width:700px) {
  .amenities-home {
    padding-top: 70px !important;
    padding-bottom: 70px !important
  }

  .amenity-ghost {
    bottom: 0;
    font-size: 48vw
  }

  .amenity-title {
    margin-top: 42px;
    margin-bottom: 48px
  }

  .amenity-title h2 {
    font-size: 17vw !important
  }

  .amenity-title .text-link {
    display: none
  }

  .amenity-orbit {
    top: 58px
  }

  .amenity-rail {
    gap: 18px
  }

  .amenity-rail article,
  .amenity-rail article:nth-child(n) {
    width: 82vw;
    transform: none
  }

  .amenity-rail img,
  .amenity-rail article:nth-child(n) img {
    height: 58vh;
    min-height: 420px
  }

  .amenity-rail h3 {
    font-size: 11vw
  }
}

@media(max-width:380px) {
  .topbar {
    padding: 0 12px
  }

  .wordmark {
    width: 38px
  }

  .header-inquire {
    min-width: 68px
  }

  .menu-links span {
    font-size: 1.55rem
  }

  .hero-title {
    font-size: 18vw
  }

  .about-hero-copy h1,
  .service-hero-copy h1,
  .properties-hero-copy h1,
  .contact-hero-copy h1,
  .location-hero-copy h1,
  .property-detail-page .detail-hero-copy h1 {
    font-size: 14vw
  }

  .property-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%
  }

  .property-filters button {
    width: 100%
  }

  .detail-specs {
    grid-template-columns: 1fr
  }

  .office-location-details>div {
    grid-template-columns: 1fr
  }

  .office-location-details span {
    margin-bottom: 7px
  }

  .footer-nav {
    grid-template-columns: 1fr
  }

  .footer-nav .footer-links:first-child {
    grid-column: auto
  }

  .footer-wordmark {
    font-size: 18vw
  }
}

/* Consistent, readable CTA controls */
.botanical-link,
.property-film-link,
.footer-visit,
.hero-cta {
  isolation: isolate;
  overflow: hidden;
  flex: none;
  aspect-ratio: 1;
  line-height: 1.45;
  transition: transform .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease)
}

.botanical-link {
  width: 136px;
  height: 136px;
  padding: 28px;
  background: #eee9df;
  color: var(--ink);
  border: 1px solid #18201c;
  box-shadow: 0 14px 40px #18201c24;
  backdrop-filter: none
}

.botanical-link span,
.property-film-link span,
.footer-visit span,
.hero-cta span {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 75%;
  margin: auto
}

.botanical-link b,
.property-film-link b,
.footer-visit b,
.hero-cta b {
  z-index: 2;
  line-height: 1;
  font-style: normal
}

.botanical-link b {
  top: 50%;
  right: 14px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  font-size: 15px;
  transform: translateY(-50%)
}

.botanical-link:hover {
  background: var(--pine);
  border-color: var(--pine);
  color: var(--white);
  transform: scale(1.045)
}

.property-film-link:hover,
.footer-visit:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  transform: scale(1.045)
}

.hero-cta:hover {
  transform: scale(1.045)
}

.botanical-link:focus-visible,
.property-film-link:focus-visible,
.footer-visit:focus-visible,
.hero-cta:focus-visible,
.header-inquire:focus-visible,
.round-link:focus-visible,
.text-link:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px
}

@media(max-width:700px) {
  .botanical-link {
    right: 18px;
    bottom: 6vh;
    width: 112px;
    height: 112px;
    padding: 22px;
    font-size: 7.5px;
    letter-spacing: .14em
  }

  .botanical-link b {
    right: 10px;
    top: 50%;
    width: 18px;
    height: 18px;
    font-size: 13px;
    transform: translateY(-50%)
  }

  .property-film-link {
    width: 104px;
    height: 104px
  }

  .footer-visit {
    width: 124px;
    height: 124px
  }

  .hero-cta {
    min-width: 94px;
    min-height: 94px
  }
}

.hero-overlap-wrap,
.era-exact-hero .hero,
.era-exact-hero .hero-media,
.era-exact-hero .hero-copy,
.era-exact-hero .manifesto {
  transform: translateZ(0);
  backface-visibility: hidden
}

.era-exact-hero .hero {
  will-change: transform, filter
}

.era-exact-hero .hero-media {
  will-change: transform, filter
}

.era-exact-hero .manifesto {
  will-change: transform, border-radius;
  transform-origin: center top;
  box-shadow: 0 -22px 70px #07100c38
}

@media(max-width:600px) {
  .era-exact-hero .manifesto {
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -14px 45px #07100c30
  }
}

.property-list .property-item>a {
  display: grid !important;
  grid-template-columns: minmax(300px, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 5vw
}

.property-list .property-item:nth-child(even)>a {
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr)
}

.property-list .property-image {
  height: 48vh;
  min-height: 380px
}

.property-list .property-info {
  padding: 4vw 0
}

.property-list .property-info h3 {
  max-width: 650px
}

.property-list .property-info p {
  margin-top: 20px
}

.property-list .property-info i {
  justify-self: end
}

@media(max-width:900px) {

  .property-list .property-item>a,
  .property-list .property-item:nth-child(even)>a {
    grid-template-columns: 1fr !important;
    gap: 25px
  }

  .property-list .property-item:nth-child(even) .property-image,
  .property-list .property-item:nth-child(even) .property-info {
    order: initial
  }

  .property-list .property-image {
    height: 52vh;
    min-height: 360px
  }

  .property-list .property-info {
    padding: 10px 0 28px
  }
}

@media(max-width:600px) {
  .property-list .property-image {
    height: 46vh;
    min-height: 320px
  }

  .property-list .property-info {
    padding-bottom: 20px
  }

  .property-list .property-info i {
    justify-self: start
  }
}

.about-team {
  position: relative;
  z-index: 3;
  padding: 9vw 7vw 10vw;
  background: var(--paper);
  color: var(--ink)
}

.about-team-list,
.about-expert-list {
  display: grid;
  gap: 22px
}

.about-team-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 7vh
}

.about-team-list article {
  border-top: 1px solid #18201c40;
  padding-top: 24px
}

.about-team-list article>span,
.about-expert-list article>span {
  display: block;
  color: var(--sage);
  font-size: 8px;
  letter-spacing: .16em;
  text-transform: uppercase
}

.about-team-list h3 {
  font: 400 clamp(1.9rem, 3vw, 3.4rem)/1 var(--serif);
  margin: 18px 0
}

.about-team-list p {
  font-size: 12px;
  line-height: 1.65;
  color: #4a554f
}

.about-team-list a {
  display: inline-block;
  margin-top: 14px;
  font-size: 10px;
  letter-spacing: .08em;
  word-break: break-word;
  color: #5d6b60
}

.about-expert-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 6vh;
  border-top: 1px solid #18201c40;
  padding-top: 28px
}

.about-expert-list article {
  background: #ded8cc;
  padding: 20px;
  min-height: 118px
}

.about-expert-list strong {
  display: block;
  font: 400 1.25rem/1.15 var(--serif);
  margin-bottom: 18px
}

.about-expert-list span {
  line-height: 1.55
}

@media(max-width:900px) {
  .about-team-list {
    grid-template-columns: 1fr
  }

  .about-expert-list {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:600px) {
  .about-team {
    padding: 70px 20px
  }

  .about-expert-list {
    grid-template-columns: 1fr
  }

  .about-team-list h3 {
    font-size: 10vw
  }
}

/* Lifestyle-led residence finder */
.residence-compass {
  position: relative;
  padding: 11vw 7vw 8vw;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  border-top: 1px solid #b69a6a55
}

.compass-intro {
  display: grid;
  grid-template-columns: .55fr 1.45fr .7fr;
  gap: 4vw;
  align-items: end;
  margin-bottom: 8vh
}

.compass-intro .section-index {
  align-self: start;
  color: #796a50
}

.compass-intro h2 {
  font: 400 clamp(3.8rem, 7vw, 7.5rem)/.86 var(--serif);
  margin: 0;
  letter-spacing: -.045em
}

.compass-intro h2 em {
  color: #667568
}

.compass-intro>p {
  max-width: 330px;
  margin: 0 0 5px;
  color: #4b5750;
  font-size: 12px;
  line-height: 1.75
}

.compass-paths {
  display: flex;
  height: 72vh;
  min-height: 570px;
  gap: 1px;
  background: var(--gold)
}

.compass-path {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--white);
  isolation: isolate;
  transition: flex .8s var(--ease)
}

.compass-path:after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, #10231a42 0%, #10231a0d 34%, #08130ee8 100%)
}

.compass-path img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.02);
  transform: scale(1.06);
  transition: transform 1.1s var(--ease), filter .7s
}

.compass-path:hover,
.compass-path:focus-visible {
  flex: 1.38
}

.compass-path:hover img,
.compass-path:focus-visible img {
  transform: scale(1);
  filter: saturate(.94) contrast(1.02)
}

.compass-number {
  position: absolute;
  left: 24px;
  top: 24px;
  width: 42px;
  height: 42px;
  border: 1px solid #eadcbe;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #f4e8cf;
  background: #10231a45;
  backdrop-filter: blur(6px);
  font-size: 8px;
  letter-spacing: .12em
}

.compass-copy {
  position: absolute;
  left: 2.2vw;
  right: 2.2vw;
  bottom: 2.5vw
}

.compass-copy>span {
  display: block;
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #d7bd88
}

.compass-copy h3 {
  font: 400 clamp(2.8rem, 4.6vw, 5.2rem)/.82 var(--serif);
  margin: 18px 0 24px;
  color: #fff
}

.compass-copy p {
  max-width: 270px;
  font-size: 11px;
  line-height: 1.6;
  color: #f6f3ecdb
}

.compass-copy i {
  display: block;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  color: #e5cf9f;
  font-style: normal;
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: max-height .6s var(--ease), margin .6s var(--ease), opacity .4s
}

.compass-path:hover .compass-copy i,
.compass-path:focus-visible .compass-copy i {
  max-height: 30px;
  margin-top: 22px;
  opacity: 1
}

.compass-foot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding-top: 30px;
  color: #59645d;
  font-size: 8px;
  letter-spacing: .16em;
  text-transform: uppercase
}

.compass-foot>i {
  height: 1px;
  background: #8d947d66
}

.compass-foot a {
  color: var(--ink);
  font-size: 9px
}

.compass-foot b {
  margin-left: 20px;
  color: #796a50;
  font-weight: 400
}

.compass-path:focus-visible {
  outline: 2px solid #e2c98f;
  outline-offset: -4px
}

@media(max-width:900px) {
  .compass-intro {
    grid-template-columns: 1fr 1fr
  }

  .compass-intro .section-index {
    grid-column: 1/-1
  }

  .compass-intro>p {
    justify-self: end
  }

  .compass-paths {
    height: 64vh;
    min-height: 500px
  }

  .compass-copy {
    left: 24px;
    right: 24px;
    bottom: 28px
  }

  .compass-copy h3 {
    font-size: 6vw
  }
}

@media(max-width:600px) {
  .residence-compass {
    padding: 75px 20px 65px
  }

  .compass-intro {
    display: block;
    margin-bottom: 45px
  }

  .compass-intro .section-index {
    margin-bottom: 38px
  }

  .compass-intro h2 {
    font-size: 15vw
  }

  .compass-intro>p {
    margin-top: 28px;
    font-size: 12px
  }

  .compass-paths {
    display: grid;
    height: auto;
    min-height: 0;
    gap: 10px;
    background: transparent
  }

  .compass-path {
    height: 68vh;
    min-height: 470px
  }

  .compass-path:hover,
  .compass-path:focus-visible {
    flex: none
  }

  .compass-path img {
    filter: saturate(.82)
  }

  .compass-copy h3 {
    font-size: 14vw
  }

  .compass-copy i {
    max-height: 30px;
    margin-top: 20px;
    opacity: 1
  }

  .compass-foot {
    grid-template-columns: 1fr auto;
    padding-top: 26px
  }

  .compass-foot>i {
    display: none
  }

  .compass-foot a {
    text-align: right;
    line-height: 1.5
  }

  .compass-foot b {
    margin-left: 8px
  }
}

.wordmark svg {
  display: none !important
}

.wordmark:after {
  content: 'UNICORN';
  display: block;
  font: 400 18px/1 var(--serif);
  letter-spacing: .16em;
  color: currentColor
}

.wordmark {
  min-width: 125px;
  display: flex;
  align-items: center;
  justify-content: center
}

@media(max-width:600px) {
  .wordmark {
    min-width: 92px;
    width: auto !important
  }

  .wordmark:after {
    font-size: 14px;
    letter-spacing: .12em
  }
}

/* Wheel-driven horizontal story chapters */
.horizontal-showcase {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: var(--paper);
  margin-top: -1px;
  transform: translateZ(0);
  backface-visibility: hidden;
  border-radius: 30px 30px 0 0;
  box-shadow: 0 -22px 65px #07100c32
}

.horizontal-track {
  display: flex;
  width: max-content;
  height: 100%;
  will-change: transform
}

.horizontal-track>.horizontal-panel {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100svh;
  min-height: 650px;
  overflow: hidden
}

.era-exact-hero .hero-showcase .hero-panel {
  position: relative;
  top: auto;
  z-index: 1;
  transform-origin: center center
}

.hero-showcase .hero-panel .hero-media {
  transform: none !important
}

.hero-showcase .hero-panel:not(:first-child) .hero-copy {
  opacity: 1;
  transform: none
}

.hero-showcase .hero-panel:not(:first-child) .hero-title {
  margin-top: 3vh
}

.hero-showcase .hero-panel:not(:first-child) .hero-shade {
  background: linear-gradient(180deg, #07100c9c 0%, transparent 38%, #07100cbd 100%), linear-gradient(90deg, #07100c75, transparent 65%)
}

.horizontal-track>.manifesto {
  min-height: 100svh
}

.horizontal-showcase .horizontal-track>.manifesto {
  transform: none;
  border-radius: 0;
  box-shadow: none
}

.horizontal-showcase .horizontal-track>.manifesto:before {
  display: none
}

.horizontal-track>.manifesto:not(:first-child) {
  border-radius: 0;
  box-shadow: none
}

.horizontal-track>.manifesto:nth-child(2) {
  background: #e5e1d7
}

.horizontal-track>.manifesto:nth-child(3) {
  background: #ded9ce
}

.horizontal-track>.manifesto:nth-child(4) {
  background: #e9e5dc
}

.horizontal-track>.manifesto .manifesto-floral-top {
  left: -8vw;
  right: auto
}

.horizontal-track>.manifesto .manifesto-floral-bottom {
  left: auto;
  right: -4vw
}

.horizontal-track>.manifesto .manifesto-floral-bottom img {
  object-position: right bottom
}

.horizontal-panel:not(.manifesto) {
  position: relative;
  padding: clamp(72px, 8vw, 125px) 7vw clamp(70px, 7vw, 110px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 6vw;
  isolation: isolate
}

.horizontal-panel:not(.manifesto)>.section-index {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 3
}

.horizontal-panel:not(.manifesto)>.manifesto-side {
  position: static;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  text-align: right;
  z-index: 3
}

.horizontal-panel:not(.manifesto)>h2 {
  grid-column: 1/-1;
  grid-row: 2;
  align-self: center;
  position: relative;
  z-index: 3;
  margin: clamp(80px, 10vh, 135px) 0;
  font: 400 clamp(4.2rem, 8.2vw, 8.8rem)/.88 var(--serif);
  letter-spacing: -.045em
}

.horizontal-panel:not(.manifesto)>h2 em {
  color: var(--sage)
}

.horizontal-panel:not(.manifesto)>.manifesto-bottom {
  grid-column: 1/-1;
  grid-row: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 6vw;
  align-items: end;
  position: relative;
  z-index: 3
}

.horizontal-panel:not(.manifesto)>.manifesto-bottom>p {
  grid-column: 2;
  max-width: 520px;
  margin: 0;
  font-size: clamp(1rem, 1.25vw, 1.22rem);
  line-height: 1.55
}

.horizontal-panel:not(.manifesto)>.manifesto-bottom>.text-link {
  grid-column: 1;
  grid-row: 1
}

.panel-photo {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  pointer-events: none
}

.panel-photo:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 45%, #101a1535)
}

.panel-photo img {
  transform: scale(1.08);
  filter: saturate(.88)
}

.panel-number {
  position: absolute;
  right: 4vw;
  bottom: -8vh;
  font: 400 25vw/1 var(--serif);
  color: #18201c0a;
  z-index: 0
}

.horizontal-progress {
  position: absolute;
  z-index: 8;
  left: 7vw;
  right: 7vw;
  bottom: 28px;
  height: 1px;
  background: #18201c24
}

.horizontal-progress i {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left
}

.horizontal-hint {
  position: absolute;
  z-index: 8;
  right: 7vw;
  bottom: 42px;
  display: flex;
  gap: 13px;
  align-items: center;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .22em
}

.horizontal-hint b {
  font-size: 17px;
  font-weight: 300
}

@media(max-width:700px) {
  .horizontal-showcase {
    height: auto;
    overflow: visible
  }

  .horizontal-track {
    display: block;
    width: 100%;
    height: auto
  }

  .horizontal-track>.horizontal-panel {
    width: 100%;
    height: auto;
    min-height: 100svh
  }

  .hero-showcase .hero-panel:not(:first-child) {
    display: none
  }

  .horizontal-panel:not(.manifesto):not(.hero-panel) {
    padding: 75px 20px 85px;
    display: block
  }

  .horizontal-panel:not(.manifesto)>.manifesto-side {
    display: none
  }

  .horizontal-panel:not(.manifesto)>h2 {
    font-size: clamp(3.4rem, 15vw, 5.5rem);
    line-height: .9;
    margin: 100px 0 80px
  }

  .horizontal-panel:not(.manifesto)>.manifesto-bottom {
    display: flex;
    flex-direction: column;
    gap: 45px
  }

  .horizontal-panel--home>h2,
  .horizontal-panel--home>.section-index {
    margin-left: 0
  }

  .horizontal-panel--home>.manifesto-bottom {
    padding-left: 0
  }

  .panel-photo {
    opacity: .25 !important;
    width: 75vw !important;
    height: 48vh !important;
    right: -20vw !important;
    left: auto !important;
    top: auto !important;
    bottom: 0 !important
  }

  .horizontal-progress,
  .horizontal-hint {
    display: none
  }
}

/* Amenities UI refinement — animation hooks intentionally unchanged */
.amenities-home {
  padding: 6vh 0 8vh !important;
  background: #0b1c15 !important
}

.amenities-home:before {
  background: radial-gradient(circle at 62% 30%, #243c2e 0, transparent 32%), linear-gradient(90deg, #ffffff07 1px, transparent 1px);
  background-size: auto, 12.5vw 100%
}

.amenities-home>.section-index {
  margin-left: 6vw;
  margin-right: 6vw;
  color: #c7ae7d
}

.amenity-title {
  margin: 3.5vh 6vw 5vh;
  align-items: flex-end;
  gap: 5vw;
  overflow: visible
}

.amenity-title h2 {
  max-width: 912px;
  font-size: clamp(3.4rem, 6.1vw, 7rem) !important;
  line-height: .86;
  letter-spacing: -.045em
}

.amenity-title .text-link {
  margin: 0 0 8px;
  padding: 12px 18px;
  border: 1px solid #ffffff45;
  border-radius: 999px;
  gap: 24px;
  color: var(--white);
  white-space: nowrap;
  transition: background .35s, color .35s, border-color .35s
}

.amenity-title .text-link:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--pine)
}

.amenity-orbit {
  right: 6vw;
  top: 5.5vh;
  width: 64px;
  height: 64px;
  font-size: .8rem;
  opacity: .75
}

.amenity-orbit:before {
  inset: 8px
}

.amenity-orbit:after {
  inset: 19px
}

.amenity-ghost {
  display: none
}

.amenity-rail {
  gap: 1.6vw;
  padding: 0 6vw 3vh;
  align-items: flex-start
}

.amenity-rail article,
.amenity-rail article:nth-child(n) {
  width: 28vw;
  margin-top: 0;
  transform: none;
  background: #12251c;
  border: 1px solid #ffffff1f;
  border-radius: 18px;
  box-shadow: 0 22px 55px #02090652
}

.amenity-rail article:nth-child(even) {
  margin-top: 5vh
}

.amenity-rail img,
.amenity-rail article:nth-child(n) img {
  height: 48vh;
  min-height: 350px;
  clip-path: none;
  border-radius: 18px;
  filter: saturate(.82) brightness(.8)
}

.amenity-rail article:after {
  border-radius: 18px;
  background: linear-gradient(180deg, #06100b05 34%, #06100be8 100%)
}

.amenity-rail article>span {
  left: 18px;
  top: 18px;
  width: 38px;
  height: 38px;
  font-size: 8px
}

.amenity-rail h3 {
  left: 20px;
  right: 20px;
  bottom: 20px;
  font-size: clamp(1.7rem, 2.4vw, 2.8rem);
  line-height: 1
}

.amenity-rail h3:after {
  margin-top: 11px;
  font-size: 7px
}

@media(max-width:700px) {
  .amenities-home {
    padding: 65px 0 70px !important
  }

  .amenities-home>.section-index {
    margin-left: 20px;
    margin-right: 20px
  }

  .amenity-title {
    margin: 38px 20px 42px
  }

  .amenity-title h2 {
    font-size: 14vw !important;
    line-height: .9
  }

  .amenity-orbit {
    right: 18px;
    top: 52px;
    width: 58px;
    height: 58px
  }

  .amenity-ghost {
    font-size: 45vw
  }

  .amenity-rail {
    gap: 16px;
    padding-left: 20px;
    padding-right: 20px
  }

  .amenity-rail article,
  .amenity-rail article:nth-child(n) {
    width: 78vw;
    margin-top: 0;
    border-radius: 14px
  }

  .amenity-rail img,
  .amenity-rail article:nth-child(n) img {
    height: 52vh;
    min-height: 390px;
    border-radius: 14px
  }

  .amenity-rail article:after {
    border-radius: 14px
  }

  .amenity-rail h3 {
    font-size: 9vw
  }
}

/* Distinct appointment finale */
.closing {
  height: 100svh;
  min-height: 720px;
  overflow: hidden;
  isolation: isolate;
  background: var(--pine)
}

.closing-image:after {
  background: linear-gradient(90deg, #07110df2 0%, #07110dcc 32%, #07110d35 62%, #07110d0d 100%), linear-gradient(180deg, #07110d24 45%, #07110d9c 100%)
}

.closing:before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 24px;
  border: 1px solid #ffffff26;
  pointer-events: none
}

.closing:after {
  content: '23.8103° N  /  90.4125° E';
  position: absolute;
  z-index: 3;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 7px;
  letter-spacing: .28em;
  color: #ffffff8c
}

.closing-copy {
  z-index: 4;
  left: 6vw;
  top: 50%;
  width: min(560px, 42vw);
  padding: 54px 58px 48px;
  transform: translateY(-50%);
  border-left: 1px solid #b69a6a;
  border-top: 1px solid #ffffff30;
  background: linear-gradient(135deg, #0b1913d9, #0b191382);
  box-shadow: 32px 38px 90px #02090659;
  backdrop-filter: blur(10px)
}

.closing-copy:before {
  content: '10';
  position: absolute;
  right: 22px;
  top: 18px;
  font: 400 11px var(--sans);
  letter-spacing: .18em;
  color: var(--gold)
}

.closing-copy:after {
  content: '';
  position: absolute;
  right: -90px;
  bottom: 0;
  width: 90px;
  height: 1px;
  background: var(--gold)
}

.closing-copy>.micro {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--gold)
}

.closing-copy>.micro:before {
  content: '';
  width: 34px;
  height: 1px;
  background: currentColor
}

.closing-copy h2 {
  font-size: clamp(4.1rem, 6.4vw, 7.4rem);
  line-height: .8;
  margin: 7vh 0 5vh;
  letter-spacing: -.05em
}

.closing-copy h2 em {
  display: block;
  margin-left: .42em;
  color: #d7c49b
}

.closing-copy p {
  max-width: 360px;
  margin: 0;
  line-height: 1.7;
  color: #f6f3ecb8
}

.closing .hero-cta {
  position: absolute;
  right: -74px;
  bottom: 38px;
  width: 124px;
  height: 124px;
  margin: 0;
  background: var(--gold);
  border-radius: 50%;
  color: var(--pine);
  box-shadow: 0 18px 45px #02090670
}

.closing .hero-cta svg {
  stroke: #14231c80
}

.closing .hero-cta:hover {
  background: var(--white);
  transform: scale(1.05)
}

@media(max-width:800px) {
  .closing {
    min-height: 760px
  }

  .closing:before {
    inset: 12px
  }

  .closing:after {
    display: none
  }

  .closing-image:after {
    background: linear-gradient(180deg, #07110d8c 0%, #07110de8 72%, #07110df5 100%)
  }

  .closing-copy {
    left: 20px;
    right: 20px;
    top: auto;
    bottom: 38px;
    width: auto;
    padding: 38px 30px 92px;
    transform: none
  }

  .closing-copy:after {
    display: none
  }

  .closing-copy h2 {
    font-size: clamp(3.7rem, 15vw, 6rem);
    margin: 44px 0 30px
  }

  .closing-copy h2 em {
    margin-left: 0
  }

  .closing-copy p {
    font-size: 12px;
    max-width: 290px
  }

  .closing .hero-cta {
    right: 22px;
    bottom: 20px;
    width: 96px;
    height: 96px
  }

  .closing .hero-cta span {
    font-size: 7px
  }
}

/* Open cinematic finale — no conventional content card */
@media(min-width:801px) {
  .closing:before {
    inset: 32px;
    background: linear-gradient(90deg, transparent 0 31%, #ffffff1c 31% 31.06%, transparent 31.06% 73%, #ffffff12 73% 73.06%, transparent 73.06%);
    border-color: #ffffff1f
  }

  .closing-copy {
    left: 5vw;
    top: 20vh;
    width: 62vw;
    height: 68vh;
    padding: 0;
    transform: none;
    border: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none
  }

  .closing-copy:before {
    content: 'PRIVATE APPOINTMENT  /  10';
    left: -1px;
    right: auto;
    top: 0;
    padding-left: 48px;
    font: 300 8px var(--sans);
    letter-spacing: .25em;
    color: var(--gold);
    white-space: nowrap
  }

  .closing-copy:after {
    right: auto;
    left: 0;
    top: 3px;
    bottom: auto;
    width: 34px;
    background: var(--gold)
  }

  .closing-copy>.micro {
    position: absolute;
    left: 0;
    bottom: 2vh;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 8px;
    color: #ffffff82
  }

  .closing-copy>.micro:before {
    width: 1px;
    height: 52px
  }

  .closing-copy h2 {
    position: absolute;
    left: 4vw;
    top: 8vh;
    margin: 0;
    width: 58vw;
    font-size: clamp(5rem, 9.2vw, 10.5rem);
    line-height: .72;
    letter-spacing: -.06em;
    text-shadow: 0 10px 40px #0209064a
  }

  .closing-copy h2 br {
    display: none
  }

  .closing-copy h2 em {
    display: block;
    margin: .18em 0 0 1.05em;
    color: #d6c297
  }

  .closing-copy p {
    position: absolute;
    left: 4.5vw;
    bottom: 1vh;
    width: 340px;
    padding-top: 18px;
    border-top: 1px solid #ffffff38;
    font-size: 12px;
    color: #f6f3ecb5
  }

  .closing .hero-cta {
    right: -20px;
    bottom: -10px;
    width: 142px;
    height: 142px;
    background: #c4a66f;
    border: 1px solid #eadbbd;
    box-shadow: 0 0 0 10px #c4a66f18, 0 24px 55px #02090675
  }

  .closing .hero-cta:before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid #14231c35;
    border-radius: 50%
  }

  .closing .hero-cta b {
    right: 25px;
    top: 22px
  }
}

@media(max-width:800px) {
  .closing-copy {
    background: linear-gradient(180deg, transparent, #07110ddd);
    border-left: 1px solid var(--gold);
    box-shadow: none;
    backdrop-filter: none
  }

  .closing-copy:before {
    content: 'PRIVATE APPOINTMENT  /  10';
    left: 28px;
    right: auto;
    top: 24px;
    font-size: 7px;
    white-space: nowrap
  }

  .closing-copy>.micro {
    display: none
  }

  .closing-copy h2 {
    margin-top: 32px
  }

  .closing-copy h2 br {
    display: none
  }

  .closing-copy h2 em {
    display: block;
    margin: .08em 0 0 .35em
  }

  .closing .hero-cta {
    background: #c4a66f;
    color: var(--pine)
  }
}

/* Image-free modern closing composition */
.closing {
  background: linear-gradient(90deg, #e9e5dc 0 66%, #10231a 66% 100%);
  color: var(--ink)
}

.closing-image {
  display: block;
  background: linear-gradient(90deg, transparent 0 66%, #10231a 66%);
  pointer-events: none
}

.closing-image img {
  display: none
}

.closing-image:before {
  content: '';
  position: absolute;
  right: 7vw;
  top: 50%;
  width: 25vw;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border: 1px solid #d6c29742;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #d6c29724 0 1px, transparent 1px 42px)
}

.closing-image:after {
  background: linear-gradient(90deg, transparent 0 65.9%, #ffffff10 66% 66.1%, transparent 66.1%), linear-gradient(#18201c0b 1px, transparent 1px);
  background-size: auto, 100% 12.5vh
}

.closing:before {
  background: linear-gradient(90deg, transparent 0 31%, #18201c18 31% 31.06%, transparent 31.06% 66%, #d6c29735 66% 66.06%, transparent 66.06%);
  border-color: #18201c28
}

.closing:after {
  color: #d6c2978f
}

@media(min-width:801px) {
  .closing-copy>.micro {
    color: #66766c
  }

  .closing-copy h2 {
    color: var(--ink);
    text-shadow: none
  }

  .closing-copy h2 em {
    color: #73806f
  }

  .closing-copy p {
    color: #35423b;
    border-top-color: #18201c35
  }

  .closing-copy:before {
    color: #796a4f
  }

  .closing-copy:after {
    background: #9d8459
  }

  .closing .hero-cta {
    right: -34px;
    background: #c9ab72;
    border-color: #8c744d;
    color: #14231c;
    box-shadow: 0 0 0 12px #c9ab7224, 0 24px 50px #07110d36
  }

  .closing .hero-cta:hover {
    background: #10231a;
    color: #fff
  }

  .closing .hero-cta svg {
    stroke: currentColor
  }
}

@media(max-width:800px) {
  .closing {
    background: linear-gradient(180deg, #e9e5dc 0 68%, #10231a 68% 100%);
    color: var(--ink)
  }

  .closing-image {
    background: none
  }

  .closing-image:before {
    right: -24vw;
    top: 76%;
    width: 76vw;
    border-color: #d6c29735
  }

  .closing-image:after {
    background: linear-gradient(#18201c0b 1px, transparent 1px);
    background-size: 100% 12.5vh
  }

  .closing-copy {
    background: none;
    border-left-color: #9d8459;
    color: var(--ink)
  }

  .closing-copy h2 {
    color: var(--ink)
  }

  .closing-copy h2 em {
    color: #73806f
  }

  .closing-copy p {
    color: #435048
  }

  .closing-copy:before {
    color: #796a4f
  }

  .closing .hero-cta {
    background: #c9ab72;
    border: 1px solid #8c744d;
    color: #14231c
  }
}

/* Minimal finale */
.closing {
  background: linear-gradient(90deg, #ebe7de 0 68%, #10231a 68% 100%)
}

.closing:before {
  inset: 26px;
  background: none;
  border: 1px solid #18201c20
}

.closing:after {
  content: 'DHAKA  ·  BANGLADESH';
  right: 38px;
  color: #d7c49b8c
}

.closing-image {
  background: none
}

.closing-image:after {
  background: none
}

.closing-image:before {
  display: none
}

@media(min-width:801px) {
  .closing-copy {
    left: 7vw;
    top: 14vh;
    width: 58vw;
    height: 72vh
  }

  .closing-copy:before {
    content: 'A PRIVATE APPOINTMENT';
    left: 0;
    top: 0;
    padding: 0;
    font-size: 8px;
    letter-spacing: .28em;
    color: #806d4d
  }

  .closing-copy:after {
    left: 0;
    top: 28px;
    width: 46px;
    background: #9d8459
  }

  .closing-copy>.micro {
    display: none
  }

  .closing-copy h2 {
    left: 0;
    top: 12vh;
    width: 55vw;
    font-size: clamp(4.8rem, 7.4vw, 8.4rem);
    line-height: .78;
    letter-spacing: -.052em
  }

  .closing-copy h2 em {
    margin: .14em 0 0 .8em;
    color: #748074
  }

  .closing-copy p {
    left: 0;
    bottom: 2vh;
    width: 330px;
    padding-top: 16px
  }

  .closing .hero-cta {
    right: -72px;
    bottom: 0;
    width: 126px;
    height: 126px
  }
}

@media(max-width:800px) {
  .closing {
    background: linear-gradient(180deg, #ebe7de 0 76%, #10231a 76% 100%)
  }

  .closing:before {
    inset: 12px
  }

  .closing:after {
    display: none
  }

  .closing-image:before {
    content: 'A';
    right: -7vw;
    top: 79%;
    width: auto;
    transform: translateY(-50%);
    font-size: 55vw;
    color: #d7c49b10
  }

  .closing-copy {
    left: 28px;
    right: 28px;
    bottom: 42px;
    padding: 34px 0 112px;
    border: 0
  }

  .closing-copy:before {
    content: 'A PRIVATE APPOINTMENT';
    left: 0;
    top: 0;
    padding: 0;
    color: #806d4d
  }

  .closing-copy h2 {
    margin: 58px 0 28px;
    font-size: 14vw;
    line-height: .82
  }

  .closing-copy h2 em {
    margin: .12em 0 0 .35em
  }

  .closing-copy p {
    max-width: 270px
  }

  .closing .hero-cta {
    right: 0;
    bottom: 10px;
    width: 94px;
    height: 94px
  }
}

/* Cool sage canvas for the residence compass */
.residence-compass {
  background: #dde2dc;
  border-top-color: #8d9a8f66
}

.home-footer {
  padding-top: 4vw
}

@media(max-width:600px) {
  .home-footer {
    padding-top: 42px
  }
}

.whatsapp-float,
.home-footer .to-top {
  position: fixed;
  z-index: 850;
  right: 18px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 8px 24px #07110d38;
  transition: transform .3s var(--ease), background-color .3s var(--ease)
}

.whatsapp-float {
  bottom: 80px;
  background: #25d366
}

.whatsapp-float svg {
  width: 22px;
  height: 22px;
  fill: currentColor
}

.home-footer .to-top {
  bottom: 22px;
  background: #079b83;
  font-size: 0;
  letter-spacing: 0
}

.home-footer .to-top:before {
  content: '\2191';
  font: 300 21px/1 var(--sans)
}

.whatsapp-float:hover,
.home-footer .to-top:hover {
  transform: translateY(-3px)
}

.whatsapp-float:hover {
  background: #1ebc59
}

.home-footer .to-top:hover {
  background: #087f70
}

@media(min-width:701px) {

  .botanical-home .whatsapp-float,
  .botanical-home .home-footer .to-top {
    right: 96px
  }

  .botanical-home.hero-controls-clear .whatsapp-float,
  .botanical-home.hero-controls-clear .home-footer .to-top {
    right: 18px
  }
}

@media(max-width:600px) {

  .whatsapp-float,
  .home-footer .to-top {
    right: 14px;
    width: 44px;
    height: 44px
  }

  .whatsapp-float {
    bottom: 72px
  }

  .home-footer .to-top {
    bottom: 16px
  }

  .botanical-home.hero-controls-clear .whatsapp-float,
  .botanical-home.hero-controls-clear .home-footer .to-top {
    left: 14px;
    right: auto
  }
}

/* Footer readability */
.home-footer .footer-nav {
  align-items: start
}

.home-footer .footer-links>span {
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .16em;
  margin-bottom: 18px
}

.home-footer .footer-links a,
.home-footer .footer-links p {
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: 0
}

.home-footer .footer-links a i {
  font-size: 11px
}

.home-footer .footer-bottom {
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .1em
}

@media(max-width:900px) {

  .home-footer .footer-links a,
  .home-footer .footer-links p {
    font-size: 14px
  }

  .home-footer .footer-bottom {
    font-size: 11px
  }
}

@media(max-width:600px) {
  .home-footer .footer-links>span {
    font-size: 10px
  }

  .home-footer .footer-links a,
  .home-footer .footer-links p {
    font-size: 14px;
    line-height: 1.7
  }

  .home-footer .footer-bottom {
    font-size: 10px;
    line-height: 1.55
  }
}

/* Animated bougainvillea layers */
.flower-video,
.manifesto-floral video,
.botanical-corner video,
.section-flower video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  mix-blend-mode: screen;
  pointer-events: none
}

.flower-video {
  position: absolute;
  z-index: 2;
  aspect-ratio: 1;
  filter: saturate(.88) contrast(1.05) brightness(.92);
  opacity: .22;
  transform-origin: center;
  user-select: none
}

.hero-copy,
.hero-cta,
.scroll-cue {
  z-index: 4
}

.manifesto-floral,
.botanical-corner,
.section-flower {
  aspect-ratio: 1
}

.manifesto-floral video {
  opacity: 1;
}

.botanical-corner video {
  opacity: 1;
}

.section-flower {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none
}

.flower-video-amenities {
  left: -3vw;
  top: -8vh;
  width: min(52vw, 760px);
  transform: rotate(0deg)
}

.amenities-home>.section-index,
.amenity-title,
.amenity-rail,
.residence-compass>.compass-intro,
.residence-compass>.compass-paths,
.residence-compass>.compass-foot {
  position: relative;
  z-index: 3
}

@media(max-width:900px) {
  .flower-video-amenities {
    right: -28vw;
    top: -4vh;
    width: 76vw;
    opacity: .2
  }
}

@media(max-width:700px) {

  .manifesto-floral video,
  .botanical-corner video {
    opacity: .32
  }

  .flower-video-amenities {
    right: -54vw;
    top: 0;
    width: 122vw;
    opacity: .16
  }
}

@media(prefers-reduced-motion:reduce) {

  .flower-video,
  .manifesto-floral video,
  .botanical-corner video,
  .section-flower video {
    display: none
  }
}

@supports not (mix-blend-mode:screen) {

  .flower-video,
  .manifesto-floral video,
  .botanical-corner video,
  .section-flower video {
    display: none
  }
}

/* Viewport overflow guard */
html,
body {
  overflow-x: hidden
}

/* Place intro flowers as quiet corner layers */
.horizontal-showcase .manifesto .manifesto-floral {
  z-index: 1;
  pointer-events: none
}

.horizontal-showcase .manifesto .manifesto-floral video {
  opacity: 1;
  /* filter: saturate(.68) contrast(1.02) brightness(.94) drop-shadow(0 20px 26px #55331716) */
}

.horizontal-track>.manifesto .manifesto-floral-top {
  left: 0vw;
  right: auto;
  top: -1vh;
  width: min(31vw, 500px)
}

.horizontal-track>.manifesto .manifesto-floral-bottom {
  left: auto;
  right: -1vh;
  bottom: -1vh;
  width: min(30vw, 500px);
  transform: translate(-1.7206%, -1.459%) translate3d(0px, 0px, 0px) rotate(90deg) skew(360deg)
}

.horizontal-showcase .manifesto .manifesto-bottom>p {
  max-width: clamp(360px, 35vw, 520px)
}

.horizontal-showcase .manifesto .section-index,
.horizontal-showcase .manifesto .manifesto-side,
.horizontal-showcase .manifesto h2,
.horizontal-showcase .manifesto .manifesto-bottom {
  position: relative;
  z-index: 4
}

.horizontal-showcase .manifesto .manifesto-side-cta {
  z-index: 6
}

@media(max-width:900px) {
  .horizontal-track>.manifesto .manifesto-floral-top {
    left: -15vw;
    top: -10vh;
    width: 48vw
  }

  .horizontal-track>.manifesto .manifesto-floral-bottom {
    right: -27vw;
    bottom: -16vh;
    width: 50vw
  }

  .horizontal-showcase .manifesto .manifesto-floral video {
    opacity: .22
  }
}

@media(min-width:701px) and (max-width:900px) {
  .horizontal-showcase .manifesto .manifesto-bottom {
    padding-right: 92px
  }

  .horizontal-track>.manifesto .manifesto-floral-bottom {
    right: -34vw;
    width: 46vw
  }
}

@media(max-width:700px) {
  .horizontal-track>.manifesto .manifesto-floral-top {
    left: -24vw;
    top: -8vh;
    width: 68vw
  }

  .horizontal-track>.manifesto .manifesto-floral-bottom {
    right: -34vw;
    bottom: -12vh;
    width: 70vw
  }

  .horizontal-showcase .manifesto .manifesto-bottom>.text-link {
    align-self: flex-start
  }

  .horizontal-showcase .manifesto>a.manifesto-side-cta {
    left: 20px;
    right: auto;
    bottom: 8px
  }

  .horizontal-showcase .manifesto .manifesto-floral video {
    opacity: .18
  }
}

/* Keep the botanical story readable through normal scrolling */
.botanical-story {
  height: auto;
  min-height: 100svh;
  overflow: hidden
}

.botanical-sticky {
  position: relative;
  top: auto;
  height: auto;
  min-height: 100svh;
  padding: clamp(110px, 9vw, 150px) 7vw clamp(95px, 8vw, 130px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 34vw);
  grid-template-areas: "kicker image" "words image" "copy image" "link image";
  gap: clamp(22px, 3.5vw, 58px) clamp(36px, 6vw, 96px);
  align-items: center;
  overflow: hidden
}

.botanical-kicker {
  position: relative;
  z-index: 4;
  left: auto;
  top: auto;
  grid-area: kicker;
  margin: 0
}

.botanical-words {
  position: relative;
  z-index: 4;
  left: auto;
  right: auto;
  top: auto;
  grid-area: words;
  max-width: 900px;
  font-size: clamp(4rem, 7.4vw, 8.5rem);
  line-height: .88;
  transform: none !important
}

.botanical-words span {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important
}

.botanical-words span:last-child {
  text-align: left;
  margin-left: clamp(32px, 8vw, 110px)
}

.botanical-window {
  position: relative;
  z-index: 3;
  left: auto;
  top: auto;
  grid-area: image;
  width: 100%;
  height: clamp(420px, 66vh, 660px);
  clip-path: inset(0 0 0 0 round 48% 48% 3px 3px) !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important
}

.botanical-window img {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important
}

.botanical-copy {
  position: relative;
  z-index: 4;
  left: auto;
  bottom: auto;
  grid-area: copy;
  width: min(100%, 460px);
  font-size: 15px;
  line-height: 1.7;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important
}

.botanical-link {
  position: relative;
  z-index: 5;
  right: auto;
  bottom: auto;
  grid-area: link;
  justify-self: start;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important
}

.botanical-story .botanical-corner-top {
  left: -1vw;
  top: -1vh;
  width: min(30vw, 460px)
}

.botanical-story .botanical-corner-bottom {
  right: -18vw;
  bottom: -22vh;
  width: min(30vw, 460px)
}

.botanical-story .botanical-corner video {
  opacity: 1;
}

@media(max-width:900px) {
  .botanical-sticky {
    min-height: auto;
    padding: 95px 20px 88px;
    grid-template-columns: 1fr;
    grid-template-areas: "kicker" "words" "image" "copy" "link";
    gap: 30px
  }

  .botanical-words {
    font-size: clamp(3.2rem, 14vw, 5.5rem);
    line-height: .92;
    margin: 28px 0 6px
  }

  .botanical-words span:last-child {
    margin-left: 0
  }

  .botanical-window {
    height: min(62vh, 520px);
    min-height: 360px
  }

  .botanical-copy {
    width: min(100%, 520px);
    font-size: 14px
  }

  .botanical-link {
    width: 104px;
    height: 104px
  }

  .botanical-story .botanical-corner-top {
    left: -42vw;
    top: -17vh;
    width: 68vw
  }

  .botanical-story .botanical-corner-bottom {
    right: -48vw;
    bottom: -15vh;
    width: 72vw
  }

  .botanical-story .botanical-corner video {
    opacity: .14
  }
}