/* ==========================================================================
   The Elysium - Microsite
   Design base: 1920px. Sizes scale down with --px (1px at 1920, smaller below).
   ========================================================================== */

@font-face {
  font-family: "PP Editorial Old";
  src: url("../fonts/pp-editorial-old-200.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Editorial Old";
  src: url("../fonts/pp-editorial-old-400.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #fffaef;
  --green: #406460;
  --green-deep: #2f4b48;
  --gold: #cfb488;
  --ink: #333333;
  --ink-dark: #231f20;
  --white: #ffffff;

  --serif: "PP Editorial Old", "Times New Roman", serif;
  --sans: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;

  --px: min(1px, calc(100vw / 1920));
  --gutter: max(20px, calc(80 * var(--px)));
  --fs-body: max(15px, calc(18 * var(--px)));
  --fs-small: max(14px, calc(16 * var(--px)));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.18, 1);

  --bs-body-font-family: var(--sans);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--cream);
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
/* Bootstrap turns on native smooth scrolling. Lenis already does the smoothing, and with both on ScrollTrigger measures
   the page mid-scroll on every refresh (accordion, resize) and pins The Difference in the wrong place. */
:root { scroll-behavior: auto; }
/* Lenis hides the scrollbar when stopped. That happens before Bootstrap and Fancybox measure it, so they compensate for
   nothing and the whole page jumps sideways. Lenis blocks wheel and touch by itself, so the scrollbar can stay. */
html.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: visible; }
body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.667;
  color: var(--ink);
  background: var(--cream);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; line-height: inherit; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.wrap { width: 100%; padding-inline: var(--gutter); }
.tt-cap { text-transform: capitalize; }

.display-60, .display-70, .display-100 { font-family: var(--serif); font-weight: 200; line-height: 1.5; }
.display-60 { font-size: max(32px, calc(60 * var(--px))); }
.display-70 { font-size: max(34px, calc(70 * var(--px))); }
.display-100 { font-size: max(42px, calc(100 * var(--px))); }

/* Eyebrow label */
.eyebrow {
  display: flex;
  align-items: center;
  margin-bottom: max(28px, calc(60 * var(--px)));
  font: 500 max(13px, calc(18 * var(--px))) / 1.17 var(--sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow--light { color: var(--white); }
.eyebrow__sep { margin: 0 0.75em; }

/* Pill buttons */
.btn-pill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: max(46px, calc(55 * var(--px)));
  padding: 0 max(26px, calc(39 * var(--px)));
  border: 0;
  border-radius: 99px;
  background: var(--green);
  color: var(--white);
  font: 400 max(15px, calc(18 * var(--px))) / 1 var(--sans);
  letter-spacing: 0.05em;
  text-transform: capitalize;
  white-space: nowrap;
  transition: color 0.5s var(--ease);
}
.btn-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--green-deep);
  transform: translateY(101%);
  transition: transform 0.6s var(--ease);
}
.btn-pill:hover::before { transform: none; }
.btn-pill--light { background: var(--white); color: var(--green); font-weight: 500; }
.btn-pill--light::before { background: var(--gold); }
.btn-pill--light:hover { color: var(--ink-dark); }

/* Image hover zoom + lightbox affordance */
.img-zoom { position: relative; display: block; overflow: hidden; cursor: zoom-in; }
.img-zoom img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
.img-zoom:hover img { scale: 1.05; }
.img-zoom::after {
  content: "\f065";
  font: 900 16px/1 "Font Awesome 6 Free";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: var(--white);
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
  pointer-events: none;
}
.img-zoom:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Parallax images (GSAP moves the img) */
.js-parallax img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }

/* Section backgrounds with the soft leaf shadow texture */
.section-leaf { position: relative; isolation: isolate; background-color: var(--cream); }
.section-leaf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/leaf-shadow.webp") center / 100% 100% no-repeat;
  opacity: 0.4;
  pointer-events: none;
}
.section-leaf--dark { background-color: var(--green); color: var(--white); }
/* Figma: exposure -1, contrast -0.3 */
.section-leaf--dark::before { background-size: cover; opacity: 0.45; filter: contrast(0.7) brightness(0.176); }

/* Slider arrow buttons */
.slider-arrows { display: flex; gap: max(12px, calc(20 * var(--px))); }
.slider-arrow {
  width: max(54px, calc(89 * var(--px)));
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transition: background-color 0.4s var(--ease), transform 0.4s var(--ease), opacity 0.3s;
}
.slider-arrow img { width: 100%; height: 100%; }
.slider-arrow:hover { background-color: rgba(255, 255, 255, 0.12); transform: scale(0.94); }
.slider-arrow.swiper-button-disabled,
.slider-arrow:disabled { opacity: 0.35; pointer-events: none; }

/* AOS: softer travel distance */
[data-aos="fade-up"] { transform: translate3d(0, 60px, 0); }

/* ==========================================================================
   Loader
   ========================================================================== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  clip-path: inset(0 0 0 0);
  animation: loader-failsafe 0.6s 8s forwards;
}
.loader__logo { width: max(170px, calc(248 * var(--px))); height: auto; margin-top: calc(-111 * var(--px)); opacity: 0.2; }
.loader__line {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: max(48px, calc(95 * var(--px)));
  height: 3px;
  background: rgba(0, 0, 0, 0.05);
}
.loader__progress {
  display: block;
  height: 100%;
  background: var(--green);
  transform: scaleX(0.0466);
  transform-origin: left center;
}
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  color: var(--white);
  transition: transform 0.7s var(--ease), background-color 0.5s ease, box-shadow 0.5s ease;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(47, 75, 72, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-hidden { transform: translateY(calc(-100% - 4px)); }
.with-fancybox .site-header { right: var(--fancybox-scrollbar-compensate, 0px); }
/* Everything stays centred on the logo in both states, so only the padding and the logo size animate */
.site-header__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: max(14px, calc(22 * var(--px)));
  padding-bottom: 14px;
  transition: padding 0.5s var(--ease);
}
.site-header__nav {
  display: flex;
  align-items: center;
  gap: max(24px, calc(45 * var(--px)));
}
.site-header__link,
.menu-toggle__text {
  font: 500 max(14px, calc(18 * var(--px))) / 1.17 var(--sans);
  text-transform: uppercase;
}
.site-header__link { position: relative; }
.site-header__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.site-header__link:hover::after { transform: scaleX(1); transform-origin: left; }
.site-header__divider { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.45); }

.menu-toggle { display: flex; align-items: center; gap: 15px; padding: 0; border: 0; background: none; color: inherit; }
.menu-toggle__text { letter-spacing: 0.05em; }
.menu-toggle__lines { position: relative; display: block; width: max(34px, calc(45 * var(--px))); height: 11.5px; }
.menu-toggle__lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: width 0.5s var(--ease);
}
.menu-toggle__lines span:first-child { top: 0; }
.menu-toggle__lines span:last-child { bottom: 0; }
.menu-toggle:hover .menu-toggle__lines span:last-child { width: 60%; }

.site-header__logo img { width: max(124px, calc(190 * var(--px))); height: auto; transition: width 0.5s var(--ease); }

.btn-contact {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(118px, calc(150 * var(--px)));
  height: max(40px, calc(45 * var(--px)));
  border: 0;
  border-radius: 62px;
  background: var(--white);
  color: var(--ink-dark);
  font: 500 max(14px, calc(18 * var(--px))) / 1 var(--sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background-color 0.4s var(--ease);
}
.btn-contact:hover { background: var(--gold); }

.site-header.is-scrolled .site-header__inner { padding-top: 8px; padding-bottom: 8px; }
.site-header.is-scrolled .site-header__logo img { width: max(100px, calc(140 * var(--px))); }

/* ==========================================================================
   Offcanvas menu (full width)
   ========================================================================== */
.menu-offcanvas.offcanvas-top {
  --bs-offcanvas-height: 100vh;
  --bs-offcanvas-bg: var(--green);
  --bs-offcanvas-color: var(--white);
  --bs-offcanvas-transition: transform 0.9s var(--ease-in-out);
  height: 100vh;
  height: 100dvh;
  border: 0;
  z-index: 1060;
}
.offcanvas-backdrop { --bs-backdrop-opacity: 0; }
.menu-offcanvas__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.menu-offcanvas__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/leaf-shadow.webp") center / cover no-repeat;
  opacity: 0.45;
  filter: contrast(0.7) brightness(0.176);
}
.menu-offcanvas__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: max(14px, calc(22 * var(--px)));
}
.menu-offcanvas__logo { width: max(124px, calc(190 * var(--px))); height: auto; }
.menu-close {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  font: 500 max(14px, calc(18 * var(--px))) / 1.17 var(--sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  justify-self: start;
}
.menu-close__x { position: relative; width: 30px; height: 30px; transition: transform 0.6s var(--ease); }
.menu-close__x span { position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px; background: currentColor; }
.menu-close__x span:first-child { transform: rotate(45deg); }
.menu-close__x span:last-child { transform: rotate(-45deg); }
.menu-close:hover .menu-close__x { transform: rotate(90deg); }

.menu-offcanvas__body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: end;
  padding-top: max(40px, calc(70 * var(--px)));
  padding-bottom: max(40px, calc(80 * var(--px)));
}
.menu-links { list-style: none; margin: 0; padding: 0; }
.menu-links li { overflow: hidden; }
.menu-links a {
  display: inline-block;
  padding: 2px 0;
  font: 200 max(30px, calc(58 * var(--px))) / 1.3 var(--serif);
  color: var(--white);
  transform: translateY(110%);
  transition: transform 0.9s var(--ease), color 0.4s ease;
}
.menu-links a:hover { color: var(--gold); }
.menu-offcanvas.showing .menu-links a,
.menu-offcanvas.show:not(.hiding) .menu-links a { transform: none; }
.menu-links li:nth-child(1) a { transition-delay: 0.35s; }
.menu-links li:nth-child(2) a { transition-delay: 0.4s; }
.menu-links li:nth-child(3) a { transition-delay: 0.45s; }
.menu-links li:nth-child(4) a { transition-delay: 0.5s; }
.menu-links li:nth-child(5) a { transition-delay: 0.55s; }
.menu-links li:nth-child(6) a { transition-delay: 0.6s; }
.menu-links li:nth-child(7) a { transition-delay: 0.65s; }
.menu-links li:nth-child(8) a { transition-delay: 0.7s; }
.menu-links li:nth-child(9) a { transition-delay: 0.75s; }
.menu-offcanvas.hiding .menu-links a { transition-delay: 0s; transition-duration: 0.4s; }

.menu-aside {
  padding-bottom: 12px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.menu-offcanvas.showing .menu-aside,
.menu-offcanvas.show:not(.hiding) .menu-aside { opacity: 1; transform: none; transition-delay: 0.6s; }
.menu-aside .eyebrow { margin-bottom: 28px; }
.menu-contact { list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); line-height: 1.75; }
.menu-contact li { display: flex; gap: 14px; }
.menu-contact li + li { margin-top: 14px; }
.menu-contact i { width: 16px; margin-top: 6px; color: var(--gold); }
.menu-contact a:hover { color: var(--gold); }

/* ==========================================================================
   Banner
   ========================================================================== */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  color: var(--white);
  background: #1d2a28;
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::before,
.hero__bg::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.hero__bg::before { top: 0; height: max(140px, calc(241 * var(--px))); background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)); }
.hero__bg::after { top: 50%; bottom: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(102, 102, 102, 0)); }
.hero__content { position: absolute; left: 0; right: 0; bottom: calc(60 * var(--px)); z-index: 2; }
.hero__title {
  max-width: max(330px, calc(722 * var(--px)));
  margin-bottom: max(12px, calc(20 * var(--px)));
  font: 200 max(34px, calc(60 * var(--px))) / 1.5 var(--serif);
}
.hero__badge {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  height: max(50px, calc(67 * var(--px)));
  padding: 0 max(24px, calc(52 * var(--px)));
  background: var(--white);
  color: var(--ink);
  font: 500 max(13px, calc(18 * var(--px))) / 1.667 var(--sans);
  text-transform: uppercase;
  white-space: nowrap;
}
.hero__badge span { margin: 0 0.6em; }

/* ==========================================================================
   The Vision
   ========================================================================== */
.vision { padding: max(64px, calc(100 * var(--px))) 0 max(64px, calc(104 * var(--px))); }
/* Fades the leaf texture into The Difference - stacked under the content so it never covers it */
.vision::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: calc(209 * var(--px));
  background: linear-gradient(rgba(255, 250, 239, 0), var(--cream));
  pointer-events: none;
}
.vision__title { max-width: calc(1384 * var(--px)); }
.vision__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-top: calc(80 * var(--px)); }
.vision__text { width: calc(640 * var(--px)); min-width: 320px; }
.vision__media { position: sticky; top: max(90px, calc(130 * var(--px))); width: calc(900 * var(--px)); aspect-ratio: 977 / 609; }

/* ==========================================================================
   Project listing
   ========================================================================== */
.projects { padding: max(12px, calc(20 * var(--px))) 0 max(16px, calc(30 * var(--px))); overflow: hidden; background: var(--cream); }
.projects__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.projects__title { width: calc(969 * var(--px)); }
.projects__intro { width: calc(510 * var(--px)); min-width: 300px; margin-top: calc(31 * var(--px)); }
.projects .display-100 { line-height: 1.25; }
.projects__slider { margin-top: calc(100 * var(--px)); }
.projects-swiper { overflow: visible; }
.project-card { width: calc(398 * var(--px)); }
.project-card--featured { width: calc(674 * var(--px)); }
.project-card--wide { width: calc(473 * var(--px)); }
.project-card__media { height: calc(504 * var(--px)); }
.project-card--featured .project-card__media { height: calc(658 * var(--px)); }
.project-card__info { margin-top: max(16px, calc(30 * var(--px))); }
.project-card__info h3 {
  margin-bottom: calc(10 * var(--px));
  font: 400 max(20px, calc(25 * var(--px))) / 1.5 var(--serif);
  text-transform: uppercase;
}
.project-card--featured .project-card__info { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.project-card--featured .project-card__info h3 { margin: 0; font-size: max(22px, calc(32 * var(--px))); }
.project-card__text { max-width: calc(560 * var(--px)); margin-top: max(10px, calc(16 * var(--px))); }
/* Fades the leaf texture into the next section - stacked under the cards so it never covers them */
.projects__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: calc(209 * var(--px));
  background: linear-gradient(rgba(255, 250, 239, 0), var(--cream));
  pointer-events: none;
}

/* ==========================================================================
   The Difference - horizontal scroll strip (positions from the 6063 x 1080 frame)
   ========================================================================== */
.difference {
  --u: min(calc(100vw / 1920), calc(100vh / 1080));
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--cream);
}
.difference__track {
  position: relative;
  flex: none;
  width: calc(5140 * var(--u));
  height: calc(1080 * var(--u));
  font-size: max(14px, calc(18 * var(--u)));
}
.difference__track > * { position: absolute; }
.difference .display-60 { font-size: max(28px, calc(60 * var(--u))); }
.difference .display-70 { font-size: max(32px, calc(70 * var(--u))); }
.difference .eyebrow { margin-bottom: calc(60 * var(--u)); }
.difference__sketch {
  left: calc(1076 * var(--u));
  top: 0;
  width: calc(1921 * var(--u));
  height: calc(1081 * var(--u));
  object-fit: cover;
  opacity: 0.15;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20.8%, #000 77.5%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 20.8%, #000 77.5%, transparent 100%);
  pointer-events: none;
}
.difference__mark { left: calc(3916 * var(--u)); top: calc(-39 * var(--u)); width: calc(261 * var(--u)); height: auto; pointer-events: none; }
.difference__intro { left: calc(80 * var(--u)); top: calc(130 * var(--u)); width: calc(846 * var(--u)); } /* clears the header when it slides back in */
.difference__copy { left: calc(264 * var(--u)); top: calc(440 * var(--u)); width: calc(478 * var(--u)); }
.difference__copy .dash-list { margin-top: 1em; }
.difference__copy .btn-pill { margin-top: calc(60 * var(--u)); }
.difference__aerial { left: calc(876 * var(--u)); top: calc(662 * var(--u)); width: calc(441 * var(--u)); height: calc(321 * var(--u)); }
.difference__pool { left: calc(2644 * var(--u)); top: calc(140 * var(--u)); width: calc(478 * var(--u)); height: calc(690 * var(--u)); }
.difference__estates { left: calc(3290 * var(--u)); top: calc(140 * var(--u)); width: calc(449 * var(--u)); }
.difference__estates-copy { left: calc(3493 * var(--u)); top: calc(434 * var(--u)); width: calc(448 * var(--u)); }
.difference__track .difference__note { left: calc(1440 * var(--u)); top: calc(150 * var(--u)); width: calc(600 * var(--u)); font: 200 max(20px, calc(32 * var(--u))) / 1.5 var(--serif); }
.difference__think { left: calc(1980 * var(--u)); top: calc(560 * var(--u)); width: calc(560 * var(--u)); }
.difference__think h3 { margin-bottom: calc(30 * var(--u)); }
.difference__features { left: calc(4010 * var(--u)); top: calc(300 * var(--u)); width: calc(520 * var(--u)); }
.difference__features--b { left: calc(4610 * var(--u)); top: calc(420 * var(--u)); width: calc(460 * var(--u)); }
.difference__balcony { left: calc(4010 * var(--u)); top: calc(680 * var(--u)); width: calc(520 * var(--u)); height: calc(300 * var(--u)); }
.difference__feature + .difference__feature { margin-top: calc(50 * var(--u)); }
.difference__feature h4 { margin-bottom: calc(16 * var(--u)); font: 400 max(20px, calc(30 * var(--u))) / 1.4 var(--serif); }
/* Arrows sit outside the track, so they stay put while it moves. Bottom-left of the centred 1080 frame,
   in line with the intro. A solid cream fill keeps them readable when an image or text slides underneath,
   so the disabled state fades only the icon. */
.difference__arrows { position: absolute; z-index: 2; left: calc(80 * var(--u)); bottom: calc(50vh - 480 * var(--u)); }
.difference__arrows .slider-arrow { background-color: var(--cream); }
.difference__arrows .slider-arrow:hover { background-color: #f3eee4; }
.difference__arrows .slider-arrow:disabled { opacity: 1; }
.difference__arrows .slider-arrow:disabled img { opacity: 0.35; }
@media (min-width: 992px) {
  /* The strip scales with --u, so its eyebrow, buttons and arrows should too. Keeps the track on its own layer. */
  .difference { --px: var(--u); }
  .difference__track { will-change: transform; }
}
/* Small laptop windows: the text stops shrinking at 14px while the frame keeps scaling, so give it more room */
@media (min-width: 992px) and (max-width: 1380px), (min-width: 992px) and (max-height: 780px) {
  .difference__track { width: calc(5260 * var(--u)); }
  .difference__copy { width: calc(590 * var(--u)); }
  .difference__features { width: calc(640 * var(--u)); }
  .difference__balcony { top: calc(710 * var(--u)); width: calc(640 * var(--u)); height: calc(270 * var(--u)); }
  .difference__features--b { left: calc(4730 * var(--u)); width: calc(520 * var(--u)); }
  .difference__arrows .slider-arrow { width: 44px; }
}
@media (min-width: 992px) and (max-width: 1140px), (min-width: 992px) and (max-height: 640px) {
  .difference__track { width: calc(5420 * var(--u)); }
  .difference__copy { left: calc(300 * var(--u)); width: calc(560 * var(--u)); }
  .difference__features { width: calc(760 * var(--u)); }
  .difference__balcony { top: calc(730 * var(--u)); width: calc(760 * var(--u)); height: calc(250 * var(--u)); }
  .difference__features--b { left: calc(4850 * var(--u)); width: calc(560 * var(--u)); }
}

/* ==========================================================================
   Lifestyle beyond four walls
   ========================================================================== */
/* Height follows the content. The bottom padding reserves room for the wave, which pushes cards down by up to 360 (WAVE in main.js) */
.lifestyle { padding: calc(100 * var(--px)) 0 calc(400 * var(--px)); overflow: hidden; }
.lifestyle__head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}
.lifestyle__head .slider-arrows { pointer-events: auto; }
.lifestyle__head h2 { max-width: calc(842 * var(--px)); }
.lifestyle__tagline { margin-top: calc(20 * var(--px)); font: 400 max(18px, calc(26 * var(--px))) / 1.5 var(--serif); color: var(--gold); }
.lifestyle__sub { max-width: calc(780 * var(--px)); margin-top: calc(20 * var(--px)); }
.lifestyle__head .slider-arrows { margin-top: calc(50 * var(--px)); }
/* Pulled up under the head so the outer cards rise beside it, while the wave keeps the centre cards below the arrows */
.lifestyle__slider { position: relative; z-index: 1; margin-top: calc(-250 * var(--px)); }
.lifestyle-swiper { overflow: visible; margin-left: calc(-249 * var(--px)); }
.life-card--a { width: calc(628 * var(--px)); }
.life-card--b { width: calc(746 * var(--px)); }
.life-card--c { width: calc(559 * var(--px)); }
.life-card--d { width: calc(684 * var(--px)); }
.life-card__inner { will-change: transform; }
.life-card--a .life-card__inner { width: calc(362 * var(--px)); }
.life-card--b .life-card__inner { width: calc(505 * var(--px)); }
.life-card--c .life-card__inner { width: calc(362 * var(--px)); }
.life-card--d .life-card__inner { width: calc(434 * var(--px)); }
.life-card__media { margin-bottom: calc(25 * var(--px)); }
.life-card--a .life-card__media { height: calc(362 * var(--px)); }
.life-card--b .life-card__media,
.life-card--c .life-card__media { height: calc(338 * var(--px)); }
.life-card--d .life-card__media { height: calc(295 * var(--px)); margin-bottom: calc(35 * var(--px)); }
.life-card h3 { margin-bottom: calc(18 * var(--px)); font: 400 max(20px, calc(26 * var(--px))) / 1.5 var(--serif); }
.life-card p { font-size: var(--fs-small); line-height: 1.75; }
.life-card__more {
  margin-top: max(14px, calc(20 * var(--px)));
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid var(--gold);
  background: none;
  color: var(--white);
  font: 500 max(13px, calc(15 * var(--px))) / 1.2 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.4s ease;
}
.life-card__more:hover { color: var(--gold); }

/* ==========================================================================
   The Future of Luxury
   ========================================================================== */
.future { padding: max(64px, calc(80 * var(--px))) 0 max(64px, calc(150 * var(--px))); }
.future__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.future__intro { width: calc(717 * var(--px)); margin-top: calc(48 * var(--px)); }
.future__row { display: flex; justify-content: space-between; align-items: flex-start; margin-top: calc(90 * var(--px)); }
.future__media { width: calc(928 * var(--px)); aspect-ratio: 928 / 922; }
.future-acc { width: calc(717 * var(--px)); }
.future-acc__item { padding: max(18px, calc(30 * var(--px))) 0; border-bottom: 1.1px solid rgba(255, 255, 255, 0.9); }
.future-acc__item:first-child { padding-top: 0; }
.future-acc__item:last-child { border-bottom: 0; padding-bottom: 0; }
.future-acc__head {
  display: grid;
  grid-template-columns: max(20px, calc(32 * var(--px))) 1fr;
  align-items: start;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  font: 400 max(20px, calc(25 * var(--px))) / 1.5 var(--serif);
  text-align: left;
  transition: color 0.4s ease;
}
/* Bullet, centred on the first line of the title: (line-height 1.5em - bullet 0.3em) / 2 */
.future-acc__head::before {
  content: "";
  width: 0.3em;
  height: 0.3em;
  margin-top: 0.6em;
  border-radius: 50%;
  background: currentColor;
}
.future-acc__head:hover,
.future-acc__item.is-open .future-acc__head { color: var(--gold); }
.future-acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease); }
.future-acc__body > div { overflow: hidden; }
.future-acc__content {
  max-width: max(280px, calc(640 * var(--px)));
  margin: max(12px, calc(20 * var(--px))) 0 0 max(20px, calc(32 * var(--px)));
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.6s var(--ease);
}
.future-acc__item.is-open .future-acc__body { grid-template-rows: 1fr; }
.future-acc__item.is-open .future-acc__content { opacity: 1; transform: none; transition-delay: 0.15s; }

/* ==========================================================================
   The Minds Behind the Vision
   ========================================================================== */
.minds { padding: calc(70 * var(--px)) 0 max(48px, calc(61 * var(--px))); overflow: hidden; background: var(--cream); }
.minds__title {
  margin-bottom: calc(57 * var(--px));
  font: 400 max(44px, calc(150 * var(--px))) / 1.5 var(--serif);
  text-align: center;
  white-space: nowrap;
  color: rgba(51, 51, 51, 0.2);
}
.leaders-swiper { overflow: visible; }
.leaders-swiper .swiper-slide { background: var(--cream); }
.leader { display: flex; justify-content: space-between; align-items: stretch; gap: 40px; }
.minds__head { margin-bottom: max(36px, calc(70 * var(--px))); }
.minds__lead { max-width: calc(1100 * var(--px)); }
.leader__text { display: flex; flex-direction: column; gap: max(24px, calc(40 * var(--px))); width: calc(560 * var(--px)); min-width: 280px; padding-top: calc(30 * var(--px)); }
.leader__name h3 { margin-bottom: calc(10 * var(--px)); font: 400 max(28px, calc(45 * var(--px))) / 1.5 var(--serif); }
.leader__name p { font-size: max(16px, calc(22 * var(--px))); line-height: 1.27; color: var(--green); }
.leader__bio p + p { margin-top: 1.1em; }
.leader__media { width: calc(1040 * var(--px)); height: calc(864 * var(--px)); margin: calc(30 * var(--px)) 0 calc(23 * var(--px)); flex: none; }
/* Head sits at the very top of the photo: crop from the bottom and keep it in frame during the hover zoom */
.leader__media--portrait img { object-position: center top; transform-origin: center top; }
.slider-arrows--end { justify-content: flex-end; margin-top: calc(104 * var(--px)); }
.slider-arrows--end .slider-arrow:hover { background-color: rgba(51, 51, 51, 0.06); }

/* ==========================================================================
   Location advantage
   ========================================================================== */
.location { position: relative; height: calc(1471 * var(--px)); padding-top: calc(80 * var(--px)); overflow: hidden; background: var(--cream); }
/* Hairline divider - The Minds above shares the same cream background */
.minds + .location::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--gold);
}
.location__map {
  position: absolute;
  left: 0;
  top: calc(327 * var(--px));
  width: 100%;
  height: calc(1144 * var(--px));
  background: #e8e6df;
}
/* Ignores the pointer until clicked (main.js): otherwise scrolling over it flashes Google's "ctrl + scroll" overlay and skips Lenis */
.location__map { cursor: pointer; }
.location__map iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
.location__map.is-active iframe { pointer-events: auto; }
.location__map::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--cream) 0%, rgba(255, 250, 239, 0) 53.6%);
  pointer-events: none;
}
.location__head { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; pointer-events: none; }
.location__head h2 { width: calc(969 * var(--px)); }
.location__intro { width: calc(717 * var(--px)); margin-top: calc(90 * var(--px)); }
.location__intro h3 { margin-bottom: max(10px, calc(16 * var(--px))); font: 400 max(20px, calc(28 * var(--px))) / 1.4 var(--serif); }
.location__slider { position: absolute; left: 0; right: 0; bottom: calc(107 * var(--px)); z-index: 2; }
.location-marquee { margin-left: var(--gutter); }
.location-track { display: flex; width: max-content; will-change: transform; }
.location-track .loc-card { flex: none; margin-right: max(12px, calc(20 * var(--px))); }
.loc-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: max(250px, calc(394 * var(--px)));
  height: max(190px, calc(276 * var(--px)));
  padding: max(20px, calc(30 * var(--px)));
  background: var(--white);
  color: var(--ink);
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}
.loc-card__time { display: flex; align-items: flex-start; gap: calc(10 * var(--px)); }
.loc-card__time strong { font: 200 max(64px, calc(105 * var(--px))) / 0.95 var(--serif); }
.loc-card__time span { font: 500 max(13px, calc(18 * var(--px))) / 1.17 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; }
.loc-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.loc-card__foot p { font: 500 max(15px, calc(20 * var(--px))) / 1.5 var(--sans); }
.loc-card__pin { width: 26px; height: 26px; flex: none; transition: filter 0.5s ease; }
.loc-card:not(.loc-card--image):hover { background: var(--green); color: var(--white); }
.loc-card:not(.loc-card--image):hover .loc-card__pin { filter: brightness(0) invert(1); }
.loc-card--image { color: var(--white); }
.loc-card__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
.loc-card--image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, 0.4); }
.loc-card--image:hover .loc-card__bg { scale: 1.06; }

/* ==========================================================================
   Formula One Track
   ========================================================================== */
.f1 {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: max(640px, calc(1080 * var(--px)));
  padding-bottom: max(56px, calc(108 * var(--px)));
  overflow: hidden;
  color: var(--white);
  background: #1d2a28;
}
.f1__bg { position: absolute; inset: 0; overflow: hidden; cursor: zoom-in; }
.f1__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 67.9%); pointer-events: none; }
.f1__content { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; pointer-events: none; }
.f1__content .btn-pill { pointer-events: auto; }
.f1__main { width: calc(673 * var(--px)); min-width: 300px; }
.f1 .eyebrow { margin-bottom: max(18px, calc(30 * var(--px))); }
.f1__title { margin-bottom: calc(34 * var(--px)); font: 400 max(40px, calc(80 * var(--px))) / 1.2 var(--serif); }
.f1__sub { max-width: calc(637 * var(--px)); font-size: max(16px, calc(22 * var(--px))); line-height: 1.636; }
.f1__aside { width: max(280px, calc(362 * var(--px))); }
.f1__aside .dash-list { margin-bottom: max(16px, calc(24 * var(--px))); font-size: max(16px, calc(20 * var(--px))); }
.f1__aside p { margin-bottom: max(24px, calc(32 * var(--px))); font-size: var(--fs-small); line-height: 1.75; }

/* ==========================================================================
   Get in touch / footer
   ========================================================================== */
.contact { padding: max(64px, calc(80 * var(--px))) 0 calc(30 * var(--px)); }
.contact__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.contact__title { width: calc(1022 * var(--px)); font: 200 max(38px, calc(80 * var(--px))) / 1.5 var(--serif); }
.contact__info {
  list-style: none;
  width: max(260px, calc(298 * var(--px)));
  margin: calc(92 * var(--px)) 0 0;
  padding: 0;
  font-size: var(--fs-small);
  line-height: 2;
  text-align: right;
}
.contact__info li + li { margin-top: 15px; }
.contact__info i { margin-right: 14px; font-size: 14px; }
.contact__info a:hover { color: var(--gold); }

.contact__mid { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-top: calc(58 * var(--px)); }
.contact-form { width: calc(822 * var(--px)); min-width: 520px; }
.contact-form__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(76 * var(--px)); row-gap: max(44px, calc(80 * var(--px))); }
.contact-form .field--phone { grid-column: 1 / -1; }

.field { position: relative; }
.field__input {
  width: 100%;
  height: max(52px, calc(60 * var(--px)));
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--white);
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font: 400 max(15px, calc(18 * var(--px))) / 1.2 var(--sans);
  outline: none;
  transition: border-color 0.4s ease;
}
.field__input::placeholder { color: var(--white); opacity: 1; }
.field__input:focus { border-bottom-color: var(--gold); }
.field--phone { display: flex; align-items: center; }
.field__prefix {
  position: absolute;
  left: 0;
  bottom: 0;
  height: max(52px, calc(60 * var(--px)));
  display: flex;
  align-items: center;
  font-size: max(15px, calc(18 * var(--px)));
  pointer-events: none;
}
.field--phone .field__input { padding-left: max(42px, calc(48 * var(--px))); }
.field__error {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.3;
  color: #ffc9be;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.field.is-invalid .field__error,
.consent__error.is-visible { opacity: 1; transform: none; }
.field.is-invalid .field__input { border-bottom-color: #ff9c8a; }

.consent {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-top: max(40px, calc(80 * var(--px)));
  font-size: var(--fs-small);
  line-height: 1.875;
  cursor: pointer;
}
.consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent__box { position: relative; width: 21px; height: 21px; flex: none; border: 1px solid var(--white); transition: background-color 0.3s ease; }
.consent__box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 7px;
  height: 12px;
  border: solid var(--green);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.3s var(--ease);
}
.consent input:checked + .consent__box { background: var(--white); }
.consent input:checked + .consent__box::after { transform: rotate(45deg) scale(1); }
.consent input:focus-visible + .consent__box { outline: 2px solid var(--gold); outline-offset: 3px; }
.consent__error { position: static; display: block; margin-top: 8px; }
.contact-form .btn-submit { margin-top: max(36px, calc(72 * var(--px))); }

.btn-submit.is-loading { pointer-events: none; }
.btn-submit.is-loading span { opacity: 0; }
.btn-submit.is-loading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.contact__links { list-style: none; margin: calc(62 * var(--px)) 0 0; padding: 0; text-align: right; text-transform: capitalize; }
.contact__links li + li { margin-top: 20px; }
.contact__links a { position: relative; }
.contact__links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.contact__links a:hover { color: var(--gold); }
.contact__links a:hover::after { transform: scaleX(1); }

.contact__legal {
  display: flex;
  justify-content: flex-end;
  gap: calc(64 * var(--px));
  margin-top: max(48px, calc(57 * var(--px)));
  font-size: var(--fs-small);
  line-height: 1;
  text-transform: uppercase;
}
.contact__legal a:hover { color: var(--gold); }
.contact__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  margin-top: max(20px, calc(30 * var(--px)));
  padding-top: max(20px, calc(30 * var(--px)));
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  font-size: var(--fs-small);
}
.socials { display: flex; gap: 9px; list-style: none; margin: 0; padding: 0; }
.socials a { display: block; width: 32px; height: 32px; border-radius: 50%; transition: transform 0.4s var(--ease), background-color 0.4s ease; }
.socials a:hover { transform: translateY(-3px); background-color: rgba(255, 255, 255, 0.15); }
.credit { justify-self: end; display: flex; align-items: center; gap: 6px; }

/* ==========================================================================
   Enquiry modal
   ========================================================================== */
.enquiry-modal { --bs-modal-width: 1000px; --bs-modal-margin: 16px; }
.modal-backdrop { --bs-backdrop-bg: #0e1918; --bs-backdrop-opacity: 0.78; }
.enquiry-modal.fade .modal-dialog { transform: translateY(40px) scale(0.97); transition: transform 0.7s var(--ease); }
.enquiry-modal.show .modal-dialog { transform: none; }
.enquiry-modal .modal-content {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--cream);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.35);
}
.enquiry-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(51, 51, 51, 0.25);
  border-radius: 50%;
  background: transparent;
  transition: transform 0.6s var(--ease), background-color 0.4s ease;
}
.enquiry-modal__close span { position: absolute; top: 50%; left: 13px; width: 18px; height: 1.5px; background: var(--ink); }
.enquiry-modal__close span:first-child { transform: rotate(45deg); }
.enquiry-modal__close span:last-child { transform: rotate(-45deg); }
.enquiry-modal__close:hover { transform: rotate(90deg); background: rgba(51, 51, 51, 0.06); }
.enquiry-modal__media { position: relative; min-height: 600px; color: var(--white); }
.enquiry-modal__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.enquiry-modal__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(35, 55, 52, 0.2), rgba(35, 55, 52, 0.85)); }
.enquiry-modal__media-copy { position: absolute; left: 40px; right: 40px; bottom: 40px; z-index: 1; }
.enquiry-modal__media-copy img { position: static; width: 110px; height: auto; margin-bottom: 22px; }
.enquiry-modal__media-copy p { font: 500 12px/1.6 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.enquiry-modal__media-copy span { margin: 0 0.5em; }
.enquiry-modal__body { padding: 64px 56px 56px; }
.enquiry-modal__body .eyebrow { margin-bottom: 22px; font-size: 13px; }
.enquiry-modal__title { font: 200 40px/1.25 var(--serif); }
.enquiry-modal__lead { margin: 14px 0 34px; font-size: 15px; line-height: 1.7; color: #5b5b5b; }
.enquiry-form .field + .field { margin-top: 28px; }
.field__label { display: block; font: 600 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
.enquiry-form .field__input {
  height: 48px;
  border-bottom-color: rgba(51, 51, 51, 0.3);
  color: var(--ink);
  font-size: 16px;
}
.enquiry-form .field__input::placeholder { color: #9a968c; }
.enquiry-form .field__input:focus { border-bottom-color: var(--green); }
.enquiry-form .field--phone { display: block; }
.enquiry-form .field__prefix { height: 48px; font-size: 16px; color: var(--ink); }
.enquiry-form .field__error { color: #c0392b; }
.enquiry-form .field.is-invalid .field__input { border-bottom-color: #c0392b; }
.enquiry-form .btn-submit { width: 100%; margin-top: 40px; }

/* ==========================================================================
   Thank-you page
   ========================================================================== */
.thanks { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; text-align: center; }
.thanks__logo { width: 200px; height: auto; margin-bottom: 56px; }
.thanks__icon { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 32px; border: 1px solid var(--gold); border-radius: 50%; color: var(--green); font-size: 28px; }
.thanks h1 { font: 200 max(44px, calc(90 * var(--px))) / 1.2 var(--serif); }
.thanks p { max-width: 560px; margin: 22px auto 40px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .location-marquee { overflow-x: auto; }
}

@media (max-width: 991.98px) {
  .section-leaf::before { background-size: cover; }

  .site-header__divider,
  .site-header__link { display: none; }

  .menu-offcanvas__body { grid-template-columns: 1fr; gap: 40px; align-items: start; }

  /* Vision */
  .vision__title { max-width: none; }
  .vision__row { flex-direction: column; gap: 40px; margin-top: 36px; }
  .vision__text { width: 100%; min-width: 0; margin: 0; }
  .vision__media { position: relative; top: auto; width: 100%; }

  /* Projects */
  .projects { padding: 12px 0 16px; }
  .projects__head { flex-direction: column; gap: 20px; }
  .projects__title { width: auto; }
  .projects__intro { width: auto; min-width: 0; margin: 0; }
  .projects__slider { margin-top: 40px; }
  .projects-swiper { margin-left: var(--gutter); }
  .project-card,
  .project-card--featured,
  .project-card--wide { width: min(78vw, 420px); }
  .project-card__media,
  .project-card--featured .project-card__media { height: auto; aspect-ratio: 4 / 5; }
  .project-card--featured .project-card__info { display: block; }
  .project-card--featured .project-card__info h3 { margin-bottom: 4px; font-size: 22px; }
  .projects__fade { display: none; }

  /* Difference: stacked */
  .difference { height: auto; display: block; padding: 64px 0; }
  .difference__track { width: auto; height: auto; display: flex; flex-direction: column; gap: 32px; padding-inline: var(--gutter); }
  .difference__track > * { position: static; width: auto !important; }
  .difference__sketch,
  .difference__mark,
  .difference__arrows { display: none; }
  .difference .eyebrow { margin-bottom: 28px; }
  .difference .display-60 { font-size: 32px; }
  .difference .display-70 { font-size: 34px; }
  .difference__track { font-size: 15px; }
  .difference__copy .btn-pill { margin-top: 32px; }
  .difference__aerial,
  .difference__pool { height: auto !important; aspect-ratio: 4 / 3; }
  .difference__pool { aspect-ratio: 4 / 5; }
  .difference__balcony { height: auto !important; aspect-ratio: 1214 / 731; }
  .difference__track .difference__note { font-size: 22px; }
  .difference__feature h4 { margin-bottom: 8px; font-size: 24px; }
  .difference__feature + .difference__feature { margin-top: 32px; }
  .difference__intro { order: 1; }
  .difference__copy { order: 2; }
  .difference__aerial { order: 3; }
  .difference__note { order: 4; }
  .difference__think { order: 5; }
  .difference__think h3 { margin-bottom: 16px; }
  .difference__estates { order: 6; }
  .difference__estates-copy { order: 7; }
  .difference__pool { order: 8; }
  .difference__features { order: 9; }
  .difference__balcony { order: 10; }
  .difference__features--b { order: 11; }

  /* Lifestyle */
  .lifestyle { height: auto; padding: 64px 0; }
  .lifestyle__head h2,
  .lifestyle__sub { max-width: 640px; }
  .lifestyle__sub { margin-top: 16px; }
  .lifestyle__head .slider-arrows { margin-top: 32px; }
  .lifestyle__slider { position: static; margin-top: 40px; }
  .lifestyle-swiper { margin-left: 0; }
  .life-card .life-card__inner { width: 100% !important; transform: none !important; }
  .life-card .life-card__media { height: auto !important; aspect-ratio: 4 / 3; margin-bottom: 20px !important; }
  .life-card h3 { margin-bottom: 8px; }

  /* Future */
  .future__head { flex-direction: column; gap: 20px; }
  .future__intro { width: auto; margin: 0; }
  .future__row { flex-direction: column; gap: 40px; margin-top: 40px; }
  .future__media,
  .future-acc { width: 100%; }

  /* Minds */
  .minds { padding-top: 56px; }
  .minds__title { white-space: normal; padding-inline: var(--gutter); line-height: 1.15; margin-bottom: 36px; }
  .leader { flex-direction: column-reverse; gap: 28px; }
  .leader__text { width: auto; min-width: 0; gap: 20px; padding-top: 0; }
  .leader__media { width: 100%; height: auto; aspect-ratio: 1116 / 864; margin: 0; }
  .slider-arrows--end { margin-top: 32px; }

  /* Location */
  .location { height: auto; display: flex; flex-direction: column; padding: 64px 0 56px; }
  .location__map { order: 2; }
  .location__slider { order: 3; }
  .location__head { flex-direction: column; gap: 20px; }
  .location__head h2 { width: auto; }
  .location__intro { width: auto; margin: 0; }
  .location__map { position: relative; left: auto; top: auto; display: block; width: 100%; height: max(360px, 56vw); margin-top: 28px; }
  .location__map::after { background: linear-gradient(var(--cream) 0%, rgba(255, 250, 239, 0) 16%); }
  .location__slider { position: static; margin-top: 20px; } /* clear of Google's attribution at the bottom of the map */

  /* F1 */
  .f1__content { flex-direction: column; gap: 32px; }
  .f1__main,
  .f1__aside { width: 100%; min-width: 0; }
  .f1__sub { max-width: none; }

  /* Contact */
  .contact__top,
  .contact__mid { flex-direction: column; }
  .contact__title { width: auto; }
  .contact__info { width: auto; margin: 0; text-align: left; }
  .contact__mid { margin-top: 48px; gap: 48px; }
  .contact-form { width: 100%; min-width: 0; }
  .contact__links { margin: 0; text-align: left; }
  .contact__legal { justify-content: flex-start; gap: 32px; }
  .contact__bottom { grid-template-columns: 1fr; justify-items: start; }
  .credit { justify-self: start; }

  .enquiry-modal .modal-content { grid-template-columns: 1fr; }
  .enquiry-modal__media { display: none; }
  .enquiry-modal__body { padding: 56px 28px 36px; }
}

@media (max-width: 767.98px) {
  .menu-toggle__text { display: none; }
  .site-header__inner,
  .menu-offcanvas__head { padding-top: 14px; }
  .menu-close__text { display: none; }
  .btn-contact { width: auto; height: 36px; padding: 0 16px; font-size: 12px; }
  .site-header__logo img,
  .menu-offcanvas__logo { width: 108px; }
  .site-header.is-scrolled .site-header__logo img { width: 92px; }

  .hero__content { bottom: 84px; }
  .hero__badge { left: 0; justify-content: center; height: 46px; padding: 0 12px; font-size: 11px; }
  .hero__badge span { margin: 0 0.45em; }

  .contact-form__grid { grid-template-columns: 1fr; row-gap: 36px; }
  .enquiry-modal__title { font-size: 32px; }
}

/* ==========================================================================
   Project page
   ========================================================================== */
:root {
  --ptabs-pad: max(16px, calc(56 * var(--px)));
  --ptabs-pad-stuck: max(12px, calc(20 * var(--px)));
  --ptabs-lh: max(22px, calc(30 * var(--px)));
}

/* Banner */
.hero--project .hero__bg::after { top: 0; background: linear-gradient(rgba(0, 0, 0, 0) 47.87%, #000 119.35%), rgba(0, 0, 0, 0.1); }
.hero--project .hero__content { bottom: calc(90 * var(--px)); padding-left: max(20px, calc(90 * var(--px))); }
.hero--project .hero__content > * { opacity: 0; } /* revealed by the intro in main.js */
.hero--project .hero__title { max-width: none; margin: 0; line-height: 1.667; }
.hero__label {
  margin-bottom: max(10px, calc(20 * var(--px)));
  font: 400 max(14px, calc(20 * var(--px))) / 1.5 var(--sans);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.hero__label span { margin: 0 0.75em; }

/* Section tabs - sticky. Stuck state trims the padding and gives it back as margin so nothing below moves. */
.ptabs {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 0.5px solid #0e1528;
  transition: top 0.7s var(--ease), margin 0.5s var(--ease), background-color 0.4s ease, box-shadow 0.4s ease;
}
.site-header:not(.is-hidden) ~ main .ptabs { top: var(--header-h, 0px); }
.ptabs.is-stuck {
  margin-bottom: calc(2 * (var(--ptabs-pad) - var(--ptabs-pad-stuck)));
  background: var(--cream);
  box-shadow: 0 12px 30px rgba(47, 75, 72, 0.06);
}
.ptabs__scroller { position: relative; overflow-x: auto; scrollbar-width: none; }
.ptabs__scroller::-webkit-scrollbar { display: none; }
.ptabs__list { display: flex; gap: calc(68 * var(--px)); width: max-content; margin: 0; padding: 0 0 0 calc(5 * var(--px)); list-style: none; }
.ptabs__list a {
  display: block;
  padding: var(--ptabs-pad) calc(17 * var(--px));
  font: 400 max(14px, calc(22 * var(--px))) / var(--ptabs-lh) var(--sans);
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(51, 51, 51, 0.45);
  transition: color 0.4s ease, padding 0.5s var(--ease);
}
.ptabs__list a:hover,
.ptabs__list a.is-active { color: #0e1528; }
.ptabs.is-stuck .ptabs__list a { padding-block: var(--ptabs-pad-stuck); }
.ptabs__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--w, 0px);
  height: 3px;
  border-radius: 3px;
  background: var(--green);
  transform: translateX(var(--x, 0px));
  transition: transform 0.6s var(--ease), width 0.6s var(--ease);
}
.ptabs ~ section { scroll-margin-top: calc(2 * var(--ptabs-pad-stuck) + var(--ptabs-lh)); }
.ptabs ~ .overview { scroll-margin-top: 0; } /* its top already holds the tab bar */

/* Overview (pulled up under the tabs so its leaf texture shows behind them, as in the design) */
.overview { margin-top: calc(-2 * var(--ptabs-pad) - var(--ptabs-lh) - 0.5px); padding: calc(262 * var(--px)) 0 calc(148 * var(--px)); }
.overview::before { background-size: 116.8% 100%; transform: scaleY(-1); }
.overview__grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.overview__main { width: calc(950 * var(--px)); }
.overview__title { max-width: calc(847 * var(--px)); }
.overview__text { width: calc(652 * var(--px)); min-width: 300px; margin: calc(50 * var(--px)) 0 0 calc(195 * var(--px)); }
.overview__text p + p { margin-top: 1.667em; }
.overview__media { flex: none; width: calc(698 * var(--px)); aspect-ratio: 698 / 693; margin-top: calc(81 * var(--px)); }
.stats { display: flex; gap: calc(70 * var(--px)); margin: calc(140 * var(--px)) 0 0; padding: 0; list-style: none; }
.stat { display: flex; align-items: center; gap: calc(60 * var(--px)); }
.stat::before { content: ""; flex: none; width: 1px; height: calc(164 * var(--px)); background: #787878; }
.stat > div { width: calc(210 * var(--px)); min-width: 150px; }
.stat__value { font: 200 max(44px, calc(80 * var(--px))) / 1.366 var(--serif); white-space: nowrap; }
.stat__value small { font-size: 0.5em; }
.stat__label { margin-top: calc(5.5 * var(--px)); font-size: max(15px, calc(24 * var(--px))); line-height: 1.594; color: #787878; }

/* The Residence */
.residence { min-height: calc(1219 * var(--px)); padding-top: calc(45 * var(--px)); overflow: hidden; }
.residence::before { bottom: auto; height: calc(1080 * var(--px)); background-size: 116.8% auto; background-position: center top; }
.residence::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: calc(606 * var(--px));
  background: linear-gradient(rgba(255, 250, 239, 0), var(--cream));
}
.residence__head { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.residence__head .eyebrow { margin-bottom: max(24px, calc(44 * var(--px))); }
.residence__title { line-height: 1.357; }
.residence__text { width: calc(457 * var(--px)); min-width: 300px; margin-top: max(20px, calc(44 * var(--px))); }
.residence__media { position: absolute; left: 50%; bottom: 0; width: calc(1936 * var(--px)); max-width: none; height: auto; transform: translateX(-50%); }

/* The Grand Balcony (two stacked renders, moved together by the parallax) */
.balcony { position: relative; height: calc(1080 * var(--px)); min-height: 600px; overflow: hidden; color: var(--white); background: #1d2a28; }
.balcony__bg { position: absolute; inset: 0; }
.balcony__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgba(0, 0, 0, 0) 48.33%, rgba(0, 0, 0, 0.6)), rgba(0, 0, 0, 0.05); }
.balcony__content { position: relative; z-index: 1; padding-top: calc(80 * var(--px)); }
.balcony .eyebrow { margin-bottom: max(28px, calc(122 * var(--px))); }
.balcony__title { width: calc(628 * var(--px)); min-width: 300px; font: 400 max(44px, calc(100 * var(--px))) / 1.5 var(--serif); }
.balcony__text { width: calc(457 * var(--px)); min-width: 280px; margin-top: calc(20 * var(--px)); }

/* Paradeisos - the private club */
.club { min-height: calc(1694 * var(--px)); padding-top: calc(80 * var(--px)); overflow: hidden; }
.club::before { bottom: auto; height: calc(1440 * var(--px)); transform: scaleY(-1); }
.club__head { text-align: center; }
.club__head .eyebrow { justify-content: center; }
.club__head h2 { white-space: nowrap; }
.club__body { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; gap: calc(289 * var(--px)); margin-top: calc(90 * var(--px)); }
.club__tabs { width: calc(417 * var(--px)); min-width: 300px; margin: 0; padding: 0; list-style: none; }
.club__tabs li + li { margin-top: calc(35 * var(--px)); padding-top: calc(35 * var(--px)); border-top: 1px solid var(--white); }
.club__tab {
  display: flex;
  align-items: flex-start;
  gap: max(12px, calc(22 * var(--px)));
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  font: 400 max(20px, calc(25 * var(--px))) / 1.5 var(--serif);
  text-align: left;
  text-transform: capitalize;
  transition: color 0.4s ease;
}
.club__tab::before {
  content: "";
  flex: none;
  width: 0.3em;
  height: 0.3em;
  margin-top: 0.6em;
  border-radius: 50%;
  background: currentColor;
}
.club__tab:hover,
.club__tab.is-active { color: var(--gold); }
.club__panels { display: grid; width: calc(614 * var(--px)); min-width: 300px; }
.club__panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0.6s; }
.club__panel.is-active { opacity: 1; visibility: visible; }
.club__media { aspect-ratio: 614 / 305; }
.club__panel p { margin-top: calc(26 * var(--px)); }
.club__building { position: absolute; left: 0; right: 0; bottom: 0; height: calc(889 * var(--px)); overflow: hidden; pointer-events: none; }
.club__building img { position: absolute; left: 0; top: -14.14%; width: 100%; height: auto; }

/* Configurations & floor plans */
.configs { padding: calc(80 * var(--px)) 0 calc(35 * var(--px)); }
.configs::before { background-size: cover; transform: scaleY(-1); }
.configs__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.configs__intro { width: calc(595 * var(--px)); min-width: 300px; margin-top: calc(65 * var(--px)); }
.configs__body { position: relative; margin-top: calc(30 * var(--px)); }
.configs-swiper { overflow: visible; }
.config { display: flex; align-items: flex-start; }
.config__plan { position: relative; display: grid; place-items: center; flex: none; width: calc(670 * var(--px)); aspect-ratio: 1; }
.config__plan img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; rotate: -90deg; filter: drop-shadow(0 4px 80px rgba(0, 0, 0, 0.3)) blur(4px); }
.config--master .config__plan img { rotate: none; filter: none; }
.config__unlock { grid-area: 1 / 1; min-width: max(200px, calc(246 * var(--px))); border: 1px solid var(--white); }
.config__info { width: calc(472 * var(--px)); min-width: 300px; margin-left: calc(272 * var(--px)); padding-top: calc(175 * var(--px)); } /* 210 in the design, less the Phase line above the title */
.config__meta { margin-bottom: max(10px, calc(16 * var(--px))); font: 500 max(13px, calc(16 * var(--px))) / 1.2 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--green); }
.config__info h3 { margin-bottom: calc(25 * var(--px)); font: 200 max(36px, calc(70 * var(--px))) / 1.286 var(--serif); white-space: nowrap; }
.config__info p { font-size: max(15px, calc(16 * var(--px))); line-height: 1.875; }
.cfg-filter {
  position: absolute;
  z-index: 2;
  top: calc(46 * var(--px));
  left: calc(942 * var(--px));
  display: flex;
  align-items: center;
  gap: calc(14 * var(--px));
  max-width: calc(100% - 942 * var(--px));
  padding: calc(7.2 * var(--px)) calc(9.2 * var(--px));
  overflow-x: auto;
  scrollbar-width: none;
  border: 0.8px solid #adadad;
  border-radius: 100px;
}
.cfg-filter__btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 9px;
  height: max(40px, calc(57.6 * var(--px)));
  padding: 0 calc(20 * var(--px));
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: #454545;
  font: 500 max(15px, calc(22 * var(--px))) / 1 var(--sans);
  white-space: nowrap;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.cfg-filter__btn img { display: none; width: max(14px, calc(18.9 * var(--px))); height: auto; }
.cfg-filter__btn:hover { color: var(--green); }
.cfg-filter__btn.is-active { padding: 0 calc(24 * var(--px)); background: var(--green); color: var(--white); font-weight: 400; font-size: max(15px, calc(20.7 * var(--px))); }
.cfg-filter__btn.is-active img { display: block; }
.configs__arrows { position: absolute; z-index: 2; right: 0; top: calc(525 * var(--px)); }

/* Configurations summary */
.cfg-summary { padding: max(64px, calc(100 * var(--px))) 0; }
.cfg-summary::before { background-size: cover; transform: scaleY(-1); }
.cfg-summary__row {
  display: grid;
  grid-template-columns: calc(560 * var(--px)) calc(595 * var(--px));
  justify-content: space-between;
  align-items: start;
  gap: 40px;
  margin-top: max(40px, calc(80 * var(--px)));
}

/* Specifications */
.specs { padding: calc(50 * var(--px)) 0 calc(72 * var(--px)); }
.specs::before { background-size: 100% 109.11%; background-position: center 90.7%; }
.specs::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(255, 250, 239, 0) 62.65%, var(--cream)); pointer-events: none; }
.specs__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.specs__intro { width: calc(717 * var(--px)); min-width: 300px; margin-top: calc(105 * var(--px)); }
.specs__slider { margin-top: calc(111 * var(--px)); }
.spec { width: calc(259 * var(--px)); min-width: 220px; }
.spec__title { margin-bottom: calc(30 * var(--px)); font: 500 max(17px, calc(20 * var(--px))) / 1.175 var(--sans); }
.spec__media { aspect-ratio: 259 / 207; }
.spec--m .spec__media { aspect-ratio: 259 / 275; }
.spec--l .spec__media { aspect-ratio: 259 / 296; }
.spec--wardrobe img { object-position: center 15%; }
.spec__text { margin-top: calc(20 * var(--px)); font-size: max(13px, calc(14 * var(--px))); line-height: 1.786; color: rgba(51, 51, 51, 0.5); }
.specs__arrows { justify-content: center; margin-top: calc(76 * var(--px)); }

/* Gallery - fading slider in front of two tilted cards */
.gallery { position: relative; height: calc(1080 * var(--px)); padding-top: calc(51 * var(--px)); overflow: hidden; background: var(--cream); }
.gallery__head { text-align: center; }
.gallery__head .eyebrow { justify-content: center; margin-bottom: max(24px, calc(40 * var(--px))); }
.gallery__stage { position: absolute; left: 50%; top: calc(302.67 * var(--px)); width: calc(1398 * var(--px)); aspect-ratio: 1398 / 687; margin-left: calc(-691 * var(--px)); }
.gallery__card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 0.6px solid var(--white);
  border-radius: 12px;
  background: url("../images/elysium-gallery-2.webp") left center / auto 100% no-repeat;
}
.gallery__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)); }
.gallery__card--a { opacity: 0.3; transform: translate(calc(-8 * var(--px)), calc(6.5 * var(--px))) rotate(3deg); }
.gallery__card--b { opacity: 0.4; transform: translate(calc(-8 * var(--px)), calc(-11.5 * var(--px))) rotate(-2deg); }
.gallery-swiper { height: 100%; border: 0.6px solid var(--white); border-radius: 12px; clip-path: inset(0 round 12px); }
.gallery .slider-arrow { position: absolute; z-index: 2; top: calc(605 * var(--px)); }
.gallery-prev { left: calc(89 * var(--px)); }
.gallery-next { right: calc(94 * var(--px)); }

.configs__arrows .slider-arrow:hover,
.specs__arrows .slider-arrow:hover,
.gallery .slider-arrow:hover { background-color: rgba(51, 51, 51, 0.06); }

/* Location (project variant: plain cards, wider map) */
@media (min-width: 992px) {
  .location--project { height: calc(1424 * var(--px)); }
  .location--project .location__map { height: calc(1097 * var(--px)); }
  .location--project .location__slider { bottom: calc(60 * var(--px)); }
}

@media (max-width: 991.98px) {
  .hero--project .hero__content { bottom: 48px; }
  .hero--project .hero__title { line-height: 1.35; }

  .ptabs__list { gap: 4px; padding: 0; }
  .ptabs__list a { padding-inline: 12px; }

  .overview { padding: calc(2 * var(--ptabs-pad) + var(--ptabs-lh) + 48px) 0 64px; }
  .overview::before { background-size: cover; }
  .overview__grid { flex-direction: column; }
  .overview__main,
  .overview__title { width: auto; max-width: none; }
  .overview__text { width: auto; min-width: 0; margin: 24px 0 0; }
  .stats { flex-wrap: wrap; gap: 28px 40px; margin-top: 40px; }
  .stat { gap: 20px; }
  .stat::before { height: 110px; }
  .overview__media { width: 100%; margin: 0; }

  .residence { min-height: 0; padding-top: 64px; }
  .residence::before { height: 100%; background-size: cover; }
  .residence__text { width: auto; max-width: 457px; min-width: 0; }
  .residence__media { position: relative; display: block; width: 112%; margin-top: 24px; }

  .balcony { height: auto; min-height: 640px; padding: 64px 0; }
  .balcony__title,
  .balcony__text { width: auto; max-width: 457px; min-width: 0; }

  .club { min-height: 0; padding-top: 64px; }
  .club::before { height: 100%; }
  .club__head h2 { white-space: normal; }
  .club__body { flex-direction: column; align-items: stretch; gap: 32px; margin-top: 36px; }
  .club__tabs,
  .club__panels { width: 100%; min-width: 0; }
  .club__tabs li + li { margin-top: 18px; padding-top: 18px; }
  .club__building { position: relative; height: auto; aspect-ratio: 1920 / 889; margin-top: 24px; }

  .configs { padding: 64px 0; }
  .cfg-summary__row { grid-template-columns: 1fr; }
  .configs__head { flex-direction: column; gap: 20px; }
  .configs__intro { width: auto; min-width: 0; margin: 0; }
  .configs__body { display: flex; flex-direction: column; margin-top: 32px; }
  .configs-swiper { width: 100%; } /* Swiper's auto margins would otherwise let it size itself from its own slides */
  .cfg-filter { position: static; order: -1; align-self: flex-start; max-width: 100%; margin-bottom: 28px; padding: 5px; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .cfg-filter__btn { padding: 0 14px; }
  .cfg-filter__btn.is-active { padding: 0 16px; }
  .config { flex-direction: column; gap: 28px; }
  .config__plan { width: 100%; max-width: 520px; }
  .config__info { width: auto; min-width: 0; margin: 0; padding: 0; }
  .config__info h3 { white-space: normal; }
  .configs__arrows { position: static; justify-content: flex-end; margin-top: 28px; }

  .specs { padding: 64px 0; }
  .specs::before { background-size: cover; }
  .specs__head { flex-direction: column; gap: 20px; }
  .specs__intro { width: auto; min-width: 0; margin: 0; }
  .specs__slider { margin-top: 40px; }
  .spec { width: min(70vw, 280px); }
  .specs__arrows { margin-top: 32px; }

  .gallery { height: auto; padding: 64px 0 120px; }
  .gallery__stage { position: relative; left: auto; top: auto; width: auto; margin: 40px var(--gutter) 0; }
  .gallery .slider-arrow { top: auto; bottom: 40px; }
  .gallery-prev { left: calc(50% - 64px); }
  .gallery-next { right: calc(50% - 64px); }
}

@media (max-width: 575.98px) {
  /* All five filters fit a phone without scrolling */
  .cfg-filter__btn,
  .cfg-filter__btn.is-active { padding: 0 11px; font-size: 13px; }
  .cfg-filter__btn.is-active img { display: none; }
}

@media (max-width: 767.98px) {
  .hero--project .hero__content { bottom: 40px; }
  .stats { flex-direction: column; gap: 24px; }
  .stat::before { height: 88px; }
  .stat > div { width: auto; }
}

/* ==========================================================================
   Home - long-form content blocks
   ========================================================================== */
/* Rich text: paragraphs, sub-headings and lists from the content sheet */
.rich > * + * { margin-top: 1em; }
.rich > h3 { font: 400 max(22px, calc(32 * var(--px))) / 1.35 var(--serif); }
.rich > * + h3 { margin-top: 1.4em; }
.rich > h3 + * { margin-top: 0.75em; }
.rich h4 { font: 600 max(15px, calc(18 * var(--px))) / 1.5 var(--sans); letter-spacing: 0.02em; color: var(--green); }
.rich > * + h4 { margin-top: 1.5em; }
.rich > h4 + * { margin-top: 0.5em; }
.rich > .btn-pill { margin-top: max(32px, calc(56 * var(--px))); }
.section-leaf--dark .rich h4,
.f1 .rich h4 { color: var(--gold); }

.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li { position: relative; padding-left: 1.75em; }
.dash-list li + li { margin-top: 0.45em; }
.dash-list li::before { content: ""; position: absolute; left: 0; top: 0.83em; width: 1em; height: 1px; background: var(--gold); }
.rich > p + .dash-list,
.rich > p + .chip-list { margin-top: 0.6em; }

.chip-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.chip-list li { padding: 8px 18px; border: 1px solid rgba(207, 180, 136, 0.8); border-radius: 99px; font-size: var(--fs-small); line-height: 1.4; }

/* The Vision - A New Standard of Luxury Living */
.standard {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-top: max(64px, calc(120 * var(--px)));
  padding-top: max(40px, calc(80 * var(--px)));
  border-top: 1px solid rgba(51, 51, 51, 0.15);
}
.standard__title { width: calc(560 * var(--px)); min-width: 280px; }
.standard__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: calc(60 * var(--px));
  width: calc(1000 * var(--px));
  margin: 0;
  padding: 0;
  list-style: none;
}
.standard__list li {
  display: flex;
  align-items: flex-start;
  gap: max(12px, calc(20 * var(--px)));
  padding: max(14px, calc(22 * var(--px))) 0;
  border-bottom: 1px solid rgba(51, 51, 51, 0.15);
  font-size: max(16px, calc(20 * var(--px)));
  line-height: 1.5;
}
/* Bullet, centred on the first line of text: (line-height 1.5em - bullet 0.36em) / 2 */
.standard__list li::before {
  content: "";
  flex: none;
  width: 0.36em;
  height: 0.36em;
  margin-top: 0.57em;
  border-radius: 50%;
  background: var(--gold);
}

/* Designed with Hidden Intelligence + Security share a media/two-column row */
.intel,
.security { padding: max(64px, calc(120 * var(--px))) 0; }
.intel__head,
.security__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.intel__title { width: calc(820 * var(--px)); }
.security__title { width: calc(900 * var(--px)); }
.intel__text,
.security__intro { width: calc(640 * var(--px)); min-width: 300px; margin-top: calc(20 * var(--px)); }
.intel__row,
.security__row {
  display: grid;
  grid-template-columns: calc(560 * var(--px)) 1fr 1fr;
  gap: calc(80 * var(--px));
  align-items: start;
  margin-top: max(48px, calc(100 * var(--px)));
}
.security__media { aspect-ratio: 560 / 700; }

.cfg-card { padding: max(28px, calc(50 * var(--px))); background: var(--green); color: var(--white); }
.cfg-card__label { font: 500 max(13px, calc(16 * var(--px))) / 1.2 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold); }
.cfg-card__phase { margin-top: 10px; font: 200 max(36px, calc(60 * var(--px))) / 1.2 var(--serif); }
.cfg-card__rows { margin: max(20px, calc(36 * var(--px))) 0 0; }
.cfg-card__rows div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: max(14px, calc(20 * var(--px))) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}
.cfg-card__rows dt { font: 400 max(20px, calc(28 * var(--px))) / 1.3 var(--serif); }
.cfg-card__rows dd { margin: 0; font-size: var(--fs-small); white-space: nowrap; }

/* Wellness, Reimagined */
.wellness__banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: max(560px, calc(1000 * var(--px)));
  padding-bottom: max(48px, calc(90 * var(--px)));
  overflow: hidden;
  color: var(--white);
  background: #1d2a28;
}
.wellness__bg { position: absolute; inset: 0; overflow: hidden; cursor: zoom-in; }
.wellness__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.7)); pointer-events: none; }
.wellness__banner-copy { position: relative; z-index: 1; pointer-events: none; }
.wellness__title { margin-bottom: max(16px, calc(24 * var(--px))); font: 400 max(44px, calc(100 * var(--px))) / 1.2 var(--serif); }
.wellness__banner-copy p { max-width: max(300px, calc(780 * var(--px))); font-size: max(16px, calc(22 * var(--px))); line-height: 1.636; }
.wellness__body { padding: max(64px, calc(110 * var(--px))) 0; }
.wellness__grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.wellness__lines { width: calc(780 * var(--px)); }
.wellness__lines p { font: 200 max(24px, calc(40 * var(--px))) / 1.45 var(--serif); }
.wellness__lines p + p { margin-top: max(24px, calc(40 * var(--px))); padding-top: max(24px, calc(40 * var(--px))); border-top: 1px solid rgba(51, 51, 51, 0.15); }
.wellness__air { width: calc(717 * var(--px)); min-width: 300px; }

/* Lifestyle "Read more" popups (Fancybox inline) */
.life-pops { display: none; }
.life-pop { width: 760px; max-width: 100%; padding: 56px 56px 48px; background: var(--cream); color: var(--ink); font-size: 16px; line-height: 1.75; }
.life-pop > h3 { padding-right: 40px; font-size: 32px; }
.life-pop__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.life-pop__cols > div > * + * { margin-top: 0.75em; }
.life-pop__cols > div > * + h4 { margin-top: 1.5em; }

/* The Future of Luxury - smart homes + sustainability blocks */
.future__heading { width: calc(900 * var(--px)); }
.future__text { width: calc(717 * var(--px)); }
.future__quote { font: 200 max(22px, calc(32 * var(--px))) / 1.5 var(--serif); color: var(--gold); }
.future__block { margin-top: max(72px, calc(150 * var(--px))); padding-top: max(48px, calc(100 * var(--px))); border-top: 1px solid rgba(255, 255, 255, 0.3); }
.future__block-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.future__block-head > :first-child { width: calc(900 * var(--px)); }
.future__block-intro { width: calc(717 * var(--px)); min-width: 300px; }
.future__tagline { margin-top: max(12px, calc(20 * var(--px))); font: 400 max(18px, calc(26 * var(--px))) / 1.5 var(--serif); color: var(--gold); }
.future__block-body { display: flex; justify-content: space-between; align-items: flex-start; margin-top: calc(80 * var(--px)); }
.future__block-media { position: sticky; top: max(90px, calc(130 * var(--px))); width: calc(928 * var(--px)); aspect-ratio: 928 / 720; }
.future-acc__content h4 { color: var(--gold); }
.future-acc__content .dash-list li + li { margin-top: 0.35em; }

/* The Future Ahead - corridor, developments, social infrastructure */
.region { padding: max(64px, calc(120 * var(--px))) 0; }
.region__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.region__heading { width: calc(900 * var(--px)); }
.region__intro { width: calc(717 * var(--px)); min-width: 300px; margin-top: calc(90 * var(--px)); }
.region__devs { margin-top: max(48px, calc(100 * var(--px))); }
.region__label { margin-bottom: max(20px, calc(36 * var(--px))); font: 400 max(20px, calc(28 * var(--px))) / 1.4 var(--serif); }
.dev-list { columns: 4; column-gap: calc(40 * var(--px)); margin: 0; padding: 0; list-style: none; }
.dev-list > li {
  position: relative;
  break-inside: avoid;
  padding: max(14px, calc(20 * var(--px))) 0 max(14px, calc(20 * var(--px))) max(18px, calc(24 * var(--px)));
  border-top: 1px solid rgba(51, 51, 51, 0.15);
  font-size: var(--fs-small);
  line-height: 1.6;
}
/* Bullet, centred on the first line of text: top padding + (line-height 1.6em - bullet 0.44em) / 2 */
.dev-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(max(14px, calc(20 * var(--px))) + 0.58em);
  width: 0.44em;
  height: 0.44em;
  border-radius: 50%;
  background: var(--gold);
}
.dev-list ul { list-style: none; margin: 6px 0 0; padding: 0; }
.dev-list ul li { position: relative; padding-left: 14px; }
.dev-list ul li::before { content: "•"; position: absolute; left: 0; color: var(--gold); }
.region__statement { max-width: calc(1100 * var(--px)); margin: max(56px, calc(110 * var(--px))) auto 0; text-align: center; }
.region__statement-title { margin-bottom: 16px; font: 200 max(30px, calc(60 * var(--px))) / 1.4 var(--serif); }
.region__grid { display: grid; grid-template-columns: 1fr 1fr; gap: max(16px, calc(30 * var(--px))); margin-top: max(56px, calc(110 * var(--px))); }
.info-card { padding: max(28px, calc(50 * var(--px))); background: var(--white); }
.info-card .dash-list { font-size: var(--fs-small); }
.info-card__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px calc(30 * var(--px)); }
.info-card__cols h4 { margin-bottom: 0.5em; }

@media (max-width: 991.98px) {
  .standard { flex-direction: column; gap: 24px; }
  .standard__title { width: auto; min-width: 0; }
  .standard__list { width: 100%; grid-template-columns: 1fr; }

  .intel__head,
  .security__head,
  .future__block-head,
  .region__head,
  .wellness__grid { flex-direction: column; gap: 24px; }
  .intel__title,
  .security__title,
  .future__heading,
  .future__block-head > :first-child,
  .region__heading { width: auto; }
  .intel__text,
  .security__intro,
  .future__block-intro,
  .region__intro,
  .wellness__lines,
  .wellness__air { width: auto; min-width: 0; margin: 0; }
  .intel__row,
  .security__row { grid-template-columns: 1fr; gap: 40px; margin-top: 40px; }
  .security__media { max-width: 520px; }

  .wellness__banner { min-height: 520px; }

  .future__text { width: 100%; }
  .future__block-body { flex-direction: column; gap: 40px; margin-top: 40px; }
  .future__block-media { position: relative; top: auto; width: 100%; }

  .dev-list { columns: 2; }
  .region__grid { grid-template-columns: 1fr; }

  .project-card__text { max-width: none; }
}

@media (max-width: 767.98px) {
  .info-card__cols { grid-template-columns: 1fr; }
  .life-pop { padding: 48px 24px 32px; }
  .life-pop > h3 { font-size: 26px; }
  .life-pop__cols { grid-template-columns: 1fr; }
  /* Arrows would sit on the text - swipe between popups instead */
  .fancybox__container:has(.life-pop) .fancybox__nav { display: none; }
}

@media (max-width: 575.98px) {
  .dev-list { columns: 1; }
}