:root {
  --green: #052b23;
  --green2: #0b4033;
  --gold: #e8b947;
  --gold2: #ffd978;
  --cream: #f7f3e9;
  --ink: #17231f;
  --muted: #6d7771;
  --line: rgba(7, 43, 35, .13)
}

/* Welcome screen: each text style is intentionally independent for easy font changes. */
.welcome-screen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #f7f3e9;
  text-align: center;
  background: radial-gradient(ellipse at 50% 38%, #124a3b 0%, #082f26 48%, #031b16 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity .8s ease, visibility .8s ease;
}

.welcome-screen.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.skip-welcome .welcome-screen {
  display: none;
}

.welcome-content {
  width: min(100%, 720px);
  animation: welcome-rise 1s both;
}

.welcome-hello {
  margin: 0 0 4px;
  color: var(--gold2);
  font: 400 clamp(1rem, 2vw, 1.25rem)/1.4 Inter, system-ui, sans-serif;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.welcome-to {
  margin: 0;
  color: #f7f3e9;
  font: 400 clamp(2.8rem, 7vw, 4.6rem)/1.1 'Great Vibes', cursive;
}

.welcome-logo {
  display: block;
  width: clamp(125px, 18vw, 190px);
  height: clamp(72px, 11vw, 105px);
  margin: -4px auto 4px;
  object-fit: contain;
}

.welcome-brand {
  margin: 0;
  color: #f7f3e9;
  font: 500 clamp(2rem, 6vw, 4.2rem)/1.1 Georgia, 'Times New Roman', serif;
  letter-spacing: .025em;
}

.welcome-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 3vw, 8px);
  margin: 22px 0 34px;
  color: var(--gold2);
  font: 600 clamp(.62rem, 1.55vw, .82rem)/1.6 Inter, system-ui, sans-serif;
  letter-spacing: .16em;
  white-space: nowrap;
}

.welcome-tagline::before,
.welcome-tagline::after {
  content: "";
  display: block;
  flex: 0 0 clamp(26px, 6vw, 44px);
  height: 1px;
  background: var(--gold2);
}

.welcome-progress {
  width: min(280px, 74vw);
  height: 2px;
  margin: auto;
  overflow: hidden;
  background: #ffffff35;
}

.welcome-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  animation: welcome-load 5s linear forwards;
}

.welcome-loading {
  margin: 14px 0 0;
  color: #d8e2dc;
  font: 400 .72rem/1.5 Inter, system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.welcome-loading span {
  display: inline-block;
  color: var(--gold);
  letter-spacing: .18em;
  animation: welcome-pulse 1s infinite alternate;
}

@keyframes welcome-load {
  to {
    transform: scaleX(1);
  }
}

@keyframes welcome-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes welcome-pulse {
  to {
    opacity: .35;
  }
}

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

  .welcome-content,
  .welcome-progress span,
  .welcome-loading span {
    animation-duration: .01ms;
    animation-iteration-count: 1;
  }
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px
}

body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  overflow-x: hidden
}

a {
  text-decoration: none
}

.site-nav {
  padding: 12px 0;
  background: linear-gradient(180deg, rgba(2, 25, 20, .9), rgba(2, 25, 20, .66));
  backdrop-filter: blur(16px);
  transition: .35s
}

.site-nav.scrolled {
  background: rgba(3, 35, 28, .97);
  box-shadow: 0 8px 35px #00130f2b
}

.navbar-brand img {
  width: 150px;
  height: 52px;
  object-fit: contain
}

.nav-link {
  color: #f8f5ec !important;
  font-size: .9rem;
  padding: 10px 13px !important;
  position: relative
}

.nav-link:after {
  content: "";
  position: absolute;
  left: 13px;
  right: 100%;
  bottom: 4px;
  height: 1px;
  background: var(--gold);
  transition: .3s
}

.nav-link:hover:after,
.nav-link.active:after {
  right: 13px
}

.btn {
  border-radius: 2px;
  font-weight: 650;
  letter-spacing: .035em;
  text-transform: uppercase;
  font-size: .8rem;
  padding: 15px 24px;
  transition: transform .3s, box-shadow .3s, background .3s
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px #0002
}

.btn-gold {
  color: #1a241c;
  background: linear-gradient(120deg, #ffe7a0, #e5aa36);
  border: 1px solid #f0c45e
}

.btn-gold:hover {
  background: linear-gradient(120deg, #fff0bb, #f2be4e);
  color: #13241d
}

.btn-darkgreen {
  background: var(--green);
  color: #fff
}

.btn-darkgreen:hover {
  background: var(--green2);
  color: #fff
}

.hero {
  position: relative;
  min-height: 790px;
  height: 100svh;
  max-height: 1000px;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  overflow: hidden
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}

.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2, 34, 27, .98) 0%, rgba(2, 34, 27, .9) 29%, rgba(2, 34, 27, .48) 48%, rgba(2, 34, 27, .02) 80%), linear-gradient(0deg, rgba(0, 20, 15, .34), transparent 38%)
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 72px
}

.hero-copy {
  max-width: 650px
}

.eyebrow {
  font-size: .72rem;
  letter-spacing: .15em;
  font-weight: 650;
  color: var(--gold);
  margin-bottom: 18px
}

.eyebrow.dark {
  color: #8c6414
}

.hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #f6d37d
}

.hero .eyebrow span {
  display: inline-block;
  width: 35px;
  height: 1px;
  background: var(--gold)
}

h1,
h2,
h3 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -.035em
}

h1 {
  font-size: clamp(3.5rem, 6.1vw, 6.4rem);
  max-width: 680px;
  margin: 0 0 22px
}

h1 em,
h2 em,
h3 em {
  font-weight: 400;
  color: var(--gold);
  font-style: normal
}

.hero-copy>p {
  max-width: 510px;
  color: #f0eee5;
  font-size: 1.08rem;
  line-height: 1.7
}

.hero-points {
  display: flex;
  gap: 0;
  margin-top: 34px;
  max-width: 580px
}

.hero-points>div {
  width: 25%;
  padding: 0 18px;
  border-right: 1px solid #d5b75c55;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: 9px
}

.hero-points>div:first-child {
  padding-left: 0
}

.hero-points>div:last-child {
  border: 0
}

.hero-points i {
  font-size: 2rem;
  color: var(--gold2);
  transition: transform .35s
}

.hero-points>div:hover i {
  transform: translateY(-6px) scale(1.08)
}

.hero-points span {
  font-size: .68rem;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: .07em
}

.hero-scroll {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .58rem;
  letter-spacing: .22em;
  color: #fff9;
  display: flex;
  align-items: center;
  gap: 12px
}

.hero-scroll span {
  width: 40px;
  height: 1px;
  background: var(--gold)
}

.trust-strip {
  background: var(--cream);
  padding: 28px 0;
  border-bottom: 1px solid #d8d2c3
}

.trust-strip .col-6 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid #d7d0bf
}

.trust-strip .col-6:nth-child(2),
.trust-strip .col-6:last-child {
  border-right: 0
}

.trust-strip strong {
  font-family: Georgia, serif;
  font-size: 1.1rem;
  font-weight: 400
}

.trust-strip span {
  font-size: .69rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted)
}

.section-pad {
  padding: 105px 0
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 38px
}

h2 {
  font-size: clamp(2.7rem, 4.6vw, 4.5rem);
  margin: 0 0 20px
}

h2 em {
  color: #a57820
}

.text-link {
  color: var(--green);
  font-size: .85rem;
  font-weight: 700;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 8px;
  white-space: nowrap
}

.property-card {
  height: 100%;
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  transition: transform .4s, box-shadow .4s
}

.property-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px #0b322315
}

.property-photo {
  height: 245px;
  overflow: hidden;
  position: relative;
  background: var(--green)
}

.property-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s
}

.property-card:hover .property-photo img {
  transform: scale(1.06)
}

.property-tag {
  position: absolute;
  left: 18px;
  top: 18px;
  background: #052b23ed;
  color: var(--gold2);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: 8px 11px
}

.property-body {
  padding: 25px
}

.property-body .location {
  font-size: .75rem;
  color: #778079;
  letter-spacing: .05em
}

.property-body h3 {
  font-size: 1.8rem;
  margin: 9px 0 12px
}

.property-body p {
  font-size: .9rem;
  line-height: 1.65;
  color: var(--muted)
}

.property-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line)
}

.property-bottom span {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em
}

.property-bottom a {
  color: var(--green);
  font-size: 1.2rem;
  transition: transform .3s
}

.property-bottom a:hover {
  transform: translate(4px, -4px)
}

.about-preview {
  background: var(--cream)
}

.image-frame {
  position: relative;
  padding: 0 30px 30px 0
}

.image-frame:before {
  content: "";
  position: absolute;
  inset: 28px 0 0 30px;
  border: 1px solid var(--gold);
  z-index: 0
}

.image-frame>img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  position: relative;
  z-index: 1
}

.image-caption {
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: 0;
  background: var(--green);
  color: #fff;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .78rem;
  letter-spacing: .04em
}

.image-caption i {
  font-size: 1.5rem;
  color: var(--gold)
}

.muted-copy {
  color: var(--muted);
  line-height: 1.85;
  font-size: 1rem
}

.value-list {
  display: grid;
  gap: 17px;
  margin-top: 25px
}

.value-list>div {
  display: flex;
  gap: 14px;
  align-items: flex-start
}

.value-list i {
  color: #9e761d;
  font-size: 1.35rem
}

.value-list b,
.value-list small {
  display: block
}

.value-list b {
  font-size: .92rem;
  margin-bottom: 4px
}

.value-list small {
  color: var(--muted);
  font-size: .82rem
}

.dark-band {
  background: var(--green);
  color: #fff;
  position: relative;
  overflow: hidden
}

.dark-band:after {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  border: 1px solid #e9bd4a2b;
  border-radius: 50%;
  right: -140px;
  top: -200px;
  box-shadow: 0 0 0 45px #e9bd4a0b, 0 0 0 90px #e9bd4a08
}

.dark-band .container {
  position: relative;
  z-index: 1
}

.dark-band h2 {
  font-size: clamp(2.7rem, 4.6vw, 4.6rem)
}

.dark-band p {
  color: #d3ddd5;
  line-height: 1.8
}

.enquiry-section {
  background: #fff
}

.enquiry-section h2 {
  margin-bottom: 22px
}

.contact-line {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 18px;
  font-size: .9rem
}

.contact-line i {
  color: #9c741c;
  font-size: 1.2rem
}

.contact-line a {
  color: var(--ink)
}

.social-row {
  display: flex;
  gap: 10px;
  margin-top: 25px
}

.social-row a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  color: var(--green);
  transition: .3s
}

.social-row a:hover {
  background: var(--green);
  color: var(--gold)
}

.enquiry-form {
  padding: 35px;
  background: var(--cream);
  border: 1px solid #e1d8c4
}

.form-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 17px;
  border-bottom: 1px solid #d9d0bd;
  color: #92701d;
  font-size: .7rem;
  letter-spacing: .2em;
  font-weight: 700
}

.form-top i {
  font-size: 1.2rem
}

label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #34453c
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #d7d2c5;
  background: #fff;
  padding: 13px 14px;
  font: inherit;
  font-size: .88rem;
  outline: none;
  transition: border .25s, box-shadow .25s
}

input:focus,
select:focus,
textarea:focus {
  border-color: #b58b2b;
  box-shadow: 0 0 0 3px #e8b94720
}

textarea {
  resize: vertical
}

.form-note {
  font-size: .72rem;
  color: #7c847e;
  text-align: center;
  margin: 13px 0 0
}

.site-footer {
  background: #031f19;
  color: #fff;
  padding: 55px 0 20px
}

.footer-logo {
  width: 155px;
  height: 58px;
  object-fit: contain;
  object-position: left center
}

.site-footer p {
  color: #9ba9a1;
  font-size: .85rem;
  margin-top: 12px
}

.site-footer .col-lg-4,
.site-footer .col-lg-3 {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.site-footer a {
  color: #c7d0ca;
  font-size: .83rem;
  width: fit-content
}

.site-footer a:hover {
  color: var(--gold)
}

.footer-bottom {
  border-top: 1px solid #ffffff1b;
  margin-top: 35px;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  color: #85968d;
  font-size: .7rem
}

.mobile-cta {
  display: none
}

.lead-modal .modal-content {
  background: var(--green);
  color: #fff;
  border: 1px solid #d8ad43;
  border-radius: 0;
  box-shadow: 0 30px 100px #0007
}

.lead-modal .modal-body {
  padding: 42px
}

.lead-modal h3 {
  font-size: 2.8rem;
  margin: 0 0 14px
}

.lead-modal p {
  color: #cbd7cf;
  font-size: .9rem;
  line-height: 1.65
}

.lead-modal label {
  color: #e5e9e3
}

.lead-modal input,
.lead-modal select {
  background: #0c3a2f;
  color: #fff;
  border-color: #49675b
}

.lead-modal input::placeholder {
  color: #a4b6ac
}

.modal-close {
  position: absolute;
  right: 17px;
  top: 17px;
  z-index: 3
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1)
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0)
}

.page-hero {
  padding: 170px 0 80px;
  background: var(--green);
  color: #fff;
  position: relative;
  overflow: hidden
}

.page-hero:after {
  content: "";
  position: absolute;
  right: -5%;
  top: -45%;
  width: 60%;
  height: 150%;
  background: url('hero.png') center/cover;
  opacity: .18;
  mask-image: linear-gradient(90deg, transparent, #000)
}

.page-hero .container {
  position: relative;
  z-index: 1
}

.page-hero h1 {
  font-size: clamp(3rem, 6vw, 5.5rem);
  margin-bottom: 15px
}

.page-hero p {
  color: #d1ddd5;
  max-width: 620px;
  line-height: 1.8
}

.page-content {
  padding: 80px 0
}

.team-card {
  background: var(--cream);
  padding: 28px;
  height: 100%;
  border-top: 2px solid var(--gold);
  transition: .3s
}

.team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 35px #001d1514
}

.team-card .team-icon {
  font-size: 2rem;
  color: #a57820;
  margin-bottom: 20px
}

.team-card h3 {
  font-size: 1.65rem;
  margin-bottom: 10px
}

.team-card p {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.7
}

.insight-card {
  padding: 30px;
  border: 1px solid var(--line);
  height: 100%;
  transition: .3s
}

.insight-card:hover {
  background: var(--cream);
  transform: translateY(-4px)
}

.insight-card .number {
  font-family: Georgia, serif;
  font-size: 2.2rem;
  color: #bd902f
}

.insight-card h3 {
  font-size: 1.7rem;
  margin: 18px 0 12px
}

.insight-card p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.75
}

.detail-image {
  width: 100%;
  height: 440px;
  object-fit: cover;
}

.detail-panel {
  padding: 28px;
  background: var(--cream)
}

.detail-panel h3 {
  font-size: 1.7rem
}

.detail-panel li {
  padding: 10px 0;
  border-bottom: 1px solid #ddd4c2;
  color: #526057;
  font-size: .9rem
}

.detail-panel li:last-child {
  border-bottom: 0
}

.breadcrumb-lite {
  color: #b9c7be;
  font-size: .78rem;
  margin-bottom: 24px
}

.breadcrumb-lite a {
  color: var(--gold)
}

@media(max-width:991px) {
  .navbar-collapse {
    background: #052b23;
    padding: 15px 18px 20px;
    margin-top: 10px;
    border: 1px solid #d8b34a44
  }

  .navbar-nav {
    align-items: stretch !important
  }

  .nav-link {
    padding: 12px 0 !important
  }

  .nav-link:after {
    left: 0
  }

  .hero {
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
    align-items: flex-start
  }

  .hero-image {
    height: 50vh;
    min-height: 310px;
    max-height: 480px;
    object-position: center 52%
  }

  .hero-shade {
    background: linear-gradient(0deg, var(--green) 0%, rgba(3, 39, 30, .85) 24%, rgba(3, 39, 30, .05) 65%)
  }

  .hero-inner {
    padding-top: calc(50vh - 15px);
    padding-bottom: 80px
  }

  .hero-copy {
    max-width: 100%
  }

  .hero-copy h1 {
    font-size: clamp(3rem, 9vw, 5rem)
  }

  .hero-copy>p {
    font-size: .98rem
  }

  .hero-points {
    max-width: 100%;
    margin-top: 26px
  }

  .hero-points>div {
    padding: 0 8px
  }

  .hero-points i {
    font-size: 1.7rem
  }

  .hero-points span {
    font-size: .58rem
  }

  .hero-scroll {
    display: none
  }

  .section-pad {
    padding: 75px 0
  }

  .image-frame>img {
    height: 410px
  }

  .mobile-cta {
    display: flex;
    position: fixed;
    z-index: 1040;
    bottom: 0;
    left: 0;
    right: 0;
    background: #031f19;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
    gap: 9px;
    box-shadow: 0 -7px 25px #001b1430
  }

  .mobile-cta a,
  .mobile-cta button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    gap: 8px;
    padding: 13px 8px;
    font-size: .69rem;
    font-weight: 750;
    letter-spacing: .02em;
    text-transform: uppercase;
    border: 1px solid var(--gold);
    background: linear-gradient(120deg, #ffe7a0, #e5aa36);
    color: #13241d
  }

  .mobile-cta a {
    background: transparent;
    color: #fff
  }

  .mobile-cta i {
    font-size: 1rem
  }

  .site-footer {
    padding-bottom: 85px
  }

  .page-hero {
    padding-top: 140px
  }

  .detail-image {
    height: 360px
  }
}

@media(max-width:575px) {
  .navbar-brand img {
    width: 125px;
    height: 45px
  }

  .hero-image {
    height: 50vh;
    min-height: 280px;
    object-position: 56% center
  }

  .hero-inner {
    padding-top: calc(50vh - 8px);
    padding-bottom: 58px
  }

  .hero .eyebrow {
    font-size: .57rem;
    letter-spacing: .13em;
    gap: 7px
  }

  .hero .eyebrow span {
    width: 18px;
    flex-shrink: 0
  }

  h1 {
    font-size: clamp(2.65rem, 12vw, 4rem);
    line-height: 1.01;
    margin-bottom: 15px
  }

  .hero-copy>p {
    font-size: .9rem;
    line-height: 1.6
  }

  .hero-points {
    margin-top: 23px
  }

  .hero-points>div {
    padding: 0 4px;
    gap: 6px
  }

  .hero-points i {
    font-size: 1.45rem
  }

  .hero-points span {
    font-size: .5rem;
    letter-spacing: .025em
  }

  .hero .btn {
    font-size: .68rem;
    padding: 13px 15px
  }

  .trust-strip {
    padding: 22px 0
  }

  .trust-strip .col-6 {
    padding: 9px 5px
  }

  .trust-strip .col-6:nth-child(2) {
    border-right: 0
  }

  .trust-strip strong {
    font-size: .95rem
  }

  .trust-strip span {
    font-size: .56rem;
    letter-spacing: .07em
  }

  .section-pad {
    padding: 58px 0
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 28px
  }

  .section-heading h2,
  h2 {
    font-size: 2.7rem
  }

  .text-link {
    font-size: .78rem
  }

  .property-photo {
    height: 215px
  }

  .property-body {
    padding: 21px
  }

  .image-frame {
    padding: 0 18px 18px 0
  }

  .image-frame>img {
    height: 320px
  }

  .image-caption {
    padding: 12px 14px;
    font-size: .65rem
  }

  .dark-band h2 {
    font-size: 2.8rem
  }

  .enquiry-form {
    padding: 22px
  }

  .lead-modal .modal-body {
    padding: 34px 23px
  }

  .lead-modal h3 {
    font-size: 2.4rem
  }

  .footer-bottom {
    flex-direction: column
  }

  .page-hero {
    padding: 130px 0 55px
  }

  .page-hero h1 {
    font-size: 3.2rem
  }

  .page-content {
    padding: 55px 0
  }

  .detail-image {
    height: 260px
  }

  .mobile-cta a,
  .mobile-cta button {
    font-size: .75rem
  }

  .hero .d-flex {
    gap: 9px !important
  }
}

/* White-first premium refresh: shared by every page. */
:root {
  --green: #174b3d;
  --green2: #21614e;
  --gold: #c89d45;
  --gold2: #e2bd70;
  --cream: #f7f8f5;
  --ink: #1c2924;
  --muted: #68756e;
  --line: #e2e8e3
}

body {
  background: #fff;
  color: var(--ink)
}

button:not(.navbar-toggler),
input,
select,
textarea,
.alert {
  border-radius: 14px
}

.site-nav,
.site-nav.scrolled {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  box-shadow: 0 5px 24px #183d2b0c;
  border-bottom: 1px solid #e9eee9
}

.navbar-dark .navbar-toggler {
  border-color: #dce5df;
  border-radius: 12px
}

.navbar-dark .navbar-toggler-icon {
  filter: brightness(.25) sepia(.2)
}

.nav-link {
  color: #263b31 !important
}

.nav-link:after {
  height: 2px;
  border-radius: 3px
}

.btn {
  border-radius: 999px;
  letter-spacing: .02em;
  text-transform: none;
  font-size: .88rem;
  padding: 14px 24px
}

.btn-gold {
  background: var(--green);
  border-color: var(--green);
  color: #fff
}

.btn-gold:hover {
  background: #22604c;
  border-color: #22604c;
  color: #fff
}

.btn-darkgreen {
  border-radius: 999px
}

.hero {
  min-height: 700px;
  height: min(900px, 100svh);
  max-height: 900px;
  background: #fff;
  color: var(--ink)
}

.hero-image {
  left: 49%;
  top: 9%;
  width: 47%;
  height: 82%;
  border-radius: 34px;
  box-shadow: 0 30px 80px #183d2b20;
  animation: heroFloatIn 1.1s cubic-bezier(.2, .75, .25, 1) both
}

.hero-shade {
  background: linear-gradient(90deg, #fff 0%, #fff 39%, rgba(255, 255, 255, .76) 50%, transparent 69%), linear-gradient(0deg, rgba(18, 54, 39, .12), transparent 42%)
}

.hero-inner {
  padding-top: 88px
}

.hero .eyebrow,
.hero .eyebrow span {
  color: #8a6b2d
}

.hero .eyebrow span {
  background: #d7bd83
}

.hero h1 {
  color: #1b2c24
}

.hero h1 em,
.hero h2 em {
  color: var(--green)
}

.hero-copy>p {
  color: #64716a
}

.hero-points>div {
  border-color: #dce5dd
}

.hero-points i {
  color: var(--green)
}

.hero-points span {
  color: #53635a
}

.hero-scroll {
  color: #68756e
}

.hero-scroll span {
  background: var(--green)
}

.trust-strip {
  background: #fff;
  border-block: 1px solid #edf0ed
}

.trust-strip .col-6 {
  border-color: #e7ece8
}

.section-pad {
  padding: 112px 0
}

.about-preview {
  background: #f7f8f5
}

.about-preview.section-pad {
  padding: 72px 0
}

.about-preview .image-frame>img {
  height: 450px
}

.about-preview-title {
  font-size: clamp(1.25rem, 2.7vw, 2.25rem);
  line-height: 1.08
}

.about-preview-title>span,
.about-preview-title>em {
  display: block
}

#featured.section-pad {
  padding-top: 60px
}

.testimonials-section.section-pad {
  padding: 56px 0 48px
}

#featured .text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border: 1px solid #d4aa53;
  border-radius: 999px;
  background: #fffdf8;
  box-shadow: 0 5px 16px #8c641414;
  transition: background .25s, color .25s, transform .25s, box-shadow .25s
}

#featured .text-link:hover {
  background: #e8b947;
  color: #17352a;
  transform: translateY(-2px);
  box-shadow: 0 9px 20px #8c641426
}

.testimonials-section {
  background: #f7f8f5
}

.testimonial-heading h2 {
  color: #0b315b;
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(2rem, 3.3vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.12
}

.testimonial-heading .muted-copy {
  color: #627792
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px
}

.testimonial-card[hidden] {
  display: none !important
}

.testimonial-card {
  display: block;
  max-width: none;
  min-height: 250px;
  margin: 0;
  padding: 26px 28px;
  background: #fff;
  border: 1px solid #d7e3f2;
  border-radius: 18px;
  box-shadow: 0 8px 22px #123c5b08
}

.testimonial-person {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px
}

.testimonial-person img {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  object-fit: cover;
  border: 3px solid #edf4fb;
  border-radius: 50%
}

.testimonial-person strong {
  display: block;
  color: #10335c;
  font-size: .95rem;
  line-height: 1.35
}

.testimonial-stars {
  margin: 5px 0 0;
  color: #eea000;
  font-size: .9rem;
  letter-spacing: .12em
}

.testimonial-card blockquote {
  margin: 0 0 16px;
  color: #5c718a;
  font-size: .9rem;
  line-height: 1.65
}

.testimonial-card .customer-review {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #139a62;
  font-size: .76rem;
  font-weight: 700
}

.testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin-top: 26px
}

.testimonial-arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid #c8daef;
  border-radius: 50%;
  background: #fff;
  color: #0b315b;
  font-size: 1.1rem;
  box-shadow: 0 7px 20px #1637520c;
  transition: transform .2s, background .2s
}

.testimonial-arrow:hover {
  transform: translateY(-2px);
  background: #eaf3ff
}

.testimonial-pages {
  display: flex;
  align-items: center;
  gap: 6px
}

.testimonial-page {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #bfd2e7;
  transition: width .2s, background .2s
}

.testimonial-page.active {
  width: 12px;
  height: 12px;
  background: #1763c6
}

@media(max-width:991px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:575px) {
  .testimonial-grid {
    grid-template-columns: 1fr
  }

  .testimonial-card {
    min-height: 0;
    padding: 23px
  }

  .testimonial-person img {
    width: 64px;
    height: 64px;
    flex-basis: 64px
  }

  .testimonial-controls {
    margin-top: 20px
  }
}

.property-card,
.insight-card,
.team-card,
.detail-panel,
.enquiry-form {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 8px 30px #183d2b08
}

.property-card:hover,
.team-card:hover,
.insight-card:hover {
  box-shadow: 0 24px 55px #183d2b16
}

.property-photo {
  border-radius: 23px 23px 0 0
}

.property-tag {
  border-radius: 999px;
  background: #fff;
  color: #244b38;
  padding: 9px 13px
}

.image-frame>img,
.detail-image {
  border-radius: 24px
}

.image-frame:before {
  border-radius: 28px;
  border-color: #d8c28d
}

.image-caption {
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 10px 30px #173d2b18
}

.dark-band {
  background: #f5f7f4;
  color: var(--ink)
}

.dark-band .eyebrow {
  color: #8a6b2d
}

.dark-band h2 {
  color: var(--ink)
}

.dark-band h2 em {
  color: var(--green)
}

.dark-band p {
  color: var(--muted)
}

.dark-band:after {
  border-color: #c9a85c2b
}

.enquiry-form {
  background: #f7f8f5;
  padding: 36px
}

.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea,
.lead-modal input,
.lead-modal select {
  border-radius: 13px;
  border-color: #dfe6e0;
  padding: 14px 15px
}

.enquiry-form input:focus,
.enquiry-form select:focus,
.enquiry-form textarea:focus {
  border-color: #739681;
  box-shadow: 0 0 0 4px #174b3d12
}

.social-row a {
  border-radius: 50%
}

.page-hero {
  background: #f5f7f4;
  color: var(--ink);
  border-bottom: 1px solid #e8eee9
}

.page-hero:after {
  opacity: .08
}

.page-hero .eyebrow {
  color: #8a6b2d
}

.page-hero h1 {
  color: var(--ink)
}

.page-hero h1 em {
  color: var(--green)
}

.page-hero p {
  color: var(--muted)
}

.breadcrumb-lite {
  color: #728078
}

.breadcrumb-lite a {
  color: #94712d
}

.team-card {
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 30px
}

.insight-card {
  background: #fff
}

.detail-panel {
  background: #f7f8f5;
  padding: 30px
}

.lead-modal .modal-content {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: 0 30px 100px #102c1d30
}

.lead-modal .modal-body {
  padding: 42px
}

.lead-modal .eyebrow {
  color: #8a6b2d
}

.lead-modal h3 em {
  color: var(--green)
}

.lead-modal p {
  color: var(--muted)
}

.lead-modal label {
  color: #34453c
}

.lead-modal input,
.lead-modal select {
  background: #fff;
  color: var(--ink)
}

.lead-modal input::placeholder {
  color: #98a29c
}

.modal-close {
  filter: none
}

.site-footer {
  background: linear-gradient(135deg, #062b23 0%, #0a3b30 100%);
  color: #f7f4e9;
  border-top: 3px solid #c69b42;
  padding-top: 64px;
  position: relative
}

.site-footer .container>.row {
  align-items: flex-start !important;
  row-gap: 34px !important
}

.footer-logo {
  width: 190px;
  height: 100px;
  object-fit: contain;
  object-position: left center;
  filter: none;
  opacity: 1
}

.site-footer .col-lg-5 p {
  color: #c4d2ca;
  font-size: .9rem;
  line-height: 1.65;
  margin-top: 17px;
  max-width: 290px
}

.site-footer .col-lg-5 p::before {
  content: "Vasista Prime Realty";
  display: block;
  color: #fff1c9;
  font: 750 1.3rem/1.3 Inter, system-ui, sans-serif;
  letter-spacing: .015em;
  margin-bottom: 8px;
  text-shadow: 0 2px 12px #0003
}

.site-footer .col-lg-4,
.site-footer .col-lg-3 {
  display: flex;
  flex-direction: column;
  gap: 13px
}

.site-footer .col-lg-4::before,
.site-footer .col-lg-3::before {
  color: #f4d17b;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 7px;
  text-shadow: 0 2px 10px #0003
}

.site-footer .col-lg-4::before {
  content: "Explore"
}

.site-footer .col-lg-3::before {
  content: "Get in touch"
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #d5e0d9;
  font-size: .87rem;
  width: fit-content;
  transition: color .2s, transform .2s
}

.site-footer a:hover {
  color: #f4d17b;
  transform: translateX(3px)
}

.footer-bottom {
  border-color: #ffffff29;
  color: #b8c8bf;
  font-size: .76rem;
  margin-top: 38px;
  padding: 19px 0 0;
  display: flex;
  justify-content: space-between;
  gap: 14px
}

.mobile-cta {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
  box-shadow: 0 -8px 28px #183d2b12
}

.mobile-cta a,
.mobile-cta button {
  border-radius: 999px;
  background: var(--green);
  border-color: var(--green);
  color: #fff
}

.mobile-cta a {
  background: #fff;
  color: var(--green)
}

.reveal {
  transform: translateY(32px);
  transition: opacity .85s ease, transform .85s cubic-bezier(.2, .75, .25, 1)
}

.hero-copy.reveal {
  animation: copyRise .9s .12s both
}

.property-card,
.insight-card,
.team-card,
.image-frame img,
.btn,
.social-row a {
  transition-timing-function: cubic-bezier(.2, .75, .25, 1)
}

.property-card:hover,
.insight-card:hover {
  transform: translateY(-7px)
}

.social-row a:hover {
  transform: translateY(-3px)
}

@keyframes heroFloatIn {
  from {
    opacity: 0;
    transform: translateX(24px) scale(.98)
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1)
  }
}

@keyframes copyRise {
  from {
    opacity: 0;
    transform: translateY(22px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@media(max-width:991px) {
  .navbar-collapse {
    background: #fff;
    padding: 15px 18px 20px;
    margin-top: 10px;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 15px 35px #183d2b12
  }

  .hero {
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
    align-items: flex-start
  }

  .hero-image {
    left: 4%;
    top: 92px;
    width: 92%;
    height: 44vh;
    min-height: 300px;
    max-height: 440px;
    object-position: center;
    border-radius: 26px
  }

  .hero-shade {
    background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, .94) 16%, transparent 59%)
  }

  .hero-inner {
    padding-top: calc(44vh + 112px);
    padding-bottom: 74px
  }

  .hero-copy {
    background: #fff
  }

  .hero-points>div {
    border-color: #e2e8e3
  }

  .hero-points span {
    color: #53635a
  }

  .hero-scroll {
    display: none
  }

  .section-pad {
    padding: 82px 0
  }
}

@media(max-width:575px) {
  .hero-image {
    height: 39vh;
    min-height: 260px;
    top: 82px;
    border-radius: 22px
  }

  .hero-inner {
    padding-top: calc(39vh + 101px);
    padding-bottom: 56px
  }

  .hero .eyebrow {
    color: #8a6b2d
  }

  .hero-copy>p {
    color: #64716a
  }

  .hero-points>div {
    border-color: #e2e8e3
  }

  .section-pad {
    padding: 62px 0
  }

  .enquiry-form {
    padding: 23px
  }

  .page-hero {
    background: #f5f7f4
  }

  .lead-modal .modal-body {
    padding: 36px 24px
  }
}

/* Glass styling and pointer tilt are reserved for project enquiry cards. */
.enquiry-form.project-enquiry-card {
  position: relative;
  isolation: isolate;
  overflow: visible;
  will-change: transform;
  transform-style: preserve-3d;
  transform: perspective(1100px) rotateX(var(--project-enquiry-tilt-x, 0deg)) rotateY(var(--project-enquiry-tilt-y, 0deg)) scale(var(--project-enquiry-scale, 1));
  transition: transform .18s cubic-bezier(.2, .7, .2, 1), box-shadow .4s cubic-bezier(.16, 1, .3, 1), border-color .4s;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  background: linear-gradient(135deg, #292d32 0%, #202429 58%, #1b1f23 100%);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 24px;
  color: #f7f5ef;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.project-enquiry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(115deg, transparent, #d6ad2f 50%, transparent);
  opacity: 0;
  z-index: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.project-enquiry-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: linear-gradient(112deg, transparent 18%, rgba(214, 173, 47, .12) 43%, rgba(255, 255, 255, .3) 50%, rgba(214, 173, 47, .07) 57%, transparent 82%);
  transform: translateX(-35%);
}

.project-enquiry-card>.row,
.project-enquiry-card>form {
  position: relative;
  z-index: 1
}

.enquiry-form.project-enquiry-card:hover {
  --project-enquiry-scale: 1.012;
  border-color: rgba(194, 157, 50, .9);
  background: linear-gradient(135deg, #30343a 0%, #25292e 58%, #202429 100%);
  box-shadow: 0 36px 80px rgba(0, 0, 0, .4), 0 0 34px rgba(214, 173, 47, .16), inset 0 1px 0 rgba(255, 255, 255, .16);
}

.project-enquiry-card:hover::after,
.project-enquiry-card:focus-within::after {
  animation: project-enquiry-surface-sheen 1.15s ease-out both;
}

.enquiry-form.project-enquiry-card:focus-within {
  border-color: rgba(194, 157, 50, .82);
  box-shadow: 0 32px 72px rgba(0, 0, 0, .38), 0 0 24px rgba(214, 173, 47, .14)
}

.project-enquiry-card.native-select-active {
  transform: none !important;
  transform-style: flat;
  transition: none !important
}

.reveal:has(.project-enquiry-card.native-select-active) {
  transform: none !important
}

.project-enquiry-card:hover::before,
.project-enquiry-card:focus-within::before {
  opacity: .48
}

.project-enquiry-card .form-top {
  position: relative;
  z-index: 1;
  color: #d6ad2f;
  border-color: rgba(255, 255, 255, .16)
}

.project-enquiry-card label {
  color: #e7e9e3
}

.project-enquiry-card form {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

.project-enquiry-card form>.mb-3 {
  margin: 0 !important
}

.project-enquiry-card form>.enquiry-message-field {
  grid-column: 1/-1
}

.project-enquiry-card input:not([type=hidden]),
.project-enquiry-card select,
.project-enquiry-card textarea {
  min-height: 56px;
  border-radius: 15px;
  color: #f7f5ef;
  background: rgba(12, 14, 16, .72);
  border: 1px solid rgba(255, 255, 255, .13);
  transition: border-color .25s, background .25s, box-shadow .25s, transform .25s;
}

.project-enquiry-card input:not([type=hidden])::placeholder,
.project-enquiry-card textarea::placeholder {
  color: #929599
}

.project-enquiry-card select {
  color-scheme: dark
}

.project-enquiry-card select option {
  color: #f7f5ef;
  background: #202429
}

.project-enquiry-card input:not([type=hidden]):hover,
.project-enquiry-card input:not([type=hidden]):focus,
.project-enquiry-card select:hover,
.project-enquiry-card select:focus,
.project-enquiry-card textarea:hover,
.project-enquiry-card textarea:focus {
  background: rgba(12, 14, 16, .92);
  border-color: #bd982b;
  box-shadow: 0 0 0 4px rgba(214, 173, 47, .12), 0 0 18px rgba(214, 173, 47, .08);
}

.project-enquiry-card input:not([type=hidden]):focus {
  transform: translateZ(8px)
}

.project-enquiry-card form>.btn,
.project-enquiry-card form>.form-note {
  grid-column: 1/-1
}

.project-enquiry-card .btn-gold,
.project-enquiry-card .enquiry-submit {
  position: relative;
  overflow: hidden;
  min-height: 58px;
  border: 0;
  border-radius: 15px;
  color: #111315;
  background: linear-gradient(105deg, #d6ad2f 0%, #f2dfa0 100%);
  box-shadow: 0 12px 30px rgba(214, 173, 47, .23);
  transform: translateZ(10px);
  transition: transform .3s cubic-bezier(.2, .75, .25, 1), box-shadow .3s ease, background .3s ease, color .3s ease;
}

.project-enquiry-card .btn-gold::before,
.project-enquiry-card .enquiry-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .68) 48%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .65s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}

.project-enquiry-card .btn-gold:hover,
.project-enquiry-card .btn-gold:focus-visible,
.project-enquiry-card .enquiry-submit:hover,
.project-enquiry-card .enquiry-submit:focus-visible {
  color: #111315;
  background: linear-gradient(105deg, #fff1b8 0%, #f0cf58 48%, #bd9419 100%);
  box-shadow: 0 20px 42px rgba(214, 173, 47, .42), 0 0 0 1px rgba(255, 239, 176, .45), 0 0 26px rgba(214, 173, 47, .25);
  transform: translateY(-4px) translateZ(18px) scale(1.018);
}

.project-enquiry-card .btn-gold:hover::before,
.project-enquiry-card .btn-gold:focus-visible::before,
.project-enquiry-card .enquiry-submit:hover::before,
.project-enquiry-card .enquiry-submit:focus-visible::before {
  transform: translateX(120%);
}

.project-enquiry-card .btn-gold:active,
.project-enquiry-card .enquiry-submit:active {
  transform: translateY(-1px) translateZ(8px) scale(.995);
  box-shadow: 0 8px 20px rgba(214, 173, 47, .3);
}

.project-enquiry-card .form-note {
  color: #a9adb0
}

@keyframes project-enquiry-surface-sheen {
  0% {
    opacity: 0;
    transform: translateX(-35%)
  }

  20% {
    opacity: 1
  }

  100% {
    opacity: 0;
    transform: translateX(35%)
  }
}

@media(max-width:575px) {
  .project-enquiry-card form {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .project-enquiry-card {
    padding: 24px 20px
  }
}

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

  .project-enquiry-card,
  .project-enquiry-card::before,
  .project-enquiry-card::after,
  .project-enquiry-card input,
  .project-enquiry-card select,
  .project-enquiry-card textarea,
  .project-enquiry-card .btn {
    transition: none !important;
    transform: none !important;
    will-change: auto;
  }
}

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

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

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

/* Homepage sections modeled on the supplied mobile reference. */
.property-filters {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0 0 28px;
  flex-wrap: wrap
}

.filter-button {
  min-width: 120px;
  padding: 11px 20px;
  background: #fff;
  border: 1px solid #cdd9d1;
  border-radius: 999px;
  color: #294b3a;
  font-weight: 700;
  transition: background .25s, color .25s, transform .25s, box-shadow .25s
}

.filter-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px #174b3d18
}

.filter-button.active {
  background: var(--green);
  border-color: var(--green);
  color: #fff
}

.testimonial-heading {
  text-align: center;
  margin: 0 auto 32px;
  max-width: 700px
}

.testimonial-heading h2 {
  margin: 0 0 12px
}

.testimonial-card {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  max-width: 760px;
  margin: auto;
  padding: 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 12px 38px #174b3d0c
}

.testimonial-mark {
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #eff5ef;
  color: var(--green);
  font-size: 1.35rem
}

.testimonial-stars {
  color: #c4942e;
  font-size: .86rem;
  letter-spacing: .16em;
  font-weight: 800;
  margin-bottom: 10px
}

.testimonial-card blockquote {
  margin: 0 0 16px;
  color: #56645c;
  line-height: 1.75
}

.testimonial-card strong,
.testimonial-card span {
  display: block
}

.testimonial-card strong {
  font-size: .9rem;
  color: #263d31
}

.testimonial-card span {
  font-size: .75rem;
  color: #859087;
  margin-top: 4px
}

.opportunity-band {
  padding-top: 30px
}

.opportunity-card {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  min-height: 300px;
  background: #113f32;
  color: #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 50px #123c2e20
}

.opportunity-copy {
  padding: 46px;
  align-self: center;
  position: relative;
  z-index: 1
}

.opportunity-copy .eyebrow {
  color: #dfbd72
}

.opportunity-copy h2 {
  font-size: clamp(2.3rem, 4vw, 3.7rem);
  margin-bottom: 16px
}

.opportunity-copy h2 em {
  color: #e2bd70
}

.opportunity-copy p {
  color: #d5e0d9;
  line-height: 1.7;
  max-width: 520px
}

.opportunity-image {
  min-height: 300px;
  background: linear-gradient(90deg, #113f32 0%, #113f3222 55%), url('hero.png') center/cover
}

.enquiry-section {
  padding-bottom: 38px
}

.enquiry-form {
  box-shadow: 0 14px 44px #174b3d10
}

/* Keep the fixed mobile action labels and icons on the same vertical center line. */
.mobile-cta a,
.mobile-cta button {
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.mobile-cta i {
  display: block;
  flex: 0 0 auto;
  font-size: 1.15em;
  line-height: 1;
  vertical-align: 0;
}

.mobile-cta-content {
  display: grid;
  grid-template-columns: 1.2em auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  line-height: 1;
  vertical-align: middle;
}

.mobile-cta-content>i {
  position: static;
  justify-self: center;
  align-self: center;
  transform: none;
}

.mobile-cta i::before {
  display: block;
  line-height: 1;
  vertical-align: 0;
}

@media(max-width:575px) {
  .property-filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 20px
  }

  .filter-button {
    min-width: 0;
    padding: 11px 8px;
    font-size: .78rem
  }

  .testimonial-card {
    padding: 22px;
    gap: 14px
  }

  .testimonial-mark {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    font-size: 1.1rem
  }

  .opportunity-band {
    padding: 8px 0 28px
  }

  .opportunity-card {
    grid-template-columns: 1fr;
    border-radius: 22px
  }

  .opportunity-copy {
    padding: 28px 22px
  }

  .opportunity-copy h2 {
    font-size: 2.2rem
  }

  .opportunity-image {
    min-height: 145px;
    background-position: center 58%
  }

  .testimonial-heading {
    margin-bottom: 24px
  }

  .testimonial-card blockquote {
    font-size: .88rem
  }
}

.hero .btn-outline-light {
  border-color: #b8c7bd;
  color: #244b38;
  background: #fff
}

.hero .btn-outline-light:hover {
  background: #f2f6f2;
  border-color: #244b38;
  color: #244b38
}

@media(max-width:575px) {
  .property-body {
    padding: 14px
  }

  .property-photo {
    height: 132px
  }

  .property-body .location {
    font-size: .62rem;
    line-height: 1.35
  }

  .property-body h3 {
    font-size: 1.12rem;
    line-height: 1.1
  }

  .property-body p {
    font-size: .72rem;
    line-height: 1.45
  }

  .property-bottom {
    margin-top: 12px;
    padding-top: 11px
  }

  .property-bottom span {
    font-size: .58rem
  }

  .property-bottom a {
    font-size: 1rem
  }

  .property-tag {
    left: 9px;
    top: 9px;
    font-size: .52rem;
    padding: 6px 9px
  }
}

/* Full-bleed photo hero and mobile ordering from the supplied reference. */
.hero {
  min-height: 700px;
  height: min(900px, 100svh);
  max-height: 900px;
  padding: 0;
  background: #082e24;
  color: #fff
}

.hero-image {
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  object-position: center;
  animation: heroFloatIn 1s ease both
}

.hero-shade {
  background: linear-gradient(90deg, rgba(3, 33, 26, .93) 0%, rgba(3, 33, 26, .79) 40%, rgba(3, 33, 26, .24) 72%, rgba(3, 33, 26, .05) 100%), linear-gradient(0deg, rgba(3, 33, 26, .4), transparent 48%)
}

.hero-inner {
  padding-top: 85px
}

.hero h1 {
  color: #fff
}

.hero h1 em {
  color: #edcf8d
}

.hero-copy>p {
  color: #f0f3ef
}

.hero .eyebrow {
  color: #edcf8d
}

.hero .eyebrow span {
  background: #d7b35b
}

.hero-points>div {
  border-color: #ffffff55
}

.hero-points i {
  color: #edcf8d
}

.hero-points span {
  color: #f3f5f2
}

.hero-scroll {
  color: #ffffffb5
}

@media(max-width:991px) {
  .hero {
    height: auto;
    min-height: 620px;
    max-height: none;
    padding: 96px 0 44px;
    align-items: center
  }

  .hero-image {
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: none;
    border-radius: 0;
    object-position: center 45%
  }

  .hero-shade {
    background: linear-gradient(90deg, rgba(3, 33, 26, .88), rgba(3, 33, 26, .45)), linear-gradient(0deg, rgba(3, 33, 26, .56), transparent 70%)
  }

  .hero-inner {
    padding-top: 0;
    padding-bottom: 0
  }

  .hero-copy {
    background: transparent
  }

  .hero-copy h1 {
    font-size: clamp(3rem, 9vw, 5rem)
  }

  .hero .eyebrow {
    color: #edcf8d
  }

  .hero-copy>p {
    color: #f0f3ef
  }

  .hero-points span {
    color: #f3f5f2
  }
}

@media(max-width:575px) {
  .hero {
    min-height: 660px;
    height: auto;
    padding: 105px 0 48px
  }

  .hero-image {
    top: 0;
    height: 100%;
    min-height: 100%;
    object-position: 54% center
  }

  .hero-shade {
    background: linear-gradient(90deg, rgba(3, 33, 26, .9), rgba(3, 33, 26, .48)), linear-gradient(0deg, rgba(3, 33, 26, .56), transparent 72%)
  }

  .hero-inner {
    padding-top: 0;
    padding-bottom: 0
  }

  .hero-copy h1 {
    font-size: clamp(2.8rem, 11vw, 3.8rem)
  }

  .hero-points {
    margin-top: 23px
  }

  .hero .btn-outline-light {
    background: transparent;
    color: #fff;
    border-color: #ffffffb5
  }

  .hero .btn-outline-light:hover {
    background: #ffffff18;
    border-color: #fff;
    color: #fff
  }

  .about-preview .image-frame>img {
    height: 320px
  }
}

.enquiry-benefits {
  display: grid;
  gap: 10px;
  margin: 20px 0 24px
}

.enquiry-benefits span {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: .86rem;
  font-weight: 650;
  color: #34483d
}

.enquiry-benefits i {
  color: var(--green);
  font-size: 1rem
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1c2924 !important;
  /* color: #9e761d !important; */
  font-size: 1.03rem;
  font-weight: 750;
  letter-spacing: -.02em;
  white-space: nowrap
}

.navbar-brand img {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  object-fit: contain
}

.navbar-brand span {
  display: inline-block
}

@media(max-width:575px) {
  .navbar-brand {
    gap: 7px;
    font-size: .9rem
  }

  .navbar-brand img {
    width: 44px;
    height: 44px;
    flex-basis: 44px
  }
}

/* Reference-style navigation layout. */
.site-nav {
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid #edf0ed;
  box-shadow: 0 4px 20px #13291d0a;
  padding: 12px 0
}

.site-nav .container {
  display: flex;
  align-items: center
}

.site-nav .navbar-collapse {
  flex-grow: 1;
  align-items: center
}

.site-nav .navbar-nav {
  margin-left: auto;
  margin-right: auto;
  gap: 22px !important
}

.site-nav .nav-link {
  color: #263b31 !important;
  font-size: .94rem;
  font-weight: 650;
  padding: 12px 3px !important
}

.site-nav .nav-link:after {
  left: 3px;
  right: 100%;
  bottom: 2px;
  height: 3px;
  border-radius: 4px;
  background: #b88732
}

.site-nav .nav-link:hover:after,
.site-nav .nav-link.active:after {
  right: 3px
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto
}

.nav-search,
.nav-enquire {
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  padding: 0 19px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform .25s, box-shadow .25s, background .25s
}

.nav-search {
  border: 1px solid #d9e2dc;
  background: #fff;
  color: #173f32
}

.nav-search i {
  font-size: 1.05rem
}

.nav-search:hover {
  background: #f6f8f6;
  color: #173f32;
  transform: translateY(-1px)
}

.nav-enquire {
  min-width: 185px;
  border-radius: 16px;
  background: #b88b37;
  color: #fff;
  box-shadow: 0 10px 22px #ae823025
}

.nav-enquire i {
  font-size: 1.05rem
}

.nav-enquire:hover {
  background: #a87929;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 13px 25px #ae823035
}

@media(max-width:991px) {
  .site-nav .navbar-collapse {
    background: #fff;
    padding: 18px;
    margin-top: 10px;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 18px 35px #183d2b12
  }

  .site-nav .navbar-nav {
    align-items: stretch !important;
    gap: 2px !important;
    margin: 0 !important
  }

  .site-nav .nav-link {
    padding: 11px 2px !important
  }

  .nav-actions {
    padding-top: 14px;
    margin: 10px 0 0;
    border-top: 1px solid var(--line)
  }

  .site-nav .navbar-toggler {
    border-color: #dce5df;
    border-radius: 12px
  }

  .site-nav .navbar-toggler-icon {
    filter: brightness(.25) sepia(.2)
  }
}

@media(max-width:575px) {
  .site-nav {
    padding: 7px 0
  }

  .navbar-brand {
    font-size: .89rem
  }

  .navbar-brand img {
    width: 40px;
    height: 40px;
    flex-basis: 40px
  }

  .nav-actions {
    gap: 9px
  }

  .nav-search,
  .nav-enquire {
    height: 46px;
    padding: 0 13px;
    font-size: .82rem
  }

  .nav-enquire {
    min-width: 0;
    flex: 1
  }

  .nav-search {
    flex: 1
  }
}

/* Staggered entrance for the homepage hero copy. */
.hero-copy.reveal {
  animation: none
}

.hero-copy.reveal.visible>.eyebrow,
.hero-copy.reveal.visible>h1,
.hero-copy.reveal.visible>p,
.hero-copy.reveal.visible>.hero-points,
.hero-copy.reveal.visible>.d-flex {
  animation: heroTextIn .72s cubic-bezier(.2, .75, .25, 1) both
}

.hero-copy.reveal.visible>.eyebrow {
  animation-delay: .08s
}

.hero-copy.reveal.visible>h1 {
  animation-delay: .22s
}

.hero-copy.reveal.visible>p {
  animation-delay: .38s
}

.hero-copy.reveal.visible>.hero-points {
  animation-delay: .54s
}

.hero-copy.reveal.visible>.d-flex {
  animation-delay: .76s
}

.hero-copy.reveal.visible>.hero-points>div {
  animation: heroTextIn .58s cubic-bezier(.2, .75, .25, 1) both
}

.hero-copy.reveal.visible>.hero-points>div:nth-child(1) {
  animation-delay: .56s
}

.hero-copy.reveal.visible>.hero-points>div:nth-child(2) {
  animation-delay: .68s
}

.hero-copy.reveal.visible>.hero-points>div:nth-child(3) {
  animation-delay: .8s
}

.hero-copy.reveal.visible>.hero-points>div:nth-child(4) {
  animation-delay: .92s
}

@keyframes heroTextIn {
  from {
    opacity: 0;
    transform: translateY(18px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

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

  .hero-copy.reveal.visible>.eyebrow,
  .hero-copy.reveal.visible>h1,
  .hero-copy.reveal.visible>p,
  .hero-copy.reveal.visible>.hero-points,
  .hero-copy.reveal.visible>.d-flex,
  .hero-copy.reveal.visible>.hero-points>div {
    animation: none;
    opacity: 1;
    transform: none
  }
}

/* Refined values strip. */
.trust-strip {
  padding: 30px 0;
  background: #fff;
  border-top: 1px solid #edf1ed;
  border-bottom: 1px solid #e8eee9
}

.trust-strip .row {
  align-items: stretch
}

.trust-strip .col-6 {
  position: relative;
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  border-right: 1px solid #e5ebe6;
  transition: background .3s, transform .3s
}

.trust-strip .col-6:last-child {
  border-right: 0
}

.trust-strip .col-6:hover {
  background: #f8faf7;
  transform: translateY(-3px)
}

.trust-strip .col-6>i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid #eadbb9;
  border-radius: 14px;
  background: #fbf8f0;
  color: #ad8436;
  font-size: 1.2rem;
  transition: background .3s, color .3s, transform .3s
}

.trust-strip .col-6:hover>i {
  background: var(--green);
  color: #f0d18c;
  transform: scale(1.06)
}

.trust-strip strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.18rem;
  font-weight: 600;
  color: #1e3b2d;
  letter-spacing: -.015em
}

.trust-strip span {
  font-size: .66rem;
  letter-spacing: .13em;
  color: #78847b;
  line-height: 1.4
}

.trust-strip .col-6 {
  flex-direction: column
}

.trust-strip .col-6>i {
  margin-bottom: 3px
}

@media(max-width:575px) {
  .trust-strip {
    padding: 14px 0
  }

  .trust-strip .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0
  }

  .trust-strip .col-6 {
    min-height: 112px;
    padding: 14px 8px;
    border-bottom: 1px solid #e8eee9
  }

  .trust-strip .col-6:nth-child(2) {
    border-right: 0
  }

  .trust-strip .col-6:nth-child(3),
  .trust-strip .col-6:nth-child(4) {
    border-bottom: 0
  }

  .trust-strip .col-6>i {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 1.05rem;
    border-radius: 12px
  }

  .trust-strip strong {
    font-size: 1rem
  }

  .trust-strip span {
    font-size: .58rem;
    letter-spacing: .08em
  }
}

@keyframes trustIn {
  from {
    opacity: 0;
    transform: translateY(12px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

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

  .trust-strip .col-6,
  .trust-strip .col-6>i {
    transition: none;
    animation: none
  }
}

/* Compact the values strip while preserving its four-column rhythm. */
.trust-strip {
  padding: 12px 0
}

.trust-strip .row {
  --bs-gutter-y: 0
}

.trust-strip .col-6 {
  min-height: 82px;
  padding: 10px 18px;
  gap: 5px
}

.trust-strip .col-6>i {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  font-size: 1rem;
  border-radius: 11px;
  margin-bottom: 1px
}

.trust-strip strong {
  font-size: 1.08rem
}

.trust-strip span {
  font-size: .61rem
}

@media(max-width:575px) {
  .trust-strip {
    padding: 8px 0
  }

  .trust-strip .col-6 {
    min-height: 84px;
    padding: 9px 7px;
    gap: 4px
  }

  .trust-strip .col-6>i {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
    font-size: .92rem
  }

  .trust-strip strong {
    font-size: .95rem
  }

  .trust-strip span {
    font-size: .55rem
  }
}

/* Floating values card. */
.trust-strip {
  margin: 40px;
  border: 1px solid #e4ebe5;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 18px 44px #173d2b12;
  background: #fff
}

@media(max-width:575px) {
  .trust-strip {
    margin: 18px 14px;
    border-radius: 20px;
    box-shadow: 0 12px 30px #173d2b10
  }
}



.hero-points>div {
  gap: 9px;
  -webkit-user-select: none;
  user-select: none
}

.hero-points>div span {
  -webkit-user-select: text;
  user-select: text
}

.hero-points>div>i,
.hero-points>div>.handshake-icon {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none
}

.hero-points i,
.hero-points .handshake-icon {
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;
  display: block;
  object-fit: contain;
  line-height: 2.35rem;
  text-align: center
}

.hero-points i {
  font-size: 2rem
}

.hero-points .handshake-icon {
  width: 2.9rem;
  height: 2.35rem;
  flex-basis: 2.35rem;
  transition: transform .35s
}

.hero-points>div:hover .handshake-icon {
  transform: translateY(-6px) scale(1.08)
}

/* Testimonials matching the three-card customer-voices layout. */
.testimonials-section .testimonial-card {
  display: block;
  max-width: none;
  min-height: 225px;
  margin: 0;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid #d7e3f2;
  border-radius: 18px;
  box-shadow: 0 8px 22px #123c5b08
}

.testimonials-section .testimonial-card blockquote {
  margin: 0 0 12px;
  color: #5c718a;
  font-size: .86rem;
  line-height: 1.55
}

.testimonials-section .testimonial-person {
  gap: 12px;
  margin-bottom: 16px
}

.testimonials-section .testimonial-person img {
  width: 62px;
  height: 62px;
  flex-basis: 62px
}

@media(max-width:575px) {
  .testimonials-section .testimonial-card {
    min-height: 0;
    padding: 18px
  }
}

.enquiry-section h2 {
  max-width: 560px;
  font-size: clamp(2.4rem, 3.5vw, 3.6rem);
  line-height: 1.05
}

@media(max-width:575px) {
  .enquiry-section h2 {
    font-size: 2rem
  }
}

.enquiry-submit {
  min-height: 54px;
  border: 0;
  border-radius: 12px;
  background: #174f43;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 5px 12px #174f432b
}

.enquiry-submit:hover,
.enquiry-submit:focus-visible {
  background: #103f35;
  color: #fff;
  box-shadow: 0 8px 18px #174f4340
}

.opportunity-card {
  min-height: 340px
}

.opportunity-copy {
  padding: 32px 36px
}

.opportunity-copy h2 {
  font-size: clamp(2.1rem, 3.3vw, 3.1rem);
  line-height: 1.04;
  margin-bottom: 12px
}

.opportunity-copy p {
  font-size: .96rem;
  line-height: 1.55;
  margin-bottom: 16px
}

@media(max-width:575px) {
  .opportunity-copy {
    padding: 24px 20px
  }

  .opportunity-copy h2 {
    font-size: 2rem
  }

  .opportunity-copy p {
    font-size: .9rem
  }
}

.opportunity-copy h2 {
  white-space: nowrap;
  font-size: clamp(1.3rem, 1.8vw, 1.8rem);
  line-height: 1.2;
  margin-bottom: 14px
}

.opportunity-copy p {
  max-width: 620px;
  color: #e1ece7;
  font-size: 1.02rem;
  line-height: 1.65
}

.opportunity-card {
  min-height: 200px
}

.opportunity-copy {
  padding-top: 16px;
  padding-bottom: 16px
}

.opportunity-copy .eyebrow {
  margin-bottom: 8px
}

.opportunity-copy h2 {
  margin-bottom: 6px
}

.opportunity-copy p {
  margin-bottom: 8px;
  font-size: .92rem;
  line-height: 1.4
}

.opportunity-image {
  min-height: 200px
}

.opportunity-copy>.d-flex {
  justify-content: flex-end
}

@media(max-width:991px) {
  .opportunity-copy h2 {
    white-space: normal;
    font-size: 2rem
  }
}

@media(max-width:575px) {
  .opportunity-card {
    min-height: 0
  }

  .opportunity-copy {
    padding: 22px 20px
  }

  .opportunity-copy h2 {
    white-space: normal;
    font-size: 1.8rem
  }

  .opportunity-copy>.d-flex {
    justify-content: flex-start
  }

  .opportunity-image {
    min-height: 130px
  }
}

.opportunity-band>.container {
  width: calc(100% - 220px);
  max-width: none;
  padding-right: 0;
  padding-left: 0
}

.opportunity-card {
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .8fr)
}

.opportunity-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  column-gap: 30px;
  align-items: center
}

.opportunity-copy>.eyebrow,
.opportunity-copy>h2,
.opportunity-copy>p {
  grid-column: 1
}

.opportunity-copy>.eyebrow {
  grid-row: 1
}

.opportunity-copy>h2 {
  grid-row: 2
}

.opportunity-copy>p {
  grid-row: 3
}

.opportunity-copy>.d-flex {
  grid-column: 2;
  grid-row: 1/4;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 14px !important
}

.opportunity-copy>.d-flex .btn {
  white-space: nowrap
}

@media(max-width:1199px) {
  .opportunity-card {
    grid-template-columns: 1fr
  }

  .opportunity-copy {
    display: block
  }

  .opportunity-copy h2 {
    white-space: normal;
    font-size: 2rem
  }

  .opportunity-copy>.d-flex {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start
  }

  .opportunity-image {
    min-height: 200px
  }
}

@media(max-width:575px) {
  .opportunity-copy>.d-flex {
    flex-direction: column
  }

  .opportunity-image {
    min-height: 130px
  }
}

.opportunity-copy {
  grid-template-columns: minmax(0, 1fr) 215px;
  column-gap: 30px
}

.opportunity-copy .eyebrow {
  font-size: .78rem;
  color: #f2cf79;
  letter-spacing: .14em
}

.opportunity-copy h2 {
  font-size: clamp(1.6rem, 1.8vw, 2rem);
  line-height: 1.15
}

.opportunity-copy p {
  color: #f0f5f2;
  font-size: 1rem;
  line-height: 1.55
}

.opportunity-copy>.d-flex .btn {
  min-height: 58px;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: .98rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 8px 20px #001d1633
}

.opportunity-copy>.d-flex .btn-light {
  background: #fff;
  color: #123f34;
  border: 1px solid #fff
}

.opportunity-copy>.d-flex .btn-light:hover {
  background: #f1f7f3;
  color: #0d332a
}

.opportunity-copy>.d-flex .btn-gold {
  background: #26735b;
  border-color: #26735b;
  color: #fff
}

.opportunity-copy>.d-flex .btn-gold:hover {
  background: #31866c;
  border-color: #31866c;
  color: #fff
}

.opportunity-copy>.d-flex {
  align-self: center;
  justify-self: center
}

@media(max-width:1199px) {
  .opportunity-copy h2 {
    font-size: 2rem
  }

  .opportunity-copy p {
    font-size: .96rem
  }
}

.opportunity-copy {
  padding-right: 12px;
  grid-template-columns: minmax(0, 1fr) 190px;
  column-gap: 18px
}

.opportunity-copy .eyebrow {
  font-size: .82rem
}

.opportunity-copy h2 {
  font-size: clamp(1.8rem, 2.1vw, 2.15rem)
}

.opportunity-copy p {
  font-size: 1.05rem;
  line-height: 1.55
}

.opportunity-copy>.d-flex {
  width: 190px;
  justify-self: end
}

@media(max-width:1199px) {
  .opportunity-copy {
    padding-right: 20px
  }

  .opportunity-copy>.d-flex {
    width: auto;
    justify-self: auto
  }
}

.opportunity-image {
  height: 100%;
  min-height: 200px;
  background-image: linear-gradient(90deg, #123f34 0%, #123f3420 22%, transparent 55%), url('contact-card.png');
  background-position: center, right center;
  background-size: cover;
  background-repeat: no-repeat
}

@media(min-width:1200px) {
  .opportunity-copy>.d-flex {
    transform: translateX(42px)
  }
}

@media(max-width:575px) {
  .opportunity-band>.container {
    width: calc(100% - 32px)
  }
}


.site-footer .col-lg-5 {
  display: flex;
  align-items: center;
  gap: 18px
}

.footer-logo {
  width: 128px;
  height: 112px;
  flex: 0 0 128px
}

.site-footer .col-lg-5 p {
  margin: 0;
  max-width: 300px
}

@media(max-width:575px) {
  .site-footer .col-lg-5 {
    gap: 12px
  }

  .footer-logo {
    width: 105px;
    height: 90px;
    flex-basis: 105px
  }

  .site-footer .col-lg-5 p {
    font-size: .82rem
  }

  .site-footer .col-lg-5 p::before {
    font-size: 1.05rem
  }
}

.site-footer .footer-logo {
  padding: 9px;
  background: rgba(250, 247, 237, .94);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .12)
}

.site-footer .footer-logo {
  padding: 0;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .23) 0%, rgba(255, 255, 255, .12) 42%, rgba(255, 255, 255, 0) 76%);
  border: 0;
  border-radius: 50%;
  box-shadow: none
}

.site-footer .col-lg-5 {
  align-items: flex-start
}

.site-footer .footer-logo {
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .07) 34%, rgba(255, 255, 255, 0) 62%)
}

.site-footer .col-lg-5 p {
  padding-top: 0
}

.site-footer .col-lg-5 p::before {
  margin-top: 0
}

.site-footer .footer-logo {
  transform: translateY(-18px);
  background: radial-gradient(ellipse at 50% 53%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .055) 30%, rgba(255, 255, 255, 0) 54%)
}

@media(max-width:575px) {
  .site-footer .footer-logo {
    transform: translateY(-12px)
  }
}

.site-footer .footer-logo {
  transform: translateY(-24px);
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .07) 48%, rgba(255, 255, 255, 0) 72%)
}

@media(max-width:575px) {
  .site-footer .footer-logo {
    transform: translateY(-16px)
  }
}

.site-footer .footer-logo {
  transform: translateY(-24px);
  background: radial-gradient(circle at 50% 54%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .065) 30%, rgba(255, 255, 255, 0) 48%)
}

@media(max-width:575px) {
  .site-footer .footer-logo {
    transform: translateY(-16px)
  }
}

.site-footer .footer-social {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  margin-top: 5px
}

.site-footer .footer-social a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(213, 224, 217, .4);
  border-radius: 50%;
  color: #f7f4e9;
  font-size: .95rem;
  transition: background .2s, border-color .2s, color .2s, transform .2s
}

.site-footer .footer-social a:hover {
  background: #f4d17b;
  border-color: #f4d17b;
  color: #062b23;
  transform: translateY(-2px)
}

/* Mobile hero uses a separate property image below the existing copy. */
.hero-mobile-frame {
  display: none
}

@media(max-width:767px) {
  .hero {
    height: auto;
    min-height: 0;
    max-height: none;
    display: block;
    padding: 94px 0 24px;
    background: #082e24;
    color: #fff;
    overflow: hidden
  }

  .hero>.hero-image {
    display: none
  }

  .hero-shade {
    display: none
  }

  .hero-inner {
    padding: 0
  }

  .hero-copy {
    background: transparent
  }

  .hero-mobile-frame {
    display: block;
    position: relative;
    margin: 24px;
    padding: 9px 9px 28px;
    background: #f7f8f5;
    border-radius: 22px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .2)
  }

  .hero-mobile-image {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1.42;
    object-fit: fill;
    object-position: center 48%;
    border-radius: 14px
  }

  .hero-mobile-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 15px 0 19px;
    background: #fff;
    border-radius: 22px 0 18px 0;
    color: #203a30;
    font-size: .76rem;
    box-shadow: 0 5px 18px rgba(15, 40, 29, .12)
  }

  .hero-mobile-caption i {
    color: #c4932f;
    font-size: 1.35rem
  }
}

@media(max-width:767px) {

  html,
  body {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    overflow-x: hidden
  }

  body>nav,
  body>header,
  body>main,
  body>section,
  body>footer {
    max-width: 100vw
  }

  .container,
  .container-fluid {
    max-width: 100%;
  }
}

/* Mobile hero: light, editorial layout in the existing green and gold palette. */
@media(max-width:767px) {
  .hero {
    position: relative;
    isolation: isolate;
    background: radial-gradient(ellipse at 92% 2%, rgba(207, 169, 87, .13), transparent 34%), linear-gradient(180deg, #fbfcfa 0%, #f1f5f1 100%);
    color: #183d32;
    padding: 82px 0 28px
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 8% 30%, rgba(17, 83, 63, .055), transparent 46%)
  }

  .hero-inner {
    padding: 0
  }

  .hero-copy {
    max-width: 560px;
    margin: 10px 30px;
    text-align: center;
    background: transparent
  }

  .hero .eyebrow {
    justify-content: center;
    gap: 9px;
    margin-bottom: 13px;
    color: #97712c;
    font-size: .58rem;
    letter-spacing: .13em
  }

  .hero .eyebrow span {
    width: 18px;
    flex: 0 0 18px;
    background: #c8a556
  }

  .hero-copy h1 {
    max-width: 480px;
    margin: 0 auto 12px;
    color: #173f32;
    font-size: clamp(2.1rem, 8vw, 3.25rem);
    line-height: 1.04
  }

  .hero-copy h1 em {
    color: #bd8b2f
  }

  .hero-copy>p {
    max-width: 440px;
    margin: 0 auto;
    color: #637485;
    font-size: .76rem;
    line-height: 1.6
  }

  .hero-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    max-width: 440px;
    margin: 18px auto 0
  }

  .hero-points>div,
  .hero-points>div:first-child,
  .hero-points>div:last-child {
    width: auto;
    min-height: 68px;
    padding: 9px 7px;
    border: 1px solid #e1eaf0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 7px 18px rgba(27, 63, 90, .07);
    gap: 6px
  }

  .hero-points i,
  .hero-points .handshake-icon {
    width: 1.35rem;
    height: 1.35rem;
    flex-basis: 1.35rem;
    line-height: 1.35rem;
    font-size: 1.15rem;
    color: #17634e
  }

  .hero-points span {
    color: #244b3d;
    font-size: .58rem;
    line-height: 1.3;
    letter-spacing: .035em
  }

  .hero .hero-copy>.d-flex {
    justify-content: center;
    gap: 9px !important;
    margin-top: 16px !important
  }

  .hero .btn {
    padding: 11px 15px;
    font-size: .64rem;
    border-radius: 999px
  }

  .hero .btn-gold {
    background: linear-gradient(120deg, #f5d77c, #d6a63c);
    border-color: #d8ad4b;
    color: #173d32;
    box-shadow: 0 7px 18px rgba(174, 130, 43, .16)
  }

  .hero .btn-outline-light {
    background: #fff;
    border-color: #cbd9d1;
    color: #174638
  }

  .hero-mobile-frame {
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 0px;
    padding: 8px 8px 26px;
    background: #fff;
    border: 1px solid #e7e9df;
    box-shadow: 0 14px 32px rgba(23, 57, 44, .12)
  }

  .hero-mobile-image {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1.42;
    object-fit: fill;
    object-position: center 48%;
    border-radius: 14px
  }

  .hero-mobile-caption {
    min-height: 48px;
    font-size: .7rem;
    box-shadow: 0 5px 18px rgba(15, 40, 29, .1)
  }
}

/* Keep mobile hero actions consistent with the desktop buttons. */
@media(max-width:767px) {
  .hero .btn-gold {
    background: #052b23;
    border-color: #052b23;
    color: #fff;
    box-shadow: none
  }

  .hero .btn-gold:hover {
    background: #22604c;
    border-color: #22604c;
    color: #fff
  }

  .hero .btn-outline-light {
    background: #fff;
    border-color: #b8c7bd;
    color: #244b38
  }

  .hero .btn-outline-light:hover {
    background: #f2f6f2;
    border-color: #244b38;
    color: #244b38
  }

  .hero .hero-copy>.d-flex {
    padding: 0 4px
  }
}

@media(max-width:575px) {
  .hero {
    padding-top: 76px;
    padding-bottom: 24px
  }

  .hero-mobile-frame {
    margin-top: 20px
  }

  .hero-points {
    gap: 8px;
    margin-top: 16px
  }

  .hero-copy>.d-flex {
    margin-top: 14px !important
  }
}

@media(min-width:576px) and (max-width:767px) {
  .hero {
    padding-top: 88px;
    padding-bottom: 32px
  }

  .hero-copy {
    max-width: 540px;
    padding: 0 8px
  }

  .hero-copy>p {
    font-size: .94rem
  }

  .hero-points {
    gap: 12px;
    margin-top: 22px
  }

  .hero-points>div {
    min-height: 76px
  }

  .hero .btn {
    padding: 13px 20px;
    font-size: .7rem
  }

  .hero-mobile-frame {
    margin-top: 28px
  }
}

@media(max-width:767px) {
  .hero-points .handshake-icon {
    filter: hue-rotate(112deg) saturate(.8) brightness(.52)
  }
}

@keyframes mobileHeroFrameIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.98)
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}

@keyframes mobileHeroCaptionIn {
  from {
    opacity: 0;
    transform: translateY(10px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@media(max-width:767px) {
  .hero-mobile-frame {
    animation: mobileHeroFrameIn .8s .18s cubic-bezier(.2, .75, .25, 1) both
  }

  .hero-mobile-caption {
    animation: mobileHeroCaptionIn .55s .62s cubic-bezier(.2, .75, .25, 1) both
  }
}

.mobile-nav-search {
  display: none
}

@media(max-width:991px) {
  .site-nav .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px
  }

  .mobile-nav-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin-left: auto;
    border: 1px solid #d9e2dc;
    border-radius: 12px;
    background: #fff;
    color: #173f32;
    font-size: 1rem
  }

  .mobile-nav-search:hover {
    background: #f6f8f6;
    color: #173f32
  }

  .site-nav .navbar-toggler {
    margin-left: 0
  }

  .site-nav .navbar-collapse {
    flex-basis: 100%;
    width: 100%
  }

  .site-nav.mobile-menu-open .mobile-nav-search {
    display: none
  }

  .site-nav.mobile-menu-open .navbar-toggler {
    margin-left: auto
  }

  .site-nav .nav-actions .nav-search {
    display: inline-flex
  }
}

@media(max-width:575px) {
  .site-nav .container {
    gap: 7px;
    padding-right: 10px;
    padding-left: 10px
  }

  .navbar-brand {
    margin-right: 0;
    font-size: .78rem;
    letter-spacing: -.02em
  }

  .navbar-brand img {
    width: 34px;
    height: 34px;
    flex-basis: 34px
  }

  .mobile-nav-search {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px
  }

  .site-nav .navbar-toggler {
    padding: .35rem .5rem;
    border-radius: 10px
  }

  .site-nav.mobile-menu-open .nav-actions {
    width: 100%
  }
}

@media(max-width:767px) {
  .about-preview .image-frame {
    display: none
  }
}

@media(max-width:767px) {
  .about-preview-visual {
    display: none !important
  }

  .about-preview.section-pad {
    padding-top: 38px;
    padding-bottom: 30px
  }

  .about-preview .row {
    --bs-gutter-y: 1.25rem
  }

  #featured.section-pad {
    padding-top: 34px
  }
}

@media(max-width:767px) {
  .opportunity-card {
    max-width: 540px;
    margin: 0 auto;
    border-radius: 20px
  }

  .opportunity-copy {
    padding: 20px 18px 18px
  }

  .opportunity-copy .eyebrow {
    font-size: .66rem;
    letter-spacing: .17em;
    margin-bottom: 8px
  }

  .opportunity-copy h2 {
    font-size: 1.7rem;
    line-height: 1.12;
    margin-bottom: 8px
  }

  .opportunity-copy p {
    font-size: .88rem;
    line-height: 1.45;
    margin-bottom: 12px
  }

  .opportunity-copy>.d-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px !important;
    margin-top: 0
  }

  .opportunity-copy>.d-flex .btn {
    flex: 1 1 105px;
    min-height: 44px;
    padding: 10px 12px;
    font-size: .84rem;
    border-radius: 12px
  }

  .opportunity-image {
    height: 145px;
    min-height: 145px;
    background-position: center, right center
  }
}

@media(max-width:575px) {
  .opportunity-band {
    padding: 18px 0 24px
  }

  .opportunity-band>.container {
    width: calc(100% - 40px);
    max-width: 420px
  }

  .opportunity-copy {
    padding: 17px 15px 15px
  }

  .opportunity-copy h2 {
    font-size: 1.55rem
  }

  .opportunity-copy p {
    font-size: .83rem;
    line-height: 1.42;
    margin-bottom: 10px
  }

  .opportunity-image {
    height: 112px;
    min-height: 112px
  }
}

@media(max-width:767px) {

  .enquiry-section .contact-line,
  .enquiry-section .social-row,
  #contact .contact-line,
  #contact .social-row {
    display: none !important
  }
}

@media(max-width:575px) {
  .opportunity-copy .eyebrow {
    font-size: .58rem;
    letter-spacing: .14em
  }

  .opportunity-copy h2 {
    font-size: 1.35rem;
    line-height: 1.12
  }

  .opportunity-copy p {
    font-size: .78rem;
    line-height: 1.4
  }

  .opportunity-copy>.d-flex .btn {
    font-size: .78rem;
    padding: 9px 10px
  }

  .opportunity-image {
    height: 94px;
    min-height: 94px;
    background-size: 100% 100%, auto 100%;
    background-position: center, right center
  }
}

/* Opportunity card follows the wide text-left, image-right layout on mobile. */
@media(min-width:380px) and (max-width:767px) {
  .opportunity-band>.container {
    width: calc(100% - 32px);
    max-width: 640px
  }

  .opportunity-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(112px, .44fr);
    min-height: 0;
    border-radius: 20px
  }

  .opportunity-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    padding: 16px 12px 16px 16px
  }

  .opportunity-copy .eyebrow {
    font-size: .58rem;
    letter-spacing: .13em;
    margin-bottom: 7px
  }

  .opportunity-copy h2 {
    font-size: 1.32rem;
    line-height: 1.12;
    margin-bottom: 7px
  }

  .opportunity-copy p {
    font-size: .76rem;
    line-height: 1.42;
    margin-bottom: 10px
  }

  .opportunity-copy>.d-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 7px !important;
    width: 100%;
    margin: 0
  }

  .opportunity-copy>.d-flex .btn {
    flex: 1 1 82px;
    min-height: 40px;
    padding: 8px 9px;
    font-size: .72rem;
    border-radius: 10px
  }

  .opportunity-image {
    height: 100%;
    min-height: 190px;
    background-size: 100% 100%, auto 100%;
    background-position: left center, right center
  }
}

@media(max-width:379px) {
  .opportunity-band>.container {
    width: calc(100% - 32px)
  }

  .opportunity-card {
    grid-template-columns: 1fr
  }

  .opportunity-copy {
    padding: 16px
  }

  .opportunity-copy h2 {
    font-size: 1.45rem
  }

  .opportunity-copy p {
    font-size: .8rem
  }

  .opportunity-image {
    height: 96px;
    min-height: 96px;
    background-size: 100% 100%, auto 100%;
    background-position: left center, right center
  }
}

/* Keep the opportunity card typography compact and balanced on phones. */
@media(max-width:767px) {
  .opportunity-card {
    display: block !important;
    position: relative;
    width: calc(100% - 12px);
    max-width: 440px;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    background: linear-gradient(110deg, #07372c 0%, #104536 62%, #0b3b2f 100%) !important
  }

  .opportunity-copy {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 14px 15px !important
  }

  .opportunity-copy .eyebrow {
    font-size: .5rem !important;
    letter-spacing: .1em;
    margin-bottom: 4px
  }

  .opportunity-copy h2 {
    font-size: 1.12rem !important;
    line-height: 1.12;
    letter-spacing: -.02em;
    margin-bottom: 5px
  }

  .opportunity-copy p {
    font-size: .68rem !important;
    line-height: 1.38;
    margin-bottom: 8px
  }

  .opportunity-copy p br {
    display: none
  }

  .opportunity-copy>.d-flex {
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px !important;
    width: 100%;
    margin: 0
  }

  .opportunity-copy>.d-flex .btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 34px;
    padding: 6px 8px;
    font-size: .62rem !important;
    white-space: nowrap;
    border-radius: 9px
  }

  .opportunity-copy>.d-flex .btn-light {
    order: 2
  }

  .opportunity-copy>.d-flex .btn-gold {
    order: 1
  }

  .opportunity-image-mobile {
    display: none !important
  }
}

@media(max-width:575px) {
  .site-footer {
    padding-top: 18px
  }

  .site-footer .container>.row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 12px !important;
    margin: 0;
    width: 100%
  }

  .site-footer .container>.row>.col-lg-5 {
    grid-column: 1/-1;
    width: 100%;
    max-width: none;
    padding: 0
  }

  .site-footer .container>.row>.col-lg-4,
  .site-footer .container>.row>.col-lg-3 {
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
    gap: 7px !important
  }

  .site-footer .col-lg-5 {
    gap: 8px
  }

  .site-footer .col-lg-4::before,
  .site-footer .col-lg-3::before {
    font-size: .65rem;
    margin-bottom: 3px
  }

  .site-footer .col-lg-4 a,
  .site-footer .col-lg-3>a {
    font-size: .68rem;
    line-height: 1.4;
    overflow-wrap: anywhere
  }

  .site-footer .footer-social {
    gap: 6px;
    margin-top: 1px;
    flex-wrap: wrap
  }

  .site-footer .footer-social a {
    width: 31px;
    height: 31px;
    font-size: .82rem
  }

  .site-footer .footer-bottom {
    margin-top: 14px;
    padding-top: 10px;
    gap: 7px
  }
}

.site-footer .footer-logo {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important
}

/* Pointer tilt shared by the site's card components; preserves each card's colors. */
.tilt-3d-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .18s cubic-bezier(.2, .7, .2, 1);
}

.property-card.tilt-3d-card {
  transform: perspective(1100px) rotateX(var(--project-enquiry-tilt-x, 0deg)) rotateY(var(--project-enquiry-tilt-y, 0deg))
}

.insight-card.tilt-3d-card,
.team-card.tilt-3d-card,
.detail-panel.tilt-3d-card,
.opportunity-card.tilt-3d-card,
.testimonial-card.tilt-3d-card,
.image-frame.tilt-3d-card {
  transform: perspective(1100px) rotateX(var(--project-enquiry-tilt-x, 0deg)) rotateY(var(--project-enquiry-tilt-y, 0deg));
}

.property-card.tilt-3d-card:hover {
  transform: perspective(1100px) rotateX(var(--project-enquiry-tilt-x, 0deg)) rotateY(var(--project-enquiry-tilt-y, 0deg)) translateY(-8px)
}

.insight-card.tilt-3d-card:hover {
  transform: perspective(1100px) rotateX(var(--project-enquiry-tilt-x, 0deg)) rotateY(var(--project-enquiry-tilt-y, 0deg)) translateY(-4px)
}

.team-card.tilt-3d-card:hover {
  transform: perspective(1100px) rotateX(var(--project-enquiry-tilt-x, 0deg)) rotateY(var(--project-enquiry-tilt-y, 0deg)) translateY(-5px)
}

.detail-panel.tilt-3d-card:hover,
.opportunity-card.tilt-3d-card:hover,
.testimonial-card.tilt-3d-card:hover {
  transform: perspective(1100px) rotateX(var(--project-enquiry-tilt-x, 0deg)) rotateY(var(--project-enquiry-tilt-y, 0deg)) scale(1.008)
}

.about-story-visual {
  overflow: hidden;
  border-radius: 26px;
  box-shadow: 0 18px 42px rgba(12, 48, 36, .18);
  transform-style: preserve-3d;
  transition: transform .42s cubic-bezier(.2, .75, .25, 1), box-shadow .42s ease
}

.about-story-visual.tilt-3d-card {
  transform: perspective(1100px) rotateX(var(--project-enquiry-tilt-x, 0deg)) rotateY(var(--project-enquiry-tilt-y, 0deg))
}

.about-story-visual img {
  display: block;
  border-radius: inherit;
  transition: transform .6s cubic-bezier(.2, .75, .25, 1), filter .6s ease;
  transform: translateZ(0)
}

@media(hover:hover) and (pointer:fine) {
  .about-story-visual:hover {
    box-shadow: 0 26px 58px rgba(12, 48, 36, .25)
  }

  .about-story-visual:hover img {
    transform: translateZ(18px) scale(1.035);
    filter: saturate(1.06)
  }
}

@media(hover:none) and (pointer:coarse) {
  .about-story-visual:active {
    transform: perspective(900px) rotateX(2deg) rotateY(-2deg) scale(.99)
  }
}

@media(max-width:575px) {
  .about-story-visual {
    border-radius: 18px
  }

  .about-story-visual img {
    height: clamp(210px, 65vw, 280px) !important;
    object-fit: fill
  }
}

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

  .about-story-visual,
  .about-story-visual img {
    transition: none !important;
    transform: none !important
  }
}

@media(prefers-reduced-motion:reduce) {
  .tilt-3d-card {
    transform: none !important;
    transition: none !important;
    will-change: auto
  }
}

@media(hover:none) and (pointer:coarse) {
  .tilt-3d-card:active {
    transform: perspective(1100px) rotateX(1.5deg) rotateY(-1.5deg) scale(.995) !important
  }

  .project-enquiry-card.native-select-active:active {
    transform: none !important
  }
}

.enquiry-form.contact-enquiry-card {
  width: 100%;
  max-width: 700px !important;
  margin-left: auto;
  padding: 22px !important
}

#contact .contact-enquiry-card .form-top {
  margin-bottom: 14px;
  padding-bottom: 12px
}

#contact .contact-enquiry-card .row {
  --bs-gutter-y: .5rem
}

#contact .contact-enquiry-card input:not([type=hidden]),
#contact .contact-enquiry-card textarea {
  min-height: 50px;
  padding: 11px 13px
}

#contact .contact-enquiry-card textarea {
  min-height: 76px
}

#contact .contact-enquiry-card .btn {
  min-height: 50px
}

@media(max-width:575px) {
  .enquiry-form.contact-enquiry-card {
    max-width: 100% !important;
    padding: 20px 18px !important
  }
}

.opportunity-copy h2 {
  font-size: clamp(1.8rem, 2.3vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  white-space: normal;
  text-wrap: balance
}

.opportunity-copy h2 em {
  color: #edc96c;
  text-shadow: 0 3px 18px rgba(223, 189, 114, .18)
}

@media(max-width:767px) {
  .opportunity-copy h2 {
    font-size: clamp(1.25rem, 4.6vw, 1.7rem) !important;
    line-height: 1.1
  }
}

@media(min-width:1200px) {
  .opportunity-copy p {
    max-width: none;
    font-size: .94rem;
    line-height: 1.5
  }
}

.mobile-project-select {
  position: relative;
  width: 100%
}

.mobile-project-select>select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  inset: auto !important;
  opacity: 0 !important;
  pointer-events: none !important;
  padding: 0 !important;
  border: 0 !important
}

.mobile-project-select-trigger {
  display: flex;
  width: 100%;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 15px;
  border: 1px solid #dfe6e0;
  border-radius: 13px;
  background: #fff;
  color: #20342c;
  text-align: left;
  font: inherit;
  font-size: .92rem;
  line-height: 1.35
}

.mobile-project-select-trigger:focus-visible {
  border-color: #739681;
  box-shadow: 0 0 0 4px #174b3d12;
  outline: none
}

.mobile-project-select-trigger i {
  flex: 0 0 auto;
  font-size: .85rem
}

.mobile-project-select-menu {
  display: none;
  position: absolute;
  z-index: 100;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  max-height: 230px;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;
  padding: 5px;
  border: 1px solid #d8e1da;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(25, 48, 38, .2);
  scrollbar-width: thin;
  scrollbar-color: #9aada0 #edf2ed
}

.mobile-project-select.is-open .mobile-project-select-menu {
  display: grid;
  gap: 2px
}

.mobile-project-select-option {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #263d33;
  text-align: left;
  font: inherit;
  font-size: .9rem;
  line-height: 1.3
}

.mobile-project-select-group {
  padding: 8px 10px 4px;
  color: #718178;
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase
}

.mobile-project-select-option:hover,
.mobile-project-select-option:focus-visible,
.mobile-project-select-option.selected {
  background: #e9f0e9;
  color: #153f33;
  outline: none
}

@media(max-width:575px) {
  .enquiry-section .enquiry-form.project-enquiry-card {
    width: calc(100% - 16px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .enquiry-form.project-enquiry-card {
    transform: perspective(1050px) rotateX(var(--project-enquiry-tilt-x, 0deg)) rotateY(var(--project-enquiry-tilt-y, 0deg));
    border-radius: 22px;
    box-shadow: 0 22px 38px rgba(25, 54, 41, .14), 0 7px 15px rgba(25, 54, 41, .08), inset 0 1px 0 #fff;
  }

  .enquiry-form.project-enquiry-card:active {
    box-shadow: 0 12px 22px rgba(25, 54, 41, .2), inset 0 1px 0 #fff
  }

  .enquiry-form.project-enquiry-card .form-top,
  .enquiry-form.project-enquiry-card>.row,
  .enquiry-form.project-enquiry-card>form {
    transform: translateZ(3px)
  }

  .enquiry-form.project-enquiry-card>.row label,
  .enquiry-form.project-enquiry-card>form>.row label {
    font-size: .7rem;
    margin-bottom: 5px
  }

  .enquiry-form.project-enquiry-card>.row input,
  .enquiry-form.project-enquiry-card>.row select,
  .enquiry-form.project-enquiry-card>form>.row input,
  .enquiry-form.project-enquiry-card>form>.row select {
    font-size: .86rem
  }

  .enquiry-form.project-enquiry-card>.row textarea,
  .enquiry-form.project-enquiry-card>form>.row textarea {
    font-size: .86rem
  }

  .enquiry-form.project-enquiry-card {
    width: 100%;
    max-width: none;
    transform: perspective(1000px) rotateX(calc(var(--project-enquiry-tilt-x, 0deg) + 1deg)) rotateY(calc(var(--project-enquiry-tilt-y, 0deg) - .6deg));
    transform-style: preserve-3d;
    box-shadow: 0 26px 36px rgba(25, 54, 41, .17), 0 9px 15px rgba(25, 54, 41, .1), inset 0 1px 0 #fff;
  }

  .enquiry-form.project-enquiry-card::before {
    opacity: .42;
    background: linear-gradient(120deg, rgba(23, 84, 71, .42), transparent 34%, rgba(185, 137, 42, .42))
  }

  .enquiry-form.project-enquiry-card:active {
    box-shadow: 0 13px 20px rgba(25, 54, 41, .2), inset 0 1px 0 #fff
  }

  .enquiry-form.project-enquiry-card:active::before {
    opacity: .72
  }

  .enquiry-form.project-enquiry-card .form-top,
  .enquiry-form.project-enquiry-card>.row,
  .enquiry-form.project-enquiry-card>form {
    transform: translateZ(8px)
  }

  .mobile-project-select {
    position: relative;
    width: 100%
  }

  .mobile-project-select>select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    inset: auto !important;
    opacity: 0 !important;
    pointer-events: none !important;
    padding: 0 !important;
    border: 0 !important
  }

  .mobile-project-select-trigger {
    display: flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #d8e1da;
    border-radius: 13px;
    background: #fff;
    color: #20342c;
    text-align: left;
    font: inherit;
    font-size: .8rem
  }

  .mobile-project-select-trigger i {
    flex: 0 0 auto;
    font-size: .75rem
  }

  .mobile-project-select-menu {
    display: none;
    position: absolute;
    z-index: 80;
    top: calc(100% + 5px);
    left: 0;
    width: 100%;
    max-height: min(230px, 36vh);
    overflow-y: auto;
    padding: 5px;
    border: 1px solid #d8e1da;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(25, 48, 38, .2)
  }

  .mobile-project-select.is-open .mobile-project-select-menu {
    display: grid;
    gap: 2px
  }

  .mobile-project-select-option {
    width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #263d33;
    text-align: left;
    font: inherit;
    font-size: .78rem;
    line-height: 1.25
  }

  .mobile-project-select-group {
    padding: 8px 9px 4px;
    color: #718178;
    font-size: .63rem;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase
  }

  .mobile-project-select-option:hover,
  .mobile-project-select-option:focus-visible,
  .mobile-project-select-option.selected {
    background: #e9f0e9;
    color: #153f33;
    outline: none
  }

  .enquiry-form.project-enquiry-card {
    background: linear-gradient(145deg, #fbfcfa 0%, #f5f8f4 58%, #f7f1e5 100%) !important;
    border-color: #d9e2db;
    color: #20342c;
    box-shadow: 0 18px 42px rgba(28, 54, 42, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
  }

  .enquiry-form.project-enquiry-card .form-top {
    color: #946b19;
    border-color: #d9dfd9
  }

  .enquiry-form.project-enquiry-card label {
    color: #34483d
  }

  .enquiry-form.project-enquiry-card input:not([type=hidden]),
  .enquiry-form.project-enquiry-card select,
  .enquiry-form.project-enquiry-card textarea {
    background: #fff;
    color: #20342c;
    border-color: #d8e1da
  }

  .enquiry-form.project-enquiry-card input:not([type=hidden])::placeholder,
  .enquiry-form.project-enquiry-card textarea::placeholder {
    color: #9aa9a0
  }

  .enquiry-form.project-enquiry-card select {
    color-scheme: light
  }

  .enquiry-form.project-enquiry-card select option {
    background: #fff;
    color: #20342c
  }

  .enquiry-form.project-enquiry-card input:not([type=hidden]):hover,
  .enquiry-form.project-enquiry-card input:not([type=hidden]):focus,
  .enquiry-form.project-enquiry-card select:hover,
  .enquiry-form.project-enquiry-card select:focus,
  .enquiry-form.project-enquiry-card textarea:hover,
  .enquiry-form.project-enquiry-card textarea:focus {
    background: #fff;
    color: #20342c;
    border-color: #aabdb0;
    box-shadow: 0 0 0 3px rgba(23, 79, 67, .08)
  }

  .enquiry-form.project-enquiry-card .enquiry-submit,
  .enquiry-form.project-enquiry-card .btn-gold {
    background: #175447;
    color: #fff;
    box-shadow: 0 8px 18px rgba(23, 84, 71, .16)
  }

  .enquiry-section>.container>.row {
    --bs-gutter-y: .9rem
  }

  .enquiry-section .enquiry-benefits {
    gap: 7px;
    margin: 14px 0 10px
  }

  .enquiry-section .enquiry-form.project-enquiry-card {
    margin-top: 0 !important;
    margin-bottom: 16px !important
  }

  .enquiry-form.project-enquiry-card {
    width: calc(100% - 28px);
    max-width: 460px;
    margin: 18px auto 28px !important;
    padding: 16px 14px !important
  }

  .enquiry-form.project-enquiry-card .form-top {
    margin-bottom: 10px;
    padding-bottom: 8px
  }

  .enquiry-form.project-enquiry-card>.row,
  .enquiry-form.project-enquiry-card>form>.row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px !important;
    row-gap: 8px !important;
    margin: 0 !important
  }

  .enquiry-form.project-enquiry-card>.row>*,
  .enquiry-form.project-enquiry-card>form>.row>* {
    width: auto;
    max-width: none;
    padding: 0
  }

  .enquiry-form.project-enquiry-card>.row>.col-12,
  .enquiry-form.project-enquiry-card>form>.row>.col-12 {
    grid-column: 1/-1
  }

  .enquiry-form.project-enquiry-card>.row label,
  .enquiry-form.project-enquiry-card>form>.row label {
    font-size: .64rem;
    margin-bottom: 4px
  }

  .enquiry-form.project-enquiry-card>.row input,
  .enquiry-form.project-enquiry-card>.row select,
  .enquiry-form.project-enquiry-card>form>.row input,
  .enquiry-form.project-enquiry-card>form>.row select {
    min-height: 42px;
    padding: 8px 10px;
    font-size: .8rem
  }

  .enquiry-form.project-enquiry-card>.row textarea,
  .enquiry-form.project-enquiry-card>form>.row textarea {
    min-height: 68px;
    padding: 8px 10px;
    font-size: .8rem
  }

  .enquiry-form.project-enquiry-card>.row .btn,
  .enquiry-form.project-enquiry-card>form>.row .btn {
    min-height: 42px;
    padding: 8px 10px
  }
}

@media(max-width:575px) and (hover:none) and (pointer:coarse) {
  .enquiry-form.project-enquiry-card.tilt-3d-card:active {
    transform: perspective(900px) rotateX(3deg) rotateY(-2deg) scale(.985) !important;
    box-shadow: 0 12px 22px rgba(25, 54, 41, .2), inset 0 1px 0 #fff;
  }
}

@media(max-width:575px) {
  .enquiry-form.project-enquiry-card.contact-enquiry-card {
    width: calc(100% - 16px) !important;
    max-width: none !important;
    margin: 12px auto 24px !important;
  }
}

#featured .section-heading {
  margin-bottom: 14px
}

#featured .property-filters {
  margin-bottom: 14px
}

#featured #featuredProjects {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem
}

/* Homepage projects carousel */
#featured .home-project-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0 4px 14px;
  margin-bottom: -14px;
}

#featured .home-project-viewport::-webkit-scrollbar {
  display: none;
}

#featured .home-project-track {
  display: flex;
  gap: 22px;
  align-items: stretch;
  background: transparent;
}

#featured .home-project-track::after {
  content: "";
  flex: 0 0 calc((100% - 22px) / 2);
}

#featured .home-project-track>.project-result {
  flex: 0 0 calc((100% - 22px) / 2);
  width: calc((100% - 22px) / 2);
  max-width: none;
  padding: 0;
  scroll-snap-align: start;
}

#featured .home-project-track .property-card {
  height: 100%;
}

#featured .home-project-carousel.is-filtered .home-project-viewport {
  overflow: visible;
  scroll-snap-type: none;
}

#featured .home-project-carousel.is-filtered .home-project-track {
  flex-wrap: wrap;
}

#featured .home-project-carousel.is-filtered .home-project-track::after {
  display: none;
}

#featured .home-project-carousel.is-filtered .home-project-track>.project-result {
  flex-basis: calc((100% - 22px) / 2);
  width: calc((100% - 22px) / 2);
}

#featured .home-project-carousel.is-filtered .home-project-controls {
  display: none;
}

#featured .home-project-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  margin-top: 18px;
}

#featured .home-project-count {
  color: var(--muted, #718079);
  font-size: .83rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}

#featured .home-project-progress {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 360px;
  margin-inline: clamp(12px, 4vw, 44px);
}

#featured .home-project-progress button {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 4px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

#featured .home-project-progress button::before {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 5px;
  border-radius: 999px;
  background: #d9dfda;
  content: "";
  transform: translateY(-50%);
  transition: background-color .2s ease;
}

#featured .home-project-progress button:hover,
#featured .home-project-progress button.is-active {
  background: transparent;
}

#featured .home-project-progress button:hover::before,
#featured .home-project-progress button.is-active::before {
  background: #174b3d;
}

#featured .home-project-progress button:focus-visible {
  outline: 2px solid #c49a43;
  outline-offset: 3px;
}

#featured .home-project-arrows {
  display: flex;
  gap: 10px;
}

#featured .home-project-arrow {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #cddbd2;
  border-radius: 50%;
  background: #fff;
  color: #174d3f;
  font-size: 1.05rem;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

#featured .home-project-arrow:hover {
  transform: translateY(-2px);
  border-color: #174d3f;
  background: #174d3f;
  color: #fff;
}

#featured .home-project-arrow:focus-visible {
  outline: 3px solid rgba(198, 158, 55, .55);
  outline-offset: 3px;
}

@media (max-width: 991px) {
  #featured .home-project-track>.project-result {
    flex-basis: calc((100% - 22px) / 2);
    width: calc((100% - 22px) / 2);
  }
}

@media (max-width: 575px) {
  #featured .home-project-track {
    gap: 12px;
  }

  #featured .home-project-track>.project-result {
    flex-basis: 88%;
    width: 88%;
  }

  #featured .home-project-controls {
    margin-top: 12px;
  }

  #featured .home-project-carousel.is-filtered .home-project-track>.project-result {
    flex-basis: 100%;
    width: 100%;
  }
}

@media(max-width:575px) {
  #featured .section-heading {
    margin-bottom: 10px
  }

  #featured .property-filters {
    margin-bottom: 10px
  }

  #featured #featuredProjects {
    --bs-gutter-x: .65rem;
    --bs-gutter-y: .65rem
  }
}

.project-detail-intro {
  padding-top: 28px
}

.project-detail-intro h2 {
  margin-bottom: 14px
}

.project-subheading {
  font-size: 1.65rem;
  margin: 32px 0 16px
}

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

.project-fact {
  display: flex;
  min-height: 84px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, #f7f8f4)
}

.project-fact strong {
  color: var(--green);
  font-family: Georgia, serif;
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1.15
}

.project-fact span {
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.35
}

.project-amenities {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 0;
  margin: 0;
  list-style: none
}

.project-amenities li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: #536159;
  font-size: .9rem;
  line-height: 1.45
}

.project-amenities i {
  flex: 0 0 auto;
  display: inline-grid;
  width: 1.15em;
  height: 1.45em;
  place-items: center;
  line-height: 1;
  color: #a57820;
  font-size: 1rem
}

.project-info-note {
  margin: 24px 0 0;
  padding: 13px 15px;
  border-left: 2px solid #c49a3c;
  background: #f7f5ee;
  color: #6c756e;
  font-size: .78rem;
  line-height: 1.55
}

.project-snapshot {
  position: static
}

.project-snapshot h3 {
  font-size: 1.8rem;
  margin-bottom: 12px
}

.project-type-label {
  margin: 0;
  color: #314d40;
  font-size: .9rem;
  font-weight: 650
}

.project-gallery {
  padding: 72px 0 0
}

@media(min-width:992px) {
  #projectEnquiry {
    margin-top: clamp(440px, 38vw, 520px) !important
  }
}

/* Align the enquiry card with the project title and place the snapshot beneath it. */
.project-detail-content-row {
  --bs-gutter-y: 0;
  align-items: start;
  margin-top: 0 !important;
}

.project-detail-enquiry-column {
  padding-top: 55px;
}

.project-detail-enquiry-column>.project-enquiry-card {
  width: 100%;
  max-width: none;
  margin-top: 0 !important;
}

#projectEnquiry {
  margin-top: 0 !important;
}

@media (max-width: 991.98px) {
  .project-detail-enquiry-column {
    padding-top: 0;
  }
}

.project-gallery .section-heading {
  align-items: center
}

.project-gallery .section-heading h2 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  margin-bottom: 0
}

.project-gallery .section-heading>p {
  max-width: none;
  margin: 0;
  white-space: nowrap;
  text-align: center
}

@media (max-width: 991.98px) {
  .project-gallery .section-heading>p {
    white-space: normal;
  }
}

.project-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px
}

.project-gallery-card {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(18, 55, 40, .07)
}

.project-gallery-card img {
  display: block;
  width: 100%;
  height: 250px;
  object-fit: contain;
  background: #f5f6f2
}

.project-gallery-card figcaption {
  padding: 12px 15px;
  color: #536159;
  font-size: .8rem;
  line-height: 1.4
}

.project-brochure.section-pad {
  padding: 42px 0 20px
}

.project-brochure-panel {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 24px 28px;
  border: 1px solid #dce5de;
  border-radius: 20px;
  background: linear-gradient(115deg, #f7f9f6, #eef4ef);
  box-shadow: 0 12px 30px rgba(18, 55, 40, .06)
}

.project-brochure-icon {
  display: grid;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid #dce7dd;
  border-radius: 16px;
  background: #fff;
  color: #174b3d;
  font-size: 1.5rem
}

.project-brochure-copy {
  flex: 1;
  min-width: 0
}

.project-brochure-copy .eyebrow {
  margin-bottom: 5px
}

.project-brochure-copy h2 {
  margin: 0 0 5px;
  font-size: clamp(1.45rem, 2.5vw, 2rem)
}

.project-brochure-copy h2 em {
  color: #174b3d
}

.project-brochure-copy p {
  margin: 0;
  font-size: .86rem;
  line-height: 1.55
}

.project-brochure-link {
  flex: 0 0 auto;
  white-space: nowrap
}

@media(max-width:575px) {
  .project-brochure.section-pad {
    padding: 28px 0 10px
  }

  .project-brochure-panel {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 17px;
    border-radius: 16px
  }

  .project-brochure-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 13px;
    font-size: 1.25rem
  }

  .project-brochure-copy h2 {
    font-size: 1.35rem
  }

  .project-brochure-copy p {
    font-size: .76rem
  }

  .project-brochure-link {
    grid-column: 1/-1;
    justify-self: stretch
  }
}

@media(max-width:991px) {
  .project-snapshot {
    position: static
  }

  .project-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:575px) {
  .project-detail-intro {
    padding-top: 22px
  }

  .project-subheading {
    font-size: 1.4rem;
    margin: 24px 0 12px
  }

  .project-facts-grid {
    gap: 8px
  }

  .project-fact {
    min-height: 76px;
    padding: 12px
  }

  .project-fact strong {
    font-size: 1rem
  }

  .project-fact span {
    font-size: .7rem
  }

  .project-amenities {
    grid-template-columns: 1fr;
    gap: 2px
  }

  .project-amenities li {
    padding: 5px 0;
    font-size: .84rem
  }

  .project-gallery {
    padding-top: 48px
  }

  .project-gallery .section-heading {
    gap: 10px;
    margin-bottom: 18px
  }

  .project-gallery .section-heading h2 {
    font-size: 2.25rem
  }

  .project-gallery .section-heading>p {
    font-size: .84rem
  }

  .project-gallery-grid {
    grid-template-columns: 1fr;
    gap: 14px
  }

  .project-gallery-card img {
    height: 210px
  }
}

@media(max-width:575px) {
  .enquiry-form.project-enquiry-card {
    width: calc(100% - 32px) !important;
    margin: 12px auto 24px !important;
    background: linear-gradient(145deg, #fff 0%, #fbfcfa 72%, #f8f7f1 100%) !important;
    border-color: rgba(44, 76, 59, .12);
    box-shadow: 0 15px 30px rgba(25, 54, 41, .09), 0 4px 10px rgba(25, 54, 41, .04), inset 0 1px 0 #fff;
  }

  .enquiry-form.project-enquiry-card::before {
    opacity: .18;
    background: linear-gradient(120deg, rgba(23, 84, 71, .2), transparent 38%, rgba(185, 137, 42, .18))
  }
}

@media(max-width:575px) {
  .enquiry-form.project-enquiry-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0px !important;
    padding: 18px 16px !important;
    transform: perspective(1050px) rotateX(var(--project-enquiry-tilt-x, 0deg)) rotateY(var(--project-enquiry-tilt-y, 0deg));
    border-radius: 22px;
    box-shadow: 0 24px 38px rgba(25, 54, 41, .15), 0 7px 15px rgba(25, 54, 41, .08), inset 0 1px 0 #fff;
  }

  .enquiry-form.project-enquiry-card .form-top,
  .enquiry-form.project-enquiry-card>.row,
  .enquiry-form.project-enquiry-card>form {
    transform: translateZ(2px)
  }

  .enquiry-form.project-enquiry-card>.row,
  .enquiry-form.project-enquiry-card>form>.row {
    column-gap: 12px !important;
    row-gap: 10px !important
  }

  .enquiry-form.project-enquiry-card>.row label,
  .enquiry-form.project-enquiry-card>form>.row label {
    font-size: .7rem;
    margin-bottom: 5px
  }

  .enquiry-form.project-enquiry-card>.row input,
  .enquiry-form.project-enquiry-card>.row select,
  .enquiry-form.project-enquiry-card>form>.row input,
  .enquiry-form.project-enquiry-card>form>.row select {
    font-size: .86rem
  }

  .enquiry-form.project-enquiry-card>.row textarea,
  .enquiry-form.project-enquiry-card>form>.row textarea {
    font-size: .86rem
  }
}

@media(max-width:575px) and (hover:none) and (pointer:coarse) {
  .enquiry-form.project-enquiry-card.tilt-3d-card:active {
    transform: perspective(900px) rotateX(3deg) rotateY(-2deg) scale(.985) !important;
    box-shadow: 0 12px 22px rgba(25, 54, 41, .2), inset 0 1px 0 #fff;
  }
}

.lead-modal textarea {
  width: 100%;
  min-height: 90px;
  padding: 14px 15px;
  border: 1px solid #dfe6e0;
  border-radius: 13px;
  color: var(--ink);
  background: #fff;
  resize: vertical
}

.lead-modal textarea::placeholder {
  color: #98a29c
}

.lead-modal textarea:focus {
  border-color: #739681;
  box-shadow: 0 0 0 4px #174b3d12;
  outline: 0
}

.lead-modal .mobile-project-select-trigger {
  color: var(--ink);
  background: #fff
}


@media(max-width:575px) {

  .enquiry-form.project-enquiry-card,
  .enquiry-form.project-enquiry-card.contact-enquiry-card {
    width: calc(100% - 24px) !important;
    max-width: 460px !important;
    margin: 14px auto 24px !important;
    padding: 16px 14px !important;
  }

  .enquiry-form.project-enquiry-card>form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .lead-modal form>.row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px !important;
    row-gap: 9px !important;
    margin: 0 !important;
  }

  .lead-modal form>.row>* {
    width: auto;
    max-width: none;
    padding: 0
  }

  .lead-modal form>.row>.col-12:nth-child(5),
  .lead-modal form>.row>.col-12:last-child {
    grid-column: 1/-1
  }

  .lead-modal form>.row label {
    font-size: .68rem;
    margin-bottom: 5px
  }

  .lead-modal form>.row input,
  .lead-modal form>.row select,
  .lead-modal form>.row textarea {
    min-height: 42px;
    padding: 8px 10px;
    font-size: .82rem
  }

  .lead-modal form>.row textarea {
    min-height: 68px
  }

  .lead-modal form>.row .btn-gold {
    min-height: 44px;
    padding: 9px 12px;
    background: #175447;
    color: #fff;
    border-color: #175447
  }
}

.opportunity-copy h2 .opportunity-highlight {
  color: #f2cf79
}

.projects-page .opportunity-copy h2 {
  font-size: clamp(1.2rem, 2vw, 1.85rem) !important;
  line-height: 1.08
}


@media(max-width:575px) {
  .lead-modal .modal-dialog {
    width: calc(100% - 40px);
    max-width: 360px;
    margin: 12px auto
  }

  .lead-modal .modal-content {
    max-height: calc(100dvh - 56px);
    overflow: hidden;
    border-radius: 22px
  }

  .lead-modal .modal-body {
    min-height: 0;
    padding: 22px 18px;
    overflow-y: auto
  }

  .lead-modal .eyebrow {
    font-size: .58rem;
    letter-spacing: .18em;
    margin-bottom: 10px
  }

  .lead-modal h3 {
    font-size: clamp(1.8rem, 8vw, 2.05rem);
    line-height: 1.02;
    margin-bottom: 9px
  }

  .lead-modal .modal-body>p {
    font-size: .8rem;
    line-height: 1.45;
    margin-bottom: 12px
  }

  .lead-modal form>.row {
    column-gap: 8px !important;
    row-gap: 7px !important
  }

  .lead-modal form>.row label {
    font-size: .63rem;
    margin-bottom: 4px
  }

  .lead-modal form>.row input,
  .lead-modal form>.row select {
    min-height: 38px;
    padding: 7px 9px;
    font-size: .76rem
  }

  .lead-modal form>.row textarea {
    min-height: 56px;
    padding: 7px 9px;
    font-size: .76rem
  }

  .lead-modal form>.row .btn-gold {
    min-height: 40px;
    padding: 8px 10px;
    font-size: .72rem
  }
}

.site-footer .footer-explore,
.site-footer .footer-legal,
.site-footer .footer-contact {
  display: flex;
  flex-direction: column;
  gap: 13px
}

.site-footer .footer-explore::before,
.site-footer .footer-legal::before,
.site-footer .footer-contact::before {
  color: #f4d17b;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 7px;
  text-shadow: 0 2px 10px #0003
}

.site-footer .footer-explore::before {
  content: "Explore"
}

.site-footer .footer-legal::before {
  content: "Legal"
}

.site-footer .footer-contact::before {
  content: "Get in touch"
}

.site-footer .col-lg-5 p span {
  display: inline-block;
  margin-top: 5px;
  color: #f4d17b;
  font-size: .88em;
  font-weight: 700;
  letter-spacing: .035em;
  text-shadow: 0 1px 8px rgba(244, 209, 123, .18)
}

.legal-page {
  background: linear-gradient(150deg, #fff 0%, #fbfaf6 58%, #f7f3e9 100%)
}

.legal-intro {
  max-width: 820px;
  margin: 0 auto 30px
}

.legal-intro h2,
.legal-details h2 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  margin-bottom: 12px
}

.legal-intro>p {
  max-width: 760px;
  color: #64716a;
  line-height: 1.75
}

.legal-updated {
  font-size: .78rem;
  color: #849087 !important
}

.legal-highlights.row {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px;
  border: 1px solid #e8e4d9;
  border-radius: 20px;
  background: linear-gradient(145deg, #fff 0%, #fff 62%, #fdfbf6 100%);
  box-shadow: 0 12px 30px rgba(20, 45, 34, .055), inset 0 1px 0 rgba(255, 255, 255, .9);
  --bs-gutter-x: 0
}

.legal-highlights.row>div {
  display: flex;
  padding: 0 12px
}

.legal-highlights.row>div+div .legal-highlight {
  border-left: 1px solid #ece7dc
}

.legal-highlight {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 160px;
  padding: 18px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  transition: background-color .25s ease
}

.legal-highlight>i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  border: 1px solid rgba(184, 137, 53, .12);
  border-radius: 50%;
  background: #f8efd9;
  color: #b88935;
  font-size: 1rem;
  transition: transform .28s ease, background-color .28s ease, box-shadow .28s ease
}

.legal-highlight h3 {
  transition: color .2s ease
}

@media(hover:hover) and (pointer:fine) {
  .legal-highlight:hover {
    background: rgba(248, 239, 217, .34)
  }

  .legal-highlight:hover>i {
    transform: translateY(-2px) scale(1.06);
    background: #f4e5bf;
    box-shadow: 0 5px 12px rgba(184, 137, 53, .14)
  }

  .legal-highlight:hover h3 {
    color: #936919
  }
}

.legal-highlight h3 {
  font-family: inherit;
  font-size: .96rem;
  font-weight: 750;
  letter-spacing: 0;
  margin-bottom: 8px
}

.legal-highlight p,
.legal-accordion p,
.legal-notice p {
  margin: 0;
  color: #68736d;
  font-size: .88rem;
  line-height: 1.7
}

.legal-details {
  max-width: 900px;
  margin: 44px auto 0
}

@media(min-width:768px) {
  .legal-highlights.row {
    --bs-gutter-y: 0;
    margin-left: 200px;
    margin-right: 200px;
    padding: 8px
  }

  .legal-highlight {
    min-height: 0;
    padding: 14px 16px
  }
}

.legal-accordion {
  border-bottom: 1px solid #e4e2da;
  background: rgba(255, 255, 255, .72)
}

.legal-accordion:first-of-type {
  border-top: 1px solid #e4e2da
}

.legal-accordion summary {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  list-style: none;
  color: #263a30;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer
}

.legal-accordion summary::-webkit-details-marker {
  display: none
}

.legal-accordion summary::after {
  content: "+";
  margin-left: auto;
  color: #9b7629;
  font-size: 1.2rem;
  font-weight: 500
}

.legal-accordion[open] summary::after {
  content: "−"
}

.legal-accordion summary span {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #123d32;
  color: #f5d47f;
  font-size: .68rem
}

.legal-accordion>div {
  padding: 0 18px 17px 57px
}

.legal-accordion {
  perspective: 850px
}

.legal-accordion>div {
  transform-origin: top center;
  backface-visibility: hidden
}

.legal-accordion a {
  color: #946b20;
  text-decoration: underline;
  text-underline-offset: 3px
}

.legal-notice {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  margin: 28px auto;
  padding: 20px;
  border: 1px solid #eddbb4;
  border-radius: 14px;
  background: #fff8e9;
  max-width: 900px
}

.legal-notice>i {
  color: #bd8b2e;
  font-size: 1.25rem
}

@media(max-width:991px) {

  .site-footer .container>.row>.footer-explore,
  .site-footer .container>.row>.footer-legal,
  .site-footer .container>.row>.footer-contact {
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
    gap: 10px !important
  }

  .site-footer .footer-explore::before,
  .site-footer .footer-legal::before,
  .site-footer .footer-contact::before {
    font-size: .7rem;
    margin-bottom: 4px
  }
}

@media(max-width:767px) {
  .legal-highlights.row {
    max-width: 520px;
    padding: 8px
  }

  .legal-highlights.row>div {
    width: 100%;
    padding: 0 8px
  }

  .legal-highlights.row>div+div .legal-highlight {
    border-left: 0;
    border-top: 1px solid #ece7dc
  }

  .legal-highlight {
    min-height: 0;
    padding: 14px
  }
}

@media(max-width:575px) {
  .site-footer .container>.row>.footer-contact {
    grid-column: 1/-1
  }

  .site-footer .footer-explore a,
  .site-footer .footer-legal a,
  .site-footer .footer-contact>a {
    font-size: .72rem;
    line-height: 1.4;
    overflow-wrap: anywhere
  }

  .legal-page {
    padding-top: 44px;
    padding-bottom: 60px
  }

  .legal-intro {
    margin-bottom: 22px
  }

  .legal-accordion summary {
    padding: 12px 10px;
    font-size: .84rem
  }

  .legal-accordion>div {
    padding: 0 12px 14px 50px
  }
}

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

  .legal-highlight,
  .legal-highlight>i,
  .legal-highlight h3 {
    transition: none
  }
}

.page-hero-back-home {
  position: absolute;
  z-index: 2;
  top: 116px;
  right: max(24px, calc((100vw - 1320px)/2));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px 11px 12px;
  border: 1px solid rgba(226, 189, 112, .62);
  border-radius: 999px;
  background: linear-gradient(135deg, #21614e, #174b3d);
  color: #fff;
  font-size: .84rem;
  font-weight: 750;
  letter-spacing: .005em;
  box-shadow: 0 8px 20px rgba(15, 58, 45, .23), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease
}

.page-hero-back-home:hover {
  transform: translateY(-2px);
  border-color: #dfbd70;
  background: linear-gradient(135deg, #28715a, #174b3d);
  color: #fff;
  box-shadow: 0 8px 18px rgba(15, 58, 45, .23), inset 0 1px 0 rgba(255, 255, 255, .18)
}

.page-hero-back-home:focus-visible {
  outline: 3px solid #e2bd70;
  outline-offset: 4px
}

.page-hero-back-home i,
.page-hero-back-home span {
  position: relative;
  z-index: 1
}

.page-hero-back-home i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(181, 137, 49, .14);
  border-radius: 50%;
  background: #f7efd9;
  color: #a57820;
  font-size: 1.05rem;
  box-shadow: 0 1px 4px rgba(12, 46, 35, .1)
}

@media(max-width:991px) {
  .page-hero-back-home {
    top: 108px;
    right: 24px;
    transform: none;
    padding: 9px 16px 9px 10px;
    font-size: .78rem
  }

  .page-hero-back-home i {
    width: 29px;
    height: 29px;
    font-size: .98rem
  }
}

@media(max-width:575px) {
  .page-hero-back-home {
    top: 78px;
    right: 16px;
    padding: 8px 14px 8px 9px;
    font-size: .72rem
  }

  .page-hero-back-home i {
    width: 26px;
    height: 26px;
    font-size: .9rem
  }
}

@media(min-width:576px) {
  .lead-modal .modal-dialog {
    max-width: min(520px, calc(100vw - 48px))
  }

  .lead-modal .modal-content {
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow: hidden
  }

  .lead-modal .modal-body {
    min-height: 0;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain
  }
}

.lead-modal form>.row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 11px;
  margin: 0
}

.lead-modal form>.row>* {
  width: auto;
  max-width: none;
  padding: 0
}

.lead-modal form>.row>input[type="hidden"] {
  display: none
}

.lead-modal form>.row>.col-12:nth-child(5),
.lead-modal form>.row>.col-12:last-child {
  grid-column: 1/-1
}

@media(min-width:576px) {

  .lead-modal form>.row input:not([type="hidden"]),
  .lead-modal form>.row select {
    min-height: 42px;
    padding: 8px 11px
  }

  .lead-modal form>.row textarea {
    min-height: 58px;
    padding: 8px 11px
  }

  .lead-modal .modal-body {
    padding: 22px 24px
  }

  .lead-modal h3 {
    font-size: clamp(1.85rem, 3.3vw, 2.15rem);
    line-height: 1.02;
    margin-bottom: 7px
  }

  .lead-modal .modal-body>p {
    margin-bottom: 10px
  }
}

@media(min-width:576px) {
  .lead-modal .modal-dialog {
    width: calc(100% - 40px);
    max-width: 560px;
    margin: 16px auto
  }

  .lead-modal .modal-content {
    max-height: calc(100dvh - 32px);
    border: 1px solid #e2e8e3;
    border-radius: 22px;
    box-shadow: 0 24px 72px rgba(20, 45, 34, .2)
  }

  .lead-modal .modal-body {
    max-height: calc(100dvh - 32px);
    padding: 26px 30px
  }

  .lead-modal h3 {
    font-size: clamp(1.8rem, 3.1vw, 2.1rem);
    line-height: 1.04
  }

  .lead-modal form>.row {
    row-gap: 10px;
    column-gap: 14px
  }

  .lead-modal form>.row input:not([type="hidden"]),
  .lead-modal .mobile-project-select-trigger {
    min-height: 44px;
    padding: 8px 11px;
    font-size: .86rem
  }

  .lead-modal form>.row textarea {
    min-height: 64px;
    padding: 9px 11px;
    font-size: .86rem
  }

  .lead-modal form>.row label {
    margin-bottom: 5px;
    font-size: .74rem
  }

  .lead-modal form>.row .btn-gold {
    min-height: 48px;
    padding: 10px 14px
  }
}

.nav-back-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #174b3d;
  border-radius: 15px;
  background: linear-gradient(135deg, #21614e, #174b3d);
  color: #fff;
  font-size: .8rem;
  font-weight: 750;
  white-space: nowrap;
  box-shadow: 0 7px 17px rgba(15, 58, 45, .16);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease
}

.nav-back-home:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #28715a, #174b3d);
  color: #fff;
  box-shadow: 0 10px 21px rgba(15, 58, 45, .23)
}

.nav-back-home i {
  color: #f4d17b;
  font-size: 1rem
}

.mobile-nav-home {
  display: none
}

@media(max-width:991px) {
  .nav-home-page .page-hero-back-home {
    display: none
  }

  .nav-home-page .site-nav .navbar-toggler {
    margin-left: 0
  }

  .nav-home-page .site-nav .nav-actions {
    gap: 10px
  }

  .nav-home-page .site-nav .nav-actions .nav-back-home {
    display: none
  }

  .nav-home-page .mobile-nav-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    margin-left: auto;
    padding: 0 11px;
    border: 1px solid #174b3d;
    border-radius: 12px;
    background: linear-gradient(135deg, #21614e, #174b3d);
    color: #fff;
    font-size: .68rem;
    font-weight: 750;
    white-space: nowrap;
    box-shadow: 0 5px 13px rgba(15, 58, 45, .17)
  }

  .nav-home-page .mobile-nav-home i {
    color: #f4d17b;
    font-size: .95rem
  }
}

@media(max-width:575px) {
  .nav-home-page .site-nav .nav-actions {
    display: flex;
    width: 100%;
    gap: 8px
  }

  .nav-home-page .site-nav .nav-enquire {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 10px;
    font-size: .7rem
  }

  .nav-home-page .mobile-nav-home {
    height: 36px;
    margin-left: auto;
    padding: 0 9px;
    font-size: .64rem;
    border-radius: 10px
  }
}

@media(max-width:575px) {
  .nav-home-page .mobile-nav-home {
    display: inline-flex;
    width: auto;
    min-width: 0;
    height: 36px;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0 10px;
    gap: 6px;
    border: 1px solid #d9e2dc;
    border-radius: 10px;
    background: #fff;
    color: #173f32;
    box-shadow: none
  }

  .nav-home-page .mobile-nav-home span {
    display: inline;
    font-size: .62rem;
    font-weight: 700
  }

  .nav-home-page .mobile-nav-home i {
    color: #173f32;
    font-size: .9rem
  }

  .nav-home-page .mobile-nav-home:hover {
    background: #f6f8f6;
    color: #173f32
  }
}

/* Consistent interaction motion for buttons and button-style links across the site. */
:is(button:not(:disabled), input[type="button"]:not(:disabled), input[type="submit"]:not(:disabled), a.btn, .nav-enquire, .nav-search, .nav-back-home, .mobile-nav-home, .page-hero-back-home, .filter-button, .testimonial-arrow, .testimonial-page, .social-row a, .footer-social a, .mobile-cta a, .text-link, .property-bottom a, [data-open-enquiry]) {
  transform-origin: center;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
  transition: transform .38s cubic-bezier(.2, .85, .25, 1.18), box-shadow .38s cubic-bezier(.2, .75, .25, 1), filter .32s ease, background-color .32s ease, border-color .32s ease, color .24s ease
}

@media(hover:hover) and (pointer:fine) {
  :is(button:not(:disabled), input[type="button"]:not(:disabled), input[type="submit"]:not(:disabled), a.btn, .nav-enquire, .nav-search, .nav-back-home, .mobile-nav-home, .page-hero-back-home, .filter-button, .testimonial-arrow, .testimonial-page, .social-row a, .footer-social a, .mobile-cta a, .text-link, .property-bottom a, [data-open-enquiry]):hover {
    transform: perspective(650px) translateY(-4px) rotateX(6deg) rotateY(-2deg) scale(1.045);
    filter: drop-shadow(0 7px 7px rgba(16, 55, 42, .2)) saturate(1.08)
  }
}

:is(button:not(:disabled), input[type="button"]:not(:disabled), input[type="submit"]:not(:disabled), a.btn, .nav-enquire, .nav-search, .nav-back-home, .mobile-nav-home, .page-hero-back-home, .filter-button, .testimonial-arrow, .testimonial-page, .social-row a, .footer-social a, .mobile-cta a, .text-link, .property-bottom a, [data-open-enquiry]):active {
  transform: perspective(600px) translateY(1px) rotateX(-3deg) scale(.95);
  filter: drop-shadow(0 1px 1px rgba(16, 55, 42, .12)) saturate(.96)
}

:is(button:not(:disabled), input[type="button"]:not(:disabled), input[type="submit"]:not(:disabled), a.btn, .nav-enquire, .nav-search, .nav-back-home, .mobile-nav-home, .page-hero-back-home, .filter-button, .testimonial-arrow, .testimonial-page, .social-row a, .footer-social a, .mobile-cta a, .text-link, .property-bottom a, [data-open-enquiry]):focus-visible {
  outline: 2px solid rgba(184, 135, 44, .82);
  outline-offset: 3px
}

@media(prefers-reduced-motion:reduce) {
  :is(button, a.btn, .nav-enquire, .nav-search, .nav-back-home, .mobile-nav-home, .page-hero-back-home, .filter-button, .testimonial-arrow, .testimonial-page, .social-row a, .footer-social a, .mobile-cta a, .text-link, .property-bottom a, [data-open-enquiry]) {
    transition: none !important
  }

  :is(button, a.btn, .nav-enquire, .nav-search, .nav-back-home, .mobile-nav-home, .page-hero-back-home, .filter-button, .testimonial-arrow, .testimonial-page, .social-row a, .footer-social a, .mobile-cta a, .text-link, .property-bottom a, [data-open-enquiry]):hover,
  :is(button, a.btn, .nav-enquire, .nav-search, .nav-back-home, .mobile-nav-home, .page-hero-back-home, .filter-button, .testimonial-arrow, .testimonial-page, .social-row a, .footer-social a, .mobile-cta a, .text-link, .property-bottom a, [data-open-enquiry]):active {
    transform: none !important;
    filter: none
  }
}

@media(max-width:575px) {
  .opportunity-copy h2 {
    white-space: nowrap !important;
    font-size: clamp(.82rem, 4vw, 1rem) !important;
    letter-spacing: -.045em
  }
}

:root {
  --page-hero-top-space: 170px;
  --page-hero-bottom-space: 48px
}

.page-hero {
  padding-top: var(--page-hero-top-space);
  padding-bottom: var(--page-hero-bottom-space)
}

@media(max-width:991px) {
  :root {
    --page-hero-top-space: 140px;
    --page-hero-bottom-space: 48px
  }
}

@media(max-width:575px) {
  :root {
    --page-hero-top-space: 130px;
    --page-hero-bottom-space: 40px
  }
}

/* Responsive section rhythm: equal vertical padding on each section. */
:root {
  --section-pad-y: 90px
}

.section-pad {
  padding-top: var(--section-pad-y) !important;
  padding-bottom: var(--section-pad-y) !important
}

@media(max-width:991px) {
  :root {
    --section-pad-y: 48px
  }
}

@media(max-width:575px) {
  :root {
    --section-pad-y: 32px
  }
}

@media(max-width:575px) {
  .page-content:has(#projectDetail) {
    padding-bottom: 16px !important
  }

  .opportunity-band {
    padding-top: 16px !important
  }
}

@media(max-width:575px) {
  .site-footer .container>.row {
    row-gap: 8px !important
  }

  .site-footer .container>.row>.footer-explore,
  .site-footer .container>.row>.footer-legal,
  .site-footer .container>.row>.footer-contact {
    gap: 6px !important
  }

  .site-footer .container>.row>.footer-explore::before,
  .site-footer .container>.row>.footer-legal::before,
  .site-footer .container>.row>.footer-contact::before {
    margin-bottom: 0
  }

  .site-footer .footer-logo {
    width: 88px;
    height: 72px;
    flex-basis: 88px
  }

  .site-footer .footer-bottom {
    margin-top: 8px;
    padding-top: 8px;
    gap: 5px
  }
}

@media(max-width:767px) {
  .project-gallery .section-heading {
    align-items: flex-start !important;
    text-align: left
  }

  .project-gallery .section-heading>div,
  .project-gallery .section-heading>p {
    width: 100%;
    text-align: left
  }

  .project-gallery .section-heading .eyebrow {
    justify-content: flex-start;
    text-align: left
  }
}

/* Site-wide reading progress indicator */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 1100;
  background: rgba(255, 255, 255, 1);
  pointer-events: none
}

.scroll-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: #c49a3a;
  transition: width .08s linear;
  will-change: width
}

@media(prefers-reduced-motion:reduce) {
  .scroll-progress span {
    transition: none
  }
}

/* .scroll-progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:1100;background:rgba(23,35,31,.14);pointer-events:none}.scroll-progress span{display:block;width:0;height:100%;background:#c49a3a;transition:width .08s linear;will-change:width}@media(prefers-reduced-motion:reduce){.scroll-progress span{transition:none}} */

/* Project cards: clear property category, quick facts, and detail action */
.project-card .property-photo {
  height: 310px
}

.project-card .property-photo img {
  object-position: center
}

.project-card .property-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  left: 20px;
  top: 20px;
  padding: 11px 16px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background: #fff;
  color: #174b3d;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .13em;
  box-shadow: 0 5px 18px rgba(12, 40, 28, .12)
}

.project-card .property-tag i {
  font-size: .95rem;
  color: #b88732
}

.project-card .property-body {
  padding: 27px 30px 25px
}

.project-card .property-body h3 {
  font-size: 2rem
}

.project-card .property-body>p {
  min-height: 4.8em;
  margin-bottom: 22px
}

.project-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 17px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}

.project-highlight {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px
}

.project-highlight strong {
  color: #174b3d;
  font-family: Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 500;
  line-height: 1.12;
  white-space: nowrap
}

.project-highlight span {
  color: var(--muted);
  font-size: .67rem;
  letter-spacing: .07em;
  text-transform: uppercase
}

.project-view-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 17px;
  color: #174b3d;
  font-size: .76rem;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase
}

.project-view-link i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #d9e2dc;
  border-radius: 50%;
  font-size: 1.05rem;
  transition: background .25s, color .25s, transform .25s
}

.project-view-link:hover {
  color: #174b3d
}

.project-view-link:hover i {
  transform: translate(2px, -2px);
  background: #174b3d;
  color: #fff;
  border-color: #174b3d
}

@media(max-width:767px) {
  .project-card .property-photo {
    height: 245px
  }

  .project-card .property-body {
    padding: 22px 20px
  }

  .project-card .property-body>p {
    min-height: 0
  }

  .project-highlight strong {
    font-size: 1rem
  }

  .project-highlight span {
    font-size: .59rem
  }
}

@media(max-width:380px) {
  .project-highlights {
    gap: 6px
  }

  .project-highlight strong {
    font-size: .88rem
  }

  .project-highlight span {
    font-size: .54rem;
    letter-spacing: .035em
  }
}

.project-highlights-label {
  margin-bottom: -8px;
  color: #778079;
  font-size: .63rem;
  font-weight: 750;
  letter-spacing: .15em;
  text-transform: uppercase
}

/* More compact project card proportions */
.project-card .property-photo {
  height: 245px
}

.project-card .property-body {
  padding: 21px 24px 19px
}

.project-card .property-body h3 {
  font-size: 1.75rem;
  margin: 7px 0 9px
}

.project-card .property-body>p {
  min-height: 0;
  margin-bottom: 14px;
  font-size: .86rem;
  line-height: 1.55
}

.project-highlights {
  padding: 12px 0;
  gap: 8px
}

.project-highlight strong {
  font-size: clamp(.95rem, 1.55vw, 1.2rem)
}

.project-highlights-label {
  margin-bottom: -6px
}

.project-view-link {
  margin-top: 12px
}

.project-view-link i {
  width: 33px;
  height: 33px
}

@media(max-width:767px) {
  .project-card .property-photo {
    height: 205px
  }

  .project-card .property-body {
    padding: 19px 18px 17px
  }
}

@media(max-width:575px) {
  .project-card .property-photo {
    height: 190px
  }
}

/* Stronger color definition for project cards */
.project-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #cbd9cf;
  border-radius: 26px;
  background: linear-gradient(145deg, #fff 0%, #f5f8f4 100%);
  box-shadow: 0 12px 32px rgba(23, 75, 61, .09);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease
}

.project-card:before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #174b3d, #c89d45)
}

.project-card:hover {
  transform: translateY(-5px);
  border-color: #a9c0b0;
  box-shadow: 0 20px 42px rgba(23, 75, 61, .15)
}

.project-card .property-photo {
  background: #e7eee8
}

.project-card .property-tag {
  background: #174b3d;
  color: #fff;
  border-color: #fff;
  box-shadow: 0 7px 22px rgba(8, 43, 32, .24)
}

.project-card .property-tag i {
  color: #edc76b
}

.project-card .property-body {
  background: linear-gradient(180deg, #fff 0%, #f5f8f4 100%)
}

.project-card .location {
  color: #63766b
}

.project-card .property-body h3 {
  color: #173f32
}

.project-highlights-label {
  color: #587365
}

.project-highlights {
  border-top-color: #d5e0d7;
  border-bottom-color: #d5e0d7
}

.project-highlight {
  min-height: 56px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #eaf1eb
}

.project-highlight strong {
  color: #174b3d
}

.project-highlight span {
  color: #66786d
}

.project-view-link {
  color: #174b3d
}

.project-view-link i {
  border-color: #b8cbbd;
  background: #fff;
  color: #174b3d
}

.project-view-link:hover i {
  background: #174b3d;
  color: #fff;
  border-color: #174b3d
}

@media(max-width:575px) {
  .project-card {
    border-radius: 20px
  }

  .project-highlight {
    padding: 7px 6px
  }
}

/* Refined, minimal project card styling */
.project-card {
  border: 1px solid #dfe7e1;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(25, 55, 42, .07);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.project-card:before {
  height: 3px;
  background: #b88b37
}

.project-card:hover {
  transform: translateY(-3px);
  border-color: #c7d5cb;
  box-shadow: 0 14px 30px rgba(25, 55, 42, .11)
}

.project-card .property-photo {
  background: #f1f4f1
}

.project-card .property-tag {
  background: rgba(255, 255, 255, .96);
  color: #174b3d;
  border: 1px solid #e3e9e4;
  box-shadow: 0 3px 12px rgba(20, 45, 34, .09);
  font-size: .68rem
}

.project-card .property-tag i {
  color: #a87929
}

.project-card .property-body {
  background: #fff
}

.project-card .property-body h3 {
  color: #1c2924
}

.project-highlights-label {
  margin-bottom: -4px;
  color: #77847c;
  font-size: .6rem;
  letter-spacing: .13em
}

.project-highlights {
  padding: 11px 0;
  border-top: 1px solid #e5ebe6;
  border-bottom: 1px solid #e5ebe6
}

.project-highlight {
  min-height: 0;
  padding: 3px 8px;
  border-radius: 0;
  background: transparent
}

.project-highlight+.project-highlight {
  border-left: 1px solid #e1e8e2
}

.project-highlight strong {
  color: #174b3d
}

.project-highlight span {
  color: #78847d
}

.project-view-link {
  color: #174b3d;
  font-size: .72rem
}

.project-view-link i {
  width: 32px;
  height: 32px;
  border-color: #dce5de;
  background: #fff;
  color: #174b3d
}

@media(max-width:575px) {
  .project-card {
    border-radius: 16px
  }

  .project-highlight {
    padding: 3px 5px
  }
}

/* Add a warm, visible color palette to project cards */
.project-card {
  border-color: #d4dfd7;
  background: #f5f7f3;
  box-shadow: 0 10px 28px rgba(23, 75, 61, .1)
}

.project-card:before {
  background: linear-gradient(90deg, #174b3d 0%, #3c7961 62%, #c89d45 100%)
}

.project-card .property-body {
  background: linear-gradient(180deg, #fff 0%, #f4f7f3 100%)
}

.project-card .property-tag {
  background: #174b3d;
  color: #fff;
  border-color: #174b3d
}

.project-card .property-tag i {
  color: #edc76b
}

.project-highlights {
  padding: 12px 10px;
  border: 1px solid #dce7dd;
  border-radius: 12px;
  background: #eaf1eb
}

.project-highlight+.project-highlight {
  border-left-color: #cddbd0
}

.project-highlight strong {
  color: #174b3d
}

.project-highlight span {
  color: #62766a
}

.project-highlights-label {
  color: #547363
}

.project-view-link {
  color: #174b3d
}

.project-view-link i {
  background: #174b3d;
  color: #fff;
  border-color: #174b3d
}

.project-view-link:hover i {
  background: #c89d45;
  border-color: #c89d45;
  color: #173f32
}

.project-card:hover {
  border-color: #a9c1b0;
  box-shadow: 0 16px 34px rgba(23, 75, 61, .15)
}

.project-highlights-label {
  margin-bottom: 8px
}

.project-highlights .project-highlight {
  min-width: 0
}

.project-highlights {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr))
}

.project-highlights .project-highlight strong {
  white-space: normal;
  overflow-wrap: anywhere
}

.project-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 9px
}

.project-title-row h3 {
  min-width: 0;
  margin: 0 !important
}

.project-title-row .location {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid #dce7dd;
  border-radius: 999px;
  background: #eef4ef;
  color: #536b5d;
  font-size: .7rem;
  white-space: nowrap
}

.project-title-row .location i {
  color: #a87929
}

@media(max-width:575px) {
  .project-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px
  }

  .project-title-row .location {
    font-size: .66rem
  }
}

.project-card .property-photo {
  width: 100%;
  height: 245px;
  margin: 0;
  border-radius: 19px 19px 0 0;
  overflow: hidden
}

.project-card .property-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center
}

@media(max-width:767px) {
  .project-card .property-photo {
    height: 205px
  }
}

@media(max-width:575px) {
  .project-card .property-photo {
    height: 190px
  }
}

@media(max-width:575px) {
  .project-card .property-photo {
    height: 155px
  }

  .project-card .property-body {
    padding: 14px 15px 13px
  }

  .project-card .property-body h3 {
    font-size: 1.42rem;
    line-height: 1.08
  }

  .project-title-row {
    gap: 6px;
    margin-bottom: 7px
  }

  .project-title-row .location {
    padding: 5px 8px;
    font-size: .59rem
  }

  .project-card .property-body>p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
    font-size: .75rem;
    line-height: 1.42
  }

  .project-highlights-label {
    margin-bottom: 5px;
    font-size: .54rem
  }

  .project-highlights {
    padding: 8px 6px;
    gap: 4px;
    border-radius: 9px
  }

  .project-highlight {
    padding: 2px 5px
  }

  .project-highlight strong {
    font-size: .86rem;
    line-height: 1.05
  }

  .project-highlight span {
    font-size: .49rem;
    letter-spacing: .045em
  }

  .project-view-link {
    margin-top: 8px;
    font-size: .62rem
  }

  .project-view-link i {
    width: 27px;
    height: 27px;
    font-size: .9rem
  }

  .project-card {
    border-radius: 15px
  }
}

@media(max-width:575px) {
  #projectList {
    row-gap: 8px
  }

  #projectList>.project-result {
    padding-right: 14px;
    padding-left: 14px
  }

  .project-card {
    width: 100%;
    max-width: 370px;
    margin: 0 auto
  }

  .project-card .property-photo {
    height: 145px
  }

  .project-card .property-body {
    padding: 13px 14px 12px
  }
}

@media(max-width:575px) {
  #projectList {
    row-gap: 24px
  }
}

@media(max-width:575px) {
  #projectList {
    row-gap: 40px
  }
}

@media(max-width:575px) {
  .project-card .property-photo {
    height: 125px
  }

  .project-card .property-body {
    padding: 11px 12px 10px
  }

  .project-card .property-body h3 {
    font-size: 1.28rem
  }

  .project-title-row {
    margin-bottom: 5px
  }

  .project-title-row .location {
    padding: 4px 7px;
    font-size: .55rem
  }

  .project-card .property-body>p {
    -webkit-line-clamp: 2;
    margin-bottom: 8px;
    font-size: .7rem;
    line-height: 1.35
  }

  .project-highlights-label {
    margin-bottom: 4px;
    font-size: .5rem
  }

  .project-highlights {
    padding: 6px 5px;
    gap: 3px
  }

  .project-highlight strong {
    font-size: .78rem
  }

  .project-highlight span {
    font-size: .45rem
  }

  .project-view-link {
    margin-top: 6px;
    font-size: .58rem
  }

  .project-view-link i {
    width: 24px;
    height: 24px
  }
}

/* Mobile navigation: clear active state and consistent menu spacing */
@media(max-width:991px) {
  .site-nav .navbar-collapse {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    margin-top: 8px;
    border-color: #e3e9e4;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(23, 55, 41, .1)
  }

  .site-nav .navbar-nav {
    gap: 3px !important
  }

  .site-nav .nav-link {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 9px 12px !important;
    border-radius: 9px;
    font-size: .9rem
  }

  .site-nav .nav-link:after {
    display: none !important
  }

  .site-nav .nav-link.active {
    background: #edf3ee;
    color: #174b3d !important;
    box-shadow: inset 3px 0 #b88732
  }

  .site-nav .nav-actions {
    margin-top: 10px;
    padding-top: 12px
  }

  .site-nav .navbar-toggler {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0
  }

  .nav-home-page .mobile-nav-home {
    height: 42px
  }

  .site-nav.mobile-menu-open .navbar-collapse {
    max-height: calc(100dvh - 72px);
    overflow-y: auto
  }
}

@media(max-width:575px) {
  .site-nav .navbar-collapse {
    padding: 10px;
    border-radius: 14px
  }

  .site-nav .nav-link {
    min-height: 40px
  }

  .site-nav .nav-actions .nav-enquire {
    min-height: 42px
  }

  .nav-home-page .mobile-nav-home {
    height: 38px
  }
}

@media(max-width:767px) {
  .site-nav {
    padding: 10px 0
  }

  .navbar-brand {
    font-size: .92rem
  }

  .navbar-brand img {
    width: 44px;
    height: 44px;
    flex-basis: 44px
  }

  .mobile-nav-search,
  .site-nav .navbar-toggler {
    width: 46px;
    height: 46px;
    flex-basis: 46px
  }

  .site-nav .navbar-toggler {
    padding: 0
  }

  .nav-home-page .mobile-nav-home {
    height: 46px
  }
}

@media(max-width:575px) {
  .site-nav {
    padding: 10px 0
  }

  .navbar-brand {
    font-size: .86rem
  }

  .navbar-brand img {
    width: 42px;
    height: 42px;
    flex-basis: 42px
  }

  .mobile-nav-search,
  .site-nav .navbar-toggler {
    width: 44px;
    height: 44px;
    flex-basis: 44px
  }

  .nav-home-page .mobile-nav-home {
    height: 42px
  }
}

/* Keep the opportunity headline typography consistent across screen sizes. */
.opportunity-copy h2 {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif
}

/* Place project category badges on the right edge at every viewport size. */
.project-card .property-tag {
  position: absolute;
  top: 20px;
  left: auto;
  right: 16px
}

@media(max-width:767px) {
  .project-card .project-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px
  }

  .project-card .project-title-row h3 {
    min-width: 0
  }

  .project-card .project-title-row .property-tag {
    position: static;
    justify-self: end;
    white-space: nowrap
  }

  .project-card .project-title-row .location {
    grid-column: 1/-1
  }
}

@media(max-width:767px) {
  .project-card .project-title-row .property-tag {
    padding: 7px 10px;
    font-size: .58rem;
    letter-spacing: .09em;
    border-radius: 999px;
    gap: 6px
  }

  .project-card .project-title-row .property-tag i {
    font-size: .78rem
  }
}

@media(max-width:767px) {
  .project-card:before {
    left: 16px;
    right: 16px;
    border-radius: 999px
  }
}

@media(max-width:575px) {
  .opportunity-copy h2 {
    white-space: normal !important;
    overflow-wrap: break-word;
    font-size: clamp(1rem, 4.8vw, 1.25rem) !important;
    line-height: 1.2;
    letter-spacing: -.02em;
    text-wrap: pretty
  }
}



/* Keep the header logo circular at every responsive size. */
.navbar-brand img {
  border-radius: 10%;
  object-fit: cover;
}

.project-name-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px
}

.project-audience-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  margin-top: 5px;
  max-width: 100%;
  padding: 6px 11px;
  border: 1px solid #9bb8a4;
  border-radius: 7px;
  background: #e7f0e9;
  color: #174b3d;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1.25;
  text-transform: none;
  white-space: normal
}

.project-audience-label::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c49a43;
}

.project-detail-audience {
  margin: -7px 0 12px
}

.project-hero-audience {
  display: flex;
  margin: -7px 0 14px;
}

.project-card .project-audience-label,
.page-hero .project-hero-audience,
.project-detail-intro .project-detail-audience {
  border-color: #9bb8a4;
  background: #e7f0e9;
  color: #174b3d;
}

@media(max-width:767px) {
  .project-card .project-title-row .project-name-group {
    min-width: 0
  }

  .project-card .project-audience-label {
    font-size: .63rem;
    padding: 5px 8px
  }
}

.project-gallery-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #f5f6f2;
  cursor: zoom-in
}

.project-lightbox[hidden] {
  display: none !important
}

.project-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 22px
}

.project-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 14, 12, .94);
  backdrop-filter: blur(8px)
}

.project-lightbox-content {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(94vw, 1400px);
  height: min(92vh, 900px);
  height: min(92dvh, 900px);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px
}

.project-lightbox-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  user-select: none;
  touch-action: pan-y
}

.project-lightbox-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #f7f5ef;
  font-size: .86rem;
  line-height: 1.4
}

.project-lightbox-caption [data-lightbox-count] {
  flex: 0 0 auto;
  color: #c9d0cb;
  font-size: .78rem;
  font-variant-numeric: tabular-nums
}

.project-lightbox-close,
.project-lightbox-nav {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  background: rgba(13, 23, 19, .68);
  color: #fff;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .28);
  transition: background .2s ease, transform .2s ease, border-color .2s ease
}

.project-lightbox-close,
.project-lightbox-nav {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 16px;
  background: #174b3d;
  color: #fff;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .3)
}

.project-lightbox-close:hover,
.project-lightbox-nav:hover {
  transform: translateY(-1px);
  border-color: #fff;
  background: #236952;
  color: #fff;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .36)
}

.project-lightbox-close:focus-visible,
.project-lightbox-nav:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px
}

.project-lightbox-close {
  top: 12px;
  right: 12px
}

.project-lightbox-nav {
  top: calc(50% - 28px)
}

.project-lightbox-prev {
  left: 12px
}

.project-lightbox-next {
  right: 12px
}

.project-lightbox-close i {
  font-size: 1.05rem
}

.project-lightbox-nav i {
  font-size: 1.25rem
}

body.project-lightbox-open {
  overflow: hidden
}

@media(max-width:575px) {
  .project-lightbox {
    padding: 14px
  }

  .project-lightbox-content {
    width: 100%;
    height: min(88vh, 760px);
    height: min(88dvh, 760px);
    gap: 10px
  }

  .project-lightbox-caption {
    padding: 0 3px;
    font-size: .76rem
  }

  .project-lightbox-close,
  .project-lightbox-nav {
    width: 44px;
    height: 44px;
    border-radius: 14px
  }

  .project-lightbox-close {
    top: 8px;
    right: 8px
  }

  .project-lightbox-prev {
    left: 7px
  }

  .project-lightbox-next {
    right: 7px
  }
}

@media(min-width:768px) {
  .project-enquiry-card .mobile-project-select-trigger {
    box-sizing: border-box;
    min-height: 56px;
    padding: 14px 15px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 15px;
    background: rgba(12, 14, 16, .72);
    color: #f7f5ef;
    font: inherit;
    font-size: 1rem;
    line-height: normal;
    text-align: left
  }

  .project-enquiry-card .mobile-project-select-trigger.is-placeholder span {
    color: #929599
  }

  .project-enquiry-card .mobile-project-select-trigger:hover,
  .project-enquiry-card .mobile-project-select-trigger:focus-visible {
    background: rgba(12, 14, 16, .92);
    border-color: #bd982b;
    box-shadow: 0 0 0 4px rgba(214, 173, 47, .12), 0 0 18px rgba(214, 173, 47, .08)
  }

  .project-enquiry-card .mobile-project-select-menu {
    border-color: #3b4145;
    background: #202429;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .32);
    scrollbar-color: #737b80 #202429
  }

  .project-enquiry-card .mobile-project-select-group {
    color: #d6ad2f
  }

  .project-enquiry-card .mobile-project-select-option {
    color: #f7f5ef
  }

  .project-enquiry-card .mobile-project-select-option:hover,
  .project-enquiry-card .mobile-project-select-option:focus-visible,
  .project-enquiry-card .mobile-project-select-option.selected {
    background: #343a3e;
    color: #f3d36f
  }
}

@media(max-width:767px) {
  .project-enquiry-card .mobile-project-select-trigger {
    min-height: 42px;
    padding: 8px 10px;
    border-color: #d8e1da;
    border-radius: 13px;
    background: #fff;
    color: #20342c;
    font-size: .8rem
  }

  .project-enquiry-card .mobile-project-select-menu {
    border-color: #d8e1da;
    background: #fff
  }

  .project-enquiry-card .mobile-project-select-group {
    color: #718178
  }

  .project-enquiry-card .mobile-project-select-option {
    color: #263d33
  }

  .project-enquiry-card .mobile-project-select-option:hover,
  .project-enquiry-card .mobile-project-select-option:focus-visible,
  .project-enquiry-card .mobile-project-select-option.selected {
    background: #e9f0e9;
    color: #153f33
  }
}

.project-enquiry-card input:not([type=hidden]),
.project-enquiry-card textarea,
.project-enquiry-card .mobile-project-select-trigger {
  transition: transform .24s cubic-bezier(.2, .75, .25, 1), border-color .24s ease, background-color .24s ease, box-shadow .24s ease
}

@media(hover:hover) {

  .project-enquiry-card input:not([type=hidden]):hover,
  .project-enquiry-card textarea:hover,
  .project-enquiry-card .mobile-project-select-trigger:hover {
    transform: translateY(-1px)
  }
}

.project-enquiry-card input:not([type=hidden]):focus,
.project-enquiry-card textarea:focus,
.project-enquiry-card .mobile-project-select-trigger:focus-visible {
  transform: translateY(-2px)
}

.project-enquiry-card input:not([type=hidden]):active,
.project-enquiry-card textarea:active,
.project-enquiry-card .mobile-project-select-trigger:active {
  transform: translateY(0) scale(.995)
}

.project-gallery.section-pad {
  padding-top: 72px !important;
  padding-bottom: 72px !important
}

.project-brochure.section-pad {
  padding-top: 24px !important;
  padding-bottom: 24px !important
}

body[data-project-name] .opportunity-band.section-pad {
  padding-top: 28px !important
}

@media(max-width:767px) {
  .project-gallery.section-pad {
    padding-top: 48px !important;
    padding-bottom: 18px !important
  }

  .project-brochure.section-pad {
    padding-top: 18px !important;
    padding-bottom: 18px !important
  }

  body[data-project-name] .opportunity-band.section-pad {
    padding-top: 22px !important
  }
}

/* Keep the project enquiry banner composed at tablet widths. */
@media (min-width: 768px) and (max-width: 1199px) {
  .opportunity-band>.container {
    width: calc(100% - 60px);
  }

  .opportunity-card {
    grid-template-columns: minmax(0, 1.45fr) minmax(240px, .85fr);
    min-height: 270px;
  }

  .opportunity-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 145px;
    column-gap: 18px;
    padding: 26px 18px 26px 28px;
  }

  .opportunity-copy h2 {
    font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  }

  .opportunity-copy p {
    font-size: .92rem;
  }

  .opportunity-copy>.d-flex {
    grid-column: 2;
    grid-row: 1 / 4;
    width: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px !important;
    transform: none;
  }

  .opportunity-copy>.d-flex .btn {
    min-height: 50px;
    padding: 10px 12px;
    font-size: .88rem;
  }

  .opportunity-image {
    min-height: 270px;
    background-position: center, 72% center;
  }
}

/* One full-width project at a time on mobile. */
@media (max-width: 767px) {
  #featured .home-project-track>.project-result {
    flex: 0 0 100%;
    width: 100%;
  }

  #featured .home-project-track::after {
    flex-basis: 100%;
  }
}

#featured .home-project-filter-more[hidden] {
  display: none !important;
}

#featured .home-project-filter-more {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  max-width: 560px;
  margin: 22px auto 0;
  padding: 20px 18px;
  border: 1px solid #dce7dd;
  border-radius: 14px;
  background: #f7f9f6;
  text-align: center;
}

#featured .home-project-filter-more p {
  margin: 0;
  color: #586d62;
  font-size: .9rem;
}

#featured .home-project-filter-more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 9px 17px;
  border-radius: 999px;
  background: #174b3d;
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}

#featured .home-project-filter-more-link:hover {
  transform: translateY(-1px);
  background: #236653;
  color: #fff;
}

@media (max-width: 767px) {
  #featured .home-project-filter-more {
    margin-top: 16px;
    padding: 16px 14px;
  }
}

/* Consistent homepage spacing and sizing across phone widths and heights. */
@media (max-width: 767px) {
  #featured .project-card {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .hero {
    padding-top: clamp(72px, 18vw, 88px);
    padding-bottom: 24px;
  }

  body:has(#featured) .container,
  body:has(#featured) .container-fluid {
    width: 100%;
    max-width: 100%;
    padding-right: 16px;
    padding-left: 16px;
  }

  #featured.section-pad {
    padding: 28px 0 22px !important;
    scroll-margin-top: 76px;
  }

  #featured .section-heading {
    margin-bottom: 14px;
  }

  #featured .section-heading h2 {
    font-size: clamp(1.65rem, 7vw, 2.15rem);
    line-height: 1.1;
  }

  #featured .section-heading p {
    font-size: .86rem;
    line-height: 1.45;
  }

  #featured .property-filters {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 9px;
    margin-bottom: 14px;
  }

  #featured .filter-button {
    min-width: 0;
    padding: 10px 18px;
  }

  #featured .home-project-controls {
    min-height: 42px;
    margin-top: 10px;
    gap: 10px;
  }

  #featured .home-project-progress {
    display: none;
  }

  #featured .home-project-arrow {
    width: 40px;
    height: 40px;
  }

  #featured .project-card .property-photo {
    height: auto;
    aspect-ratio: 2.05 / 1;
  }

  #featured .project-card .property-photo img {
    height: 100%;
    object-fit: cover;
  }

  #featured .project-card .property-body {
    padding: 14px 14px 13px;
  }

  #featured .project-card .property-body h3 {
    font-size: clamp(1.15rem, 4.5vw, 1.45rem);
    line-height: 1.12;
  }

  #featured .project-title-row {
    gap: 7px;
  }

  #featured .project-title-row .location {
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
  }

  #featured .project-highlights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  #featured .project-highlight {
    padding: 3px 5px;
  }

  #featured .project-highlight strong {
    font-size: clamp(.78rem, 3.4vw, .95rem);
  }

  #featured .project-highlight span {
    font-size: clamp(.48rem, 2.1vw, .58rem);
    line-height: 1.25;
  }

  .testimonials-section.section-pad {
    padding: 28px 0 84px !important;
  }

  .testimonial-heading {
    margin-bottom: 22px;
    padding-inline: 2px;
  }

  .testimonial-heading h2 {
    font-size: clamp(1.5rem, 6.5vw, 2rem);
    line-height: 1.14;
  }

  .mobile-cta {
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    gap: 8px;
  }

  .mobile-cta a,
  .mobile-cta button {
    min-height: 44px;
    padding: 9px 8px;
    font-size: .68rem;
  }
}

/* Keep homepage project cards distinct, with a visible lower edge. */
#featured .project-card {
  border: 1px solid #c8d7cc;
  background: #fff;
  box-shadow: 0 8px 22px rgba(27, 61, 46, .12);
}

#featured .project-card .property-body {
  background: #fff;
}

/* Refined project card layout on phones. */
@media (max-width: 767px) {
  #projectList .project-card .project-title-row .property-tag {
    gap: 4px;
    padding: 5px 8px;
    font-size: .52rem;
    letter-spacing: .06em;
  }

  #projectList .project-card .project-title-row .property-tag i {
    font-size: .68rem;
  }

  #projectList .project-card .project-title-row .location {
    grid-column: 1 / -1;
    justify-self: start;
    width: fit-content;
    max-width: 100%;
    padding: 6px 10px;
    text-align: left;
    line-height: 1.3;
  }

  #featured .project-card .project-title-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 8px;
    row-gap: 7px;
    margin-bottom: 9px;
  }

  #featured .project-card .project-name-group {
    gap: 4px;
  }

  #featured .project-card .project-title-row .property-tag {
    gap: 4px;
    padding: 5px 8px;
    font-size: .52rem;
    letter-spacing: .06em;
  }

  #featured .project-card .project-title-row .property-tag i {
    font-size: .68rem;
  }

  #featured .project-card .project-audience-label {
    margin-top: 0;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: .62rem;
    line-height: 1.2;
  }

  #featured .project-card .project-title-row .location {
    grid-column: 1 / -1;
    justify-self: start;
    width: fit-content;
    max-width: 100%;
    padding: 6px 10px;
    text-align: left;
    line-height: 1.3;
  }

  #featured .project-card .property-body>p {
    margin-bottom: 9px;
    line-height: 1.4;
  }

  #featured .project-card .project-highlights {
    padding: 8px 7px;
    gap: 3px;
  }

  #featured .project-card .project-highlight {
    padding: 2px 4px;
  }

  #featured .project-card .project-highlight span {
    line-height: 1.25;
  }
}

/* Align mobile project-card headers cleanly across homepage and project listings. */
@media (max-width: 767px) {

  #featured .project-card .project-name-group,
  #projectList .project-card .project-name-group {
    display: contents;
  }

  #featured .project-card .project-title-row h3,
  #projectList .project-card .project-title-row h3 {
    grid-column: 1;
    grid-row: 1;
  }

  #featured .project-card .project-title-row .property-tag,
  #projectList .project-card .project-title-row .property-tag {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    transform: translateY(-2px);
  }

  #featured .project-card .project-audience-label,
  #projectList .project-card .project-audience-label {
    grid-column: 1 / -1;
    grid-row: 2;
    width: fit-content;
    max-width: 100%;
    align-self: start;
  }

  #featured .project-card .project-title-row .location,
  #projectList .project-card .project-title-row .location {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
    width: fit-content;
    max-width: 100%;
    text-align: left;
  }
}

@media (min-width: 992px) {
  .project-page-description {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(.82rem, 1vw, .95rem);
  }
}

.project-page-filters {
  margin-bottom: 30px;
}

.project-search-popup[hidden] { display: none !important; }
.project-search-popup { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 24px; }
.project-search-popup-backdrop { position: absolute; inset: 0; background: #101c16a8; backdrop-filter: blur(5px); }
.project-search-popup-panel { position: relative; display: flex; flex-direction: column; width: min(920px, 100%); max-height: min(800px, calc(100vh - 48px)); overflow: hidden; padding: clamp(24px, 5vw, 42px); border-radius: 24px; background: #fff; box-shadow: 0 24px 80px #0004; }
.project-search-popup-panel h2 { margin: 7px 0 22px; color: var(--ink); font-size: clamp(1.7rem, 4vw, 2.3rem); }
.project-search-popup-close { position: absolute; top: 16px; right: 16px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #dce5df; border-radius: 50%; background: #fff; color: #294b3a; }
.project-search-popup-query { display: flex; align-items: center; gap: 11px; padding: 0 16px; min-height: 52px; border: 1px solid #d5e0d8; border-radius: 14px; color: #294b3a; }
.project-search-popup-query:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px #174b3d18; }
.project-search-popup-query input,
.project-search-popup-query input:focus { flex: 1; min-width: 0; border: 0 !important; outline: 0 !important; box-shadow: none !important; border-radius: 0; padding: 12px 0; background: transparent; }
.project-search-popup-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 15px; }
.project-search-popup-filters label { display: grid; gap: 6px; color: #52645a; font-size: .82rem; font-weight: 650; }
.project-search-popup-filters select { width: 100%; min-width: 0; padding: 11px 30px 11px 12px; border: 1px solid #d5e0d8; border-radius: 10px; background-color: #fff; color: #263c31; accent-color: #174b3d; font: inherit; font-size: .9rem; }
.project-search-popup-filters select:focus { border-color: #174b3d; box-shadow: 0 0 0 3px #174b3d18; }
.project-search-popup-filters option { background: #fff; color: #294b3a; }
.project-search-popup-filters option:checked { background: #174b3d linear-gradient(0deg, #174b3d 0%, #174b3d 100%); color: #fff; }
.project-search-popup-filters select.project-colour-select-native { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
.project-colour-select { position: relative; min-width: 0; }
.project-colour-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 50px; padding: 11px 13px; border: 1px solid #d5e0d8; border-radius: 11px; background: #fff; color: #294b3a; text-align: left; font: inherit; font-size: .9rem; font-weight: 650; transition: border-color .18s, box-shadow .18s, background .18s; }
.project-colour-select-trigger:hover,.project-colour-select-trigger[aria-expanded="true"] { border-color: #174b3d; background: #f7faf7; }
.project-colour-select-trigger:focus-visible { outline: 3px solid #b58b2b55; outline-offset: 2px; }
.project-colour-select-trigger>i { color: #987323; transition: transform .18s; }
.project-colour-select-trigger[aria-expanded="true"]>i { transform: rotate(180deg); }
.project-colour-select-menu[hidden] { display: none !important; }
.project-colour-select-menu { position: absolute; z-index: 5; top: calc(100% + 7px); left: 0; right: 0; display: grid; max-height: 235px; overflow-y: auto; padding: 6px; border: 1px solid #d9e3dc; border-radius: 12px; background: #fff; box-shadow: 0 14px 30px #183e2c24; }
.project-colour-select-menu.opens-up { top: auto; bottom: calc(100% + 7px); }
.project-colour-select-option { width: 100%; padding: 10px 11px; border: 0; border-radius: 7px; background: transparent; color: #294b3a; text-align: left; font: inherit; font-size: .9rem; transition: background-color .15s, color .15s; }
.project-colour-select-option:hover,.project-colour-select-option:focus-visible { outline: 0; transform: none !important; filter: none !important; box-shadow: none !important; background: #f4ead0; color: #173d2b; }
.project-colour-select-option:active { transform: none !important; filter: none !important; box-shadow: none !important; }
.project-colour-select-option[aria-selected="true"] { background: #174b3d; color: #fff; }
.project-colour-select-option[aria-selected="true"]:hover,.project-colour-select-option[aria-selected="true"]:focus-visible { transform: none !important; filter: none !important; box-shadow: none !important; background: #b58b2b; color: #fff; }
.project-search-popup-count { margin: 20px 0 9px; color: #68786e; font-size: .88rem; }
.project-search-popup-results { display: grid; gap: 9px; min-height: 0; overflow-y: auto; padding: 0 8px 2px 0; scrollbar-gutter: stable; }
.project-search-result { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px solid #e4ebe6; border-radius: 14px; color: inherit; text-decoration: none; transition: border-color .2s, background .2s; }
.project-search-result:hover { border-color: #aac3b3; background: #f7faf8; color: inherit; }
.project-search-result>img { width: 76px; height: 64px; flex: 0 0 auto; border-radius: 9px; object-fit: cover; }
.project-search-result>span { display: grid; flex: 1; gap: 3px; min-width: 0; }
.project-search-result strong { color: #21392d; }
.project-search-result small { overflow: hidden; color: #68786e; text-overflow: ellipsis; white-space: nowrap; }
.project-search-result>i { color: var(--green); }
.project-search-popup-empty { padding: 24px 12px; text-align: center; color: #68786e; }
body.project-search-open { overflow: hidden; }

@media (max-width: 575px) {
  .project-search-popup { padding: 12px; }
  .project-search-popup-panel { max-height: calc(100vh - 24px); padding: 28px 18px 18px; border-radius: 19px; }
  .project-search-popup-panel h2 { padding-right: 38px; }
  .project-search-popup-filters { grid-template-columns: 1fr; gap: 9px; }
  .project-search-popup-filters label { grid-template-columns: 95px minmax(0, 1fr); align-items: center; }
  .project-search-result>img { width: 62px; height: 58px; }
}

@media (max-width: 767px) {
  .project-search-popup { padding: 8vh 12px; }
  .project-search-popup-panel {
    max-height: min(84vh, calc(100vh - 64px));
    max-height: min(84dvh, calc(100dvh - 64px));
    border-radius: 20px;
  }
}


@media (max-width: 767px) {
  .project-page-filters {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 9px;
    margin: 0 auto 14px;
  }

  .project-page-filters .filter-button {
    min-width: 110px;
  }
}

.project-card .property-tag-cover {
  display: none;
}

@media (min-width: 992px) {
  .project-card .property-photo .property-tag-cover {
    display: inline-flex;
    top: auto;
    right: 16px;
    bottom: 16px;
    left: auto;
    z-index: 2;
  }

  .project-card .project-title-row .property-tag-inline {
    display: none;
  }
}

/* Animated WhatsApp shortcut for laptop and larger screens. */
.desktop-whatsapp {
  position: fixed;
  z-index: 1050;
  right: clamp(24px, 3vw, 32px);
  bottom: clamp(48px, 4vh, 42px);
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  color: #fff;
  background: #20c66b;
  box-shadow: 0 10px 28px rgba(5, 43, 35, .32), 0 0 0 0 rgba(32, 198, 107, .5);
  font-size: 35px;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(20px) scale(.72) rotate(-18deg);
  transition: opacity .28s ease, visibility .28s ease, transform .5s cubic-bezier(.2, .9, .25, 1.35), box-shadow .35s ease;
  animation: whatsappPulse 2.2s ease-out infinite;
}

.desktop-whatsapp.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1) rotate(0);
  transition-duration: .42s, 0s, .62s, .35s;
}

.desktop-whatsapp:hover {
  color: #fff;
  transform: translateY(-5px) scale(1.1) rotate(8deg);
  box-shadow: 0 15px 34px rgba(5, 43, 35, .4), 0 0 0 10px rgba(32, 198, 107, .12);
}

.desktop-whatsapp:focus-visible {
  outline: 3px solid #d5b36a;
  outline-offset: 5px;
}

@keyframes whatsappPulse {

  0%,
  100% {
    box-shadow: 0 10px 28px rgba(5, 43, 35, .32), 0 0 0 0 rgba(32, 198, 107, .42);
  }

  55% {
    box-shadow: 0 10px 28px rgba(5, 43, 35, .32), 0 0 0 15px rgba(32, 198, 107, 0);
  }
}

@media (max-width: 991.98px) {
  .desktop-whatsapp {
    display: none;
  }
}

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

  .desktop-whatsapp,
  .desktop-whatsapp.is-visible {
    animation: none;
    transition: opacity .01ms, visibility .01ms;
    transform: none;
  }
}

/* Keep project card spacing consistent across phone widths. */
@media (max-width: 767px) {
  /* Match the homepage carousel's 20px card inset on every phone width. */
  body:has(#projectList) main.section-pad > .container {
    width: 100%;
    max-width: 100%;
    padding-right: 16px;
    padding-left: 16px;
  }

  #projectList {
    --bs-gutter-y: 0;
    row-gap: 24px;
  }

  #projectList > .project-result {
    padding-right: 12px;
    padding-left: 12px;
  }

  #projectList .project-card {
    width: 100%;
    max-width: none;
    margin: 0;
  }
}


/* Keep the homepage mobile hero tagline on one line at every phone width. */
@media (max-width: 767px) {
  .hero .eyebrow {
    flex-wrap: nowrap;
    gap: 6px;
    white-space: nowrap;
    font-size: clamp(.42rem, 2.5vw, .58rem);
    letter-spacing: .1em;
  }

  .hero .eyebrow span {
    flex: 0 0 12px;
    width: 12px;
  }
}




/* Add separation before the project enquiry column on mobile. */
@media (max-width: 767px) {
  body[data-project-name] .project-detail-enquiry-column {
    padding-top: 36px !important;
  }
}


/* Size project detail cover images proportionally across mobile screens. */
@media (max-width: 767px) {
  .detail-image {
    display: block;
    width: 100%;
    height: clamp(200px, 70vw, 280px);
    object-fit: fill;
  }
}


/* Use a two-column project gallery on every mobile screen. */
@media (max-width: 767px) {
  .project-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .project-gallery-card img {
    height: clamp(120px, 42vw, 180px);
  }

  .project-gallery-card figcaption {
    padding: 9px 10px;
    font-size: .72rem;
  }
}


/* Keep the project gallery description on one line on mobile. */
@media (max-width: 767px) {
  .project-gallery .section-heading > p {
    white-space: nowrap;
    font-size: clamp(.54rem, 3.2vw, .72rem);
    letter-spacing: -.01em;
  }
}


/* Extend the project detail link across the whole card for touch and pointer input. */
.project-card .project-view-link::after {
  z-index: 5;
}


/* Single-image project gallery with swipe, autoplay, and manual controls. */
.project-gallery-carousel {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

.project-gallery-viewport {
  position: relative;
  width: 100%;
  height: clamp(360px, 46vw, 590px);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid #dce6df;
  border-radius: 20px;
  background: #f3f6f2;
  box-shadow: 0 18px 42px rgba(23, 75, 61, .09);
  transition: box-shadow .24s ease, border-color .24s ease;
  touch-action: pan-y;
}

.project-gallery-viewport::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 5px;
  border-radius: 15px;
  background: linear-gradient(145deg, #fff, #f7f9f6);
  box-shadow: 0 4px 14px rgba(23, 75, 61, .06);
  pointer-events: none;
}

.project-gallery-open {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(100% - 18px);
  height: calc(100% - 18px);
  margin: 9px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 15px;
  background: transparent;
  cursor: zoom-in;
}

.project-gallery-image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
  background: #f3f6f2;
}

.project-gallery-caption {
  min-height: 1.5em;
  margin-top: 16px;
  color: #174b3d;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.project-gallery-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}

.project-gallery-arrow {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #d4e0d8;
  border-radius: 14px;
  background: #f7f9f6;
  color: #174b3d;
  cursor: pointer;
}

.project-gallery-arrow:hover {
  border-color: #c89d45;
  background: #174b3d;
  color: #fff;
}

.project-gallery-arrow:focus-visible,
.project-gallery-open:focus-visible,
.project-gallery-viewport:focus-visible {
  outline: 3px solid #c89d45;
  outline-offset: 3px;
}

.project-gallery-count {
  min-width: 64px;
  color: #174b3d;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

@media (max-width: 767px) {
  .project-gallery-viewport {
    height: clamp(300px, 90vw, 440px);
  }

  .project-gallery-viewport {
    border-radius: 16px;
  }

  .project-gallery-viewport::before {
    inset: 4px;
    border-radius: 12px;
  }

  .project-gallery-open {
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    margin: 6px;
    border-radius: 12px;
  }

  .project-gallery-viewport {
    border-radius: 16px;
  }

  .project-gallery-caption {
    margin-top: 10px;
    font-size: .78rem;
  }

  .project-gallery-controls {
    gap: 12px;
    margin-top: 10px;
  }

  .project-gallery-arrow {
    width: 38px;
    height: 38px;
  }
}




/* Prevent hover, focus, or pointer effects from tinting the gallery image. */
.project-gallery-carousel,
.project-gallery-carousel:hover,
.project-gallery-viewport,
.project-gallery-viewport:hover,
.project-gallery-open,
.project-gallery-open:hover,
.project-gallery-open:active,
.project-gallery-open:focus {
  filter: none !important;
  mix-blend-mode: normal !important;
}

.project-gallery-image,
.project-gallery-open:hover .project-gallery-image,
.project-gallery-open:active .project-gallery-image,
.project-gallery-open:focus .project-gallery-image {
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Keep the full gallery static; navigation switches images immediately. */
.project-gallery-carousel,
.project-gallery-open,
.project-gallery-image,
.project-gallery-caption,
.project-gallery-controls,
.project-gallery-arrow,
.project-lightbox-close,
.project-lightbox-nav {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

.project-lightbox-close:hover,
.project-lightbox-nav:hover {
  transform: none !important;
}

@media (hover: hover) {
  .project-gallery-viewport:hover {
    border-color: #c89d45;
    box-shadow: 0 20px 46px rgba(23, 75, 61, .13);
  }
}

.project-gallery-viewport:focus-within,
.project-gallery-viewport:active {
  border-color: #c89d45;
  box-shadow: 0 16px 36px rgba(23, 75, 61, .11);
}

body:has(#enquiryThankYouModal.show) .modal-backdrop.show {
  opacity: .72;
  backdrop-filter: blur(5px);
}

#enquiryThankYouModal .modal-dialog {
  max-width: 500px;
  margin: 1rem auto;
  padding-inline: 1rem;
}

#enquiryThankYouModal .modal-content {
  position: relative;
  overflow: hidden;
  color: #18352d;
  background: #fffdf8;
  border: 1px solid rgba(200, 157, 69, .38);
  border-radius: 22px;
  box-shadow: 0 26px 90px rgba(5, 24, 19, .32);
}

#enquiryThankYouModal .thank-you-topline {
  height: 5px;
  background: linear-gradient(90deg, var(--green), var(--gold), var(--gold2));
}

#enquiryThankYouModal .modal-header {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 25px 28px 17px;
  border: 0;
}

#enquiryThankYouModal .thank-you-icon {
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #f7df9d;
  background: var(--green);
  border: 1px solid rgba(200, 157, 69, .8);
  border-radius: 50%;
  font-size: 1.65rem;
}

#enquiryThankYouModal .thank-you-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: #94702e;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .2em;
}

#enquiryThankYouModal .modal-title {
  margin: 0;
  color: var(--green);
  font-family: var(--heading-font, Georgia, serif);
  font-size: clamp(1.65rem, 5vw, 2rem);
  line-height: 1.1;
}

#enquiryThankYouModal .btn-close {
  align-self: flex-start;
  margin: 0 0 0 auto;
  opacity: .58;
}

#enquiryThankYouModal .modal-body {
  padding: 0 28px 20px 91px;
}

#enquiryThankYouModal .modal-body p {
  margin: 0 0 5px;
  color: #263b34;
  font-size: 1.04rem;
  font-weight: 650;
  line-height: 1.55;
}

#enquiryThankYouModal .modal-body span {
  color: #6d7973;
  font-size: .93rem;
  line-height: 1.55;
}

#enquiryThankYouModal .modal-footer {
  padding: 0 28px 24px;
  border: 0;
}

#enquiryThankYouModal .thank-you-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 21px;
  color: #fffdf8;
  background: var(--green);
  border: 1px solid var(--green);
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 700;
  transition: background .2s ease, transform .2s ease;
}

#enquiryThankYouModal .thank-you-close:hover {
  color: #fffdf8;
  background: var(--green2);
  transform: translateY(-1px);
}

/* Reuse the thank-you card inside the enquiry modal after a successful submit. */
.lead-modal.enquiry-success-state .modal-dialog {
  max-width: 500px;
}

.lead-modal.enquiry-success-state .modal-content.thank-you-embedded {
  padding: 0;
  overflow: hidden;
  color: #18352d;
  background: #fffdf8;
  border: 1px solid rgba(200, 157, 69, .38);
  border-radius: 22px;
  box-shadow: 0 26px 90px rgba(5, 24, 19, .32);
}

.thank-you-embedded .thank-you-topline { height: 5px; background: linear-gradient(90deg, var(--green), var(--gold), var(--gold2)); }
.thank-you-embedded .modal-header { display: flex; align-items: center; gap: 15px; padding: 25px 28px 17px; border: 0; }
.thank-you-embedded .thank-you-icon { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; color: #f7df9d; background: var(--green); border: 1px solid rgba(200,157,69,.8); border-radius: 50%; font-size: 1.65rem; }
.thank-you-embedded .thank-you-eyebrow { display: block; margin-bottom: 3px; color: #94702e; font-size: .65rem; font-weight: 800; letter-spacing: .2em; }
.thank-you-embedded .modal-title { margin: 0; color: var(--green); font-family: var(--heading-font, Georgia,serif); font-size: clamp(1.65rem,5vw,2rem); line-height: 1.1; }
.thank-you-embedded .btn-close { align-self: flex-start; margin: 0 0 0 auto; opacity: .58; }
.thank-you-embedded .modal-body { padding: 0 28px 20px 91px; }
.thank-you-embedded .modal-body p { margin: 0 0 5px; color: #263b34; font-size: 1.04rem; font-weight: 650; line-height: 1.55; }
.thank-you-embedded .modal-body span { color: #6d7973; font-size: .93rem; line-height: 1.55; }
.thank-you-embedded .modal-footer { padding: 0 28px 24px; border: 0; }
.thank-you-embedded .thank-you-close { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 21px; color: #fffdf8; background: var(--green); border: 1px solid var(--green); border-radius: 999px; font-size: .9rem; font-weight: 700; }
.thank-you-embedded .thank-you-close:hover { color: #fffdf8; background: var(--green2); }

@media (max-width: 575.98px) {
  #enquiryThankYouModal .modal-dialog { margin: .75rem auto; }
  #enquiryThankYouModal .modal-header { gap: 12px; padding: 21px 20px 15px; }
  #enquiryThankYouModal .thank-you-icon { flex-basis: 42px; width: 42px; height: 42px; font-size: 1.45rem; }
  #enquiryThankYouModal .modal-body { padding: 0 20px 18px 74px; }
  #enquiryThankYouModal .modal-footer { padding: 0 20px 20px; }
  #enquiryThankYouModal .thank-you-close { width: 100%; }
  .thank-you-embedded .modal-header { gap: 12px; padding: 21px 20px 15px; }
  .thank-you-embedded .thank-you-icon { flex-basis: 42px; width: 42px; height: 42px; font-size: 1.45rem; }
  .thank-you-embedded .modal-body { padding: 0 20px 18px 74px; }
  .thank-you-embedded .modal-footer { padding: 0 20px 20px; }
  .thank-you-embedded .thank-you-close { width: 100%; }
}