/* Plain CSS. Desktop proportions follow the supplied 1920px reference.
   Only the supplied Articulat CF and Canela font files and brand palette are used. */
@font-face {
  font-family: "Articulat CF";
  src: url("../assets/fonts/articulat-cf/articulat-cf-light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Articulat CF";
  src: url("../assets/fonts/articulat-cf/articulat-cf-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Articulat CF";
  src: url("../assets/fonts/articulat-cf/articulat-cf-regular-oblique.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Articulat CF";
  src: url("../assets/fonts/articulat-cf/articulat-cf-demi-bold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Canela";
  src: url("../assets/fonts/canela/canela-light-trial.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Canela";
  src: url("../assets/fonts/canela/canela-thin-trial.otf") format("opentype");
  font-weight:100;
  font-style: normal;
  font-display: swap;
}

:root {
  --green: #0d2e20;
  --green-deep: #0d2e20;
  --gold: #c4a05a;
  --gold-line: #c4a05a;
  --cream: #f6f1e8;
  --paper: #fcf9f4;
  --ink: #0d2e20;
  --body: #333531;
  --font-family: "Articulat CF", sans-serif;
  --heading-family: "Canela", serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --paragraph-tracking: .04em;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Keep the scrollbar's space reserved, so locking scroll for a popup
     (body.modal-open) doesn't widen the page and shift it sideways. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  color: var(--body);
  background: #fff;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.modal-open {
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
}

button,
a,
input,
select,
summary {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

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

img {
  display: block;
  width: 100%;
  height: auto;
}

svg {
  display: block;
}

button {
  border-radius: 0;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--heading-family);
  font-weight: 300;
  letter-spacing: -.02em;
  word-spacing: .015em;
}

h1,
h2 {
  line-height: .96;
}

h2 {
  color: var(--ink);
  font-size: 72px;
}

h3 {
  line-height: 1.08;
}

p+p {
  margin-top: 24px;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

::selection {
  background: var(--gold);
  color: var(--green-deep);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 12px 20px;
  background: var(--cream);
  color: var(--green);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.container {
  width: 86%;
  max-width: 1660px;
  margin-inline: auto;
}

.section {
  padding-block: 92px;
}

.split {
  display: grid;
  grid-template-columns: 37% 57.5%;
  gap: 5.5%;
  align-items: center;
}

.eyebrow {
  margin-bottom: 27px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .19em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* Body-text paragraphs across the site get a touch of extra letter-spacing.
   :where() keeps this at zero specificity, so any paragraph with its own
   letter-spacing (labels, prices, form notes) keeps it. */
:where(.section-copy > p, .contact-copy > p, .faq-answer p, .investment-card p,
  .journal-card > p, .plus-list li, .cost-sheet-head p, .cost-notes li,
  .developer-copy p, .site-footer p, .dialog-intro) {
  letter-spacing: var(--paragraph-tracking);
}

.section-copy>p:not(.eyebrow) {
  max-width: 490px;
  margin-top: 38px;
  font-size: 16px;
  line-height: 1.48;
}

.section-copy>.button {
  margin-top: 54px;
}

.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 28px;
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 400;
  text-align: center;
  position: relative;
  isolation: isolate;
  transition: color .3s, background .3s, border-color .3s, transform .3s var(--ease);
}

.button:not(:disabled):hover {
  transform: translateY(-3px);
}

.button:active:not(:disabled) {
  transform: translateY(0);
}

.button-gold {
  color: #fff;
  background: var(--gold);
}

.button-gold:not(:disabled):hover {
  background: #ad8843;
}

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

.button-green:not(:disabled):hover {
  background: #20553f;
}

.button-outline-light {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, .8);
}

.button-outline-light:not(:disabled):hover {
  color: var(--green);
  background: #fff;
}

/* CTA case: every button is in capitals, with a little tracking so the
   capitals breathe. The header and footer track a touch wider; the hero's
   action buttons keep their own .9px (.hero-actions .button). */
.button,
.brochure-tab {
  text-transform: uppercase;
  letter-spacing: .1em;
}

.site-header .button,
.site-footer .button {
  letter-spacing: .15em;
}

.media-frame {
  overflow: hidden;
  background: #262626;
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}

@media (hover: hover) {
  .media-frame:hover img {
    transform: scale(1.035);
  }
}

.icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  object-fit: contain;
}

.dark-section {
  color: #f8f8f2;
  background: var(--green-deep);
}

.dark-section h2,
.dark-section h3 {
  color: #fff;
}

.contour {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.contour::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0;
  background-image: var(--contour-image, url("../assets/images/topographic-subtle.webp"));
  background-repeat: no-repeat;
  background-size: var(--contour-size, 90vw auto);
  background-position: var(--contour-position, 12vw -6.77vw);
  opacity: var(--contour-opacity, 1);
  transform: var(--contour-transform, none);
  transform-origin: var(--contour-origin, center);
}

.centered {
  text-align: center;
}

.section-heading {
  margin-bottom: 58px;
}

/* Header and first impression */
.site-header {
  position: absolute;
  z-index: 30;
  top: 0;
  inset-inline: 0;
  color: #fff;
  transition: background .4s;
}

.header-inner {
  width: 86%;
  max-width: 1660px;
  min-height: 132px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  width: 230px;
  flex-shrink: 0;
}

.desktop-nav {
  display: flex;
  justify-content: center;
  gap: 31px;
  flex: 1;
  margin-inline: 35px;
}

.desktop-nav a {
  font-weight: 300;
  position: relative;
  padding-block: 10px;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .15em;
  white-space: nowrap;
}

.desktop-nav a::after,
.footer-nav a::after {
  content: "";
  position: absolute;
  height: 1px;
  background: var(--gold);
  bottom: 3px;
  inset-inline: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}

.desktop-nav a:hover::after,
.footer-nav a:hover::after {
  transform: scaleX(1);
}

.header-enquire {
  min-height: 34px;
  width: 176px;
  padding: 9px 22px;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: .15em;
  font-size: 12px;
}

.menu-toggle {
  display: none;
}

.hero {
  overflow: hidden;
  min-height: 750px;
  height: 50vw;
  max-height: 1100px;
  position: relative;
  isolation: isolate;
  color: #fff;
  background: #262626;
}

.hero-image,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero-shade {
  z-index: -1;
  background: linear-gradient(90deg, #0002, transparent 65%), rgba(0, 0, 0, .18);
}

.hero-image {
  /* transform: scale(1.2); */
  transform-origin: 60% bottom;
}

.hero-inner {
  height: 100%;
  min-height: inherit;
  display: grid;
  grid-template-columns: 1fr 29%;
  align-items: center;
  gap: 10%;
  padding-top: 105px;
  padding-bottom: 60px;
}

.hero-copy {
  align-self: center;
}

.hero h1 {
  font-size: 80px;
  color: #fff;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 23px;
  margin-top: 64px;
}

.hero-actions .button {
  min-width: 185px;
  letter-spacing: .9px;
}

/* A faint dark fill so the outlined button reads over the bright photo.
   The hero form panel uses the same fill. */
.hero-actions .button-outline-light {
  background: rgba(0, 0, 0, .3);
}

.hero-form-panel {
  padding: 36px 34px;
  border: 1px solid #c4a05a80;
  background: rgba(0, 0, 0, .4);
  min-height: 438px;
}

.hero-form-panel h2 {
  color: #fff;
  font: 400 24px/1.3 var(--font-family);
  letter-spacing: -.015em;
  word-spacing: normal;
  margin-bottom: 31px;
}

.field {
  position: relative;
  display: block;
  min-width: 0;
}

/* Enquiry forms sit on dark green: native controls, autofill and pickers
   follow a dark scheme. */
.enquiry-form {
  color-scheme: dark;
}

.field input,
.field select {
  width: 100%;
  min-height: 38px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--gold);
  background: transparent;
  color: #fff;
  caret-color: var(--gold);
  border-radius: 0;
  outline-offset: 3px;
  transition: border-color .3s, box-shadow .3s;
}

/* Underlined fields show focus with a brighter, thicker rule rather than a
   box, which collided with the labels. */
.field input:focus-visible,
.field select:focus-visible {
  outline: none;
}

.field input:focus,
.field select:focus {
  border-bottom-color: #fff;
  box-shadow: 0 1px 0 #fff;
}

.field input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  caret-color: var(--gold);
  transition: background-color 100000s, border-color .3s, box-shadow .3s;
}

.field input::placeholder {
  color: #f1f0eab8;
  opacity: 1;
}

.field select:has(option[value=""]:checked) {
  color: #f1f0eab8;
}

.main-form .field > span {
  transition: color .3s;
}

.main-form .field:focus-within > span {
  color: #fff;
}

input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
  outline-offset: 3px;
}

.consent {
  position: relative;
}

.field-error {
  position: absolute;
  left: 0;
  top: calc(100% + 5px);
  color: #f2b8a2;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: none;
  white-space: nowrap;
  pointer-events: none;
}

.field-error:empty {
  display: none;
}

.has-error .field-error {
  animation: fade-in .25s ease;
}

.field.has-error input,
.field.has-error select,
.field.has-error input:focus {
  border-bottom-color: #f2b8a2;
}

.field.has-error input:focus {
  box-shadow: 0 1px 0 #f2b8a2;
}

.has-error input[type="checkbox"] {
  outline: 1px solid #f2b8a2;
  outline-offset: 2px;
}

/* Hero form: placeholder-led, so the radio group and consent stay compact. */
.hero-form .field {
  margin-bottom: 18px;
}

.hero-form .contact-method {
  margin-top: 2px;
}

.hero-form .contact-method legend {
  margin-bottom: 10px;
  color: #f1f0eab8;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.hero-form .contact-method label {
  gap: 7px;
  margin-right: 14px;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: none;
}

.hero-form .consent {
  gap: 10px;
  margin-top: 18px;
  font-size: 11px;
  line-height: 1.45;
  color: #f1f0ea;
}

.field select {
  appearance: none;
  padding-right: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='m1 2 4 4 4-4' fill='none' stroke='%23c4a05a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}

.field select option {
  background: var(--green-deep);
  color: #fff;
}

.hero-form .field {
  margin-top: 1px;
  font-size: 12px;
}

.hero-form .button {
  margin-top: 30px;
  /* Same size as the header's Book Now button (.header-enquire). */
  min-height: 34px;
  width: 176px;
  padding: 9px 22px;
  font-size: 12px;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: .15em;
}

/* Centre the visible capitals: compensate for Articulat's vertical metrics
   and the half tracking space left after the final letter. */
.header-enquire .button-label,
.hero-form .button-label {
  transform: translate(.075em, .1em);
}

.form-status {
  font-size: 13px;
  line-height: 1.5;
  color: #f1ddb0;
}

.form-status:empty {
  display: none;
}

.form-status:not(:empty) {
  margin-top: 18px;
}

.form-status.is-error {
  color: #f2b8a2;
}

.enquiry-form [type="submit"][aria-disabled="true"] {
  opacity: .75;
  cursor: progress;
}

/* Spam trap: off-screen and skipped by keyboard and assistive tech. */
.form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Brochure tab: stuck to the right edge of the screen. A slim green tab with
   a gold hairline and softly rounded outer corners; the side against the
   screen edge is square and open. On hover it fills gold and the arrow
   nudges down. The tab is turned 180deg to read bottom-to-top, so its own
   left side is the screen edge, its own right corners are the rounded outer
   ones, and the icon is drawn pointing up (it shows pointing down). */
.brochure-tab {
  position: fixed;
  z-index: 20;
  right: 0;
  top: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 32px;
  padding: 22px 0;
  color: #fff;
  background: var(--green);
  border: 1px solid #c4a05ab3;
  border-left: 0;
  border-radius: 0 12px 12px 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .2em;
  line-height: 1;
  transition: color .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
}

.brochure-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .35s var(--ease), translate .35s var(--ease);
}

@media (hover: hover) {
  .brochure-tab:hover {
    color: var(--green);
    background: var(--gold);
    border-color: var(--gold);
  }

  .brochure-tab:hover .brochure-icon {
    stroke: var(--green);
    translate: 0 -2px;
  }
}

.brochure-tab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* The story and investment rationale */
.story {
  padding-block: 75px;
}

.story-image {
  aspect-ratio: 1.3;
}

.story-image img { object-position: center 45%; }
.gallery-slide img[data-asset="estate-gallery-villa"] { object-position: 65% 48%; }
.gallery-slide img[data-asset="estate-gallery-poolside"] { object-position: 35% center; }
.faq-image img { object-position: 60% center; }
.developer-image img { object-position: 60% center; }

.story .section-copy {
  padding-right: 15px;
}

.story .button {
  min-width: 185px;
  font-size: 17px;
}

.investment {
  --contour-size: 90vw auto;
  --contour-position: 12vw -6.77vw;
  padding-block: 105px 110px;
}

.investment .eyebrow {
  margin-bottom: 24px;
}

.investment h2 {
  font-size: 68px;
}

.investment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 21px;
}

.investment-card {
  border: 1px solid var(--gold);
  padding: 31px 27px 29px;
  transition: background .4s, border-color .4s;
}

.investment-card:hover {
  background: #c4a05a0b;
  border-color: #e9cc94;
}

.investment-card .icon {
  margin-bottom: 18px;
  transition: transform .5s var(--ease);
}

.investment-card h3 {
  font-size: 31px;
  line-height: 1.02;
  margin-bottom: 21px;
}

.investment-card p {
  font-size: 14px;
  line-height: 1.6;
}

/* Estate gallery and discovery */
.estates {
  overflow: hidden;
  padding-top: 110px;
  padding-bottom: 110px;
}

.estates-grid {
  display: grid;
  grid-template-columns: 32% 65%;
  gap: 3%;
  align-items: start;
}

.estates-grid h2 {
  font-size: 71px;
}

.estates-grid .section-copy {
  padding-top: 0;
}

.estates-grid .section-copy>p:not(.eyebrow) {
  margin-top: 35px;
}

.plus-list {
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
}

.plus-list li {
  position: relative;
  padding-left: 26px;
  margin-top: 24px;
  font-size: 15px;
  line-height: 1.5;
}

/* A drawn plus, centred on the first line of text (line-height 1.5, so the
   line's middle sits at .75em). Sized in em, so it scales with the text. */
.plus-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: .7em;
  height: .7em;
  background:
    linear-gradient(var(--gold), var(--gold)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center / 1.5px 100% no-repeat;
}

.gallery {
  min-width: 0;
}

.gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 80px;
  margin-bottom: 52px;
  min-height: 34px;
}

.gallery-tabs {
  display: flex;
  gap: 15px;
}

.gallery-tab {
  padding: 8px 25px;
  min-width: 125px;
  border: 1px solid var(--green);
  color: var(--green);
  background: #fff;
  font-size: 13px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .17em;
}

.gallery-tab.active {
  background: var(--green);
  color: #fff;
}

.gallery-arrows {
  display: flex;
  gap: 12px;
}

.gallery-arrows button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--green);
  transition: transform .3s var(--ease);
}

.gallery-arrows button:last-child {
  color: var(--gold);
}

.gallery-arrows button:not(:disabled):hover {
  transform: translateX(-3px);
}

.gallery-arrows button:last-child:not(:disabled):hover {
  transform: translateX(3px);
}

/* Disabled when every slide in the tab is already in view. */
.gallery-arrows button:disabled {
  opacity: .3;
}

.gallery-arrows svg {
  width: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

.gallery-viewport {
  width: calc(100% + 8.15vw);
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.gallery-viewport.is-dragging,
.gallery-viewport.is-dragging * {
  cursor: grabbing;
}

/* Moved by js/main.js (page scroll, drag, arrows), eased there per frame. */
.gallery-track {
  display: flex;
  gap: 28px;
  will-change: transform;
}

.gallery-track img {
  -webkit-user-drag: none;
}

.gallery-slide {
  width: 71%;
  flex: 0 0 71%;
  aspect-ratio: 1;
}

/* Video tab: the same slides and carousel as the images. The vertical poster
   fills the frame like a cover image; playback opens the full video in the
   popup. */
.gallery-slide.video-card {
  position: relative;
}

.video-card-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: #fff;
  background: linear-gradient(180deg, transparent 55%, #0d2e2099);
  cursor: pointer;
}

.video-card-play:focus-visible {
  outline-offset: -6px;
}

.video-card-circle {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #0d2e2033;
  transition: transform .5s var(--ease), background .4s;
}

.video-card-circle svg {
  width: 26px;
  height: 26px;
  margin-left: 3px;
  fill: #fff;
}

.video-card-duration {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-size: 12px;
  letter-spacing: .12em;
}

@media (hover: hover) {
  .video-card-play:hover .video-card-circle {
    transform: scale(1.06);
    background: #ffffff1f;
  }
}

@media (max-width: 640px) {
  .video-card-circle {
    width: 48px;
    height: 48px;
  }

  .video-card-circle svg {
    width: 20px;
    height: 20px;
  }

  .video-card-duration {
    left: 10px;
    bottom: 8px;
    font-size: 11px;
  }
}

/* Discover comes first, then the gallery: the gap sits on whichever block
   is second. */
.estates > .container + .container {
  margin-top: 105px;
}

.discover-grid {
  display: grid;
  grid-template-columns: 46% 49%;
  gap: 5%;
  align-items: center;
}

.discover-grid .section-copy>p:not(.eyebrow) {
  max-width: 520px;
}

/* Keep the copy column compact so it visually matches the feature-grid height. */
.discover-grid .section-copy>.button {
  margin-top: 22px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-card {
  border: 1px solid #d4b780;
  background: #faf7f2;
  padding: 30px 20px 25px;
  min-height: 166px;
  transition: background .4s, transform .4s var(--ease);
}

.feature-card:hover {
  background: #f1eadc;
}

.feature-card .icon {
  margin-bottom: 20px;
}

.feature-card p {
  font-size: 15px;
  line-height: 1.25;
}

/* Layout and brand film */
.layout-section {
  background: var(--cream);
  padding-block: 72px;
}

.layout-grid {
  grid-template-columns: 37% 57.5%;
}

.layout-section h2 {
  font-size: 70px;
}

.layout-section .section-copy>p:not(.eyebrow) {
  margin-top: 42px;
}

/* One paragraph, one size: each sentence on its own balanced lines. */
.layout-section .section-copy>.layout-verse {
  max-width: 26em;
}

.layout-verse > span {
  display: block;
  text-wrap: balance;
}

.layout-verse > span + span {
  margin-top: 1em;
}

.master-plan {
  position: relative;
  aspect-ratio: 1.5;
  border: 1px solid var(--gold);
}

.master-plan>.button {
  position: absolute;
  bottom: 12%;
  left: 50%;
  translate: -50% 0;
  white-space: nowrap;
  font-size: 16px;
}

.film-section {
  height: 49.5vw;
  max-height: 950px;
  min-height: 440px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #262626;
}

.film-section>img,
.film-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.film-shade {
  background: #0003;
}

.film-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 2;
  background: #000;
}

.film-play {
  display: flex;
  align-items: center;
  gap: 28px;
  color: #fff;
  background: none;
  border: 0;
  text-align: left;
  text-transform: uppercase;
  font-size: 23px;
  letter-spacing: .17em;
  line-height: 1.3;
}

.play-circle {
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  border: 1px solid #fff;
  border-radius: 50%;
}

.play-circle svg {
  width: 55px;
  height: 55px;
  fill: #fff;
}

/* Statistics and location */
.paradise {
  --contour-image: url("../assets/images/topographic-gold.webp");
  --contour-size: 55.416667vw auto;
  --contour-position: right 8.333333vw;
  --drift-x: 0;
  --drift-y: 0;
  padding-block: 65px 76px;
}

/* Cursor movement (desktop, fine pointer): js/main.js eases --drift-x/-y
   between -1 and 1 as the cursor crosses the section. The gold contours drift
   away from the cursor and the statistics lean towards it, giving the flat
   section a little depth. At rest both are 0. */
/* The contours sit 10px lower and further right, overhanging the bottom and
   right edges by more than they drift, so no empty edge ever shows. */
.paradise::before {
  inset: 10px -10px -10px 0;
  translate: calc(var(--drift-x) * -10px) calc(var(--drift-y) * -8px);
}

.paradise .stat-number {
  translate: calc(var(--drift-x) * 10px) calc(var(--drift-y) * 8px);
}

.paradise-content {
  width: 55%;
}

.paradise h2 {
  font-size: 70px;
}

.paradise .eyebrow {
  font-size: 11px;
  margin-bottom: 27px;
}

.statistics {
  display: flex;
  align-items: flex-end;
  gap: 72px;
  margin-top: 32px;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 26px;
}

.statistics>div {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-family: var(--heading-family);
  font-weight: 100;
  font-size: 123px;
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: 11px;
}

.stat-label {
  text-transform: uppercase;
  color: var(--gold);
  font-size: 13px;
  margin-top: 4px;
}

.amenity-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 22px;
  padding: 0;
  margin: 22px 0 30px;
}

.amenity-grid li {
  display: flex;
  align-items: center;
  gap: 17px;
  font-size: 16px;
}

.amenity-grid .icon {
  width: 36px;
  height: 36px;
}

/* The security icon is drawn with heavier strokes and is taller than the
   others, so it sits a little smaller to match their visual weight. */
.amenity-grid .icon-security {
  transform: scale(.82);
}

.location {
  padding-block: 80px;
}

.location-grid {
  display: grid;
  grid-template-columns: 46% 46%;
  gap: 8%;
  align-items: center;
}

.location-art {
  aspect-ratio: 1;
  max-width: 530px;
  background: transparent;
}

.location-art { position: relative; }
.location-art img { object-fit: contain; }
.location-art>.button {
  position: absolute;
  bottom: 10%;
  left: 50%;
  translate: -50% 0;
  white-space: nowrap;
}
.location-art:hover img { transform: none; }

.location h2 {
  font-size: 68px;
}

.location .section-copy>p.location-name {
  margin-top: 35px;
  font-size: 20px;
}

.location .section-copy>p.location-route {
  margin-top: 26px;
  color: #64746a;
}

.location .section-copy>p.location-description {
  margin-top: 64px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink);
}

.location .section-copy>.button {
  margin-top: 36px;
}

/* Price list on a solid green section. The inaugural offer sits in "Choose
   Your Estate" as a gold-foil voucher: a ticket with notches at a perforated
   tear-off stub, and a red "Limited offer" seal hanging off its top edge.
   The seal turns and a sheen crosses the foil only while on screen. */
.section.offer-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(72px, 7vw, 140px);
  background: var(--green-deep);
}

/* "Why Invest" sits directly above on the same green, so a gold hairline
   marks where one section ends and the price list begins. */
.investment + .offer-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(86%, 1660px);
  height: 1px;
  background: #c4a05a66;
  translate: -50% 0;
}

.offer-strip {
  --stub: clamp(200px, 15vw, 280px);
  --notch: clamp(14px, 1.1vw, 20px);
  --seal: clamp(96px, 6.6vw, 124px);
  position: relative;
  margin-top: clamp(64px, 5vw, 96px);
  filter: drop-shadow(0 28px 50px #00000066);
}

/* The ticket: foil gradient, cut by two notches where the stub tears off. */
.offer-ticket {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stub);
  color: var(--green);
  background: linear-gradient(115deg, #b38c47 0%, #e8d3a0 26%, #c4a05a 48%, #f2e4bd 70%, #b08a45 100%);
  -webkit-mask-image:
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000 100%),
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000 100%),
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000 100%);
  mask-composite: intersect;
}

/* A fine inner rule, like the frame on a banknote. */
.offer-ticket::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid #0d2e2033;
  pointer-events: none;
}

/* A slow band of light sweeps across the foil now and then. */
.offer-ticket::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, #fffbeea6 50%, transparent 62%);
  translate: -100% 0;
}

.offer-section.is-active .offer-ticket::after {
  animation: offer-sheen 7s var(--ease) 1s infinite;
}

.offer-ticket-main {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.2vw, 44px);
  padding: clamp(20px, 1.7vw, 34px) clamp(28px, 3.2vw, 64px);
}

/* "Avail Inaugural Offer" sits beside the price, set off by a thin rule. */
.offer-kicker {
  flex-shrink: 0;
  padding-right: clamp(20px, 2.2vw, 44px);
  border-right: 1px solid #0d2e2059;
  color: var(--green);
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 600;
  letter-spacing: .24em;
  line-height: 1.6;
  text-transform: uppercase;
}

.offer-headline {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.1vw, 22px);
}

.offer-amount {
  font-family: var(--heading-family);
  font-size: clamp(56px, 5.4vw, 104px);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: .9;
}

.offer-per {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 1.1em;
}

.offer-off {
  font-family: var(--heading-family);
  font-size: clamp(28px, 2.2vw, 42px);
  font-weight: 300;
  line-height: .8;
}

.offer-unit {
  font-size: clamp(11px, .8vw, 14px);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The stub, torn along a dashed perforation. */
.offer-stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px clamp(18px, 1.4vw, 28px);
  border-left: 2px dashed #0d2e2059;
}

.offer-stub .button {
  width: 100%;
  white-space: nowrap;
}

.offer-terms {
  color: #0d2e20b3;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.offer-terms:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The seal hangs over the ticket's top edge, just short of the stub. */
.offer-seal {
  position: absolute;
  top: calc(var(--seal) * -.5);
  right: calc(var(--stub) + clamp(28px, 4vw, 90px));
  width: var(--seal);
  height: var(--seal);
  overflow: visible;
  transition: scale .5s var(--ease);
}

.offer-seal-disc {
  fill: #b4472f;
  stroke: #f2e4bd;
  stroke-width: 1.5;
}

.offer-seal-rule {
  fill: none;
  stroke: #f2e4bd80;
  stroke-width: 1;
}

.offer-seal-ring {
  transform-box: view-box;
  transform-origin: 60px 60px;
  fill: #fcf9f4;
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 600;
}

.offer-section.is-active .offer-seal-ring {
  animation: seal-turn 22s linear infinite;
}

.offer-seal-glyph {
  fill: #fcf9f4;
  font-family: var(--heading-family);
  font-size: 34px;
  font-weight: 300;
}

@media (hover: hover) {
  .offer-strip:hover .offer-seal {
    scale: 1.06;
  }
}

@keyframes offer-sheen {
  0% {
    translate: -100% 0;
  }

  35%,
  100% {
    translate: 100% 0;
  }
}

@keyframes seal-turn {
  to {
    rotate: 1turn;
  }
}

/* Side by side, Canela's numerals sit low in their line, so the price is
   lifted to centre the digits on the "Avail Inaugural Offer" lines. */
@media (min-width: 1101px) {
  .offer-headline {
    position: relative;
    top: calc(clamp(56px, 5.4vw, 104px) * -.2);
  }
}

/* Narrower screens: "Avail Inaugural Offer" moves above the price. */
@media (max-width: 1100px) {
  .offer-ticket-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .offer-kicker {
    padding-right: 0;
    border-right: 0;
  }

  .offer-kicker br {
    display: none;
  }
}

/* Phones and small tablets: the stub tears off along the bottom instead. */
@media (max-width: 760px) {
  .offer-strip {
    --stub: 76px;
    --seal: 92px;
    margin-top: 64px;
  }

  .offer-ticket {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto var(--stub);
    -webkit-mask-image:
      radial-gradient(circle var(--notch) at 0 calc(100% - var(--stub)), #0000 98%, #000 100%),
      radial-gradient(circle var(--notch) at 100% calc(100% - var(--stub)), #0000 98%, #000 100%);
    mask-image:
      radial-gradient(circle var(--notch) at 0 calc(100% - var(--stub)), #0000 98%, #000 100%),
      radial-gradient(circle var(--notch) at 100% calc(100% - var(--stub)), #0000 98%, #000 100%);
  }

  .offer-ticket-main {
    padding: 26px 22px 20px;
  }

  .offer-kicker {
    max-width: 60%;
  }

  .offer-stub {
    flex-direction: row;
    justify-content: space-between;
    padding: 0 22px;
    border-left: 0;
    border-top: 2px dashed #0d2e2059;
  }

  .offer-stub .button {
    width: auto;
  }

  .offer-seal {
    right: 16px;
  }
}

@media (max-width: 400px) {
  .offer-amount {
    font-size: 50px;
  }

  .offer-off {
    font-size: 26px;
  }
}

/* Plot cost sheet: one card per plot category, below the offer voucher.
   Dark glass cards on the green section; Premium carries a gold frame. */
.cost-sheet {
  /* Offer block above is hidden, so no gap or divider is needed. */
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Head: Canela title on the left, the note on the right from the middle of
   the container, sitting on the title's last line. */
.cost-sheet-head {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px clamp(18px, 1.6vw, 30px);
  align-items: end;
}

.cost-sheet-head h3 {
  color: #fff;
  font-size: clamp(44px, 4.4vw, 86px);
  line-height: .95;
}

.cost-sheet-head p {
  max-width: 40em;
  padding-bottom: .2em;
  color: #fff;
  font-size: clamp(15px, 1.15vw, 22px);
  line-height: 1.4;
}

.plot-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 1.6vw, 30px);
  margin: clamp(40px, 3.6vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}

.plot-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(28px, 2.4vw, 46px);
  border: 1px solid #c4a05a59;
  background: linear-gradient(170deg, #ffffff0d 0%, #ffffff05 100%);
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}

.plot-card-premium {
  border-color: var(--gold);
  background: linear-gradient(170deg, #c4a05a26 0%, #c4a05a0a 100%);
  box-shadow: 0 0 70px #e0a43a1a;
}

.plot-card-premium::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid #c4a05a40;
  pointer-events: none;
}

.plot-type {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: var(--gold);
  font-size: 13px;
  letter-spacing: .22em;
  line-height: 1.4;
  text-transform: uppercase;
}

.plot-index {
  color: #f8f8f266;
  font-size: 11px;
  letter-spacing: .1em;
}

/* Standard plots carry the inaugural offer rate. */
.plot-offer-tag {
  align-self: center;
  margin-block: -6px;
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--green);
  background: var(--gold);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  white-space: nowrap;
}

.plot-was {
  margin-right: 6px;
  color: #b9bdb2;
  font-size: .85em;
  text-decoration-color: #e0702a;
}

.plot-price {
  margin-top: clamp(26px, 2.2vw, 40px);
  color: #fff;
  font-family: var(--font-family);
  font-size: clamp(42px, 3.4vw, 66px);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1;
}

.plot-price-label {
  display: block;
  margin-bottom: 12px;
  color: #f1ddb0;
  font-family: var(--font-family);
  font-size: 11px;
  letter-spacing: .2em;
  line-height: 1.4;
  text-transform: uppercase;
}

.plot-unit {
  font-size: .5em;
  letter-spacing: 0;
}

.plot-price-full {
  margin-top: 10px;
  color: #d9d8cc;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  display: none;
}

.plot-specs {
  margin: clamp(24px, 2vw, 36px) 0 clamp(28px, 2.4vw, 44px);
}

.plot-specs > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 13px;
  border-top: 1px solid #f8f8f21f;
}

.plot-specs > div:last-child {
  border-bottom: 1px solid #f8f8f21f;
}

.plot-specs dt {
  color: #b9bdb2;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.plot-specs dd {
  margin: 0;
  color: #fff;
  font-size: clamp(15px, 1vw, 18px);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.plot-card .button {
  margin-top: auto;
  width: 100%;
}

.cost-notes-title {
  margin: clamp(28px, 2.4vw, 44px) 0 0;
  color: var(--gold);
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .02em;
}

.cost-notes-title + .cost-notes {
  margin-top: 14px;
}

.cost-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: clamp(28px, 2.4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
  color: #b9bdb2;
  font-size: 13px;
  line-height: 1.55;
}

.cost-notes a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cost-notes li {
  position: relative;
  padding-left: 16px;
}

.cost-notes li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

@media (hover: hover) {
  .plot-card:hover {
    border-color: var(--gold);
    background-color: #ffffff08;
  }
}

@media (max-width: 960px) {
  .cost-sheet-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .cost-sheet-head p br {
    display: none;
  }

  .plot-cards {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
  }
}

@media (max-width: 640px) {
  .cost-sheet {
    margin-top: 0;
    padding-top: 0;
  }

  .cost-sheet-head h3 {
    font-size: 36px;
  }
}

/* About Elaris: heading, then paragraphs set closer together and a touch
   more open. Paragraphs 4-5 sit behind "Read more". */
@media (min-width: 641px) {
  .story h2 {
    white-space: nowrap;
  }
}

.story-grid {
  align-items: center;
}

.read-more {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-top: 1.2em;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid var(--gold);
  color: var(--ink);
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

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

.read-more svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  transition: transform .3s var(--ease);
}

.read-more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.read-more:hover {
  color: #9a7a3c;
}

.story .section-copy > p:not(.eyebrow) + p {
  margin-top: 1em;
}

/* The Enquire button sits the same distance below the text as the first
   paragraph sits below the heading. */
.story .section-copy > .button {
  margin-top: 38px;
}

@media (max-width: 960px) {
  .story .section-copy > .button {
    margin-top: 28px;
  }
}

@media (max-width: 640px) {
  .story .section-copy > .button {
    margin-top: 24px;
  }
}

/* Estates: the copy sits centred against the gallery beside it. The heading
   is trimmed to its capital height so the block centres on its letters, not
   the line box. */
@media (min-width: 961px) {
  .estates-grid {
    align-items: center;
  }

  .estates-grid h2 {
    text-box: trim-start cap alphabetic;
  }
}

@media (min-width: 961px) {
  .story .section-copy > .button {
    margin-top: 2.604167vw;
  }

  .read-more {
    font-size: .729167vw;
  }
}

.footer-bottom a.text-button:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Privacy Policy and Terms & Conditions pages. They share the site's
   styles but no script: links lead back to the main page. */
.legal-hero {
  --contour-size: 90vw auto;
  --contour-position: 30vw -10vw;
  padding-bottom: 64px;
}

.legal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 112px;
  padding-top: 24px;
}

.legal-back {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.legal-back:hover {
  color: var(--gold);
}

.legal-hero-copy {
  padding-top: 40px;
}

.legal-hero h1 {
  color: #fff;
  font-size: clamp(44px, 5.2vw, 88px);
}

.legal-updated {
  margin-top: 20px;
  color: #e5e3d8;
  font-size: 13px;
}

.legal-article {
  color: var(--body);
  font-size: 16px;
  line-height: 1.75;
}

/* A comfortable reading measure, aligned with the page title. */
.legal-article > * {
  max-width: 820px;
}

.legal-article > p,
.legal-article li {
  margin-top: 14px;
}

.legal-article h2 {
  margin-top: 48px;
  color: var(--ink);
  font-size: clamp(26px, 2vw, 34px);
  line-height: 1.15;
}

.legal-article ul {
  margin: 0;
  padding-left: 20px;
}

.legal-article li::marker {
  color: var(--gold);
}

.legal-article strong {
  color: var(--ink);
  font-weight: 600;
}

.legal-article a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

.legal-contact {
  margin-top: 14px;
}

.legal-contact div {
  display: flex;
  gap: 8px;
}

.legal-contact dt {
  color: var(--ink);
  font-weight: 600;
}

.legal-contact dd {
  margin: 0;
}

@media (max-width: 640px) {
  .legal-bar {
    min-height: 84px;
    padding-top: 12px;
  }

  .legal-back {
    font-size: 11px;
  }

  .legal-hero {
    padding-bottom: 44px;
  }

  .legal-hero-copy {
    padding-top: 20px;
  }

  .legal-article {
    font-size: 15px;
  }

  .legal-article h2 {
    margin-top: 36px;
  }
}

.developer-section {
  border-top: 1px solid #e5ded0;
}

.developer-grid {
  display: grid;
  grid-template-columns: 51% 38%;
  gap: 11%;
  align-items: center;
}

.developer-visual {
  min-width: 0;
}

.developer-image {
  aspect-ratio: 950 / 850;
}

.developer-caption {
  position: relative;
  z-index: 1;
  width: 88%;
  margin-top: -60px;
  padding: 25px 30px;
  color: #fff;
  background: var(--green);
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
}

.developer-caption .eyebrow {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
}

.developer-caption > span:last-child {
  font-family: var(--heading-family);
  font-weight: 300;
  font-size: 28px;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.developer-identity {
  padding-block: 24px;
  margin-top: 30px;
  border-top: 1px solid #d8c9ab;
  border-bottom: 1px solid #d8c9ab;
}

.developer-identity-label {
  display: block;
  margin-bottom: 8px;
  color: #69736a;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.developer-identity p {
  color: var(--ink);
  font-family: var(--heading-family);
  font-weight: 300;
  font-size: 30px;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.rera-status {
  margin-top: 24px;
  color: #e5e3d8;
  /* Same size and case as the footer buttons (Download brochure). */
  font-size: 14px;
  letter-spacing: .15em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

.rera-link {
  margin-top: 8px;
  text-align: center;
}

.rera-link a {
  color: #c4a05a;
  font-size: 13px;
  letter-spacing: .05em;
}

.rera-link a:hover,
.rera-link a:focus {
  text-decoration: underline;
}

/* Journal and enquiry */
.journal {
  background: var(--paper);
  border-top: 1px solid #d8c9ab;
  padding-block: 90px 80px;
}

.journal h2 {
  margin-bottom: 40px;
}

.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.journal-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.journal-card .media-frame {
  width: 100%;
  aspect-ratio: 1.82;
  margin-bottom: 27px;
}

.journal-card .eyebrow {
  margin-bottom: 16px;
}

.journal-card h3 {
  color: var(--ink);
  font-size: 35px;
  margin-bottom: 22px;
}

.journal-card>p:not(.eyebrow) {
  font-size: 15px;
  line-height: 1.45;
  margin: 0 0 34px;
}

.text-button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

.journal-card .text-button {
  margin-top: auto;
}

.contact-section {
  --contour-image: url("../assets/images/topographic-gold.webp");
  --contour-size: 32.291667vw auto;
  --contour-position: 0 0;
  /* Anchored to the section's bottom (100% = its height), and set low enough
     that the artwork's cut edge on the right always falls below the section
     and is clipped, however tall the section gets (e.g. with form errors). */
  --contour-transform: translate(27.604167vw, calc(100% - 23.1vw)) rotate(-14.75deg) scaleX(-1);
  --contour-origin: 0 0;
  padding-block: 90px 82px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 44% 49%;
  gap: 7%;
}

.contact-copy {
  padding-left: 5%;
}

.contact-copy h2 {
  font-size: 47px;
}

.contact-copy>p:not(.eyebrow) {
  margin-top: 29px;
  font-size: 14px;
  line-height: 1.5;
}

/* Phone and website, shared by the Enquire section and the footer. */
.contact-details span {
  display: block;
}

/* Contact lines: the labels (Call, WhatsApp, Visit) are gold, and the
   numbers and website are white, with a gold underline on hover. */
.contact-details,
.footer-contact {
  color: var(--gold);
}

.contact-details a,
.footer-contact a {
  color: #fff;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold);
}

.contact-details a:hover,
.footer-contact a:hover {
  text-decoration: underline;
}

.footer-main > .footer-contact {
  margin-top: 10px;
}

.footer-contact .fc-sep {
  margin-inline: 10px;
  color: var(--gold);
}

.faq-answer a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 25px;
}

/* An odd field out (email, after name and phone) takes the full row. */
.form-grid > .field:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.main-form .field>span,
.contact-method legend {
  display: block;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: .21em;
  text-transform: uppercase;
}

.main-form .field input,
.main-form .field select {
  min-height: 30px;
  padding-block: 3px;
}

.contact-method {
  margin-top: 35px;
}

.contact-method legend {
  margin-bottom: 17px;
  padding: 0;
}

.contact-method label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-right: 16px;
  cursor: pointer;
}

input[type="radio"],
input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--gold);
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
}

/* Radios are drawn (a thin ring, then a gold dot when chosen), so they centre
   exactly and match the brand rather than the browser's grey default. */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #f1f0eab3;
  border-radius: 50%;
  background: transparent;
  transition: border-color .2s, background-color .2s;
}

input[type="radio"]:checked {
  border-color: var(--gold);
  background: radial-gradient(circle, var(--gold) 0 38%, transparent 44%);
}

/* Trim each option's text to its capital height, so centring the row lines
   the radio up with the letters rather than with the font's spare space. */
.contact-method label > span {
  line-height: 1;
  text-box: trim-both cap alphabetic;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 30px;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}

.consent input {
  margin-top: 3px;
}

.main-form>.button {
  margin-top: 46px;
}

/* FAQ and footer */
.faq-section {
  padding-block: 92px;
}

.faq-grid {
  display: grid;
  grid-template-columns: 49% 46%;
  gap: 5%;
  align-items: center;
}

.faq-image {
  aspect-ratio: .96;
}

.faq-copy h2 {
  font-size: 48px;
  margin-bottom: 45px;
  white-space: nowrap;
}

.faq-copy .eyebrow {
  margin-bottom: 15px;
}

.faq-list {
  border-top: 1px solid var(--gold-line);
}

.faq-list details {
  border-bottom: 1px solid var(--gold-line);
}

.faq-list summary {
  position: relative;
  list-style: none;
  padding: 23px 30px 23px 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::before,
.faq-list summary::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 50%;
  width: 10px;
  height: 1px;
  background: var(--gold);
}

.faq-list summary::after {
  transform: rotate(90deg);
  transition: transform .25s;
}

.faq-list details[open] summary::after {
  transform: rotate(0);
}

.faq-list details[open] summary {
  padding-bottom: 5px;
}

.faq-answer {
  padding: 0 30px 22px 0;
  font-size: 13px;
  line-height: 1.6;
  animation: answer-in .35s var(--ease);
}

.faq-copy>.button {
  margin-top: 29px;
}

.site-footer {
  --contour-size: 140vw auto;
  --contour-position: 50% 53%;
  padding: 58px 0 25px;
}

.footer-main {
  text-align: center;
  padding-bottom: 65px;
}

.footer-brand {
  display: block;
  width: 236px;
  margin: 0 auto 22px;
}

.footer-main>p {
  font-size: 14px;
}

.footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 17px;
  row-gap: 12px;
}

.footer-nav a {
  font-weight: 300;
  position: relative;
  font-size: 14px;
  line-height: 1;
  padding-inline: 18px;
  border-right: 1px solid #b9c0b8;
}

.footer-nav a:last-child {
  border-right: 0;
}

.footer-nav a::after {
  bottom: -6px;
  inset-inline: 18px;
}

.footer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 23px;
  margin-top: 35px;
}

.footer-actions .button {
  min-width: 188px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-top: 1px solid #c4a05a55;
  padding-top: 33px;
  font-size: 13px;
}

.footer-bottom>div {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-bottom .text-button {
  color: #f3f4ec;
  font-size: 13px;
}

.floating-contact {
  position: fixed;
  right: 18px;
  bottom: 28px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.floating-contact > * {
  width: 43px;
  height: 43px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 12px #0002;
  transition: transform .3s var(--ease);
}

@media (hover: hover) {
  .floating-contact > a:hover {
    transform: translateY(-2px);
  }
}

.floating-contact img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.floating-contact svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.whatsapp-button {
  background: none;
}

.call-button {
  background: none;
}

/* Shared enquiry dialog */
/* Compact enough to fit typical laptop and phone screens without scrolling;
   scrolling remains only as a fallback for very short windows. */
.enquiry-dialog {
  width: 590px;
  max-width: calc(100% - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 38px 44px 40px;
  border: 1px solid var(--gold);
  color: #fff;
  background: var(--green-deep);
  scrollbar-width: thin;
  scrollbar-color: #c4a05a80 transparent;
}

.enquiry-dialog[open] {
  animation: dialog-in .4s var(--ease) both;
}

.enquiry-dialog::backdrop {
  background: #071a13b3;
  backdrop-filter: blur(5px);
}

.enquiry-dialog h2 {
  color: #fff;
  font-size: 40px;
}

.enquiry-dialog .eyebrow {
  margin-bottom: 14px;
}

.dialog-intro {
  margin: 12px 0 26px;
  font-size: 14px;
}

.dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: #fff;
}

.dialog-close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
}

.enquiry-dialog .main-form .field>span {
  font-size: 10px;
}

.enquiry-dialog .form-grid {
  gap: 30px 20px;
}

.enquiry-dialog .contact-method {
  margin-top: 24px;
}

.enquiry-dialog .contact-method legend {
  margin-bottom: 12px;
}

.enquiry-dialog .consent {
  margin-top: 22px;
}

.enquiry-dialog .main-form>.button {
  margin-top: 28px;
}

/* Film popup. Sized to the video's 16:9 frame within the viewport; the
   backdrop is a flat tint (no blur) so playback composites cheaply. */
.film-play:not(:disabled) {
  cursor: pointer;
}

.play-circle {
  transition: transform .5s var(--ease), background .4s;
}

@media (hover: hover) {
  .film-play:not(:disabled):hover .play-circle {
    transform: scale(1.06);
    background: #ffffff1f;
  }
}

/* Master plan lightbox, opened after a master-plan enquiry is sent: only the
   image, as large as the screen allows, with a close button on its top-right
   corner. Clicking anywhere off the image closes it (js/main.js). */
.plan-dialog {
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
}

.plan-dialog[open] {
  animation: dialog-in .4s var(--ease) both;
}

.plan-dialog::backdrop {
  background: #050f0be6;
}

.plan-dialog[open]::backdrop {
  animation: fade-in .4s ease;
}

/* Fits the viewport at the image's own 1600 × 1977 proportions, so the space
   is held before the image has loaded. */
.plan-dialog img {
  display: block;
  width: min(calc(100vw - 32px), calc((100dvh - 32px) * var(--ratio, .8093)));
  height: auto;
  aspect-ratio: var(--ratio, .8093);
  background: var(--plan-bg, #0d2e20);
}

.plan-close {
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #050f0bb3;
  transition: background .3s;
}

.plan-close:hover {
  background: #050f0be6;
}

.video-dialog {
  width: min(1280px, calc(100vw - 32px), calc((100dvh - 120px) * 16 / 9));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  overflow: visible;
  background: #000;
}

.video-dialog[open] {
  animation: dialog-in .4s var(--ease) both;
}

.video-dialog::backdrop {
  background: #050f0be6;
}

.video-dialog[open]::backdrop {
  animation: fade-in .4s ease;
}

.video-close {
  top: auto;
  bottom: calc(100% + 6px);
  right: -8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}

/* Vertical gallery videos: sized to the viewport's height instead. */
.video-dialog.is-portrait {
  width: min(calc(100vw - 32px), calc((100dvh - 120px) * 9 / 16));
}

.video-dialog.is-portrait .video-frame {
  aspect-ratio: 9 / 16;
}

.video-player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Shown only if loading takes a moment, so quick starts never flash. */
.video-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 1px solid #ffffff40;
  border-top-color: var(--gold);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.video-frame.is-loading .video-loader {
  opacity: 1;
  transition-delay: .3s;
  animation: spin 1s linear infinite;
}

.video-message {
  position: absolute;
  inset: auto 0 50%;
  translate: 0 50%;
  padding: 0 24px;
  color: #f1ddb0;
  font-size: 14px;
  text-align: center;
  pointer-events: none;
}

.video-message:empty {
  display: none;
}

.modal-open .play-circle::after {
  animation-play-state: paused;
}

@keyframes spin {
  to {
    rotate: 1turn;
  }
}

/* Motion progressively enhances the page; all content is visible without JS.
   Entrances animate only opacity, translate and scale so they stay on the
   compositor, and use `backwards` fill so nothing is held once they finish.
   Hover effects use `transform`, which never collides with these. */
.motion-ready .reveal:not(.is-visible),
.motion-ready .reveal-cascade:not(.is-visible) .reveal-item {
  opacity: 0;
}

/* Cascades stay put and reveal their children in sequence instead. */
.motion-ready .reveal-cascade:not(.is-visible) {
  opacity: 1;
}

.motion-ready .reveal.is-visible:not(.reveal-cascade),
.motion-ready .reveal-cascade.is-visible .reveal-item {
  animation: reveal-up .9s var(--ease) var(--reveal-delay, 0ms) backwards;
}

.motion-ready .reveal.is-visible .media-frame > img,
.motion-ready .media-frame.reveal.is-visible > img {
  animation: media-settle 1.6s var(--ease) var(--reveal-delay, 0ms) backwards;
}

/* Gold rules draw in from the left once their block is revealed. */
.motion-ready .statistics {
  position: relative;
  border-bottom-color: transparent;
}

.motion-ready .statistics::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--gold);
  transform-origin: left;
}

.motion-ready .reveal-cascade.is-visible .statistics::after {
  animation: line-draw 1.3s var(--ease) calc(var(--reveal-delay, 0ms) + 250ms) backwards;
}

/* Brand film play button: a slow ring, only while the film is on screen. */
.play-circle {
  position: relative;
}

.play-circle::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid #fff;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.film-section.is-active .play-circle::after {
  animation: play-ring 3.2s var(--ease) infinite;
}

/* Parallax layers (desktop only, positioned from js/main.js). */
.parallax-ready .hero-image,
.parallax-ready .film-section > img {
  will-change: translate;
}

.parallax-ready .film-section > img {
  scale: 1.1;
}

@media (hover: hover) {
  .investment-card:hover .icon,
  .feature-card:hover {
    transform: translateY(-4px);
  }

  .journal-card:hover .media-frame img {
    transform: scale(1.035);
  }
}

.site-header {
  animation: fade-down .9s var(--ease) backwards;
}

.mobile-nav:not([hidden]) {
  animation: fade-down .35s var(--ease);
}

.hero-image {
  animation: hero-settle 2.8s var(--ease) backwards;
}

.hero h1 {
  animation: hero-in 1.15s var(--ease) .15s backwards;
}

.hero-actions {
  animation: hero-in 1.15s var(--ease) .3s backwards;
}

.hero-form-panel {
  animation: hero-in 1.15s var(--ease) .45s backwards;
}

.brochure-tab {
  animation: slide-in-right .8s var(--ease) 1s backwards;
}

.floating-contact {
  animation: slide-in-right .8s var(--ease) 1.15s backwards;
}

.enquiry-dialog[open]::backdrop {
  animation: fade-in .4s ease;
}

/* Smooth FAQ height where ::details-content and keyword interpolation are
   supported; elsewhere the answer simply fades in. */
@supports selector(::details-content) {
  .faq-list details {
    interpolate-size: allow-keywords;
  }

  .faq-list details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .45s var(--ease), content-visibility .45s allow-discrete;
  }

  .faq-list details[open]::details-content {
    block-size: auto;
  }

  .faq-list summary {
    transition: padding-bottom .45s var(--ease);
  }
}

@keyframes reveal-up {
  from {
    opacity: 0;
    translate: 0 var(--reveal-distance, 28px);
  }
}

@keyframes media-settle {
  from {
    scale: 1.08;
  }
}

@keyframes line-draw {
  from {
    scale: 0 1;
  }
}

@keyframes play-ring {
  0% {
    opacity: .5;
    scale: 1;
  }

  70%,
  100% {
    opacity: 0;
    scale: 1.3;
  }
}

@keyframes hero-settle {
  from {
    opacity: 0;
  }
}

@keyframes hero-in {
  from {
    opacity: 0;
    translate: 0 24px;
  }
}

@keyframes fade-down {
  from {
    opacity: 0;
    translate: 0 -12px;
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    translate: 100% 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes answer-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

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

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

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

/* Tablet and mobile layout. These rules replace the earlier overlapping
   1200/960/640/360 breakpoint stack. Desktop geometry is defined below. */
@media (max-width: 960px) {
  .container, .header-inner { width: calc(100% - 48px); }
  .section { padding-block: 64px; }
  h2 { font-size: 52px; line-height: 1.02; }
  .section-copy > p:not(.eyebrow) { max-width: 650px; margin-top: 28px; font-size: 15px; line-height: 1.65; }
  .section-copy > .button { margin-top: 30px; }
  .split, .story-grid, .estates-grid, .discover-grid, .layout-grid,
  .location-grid, .faq-grid, .developer-grid, .contact-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .container > *, .investment-grid > *, .feature-grid > *,
  .journal-grid > *, .form-grid > *, .statistics > * { min-width: 0; }
  .investment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .section-copy, .investment-card, .feature-card, .journal-card { overflow-wrap: break-word; }

  .header-inner { min-height: 96px; gap: 12px; }
  .brand { width: 195px; margin-right: auto; }
  .desktop-nav { display: none; }
  .header-enquire { width: 148px; min-height: 44px; padding: 12px 20px; font-size: 11px; }
  .menu-toggle { display: flex; flex: 0 0 44px; flex-direction: column; justify-content: center; gap: 7px; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; color: #fff; }
  .menu-toggle span { width: 24px; height: 1px; background: currentColor; transition: transform .3s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .site-header.menu-open { background: var(--green-deep); }
  .mobile-nav { display: flex; flex-direction: column; gap: 8px; max-height: calc(100svh - 96px); overflow-y: auto; padding: 12px 24px 28px; background: var(--green-deep); box-shadow: 0 15px 20px #0002; }
  .mobile-nav a { display: flex; align-items: center; min-height: 44px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
  .mobile-nav .button { align-self: flex-start; margin-top: 10px; }

  /* Mobile hero: the photo fills the first screen like on desktop, with the
     headline and both buttons resting on a soft fade at its foot. The form
     follows below in the same see-through, gold-edged panel as desktop. */
  .hero { --hero-screen: clamp(560px, 100vh, 1000px); height: auto; min-height: 0; max-height: none; background: var(--green-deep); }
  @supports (height: 100svh) { .hero { --hero-screen: clamp(560px, 100svh, 1000px); } }
  /* The photo is a little shorter than the first screen, so the wide image
     isn't zoomed in too far, and its foot dissolves into the green. The fade
     on top runs on past the first screen and finishes behind the top of the
     form, so the buttons don't sit on a hard green edge. */
  .hero-image { height: calc(var(--hero-screen) - 80px); object-position: 50% center; transform: none; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
  .hero-shade { height: calc(var(--hero-screen) + 170px); }
  .hero-shade { background: linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, 0) 17%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .5) 62%, rgba(0, 0, 0, .6) 78%, rgba(13, 46, 32, .9) 92%, var(--green-deep) 100%); }
  .hero-inner { display: block; height: auto; min-height: 0; padding-top: 0; padding-bottom: 56px; }
  .hero-copy { display: flex; flex-direction: column; justify-content: flex-end; max-width: 640px; min-height: var(--hero-screen); padding-bottom: 36px; }
  .hero h1 { font-size: 60px; line-height: 1; }
  .hero-actions { gap: 14px; margin-top: 28px; }
  .hero-actions .button { min-height: 46px; min-width: 185px; font-size: 14px; }
  .hero-form-panel { width: 100%; max-width: 640px; min-height: 0; margin: 28px auto 0; padding: 32px; background: rgba(0, 0, 0, .22); }
  .hero-form-panel h2 { font-size: 26px; margin-bottom: 24px; }
  .hero-form .field { font-size: 16px; }
  .hero-form .field input, .hero-form .field select { min-height: 46px; font-size: 16px; }
  .hero-form .button { width: 148px; min-height: 44px; margin-top: 36px; padding: 12px 20px; font-size: 11px; }
  .brochure-tab { gap: 8px; padding: 18px 0; font-size: 10px; letter-spacing: .16em; }
  .brochure-icon { width: 11px; height: 11px; }

  .story .section-copy { padding-right: 0; }
  .story .button { min-width: 160px; font-size: 14px; }
  .story-image { aspect-ratio: 1.3; }
  .investment h2 { font-size: 48px; }
  .section-heading { margin-bottom: 36px; }
  .investment-card { padding: 28px; }
  .investment-card h3 { font-size: 30px; margin-bottom: 18px; line-height: 1.1; }
  .investment-card p { font-size: 14px; line-height: 1.6; }
  .estates-grid h2 { font-size: 52px; }
  .plus-list { margin-top: 26px; }
  .plus-list li { font-size: 15px; margin-top: 20px; }
  .gallery-toolbar { justify-content: space-between; flex-wrap: wrap; gap: 16px; min-height: 44px; margin-bottom: 24px; }
  .gallery-tabs { gap: 12px; }
  .gallery-tab { min-width: 100px; min-height: 40px; padding: 10px 18px; font-size: 12px; }
  .gallery-arrows { gap: 6px; }
  .gallery-arrows button { width: 40px; height: 44px; }
  .gallery-viewport { width: 100%; }
  .gallery-track { gap: 18px; }
  .gallery-slide { width: 82%; flex-basis: 82%; aspect-ratio: 1.1; }
  .estates > .container + .container { margin-top: 64px; }
  .feature-card { min-height: 160px; padding: 26px 20px; }
  .feature-card .icon { width: 44px; height: 44px; margin-bottom: 20px; }
  .feature-card p { font-size: 14px; line-height: 1.4; }
  .layout-section h2 { font-size: 52px; }
  .master-plan { aspect-ratio: 1.4; }
  .master-plan > .button { max-width: calc(100% - 32px); padding: 12px 20px; font-size: 14px; }
  .film-section { height: 420px; min-height: 0; }
  .film-play { max-width: calc(100% - 48px); justify-content: center; gap: 22px; font-size: 18px; }
  .play-circle { flex: 0 0 96px; width: 96px; height: 96px; }
  .play-circle svg { width: 44px; height: 44px; }
  .paradise-content { width: 100%; }
  .paradise h2 { font-size: 52px; }
  .statistics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 600px; }
  .stat-number { font-size: 104px; white-space: nowrap; }
  .stat-label { font-size: 12px; line-height: 1.4; }
  .amenity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; max-width: 650px; }
  .amenity-grid li { font-size: 15px; gap: 14px; }
  .amenity-grid .icon { width: 38px; height: 38px; }
  .location-art { width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 1; }
  .location h2 { font-size: 52px; }
  .location .section-copy > p.location-description { margin-top: 30px; font-size: 18px; }
  .location-description br, .developer-copy h2 br, .contact-copy > p:not(.eyebrow) br { display: none; }
  .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  .journal-card h3 { font-size: 30px; }
  .journal-card h3 br { display: none; }
  .journal-card > p:not(.eyebrow) { font-size: 14px; }
  .journal-card .text-button { min-height: 36px; font-size: 14px; }
  .contact-copy { padding-left: 0; }
  .contact-copy h2 { font-size: 48px; }
  .contact-copy > p:not(.eyebrow) { font-size: 15px; }
  .main-form .field > span, .contact-method legend { font-size: 12px; }
  .main-form .field input, .main-form .field select { min-height: 44px; font-size: 16px; }
  .contact-method label { font-size: 12px; }
  .consent { font-size: 14px; }
  .faq-image { max-width: 650px; aspect-ratio: 1.2; }
  .faq-copy h2 { white-space: normal; font-size: 48px; margin-bottom: 30px; }
  .faq-list summary { min-height: 54px; font-size: 14px; padding-block: 20px; }
  .faq-answer { font-size: 14px; }
  .developer-image { aspect-ratio: 1.3; }
  .footer-nav a { padding-inline: 12px; font-size: 13px; }
  .footer-main > p { font-size: 14px; }

  /* Shorter reveal travel on small screens. */
  .motion-ready { --reveal-distance: 16px; }
}

@media (max-width: 640px) {
  .container { width: calc(100% - 48px); }
  .header-inner { width: calc(100% - 40px); min-height: 84px; gap: 8px; }
  .brand { width: 160px; max-width: calc(100% - 60px); flex-shrink: 1; }
  /* Phones: Enquire lives in the menu only. */
  .header-enquire { display: none; }
  .menu-toggle { flex-basis: 44px; }
  .mobile-nav { max-height: calc(100svh - 84px); padding-inline: 20px; }
  .mobile-nav a { font-size: 13px; }
  .section { padding-block: 48px; }
  h2 { font-size: 40px; line-height: 1.04; }
  .eyebrow { margin-bottom: 20px; font-size: 11px; letter-spacing: .14em; }
  .button { min-height: 44px; padding: 12px 20px; font-size: 13px; }
  .section-copy > p:not(.eyebrow) { max-width: none; margin-top: 24px; font-size: 15px; line-height: 1.65; }
  .section-copy > .button { margin-top: 26px; }
  .split, .story-grid, .estates-grid, .discover-grid, .layout-grid,
  .location-grid, .faq-grid, .developer-grid, .contact-grid { gap: 30px; }

  .hero-inner { padding-bottom: 40px; }
  .hero h1 { max-width: 340px; font-size: 48px; line-height: .98; }
  .hero-actions { flex-wrap: nowrap; margin-top: 26px; gap: 10px; }
  .hero-actions .button { flex: 1 1 0; min-width: 0; min-height: 48px; padding-inline: 10px; font-size: 11px; letter-spacing: .6px; white-space: nowrap; }
  .hero-form-panel { padding: 26px 24px 28px; }
  .hero-form-panel h2 { margin-bottom: 20px; font-size: 24px; }
  .hero-form .button { width: 100%; margin-top: 36px; font-size: 13px; }
  .hero-form .field input, .hero-form .field select { min-height: 44px; }
  .investment { --contour-size: 230vw auto; --contour-position: -40vw 0; }
  .paradise { --contour-size: 150vw auto; --contour-position: 30vw 30vw; --contour-opacity: .2; }
  .contact-section { --contour-size: 120vw auto; --contour-position: -45vw bottom; --contour-opacity: .12; --contour-transform: none; }
  .site-footer { --contour-size: 330vw auto; --contour-position: 48% 42%; }

  .story .button { min-width: 150px; font-size: 13px; }
  .story-image { aspect-ratio: 1.15; }
  .investment h2 { font-size: 38px; }
  .investment-card { padding: 24px 20px; }
  .investment-card h3 { font-size: 26px; line-height: 1.12; margin-bottom: 16px; }
  .investment-card h3 br { display: none; }
  .investment-card p { font-size: 14px; }
  .investment-card .icon { width: 40px; height: 40px; margin-bottom: 18px; }
  .estates-grid h2 { font-size: 42px; }
  .plus-list li { padding-left: 24px; font-size: 14px; margin-top: 18px; }
  .gallery-toolbar { gap: 10px; }
  .gallery-tabs { gap: 8px; }
  .gallery-tab { min-width: 82px; min-height: 40px; padding-inline: 12px; font-size: 11px; }
  .gallery-arrows { gap: 0; }
  .gallery-arrows button { width: 36px; height: 44px; }
  .gallery-track { gap: 14px; }
  .gallery-slide { width: 88%; flex-basis: 88%; aspect-ratio: .95; }
  .estates > .container + .container { margin-top: 48px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .feature-card { min-height: 148px; padding: 22px 16px; }
  .feature-card .icon { width: 40px; height: 40px; margin-bottom: 18px; }
  .feature-card p { font-size: 13px; line-height: 1.4; }
  .layout-section h2 { font-size: 40px; }
  .layout-section .section-copy > p:not(.eyebrow) { margin-top: 24px; }
  .master-plan { aspect-ratio: 1.2; }
  .master-plan > .button { font-size: 12px; padding-inline: 16px; }
  .film-section { height: 300px; }
  .film-play { width: calc(100% - 48px); max-width: none; padding: 0; gap: 16px; font-size: 13px; letter-spacing: .1em; line-height: 1.4; }
  .film-play > span:last-child { min-width: 0; }
  .play-circle { flex-basis: 64px; width: 64px; height: 64px; }
  .play-circle svg { width: 32px; height: 32px; }
  .paradise h2 { font-size: 40px; }
  .statistics { gap: 22px; margin-top: 28px; padding-bottom: 22px; }
  .stat-number { font-size: 17vw; }
  .stat-label { font-size: 10px; line-height: 1.4; }
  .amenity-grid { gap: 18px 16px; margin-block: 24px 28px; }
  .amenity-grid li { align-items: flex-start; font-size: 13px; line-height: 1.45; gap: 10px; }
  .amenity-grid .icon { width: 26px; height: 30px; }
  .location-art { max-width: 420px; aspect-ratio: .95; }
  .location h2 { font-size: 40px; }
  .location .section-copy > p.location-name { margin-top: 24px; font-size: 18px; }
  .location .section-copy > p.location-route { margin-top: 18px; }
  .location .section-copy > p.location-description { margin-top: 26px; font-size: 16px; }
  .developer-image { aspect-ratio: 1; }
  .developer-caption { width: 92%; margin-top: -36px; padding: 20px; }
  .developer-caption > span:last-child { font-size: 26px; }
  .developer-copy h2 { font-size: 40px; }
  .developer-identity { padding-block: 22px; margin-top: 26px; }
  .developer-identity p { font-size: 28px; }
  .journal h2 { margin-bottom: 28px; }
  .journal-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .journal-card .media-frame { margin-bottom: 20px; }
  .journal-card .eyebrow { margin-bottom: 12px; }
  .journal-card h3 { margin-bottom: 16px; font-size: 30px; line-height: 1.12; }
  .journal-card > p:not(.eyebrow) { margin-bottom: 16px; font-size: 15px; line-height: 1.6; }
  .contact-copy h2 { font-size: 38px; }
  .contact-copy > p:not(.eyebrow) { margin-top: 22px; font-size: 15px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .main-form .field > span, .contact-method legend { font-size: 11px; letter-spacing: .12em; }
  .contact-method { margin-top: 28px; }
  .contact-method legend { margin-bottom: 12px; }
  .contact-method label { min-height: 32px; gap: 8px; margin: 0 14px 10px 0; font-size: 12px; letter-spacing: .035em; }
  .contact-method label:last-child { margin-right: 0; }
  .consent { gap: 12px; margin-top: 18px; font-size: 13px; line-height: 1.6; }
  input[type="radio"], input[type="checkbox"] { width: 16px; height: 16px; }
  .main-form > .button { width: 100%; margin-top: 36px; }
  .faq-image { aspect-ratio: 1.05; }
  .faq-copy h2 { font-size: 38px; }
  .faq-list summary { font-size: 13px; line-height: 1.5; padding-right: 26px; }
  .faq-answer { padding-right: 20px; font-size: 14px; }
  .site-footer { padding-block: 40px 32px; }
  .footer-main { padding-bottom: 30px; }
  .footer-brand { width: 180px; margin-bottom: 24px; }
  .footer-main > p { max-width: 310px; margin-inline: auto; font-size: 13px; line-height: 1.6; }
  .footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-top: 24px; }
  .footer-nav a { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 0; border: 0; font-size: 13px; line-height: 1.4; }
  .footer-actions { gap: 12px; margin-top: 26px; }
  .footer-actions .button { min-width: 0; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 24px; font-size: 12px; }
  .footer-bottom > div { flex-wrap: wrap; gap: 12px; }
  .footer-bottom .text-button { font-size: 12px; }
  .rera-status { margin-top: 24px; font-size: 13px; }
  .floating-contact { right: 8px; bottom: 16px; gap: 10px; }
  .brochure-tab { width: 26px; border-radius: 0 10px 10px 0; }
  .floating-contact > * { width: 36px; height: 36px; }
  .floating-contact img { width: 100%; height: 100%; }
  .enquiry-dialog { max-height: calc(100dvh - 24px); padding: 24px 20px 22px; }
  .enquiry-dialog h2 { font-size: 30px; }
  .enquiry-dialog .eyebrow { margin-bottom: 10px; font-size: 10px; }
  .enquiry-dialog .dialog-intro { margin: 10px 0 16px; }
  .enquiry-dialog .form-grid { gap: 22px; }
  .enquiry-dialog .contact-method { margin-top: 20px; }
  .enquiry-dialog .contact-method legend { margin-bottom: 8px; }
  .enquiry-dialog .contact-method label { margin-bottom: 4px; font-size: 12px; }
  .enquiry-dialog .consent { margin-top: 16px; font-size: 12px; line-height: 1.5; }
  .enquiry-dialog .main-form > .button { margin-top: 26px; }
}

@media (max-width: 480px) {
  .investment-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .investment-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px 16px; padding: 24px 20px; }
  .investment-card .icon { grid-column: 1; grid-row: 1 / 3; margin: 0; }
  .investment-card h3 { grid-column: 2; margin: 0; font-size: 27px; }
  .investment-card p { grid-column: 2; }
  .footer-actions { flex-direction: column; }
  .footer-actions .button { width: 100%; }
}

@media (max-width: 340px) {
  .hero-actions { flex-direction: column; }
  .hero-actions .button { flex: none; width: 100%; }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 43px; }
  .hero-actions .button { padding-inline: 8px; font-size: 11px; letter-spacing: .3px; }
  .hero-form-panel { padding: 22px 20px; }
  .feature-card { padding-inline: 12px; }
  .investment-card { padding-inline: 18px; }
  .investment-card h3 { font-size: 25px; }
  .gallery-tab { min-width: 72px; }
}

/* Measured desktop layout: every vw dimension below is based on the
   1920 × 12227 reference. This also keeps proportions consistent when a
   screenshot is taken at a different CSS viewport or device pixel ratio.
   Minimum heights let expanded FAQs and form messages grow without clipping. */
@media (min-width: 961px) {
  .section.developer-section {
    padding-block: 6.25vw;
  }

  .developer-identity-label {
    font-size: .78125vw;
  }

  .developer-caption {
    margin-top: -4.166667vw;
    padding: 1.822917vw 2.083333vw;
  }

  .developer-caption .eyebrow {
    margin-bottom: .520833vw;
    font-size: .78125vw;
  }

  .developer-caption > span:last-child {
    font-size: 2.083333vw;
  }

  .developer-identity {
    padding-block: 1.875vw;
    margin-top: 2.604167vw;
  }

  .developer-identity-label {
    margin-bottom: .625vw;
  }

  .developer-identity p {
    font-size: 2.083333vw;
  }

  .rera-status {
    margin-top: 1.25vw;
    font-size: 1.041667vw;
  }

  body {
    font-size: 1.041667vw;
  }

  .container,
  .header-inner {
    width: 86%;
    max-width: none;
  }

  h2 {
    font-size: 5.208333vw;
  }

  .section {
    padding-block: 5.208333vw;
  }

  .eyebrow {
    font-size: .9375vw;
    margin-bottom: 1.666667vw;
  }

  .section-copy>p:not(.eyebrow) {
    max-width: 29.947917vw;
    margin-top: 2.291667vw;
    font-size: 1.041667vw;
    line-height: 1.45;
  }

  .section-copy>.button {
    margin-top: 3.958333vw;
  }

  .button {
    min-height: 3.229167vw;
    padding: .78125vw 1.979167vw;
    font-size: 1.041667vw;
  }

  .icon {
    width: 3.125vw;
    height: 3.125vw;
  }

  .header-inner {
    min-height: 9.895833vw;
    gap: 1.25vw;
  }

  .brand {
    width: 20.833333vw;
  }

  .desktop-nav {
    margin-inline: 1.302083vw;
    gap: 1.666667vw;
  }

  .desktop-nav a {
    font-size: 1.041667vw;
    letter-spacing: .15em;
  }

  .header-enquire {
    width: auto;
    min-width: 9.166667vw;
    white-space: nowrap;
    min-height: 2.1875vw;
    padding: .520833vw 1.5625vw;
    font-size: .9375vw;
  }

  /* The photo is exactly 2:1, so a 50vw-tall hero shows all of it, uncropped. */
  .hero {
    height: 50vw;
    min-height: 0;
    max-height: none;
  }

  .hero-inner {
    position: relative;
    display: block;
    padding: 0;
    min-height: 0;
  }

  .hero-copy {
    position: absolute;
    left: 0;
    top: 19.010417vw;
  }

  .hero h1 {
    font-size: 5.208333vw;
    line-height: .9;
  }

  .hero-actions {
    margin-top: 4.114583vw;
    gap: 1.5625vw;
  }

  .hero-actions .button {
    min-width: 13.072917vw;
    font-size: 1.041667vw;
  }

  .hero-form-panel {
    position: absolute;
    right: 0;
    top: 10.9375vw;
    width: 24.84375vw;
    min-height: 30.3125vw;
    padding: 2.604167vw 2.760417vw;
  }

  .hero-form-panel h2 {
    font-size: 1.666667vw;
    margin-bottom: 1.770833vw;
  }

  .hero-form .field {
    margin-top: 0;
    margin-bottom: 1.145833vw;
    font-size: .833333vw;
  }

  .hero-form .form-status {
    font-size: max(11px, .729167vw);
    line-height: 1.4;
  }

  .hero-form .form-status:not(:empty) {
    margin-top: .9375vw;
  }

  .hero-form .contact-method {
    margin-top: .15vw;
  }

  .hero-form .contact-method legend {
    margin-bottom: .625vw;
    font-size: .833333vw;
  }

  .hero-form .contact-method label {
    gap: .46875vw;
    margin-right: .9375vw;
    font-size: .78125vw;
  }

  .hero-form .consent {
    gap: .625vw;
    margin-top: 1.25vw;
    font-size: .703125vw;
  }

  .field-error {
    font-size: max(11px, .729167vw);
  }

  .hero-form .field input,
  .hero-form .field select {
    min-height: 2.604167vw;
    padding-block: .520833vw;
  }

  .hero-form .button {
    margin-top: 2.083333vw;
    width: auto;
    white-space: nowrap;
    min-width: 9.166667vw;
    min-height: 2.1875vw;
    padding: .520833vw 1.5625vw;
    font-size: .9375vw;
  }

  .brochure-tab {
    gap: .729167vw;
    padding: 1.5vw 0;
    font-size: .78125vw;
  }

  .brochure-icon {
    width: .885417vw;
    height: .885417vw;
  }

  .story {
    min-height: 48.333333vw;
    padding-block: 4.947917vw 5.104167vw;
  }

  .story-grid {
    grid-template-columns: 37% 57.5%;
    gap: 5.5%;
  }

  .story-image {
    aspect-ratio: 951 / 735;
  }

  .story .section-copy {
    padding-right: .78125vw;
  }

  .story .section-copy>p:not(.eyebrow) {
    max-width: 29.947917vw;
    margin-top: 2.604167vw;
  }

  .story .button {
    min-width: 13.072917vw;
    font-size: 1.25vw;
    margin-top: 4.114583vw;
  }

  .investment {
    min-height: 50.104167vw;
    padding-block: 9.479167vw 9.947917vw;
  }

  .investment h2 {
    font-size: 5.208333vw;
  }

  .investment .eyebrow {
    margin-bottom: 1.458333vw;
  }

  .investment .section-heading {
    margin-bottom: 3.333333vw;
  }

  .investment-grid {
    gap: 1.458333vw;
  }

  .investment-card {
    min-height: 19.166667vw;
    padding: 2.083333vw 2.135417vw;
  }

  .investment-card .icon {
    margin-bottom: 1.25vw;
  }

  .investment-card h3 {
    font-size: 2.291667vw;
    margin-bottom: 1.458333vw;
  }

  .investment-card p {
    font-size: 1.041667vw;
    line-height: 1.5;
  }

  .estates {
    min-height: 90.78125vw;
    padding-block: 7.5vw 8.28125vw;
  }

  .estates-grid {
    grid-template-columns: 32.3% 64.7%;
    gap: 3%;
  }

  .estates-grid h2 {
    font-size: 5vw;
  }

  .estates-grid .section-copy>p:not(.eyebrow) {
    margin-top: 2.604167vw;
    max-width: 28.125vw;
  }

  .plus-list {
    margin-top: 2.083333vw;
  }

  .plus-list li {
    margin-top: 2.083333vw;
    padding-left: 1.770833vw;
    font-size: 1.041667vw;
    line-height: 1.5;
  }

  .gallery-toolbar {
    height: 2.291667vw;
    min-height: 0;
    margin-bottom: 4.0625vw;
    gap: 8.333333vw;
  }

  .gallery-tabs {
    gap: 1.09375vw;
  }

  .gallery-tab {
    min-width: 9.739583vw;
    padding: .572917vw 1.5625vw;
    font-size: 1.041667vw;
  }

  .gallery-arrows {
    gap: .78125vw;
  }

  .gallery-arrows button {
    width: 2.083333vw;
    height: 2.291667vw;
  }

  .gallery-arrows svg {
    width: 2.083333vw;
  }

  .gallery-viewport {
    width: calc(100% + 7vw);
  }

  .gallery-track {
    gap: 2.03125vw;
  }

  .gallery-slide {
    width: 38.333333vw;
    flex-basis: 38.333333vw;
    aspect-ratio: 736 / 732;
  }

  .estates > .container + .container {
    margin-top: 6.40625vw;
  }

  .discover-grid {
    grid-template-columns: 46% 49%;
    gap: 5%;
  }

  .discover-grid .section-copy>p:not(.eyebrow) {
    max-width: 31.25vw;
  }

  .feature-grid {
    gap: 1.510417vw;
  }

  .feature-card {
    min-height: 11.302083vw;
    padding: 2.083333vw 1.979167vw 1.458333vw;
  }

  .feature-card .icon {
    width: 3.541667vw;
    height: 3.541667vw;
    margin-bottom: 1.354167vw;
  }

  .feature-card p {
    font-size: 1.041667vw;
    line-height: 1.25;
  }

  .layout-section {
    min-height: 50.104167vw;
    padding-block: 4.583333vw 6.666667vw;
  }

  .layout-grid {
    grid-template-columns: 37% 57.5%;
    gap: 5.5%;
  }

  .layout-section h2 {
    font-size: 5.208333vw;
  }

  .layout-section .section-copy>p:not(.eyebrow) {
    margin-top: 2.916667vw;
  }

  .master-plan {
    aspect-ratio: 952 / 746;
  }

  .master-plan>.button {
    bottom: 10%;
    font-size: 1.25vw;
    padding-inline: 1.5625vw;
  }

  .film-section {
    height: 50.052083vw;
    min-height: 0;
    max-height: none;
  }

  .film-play {
    gap: 1.927083vw;
    font-size: 1.5625vw;
  }

  .play-circle {
    width: 9.114583vw;
    height: 9.114583vw;
  }

  .play-circle svg {
    width: 3.90625vw;
    height: 3.90625vw;
  }

  .paradise {
    min-height: 50.104167vw;
    padding-block: 3.645833vw 4.6875vw;
  }

  .paradise-content {
    width: 55%;
  }

  .paradise .eyebrow {
    font-size: .78125vw;
    margin-bottom: 1.302083vw;
  }

  .paradise h2 {
    font-size: 5.208333vw;
  }

  .statistics {
    gap: 7.8125vw;
    margin-top: 2.291667vw;
    padding-bottom: 1.25vw;
  }

  .stat-number {
    font-size: 8.333333vw;
  }

  .stat-label {
    font-size: 1.041667vw;
    margin-top: .208333vw;
  }

  .amenity-grid {
    gap: .520833vw 1.145833vw;
    margin: 1.666667vw 0 3.4375vw;
  }

  .amenity-grid li {
    font-size: 1.145833vw;
    gap: 2.1875vw;
  }

  .amenity-grid .icon {
    width: 3.333333vw;
    height: 2.604167vw;
  }

  .location {
    min-height: 50.104167vw;
    padding-block: 4.21875vw;
  }

  .location-grid {
    grid-template-columns: 50% 40.7%;
    gap: 9.3%;
  }

  .location-art {
    width: 36.979167vw;
    max-width: none;
    aspect-ratio: 710 / 800;
  }

  .location h2 {
    font-size: 5vw;
  }

  .location .section-copy>p.location-name {
    margin-top: 2.604167vw;
    font-size: 1.458333vw;
  }

  .location .section-copy>p.location-route {
    margin-top: 2.083333vw;
    font-size: 1.041667vw;
  }

  .location .section-copy>p.location-description {
    margin-top: 4.583333vw;
    font-size: 1.25vw;
    line-height: 1.3;
  }

  .location .section-copy>.button {
    margin-top: 2.916667vw;
  }

  .journal {
    min-height: 56.197917vw;
    padding-block: 6.510417vw 6.25vw;
  }

  .journal>.container>.reveal>.eyebrow {
    margin-bottom: 1.25vw;
  }

  .journal h2 {
    margin-bottom: 2.083333vw;
  }

  .journal-grid {
    gap: 1.5625vw;
  }

  .journal-card .media-frame {
    aspect-ratio: 530 / 293;
    margin-bottom: 1.666667vw;
  }

  .journal-card .eyebrow {
    margin-bottom: 1.041667vw;
  }

  .journal-card h3 {
    font-size: 2.1875vw;
    margin-bottom: 1.25vw;
  }

  .journal-card>p:not(.eyebrow) {
    font-size: 1.041667vw;
    line-height: 1.45;
    margin-bottom: 1.770833vw;
  }

  .text-button {
    font-size: 1.041667vw;
  }

  .contact-section {
    min-height: 42.291667vw;
    padding-block: 8.229167vw 6.770833vw;
  }

  .contact-grid {
    grid-template-columns: 46% 49%;
    gap: 5%;
  }

  .contact-copy {
    padding-left: 5.65%;
  }

  .contact-copy h2 {
    font-size: 3.229167vw;
  }

  .contact-copy>p:not(.eyebrow) {
    margin-top: 1.875vw;
    font-size: .9375vw;
  }

  .contact-section .form-grid {
    gap: 2.8125vw 1.5625vw;
  }

  .main-form .field>span,
  .contact-method legend {
    font-size: .78125vw;
  }

  .main-form .field input,
  .main-form .field select {
    min-height: 1.354167vw;
    padding-block: .15625vw;
  }

  .contact-method {
    margin-top: 2.604167vw;
  }

  .contact-method legend {
    margin-bottom: 1.25vw;
  }

  .contact-method label {
    gap: .78125vw;
    font-size: .78125vw;
    margin-right: 1.145833vw;
  }

  input[type="radio"],
  input[type="checkbox"] {
    width: .9375vw;
    height: .9375vw;
  }

  .consent {
    gap: .833333vw;
    margin-top: 2.5vw;
    font-size: .9375vw;
  }

  .main-form>.button {
    margin-top: 3.958333vw;
  }

  .faq-section {
    min-height: 56.510417vw;
    padding-block: 6.40625vw 5.885417vw;
  }

  .faq-grid {
    grid-template-columns: 49% 46%;
    gap: 5%;
  }

  /* A touch taller, so the closed question list (heading to button) fills
     exactly the image's height. */
  .faq-image {
    aspect-ratio: 808 / 862;
  }

  .faq-copy .eyebrow {
    margin-bottom: 1.041667vw;
  }

  .faq-copy h2 {
    font-size: 3.125vw;
    margin-bottom: 2.083333vw;
    white-space: nowrap;
  }

  .faq-list summary {
    font-size: .9375vw;
    padding: 1.197917vw 2.083333vw 1.197917vw 0;
  }

  .faq-list details[open] summary {
    padding-bottom: .260417vw;
  }

  .faq-answer {
    padding: 0 2.083333vw 1.5625vw 0;
    font-size: .9375vw;
    line-height: 1.6;
  }

  .faq-copy>.button {
    margin-top: 1.979167vw;
  }

  .site-footer {
    min-height: 40.052083vw;
    padding: 3.333333vw 0 1.666667vw;
  }

  .site-footer>.container {
    min-height: 35.052083vw;
    display: flex;
    flex-direction: column;
  }

  .footer-brand {
    width: 17.1875vw;
    margin-bottom: 1.5625vw;
  }

  .footer-main {
    flex: 1;
    padding-bottom: 2.083333vw;
  }

  .footer-main>p,
  .footer-nav a {
    font-size: 1.041667vw;
  }

  .footer-nav {
    margin-top: 1.354167vw;
  }

  .footer-nav a {
    padding-inline: 1.25vw;
  }

  .footer-actions {
    gap: 1.5625vw;
    margin-top: 2.291667vw;
  }

  .footer-actions .button {
    min-width: 13.072917vw;
  }

  .footer-bottom {
    margin-top: auto;
    padding-top: 2.604167vw;
    font-size: 1.041667vw;
  }

  .footer-bottom .text-button {
    font-size: 1.041667vw;
  }

  /* Keep the dialog at comfortable reading sizes, independent of page scaling. */
  .enquiry-dialog .field>span,
  .enquiry-dialog .contact-method legend {
    font-size: 10px;
  }

  .enquiry-dialog .field input,
  .enquiry-dialog .field select {
    min-height: 34px;
    font-size: 16px;
  }

  .enquiry-dialog .contact-method {
    margin-top: 24px;
  }

  .enquiry-dialog .contact-method legend {
    margin-bottom: 12px;
  }

  .enquiry-dialog .contact-method label {
    font-size: 10px;
    gap: 9px;
    margin-right: 14px;
  }

  .enquiry-dialog .consent {
    font-size: 13px;
    gap: 12px;
    margin-top: 22px;
  }

  .enquiry-dialog input[type="radio"],
  .enquiry-dialog input[type="checkbox"] {
    width: 14px;
    height: 14px;
  }

  .enquiry-dialog .button {
    min-height: 46px;
    padding: 12px 28px;
    font-size: 14px;
  }
}

/* Sections without eyebrow labels: on desktop several sections keep a fixed
   minimum height from the design, so centre their content vertically rather
   than leaving the spare space below it. */
@media (min-width: 961px) {
  .investment,
  .estates,
  .layout-section,
  .paradise,
  .location,
  .journal,
  .contact-section,
  .faq-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .investment > .container,
  .estates > .container,
  .layout-section > .container,
  .paradise > .container,
  .location > .container,
  .journal > .container,
  .contact-section > .container,
  .faq-section > .container {
    flex-shrink: 0;
  }
}

/* Sticky header: once the hero has scrolled away, the header becomes a
   compact solid green bar fixed to the top. js/main.js adds .is-stuck (parked
   just above the screen), then .is-shown to slide it down; removing .is-shown
   slides it back up before .is-stuck is dropped. Transitions (not keyframes)
   so a change of direction mid-way reverses smoothly from where it is.
   --stuck-height also offsets anchor jumps so headings aren't hidden. */
:root {
  --stuck-height: 72px;
}

html {
  scroll-padding-top: var(--stuck-height);
}

.header-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  pointer-events: none;
  visibility: hidden;
}

.site-header.is-stuck {
  position: fixed;
  background: var(--green-deep);
  box-shadow: 0 1px 0 #c4a05a33, 0 10px 30px #00000040;
  transform: translate3d(0, -100%, 0);
  will-change: transform;
  /* Leaving: a slightly quicker, even ease-in-out. */
  transition: transform .45s cubic-bezier(.4, 0, .2, 1), box-shadow .45s;
}

.site-header.is-stuck.is-shown {
  transform: translate3d(0, 0, 0);
  /* Arriving: a longer, gently settling ease-out. */
  transition: transform .6s var(--ease), box-shadow .6s;
}

.site-header.is-stuck:not(.is-shown) {
  box-shadow: none;
}

.site-header.is-stuck .header-inner {
  min-height: var(--stuck-height);
}

.site-header.is-stuck .brand {
  width: 150px;
}

@media (max-width: 640px) {
  :root {
    --stuck-height: 64px;
  }

  .site-header.is-stuck .brand {
    width: 130px;
  }
}

@media (min-width: 961px) {
  :root {
    --stuck-height: 6.25vw;
  }

  .site-header.is-stuck .brand {
    width: 13.541667vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .motion-ready .reveal:not(.is-visible),
  .motion-ready .reveal-cascade:not(.is-visible) .reveal-item {
    opacity: 1;
  }
}

@media print {
  .motion-ready .reveal:not(.is-visible),
  .motion-ready .reveal-cascade:not(.is-visible) .reveal-item {
    opacity: 1;
  }
}

/* Footer contact: phone and website on separate lines on mobile. */
@media (max-width: 640px) {
  .footer-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .footer-contact .fc-sep {
    display: none;
  }
}

/* Enquire section contact lines: a little breathing room on mobile. */
@media (max-width: 640px) {
  .contact-details span + span {
    margin-top: 4px;
  }
}

/* Proximity: below the location section. The heading, with the category
   tabs to its right sitting directly over the distance card, then the
   location film beside the card. On desktop the card is as tall as the film and shows the rows
   that fit; "View all" drops the rest down (js/main.js marks cut rows). */
.proximity {
  background: var(--paper);
}

.proximity-intro {
  display: grid;
  grid-template-columns: minmax(0, 55%) minmax(0, 1fr);
  align-items: end;
  gap: 48px;
  margin-bottom: 56px;
}

.proximity-intro > p {
  max-width: 560px;
  font-size: 16px;
  line-height: 1.48;
  letter-spacing: var(--paragraph-tracking);
}

.proximity-grid {
  display: grid;
  grid-template-columns: minmax(0, 55%) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

/* Location film */
.proximity-film {
  position: relative;
  aspect-ratio: 16 / 10;
  color: #fff;
}

.proximity-film-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--green-deep);
}

/* While the film plays, the still and its overlays step aside. */
.proximity-film.is-playing > :not(.proximity-film-video) {
  display: none;
}

.proximity-film-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #0d2e2059 0%, #0d2e2026 45%, #0d2e2073 100%);
}

.proximity-film-tag {
  position: absolute;
  top: 32px;
  left: 32px;
  padding: 8px 16px;
  border: 1px solid #ffffffb3;
  font-size: 12px;
  letter-spacing: .17em;
  line-height: 1.3;
  text-transform: uppercase;
}

.proximity-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0;
  border: 0;
  color: #fff;
  background: none;
  font-size: 18px;
  letter-spacing: .17em;
  line-height: 1.3;
  text-align: left;
  text-transform: uppercase;
}

.proximity-play:focus-visible {
  outline-offset: -6px;
}



.proximity-play .play-circle {
  /* "flex: none" so the brand film's tablet/phone flex-basis can't squash it. */
  flex: none;
  aspect-ratio: 1;
  width: 104px;
  height: 104px;
  background: #0d2e2033;
}

.proximity-play .play-circle svg {
  width: 42px;
  height: 42px;
  margin-left: 4px;
}

@media (hover: hover) {
  .proximity-play:hover .play-circle {
    transform: scale(1.06);
    background: #ffffff1f;
  }
}

/* Distance card */
.proximity-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e7e0d2;
}

.proximity-panel {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

/* The tabs: a two-part switch on the heading row, its width the card's. */
.proximity-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-self: end;
  border: 1px solid var(--green);
  background: #fff;
}

.proximity-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  border: 0;
  color: var(--green);
  background: transparent;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .17em;
  text-transform: uppercase;
  transition: color .3s, background .3s;
}

.proximity-tab[aria-selected="true"] {
  color: #fff;
  background: var(--green);
}

@media (hover: hover) {
  .proximity-tab[aria-selected="false"]:hover {
    background: var(--cream);
  }
}

.proximity-count {
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}

.proximity-panel-head {
  padding: 24px 28px 18px;
}

.proximity-panel-head h3 {
  color: var(--ink);
  font-size: 34px;
}

.proximity-panel-head p {
  margin-top: 8px;
  color: #64746a;
  font-size: 14px;
  letter-spacing: var(--paragraph-tracking);
}

.proximity-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.proximity-table thead th {
  padding: 11px 16px;
  color: #ffffffcc;
  background: var(--green);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .17em;
  text-align: left;
  text-transform: uppercase;
}

.proximity-table tbody th,
.proximity-table tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid #efe9de;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  vertical-align: middle;
}

.proximity-table tbody th {
  color: var(--ink);
  font-size: 15px;
  font-weight: 400;
}

.proximity-table tbody td {
  white-space: nowrap;
}

.proximity-table th:first-child {
  padding-left: 28px;
}

.proximity-table th:last-child,
.proximity-table td:last-child {
  padding-right: 28px;
  text-align: right;
}

.proximity-table tbody tr:nth-child(even) {
  background: var(--paper);
}

.proximity-panel:not(.is-expanded) tbody tr.is-cut {
  display: none;
}

.proximity-field {
  display: none;
}

.proximity-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: auto;
  padding: 14px 28px 16px;
}

.proximity-shown {
  color: #64746a;
  font-size: 13px;
}

.proximity-expand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid var(--gold);
  color: var(--ink);
  background: none;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.proximity-expand svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  transition: transform .3s var(--ease);
}

.proximity-expand[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.proximity-fineprint {
  position: relative;
  max-width: 900px;
  margin-top: 20px;
  padding-left: 16px;
  color: #64746a;
  font-size: 13px;
  line-height: 1.55;
}

.proximity-fineprint::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

@media (max-width: 1200px) {
  .proximity-table tbody td {
    white-space: normal;
  }
}

@media (max-width: 960px) {
  .proximity > .container {
    display: flex;
    flex-direction: column;
  }

  .proximity-intro,
  .proximity-grid {
    display: contents;
  }

  .proximity-intro > h2 { order: 1; }
  .proximity-visual { order: 2; margin-top: 36px; }
  .proximity-tabs { order: 3; align-self: stretch; margin-top: 40px; }
  .proximity-card { order: 4; border-top: 0; }

  .proximity-intro > p {
    max-width: 650px;
    font-size: 15px;
    line-height: 1.65;
  }

  .proximity-film {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 640px) {
  .proximity-film {
    aspect-ratio: 16 / 11;
  }

  .proximity-play {
    gap: 16px;
    font-size: 13px;
    letter-spacing: .1em;
  }

  .proximity-film-tag {
    top: 20px;
    left: 20px;
    padding: 7px 12px;
    font-size: 11px;
  }

  .proximity-play .play-circle {
    width: 72px;
    height: 72px;
  }

  .proximity-play .play-circle svg {
    width: 30px;
    height: 30px;
  }

  /* One line per tab: label and count side by side, sized to fit 320px. */
  .proximity-tab {
    gap: 6px;
    min-height: 44px;
    padding: 10px 6px;
    font-size: clamp(10px, 2.9vw, 12px);
    letter-spacing: .1em;
    white-space: nowrap;
  }

  .proximity-panel-head {
    padding: 22px 20px 16px;
  }

  .proximity-panel-head h3 {
    font-size: 30px;
  }

  .proximity-panel-head p {
    font-size: 14px;
  }

  /* Each row becomes a small block: name across, distance and time below. */
  .proximity-table thead {
    display: none;
  }

  .proximity-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
    row-gap: 6px;
    padding: 12px 20px;
    border-bottom: 1px solid #efe9de;
  }

  .proximity-table tbody th,
  .proximity-table tbody td,
  .proximity-table th:first-child,
  .proximity-table td:last-child {
    padding: 0;
    border: 0;
  }

  .proximity-table tbody th {
    grid-column: 1 / -1;
  }

  .proximity-table tbody td {
    font-size: 13px;
  }

  .proximity-field {
    display: block;
    color: #8a948c;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  .proximity-panel-foot {
    padding: 14px 20px 16px;
  }

  .proximity-shown,
  .proximity-expand {
    font-size: 12px;
  }

  .proximity-fineprint {
    margin-top: 16px;
    font-size: 12px;
  }
}

/* Desktop: sized against the same 1920px reference as the sections above. */
@media (min-width: 961px) {
  .section.proximity {
    padding-block: 6.25vw;
  }

  .proximity h2 {
    font-size: 5vw;
  }

  .proximity-intro {
    gap: 2.5vw;
    margin-bottom: 3.75vw;
  }

  .proximity-intro > p {
    max-width: 32vw;
    font-size: 1.041667vw;
    line-height: 1.45;
  }

  .proximity-grid {
    gap: 2.5vw;
  }

  .proximity-film-tag {
    top: 2.083333vw;
    left: 2.083333vw;
    padding: .416667vw .833333vw;
    font-size: .729167vw;
  }

  .proximity-play {
    gap: 1.458333vw;
    font-size: 1.145833vw;
  }

  .proximity-play .play-circle {
    width: 6.25vw;
    height: 6.25vw;
  }

  .proximity-play .play-circle svg {
    width: 2.5vw;
    height: 2.5vw;
  }

  .proximity-tab {
    min-height: 3.333333vw;
    gap: .729167vw;
    font-size: .833333vw;
  }

  .proximity-panel-head {
    padding: 1.458333vw 1.666667vw 1.041667vw;
  }

  .proximity-panel-head h3 {
    font-size: 2.083333vw;
  }

  .proximity-panel-head p {
    margin-top: .416667vw;
    font-size: .833333vw;
  }

  .proximity-table thead th {
    padding: .625vw .833333vw;
    font-size: .677083vw;
  }

  .proximity-table tbody th,
  .proximity-table tbody td {
    padding: .677083vw .833333vw;
    font-size: .833333vw;
  }

  .proximity-table tbody th {
    font-size: .885417vw;
  }

  .proximity-table th:first-child {
    padding-left: 1.666667vw;
  }

  .proximity-table th:last-child,
  .proximity-table td:last-child {
    padding-right: 1.666667vw;
  }

  .proximity-panel-foot {
    padding: .833333vw 1.666667vw .9375vw;
  }

  .proximity-shown,
  .proximity-expand {
    font-size: .78125vw;
  }

  .proximity-expand svg {
    width: .729167vw;
    height: .729167vw;
  }

  .proximity-fineprint {
    max-width: none;
    margin-top: 1.25vw;
    font-size: .78125vw;
  }
}

/* Discover: once the columns stack, "Request a Call Back" moves below the
   feature cards. The page carries the button in both places; each layout
   shows one. */
.discover-cta-stacked {
  display: none;
}

@media (max-width: 960px) {
  .discover-grid .discover-cta {
    display: none;
  }

  .discover-grid .discover-cta-stacked {
    display: inline-flex;
    justify-self: start;
  }
}

/* Spacious. Private. Yours.: its own green section, so a green band follows
   A Private Paradise before the light Location section. Discover and this
   section each size to their content (they used to share one tall section). */
.estates-gallery .gallery-tab {
  border-color: #ffffffcc;
  color: #fff;
  background: transparent;
}

.estates-gallery .gallery-tab.active {
  border-color: #fff;
  color: var(--green);
  background: #fff;
}

.estates-gallery .gallery-arrows button:first-child {
  color: #fff;
}

@media (min-width: 961px) {
  .estates {
    min-height: 0;
    padding-block: 7.5vw 6.25vw;
  }

  .estates.estates-gallery {
    padding-block: 6.25vw 8.28125vw;
  }
}

/* Proximity heading on phones: each line stays whole and the size follows
   the screen, so "Well-Connected." never breaks at its hyphen. */
.proximity h2 > span {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .proximity h2 {
    font-size: clamp(30px, 10.4vw, 40px);
    line-height: 1.04;
  }

  .proximity-visual {
    margin-top: 28px;
  }

  .proximity-tabs {
    margin-top: 32px;
  }
}

/* Location shares the proximity section's warm paper background, so the two
   read as one band. The map preview is drawn on white; multiply lets the
   paper show through its white instead of a white box. */
.location {
  background: var(--paper);
}

.location-art img {
  mix-blend-mode: multiply;
}

/* Tracked capitals: letter-spacing also follows the last letter, which leaves
   the label sitting left of centre. An indent of the same amount balances it. */
.gallery-tab {
  text-indent: .17em;
}

.proximity-tab > :first-child {
  margin-left: .17em;
}

.proximity-count {
  margin-right: -.08em;
}

/* Very narrow phones (320–380px): tighter tracking so each tab stays on one line. */
@media (max-width: 380px) {
  .proximity-tab {
    gap: 4px;
    padding-inline: 4px;
    font-size: 9.5px;
    letter-spacing: .06em;
  }

  .proximity-tab > :first-child {
    margin-left: .06em;
  }
}