@font-face {
  font-family: "Gatena";
  src:
    url("../fonts/Gatena.otf") format("opentype"),
    local("Gatena Med"),
    local("Gatena Medium"),
    local("Gatena");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gordita";
  src:
    url("../fonts/Gordita-Font/Gordita-Regular.otf") format("opentype"),
    local("Gordita Regular"),
    local("Gordita");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gordita";
  src:
    url("../fonts/Gordita-Font/Gordita-Medium.otf") format("opentype"),
    local("Gordita Medium"),
    local("Gordita");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gordita";
  src:
    url("../fonts/Gordita-Font/Gordita-Bold.otf") format("opentype"),
    local("Gordita Bold"),
    local("Gordita Semibold"),
    local("Gordita SemiBold"),
    local("Gordita");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #2c2623;
  --charcoal: #262421;
  --chocolate: #30231f;
  --muted: #6e675d;
  --line: #ddd5c8;
  --paper: #fbf8f1;
  --soft: #efe7da;
  --gold: #c7a764;
  --gold-dark: #94763d;
  --green: #30443c;
  --white: #ffffff;
  --shadow: 0 18px 50px rgba(36, 35, 31, 0.16);
  --pattern-strip: url("../patterns/tm-pattern-strip.png");
  --pattern-block: url("../patterns/tm-pattern-block.png");
  --font-headline: "Gatena", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Gordita", "Plus Jakarta Sans", "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-width: 320px;
  max-width: 100%;
  overflow-x: clip;
  opacity: 1;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

html.js body.is-loading {
  opacity: 0;
}

html.js body.is-loaded {
  opacity: 1;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

.site-header {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
  min-height: 72px;
  padding: 12px clamp(18px, 4vw, 54px);
  color: var(--white);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
}

.site-header::after {
  content: "";
  position: absolute;
  left: clamp(54px, 8vw, 150px);
  right: clamp(54px, 8vw, 150px);
  bottom: 7px;
  height: 10px;
  opacity: 0.16;
  background-image: var(--pattern-strip);
  background-repeat: repeat-x;
  background-size: auto 10px;
  pointer-events: none;
  mix-blend-mode: screen;
}





.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-size: 18px; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; }
.brand-logo { width: clamp(142px, 13vw, 178px); height: auto; object-fit: contain; }
.brand-mark { display: grid; place-items: center; width: 24px; height: 44px; font-weight: 700; }
.icon-link { display: grid; place-items: center; width: 42px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.72); font-weight: 700; justify-self: end; }
.brand-lockup { display: grid; gap: 2px; line-height: 1; }
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; }
.brand-subline { color: rgba(255, 255, 255, 0.68); font-size: 8px; font-weight: 500; letter-spacing: 0.46em; }
.nav { display: flex; justify-content: center; gap: clamp(12px, 3vw, 34px); }
.nav a, .icon-link { text-decoration: none; font-size: 14px; font-weight: 500; }
.mobile-menu-toggle { display: none; }

.hero {
  position: relative;
  min-height: 92vh;
  display: grid;
  align-items: end;
  padding: 130px clamp(18px, 5vw, 72px) 36px;
  color: var(--white);
  isolation: isolate;
  background-image: var(--hero-image);
  background-position: center;
  background-size: cover;
}
.hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.74), rgba(0,0,0,.22) 58%, rgba(0,0,0,.5)), linear-gradient(0deg, rgba(0,0,0,.76), transparent 46%); }
.hero__content { width: min(780px, 100%); padding-bottom: 80px; }
.eyebrow { margin: 0 0 13px; color: var(--gold); font-family: var(--font-body); font-size: 13px; font-weight: 700; text-transform: uppercase; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-family: var(--font-headline); font-size: clamp(54px, 9vw, 118px); line-height: .92; font-weight: 500; }
h2 { margin: 0; font-family: var(--font-headline); font-size: clamp(32px, 5vw, 62px); line-height: 1.02; font-weight: 500; }
h3 { margin: 12px 0 10px; font-size: 24px; font-weight: 700; }
.hero__copy { max-width: 650px; margin: 24px 0 0; color: rgba(255,255,255,.88); font-size: clamp(18px, 2vw, 23px); line-height: 1.5; }
.hero__actions, .contact-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 26px; border: 1px solid transparent; border-radius: 999px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: all 300ms ease; }
.button--primary {
  position: relative;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 28px;
  overflow: hidden;
  border: 1px solid rgba(152, 121, 62, .58) !important;
  border-radius: 999px !important;
  color: #fffaf0 !important;
  background: #98793e !important;
  box-shadow: 0 16px 38px rgba(91, 69, 32, .16), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
  font-family: var(--font-body, sans-serif);
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-decoration: none;
  transition: color 350ms ease, background-color 350ms ease, border-color 350ms ease, box-shadow 350ms ease, transform 350ms ease;
}
.button--primary:hover,
.button--primary:focus-visible {
  border-color: #755b2d !important;
  background: #755b2d !important;
  color: #fffaf0 !important;
  box-shadow: 0 18px 42px rgba(91, 69, 32, .24) !important;
  transform: translateY(-1px);
}
.button--primary::after {
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  content: "";
  transform: rotate(45deg);
  display: inline-block;
  margin-left: 2px;
  flex-shrink: 0;
}
.button--ghost { color: var(--white); border-color: rgba(255,255,255,.74); background: rgba(255,255,255,.08); border-radius: 999px; }
.hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; width: min(860px, 100%); background: rgba(255,255,255,.28); }
.hero__facts div { padding: 18px; background: rgba(16,17,15,.72); }
.hero__facts strong, .hero__facts span { display: block; }
.hero__facts strong { font-size: 24px; }
.hero__facts span { margin-top: 4px; color: rgba(255,255,255,.72); }

.section { padding: clamp(58px, 8vw, 110px) clamp(18px, 5vw, 72px); }
.intro, .location-band, .enquire { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(28px, 6vw, 82px); align-items: start; }
.intro p, .location-band p, .enquire__copy p, .plan p { color: var(--muted); font-size: 17px; line-height: 1.7; }
.section-heading { max-width: 880px; margin-bottom: 28px; }
.gallery-section, .amenities { background: var(--soft); }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gallery-card { position: relative; min-height: 300px; padding: 0; border: 0; border-radius: 4px; overflow: hidden; color: var(--white); background: var(--ink); cursor: pointer; box-shadow: var(--shadow); }
.gallery-card img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; transition: transform 240ms ease; }
.gallery-card:hover img { transform: scale(1.04); }
.gallery-card span { position: absolute; left: 14px; bottom: 14px; padding: 8px 10px; border-radius: 4px; background: rgba(0,0,0,.58); font-weight: 700; max-width: calc(100% - 28px); }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.plan { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1fr); gap: 18px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); }
.plan img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: var(--soft); }
.badge { display: inline-block; padding: 6px 9px; border-radius: 99px; color: var(--gold-dark); background: #f4ead4; font-size: 12px; font-weight: 700; }
.text-link { color: var(--gold-dark); font-weight: 700; }
.feature-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; background: var(--line); }
.feature-grid li { min-height: 118px; display: flex; align-items: end; padding: 20px; background: var(--paper); font-size: 19px; font-weight: 700; }
.location-band { color: var(--white); background: var(--green); }
.location-band p { color: rgba(255,255,255,.76); }
.lead-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 22px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); box-shadow: var(--shadow); }
label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 700; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 4px; padding: 12px 13px; color: var(--ink); background: var(--paper); font: inherit; }
textarea { resize: vertical; }
.span-2 { grid-column: 1 / -1; }
.consent { grid-template-columns: auto 1fr; align-items: start; color: var(--muted); font-weight: 400; line-height: 1.5; }
.consent input { width: 18px; height: 18px; margin-top: 2px; }
.hidden-field { position: absolute; left: -9999px; }
.asset-protection img,
.asset-protection video,
.asset-protection canvas,
.asset-protection svg {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
.footer { display: flex; justify-content: space-between; gap: 16px; padding: 22px clamp(18px, 5vw, 72px); color: var(--white); background: var(--ink); }
.footer p { font-size: 12px; font-weight: 400; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 16px; }
.footer__links a { color: rgba(255,255,255,.72); font-size: 11px; font-weight: 400; text-decoration: none; }
.footer__links a:hover { color: var(--white); }
.cookie { position: fixed; z-index: 30; right: 18px; bottom: 18px; width: min(420px, calc(100% - 36px)); padding: 16px; border-radius: 6px; background: var(--ink); color: var(--white); box-shadow: var(--shadow); }
.cookie p { margin: 0 0 12px; color: rgba(255,255,255,.8); }
.cookie button, .lightbox__close, .lead-popup__close { border: 0; border-radius: 4px; padding: 10px 13px; color: var(--white); background: var(--gold-dark); font-weight: 700; cursor: pointer; }
.lightbox { width: min(1100px, calc(100vw - 28px)); border: 0; border-radius: 6px; padding: 0; background: var(--ink); color: var(--white); }
.lightbox::backdrop { background: rgba(0,0,0,.76); }
.lightbox img { width: 100%; max-height: 78vh; object-fit: contain; }
.lightbox p { margin: 0; padding: 14px 18px 18px; }
.lightbox__close { position: absolute; top: 12px; right: 12px; }
.lead-popup {
  width: min(940px, calc(100vw - 30px));
  border: 1px solid rgba(199, 167, 100, 0.38);
  border-radius: 0;
  padding: 0;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(251, 248, 241, 0.96), rgba(239, 231, 218, 0.94)),
    var(--paper);
  box-shadow: 0 36px 120px rgba(0, 0, 0, 0.38);
}

.lead-popup::backdrop {
  background: rgba(16, 13, 11, 0.72);
  backdrop-filter: blur(6px);
}

.lead-popup[open] {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(320px, 1fr);
}

.lead-popup__copy {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 4vw, 48px);
  color: var(--white);
  background:
    linear-gradient(145deg, rgba(48, 35, 31, 0.96), rgba(38, 36, 33, 0.98));
}

.lead-popup__copy::after {
  content: "";
  position: absolute;
  left: clamp(22px, 4vw, 46px);
  right: clamp(22px, 4vw, 46px);
  bottom: 28px;
  height: 46px;
  background: var(--pattern-strip) center / contain repeat-x;
  opacity: 0.09;
}

.lead-popup__copy .eyebrow {
  color: var(--gold, #c7a764);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.lead-popup__copy h2 {
  margin: 0 0 12px !important;
  font-family: var(--font-headline);
  font-size: clamp(22px, 2.2vw, 32px) !important;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: #ffffff;
}

.lead-popup__copy p:not(.eyebrow) {
  max-width: 320px;
  font-size: 13px;
  font-weight: 350;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}

.lead-form--popup {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: clamp(22px, 3vw, 38px);
}

.lead-popup__close {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  min-width: 38px;
  aspect-ratio: 1;
  padding: 0;
}
.simple-page { min-height: 100vh; display: grid; place-items: center; padding: 22px; background: var(--soft); }
.simple-panel { width: min(620px, 100%); padding: clamp(28px, 6vw, 54px); border-radius: 6px; background: var(--white); box-shadow: var(--shadow); }
.simple-panel h1 { color: var(--ink); font-size: clamp(42px, 8vw, 72px); }
.simple-panel p { color: var(--muted); line-height: 1.7; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .intro, .location-band, .enquire, .plans, .gallery { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .site-header { min-height: 62px; padding: 10px 14px; }
  .brand { font-size: 15px; }
  .hero { min-height: 88vh; padding: 110px 16px 22px; }
  .hero__content { padding-bottom: 34px; }
  .hero__facts, .feature-grid, .lead-form, .plan { grid-template-columns: 1fr; }
  .gallery-card, .gallery-card img { min-height: 240px; }
  .footer { display: grid; }
  .lead-popup[open] { grid-template-columns: 1fr; }
  .lead-popup__copy { padding: 28px 22px 20px; }
  .lead-popup__copy::after { display: none; }
  .lead-popup__copy h2 { font-size: clamp(30px, 10vw, 42px); }
}

/* Ultra-modern exterior-led landing experience */
:root {
  --charcoal: #262421;
  --metal: #ded8cd;
  --warm-light: #c7a764;
}

body {
  background: #0a0a09;
}

.site-header {
  min-height: 68px;
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
}

.brand {
  font-size: 14px;
  font-weight: 700;
}

.nav a,
.icon-link {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
}

.scroll-showcase {
  position: relative;
  height: 210vh;
  color: #fff;
  background: #050505;
  --showcase-progress: 0;
}

.showcase-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.showcase-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 80% 18%, rgba(217, 177, 109, 0.2), transparent 26%),
    radial-gradient(circle at 18% 70%, rgba(79, 93, 92, 0.26), transparent 26%),
    linear-gradient(135deg, #070706 0%, #13120f 52%, #030303 100%);
}

.showcase-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), transparent 54%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.86), transparent 34%);
}

.showcase-grid {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(24px, 4vw, 62px);
  padding: 96px clamp(18px, 5vw, 72px) 42px;
}

.showcase-copy {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.showcase-copy--hero {
  opacity: calc(1 - var(--showcase-progress));
  transform: translateY(calc(var(--showcase-progress) * -40px));
}

.showcase-copy--second {
  position: absolute;
  left: clamp(18px, 5vw, 72px);
  bottom: clamp(76px, 11vh, 136px);
  width: min(760px, calc(100vw - 36px));
  opacity: var(--showcase-progress);
  transform: translateY(calc((1 - var(--showcase-progress)) * 46px));
  pointer-events: none;
}

.showcase-copy--second p {
  max-width: 660px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 17px;
  line-height: 1.7;
}

.showcase-copy h1 {
  max-width: 850px;
  font-size: clamp(74px, 12vw, 178px);
  font-weight: 600;
  letter-spacing: 0;
}

.showcase-copy h2 {
  max-width: 760px;
  color: #fff;
  font-size: clamp(42px, 6vw, 86px);
}

.showcase-copy .hero__copy {
  max-width: 680px;
  color: rgba(255, 255, 255, 0.76);
}

.showcase-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.showcase-building {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  filter: drop-shadow(0 36px 54px rgba(0, 0, 0, 0.62));
  will-change: transform, opacity;
}

.showcase-building--main {
  right: calc(-10vw + (var(--showcase-progress) * -13vw));
  bottom: calc(-6vh + (var(--showcase-progress) * 12vh));
  width: calc(78vw - (var(--showcase-progress) * 19vw));
  transform:
    translateY(calc(var(--showcase-progress) * -5vh))
    scale(calc(1 + (var(--showcase-progress) * 0.05)));
}

.showcase-building--gate {
  right: calc(-30vw + (var(--showcase-progress) * 19vw));
  bottom: calc(-11vh + (var(--showcase-progress) * 6vh));
  width: calc(77vw - (var(--showcase-progress) * 18vw));
  opacity: calc(0.03 + (var(--showcase-progress) * 0.92));
  transform: translateX(calc((1 - var(--showcase-progress)) * 14vw));
}

.showcase-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  width: min(700px, 100%);
  margin-top: 26px;
  background: rgba(255, 255, 255, 0.16);
}

.showcase-facts div {
  padding: 15px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
}

.showcase-facts strong,
.showcase-facts span {
  display: block;
}

.showcase-facts strong {
  font-size: 22px;
}

.showcase-facts span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
}

.scroll-cue {
  position: absolute;
  left: clamp(18px, 5vw, 72px);
  bottom: 24px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  text-transform: uppercase;
}

.scroll-cue span {
  width: 34px;
  height: 1px;
  background: rgba(255, 255, 255, 0.46);
}

.architecture-strip {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(24px, 5vw, 70px);
  color: #fff;
  background:
    linear-gradient(180deg, #050505, #11100e 44%, #f8f5ef 44%, #f8f5ef 100%);
}

.architecture-strip h2 {
  color: #fff;
}

.architecture-strip__images {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.architecture-strip__images img {
  width: 100%;
  max-height: 58vh;
  object-fit: contain;
  filter: drop-shadow(0 26px 36px rgba(0, 0, 0, 0.32));
}

  opacity: 0.07;
  mix-blend-mode: screen;
}

.enquire::before {
  width: min(680px, 54vw);
  opacity: 0.06;
}

.location-band {
  background: #11100e;
}

@media (max-width: 900px) {
  .showcase-grid {
    grid-template-columns: 1fr;
    align-items: start;
    padding-top: 108px;
  }

  .showcase-copy h1 {
    font-size: clamp(58px, 17vw, 112px);
  }

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

  .showcase-building--main {
    right: calc(-48vw + (var(--showcase-progress) * -8vw));
    bottom: calc(3vh + (var(--showcase-progress) * 12vh));
    width: calc(142vw - (var(--showcase-progress) * 34vw));
  }

  .showcase-building--gate {
    right: calc(-80vw + (var(--showcase-progress) * 34vw));
    bottom: calc(-3vh + (var(--showcase-progress) * 7vh));
    width: calc(150vw - (var(--showcase-progress) * 42vw));
  }

  .showcase-copy--second {
    bottom: 74px;
  }

  .showcase-facts,
  .architecture-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .scroll-showcase {
    height: 190vh;
  }

  .showcase-grid {
    padding: 94px 16px 28px;
  }

  .showcase-copy h1 {
    font-size: clamp(52px, 18vw, 82px);
  }

  .showcase-copy h2 {
    font-size: clamp(34px, 12vw, 58px);
  }

  .showcase-copy .hero__copy,
  .showcase-copy--second p {
    font-size: 15px;
  }

  .showcase-facts {
    grid-template-columns: 1fr;
  }
}

/* Shared-image scroll transfer: hero image moves into the next section */
.transfer-scene {
  --transfer-progress: 0;
  position: relative;
  height: 230vh;
  color: #fff;
  background: #060605;
}

.transfer-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  isolation: isolate;
}

.transfer-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 72% 18%, rgba(217, 177, 109, 0.18), transparent 30%),
    linear-gradient(145deg, #050505 0%, #11100d 48%, #060605 100%);
}

.transfer-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.12) 58%, rgba(0, 0, 0, 0.64)),
    linear-gradient(0deg, rgba(0, 0, 0, 0.9), transparent 45%);
}

.transfer-hero-copy {
  position: absolute;
  z-index: 3;
  left: clamp(18px, 5vw, 72px);
  top: clamp(108px, 17vh, 170px);
  width: min(740px, calc(100vw - 36px));
  opacity: calc(1 - min(1, var(--transfer-progress) * 1.55));
  transform: translateY(calc(var(--transfer-progress) * -54px));
}

.transfer-hero-copy h1 {
  margin: 0;
  font-size: clamp(70px, 12vw, 172px);
  line-height: 0.86;
  font-weight: 600;
}

.transfer-hero-copy p:not(.eyebrow) {
  max-width: 620px;
  color: rgba(255, 255, 255, 0.74);
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.55;
}

.transfer-image {
  position: absolute;
  z-index: 2;
  right: calc(-12vw + var(--transfer-progress) * -18vw);
  top: calc(19vh + var(--transfer-progress) * 43vh);
  width: calc(78vw - var(--transfer-progress) * 32vw);
  margin: 0;
  transform:
    translateY(calc(var(--transfer-progress) * -50%))
    scale(calc(1 - var(--transfer-progress) * 0.04));
  transform-origin: 68% 64%;
  filter: drop-shadow(0 40px 54px rgba(0, 0, 0, 0.62));
  will-change: top, right, width, transform;
}

.transfer-image img {
  width: 100%;
  max-width: none;
}

.transfer-next {
  position: absolute;
  inset: auto clamp(18px, 5vw, 72px) 42px clamp(18px, 5vw, 72px);
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(280px, 0.86fr);
  gap: clamp(26px, 6vw, 88px);
  align-items: end;
  padding-top: 42px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  opacity: clamp(0, calc((var(--transfer-progress) - 0.42) * 2.2), 1);
  transform: translateY(calc((1 - var(--transfer-progress)) * 50px));
}

.transfer-next__copy {
  position: relative;
  z-index: 3;
}

.transfer-next__copy h2 {
  color: #fff;
  font-size: clamp(36px, 5.4vw, 78px);
}

.transfer-next__copy p {
  max-width: 620px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 16px;
  line-height: 1.7;
}

.transfer-next__dock {
  min-height: 39vh;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.transfer-next__facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.13);
}

.transfer-next__facts div {
  padding: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.transfer-next__facts strong,
.transfer-next__facts span {
  display: block;
}

.transfer-next__facts strong {
  font-size: 21px;
}

.transfer-next__facts span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
}

.transfer-progress {
  position: absolute;
  z-index: 5;
  left: clamp(18px, 5vw, 72px);
  bottom: 20px;
  width: 120px;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.transfer-progress span {
  display: block;
  width: calc(var(--transfer-progress) * 100%);
  height: 100%;
  background: #d9b16d;
}

.exterior-board {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(28px, 4vw, 62px);
  align-items: center;
  color: #11100d;
  background:
    linear-gradient(90deg, rgba(23, 21, 18, 0.04), transparent 26%),
    radial-gradient(circle at 76% 30%, rgba(180, 155, 104, 0.16), transparent 28%),
    #f8f5ef;
  overflow: hidden;
}

.exterior-board::before {
  display: none;
}

.exterior-board::after {
  display: none;
}

.exterior-board__copy {
  position: relative;
  z-index: 1;
  max-width: 460px;
}

.exterior-board__copy h2 {
  font-size: clamp(30px, 3.2vw, 52px);
  line-height: 1.05;
  color: rgba(23, 21, 18, 0.88);
}

.exterior-board__copy > p:not(.eyebrow) {
  margin: 18px 0 0;
  color: rgba(23, 21, 18, 0.62);
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.65;
}

.exterior-board__controls {
  display: grid;
  gap: 10px;
  margin-top: clamp(24px, 3vw, 38px);
}

.exterior-board__controls button {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 13px;
  min-height: 54px;
  padding: 12px 16px;
  border: 1px solid rgba(36, 35, 31, 0.1);
  border-radius: 2px;
  color: rgba(23, 21, 18, 0.58);
  background: rgba(255, 255, 255, 0.24);
  font: 700 14px/1 var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: transform 180ms ease, color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.exterior-board__controls button span {
  color: var(--gold-dark);
  font-size: 12px;
}

.exterior-board__controls button:hover,
.exterior-board__controls button.is-active {
  color: #171512;
  border-color: rgba(125, 103, 60, 0.36);
  background: rgba(255, 255, 255, 0.56);
  transform: translateX(6px);
}

.exterior-board__stage {
  position: relative;
  z-index: 1;
  min-height: clamp(460px, 49vw, 660px);
  display: grid;
  align-items: center;
  isolation: isolate;
}

.exterior-board__stage::before {
  content: "";
  position: absolute;
  inset: 6% 2% 10% 12%;
  z-index: -1;
  border: 1px solid rgba(125, 103, 60, 0.16);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
}

.exterior-board__visual {
  position: relative;
  margin: 0;
  min-height: clamp(380px, 42vw, 590px);
  display: grid;
  align-items: center;
  overflow: hidden;
}

.exterior-board__visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(248, 245, 239, 0), #f8f5ef 92%);
}

.exterior-board__visual img {
  width: 100%;
  height: clamp(380px, 42vw, 590px);
  max-height: none;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.96) contrast(1.02);
  transform-origin: center;
  transition: opacity 220ms ease, transform 420ms cubic-bezier(.2, .8, .2, 1);
}

.exterior-board__visual img.is-changing {
  opacity: 0;
  transform: translateY(16px) scale(0.985);
}

.exterior-board__caption {
  position: absolute;
  right: clamp(16px, 2vw, 34px);
  bottom: clamp(18px, 2.6vw, 42px);
  width: min(340px, 40%);
  padding: 18px 20px;
  border-left: 2px solid var(--gold-dark);
  color: #171512;
  background: rgba(248, 245, 239, 0.74);
  box-shadow: 0 18px 44px rgba(36, 35, 31, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.exterior-board__caption::before {
  display: none;
}

.exterior-board__caption span {
  display: block;
  margin-bottom: 9px;
  color: var(--gold-dark);
  font: 700 12px/1 var(--font-body);
}

.exterior-board__caption strong {
  display: block;
  font: 700 clamp(18px, 1.5vw, 24px)/1.1 var(--font-body);
}

.exterior-board__caption p {
  margin: 10px 0 0;
  color: rgba(23, 21, 18, 0.64);
  font-size: 15px;
  line-height: 1.55;
}
  .transfer-sticky {
    min-height: 640px;
  }

  .transfer-hero-copy {
    top: 96px;
  }

  .transfer-image {
    right: calc(-58vw + var(--transfer-progress) * -18vw);
    top: calc(42vh + var(--transfer-progress) * 32vh);
    width: calc(142vw - var(--transfer-progress) * 50vw);
  }

  .transfer-next {
    grid-template-columns: 1fr;
    bottom: 28px;
  }

  .transfer-next__dock {
    min-height: 26vh;
  }

  .transfer-next__facts,
  .exterior-board {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .transfer-scene {
    height: 210vh;
  }

  .transfer-hero-copy h1 {
    font-size: clamp(50px, 18vw, 82px);
  }

  .transfer-hero-copy p:not(.eyebrow),
  .transfer-next__copy p {
    font-size: 14px;
  }

  .transfer-next__facts {
    display: none;
  }
}

/* Sketch-directed hero transfer: top-right image travels into lower feature panel */
.transfer-scene {
  height: 225vh;
  background: #f4f1ea;
  color: #171512;
}

.transfer-sticky {
  height: 100vh;
  min-height: 680px;
  background:
    radial-gradient(circle at 74% 18%, rgba(180, 155, 104, 0.18), transparent 26%),
    linear-gradient(135deg, #fffdf8 0%, #f0ebe2 100%);
}

.transfer-background,
.transfer-background::before {
  background: none;
}

.transfer-sticky::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(36, 35, 31, 0.08);
  pointer-events: none;
}

.transfer-hero-copy {
  left: clamp(22px, 6vw, 86px);
  top: clamp(116px, 22vh, 190px);
  width: min(470px, 42vw);
  z-index: 12;
  color: #171512;
  opacity: calc(1 - min(1, var(--transfer-progress) * 1.65));
}

.transfer-hero-copy h1 {
  font-size: clamp(52px, 7vw, 112px);
  line-height: 0.9;
}

.transfer-hero-copy p:not(.eyebrow) {
  color: rgba(23, 21, 18, 0.68);
  font-size: 16px;
}

.transfer-hero-copy .button--ghost {
  color: #171512;
  border-color: rgba(23, 21, 18, 0.24);
  background: rgba(255, 255, 255, 0.36);
}

.transfer-image {
  left: calc(55vw - var(--transfer-progress) * 25vw);
  right: auto;
  top: calc(11vh + var(--transfer-progress) * 43vh);
  width: calc(34vw - var(--transfer-progress) * 12vw);
  aspect-ratio: calc(16 - var(--transfer-progress) * 7) / calc(10 + var(--transfer-progress) * 6);
  display: grid;
  place-items: center;
  padding: clamp(8px, 1vw, 14px);
  border: 1px solid rgba(23, 21, 18, 0.16);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.56)),
    #ebe5da;
  box-shadow: 0 28px 70px rgba(23, 21, 18, 0.2);
  transform: translateY(0) scale(1);
  transform-origin: center;
  overflow: hidden;
}

.transfer-image::before,
.transfer-image::after {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
}

.transfer-image::before {
  border: 1px solid rgba(23, 21, 18, 0.09);
}

.transfer-image::after {
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), rgba(23, 21, 18, 0.18) calc(50% - 1px), rgba(23, 21, 18, 0.18) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), rgba(23, 21, 18, 0.14) calc(50% - 1px), rgba(23, 21, 18, 0.14) calc(50% + 1px), transparent calc(50% + 1px));
  opacity: calc(0.18 - var(--transfer-progress) * 0.14);
}

.transfer-image img {
  position: relative;
  z-index: 1;
  width: 118%;
  height: 118%;
  object-fit: contain;
}

.transfer-destination {
  position: absolute;
  left: 30vw;
  top: 55vh;
  width: 22vw;
  max-width: 360px;
  min-width: 220px;
  aspect-ratio: 7 / 9;
  border: 1px solid rgba(23, 21, 18, 0.16);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
  opacity: calc(var(--transfer-progress) * 0.62);
}

.transfer-feature,
.transfer-next-copy {
  opacity: clamp(0, calc((var(--transfer-progress) - 0.45) * 2.4), 1);
  transform: translateY(calc((1 - var(--transfer-progress)) * 24px));
}

.transfer-feature {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 8px;
  color: #171512;
  font-size: 15px;
  font-weight: 700;
}

.transfer-feature span {
  display: block;
  width: clamp(70px, 10vw, 140px);
  height: 3px;
  background: #171512;
}

.transfer-feature--left {
  justify-items: end;
  text-align: right;
}

.transfer-feature--right {
  justify-items: start;
}

.transfer-feature--one {
  left: clamp(22px, 6vw, 86px);
  top: 58vh;
}

.transfer-feature--two {
  left: clamp(36px, 9vw, 140px);
  top: 70vh;
}

.transfer-feature--three {
  left: min(63vw, 820px);
  top: 58vh;
}

.transfer-feature--four {
  left: min(67vw, 900px);
  top: 70vh;
}

.transfer-next-copy {
  position: absolute;
  right: clamp(22px, 6vw, 82px);
  bottom: 8vh;
  width: min(390px, 33vw);
  color: #171512;
}

.transfer-next-copy h2 {
  color: #171512;
  font-size: clamp(28px, 3.6vw, 54px);
}

.transfer-next-copy p:not(.eyebrow) {
  color: rgba(23, 21, 18, 0.62);
  font-size: 15px;
  line-height: 1.65;
}

.transfer-progress {
  left: clamp(22px, 6vw, 86px);
  bottom: 24px;
  background: rgba(23, 21, 18, 0.18);
}

.transfer-progress span {
  background: #171512;
}

@media (max-width: 900px) {
  .transfer-hero-copy {
    width: min(520px, calc(100vw - 32px));
  }

  .transfer-image {
    left: calc(12vw + var(--transfer-progress) * 13vw);
    top: calc(38vh + var(--transfer-progress) * 18vh);
    width: calc(76vw - var(--transfer-progress) * 30vw);
  }

  .transfer-destination {
    left: 25vw;
    top: 57vh;
    width: 46vw;
  }

  .transfer-feature {
    display: none;
  }

  .transfer-next-copy {
    left: 16px;
    right: auto;
    bottom: 8vh;
    width: calc(100vw - 32px);
  }
}

/* Composition tune: keep transfer motion, clean alignment only */
.transfer-hero-copy {
  top: clamp(145px, 22vh, 205px);
  width: min(640px, 43vw);
}

.transfer-hero-copy h1 {
  max-width: 680px;
  font-size: clamp(56px, 6.7vw, 118px);
  line-height: 0.92;
  overflow-wrap: normal;
  word-break: normal;
}

.transfer-hero-copy p:not(.eyebrow) {
  max-width: 520px;
}

.transfer-image {
  left: calc(49vw + (var(--transfer-progress) * -18vw));
  top: calc(14vh + (var(--transfer-progress) * 39vh));
  width: calc(52vw - (var(--transfer-progress) * 18vw));
}

.transfer-feature {
  width: min(280px, 23vw);
  z-index: 4;
}

.transfer-feature--one {
  left: clamp(40px, 8vw, 150px);
  top: 57vh;
}

.transfer-feature--two {
  left: clamp(72px, 12vw, 230px);
  top: 70vh;
}

.transfer-feature--three {
  right: clamp(110px, 14vw, 250px);
  top: 57vh;
}

.transfer-feature--four {
  right: clamp(70px, 10vw, 180px);
  top: 70vh;
}

.transfer-next-copy {
  top: clamp(118px, 17vh, 170px);
  right: clamp(38px, 6vw, 94px);
  bottom: auto;
  width: min(420px, 31vw);
}

.transfer-next-copy h2 {
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1.02;
  overflow-wrap: normal;
  word-break: normal;
}

.transfer-next-copy p:not(.eyebrow) {
  max-width: 360px;
}

@media (min-width: 1180px) {
  .transfer-image {
    left: calc(50vw + (var(--transfer-progress) * -19vw));
    top: calc(13vh + (var(--transfer-progress) * 40vh));
    width: calc(50vw - (var(--transfer-progress) * 17vw));
  }
}

@media (max-width: 900px) {
  .transfer-hero-copy {
    width: min(560px, calc(100vw - 32px));
  }

  .transfer-hero-copy h1 {
    font-size: clamp(48px, 14vw, 82px);
  }

  .transfer-image {
    left: calc(8vw + var(--transfer-progress) * 17vw);
    top: calc(34vh + var(--transfer-progress) * 22vh);
    width: calc(88vw - var(--transfer-progress) * 38vw);
  }

  .transfer-next-copy {
    top: auto;
    right: auto;
    left: 16px;
    bottom: 8vh;
    width: calc(100vw - 32px);
  }
}

/* Final alignment: transparent PNG transfer, centered feature composition */
.transfer-sticky {
  background:
    radial-gradient(circle at 78% 18%, rgba(217, 177, 109, 0.18), transparent 26%),
    radial-gradient(circle at 44% 74%, rgba(25, 24, 22, 0.08), transparent 32%),
    linear-gradient(135deg, #f6f1e8 0%, #ede5d8 52%, #d8cec0 100%);
}

.transfer-sticky::before {
  border-color: rgba(23, 21, 18, 0.06);
}

.transfer-sticky::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: clamp(20px, 4vw, 70px);
  top: clamp(88px, 14vh, 150px);
  width: min(360px, 22vw);
  aspect-ratio: 2 / 1;
  opacity: calc((1 - var(--transfer-progress)) * 0.045);
  background-image: var(--pattern-block);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

.transfer-background::after {
  content: "";
  position: absolute;
  right: clamp(20px, 4vw, 70px);
  top: clamp(88px, 14vh, 150px);
  width: min(360px, 22vw);
  aspect-ratio: 2 / 1;
  opacity: calc((1 - var(--transfer-progress)) * 0.045);
  background-image: var(--pattern-block);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

.transfer-hero-copy {
  top: clamp(112px, 21vh, 178px);
  width: min(520px, 42vw);
}

.transfer-hero-copy h1 {
  font-size: clamp(64px, 8vw, 128px);
}

.transfer-image {
  left: calc(50vw + (var(--transfer-progress) * -19vw));
  top: calc(10vh + (var(--transfer-progress) * 43vh));
  width: calc(42vw - (var(--transfer-progress) * 12vw));
  aspect-ratio: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 32px 36px rgba(23, 21, 18, 0.24));
  overflow: visible;
}

.transfer-image::before,
.transfer-image::after,
.transfer-destination {
  display: none;
}

.transfer-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.transfer-feature {
  width: min(260px, 22vw);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.25;
}

.transfer-feature span {
  width: min(150px, 12vw);
  height: 2px;
}

.transfer-feature--one {
  left: clamp(36px, 8vw, 130px);
  top: 56vh;
}

.transfer-feature--two {
  left: clamp(56px, 11vw, 190px);
  top: 69vh;
}

.transfer-feature--three {
  left: auto;
  right: clamp(52px, 10vw, 170px);
  top: 56vh;
}

.transfer-feature--four {
  left: auto;
  right: clamp(32px, 7vw, 120px);
  top: 69vh;
}

.transfer-feature--right {
  grid-template-columns: 1fr;
}

.transfer-feature--right span {
  order: 2;
}

.transfer-feature--right strong {
  order: 1;
}

.transfer-next-copy {
  right: clamp(26px, 5vw, 72px);
  bottom: 7vh;
  width: min(360px, 28vw);
}

.transfer-next-copy h2 {
  font-size: clamp(30px, 3.2vw, 50px);
}

@media (max-width: 900px) {
  .transfer-image {
    left: calc(8vw + var(--transfer-progress) * 17vw);
    top: calc(34vh + var(--transfer-progress) * 22vh);
    width: calc(88vw - var(--transfer-progress) * 38vw);
  }

  .transfer-next-copy {
    right: auto;
    left: 16px;
    bottom: 8vh;
    width: calc(100vw - 32px);
  }
}

/* Professional composition lock: centered transfer image with balanced feature text */
.transfer-hero-copy {
  left: clamp(56px, 4.5vw, 86px);
  top: clamp(132px, 22vh, 190px);
  width: min(560px, 43vw);
}

.transfer-hero-copy h1 {
  max-width: 10.5ch;
  font-size: clamp(54px, 5.3vw, 92px);
  line-height: 0.94;
  letter-spacing: 0;
  font-weight: 500;
}

.transfer-hero-copy p:not(.eyebrow) {
  max-width: 520px;
  font-size: clamp(16px, 1.05vw, 19px);
  line-height: 1.55;
}

.transfer-image {
  left: calc(71vw - (var(--transfer-progress) * 21vw));
  top: calc(12vh + (var(--transfer-progress) * 41vh));
  width: calc(44vw - (var(--transfer-progress) * 8vw));
  transform: translateX(-50%);
  filter: drop-shadow(0 34px 36px rgba(23, 21, 18, 0.2));
}

.transfer-image img {
  display: block;
}

.transfer-feature {
  width: min(260px, 20vw);
  color: #171512;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.12;
  letter-spacing: 0;
}

.transfer-feature strong {
  font-weight: 800;
}

.transfer-feature span {
  width: clamp(74px, 8vw, 150px);
  height: 2px;
  background: #171512;
}

.transfer-feature--left {
  justify-items: end;
  text-align: right;
}

.transfer-feature--right {
  justify-items: start;
  text-align: left;
}

.transfer-feature--one {
  left: clamp(62px, 9vw, 170px);
  top: 57vh;
}

.transfer-feature--two {
  left: clamp(70px, 11vw, 220px);
  top: 69vh;
}

.transfer-feature--three {
  right: clamp(70px, 11vw, 210px);
  top: 57vh;
}

.transfer-feature--four {
  right: clamp(58px, 9vw, 170px);
  top: 69vh;
}

.transfer-next-copy {
  left: 50%;
  right: auto;
  top: 42vh;
  bottom: auto;
  width: min(470px, 34vw);
  text-align: center;
  transform: translateX(-50%) translateY(calc((1 - var(--transfer-progress)) * 18px));
}

.transfer-next-copy .eyebrow {
  margin-bottom: 8px;
}

.transfer-next-copy h2 {
  font-size: clamp(26px, 2.35vw, 42px);
  line-height: 1.02;
}

.transfer-next-copy p:not(.eyebrow) {
  display: none;
}

@media (min-width: 1400px) {
  .transfer-image {
    width: calc(43vw - (var(--transfer-progress) * 7vw));
  }
}

@media (max-width: 900px) {
  .transfer-hero-copy {
    left: 18px;
    top: 116px;
    width: calc(100vw - 36px);
  }

  .transfer-hero-copy h1 {
    max-width: 7ch;
    font-size: clamp(54px, 14vw, 86px);
  }

  .transfer-image {
    left: calc(50vw + (1 - var(--transfer-progress)) * 16vw);
    top: calc(36vh + var(--transfer-progress) * 18vh);
    width: calc(86vw - var(--transfer-progress) * 22vw);
    transform: translateX(-50%);
  }

  .transfer-feature {
    display: none;
  }

  .transfer-next-copy {
    top: auto;
    left: 18px;
    bottom: 8vh;
    width: calc(100vw - 36px);
    text-align: left;
    transform: translateY(calc((1 - var(--transfer-progress)) * 18px));
  }
}

/* Direct alignment fix: no top-heavy hero, image centers cleanly on the page */
.transfer-hero-copy {
  top: clamp(170px, 28vh, 250px);
}

.transfer-image {
  left: calc(72vw - (var(--transfer-progress) * 22vw));
  top: calc(22vh + (var(--transfer-progress) * 31vh));
  width: calc(43vw - (var(--transfer-progress) * 7vw));
  transform: translateX(-50%);
}

.transfer-next-copy {
  top: 38vh;
}

.transfer-feature--one,
.transfer-feature--three {
  top: 55vh;
}

.transfer-feature--two,
.transfer-feature--four {
  top: 67vh;
}

@media (min-width: 1400px) {
  .transfer-image {
    left: calc(72vw - (var(--transfer-progress) * 22vw));
    top: calc(21vh + (var(--transfer-progress) * 31vh));
    width: calc(43vw - (var(--transfer-progress) * 7vw));
  }
}

@media (max-width: 900px) {
  .transfer-hero-copy {
    top: 128px;
  }

  .transfer-image {
    left: calc(50vw + (1 - var(--transfer-progress)) * 12vw);
    top: calc(40vh + var(--transfer-progress) * 13vh);
    width: calc(84vw - var(--transfer-progress) * 22vw);
  }
}

/* Bigger bottom-set building with a soft background fade over the base */
.transfer-image {
  left: calc(72vw - (var(--transfer-progress) * 22vw));
  top: calc(25vh + (var(--transfer-progress) * 30vh));
  width: calc(52vw - (var(--transfer-progress) * 7vw));
  transform: translateX(-50%);
  position: absolute;
}

.transfer-image::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  left: -2%;
  right: -2%;
  bottom: -1px;
  height: 26%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(232, 224, 211, 0) 0%,
    rgba(232, 224, 211, 0.58) 54%,
    #e4dacb 100%
  );
}

@media (min-width: 1400px) {
  .transfer-image {
    top: calc(24vh + (var(--transfer-progress) * 30vh));
    width: calc(53vw - (var(--transfer-progress) * 7vw));
  }
}

@media (max-width: 900px) {
  .transfer-image {
    left: calc(50vw + (1 - var(--transfer-progress)) * 10vw);
    top: calc(42vh + var(--transfer-progress) * 12vh);
    width: calc(98vw - var(--transfer-progress) * 24vw);
  }

  .transfer-image::after {
    height: 30%;
  }
}

/* Bottom anchored hero: remove lower gap and blend the building base into background */
.transfer-sticky::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 44vw;
  right: 0;
  bottom: 0;
  height: 22vh;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(229, 220, 207, 0) 0%,
    rgba(229, 220, 207, 0.7) 62%,
    #e3d9ca 100%
  );
}

.transfer-image {
  left: calc(72vw - (var(--transfer-progress) * 22vw));
  top: auto !important;
  bottom: calc(0px - (var(--transfer-progress) * 8vh));
  width: calc(56vw - (var(--transfer-progress) * 8vw));
  transform: translateX(-50%);
}

.transfer-image::after {
  display: none;
}

@media (min-width: 1400px) {
  .transfer-image {
    bottom: calc(0px - (var(--transfer-progress) * 8vh));
    width: calc(57vw - (var(--transfer-progress) * 8vw));
  }
}

@media (max-width: 900px) {
  .transfer-sticky::after {
    left: 0;
    height: 18vh;
  }

  .transfer-image {
    left: calc(50vw + (1 - var(--transfer-progress)) * 8vw);
    top: auto !important;
    bottom: calc(0px - (var(--transfer-progress) * 7vh));
    width: calc(108vw - var(--transfer-progress) * 26vw);
  }
}

/* Attach the fade to the moving building, so gradient travels with the image */
.transfer-sticky::after {
  display: none;
}

.transfer-image {
  overflow: visible;
}

.transfer-image img {
  position: relative;
  z-index: 1;
}

.transfer-image::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  left: -2vw;
  right: -2vw;
  bottom: -1px;
  height: 30%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(229, 220, 207, 0) 0%,
    rgba(229, 220, 207, 0.42) 46%,
    rgba(229, 220, 207, 0.82) 78%,
    #e3d9ca 100%
  );
}

@media (max-width: 900px) {
  .transfer-image::after {
    left: -4vw;
    right: -4vw;
    height: 34%;
  }
}

/* Real moving fade: mask the PNG itself instead of drawing a visible rectangle */
.transfer-image::after {
  display: none !important;
}

.transfer-image {
  bottom: calc(-2vh - (var(--transfer-progress) * 8vh));
  width: calc(70vw - (var(--transfer-progress) * 28vw));
}

.transfer-image img {
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 62%,
    rgba(0, 0, 0, 0.82) 72%,
    rgba(0, 0, 0, 0.34) 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 62%,
    rgba(0, 0, 0, 0.82) 72%,
    rgba(0, 0, 0, 0.34) 88%,
    transparent 100%
  );
}

@media (max-width: 900px) {
  .transfer-image {
    bottom: calc(-2vh - (var(--transfer-progress) * 7vh));
    width: calc(128vw - var(--transfer-progress) * 54vw);
  }
}

/* Brand typography from visual identity: Gatena display, Gordita body/UI */
.transfer-hero-copy h1,
.transfer-next-copy h2,
.section-heading h2,
.intro h2,
.location-band h2,
.enquire h2 {
  font-family: var(--font-headline);
  font-weight: 500;
}

.transfer-hero-copy p,
.transfer-feature,
.transfer-next-copy p,
.site-header,
.button,
.gallery-card span,
.plan,
.lead-form,
.admin-link {
  font-family: var(--font-body);
}

.transfer-feature,
.gallery-card span,
.plan h3 {
  font-weight: 700;
}

/* Refinement: larger end image, lifted address copy, modern amenity markers */
.transfer-image {
  width: calc(70vw - (var(--transfer-progress) * 18vw));
}

.transfer-next-copy {
  top: calc(38vh - 20px);
}

.transfer-feature {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  width: clamp(190px, 16vw, 250px);
  padding: 10px 13px;
  border: 1px solid rgba(36, 35, 31, 0.08);
  border-radius: 999px;
  color: rgba(23, 21, 18, 0.88);
  background: rgba(251, 249, 244, 0.46);
  box-shadow: 0 14px 38px rgba(36, 35, 31, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: clamp(13px, 0.86vw, 15px);
  line-height: 1.08;
  text-align: left;
}

.transfer-feature::before {
  content: "";
  display: block;
  width: 9px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(180, 155, 104, 0.14);
}

.transfer-feature strong {
  font-weight: 700;
}

.transfer-feature span {
  position: absolute;
  top: 50%;
  width: clamp(42px, 5vw, 82px);
  height: 1px;
  background: linear-gradient(90deg, rgba(180, 155, 104, 0), rgba(180, 155, 104, 0.9));
  transform: translateY(-50%);
}

.transfer-feature--left {
  grid-template-columns: 1fr auto;
  text-align: right;
}

.transfer-feature--left::before {
  order: 2;
}

.transfer-feature--left span {
  left: calc(100% + 10px);
}

.transfer-feature--right span {
  right: calc(100% + 10px);
  transform: translateY(-50%) scaleX(-1);
}

.transfer-feature--one {
  left: clamp(44px, 7vw, 124px);
  top: 51vh;
}

.transfer-feature--two {
  left: clamp(86px, 12vw, 220px);
  top: 64vh;
}

.transfer-feature--three {
  right: clamp(78px, 11vw, 210px);
  top: 51vh;
}

.transfer-feature--four {
  right: clamp(38px, 7vw, 128px);
  top: 64vh;
}

@media (max-width: 900px) {
  .transfer-image {
    width: calc(128vw - var(--transfer-progress) * 38vw);
  }

  .transfer-next-copy {
    bottom: calc(8vh + 20px);
  }
}

/* Reference-matched end composition: tall lower-center building with airy labels */
.transfer-image {
  left: calc(72vw - (var(--transfer-progress) * 22vw));
  bottom: calc(-2vh - (var(--transfer-progress) * 10vh));
  width: calc(70vw - (var(--transfer-progress) * 7vw));
}

.transfer-next-copy {
  top: calc(34vh - 20px);
  width: min(560px, 36vw);
}

.transfer-next-copy h2 {
  font-size: clamp(34px, 3.6vw, 62px);
  color: rgba(23, 21, 18, 0.44);
}

.transfer-next-copy .eyebrow {
  color: rgba(180, 155, 104, 0.58);
}

.transfer-feature {
  opacity: clamp(0, calc((var(--transfer-progress) - 0.5) * 2.15), 0.88);
  background: rgba(251, 249, 244, 0.32);
  color: rgba(23, 21, 18, 0.46);
  box-shadow: 0 14px 38px rgba(36, 35, 31, 0.04);
}

.transfer-feature--one {
  left: clamp(120px, 10.5vw, 210px);
  top: 56vh;
}

.transfer-feature--two {
  left: clamp(152px, 16vw, 310px);
  top: 68vh;
}

.transfer-feature--three {
  right: clamp(130px, 12vw, 230px);
  top: 56vh;
}

.transfer-feature--four {
  right: clamp(112px, 9vw, 190px);
  top: 68vh;
}

.transfer-feature--five {
  left: clamp(70px, 7vw, 150px);
  top: 78vh;
}

.transfer-feature--six {
  right: clamp(70px, 7vw, 150px);
  top: 78vh;
}

@media (max-width: 900px) {
  .transfer-image {
    width: calc(128vw - var(--transfer-progress) * 18vw);
    bottom: calc(-2vh - (var(--transfer-progress) * 9vh));
  }

  .transfer-next-copy {
    bottom: calc(10vh + 20px);
  }
}

/* End-state readability and centering */
.transfer-image {
  left: calc(72vw - (var(--transfer-progress) * 22vw));
}

.transfer-next-copy {
  top: 25vh;
}

.transfer-next-copy h2 {
  color: rgba(23, 21, 18, 0.76);
}

.transfer-next-copy .eyebrow {
  color: rgba(125, 103, 60, 0.86);
}

.transfer-feature {
  color: rgba(23, 21, 18, 0.76);
}

.transfer-feature span {
  background: linear-gradient(90deg, rgba(125, 103, 60, 0), rgba(125, 103, 60, 0.86));
}

.transfer-feature::before {
  background: var(--gold-dark);
  box-shadow: 0 0 0 6px rgba(125, 103, 60, 0.16);
}

@media (max-width: 900px) {
  .transfer-image {
    left: calc(50vw + (1 - var(--transfer-progress)) * 8vw);
  }
}

/* Shift final composition right and keep both feature columns readable */
.transfer-image {
  left: calc(72vw - (var(--transfer-progress) * 17vw));
}

.transfer-feature--one {
  left: clamp(90px, 9vw, 170px);
}

.transfer-feature--two {
  left: clamp(116px, 12vw, 230px);
}

.transfer-feature--five {
  left: clamp(70px, 7vw, 140px);
}

.transfer-feature--three {
  right: clamp(190px, 15vw, 300px);
}

.transfer-feature--four {
  right: clamp(220px, 17vw, 340px);
}

.transfer-feature--six {
  right: clamp(180px, 14vw, 280px);
}

@media (max-width: 900px) {
  .transfer-image {
    left: calc(52vw + (1 - var(--transfer-progress)) * 6vw);
  }
}

/* Polished hero copy: subtle motion, highlighted location, premium controls */
@keyframes heroCopyRise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.transfer-hero-copy {
  animation: heroCopyRise 780ms cubic-bezier(.2, .8, .2, 1) both;
  opacity: calc(1 - min(1, var(--transfer-progress) * 1.65));
  transform: translateY(calc(var(--transfer-progress) * -54px));
}

.transfer-hero-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin-bottom: 18px;
  padding: 8px 12px;
  border: 1px solid rgba(180, 155, 104, 0.28);
  border-radius: 999px;
  color: #7d673c;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(36, 35, 31, 0.05);
}

.transfer-hero-copy .eyebrow::before {
  content: "";
  width: 7px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--gold-dark);
  box-shadow: 0 0 0 5px rgba(180, 155, 104, 0.14);
}

.transfer-hero-copy h1 {
  max-width: 7.4ch;
  text-wrap: balance;
  color: #11100e;
  text-shadow: 0 18px 45px rgba(36, 35, 31, 0.08);
}

.transfer-hero-copy p:not(.eyebrow) {
  max-width: 560px;
  margin-top: 20px;
  color: rgba(23, 21, 18, 0.72);
  font-weight: 400;
}

.transfer-hero-copy .hero__actions {
  position: relative;
  z-index: 999;
  gap: 14px;
  margin-top: 30px;
  pointer-events: auto;
}

.transfer-hero-copy .button {
  position: relative;
  z-index: 1000;
}

.transfer-hero-copy .button {
  min-height: 50px;
  padding-inline: 22px;
  border-radius: 2px;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.transfer-hero-copy .button:hover {
  transform: translateY(-2px);
}

.transfer-hero-copy .button--primary {
  box-shadow: 0 14px 32px rgba(125, 103, 60, 0.22);
}

.transfer-hero-copy .button--ghost {
  background: rgba(255, 255, 255, 0.42);
}

@media (prefers-reduced-motion: reduce) {
  .transfer-hero-copy {
    animation: none;
  }

  .transfer-hero-copy .button {
    transition: none;
  }
}

/* Final override: keep hero copy tied to scroll progress, not load animation */
.transfer-hero-copy {
  animation: none !important;
  opacity: calc(1 - min(1, var(--transfer-progress) * 1.8)) !important;
  transform: translateY(calc(var(--transfer-progress) * -64px)) !important;
}

/* Hero liquid-glass facts */
.hero-glass-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  width: min(760px, calc(100vw - 44px));
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.13)),
    rgba(251, 250, 247, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 22px 60px rgba(36, 35, 31, 0.12);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
}

.hero-glass-stats div {
  min-height: 92px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05));
}

.hero-glass-stats span,
.hero-glass-stats em,
.hero-glass-stats strong {
  display: block;
}

.hero-glass-stats span,
.hero-glass-stats em {
  color: #b8924e;
  font-family: var(--font-body);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

.hero-glass-stats strong {
  margin: 3px 0;
  color: rgba(17, 16, 14, 0.88);
  font-family: var(--font-headline);
  font-size: clamp(19px, 1.55vw, 26px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: 0;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .hero-glass-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(560px, calc(100vw - 32px));
  }

  .hero-glass-stats div {
    min-height: 82px;
    padding: 14px;
  }
}

@media (max-width: 620px) {
  .hero-glass-stats {
    margin-top: 18px;
  }

  .hero-glass-stats strong {
    font-size: 18px;
  }
}

/* Hero stats placement: compact top-right liquid glass */
.hero-glass-stats {
  position: absolute;
  z-index: 4;
  top: clamp(94px, 12vh, 132px);
  right: clamp(22px, 4.2vw, 72px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: min(780px, 48vw);
  margin: 0;
  opacity: calc(1 - min(1, var(--transfer-progress) * 1.55));
  transform: translateY(calc(var(--transfer-progress) * -28px));
  border-color: rgba(255, 255, 255, 0.24);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.08)),
    rgba(246, 240, 229, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 18px 54px rgba(36, 35, 31, 0.10);
}

.hero-glass-stats div {
  min-height: 64px;
  padding: 10px 13px;
  border-right: 1px solid rgba(125, 103, 60, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
}

.hero-glass-stats div:last-child {
  border-right: 0;
}

.hero-glass-stats span,
.hero-glass-stats em {
  color: rgba(125, 103, 60, 0.82);
  font-size: 8px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0;
}

.hero-glass-stats strong {
  margin: 2px 0 1px;
  color: rgba(17, 16, 14, 0.82);
  font-family: var(--font-headline);
  font-size: clamp(14px, 1.05vw, 18px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: normal;
}

@media (max-width: 1280px) {
  .hero-glass-stats {
    width: min(660px, 45vw);
  }

  .hero-glass-stats div {
    padding: 9px 10px;
  }

  .hero-glass-stats strong {
    font-size: clamp(10px, 1vw, 16px);
  }
}

@media (max-width: 980px) {
  .hero-glass-stats {
    top: auto;
    right: auto;
    left: 16px;
    bottom: 22px;
    width: calc(100vw - 32px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Brand logo integration */
.brand-mark {
  overflow: hidden;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-logo-watermark {
  position: absolute;
  z-index: 0;
  top: clamp(118px, 17vh, 190px);
  right: clamp(38px, 6vw, 110px);
  width: clamp(78px, 7vw, 128px);
  height: auto;
  opacity: calc((1 - min(1, var(--transfer-progress) * 1.55)) * 0.13);
  pointer-events: none;
  filter: blur(0.1px);
}

.footer p {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.footer p img {
  width: 18px;
  height: 34px;
  object-fit: contain;
  opacity: 0.76;
}

@media (max-width: 980px) {
  .hero-logo-watermark {
    display: none;
  }
}

/* Hero cleanup: remove decorative pattern, keep logo through scroll transfer */
.transfer-background::after {
  display: none !important;
}

.transfer-sticky::after {
  background-image: none !important;
}

.hero-logo-watermark {
  opacity: 0.13;
}

/* Video Section */
.video-section {
  position: relative;
  width: 100%;
  height: clamp(500px, 80vh, 900px);
  background-color: #11110f;
  overflow: hidden;
}

.video-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.brand-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(17, 17, 15, 0.7) 0%, rgba(17, 17, 15, 0.2) 50%, rgba(17, 17, 15, 0) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 64px);
}

.video-text {
  position: absolute;
  top: clamp(32px, 8vw, 96px);
  left: clamp(24px, 5vw, 64px);
  max-width: 400px;
  color: #fff;
  z-index: 2;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.video-text h3 {
  font-family: var(--font-headline);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 400;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: 0.02em;
}

.video-text p {
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  font-weight: 300;
}

.video-controls-container {
  position: absolute;
  bottom: clamp(24px, 5vw, 48px);
  left: clamp(24px, 5vw, 48px);
  right: clamp(24px, 5vw, 48px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.video-control-btn {
  pointer-events: auto;
  position: relative;
  width: clamp(60px, 7vw, 90px);
  height: clamp(60px, 7vw, 90px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 0 16px rgba(255,255,255,0.1);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-control-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.6);
  transform: scale(1.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(255,255,255,0.2);
}

.video-control-btn svg {
  width: 40%;
  height: 40%;
}

.play-toggle .play-icon {
  margin-left: 4px;
}

@media (max-width: 768px) {
  .video-section {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .video-overlay {
    background: linear-gradient(to bottom, rgba(17, 17, 15, 0.7) 0%, rgba(17, 17, 15, 0.3) 50%, rgba(17, 17, 15, 0.1) 100%);
    align-items: flex-end;
    padding-bottom: 80px;
  }
  .video-text {
    display: none;
  }
}

/* Fade from left effect for previous image in gallery */
.theme-gallery__img-prev {
  -webkit-mask: linear-gradient(to right, transparent 0%, transparent 20%, black 85%);
  mask: linear-gradient(to right, transparent 0%, transparent 20%, black 85%);
}

/* Amenities section dark theme overrides */
.signature-amenities {
  background-color: #262627 !important;
}

.signature-amenities .amenities-experience__intro .eyebrow {
  color: var(--gold) !important;
}

/* Exact Map Design Styles */
.connectivity-map__full {
  width: 100%;
  position: relative;
  background-color: #352b27;
  overflow: hidden;
  margin-top: 40px;
}

.connectivity-legend {
  position: absolute;
  top: 15%;
  right: clamp(20px, 8vw, 100px);
  width: 320px;
  background: rgba(43, 38, 35, 0.85);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10;
}

.connectivity-legend__header {
  font-size: 13px;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}

.connectivity-legend__table {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legend-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 13px;
  color: #d8d4cf;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.legend-heading {
  color: #fff;
  font-weight: 500;
  cursor: default;
  margin-bottom: 8px;
  font-size: 12px;
}

.legend-row .place {
  flex: 0 0 auto;
  white-space: nowrap;
}

.legend-row .dots {
  flex: 1 1 auto;
  border-bottom: 1px dashed rgba(209, 173, 102, 0.4);
  margin: 0 8px;
  position: relative;
  top: -4px;
}

.legend-row .dist {
  flex: 0 0 auto;
  color: var(--gold);
  white-space: nowrap;
}

.legend-row:not(.legend-heading):hover {
  color: #fff;
  transform: translateX(-2px);
}

.legend-row:not(.legend-heading):hover .dist {
  text-shadow: 0 0 8px rgba(209, 173, 102, 0.5);
}

@media (max-width: 900px) {
  .connectivity-legend {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: 400px;
    margin: 20px auto;
  }
}

/* --- MOBILE & TABLET RESPONSIVENESS (Max 991px) --- */
@media (max-width: 991px) {
  /* Phase 1: Spacing */
  .section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .connectivity-map__full,
  .signature-amenities,
  .gallery-section,
  .signature-plans,
  .enquire,
  .video-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Phase 2: Header */
  .site-header {
    padding: 15px 20px !important;
  }
  .nav {
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding-bottom: 10px !important;
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
  }
  .nav::-webkit-scrollbar {
    display: none;
  }
  .brand-lockup {
    display: none !important;
  }

  /* Hero */
  .video-wrapper .video-text {
    display: none !important;
  }
  .video-wrapper .video-text h1 {
    font-size: 32px !important;
  }

  /* Phase 3: Section Intros */
  .signature-amenities .amenities-experience__intro {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }
  .signature-amenities .amenities-experience__intro .eyebrow,
  .signature-amenities .amenities-experience__intro h2,
  .signature-amenities .amenities-experience__intro > p:not(.eyebrow) {
    align-self: flex-start !important;
    text-align: left !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .signature-amenities .amenities-experience__intro > p:not(.eyebrow) {
    margin-top: 8px !important;
  }
  
  /* Phase 4: Amenities */
  .amenities-experience__shell {
    display: flex !important;
    flex-direction: column !important;
  }
  .amenities-experience__detail {
    position: relative !important;
    width: 100% !important;
    right: auto !important;
    top: auto !important;
    margin-top: 20px !important;
    box-shadow: none !important;
  }
  /* Phase 5: Plans */
  .amenities-experience__rail {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding-bottom: 20px !important;
    margin-top: 20px !important;
  }
  .amenities-experience__rail::-webkit-scrollbar {
    display: none;
  }

  /* Phase 6: Map */
  .connectivity-map__full {
    display: flex !important;
    flex-direction: column !important;
  }
  #gmap-iframe {
    position: relative !important;
    height: 400px !important;
  }
  .connectivity-legend {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 20px !important;
    top: auto !important;
    right: auto !important;
  }

  /* Phase 7: Form */
  .form-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- Hero Section Refinements for Mobile --- */
@media (max-width: 991px) {
  .transfer-hero-copy h1 {
    font-size: 38px !important;
    line-height: 1.1 !important;
  }
  
  .transfer-hero-copy p:not(.eyebrow) {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin-top: 12px !important;
    max-width: 100% !important;
  }
  
  .transfer-hero-copy .hero__actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin-top: 24px !important;
  }
  
  .transfer-hero-copy .button {
    flex: 1 1 50% !important;
    min-height: 44px !important;
    padding: 10px 8px !important;
    font-size: 13px !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 991px) {
  .transfer-hero-copy .eyebrow {
    font-size: 10px !important;
    padding: 6px 10px !important;
    margin-bottom: 12px !important;
    letter-spacing: 0.5px !important;
  }
}

@media (max-width: 991px) {
  .transfer-image {
    top: calc(40vh + var(--transfer-progress) * 13vh - 5px) !important;
  }
}

@media (max-width: 991px) {
  .transfer-next-copy h2 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
    text-wrap: balance !important;
  }
}

@media (max-width: 991px) {
  .transfer-next-copy {
    width: min(560px, 100vw) !important;
    left: 0 !important;
    padding: 0 20px !important;
  }
}

@media (max-width: 991px) {
  /* Hide the connecting lines on mobile */
  .transfer-feature span {
    display: none !important;
  }
  
  /* Convert features into sleek glass chips */
  .transfer-feature {
    position: absolute !important;
    width: auto !important;
    max-width: 45vw !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    background: rgba(251, 249, 244, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    z-index: 100 !important;
    grid-template-columns: auto 1fr !important;
    gap: 8px !important;
    display: grid !important;
    transform: none !important;
  }
  
  .transfer-feature strong {
    white-space: normal !important;
    line-height: 1.2 !important;
  }
  
  /* Arrange them in a neat 2x2 compact grid over the bottom area */
  .transfer-feature--one {
    top: 60vh !important;
    left: 10px !important;
    right: auto !important;
  }
  .transfer-feature--two {
    top: 60vh !important;
    right: 10px !important;
    left: auto !important;
  }
  .transfer-feature--three {
    top: 68vh !important;
    left: 10px !important;
    right: auto !important;
  }
  .transfer-feature--four {
    top: 68vh !important;
    right: 10px !important;
    left: auto !important;
  }
}

/* --- Mobile Specific DOM Features --- */
.mobile-features-grid {
  display: none;
}

@media (max-width: 991px) {
  .transfer-feature {
    display: none !important;
  }
  
  .mobile-features-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 24px 0 !important;
  }
  
  .mobile-feature {
    background: rgba(251, 249, 244, 0.45) !important;
    border: 1px solid rgba(180, 155, 104, 0.2) !important;
    border-radius: 6px !important;
    padding: 12px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11px !important;
    color: rgba(23, 21, 18, 0.88) !important;
  }
  
  .mobile-feature::before {
    content: "" !important;
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--gold) !important;
    box-shadow: 0 0 0 3px rgba(180, 155, 104, 0.14) !important;
    flex-shrink: 0 !important;
  }
  
  .mobile-feature strong {
    font-weight: 500 !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 680px) {
  .signature-amenities .amenities-experience__media {
    aspect-ratio: 1 / 1 !important;
    min-height: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .signature-amenities .amenities-experience__media img {
    aspect-ratio: 1 / 1 !important;
    min-height: auto !important;
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  .signature-amenities .amenities-experience__content {
    display: none !important;
  }
  #amenities .amenities-experience__detail,
  #amenities .amenities-experience__media figcaption {
    display: none !important;
  }
  #gallery .theme-gallery__body {
    position: relative !important;
  }

  #gallery .theme-gallery__content {
    display: contents !important;
  }

  #gallery .theme-gallery__content h3,
  #gallery .theme-gallery__content p,
  #gallery .theme-gallery__btn {
    display: none !important;
  }

  #gallery .theme-gallery__controls {
    position: absolute !important;
    left: 34px !important;
    right: 34px !important;
    bottom: 14px !important;
    z-index: 6 !important;
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    gap: 7px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    border-radius: 999px !important;
    background: rgba(248, 245, 239, 0.58) !important;
    box-shadow: 0 8px 22px rgba(33, 25, 19, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  #gallery .theme-gallery__arrows {
    display: inline-flex !important;
    gap: 6px !important;
    grid-column: auto !important;
  }

  #gallery .theme-gallery__arrows button {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }

  #gallery .theme-gallery__counter {
    color: rgba(33, 25, 19, 0.72) !important;
    font-size: 10px !important;
  }

  #gallery .theme-gallery__progress {
    background: rgba(33, 25, 19, 0.16) !important;
  }

  .theme-gallery__btn {
    display: none !important;
  }
}

@media (max-width: 680px) {
  #gallery .theme-gallery__header {
    margin-bottom: 18px !important;
  }

  #gallery .theme-gallery__header .eyebrow {
    margin-bottom: 6px !important;
    font-size: 10px !important;
  }

  #gallery .theme-gallery__header h2 {
    max-width: 330px !important;
    font-size: clamp(27px, 8vw, 34px) !important;
    line-height: 1.02 !important;
  }
}

/* Red team recovery layer: lower-page premium system only */
#video-tour,
#amenities,
#gallery,
#plans,
.signature-connectivity,
#enquire,
.signature-lead {
  --tm-paper: #f5efe4;
  --tm-paper-2: #ebe1d0;
  --tm-ink: #211913;
  --tm-brown: #2b201b;
  --tm-brown-2: #3a2c25;
  --tm-gold: #b89a58;
  --tm-line: rgba(74, 56, 39, 0.16);
  --tm-glass: rgba(255, 255, 255, 0.54);
  font-family: var(--font-body);
}

#amenities,
#gallery,
#plans,
.signature-connectivity,
#enquire {
  position: relative;
  overflow: hidden;
  padding: clamp(76px, 8vw, 128px) clamp(18px, 5vw, 72px) !important;
}

#gallery,
#plans,
#enquire {
  background:
    radial-gradient(circle at 82% 12%, rgba(184, 154, 88, 0.13), transparent 28%),
    linear-gradient(135deg, var(--tm-paper), var(--tm-paper-2));
}

#gallery::after,
#plans::after,
#enquire::after {
  content: "";
  position: absolute;
  right: clamp(18px, 6vw, 110px);
  bottom: clamp(18px, 5vw, 70px);
  width: min(560px, 46vw);
  height: 70px;
  background: var(--pattern-strip) center / contain repeat-x;
  opacity: 0.035;
  pointer-events: none;
}

#amenities .amenities-experience__intro,
#plans .amenities-experience__intro,
.signature-connectivity .connectivity-map__intro,
.theme-gallery__inner,
#enquire {
  width: min(1280px, 100%);
  margin-inline: auto;
}

#amenities .amenities-experience__intro {
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.55fr);
  gap: clamp(20px, 5vw, 84px);
  align-items: end;
  margin-bottom: clamp(24px, 3.8vw, 52px) !important;
}

#amenities .amenities-experience__intro .eyebrow,
#plans .amenities-experience__intro .eyebrow,
.signature-connectivity .connectivity-map__intro .eyebrow,
.theme-gallery__header .eyebrow,
#enquire .eyebrow {
  margin: 0 0 10px !important;
  color: var(--tm-gold) !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#amenities .amenities-experience__intro h2,
#plans .amenities-experience__intro h2,
.signature-connectivity .connectivity-map__intro h2,
.theme-gallery__header h2,
#enquire h2 {
  margin: 0 !important;
  max-width: 720px;
  color: var(--tm-ink);
  font-family: var(--font-headline) !important;
  font-size: clamp(40px, 4.8vw, 72px) !important;
  font-weight: 500;
  line-height: 0.96 !important;
  letter-spacing: 0;
}

#amenities .amenities-experience__intro > p:not(.eyebrow),
#enquire .enquire__copy p {
  max-width: 420px !important;
  margin: 0 !important;
  color: rgba(33, 25, 19, 0.66);
  font-size: clamp(14px, 1.05vw, 16px) !important;
  line-height: 1.65 !important;
}

#amenities {
  color: #fbf7ef;
  background:
    radial-gradient(circle at 14% 18%, rgba(184, 154, 88, 0.13), transparent 30%),
    linear-gradient(135deg, #30251f, #1e1916 72%) !important;
}

#amenities::before {
  content: "";
  position: absolute;
  top: clamp(28px, 5vw, 80px);
  right: clamp(20px, 7vw, 118px);
  width: min(440px, 40vw);
  height: 68px;
  background: var(--pattern-strip) center / contain repeat-x;
  opacity: 0.055;
  pointer-events: none;
}

#amenities .amenities-experience__intro h2,
#amenities .amenities-experience__intro > p:not(.eyebrow) {
  color: #fbf7ef;
}

#amenities .amenities-experience__intro > p:not(.eyebrow) {
  color: rgba(251, 247, 239, 0.64);
}

#amenities .amenities-experience__intro {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#amenities .amenities-experience__intro .eyebrow,
#amenities .amenities-experience__intro h2 {
  width: 100%;
  margin-inline: auto !important;
  text-align: center;
}

/* Plans + connectivity intros: centered heading, no supporting paragraph. */
#plans .amenities-experience__intro,
.signature-connectivity .connectivity-map__intro {
  display: block;
  max-width: 720px;
  margin: 0 auto clamp(24px, 3.8vw, 52px);
  text-align: center;
}

#plans .amenities-experience__intro .eyebrow,
#plans .amenities-experience__intro h2,
.signature-connectivity .connectivity-map__intro .eyebrow,
.signature-connectivity .connectivity-map__intro h2 {
  width: 100%;
  margin-inline: auto !important;
  text-align: center;
}

#amenities .amenities-experience__shell,
#plans .amenities-experience__shell {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.68fr);
  gap: clamp(18px, 2.6vw, 34px);
  align-items: stretch;
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 0 !important;
}

#amenities .amenities-experience__media,
#plans .amenities-experience__media {
  position: relative !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: #211913;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.24);
}

#amenities .amenities-experience__media {
  aspect-ratio: 1.18 / 1;
}

#plans .amenities-experience__media {
  aspect-ratio: 1.22 / 0.82;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.28)),
    rgba(255, 255, 255, 0.38);
  border-color: rgba(74, 56, 39, 0.14);
  box-shadow: 0 28px 80px rgba(74, 56, 39, 0.14);
}

#amenities .amenities-experience__media img,
#plans .amenities-experience__media img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover;
  transition: opacity 220ms ease, transform 680ms ease;
}

#plans .amenities-experience__media img {
  object-fit: contain;
  padding: clamp(24px, 4vw, 56px);
}

#amenities .amenities-experience__media img:hover,
#plans .amenities-experience__media img:hover {
  transform: scale(1.025);
}

#amenities .amenities-experience__media::after,
#plans .amenities-experience__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgba(24, 18, 14, 0.58));
}

#amenities .amenities-experience__media figcaption,
#plans .amenities-experience__media figcaption {
  position: absolute;
  z-index: 2;
  left: clamp(14px, 2.2vw, 28px);
  right: clamp(14px, 2.2vw, 28px);
  bottom: clamp(14px, 2.2vw, 26px);
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  color: #fff;
}

#amenities .amenities-experience__media figcaption span,
#amenities .amenities-experience__media figcaption strong,
#plans .amenities-experience__media figcaption span {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(33, 25, 19, 0.42);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#amenities .amenities-experience__content,
#plans .amenities-experience__content {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}

#amenities .amenities-experience__detail,
#plans .amenities-experience__detail {
  position: relative !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: clamp(24px, 3vw, 38px) !important;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none !important;
}

#amenities .amenities-experience__detail {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

#plans .amenities-experience__detail {
  color: var(--tm-ink);
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(74, 56, 39, 0.13);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

#amenities .amenities-experience__detail h3,
#plans .amenities-experience__detail h3 {
  margin: 0 !important;
  max-width: 520px;
  font-family: var(--font-headline) !important;
  font-size: clamp(30px, 3.2vw, 48px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

#amenities .amenities-experience__detail p:not(.eyebrow),
#plans .amenities-experience__detail p:not(.eyebrow) {
  margin: 14px 0 0 !important;
  max-width: 500px;
  font-size: clamp(13px, 1vw, 15px) !important;
  line-height: 1.65 !important;
}

#amenities .amenities-experience__detail p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.68);
}

#plans .amenities-experience__detail p:not(.eyebrow) {
  color: rgba(33, 25, 19, 0.62);
}

#amenities .amenities-experience__rail {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
  overflow: visible !important;
  white-space: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}

#amenities .amenities-experience__rail button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 12px;
  color: rgba(255, 255, 255, 0.72);
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.055);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

#amenities .amenities-experience__rail button:hover,
#amenities .amenities-experience__rail button.is-active {
  color: #fff;
  border-color: rgba(184, 154, 88, 0.48);
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

#amenities .amenities-experience__rail button span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--tm-gold);
  border-radius: 50%;
  background: rgba(184, 154, 88, 0.13);
  font-size: 11px;
  font-weight: 700;
}

#amenities .amenities-experience__rail button strong {
  min-width: 0;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

#amenities .amenities-experience__arrows,
#plans .theme-gallery__arrows {
  position: absolute !important;
  z-index: 4;
  right: clamp(14px, 2.2vw, 28px);
  top: clamp(14px, 2.2vw, 28px);
  display: flex !important;
  gap: 8px;
}

#amenities .amenities-experience__arrows button,
#plans .theme-gallery__arrows button,
.theme-gallery__arrows button {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(33, 25, 19, 0.42);
  color: #fff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}

#amenities .amenities-experience__arrows button:hover,
#plans .theme-gallery__arrows button:hover,
.theme-gallery__arrows button:hover {
  transform: translateY(-1px);
  background: rgba(33, 25, 19, 0.68);
}

.theme-gallery {
  color: var(--tm-ink);
}

.theme-gallery__inner {
  position: relative;
  z-index: 1;
}

.theme-gallery__body {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.58fr);
  gap: clamp(18px, 3vw, 42px);
  align-items: end;
}

.theme-gallery__slider {
  position: relative;
  min-height: clamp(420px, 52vw, 680px);
  overflow: hidden;
  border-radius: 8px;
  background: #211913;
  box-shadow: 0 30px 90px rgba(74, 56, 39, 0.2);
}

.theme-gallery__img-main {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform 680ms ease, opacity 240ms ease;
}

.theme-gallery__img-main:hover {
  transform: scale(1.025);
}

.theme-gallery__img-prev {
  display: none !important;
}

.theme-gallery__content {
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid rgba(74, 56, 39, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.54);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.theme-gallery__content h3 {
  margin: 0 !important;
  color: var(--tm-ink);
  font-family: var(--font-headline) !important;
  font-size: clamp(30px, 3.4vw, 48px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

.theme-gallery__content p {
  margin: 16px 0 0 !important;
  color: rgba(33, 25, 19, 0.62);
}

.theme-gallery__btn,
#enquire .contact-row a,
.button.button--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 4px;
  color: #fff !important;
  background: #92743c !important;
  border: 1px solid rgba(146, 116, 60, 0.58) !important;
  text-decoration: none;
}

.theme-gallery__btn {
  margin-top: 22px;
}

.theme-gallery__btn:hover {
  border-color: rgba(146, 116, 60, 0.82);
  background: #a27f3d !important;
}

.theme-gallery__btn .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.theme-gallery__controls {
  display: grid !important;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  margin-top: 26px;
}

.theme-gallery__progress {
  height: 1px;
  background: rgba(74, 56, 39, 0.2);
}

.theme-gallery__progress-bar {
  display: block;
  height: 100%;
  background: var(--tm-gold);
}

.theme-gallery__counter {
  color: rgba(33, 25, 19, 0.62);
  font-size: 12px;
  font-weight: 700;
}

#plans .plan-plate__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

#plans .plan-plate__meta span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  color: rgba(33, 25, 19, 0.72);
  background: rgba(184, 154, 88, 0.12);
  font-size: 12px;
  font-weight: 700;
}

.signature-connectivity {
  color: #fff;
  background:
    radial-gradient(circle at 12% 12%, rgba(184, 154, 88, 0.12), transparent 28%),
    linear-gradient(135deg, #30241f, #1d1815 72%);
}

.signature-connectivity .connectivity-map__intro h2 {
  color: #fff;
}

.signature-connectivity .connectivity-map__full {
  width: min(1280px, 100%) !important;
  min-height: clamp(500px, 50vw, 650px) !important;
  margin: clamp(26px, 4vw, 52px) auto 0 !important;
  border: 1px solid rgba(184, 154, 88, 0.22);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.28);
}

.signature-connectivity #gmap-iframe {
  filter: grayscale(25%) contrast(1.1) saturate(0.75) !important;
}

.connectivity-legend {
  top: clamp(20px, 4vw, 54px) !important;
  right: clamp(16px, 4vw, 54px) !important;
  width: min(360px, calc(100% - 32px)) !important;
  padding: clamp(18px, 2.3vw, 28px) !important;
  border: 1px solid rgba(184, 154, 88, 0.42) !important;
  border-radius: 8px !important;
  background: rgba(33, 25, 19, 0.78) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.legend-row {
  gap: 8px;
  min-height: 24px;
  color: rgba(255, 255, 255, 0.74) !important;
  font-size: 12px !important;
}

.legend-row:not(.legend-heading):hover {
  color: #fff !important;
}

#enquire {
  display: grid !important;
  grid-template-columns: minmax(0, 0.72fr) minmax(360px, 0.76fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
}

#enquire .lead-form,
.signature-lead .lead-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: clamp(18px, 2.4vw, 30px);
  border: 1px solid rgba(74, 56, 39, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 28px 80px rgba(74, 56, 39, 0.13);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#enquire label,
.signature-lead label {
  gap: 7px;
  color: rgba(33, 25, 19, 0.72);
  font-size: 12px !important;
  font-weight: 500;
}

#enquire label .optional,
.signature-lead label .optional {
  color: rgba(33, 25, 19, 0.45);
  font-size: 11px;
  font-weight: 400;
}

#enquire input,
#enquire select,
#enquire textarea,
.signature-lead input,
.signature-lead select,
.signature-lead textarea {
  border-radius: 4px;
  border: 1px solid rgba(74, 56, 39, 0.16);
  background: rgba(255, 255, 255, 0.7);
  color: rgba(33, 25, 19, 0.78);
  font-weight: 400;
}

#enquire select,
.signature-lead select {
  font-weight: 500;
}

#enquire .consent,
.signature-lead .consent {
  color: rgba(33, 25, 19, 0.62);
  font-size: 12px !important;
  font-weight: 400;
}

#enquire .button,
.signature-lead .button {
  font-weight: 600;
  letter-spacing: 0;
}

.lead-popup.signature-lead {
  width: min(920px, calc(100vw - 28px));
  padding: 0;
  border: 1px solid rgba(184, 154, 88, 0.24);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(250, 246, 237, 0.96), rgba(235, 225, 208, 0.94)),
    var(--tm-paper);
  color: var(--tm-ink);
  box-shadow: 0 34px 120px rgba(0, 0, 0, 0.36);
}

.lead-popup.signature-lead::backdrop {
  background: rgba(22, 17, 14, 0.72);
  backdrop-filter: blur(8px);
}

.lead-popup__copy {
  padding: clamp(24px, 4vw, 44px) clamp(22px, 4vw, 42px) 0;
}

.lead-popup__close {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(74, 56, 39, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.lead-form--popup {
  margin: clamp(18px, 3vw, 28px) clamp(22px, 4vw, 42px) clamp(22px, 4vw, 42px);
}

@media (max-width: 1080px) {
  #amenities .amenities-experience__shell,
  #plans .amenities-experience__shell,
  .theme-gallery__body,
  #enquire {
    grid-template-columns: 1fr;
  }

  #amenities .amenities-experience__content,
  #plans .amenities-experience__content {
    grid-template-columns: 1fr;
  }

  .theme-gallery__slider {
    min-height: clamp(340px, 62vw, 560px);
  }
}

@media (max-width: 760px) {
  #amenities,
  #gallery,
  #plans,
  .signature-connectivity,
  #enquire {
    padding: 64px 18px !important;
  }

  #amenities .amenities-experience__intro,
  #plans .amenities-experience__intro,
  .signature-connectivity .connectivity-map__intro,
  .theme-gallery__header {
    display: block !important;
  }

  #amenities .amenities-experience__intro h2,
  #plans .amenities-experience__intro h2,
  .signature-connectivity .connectivity-map__intro h2,
  .theme-gallery__header h2,
  #enquire h2 {
    font-size: clamp(34px, 11vw, 48px) !important;
  }

  #amenities .amenities-experience__intro > p:not(.eyebrow) {
    margin-top: 14px !important;
  }

  #amenities .amenities-experience__media,
  #plans .amenities-experience__media {
    aspect-ratio: 1 / 0.92;
  }

  #amenities .amenities-experience__content {
    display: grid !important;
  }

  #amenities .amenities-experience__rail {
    grid-template-columns: 1fr;
  }

  .theme-gallery__content {
    padding: 20px;
  }

  .theme-gallery__controls {
    grid-template-columns: 1fr auto;
  }

  .theme-gallery__arrows {
    grid-column: 1 / -1;
  }

  .signature-connectivity .connectivity-map__full {
    min-height: 0 !important;
  }

  .signature-connectivity #gmap-iframe {
    position: relative !important;
    height: 420px !important;
  }

  .connectivity-legend {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 0 8px 8px !important;
  }

  #enquire .lead-form,
  .signature-lead .lead-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  #amenities .amenities-experience__media,
  #plans .amenities-experience__media,
  .theme-gallery__slider {
    border-radius: 6px;
  }

  #plans .amenities-experience__media img {
    padding: 18px;
  }

  .legend-row .place {
    white-space: normal;
  }
}

/* Exterior history two-column recovery */
.exterior-board.section {
  display: grid !important;
  grid-template-columns: minmax(320px, 0.42fr) minmax(0, 0.58fr) !important;
  gap: clamp(28px, 5vw, 86px) !important;
  align-items: center !important;
  min-height: auto !important;
  padding: clamp(78px, 8vw, 128px) clamp(20px, 5vw, 76px) !important;
  background:
    radial-gradient(circle at 76% 28%, rgba(184, 154, 88, 0.13), transparent 30%),
    linear-gradient(135deg, #f8f5ef 0%, #ece2d2 100%) !important;
}

.exterior-board__copy {
  max-width: 500px !important;
  align-self: center !important;
}

.exterior-board__copy .eyebrow {
  margin-bottom: 12px !important;
  color: var(--gold-dark) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em;
}

.exterior-board__copy h2 {
  margin: 0 !important;
  font-family: var(--font-headline) !important;
  font-size: clamp(38px, 4vw, 64px) !important;
  font-weight: 500 !important;
  line-height: 0.98 !important;
  color: #211913 !important;
}

.exterior-board__copy > p:not(.eyebrow) {
  max-width: 440px;
  margin-top: 18px !important;
  color: rgba(33, 25, 19, 0.64) !important;
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.68 !important;
}

.exterior-board__controls {
  width: min(420px, 100%);
  margin-top: clamp(24px, 3vw, 42px) !important;
}

.exterior-board__controls button {
  min-height: 58px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.48) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.exterior-board__stage {
  min-height: clamp(520px, 50vw, 760px) !important;
  width: 100%;
}

.exterior-board__stage::before {
  inset: 5% 0 7% 8% !important;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.22) !important;
}

.exterior-board__visual {
  min-height: clamp(500px, 48vw, 720px) !important;
  border-radius: 8px;
  box-shadow: 0 34px 90px rgba(74, 56, 39, 0.18);
}

.exterior-board__visual img {
  height: clamp(500px, 48vw, 720px) !important;
  object-fit: cover !important;
}

.exterior-board__caption {
  right: clamp(16px, 2.4vw, 36px) !important;
  bottom: clamp(16px, 2.4vw, 36px) !important;
  width: min(360px, 52%) !important;
  border-left: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 8px;
  background: rgba(248, 245, 239, 0.72) !important;
}

@media (max-width: 980px) {
  .exterior-board.section {
    grid-template-columns: minmax(260px, 0.4fr) minmax(0, 0.6fr) !important;
    gap: 24px !important;
    padding-inline: 22px !important;
  }

  .exterior-board__copy h2 {
    font-size: clamp(32px, 5vw, 48px) !important;
  }
}

@media (max-width: 760px) {
  .exterior-board.section {
    grid-template-columns: 1fr !important;
  }

  .exterior-board__copy {
    max-width: none !important;
  }

  .exterior-board__controls {
    width: 100%;
  }

  .exterior-board__stage,
  .exterior-board__visual,
  .exterior-board__visual img {
    min-height: 430px !important;
    height: 430px !important;
  }

  .exterior-board__caption {
    width: calc(100% - 32px) !important;
  }
}

/* Priority de-bulk pass: smaller headings and calmer media scale */
.exterior-board.section,
#amenities,
#gallery,
#plans,
.signature-connectivity,
#enquire {
  padding-top: clamp(56px, 6vw, 92px) !important;
  padding-bottom: clamp(56px, 6vw, 92px) !important;
}

.exterior-board__copy h2,
#amenities .amenities-experience__intro h2,
#plans .amenities-experience__intro h2,
.signature-connectivity .connectivity-map__intro h2,
.theme-gallery__header h2,
#enquire h2 {
  font-size: clamp(30px, 3.2vw, 48px) !important;
  line-height: 1.04 !important;
  max-width: 620px !important;
}

.exterior-board__copy > p:not(.eyebrow),
#amenities .amenities-experience__intro > p:not(.eyebrow),
#enquire .enquire__copy p {
  font-size: clamp(13px, 0.95vw, 15px) !important;
  line-height: 1.58 !important;
}

.exterior-board__stage {
  min-height: clamp(420px, 38vw, 600px) !important;
}

.exterior-board__visual {
  min-height: clamp(400px, 36vw, 560px) !important;
}

.exterior-board__visual img {
  height: clamp(400px, 36vw, 560px) !important;
}

#amenities .amenities-experience__shell,
#plans .amenities-experience__shell,
.theme-gallery__body {
  gap: clamp(16px, 2.2vw, 30px) !important;
}

#amenities .amenities-experience__media {
  aspect-ratio: 1.34 / 1 !important;
}

#plans .amenities-experience__media {
  aspect-ratio: 1.42 / 0.82 !important;
}

.theme-gallery__slider {
  width: min(100%, 820px) !important;
  min-height: clamp(280px, 31vw, 440px) !important;
  justify-self: end !important;
}

/* Gallery autoplay: immersive editorial transition */
#gallery .theme-gallery__slider {
  isolation: isolate !important;
}

#gallery .theme-gallery__slider::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.06), transparent 48%),
    linear-gradient(180deg, rgba(28, 20, 14, 0.04), rgba(28, 20, 14, 0.18)) !important;
  opacity: 0.72 !important;
}

#gallery .theme-gallery__slider::after {
  content: "" !important;
  position: absolute !important;
  inset: -28% -18% !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.24) 48%, transparent 58%) !important;
  opacity: 0 !important;
  transform: translateX(-36%) !important;
}

#gallery.is-transitioning .theme-gallery__slider::after {
  animation: gallery-glass-sweep 760ms ease both !important;
}

#gallery .theme-gallery__img-main {
  will-change: transform, opacity, filter !important;
  transform: scale(1.01) !important;
  filter: saturate(1.02) contrast(1.02) !important;
  transition:
    transform 1200ms cubic-bezier(.2, .8, .2, 1),
    opacity 320ms ease,
    filter 640ms ease !important;
}

#gallery.is-transitioning .theme-gallery__img-main {
  transform: scale(1.075) !important;
  filter: saturate(1.16) contrast(1.06) brightness(1.03) !important;
}

#gallery .theme-gallery__content {
  transition:
    transform 520ms cubic-bezier(.2, .8, .2, 1),
    opacity 320ms ease,
    border-color 320ms ease,
    box-shadow 520ms ease !important;
}

#gallery.is-transitioning .theme-gallery__content {
  transform: translateY(8px) scale(0.985) !important;
  opacity: 0.84 !important;
  border-color: rgba(146, 116, 60, 0.28) !important;
}

#gallery .theme-gallery__progress-bar {
  transition: left 520ms cubic-bezier(.2, .8, .2, 1), width 520ms ease !important;
}

@keyframes gallery-glass-sweep {
  0% {
    opacity: 0;
    transform: translateX(-42%);
  }
  36% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateX(42%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #gallery.is-transitioning .theme-gallery__slider::after {
    animation: none !important;
  }

  #gallery .theme-gallery__img-main,
  #gallery .theme-gallery__content,
  #gallery .theme-gallery__progress-bar {
    transition-duration: 1ms !important;
  }
}

#amenities .amenities-experience__detail,
#plans .amenities-experience__detail,
.theme-gallery__content {
  padding: clamp(18px, 2.2vw, 30px) !important;
}

#amenities .amenities-experience__detail h3,
#plans .amenities-experience__detail h3,
.theme-gallery__content h3 {
  font-size: clamp(24px, 2.5vw, 36px) !important;
  line-height: 1.06 !important;
}

#amenities .amenities-experience__detail p:not(.eyebrow),
#plans .amenities-experience__detail p:not(.eyebrow),
.theme-gallery__content p {
  font-size: clamp(12px, 0.9vw, 14px) !important;
  line-height: 1.55 !important;
}

#amenities .amenities-experience__rail button {
  min-height: 52px !important;
  padding: 10px !important;
}

#amenities .amenities-experience__rail button strong {
  font-size: 11px !important;
}

.signature-connectivity .connectivity-map__full {
  min-height: clamp(410px, 40vw, 560px) !important;
}

.connectivity-legend {
  padding: clamp(14px, 1.8vw, 22px) !important;
}

#enquire .lead-form,
.signature-lead .lead-form {
  padding: clamp(16px, 2vw, 24px) !important;
}

@media (max-width: 760px) {
  .exterior-board__copy h2,
  #amenities .amenities-experience__intro h2,
  #plans .amenities-experience__intro h2,
  .signature-connectivity .connectivity-map__intro h2,
  .theme-gallery__header h2,
  #enquire h2 {
    font-size: clamp(28px, 9vw, 38px) !important;
  }

  .exterior-board__stage,
  .exterior-board__visual,
  .exterior-board__visual img {
    min-height: 340px !important;
    height: 340px !important;
  }

  .theme-gallery__slider {
    min-height: 300px !important;
  }
}

/* Eyebrow/title order: keep every h2 directly below its eyebrow */
.exterior-board__copy,
#amenities .amenities-experience__intro,
#enquire .enquire__copy {
  display: grid !important;
  grid-template-columns: minmax(0, 0.72fr) minmax(260px, 0.44fr) !important;
  grid-auto-flow: row !important;
  align-items: start !important;
  column-gap: clamp(22px, 5vw, 78px) !important;
  row-gap: 0 !important;
}

.exterior-board__copy .eyebrow,
#amenities .amenities-experience__intro .eyebrow,
#enquire .enquire__copy .eyebrow {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
  margin: 0 0 2px !important;
}

.exterior-board__copy h2,
#amenities .amenities-experience__intro h2,
#enquire .enquire__copy h2 {
  grid-column: 1 !important;
  grid-row: 2 !important;
  margin: 0 !important;
}

.exterior-board__copy > p:not(.eyebrow),
#amenities .amenities-experience__intro > p:not(.eyebrow),
#enquire .enquire__copy > p:not(.eyebrow) {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  margin-top: 0 !important;
  max-width: 420px !important;
}

@media (max-width: 760px) {
  .exterior-board__copy,
  #amenities .amenities-experience__intro,
  #enquire .enquire__copy {
    grid-template-columns: 1fr !important;
  }

  .exterior-board__copy > p:not(.eyebrow),
  #amenities .amenities-experience__intro > p:not(.eyebrow),
  #enquire .enquire__copy > p:not(.eyebrow) {
    grid-column: 1 !important;
    grid-row: 3 !important;
    margin-top: 12px !important;
  }
}

/* Revert eyebrow/right-copy treatment for Exterior History only */
.exterior-board__copy {
  grid-template-columns: minmax(0, 1fr) !important;
  column-gap: 0 !important;
}

.exterior-board__copy .eyebrow {
  margin: 0 0 10px !important;
}

.exterior-board__copy > p:not(.eyebrow) {
  grid-column: 1 !important;
  grid-row: 3 !important;
  max-width: 440px !important;
  margin-top: 18px !important;
}

@media (max-width: 760px) {
  .exterior-board__stage {
    min-height: 340px !important;
    height: auto !important;
    align-items: start !important;
    padding-bottom: 0 !important;
  }

  .exterior-board__visual,
  .exterior-board__visual img {
    min-height: 340px !important;
    height: 340px !important;
  }

  .exterior-board__caption {
    display: none !important;
  }

  .exterior-board__controls {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .exterior-board__controls button {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 4px !important;
    min-height: 48px !important;
    padding: 7px 4px !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .exterior-board__controls button span {
    font-size: 10px !important;
    line-height: 1 !important;
  }

  .exterior-board__controls button:hover,
  .exterior-board__controls button.is-active {
    transform: none !important;
  }
}

/* Revert eyebrow/right-copy treatment for enquiry intro */
#enquire .enquire__copy {
  grid-template-columns: minmax(0, 1fr) !important;
  column-gap: 0 !important;
  max-width: 560px !important;
}

#enquire .enquire__copy .eyebrow {
  margin: 0 0 10px !important;
}

#enquire .enquire__copy > p:not(.eyebrow) {
  grid-column: 1 !important;
  grid-row: 3 !important;
  max-width: 420px !important;
  margin-top: 18px !important;
}

#enquire .contact-row {
  grid-column: 1 !important;
  grid-row: 4 !important;
  margin-top: 24px !important;
}

/* Amenities media: strict 16:9 and viewport-safe height */
#amenities .amenities-experience__shell {
  width: min(1120px, 100%) !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

#amenities .amenities-experience__media {
  width: min(100%, 1120px) !important;
  height: min(52vh, 520px) !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  justify-self: center !important;
}

#amenities .amenities-experience__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#amenities .amenities-experience__content {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  display: block !important;
  pointer-events: none;
}

#amenities .amenities-experience__detail {
  position: absolute !important;
  left: clamp(16px, 2.4vw, 34px) !important;
  bottom: clamp(16px, 2.4vw, 34px) !important;
  width: min(300px, calc(100% - 180px)) !important;
  pointer-events: auto;
}

#amenities .amenities-experience__rail {
  position: absolute !important;
  left: clamp(16px, 2.4vw, 34px) !important;
  right: clamp(16px, 2.4vw, 34px) !important;
  bottom: clamp(14px, 2vw, 26px) !important;
  width: min(620px, calc(100% - 32px)) !important;
  pointer-events: auto;
}

@media (max-width: 760px) {
  #amenities .amenities-experience__media {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  #amenities .amenities-experience__content {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    gap: 12px;
    margin-top: 12px;
  }

  #amenities .amenities-experience__detail,
  #amenities .amenities-experience__rail {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
  }
}

/* Hide amenity selector rail; keep arrows and auto/touch interaction */
#amenities .amenities-experience__rail {
  display: none !important;
}

/* Amenities arrows: lower-right, aligned with the media caption */
#amenities .amenities-experience__arrows {
  top: auto !important;
  right: clamp(16px, 2.4vw, 34px) !important;
  bottom: clamp(16px, 2.4vw, 34px) !important;
  gap: 6px !important;
}

#amenities .amenities-experience__arrows button {
  width: 38px !important;
  height: 38px !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.18) 28%, rgba(255, 255, 255, 0.06) 62%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 44%, rgba(20, 16, 13, 0.18)) !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -12px 18px rgba(255, 255, 255, 0.08),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.34),
    0 12px 28px rgba(13, 10, 8, 0.24),
    0 2px 8px rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(26px) saturate(1.9) contrast(1.05) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.9) contrast(1.05) !important;
  transition:
    transform 180ms cubic-bezier(.2, .8, .2, 1),
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    filter 180ms ease !important;
}

#amenities .amenities-experience__arrows button::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px 4px auto 4px !important;
  height: 48% !important;
  border-radius: 999px !important;
  z-index: -1 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.08) 58%, rgba(255, 255, 255, 0)) !important;
  pointer-events: none !important;
}

#amenities .amenities-experience__arrows button::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 8px !important;
  height: 8px !important;
  border-top: 2px solid rgba(255, 255, 255, 0.94) !important;
  border-right: 2px solid rgba(255, 255, 255, 0.94) !important;
  filter: drop-shadow(0 1px 2px rgba(18, 12, 8, 0.34)) !important;
  pointer-events: none !important;
}

#amenities .amenities-experience__arrows button:first-child::after {
  transform: translate(-35%, -50%) rotate(-135deg) !important;
}

#amenities .amenities-experience__arrows button:last-child::after {
  transform: translate(-65%, -50%) rotate(45deg) !important;
}

#amenities .amenities-experience__arrows button:hover,
#amenities .amenities-experience__arrows button:focus-visible {
  transform: translateY(-2px) scale(1.06) !important;
  border-color: rgba(255, 255, 255, 0.82) !important;
  filter: brightness(1.08) !important;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.26) 30%, rgba(255, 255, 255, 0.1) 66%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.09) 48%, rgba(196, 162, 97, 0.2)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -12px 18px rgba(255, 255, 255, 0.1),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.42),
    0 18px 42px rgba(13, 10, 8, 0.32),
    0 0 0 4px rgba(255, 255, 255, 0.08) !important;
}

#amenities .amenities-experience__arrows button:active {
  transform: translateY(0) scale(0.92) !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
  filter: brightness(0.96) !important;
  box-shadow:
    inset 0 3px 14px rgba(20, 14, 10, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 8px 18px rgba(13, 10, 8, 0.22) !important;
}

#amenities .amenities-experience__media figcaption {
  display: none !important;
}

/* Amenities detail card: sits bottom-left, level with the arrows. */
#amenities .amenities-experience__detail {
  width: min(300px, calc(100% - 180px)) !important;
  padding: clamp(12px, 1.3vw, 16px) !important;
  border-radius: 6px !important;
}

#amenities .amenities-experience__detail .eyebrow {
  margin-bottom: 6px !important;
  font-size: 9px !important;
}

#amenities .amenities-experience__detail h3 {
  max-width: 260px !important;
  font-size: clamp(17px, 1.4vw, 21px) !important;
  line-height: 1.08 !important;
}

#amenities .amenities-experience__detail p:not(.eyebrow) {
  max-width: 260px !important;
  margin-top: 8px !important;
  font-size: clamp(10px, 0.78vw, 12px) !important;
  line-height: 1.45 !important;
}

@media (max-width: 760px) {
  #amenities .amenities-experience__arrows {
    right: 14px !important;
    bottom: 14px !important;
  }
}

/* Enquire section: extend warm background across the full viewport */
#enquire {
  isolation: isolate !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  overflow: hidden !important;
  clip-path: none !important;
  box-shadow: none !important;
  padding-left: max(18px, calc((100vw - 1280px) / 2 + clamp(18px, 5vw, 72px))) !important;
  padding-right: max(18px, calc((100vw - 1280px) / 2 + clamp(18px, 5vw, 72px))) !important;
  background:
    radial-gradient(circle at 82% 12%, rgba(184, 154, 88, 0.13), transparent 28%),
    linear-gradient(135deg, var(--tm-paper), var(--tm-paper-2)) !important;
}

#enquire::before {
  content: none !important;
}

/* Hero image: keep new asset clean, without added shadow */
.transfer-image,
.transfer-image img {
  filter: none !important;
  box-shadow: none !important;
}

.transfer-image {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.transfer-image::before,
.transfer-image::after {
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

/* Transfer end-state: land the building exactly at horizontal center */
.transfer-image {
  left: calc(50vw + ((1 - var(--transfer-progress)) * 22vw)) !important;
  transform: translateX(-50%) !important;
}

@media (max-width: 900px) {
  .transfer-image {
    left: 50vw !important;
  }
}

/* Mobile transfer: remove empty gap between address copy and centered building */
@media (max-width: 760px) {
  .transfer-next-copy {
    top: 11vh !important;
    bottom: auto !important;
    left: 24px !important;
    width: calc(100vw - 48px) !important;
    transform: translateY(calc((1 - var(--transfer-progress)) * 10px)) !important;
  }

  .transfer-next-copy h2 {
    max-width: 12ch !important;
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.08 !important;
  }

  .transfer-image {
    left: 50vw !important;
    top: auto !important;
    bottom: calc(60px - (var(--transfer-progress) * 8vh)) !important;
    width: calc(112vw - (var(--transfer-progress) * 8vw)) !important;
    transform: translateX(-50%) !important;
  }
}

/* Mobile transfer final composition: no large blank bands */
@media (max-width: 560px) {
  .transfer-scene {
    height: 142vh !important;
  }

  .transfer-sticky {
    height: 100vh !important;
    min-height: 0 !important;
  }

  .transfer-next-copy {
    top: 18vh !important;
    left: 24px !important;
    width: calc(100vw - 48px) !important;
    text-align: center;
  }

  .transfer-next-copy .eyebrow {
    margin-bottom: 8px !important;
  }

  .transfer-next-copy h2 {
    max-width: 100% !important;
    font-size: clamp(54px, 7.2vw, 32px) !important;
    line-height: 1.06 !important;
  }

  .transfer-image {
    left: 50vw !important;
    top: auto !important;
    bottom: calc(60px - (var(--transfer-progress) * 6vh)) !important;
    width: calc(108vw - (var(--transfer-progress) * 18vw)) !important;
    transform: translateX(-50%) !important;
  }

  .transfer-progress {
    bottom: 24px !important;
  }
}

/* Phone hero composition: copy, building and stats must not collide */
@media (max-width: 560px) {
  .transfer-sticky {
    overflow: hidden !important;
  }

  .transfer-hero-copy {
    left: 24px !important;
    width: calc(100vw - 48px) !important;
    z-index: 8 !important;
    transform: translateY(calc(var(--transfer-progress) * -42px)) !important;
  }

  .transfer-hero-copy h1 {
    font-size: clamp(38px, 12.5vw, 54px) !important;
    line-height: 0.98 !important;
    max-width: 8.5ch !important;
  }

  .transfer-hero-copy p:not(.eyebrow) {
    max-width: 34ch !important;
    margin-top: 16px !important;
    font-size: 14px !important;
    line-height: 1.42 !important;
  }

  .transfer-hero-copy .hero__actions {
    gap: 10px !important;
    margin-top: 22px !important;
  }

  .transfer-hero-copy .button {
    min-height: 52px !important;
    padding: 12px 10px !important;
    font-size: 13px !important;
    position: relative !important;
    z-index: 14 !important;
  }

  .transfer-image {
    z-index: 2 !important;
    left: 50vw !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(96px - (var(--transfer-progress) * 122px)) !important;
    width: calc(96vw + (var(--transfer-progress) * 10vw)) !important;
    transform: translateX(-50%) !important;
  }

  .hero-glass-stats {
    z-index: 6 !important;
    left: 22px !important;
    right: 22px !important;
    bottom: 28px !important;
    width: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hero-glass-stats div {
    min-height: 38px !important;
    padding: 11px 14px !important;
  }

  .hero-glass-stats strong {
    font-size: 10px !important;
    line-height: 0.96 !important;
  }
}

/* Production overflow guard: prevent wide hero assets from creating horizontal scroll */
.site-shell,
main,
.transfer-scene,
.transfer-sticky {
  max-width: 100vw !important;
  overflow-x: clip !important;
}

.transfer-image,
.hero-glass-stats {
  max-width: calc(100vw - 24px) !important;
}

/* Home automation and safety: premium liquid-glass editorial section */
.smart-safety {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--smart-x, 72%) var(--smart-y, 28%), rgba(184, 154, 88, 0.16), transparent 30%),
    linear-gradient(135deg, #f5efe2 0%, #ece2d1 100%);
  color: #211b16;
}

.smart-safety::before {
  content: "";
  position: absolute;
  inset: auto 0 0 auto;
  width: min(520px, 52vw);
  aspect-ratio: 5 / 1;
  opacity: 0.08;
  background: url("../patterns/tm-pattern-strip.png") center / contain no-repeat;
  pointer-events: none;
}

.smart-safety__intro {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.52fr);
  gap: clamp(22px, 5vw, 72px);
  align-items: end;
  max-width: 1320px;
  margin: 0 auto clamp(24px, 4vw, 48px);
}

.smart-safety__intro h2 {
  max-width: 760px;
  color: #171512;
  font-size: clamp(34px, 5vw, 72px);
}

.smart-safety__intro > p:last-child {
  max-width: 420px;
  margin: 0 0 8px;
  color: rgba(33, 27, 22, 0.68);
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.62;
}

.smart-safety__stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.64fr);
  gap: clamp(18px, 2.6vw, 36px);
  align-items: stretch;
  max-width: 1320px;
  margin: 0 auto;
}

.smart-safety__media {
  position: relative;
  min-height: 520px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(125, 103, 60, 0.22);
  background: rgba(255, 255, 255, 0.26);
  box-shadow: 0 34px 88px rgba(52, 42, 30, 0.16);
}

.smart-safety__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(calc((var(--smart-mx, 0.5) - 0.5) * -16px), calc((var(--smart-my, 0.5) - 0.5) * -12px), 0) scale(1.035);
  transition: transform 420ms ease, filter 320ms ease;
}

.smart-safety__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(17, 15, 13, 0.38), transparent 42%),
    linear-gradient(0deg, rgba(17, 15, 13, 0.38), transparent 34%);
  pointer-events: none;
}

.smart-safety__media figcaption {
  position: absolute;
  left: clamp(18px, 2.2vw, 34px);
  bottom: clamp(18px, 2.2vw, 34px);
  z-index: 2;
  display: grid;
  gap: 6px;
  color: #fff;
}

.smart-safety__media figcaption span {
  color: rgba(232, 199, 127, 0.92);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.smart-safety__media figcaption strong {
  font-family: var(--font-headline);
  font-size: clamp(32px, 4.5vw, 64px);
  font-weight: 500;
  line-height: 0.98;
}

.smart-safety__panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  padding: clamp(22px, 2.8vw, 38px);
  border: 1px solid rgba(255, 255, 255, 0.42);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.18)),
    rgba(246, 239, 226, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    0 28px 72px rgba(52, 42, 30, 0.12);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
}

.smart-safety__panel h3 {
  max-width: 10ch;
  margin: 8px 0 14px;
  color: #171512;
  font-family: var(--font-headline);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 500;
  line-height: 0.95;
}

.smart-safety__panel p:not(.eyebrow) {
  max-width: 420px;
  margin: 0;
  color: rgba(33, 27, 22, 0.66);
  font-size: 15px;
  line-height: 1.62;
}

.smart-safety__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.smart-safety__grid button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 12px;
  border: 1px solid rgba(125, 103, 60, 0.16);
  color: rgba(33, 27, 22, 0.72);
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  text-align: left;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, color 220ms ease;
}

.smart-safety__grid button:hover,
.smart-safety__grid button:focus-visible,
.smart-safety__grid button.is-active {
  transform: translateY(-2px);
  border-color: rgba(168, 129, 57, 0.42);
  color: #171512;
  background: rgba(255, 255, 255, 0.58);
}

.smart-safety__grid span {
  display: grid;
  place-items: center;
  width: 34px;
  aspect-ratio: 1;
  border-radius: 999px;
  color: #9f7930;
  background: rgba(168, 129, 57, 0.12);
  font-size: 11px;
  font-weight: 700;
}

.smart-safety__grid strong {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.28;
}

.smart-safety__panel .button {
  align-self: flex-start;
}

@media (max-width: 980px) {
  .smart-safety__intro,
  .smart-safety__stage {
    grid-template-columns: 1fr;
  }

  .smart-safety__intro > p:last-child {
    max-width: 620px;
  }

  .smart-safety__media {
    min-height: 420px;
  }
}

@media (max-width: 620px) {
  .smart-safety {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .smart-safety__intro {
    gap: 12px;
    margin-bottom: 22px;
  }

  .smart-safety__intro h2 {
    font-size: clamp(32px, 10vw, 44px);
  }

  .smart-safety__media {
    min-height: 300px;
  }

  .smart-safety__panel {
    padding: 18px;
  }

  .smart-safety__panel h3 {
    max-width: 12ch;
    font-size: clamp(30px, 9vw, 40px);
  }

  .smart-safety__grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smart-safety__media img,
  .smart-safety__grid button {
    transition: none;
    transform: none;
  }
}

/* PDF-inspired automation section: image first, information band below */
.smart-safety {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  background: #f8f5ef !important;
}

.smart-safety__stage {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.smart-safety__media {
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: clamp(360px, 47vw, 660px) !important;
  margin: 0 !important;
  border-width: 1px 0 !important;
  border-color: rgba(125, 103, 60, 0.18) !important;
  box-shadow: none !important;
  background: #181511 !important;
}

.smart-safety__media img {
  object-position: center center !important;
  transform: none !important;
}

.play-court-section .smart-safety__media img {
  object-position: center center !important;
}

.play-court-section .smart-safety__media {
  aspect-ratio: 16 / 9 !important;
  min-height: auto !important;
  height: auto !important;
}

.smart-safety__media::after {
  background:
    linear-gradient(90deg, rgba(17, 15, 13, 0.38), transparent 34%, transparent 72%, rgba(17, 15, 13, 0.18)),
    linear-gradient(0deg, rgba(17, 15, 13, 0.44), transparent 34%),
    linear-gradient(180deg, #17130f 0%, rgba(23, 19, 15, 0.88) 6%, transparent 16%) !important;
}

.smart-safety__media figcaption {
  left: clamp(24px, 5vw, 72px) !important;
  bottom: clamp(204px, 16vw, 244px) !important;
}

.smart-safety__intro {
  width: min(1320px, calc(100vw - 44px)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.52fr) !important;
  align-items: start !important;
}

.smart-safety__intro h2 {
  max-width: 12ch !important;
  font-size: clamp(34px, 4.5vw, 62px) !important;
  line-height: 0.98 !important;
}

.smart-safety__panel {
  width: min(1320px, calc(100vw - 44px)) !important;
  margin: clamp(18px, 2.4vw, 30px) auto 0 !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 0.48fr) minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: clamp(18px, 2.4vw, 34px) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.smart-safety__panel h3 {
  max-width: 12ch !important;
  margin: 8px 0 10px !important;
  font-size: clamp(28px, 3.2vw, 44px) !important;
}

.smart-safety__panel p:not(.eyebrow) {
  max-width: 360px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.smart-safety__grid {
  position: absolute !important;
  z-index: 4 !important;
  left: clamp(24px, 5vw, 72px) !important;
  bottom: clamp(28px, 3.6vw, 56px) !important;
  width: min(820px, calc(100vw - clamp(48px, 10vw, 144px))) !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  border: 0 !important;
  background: transparent !important;
}

.smart-safety__grid button {
  min-height: 56px !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
}

.smart-safety__grid button span {
  background: rgba(232, 199, 127, 0.18) !important;
  color: #e8c77f !important;
}

.smart-safety__grid button strong {
  color: inherit !important;
}

.smart-safety__grid button:hover,
.smart-safety__grid button:focus-visible,
.smart-safety__grid button.is-active {
  transform: translateY(-1px) !important;
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.smart-safety__panel .button {
  min-width: 180px !important;
  white-space: nowrap !important;
}

@media (max-width: 1020px) {
  .smart-safety__intro,
  .smart-safety__panel {
    grid-template-columns: 1fr !important;
  }

  .smart-safety__panel {
    align-items: start !important;
  }

  .smart-safety__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .smart-safety {
    padding: 0 !important;
  }

  .smart-safety__media {
    min-height: 310px !important;
  }

  .smart-safety__media figcaption strong {
    font-size: clamp(24px, 6vw, 36px) !important;
  }

  .smart-safety__media figcaption {
    bottom: 178px !important;
    left: 18px !important;
  }

  .smart-safety__grid {
    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
    width: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .smart-safety__grid button {
    min-height: 46px !important;
    padding: 8px 10px !important;
    font-size: 10px !important;
  }
}

/* Automation: crossfade slide stack behind the figcaption. */
#automation .smart-safety__slides {
  position: absolute;
  inset: 0;
}

#automation .smart-safety__slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease;
}

#automation .smart-safety__slides img.is-active {
  opacity: 1;
  z-index: 1;
}

/* Automation: heading centered over the image; feature strip straddles its bottom edge. */
#automation .smart-safety__stage {
  padding-bottom: clamp(44px, 5vw, 76px);
}

#automation .smart-safety__media figcaption {
  left: 0 !important;
  right: 0 !important;
  bottom: clamp(78px, 8.4vw, 108px) !important;
  z-index: 2;
  display: grid;
  justify-items: center;
  text-align: center;
}

/* Feature strip: fits in one row on wide screens; becomes a horizontal slider (native scroll/swipe) once it no longer fits. */
#automation .smart-safety__features {
  position: relative;
  z-index: 4;
  margin: clamp(-64px, -5.4vw, -50px) clamp(24px, 5vw, 72px) 0;
  display: flex;
  list-style: none;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(17, 15, 13, 0.42);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#automation .smart-safety__features::-webkit-scrollbar {
  display: none;
}

#automation .smart-safety__features li {
  flex: 1 0 128px;
  scroll-snap-align: start;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

#automation .smart-safety__features li:first-child {
  border-left: 0;
}

#automation .smart-safety__features button {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(16px, 2vw, 22px) 8px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  cursor: pointer;
  transition: color 220ms ease, background 220ms ease;
}

#automation .smart-safety__features svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 220ms ease, stroke 220ms ease;
}

#automation .smart-safety__features svg .fill {
  fill: var(--gold);
  stroke: none;
}

#automation .smart-safety__features span {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}

#automation .smart-safety__features button:hover,
#automation .smart-safety__features button:focus-visible,
#automation .smart-safety__features li.is-active button {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

#automation .smart-safety__features button:hover svg,
#automation .smart-safety__features button:focus-visible svg,
#automation .smart-safety__features li.is-active svg {
  transform: translateY(-2px);
  stroke: #e8c77f;
}

#automation .smart-safety__features button:hover svg .fill,
#automation .smart-safety__features button:focus-visible svg .fill,
#automation .smart-safety__features li.is-active svg .fill {
  fill: #e8c77f;
}

@media (max-width: 1020px) {
  #automation .smart-safety__stage {
    padding-bottom: 40px;
  }

  #automation .smart-safety__features {
    margin-top: clamp(-104px, -11vw, -84px);
  }
}

@media (max-width: 620px) {
  #automation .smart-safety__stage {
    padding-bottom: 34px;
  }

  #automation .smart-safety__features {
    margin: -78px 16px 0;
    border-radius: 12px;
  }

  #automation .smart-safety__features li {
    flex-basis: 108px;
  }

  #automation .smart-safety__features button {
    padding: 12px 6px;
    gap: 6px;
  }

  #automation .smart-safety__features svg {
    width: 20px;
    height: 20px;
  }

  #automation .smart-safety__features span {
    font-size: 9px;
  }
}

.play-court-section .smart-safety__media {
  aspect-ratio: auto !important;
  height: clamp(420px, 42vw, 640px) !important;
  min-height: 0 !important;
}

@media (max-width: 620px) {
  .play-court-section .smart-safety__media {
    height: 360px !important;
  }
}

.hero-glass-stats {
  display: none !important;
}

/* Brand pattern texture for lower sections only. Keep transfer hero/second scroll section clean. */
#amenities,
#gallery,
.play-court-section,
#plans,
.signature-connectivity,
.signature-legacy,
#enquire {
  isolation: isolate;
}

#amenities::before,
#gallery::before,
.play-court-section::before,
#plans::before,
.signature-connectivity::before,
#enquire::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-image: var(--pattern-block);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.035;
}

dialog:not([open]),
.lead-popup:not([open]),
.lightbox:not([open]) {
  display: none !important;
}

#gallery::before,
#plans::before,
#enquire::before {
  top: clamp(28px, 5vw, 78px);
  right: clamp(18px, 6vw, 110px);
  width: min(360px, 30vw);
  aspect-ratio: 2 / 1;
}

#amenities::before,
.signature-connectivity::before {
  top: clamp(24px, 5vw, 72px);
  left: clamp(18px, 5vw, 86px);
  width: min(340px, 28vw);
  aspect-ratio: 2 / 1;
  opacity: 0.055;
  filter: invert(1);
}

.play-court-section::before {
  right: clamp(18px, 5vw, 86px);
  bottom: clamp(18px, 4vw, 58px);
  width: min(320px, 28vw);
  aspect-ratio: 2 / 1;
  opacity: 0.05;
}

#amenities::after,
#gallery::after,
.play-court-section::after,
#plans::after,
.signature-connectivity::after,
.signature-legacy::after,
#enquire::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  height: 22px;
  background: var(--pattern-strip) center / auto 22px repeat-x;
  opacity: 0.045;
}

#gallery::after,
#plans::after,
#enquire::after {
  left: clamp(18px, 5vw, 72px);
  right: clamp(18px, 5vw, 72px);
  bottom: clamp(18px, 4vw, 56px);
  width: auto;
}

#amenities::after,
.signature-connectivity::after {
  left: clamp(18px, 5vw, 72px);
  right: clamp(18px, 5vw, 72px);
  top: clamp(22px, 4vw, 48px);
  opacity: 0.06;
  filter: invert(1);
}

/* The block corner mark above uses invert() because the source pattern is
   light gray, which needs to darken to read against light sections. Here
   the pattern stays its natural light gray and leans on mix-blend-mode
   (same trick as .site-header::after) so it actually shows up against the
   dark background instead of inverting itself into near-invisibility. */
.signature-legacy::after {
  left: clamp(18px, 5vw, 72px);
  right: clamp(18px, 5vw, 72px);
  top: 0;
  height: 30px;
  opacity: 0.4;
  background-size: auto 30px;
  mix-blend-mode: screen;
}

.play-court-section::after {
  left: clamp(18px, 5vw, 72px);
  right: clamp(18px, 5vw, 72px);
  top: 16px;
}

#amenities > *,
#gallery > *,
.play-court-section > *,
#plans > *,
.signature-connectivity > *,
.signature-legacy > *,
#enquire > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  #amenities::before,
  #gallery::before,
  .play-court-section::before,
  #plans::before,
  .signature-connectivity::before,
  #enquire::before {
    width: 210px;
    opacity: 0.025;
  }

  #amenities::after,
  #gallery::after,
  .play-court-section::after,
  #plans::after,
  .signature-connectivity::after,
  .signature-legacy::after,
  #enquire::after {
    height: 14px;
    background-size: auto 14px;
  }
}

/* Transfer end copy: keep the premium headline readable above the building. */
@media (min-width: 761px) {
  .transfer-next-copy {
    top: clamp(150px, 22vh, 220px) !important;
    width: min(760px, 48vw) !important;
    max-width: 760px !important;
  }

  .transfer-next-copy .eyebrow {
    margin-bottom: 10px !important;
  }

  .transfer-next-copy h2 {
    max-width: 21ch !important;
    margin: 0 auto clamp(56px, 7vh, 96px) !important;
    font-size: clamp(40px, 4.2vw, 74px) !important;
    line-height: 1.02 !important;
    text-wrap: balance !important;
  }
}

@media (max-width: 760px) {
  .hero-glass-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
    width: auto !important;
    max-width: none !important;
    gap: 1px !important;
  }

  .hero-glass-stats div {
    min-height: 48px !important;
    padding: 9px 10px !important;
  }

  .hero-glass-stats span,
  .hero-glass-stats em {
    font-size: 8px !important;
    line-height: 1.05 !important;
  }

  .hero-glass-stats strong {
    font-size: 15px !important;
    line-height: 1.02 !important;
  }
}

@media (max-width: 620px) {
  #automation .smart-safety__media {
    height: 430px !important;
    min-height: 430px !important;
  }

  #automation .smart-safety__media figcaption {
    left: 16px !important;
    right: 16px !important;
    bottom: 100px !important;
    max-width: 285px !important;
    margin-inline: auto !important;
  }

  #automation .smart-safety__media figcaption span {
    font-size: 9px !important;
  }

  #automation .smart-safety__media figcaption strong {
    font-size: 25px !important;
    line-height: 0.98 !important;
  }

  .play-court-section .smart-safety__media {
    height: 430px !important;
    min-height: 430px !important;
  }

  .play-court-section .smart-safety__media figcaption {
    left: 16px !important;
    right: 16px !important;
    bottom: 100px !important;
    max-width: 270px !important;
    margin-inline: auto !important;
  }

  .play-court-section .smart-safety__media figcaption span {
    font-size: 9px !important;
  }

  .play-court-section .smart-safety__media figcaption strong {
    font-size: 25px !important;
    line-height: 0.98 !important;
  }
}

/* Connectivity mobile: let the interactive map use the full viewport width. */
@media (max-width: 760px) {
  .signature-connectivity {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  .signature-connectivity .connectivity-map__intro {
    width: auto !important;
    margin-left: 18px !important;
    margin-right: 18px !important;
  }

  .signature-connectivity .connectivity-map__full {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
  }

  .signature-connectivity #gmap-iframe {
    display: block !important;
    width: 100% !important;
  }

  .signature-connectivity .connectivity-legend {
    width: 100% !important;
    max-width: none !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
  }
}

/* Artist's impression disclaimer, shown on rendered/marketing imagery. */
.render-disclaimer {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 620px) {
  .render-disclaimer {
    top: 10px;
    right: 10px;
    padding: 0;
    font-size: 8px;
    letter-spacing: 0.08em;
  }
}

/* Floor plans stay deliberately obscured until requested from sales. */
#plans .amenities-experience__media img,
.signature-plans__media img,
img[data-plan-image-main] {
  filter: blur(7.5px) !important;
}

/* Premium locked floor-plan preview */
#plans .signature-plans__shell {
  display: block !important;
  width: min(1180px, 100%) !important;
}

#plans .signature-plans__media {
  width: 100% !important;
  max-width: 1180px;
  margin-inline: auto !important;
  aspect-ratio: 16 / 8.7 !important;
}

#plans .signature-plans__media {
  isolation: isolate;
}

#plans .signature-plans__media::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--plan-x, 54%) var(--plan-y, 42%), rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(234, 222, 200, 0.48));
}

#plans .signature-plans__lock {
  position: absolute;
  z-index: 3;
  left: clamp(14px, 2.5vw, 32px);
  bottom: clamp(14px, 2.5vw, 32px);
  width: min(290px, calc(100% - 28px));
  padding: clamp(14px, 1.6vw, 20px);
  color: rgba(246, 241, 231, 0.92);
  border: 1px solid rgba(201, 168, 106, 0.22);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(20, 14, 9, 0.72), rgba(12, 8, 4, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(201, 168, 106, 0.14),
    0 20px 60px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}

#plans .signature-plans__lock .eyebrow {
  margin: 0 0 8px !important;
  color: rgba(201, 168, 106, 0.82) !important;
}

#plans .signature-plans__lock h3 {
  margin: 0 !important;
  max-width: 14ch;
  color: #fff;
  font-family: var(--font-headline);
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 400;
  line-height: 1.05;
}

/* Hide description paragraph — removed from HTML but guard in CSS too */
#plans .signature-plans__lock p:not(.eyebrow) {
  display: none;
}

#plans .signature-plans__unlock {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 0 18px;
  color: #fff;
  border: 1px solid rgba(201, 168, 106, 0.28);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(166, 132, 67, 0.9), rgba(128, 99, 46, 0.9));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, .15);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

#plans .signature-plans__unlock:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(74, 56, 39, 0.26), inset 0 1px 0 rgba(255, 255, 255, .25);
}

#plans .signature-plans__media figcaption {
  z-index: 4;
}

#plans .signature-plans__media .theme-gallery__arrows {
  z-index: 5;
}

@media (max-width: 760px) {
  .transfer-hero-copy {
    width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
  }

  .transfer-hero-copy .hero__actions {
    gap: 8px !important;
    margin-top: 18px !important;
    max-width: 430px !important;
  }

  .transfer-hero-copy .button {
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
  }

  #plans .signature-plans__media {
    min-height: 600px !important;
    aspect-ratio: auto !important;
  }

  #plans.signature-plans--combined .signature-plans__media,
  #plans.signature-plans--combined .plans-combined__media {
    min-height: unset !important;
    aspect-ratio: 4 / 3 !important;
    max-width: 400px !important;
  }

  #plans .signature-plans__lock {
    left: 14px;
    right: 14px;
    bottom: 14px;
    width: auto;
    padding: 16px;
  }

  #plans .signature-plans__lock h3 {
    max-width: 12ch;
    font-size: clamp(24px, 8vw, 34px);
  }

  #plans .signature-plans__lock p:not(.eyebrow) {
    max-width: 100%;
    font-size: 12px !important;
  }

  #plans .signature-plans__unlock {
    width: 100%;
  }
}

/* Luxury motion tuning: slower, softer, editorial transitions. */
:root {
  --motion-luxury: cubic-bezier(0.18, 0.72, 0.24, 1);
}

.gallery-card img,
#gallery .theme-gallery__img-main,
#amenities .amenities-experience__media img,
#plans .amenities-experience__media img,
.exterior-board__visual img,
.smart-safety__media img {
  transition:
    opacity 520ms ease,
    transform 1400ms var(--motion-luxury),
    filter 900ms ease !important;
}

.gallery-card:hover img,
#gallery .theme-gallery__img-main:hover,
#amenities .amenities-experience__media img:hover,
.exterior-board__visual:hover img {
  transform: scale(1.018) !important;
}

#gallery.is-transitioning .theme-gallery__img-main,
#amenities .amenities-experience__media img.is-changing,
#plans .amenities-experience__media img.is-changing,
.exterior-board__visual img.is-changing {
  opacity: 0.58 !important;
  transform: scale(1.035) translateY(8px) !important;
  filter: saturate(1.06) contrast(1.03) brightness(1.02) !important;
}

#gallery.is-transitioning .theme-gallery__slider::after {
  animation-duration: 1080ms !important;
  animation-timing-function: var(--motion-luxury) !important;
}

#gallery .theme-gallery__content,
#amenities .amenities-experience__detail,
#plans .signature-plans__lock,
.exterior-board__caption,
.smart-safety__panel,
.lead-popup.signature-lead {
  transition:
    opacity 560ms ease,
    transform 760ms var(--motion-luxury),
    box-shadow 760ms ease,
    border-color 560ms ease !important;
}

#gallery.is-transitioning .theme-gallery__content {
  transform: translateY(10px) scale(0.99) !important;
  opacity: 0.78 !important;
}

#amenities .amenities-experience__rail button,
#amenities .amenities-experience__arrows button,
#plans .theme-gallery__arrows button,
.theme-gallery__arrows button,
.smart-safety__grid button,
.button {
  transition:
    transform 420ms var(--motion-luxury),
    background 420ms ease,
    border-color 420ms ease,
    box-shadow 520ms ease,
    color 320ms ease !important;
}

#amenities .amenities-experience__rail button:hover,
.smart-safety__grid button:hover,
.smart-safety__grid button:focus-visible,
.smart-safety__grid button.is-active,
.button:hover {
  transform: translateY(-1px) !important;
}

#gallery .theme-gallery__progress-bar {
  transition:
    left 820ms var(--motion-luxury),
    width 820ms var(--motion-luxury) !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

/* Editorial polish pass: lower sections only. Keep the hero transfer untouched. */
.exterior-board__copy h2,
#amenities .amenities-experience__intro h2,
#plans .amenities-experience__intro h2,
.signature-connectivity .connectivity-map__intro h2,
.theme-gallery__header h2,
#enquire .enquire__copy h2 {
  max-width: 13ch;
  font-size: clamp(34px, 4.1vw, 58px) !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

#amenities .amenities-experience__intro > p:not(.eyebrow),
#enquire .enquire__copy > p:not(.eyebrow),
.exterior-board__copy > p:not(.eyebrow) {
  max-width: 420px;
  font-size: clamp(14px, 1.05vw, 17px) !important;
  line-height: 1.7 !important;
}

#gallery.theme-gallery {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(184, 154, 88, 0.14), transparent 34%),
    radial-gradient(circle at 88% 26%, rgba(38, 38, 39, 0.12), transparent 30%),
    linear-gradient(180deg, #f4eee3 0%, #efe6d8 100%) !important;
}

#gallery .theme-gallery__header {
  display: block !important;
  max-width: 720px;
  margin: 0 auto clamp(18px, 3vw, 34px) !important;
  text-align: center;
}

#gallery .theme-gallery__header h2 {
  max-width: 22ch;
  margin-inline: auto !important;
  font-size: clamp(32px, 3.35vw, 48px) !important;
  line-height: 1 !important;
}

#gallery .theme-gallery__body {
  width: min(100%, 1180px);
  margin-inline: auto;
  position: relative;
  display: block !important;
}

#gallery .theme-gallery__slider {
  width: 100% !important;
  justify-self: stretch !important;
  min-height: auto !important;
  height: clamp(360px, 34vw, 500px) !important;
  border-radius: 8px !important;
  background: #211913 !important;
  box-shadow: 0 36px 120px rgba(43, 31, 23, 0.22) !important;
}

#gallery .theme-gallery__slider::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(16, 12, 9, 0.58) 0%, rgba(16, 12, 9, 0.18) 36%, rgba(16, 12, 9, 0.02) 68%),
    linear-gradient(180deg, rgba(16, 12, 9, 0.08) 0%, rgba(16, 12, 9, 0.28) 100%);
}

#gallery .theme-gallery__img-main {
  transform-origin: center;
  filter: saturate(1.02) contrast(1.03);
}

#gallery .theme-gallery__content {
  position: absolute;
  z-index: 4;
  right: clamp(18px, 4vw, 64px);
  bottom: clamp(18px, 3vw, 42px);
  width: min(360px, calc(100% - 36px));
  padding: clamp(14px, 1.55vw, 20px) !important;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)),
    rgba(38, 38, 39, 0.42) !important;
  box-shadow: 0 24px 74px rgba(16, 12, 9, 0.32) !important;
}

#gallery .theme-gallery__content h3 {
  max-width: 17ch;
  color: #fff !important;
  font-size: clamp(19px, 1.45vw, 23px) !important;
  line-height: 1.08 !important;
}

#gallery .theme-gallery__content p {
  margin-top: 8px !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

#gallery .theme-gallery__btn {
  min-height: 34px !important;
  margin-top: 14px !important;
  padding: 7px 13px !important;
  font-size: 12px !important;
}

#gallery .theme-gallery__controls {
  margin-top: 16px !important;
  gap: 10px !important;
}

#gallery .theme-gallery__arrows button {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
}

/* Tall-phone transfer balance: use extra viewport height in both hero compositions. */
@media (max-width: 560px) and (orientation: portrait) {
  .transfer-image {
    width: calc(
      96vw +
      (var(--transfer-progress) * 10vw) +
      clamp(0px, calc((100dvh - 800px) * 2), 220px)
    ) !important;
    max-width: none !important;
    left: 50vw !important;
    transform: translateX(-50%) !important;
    transform-origin: 50% 100% !important;
  }
}

/* Mobile hero CTAs: compact, balanced and resilient across phone widths. */
@media (max-width: 760px) {
  .transfer-hero-copy .hero__actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(6px, 2vw, 10px) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .transfer-hero-copy .button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 8px clamp(6px, 2.2vw, 12px) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-wrap: balance;
    overflow-wrap: normal;
  }
}

@media (max-width: 340px) {
  .transfer-hero-copy .hero__actions {
    grid-template-columns: 1fr !important;
  }
}

#gallery .theme-gallery__counter {
  color: rgba(255, 255, 255, 0.78) !important;
}

#gallery .theme-gallery__progress {
  background: rgba(255, 255, 255, 0.28) !important;
}

#gallery .theme-gallery__progress-bar {
  background: rgba(255, 255, 255, 0.9) !important;
}

#gallery .theme-gallery__btn .dot {
  display: none !important;
}

@media (max-width: 900px) {
  #gallery .theme-gallery__content {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: 12px;
    color: var(--tm-ink);
    background: rgba(255, 255, 255, 0.54) !important;
    box-shadow: 0 18px 54px rgba(74, 56, 39, 0.12) !important;
  }

  #gallery .theme-gallery__content h3 {
    max-width: 16ch;
    color: var(--tm-ink) !important;
    font-size: clamp(23px, 6vw, 30px) !important;
  }

  #gallery .theme-gallery__content p,
  #gallery .theme-gallery__counter {
    color: rgba(33, 25, 19, 0.64) !important;
  }

  #gallery .theme-gallery__progress {
    background: rgba(74, 56, 39, 0.18) !important;
  }

  #gallery .theme-gallery__progress-bar {
    background: var(--tm-gold) !important;
  }
}

@media (max-width: 760px) {
  .exterior-board__copy h2,
  #amenities .amenities-experience__intro h2,
  #plans .amenities-experience__intro h2,
  .signature-connectivity .connectivity-map__intro h2,
  .theme-gallery__header h2,
  #enquire .enquire__copy h2 {
    max-width: 12ch;
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.02 !important;
  }

  #gallery .theme-gallery__slider {
    height: clamp(300px, 78vw, 430px) !important;
    min-height: auto !important;
  }

  #gallery .theme-gallery__slider::before {
    background: linear-gradient(180deg, rgba(16, 12, 9, 0.04) 0%, rgba(16, 12, 9, 0.28) 100%);
  }

  #gallery .theme-gallery__slider {
    touch-action: pan-y;
  }

  #gallery .theme-gallery__controls {
    display: none !important;
  }
}

/* Mobile footer: centered legal lockup without the crest. */
@media (max-width: 620px) {
  .footer {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    padding-block: 20px;
  }

  .footer p {
    display: block;
    width: auto;
    justify-content: center;
    text-align: center;
    font-size: 10px;
    line-height: 1.4;
  }

  .footer p img {
    display: none !important;
  }

  .footer__links {
    width: auto;
    justify-content: center;
    align-items: center;
    gap: 8px 14px;
  }

  .footer__links a {
    font-size: 10px;
    font-weight: 400;
  }

  #enquire .contact-row {
    gap: 8px !important;
    margin-top: 18px !important;
  }

  #enquire .contact-row a {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
  }
}

/* Keep the complete brand name beside the crest at every breakpoint. */
.site-header .brand-lockup {
  display: grid !important;
}

.site-header .brand-name {
  display: block;
  font-family: "Gatena";
  font-size: clamp(16px, 1.6vw, 21px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .site-header .brand-name {
    font-size: 18px !important;
    letter-spacing: 0.05em !important;
  }
}

/* TM's Signature Private Collection: cinematic luxury direction. */
.transfer-sticky {
  isolation: isolate;
  background: #eee5d6;
}

.transfer-sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: calc(1 - var(--transfer-progress));
  background:
    radial-gradient(circle at 73% 58%, rgba(180, 146, 91, 0.18), transparent 34%),
    linear-gradient(115deg, #17120f 0%, #261d18 52%, #30251e 100%);
}

.transfer-background,
.hero-logo-watermark,
.transfer-hero-copy,
.hero-glass-stats,
.transfer-image,
.transfer-next-copy,
.transfer-progress,
.hero-scroll-invite {
  z-index: 2;
}

.transfer-hero-copy {
  color: #f6f0e6;
}

.transfer-hero-copy .eyebrow {
  width: fit-content;
  margin-bottom: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #c7a563;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.transfer-hero-copy h1 {
  max-width: 7.5ch;
  color: #fffaf1;
  font-size: clamp(72px, 7vw, 128px);
  font-weight: 400;
  line-height: 0.84;
}

.transfer-hero-copy p:not(.eyebrow) {
  max-width: 40ch;
  margin-top: 26px;
  color: rgba(255, 250, 241, 0.68);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
}

.transfer-hero-copy .hero__actions {
  margin-top: 30px;
}

.transfer-hero-copy .button {
  min-height: 46px;
  padding-inline: 20px;
  border-color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  font-weight: 500;
}

.transfer-hero-copy .button--primary {
  background: #a38142;
  color: #fff;
}

.transfer-hero-copy .button--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  backdrop-filter: blur(14px);
}

.hero-glass-stats {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
  opacity: calc(1 - var(--transfer-progress));
}

.hero-glass-stats > div {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.hero-glass-stats span,
.hero-glass-stats em {
  color: rgba(255, 255, 255, 0.48) !important;
}

.hero-glass-stats strong {
  color: #fffaf1 !important;
  font-weight: 400 !important;
}

.hero-scroll-invite {
  position: absolute;
  left: clamp(34px, 4.5vw, 86px);
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.58);
  opacity: calc(1 - min(1, var(--transfer-progress) * 3));
  font-family: var(--font-body, sans-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-scroll-invite i {
  display: block;
  width: 70px;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.22);
}

.hero-scroll-invite i::after {
  content: "";
  display: block;
  width: 38%;
  height: 100%;
  background: #c7a563;
  animation: tm-scroll-pulse 2.4s cubic-bezier(.45, 0, .2, 1) infinite;
}

@keyframes tm-scroll-pulse {
  0% { transform: translateX(-110%); }
  55%, 100% { transform: translateX(290%); }
}

.transfer-image img {
  filter: saturate(0.88) contrast(1.04);
}

.transfer-next-copy .eyebrow {
  color: #92723c;
  letter-spacing: 0.14em;
}

.transfer-next-copy h2 {
  color: #302a25;
  font-weight: 400;
}

.transfer-next-copy p:not(.eyebrow) {
  max-width: 48ch;
  color: rgba(48, 42, 37, 0.62);
  font-weight: 300;
  line-height: 1.7;
}

/* A single editorial rhythm below the cinematic opening. */
.exterior-board,
.theme-gallery,
.signature-plans,
.signature-connectivity,
.enquire {
  --section-gutter: clamp(22px, 5vw, 88px);
}

.exterior-board__copy h2,
#amenities .amenities-experience__intro h2,
#plans .amenities-experience__intro h2,
.signature-connectivity .connectivity-map__intro h2,
.theme-gallery__header h2,
#enquire .enquire__copy h2 {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.exterior-board__copy > p:not(.eyebrow),
.amenities-experience__intro > p:not(.eyebrow),
.enquire__copy > p:not(.eyebrow) {
  color: rgba(48, 42, 37, 0.62);
  font-weight: 300;
  line-height: 1.7;
}

/* Full-screen opening sequence. It is isolated from the site's scroll-driven hero. */































































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

  /* No scroll-jacked spacer for these visitors — the cloth-lift is the whole
     point of the motion, so skip straight to the revealed poster instead of
     forcing 320vh of scroll to get past it. */
  

  

  
}

@media (max-width: 760px) {
  .transfer-sticky::before {
    background:
      radial-gradient(circle at 50% 72%, rgba(180, 146, 91, 0.16), transparent 38%),
      linear-gradient(180deg, #17120f 0%, #241b16 100%);
  }

  .transfer-hero-copy .eyebrow {
    margin-bottom: 12px;
    color: #c7a563;
    font-size: 9px;
  }

  .transfer-hero-copy h1 {
    max-width: 7ch;
    color: #fffaf1;
    font-size: clamp(50px, 16vw, 70px) !important;
    line-height: 0.9 !important;
  }

  .transfer-hero-copy p:not(.eyebrow) {
    max-width: 34ch;
    margin-top: 18px;
    color: rgba(255, 250, 241, 0.68);
    font-size: 12px;
    line-height: 1.55;
  }

  .transfer-hero-copy .hero__actions {
    margin-top: 20px;
    width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
  }

  .transfer-hero-copy .button {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
    padding-inline: 7px !important;
    font-size: clamp(9px, 2.65vw, 11px) !important;
    white-space: normal !important;
  }

  .hero-scroll-invite {
    left: 22px;
    bottom: 18px;
    font-size: 8px;
  }

  .hero-scroll-invite i {
    width: 44px;
  }

  .transfer-next-copy p:not(.eyebrow) {
    max-width: 30ch;
    font-size: 12px;
  }

  .cookie {
    right: 14px;
    left: 14px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-invite i::after {
    animation: none;
  }
}































































































/* `is-exiting` retires the opening copy before the cinematic begins. The
   legacy cover rule must not hide the cinematic wrapper at the same time. */


/* Scroll cue: tells the visitor their scroll lifts the cloth. Fades out
   once they've actually started scrolling. */


































/* The entrance copy belongs to the film: the closed state keeps only the
   reveal action, then the complete composition resolves over the footage. */
























































/* Elevation-led opening copy: intentionally sparse and architectural. */
html body .transfer-hero-copy h1 {
  max-width: 10ch !important;
  font-size: clamp(52px, 5vw, 88px) !important;
  line-height: .94 !important;
}

html body .transfer-hero-copy p:not(.eyebrow) {
  max-width: 37ch !important;
}

html body .transfer-hero-copy .hero__actions {
  margin-top: 23px !important;
}

html body .transfer-hero-copy .elevation-booking {
  min-height: 42px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(211, 179, 113, .58) !important;
  border-radius: 1px !important;
  background: #a38142 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16) !important;
  color: #fffaf1 !important;
  font-size: 10px !important;
  letter-spacing: .06em !important;
  transition: background .4s ease, border-color .4s ease, transform .55s cubic-bezier(.16, 1, .3, 1) !important;
}

html body .transfer-hero-copy .elevation-booking:hover,
html body .transfer-hero-copy .elevation-booking:focus-visible {
  border-color: #d8bc80 !important;
  background: #b08d49 !important;
  transform: translateY(-2px) !important;
}

@media (max-width: 760px) {
  html body .transfer-hero-copy h1 {
    max-width: 9.5ch !important;
    font-size: clamp(42px, 12vw, 54px) !important;
  }

  html body .transfer-hero-copy p:not(.eyebrow) {
    max-width: 30ch !important;
  }

  html body .transfer-hero-copy .elevation-booking {
    min-height: 40px !important;
    padding-inline: 15px !important;
    font-size: 9px !important;
  }
}

/* Exact brand-lockup hierarchy from the identity guide. */












/* Amenities title: lock the complete title group to the section center axis. */
html body #amenities .amenities-experience__intro {
  display: flex !important;
  width: min(1280px, 100%) !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
}

html body #amenities .amenities-experience__intro .eyebrow,
html body #amenities .amenities-experience__intro h2 {
  width: auto !important;
  max-width: none !important;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
}

@media (min-width: 761px) {
  html body #amenities .amenities-experience__shell {
    width: min(1280px, 100%) !important;
  }

  html body #amenities .amenities-experience__media {
    width: min(100%, 1280px) !important;
    height: min(58vh, 560px) !important;
  }
}

/* 7D Security: pinned scroll reveal. No paragraphs to read — one line per layer,
   a ring diagram that fills in, and a CTA the moment the story finishes. */
.signature-security {
  position: relative;
  padding: 0 !important;
  color: #f6f1e7;
  background:
    radial-gradient(circle at 14% 10%, rgba(184, 154, 88, 0.14), transparent 30%),
    linear-gradient(135deg, #262019, #17130f 72%);
}

.security-intro {
  padding: clamp(64px, 8vw, 108px) clamp(18px, 5vw, 72px) clamp(28px, 4vw, 48px);
  text-align: center;
}

.security-intro .eyebrow {
  margin: 0 0 10px;
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.security-intro h2 {
  margin: 0;
  color: #f6f1e7;
  font-family: var(--font-headline);
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 500;
  line-height: 1;
}

.security-scroller {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}

.security-stage,
.security-triggers {
  grid-column: 1;
  grid-row: 1;
}

.security-stage {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 36px);
  height: 100vh;
  padding: 24px;
}

.security-triggers {
  display: grid;
  grid-template-rows: repeat(7, 100vh);
}

.security-trigger {
  pointer-events: none;
}

.security-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: min(52vw, 340px);
  aspect-ratio: 1;
}

.security-rings {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.security-rings circle {
  fill: none;
  stroke: rgba(246, 241, 231, 0.14);
  stroke-width: 1;
  transition: stroke 620ms ease, stroke-width 620ms ease, filter 620ms ease;
}

.security-rings circle.is-active {
  stroke: var(--gold);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 6px rgba(199, 167, 100, 0.5));
}

.security-visual__mark {
  position: absolute;
  color: var(--gold);
  font-family: var(--font-headline);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.security-copy {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 480px;
  text-align: center;
}

.security-copy__index {
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.security-copy__title {
  margin: 0;
  color: #f6f1e7;
  font-family: var(--font-headline);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 500;
  line-height: 1.08;
}

.security-copy__desc {
  margin: 0;
  color: rgba(246, 241, 231, 0.66);
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
}

.security-ticks {
  display: flex;
  gap: 8px;
}

.security-ticks span {
  width: 22px;
  height: 2px;
  background: rgba(246, 241, 231, 0.18);
  transition: background 400ms ease, width 400ms ease;
}

.security-ticks span.is-active {
  width: 30px;
  background: var(--gold);
}

.security-cta {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(56px, 7vw, 96px) clamp(18px, 5vw, 72px) clamp(72px, 9vw, 120px);
  text-align: center;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.18));
}

.security-cta .eyebrow {
  margin: 0;
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.security-cta h3 {
  margin: 0;
  max-width: 520px;
  color: #f6f1e7;
  font-family: var(--font-headline);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.1;
}

.security-cta button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 0 30px;
  border: 0;
  border-radius: 4px;
  color: #201a12;
  background: linear-gradient(135deg, #d9bb7c, #b6924f);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.security-cta button:hover,
.security-cta button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .security-rings circle,
  .security-ticks span {
    transition-duration: 1ms;
  }
}

@media (max-width: 900px) {
  .security-visual {
    width: min(70vw, 280px);
  }
}

@media (max-width: 620px) {
  .security-stage {
    gap: 20px;
  }

  .security-visual {
    width: min(76vw, 240px);
  }

  .security-copy__title {
    font-size: clamp(22px, 6vw, 28px);
  }

  .security-cta button {
    width: 100%;
  }
}

/* Final mobile cinematic override: edge-to-edge video, no decorative patterns. */
@media (max-width: 640px) {
  

  

  /* Keep the pinned film stable while mobile browser chrome expands/collapses. */
  

  
}

/* Text-only address statement: a quiet cinematic pause between chapters. */
html body .address-elevation {
  position: relative;
  display: grid;
  min-height: clamp(560px, 82svh, 860px);
  box-sizing: border-box;
  place-items: center;
  overflow: hidden;
  padding: clamp(96px, 12vh, 148px) clamp(22px, 5vw, 80px);
  color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(
    to bottom,
    #0a0907 0%,
    #1a1410 20%,
    #1a1410 100%
  );
}

/* Bottom blend transition overlay — matches the next section color */
html body .address-elevation::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(120px, 20vh, 240px);
  z-index: 1;
  pointer-events: none;
}

/* Luxury image background — fades into section at top & bottom */
html body .address-elevation::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../../uploads/address-bg.webp");
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  opacity: 0.28;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,1) 35%,
    rgba(0,0,0,1) 65%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,1) 35%,
    rgba(0,0,0,1) 65%,
    transparent 100%
  );
  pointer-events: none;
}

/* Keep all content above the pseudo bg and the bottom transition overlay */
html body .address-elevation__composition {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  place-items: center;
}

html body .address-elevation__copy {
  width: min(1320px, 94vw);
  margin: 0 auto;
  text-align: center;
}

html body .address-elevation__copy .eyebrow {
  margin: 0 0 clamp(14px, 1.8vh, 20px);
  color: #98793e;
  font-family: "Gordita", "Jost", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .08em;
  text-align: center;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 700ms cubic-bezier(.22, 1, .36, 1), transform 800ms cubic-bezier(.22, 1, .36, 1);
}

html body .address-elevation__copy h1 {
  width: 100%;
  margin: 0 auto;
  color: #ffffff;
  font-family: var(--font-headline);
  font-size: clamp(28px, 6.5vw, 76px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: normal;
  transform: scale(calc(3 - 2 * var(--heading-progress, 0)));
  transform-origin: 50% 50%;
  transition: transform 450ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

/* Stats block — sits below the heading, gold numbers on dark */
.address-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 4.5vw, 88px);
  margin-top: clamp(40px, 5vh, 64px);
  position: relative;
  z-index: 1;
}

.address-word {
  display: inline-block;
}

.address-break--mobile {
  display: none;
}

html body .address-elevation__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(30px, 4.5vh, 48px);
}

html body .address-elevation__cta {
  position: relative;
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 0;
  padding: 0 28px;
  overflow: hidden;
  border: 1px solid rgba(152, 121, 62, .58);
  border-radius: 999px;
  color: #5a4930;
  background: rgba(255, 252, 245, .25);
  box-shadow: 0 16px 38px rgba(91, 69, 32, .08), inset 0 1px 0 rgba(255, 255, 255, .7);
  font-family: "Gordita", "Jost", sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .07em;
  text-decoration: none;
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    color 350ms ease,
    background-color 350ms ease,
    border-color 350ms ease,
    box-shadow 350ms ease,
    opacity 700ms cubic-bezier(.22, 1, .36, 1),
    transform 800ms cubic-bezier(.22, 1, .36, 1);
}

html body .address-elevation__cta--pricing {
  color: #fffaf0;
  background: #98793e;
  box-shadow: 0 16px 38px rgba(91, 69, 32, .16), inset 0 1px 0 rgba(255, 255, 255, .2);
}

html body .address-elevation__cta--pricing:hover,
html body .address-elevation__cta--pricing:focus-visible {
  border-color: #755b2d;
  background: #755b2d;
}

html body .address-elevation__cta::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 22%, rgba(255, 255, 255, .7) 48%, transparent 74%);
  content: "";
  transform: translateX(-145%);
  transition: transform 850ms cubic-bezier(.22, 1, .36, 1);
}

html body .address-elevation__cta::after {
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

html body .address-elevation__cta span {
  position: relative;
  z-index: 1;
}

html body .address-elevation__cta:hover,
html body .address-elevation__cta:focus-visible {
  border-color: #98793e;
  color: #fffaf0;
  background: #98793e;
  box-shadow: 0 18px 42px rgba(91, 69, 32, .2);
  transform: translate3d(0, -2px, 0);
}

html body .address-elevation__cta:hover::before,
html body .address-elevation__cta:focus-visible::before {
  transform: translateX(145%);
}

html body .address-elevation.is-visible .address-elevation__copy .eyebrow {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html body .address-elevation.is-visible {
  --heading-progress: 1;
}
html body .address-elevation.is-visible .address-word {
  transition-delay: calc(90ms + var(--word-index) * 45ms);
}

html body .address-elevation.is-visible .address-elevation__cta {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 760ms;
}

html body .address-elevation.is-visible .address-elevation__cta:hover,
html body .address-elevation.is-visible .address-elevation__cta:focus-visible {
  transform: translate3d(0, -2px, 0);
  transition-delay: 0ms;
}



.address-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    opacity 700ms cubic-bezier(.22, 1, .36, 1),
    transform 800ms cubic-bezier(.22, 1, .36, 1);
}

.address-stat-num {
  font-family: var(--font-headline);
  font-size: clamp(18px, 2.5vw, 44px);
  font-weight: 500;
  line-height: 1.1;
  background: linear-gradient(135deg, #fff2cc 0%, #e5c175 50%, #b89146 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.address-stat-label {
  font-family: var(--font-body);
  font-size: clamp(7.5px, 1.1vw, 10px);
  font-weight: 600;
  letter-spacing: clamp(0.12em, 1.5vw, 0.22em);
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  margin-top: 6px;
}

/* Slide-up entrance — staggered per item */
html body .address-elevation.is-visible .address-stat-item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
html body .address-elevation.is-visible .address-stat-item:nth-child(1) { transition-delay: 680ms; }
html body .address-elevation.is-visible .address-stat-item:nth-child(2) { transition-delay: 780ms; }
html body .address-elevation.is-visible .address-stat-item:nth-child(3) { transition-delay: 880ms; }
html body .address-elevation.is-visible .address-stat-item:nth-child(4) { transition-delay: 980ms; }

/* Exit on scroll past */
html body .address-elevation.is-after .address-stat-item {
  opacity: 0;
  transform: translate3d(0, -20px, 0);
  transition-delay: 0ms;
}

html body .address-elevation.is-after .address-elevation__copy .eyebrow {
  opacity: 0;
  transform: translate3d(0, -16px, 0);
}


html body .address-elevation.is-after .address-elevation__cta {
  opacity: 0;
  transform: translate3d(0, -16px, 0);
  transition-delay: 0ms;
}

html body .pool-cta-btn,
html body .legacy-cta-btn,
html body .security-cta-btn,
html body .video-scroll__cta .address-elevation__cta,
html body .legacy-cta .address-elevation__cta {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: inline-flex !important;
}

@media (max-width: 600px) {
  html body .address-elevation {
    min-height: clamp(520px, 78svh, 680px);
    padding: 88px 18px 64px;
  }

  html body .address-elevation__copy {
    width: min(100%, 430px);
  }

  html body .address-elevation__copy h1 {
    font-size: clamp(38px, 10.6vw, 48px);
    line-height: 1.05;
  }

  html body .address-elevation__copy .eyebrow {
    font-size: 9px;
  }

  html body .address-elevation__cta {
    min-height: 46px;
    padding: 0 22px;
    font-size: 10px;
  }

  html body .address-elevation__actions {
    flex-direction: column;
    gap: 9px;
    margin-top: 28px;
  }

  html body .address-elevation__cta {
    width: min(100%, 250px);
  }

  .address-break--mobile {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .address-elevation__copy .eyebrow,
  html body .address-elevation .address-word,
  html body .address-elevation__cta {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

/* Verified project credentials */
.project-credentials {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .8fr);
  margin-top: clamp(14px, 1.8vw, 26px);
  border-top: 1px solid rgba(120, 91, 45, .26);
  border-bottom: 1px solid rgba(120, 91, 45, .18);
}

.project-credentials__item {
  display: flex;
  min-width: 0;
  padding: clamp(14px, 1.5vw, 21px) clamp(14px, 1.7vw, 24px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
}

.project-credentials__item + .project-credentials__item {
  border-left: 1px solid rgba(120, 91, 45, .18);
}

.project-credentials__label {
  color: #9d7b3b;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.project-credentials address,
.project-credentials a,
.project-credentials__note {
  color: #332a25;
  font-family: var(--font-body, sans-serif);
  font-size: clamp(10px, .72vw, 12px);
  font-style: normal;
  line-height: 1.45;
  text-decoration: none;
}

.project-credentials a {
  transition: color 220ms ease;
}

.project-credentials a:hover,
.project-credentials a:focus-visible {
  color: #9d7b3b;
}

.project-credentials__note {
  color: #776d66;
  font-size: 9px;
}

@media (max-width: 760px) {
  .project-credentials {
    grid-template-columns: 1fr;
  }

  .project-credentials__item,
  .project-credentials__item--address,
  .project-credentials__item + .project-credentials__item {
    grid-column: auto;
    padding: 13px 4px;
    border-left: 0 !important;
    border-left: none !important;
  }

  .project-credentials__item + .project-credentials__item {
    border-top: 1px solid rgba(120, 91, 45, .18);
  }
}


/* Why TM Constructions: portfolio proof — legacy stats, renders, gated PDF. */
.signature-legacy {
  position: relative;
  color: #f6f1e7;
  text-align: center;
  background:
    radial-gradient(circle at 86% 14%, rgba(184, 154, 88, 0.14), transparent 32%),
    linear-gradient(135deg, #221c17, #17130f 72%);
}

.legacy-intro {
  max-width: 720px;
  margin: 0 auto;
}

.legacy-intro h2 {
  margin: 0 0 16px;
  color: #fff;
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.12;
}

.legacy-intro > p {
  margin: 0 auto;
  max-width: 62ch;
  color: rgba(246, 241, 231, 0.78);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.6;
}

/* Word-by-word reveal: JS wraps each word, CSS animates the inner span up
   through an overflow-hidden mask. If JS never runs, the plain text still
   shows — this only enhances, never blocks, the heading. */
.word-reveal__word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.word-reveal__word-inner {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
  will-change: transform;
}

.word-reveal.is-visible .word-reveal__word-inner {
  transform: translateY(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .word-reveal__word-inner {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

.legacy-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 40px);
  width: min(760px, 100%);
  margin: clamp(40px, 5vw, 64px) auto;
  padding: clamp(22px, 3vw, 34px) 0;
  border-top: 1px solid rgba(201, 168, 106, 0.22);
  border-bottom: 1px solid rgba(201, 168, 106, 0.22);
}

.legacy-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legacy-stat__value {
  color: var(--gold, #c7a764);
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.legacy-stat__label {
  color: rgba(246, 241, 231, 0.68);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.legacy-cta {
  margin: clamp(36px, 5vw, 56px) auto 0;
  max-width: 480px;
}

.legacy-cta p {
  margin: 0 0 16px;
  color: rgba(246, 241, 231, 0.72);
  font-size: 13px;
}

.legacy-cta-btn {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .legacy-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: clamp(4px, 1.8vw, 12px) !important;
    padding: 16px 0 !important;
    width: 100% !important;
  }

  .legacy-stat__value {
    font-size: clamp(18px, 4.8vw, 26px) !important;
  }

  .legacy-stat__label {
    font-size: clamp(7.5px, 2.1vw, 9px) !important;
    letter-spacing: 0.03em !important;
    line-height: 1.25 !important;
  }

  .legacy-cta-btn {
    min-height: 44px !important;
    padding: 0 22px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.08em !important;
  }
}

/* ── Combined Private Preview + Portfolio section ──────────────────────── */
/* Single dark section: eyebrow + heading, floor plan image, then an inline
   trust bar (3 counters + small pill CTA) directly attached to the image bottom. */

.signature-plans--combined {
  position: relative;
  /* Photo is set via PHP inline style; CSS ensures correct sizing */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  color: #f6f1e7;
  text-align: center;
  padding-top: clamp(28px, 3.5vw, 44px);
  padding-bottom: 0;
  isolation: isolate;
}

/* Dark overlay matching the dark chocolate theme */
.signature-plans--combined::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(to bottom,
      rgba(12, 8, 5, 0.90) 0%,
      rgba(18, 12, 7, 0.80) 45%,
      rgba(8, 5, 2, 0.93) 100%),
    radial-gradient(ellipse at 68% 5%, rgba(184, 154, 88, 0.07), transparent 52%);
  pointer-events: none;
}

/* All children sit above the overlay */
.signature-plans--combined > * {
  position: relative;
  z-index: 1;
}

/* Override the pattern-block ::before that #plans shares with other sections —
   on the combined variant, ::before is our dark photo overlay, not the pattern. */
#plans.signature-plans--combined::before {
  background-image:
    linear-gradient(to bottom,
      rgba(12, 8, 5, 0.90) 0%,
      rgba(18, 12, 7, 0.80) 45%,
      rgba(8, 5, 2, 0.93) 100%),
    radial-gradient(ellipse at 68% 5%, rgba(184, 154, 88, 0.07), transparent 52%);
  background-size: auto !important;
  inset: 0 !important;
  width: auto !important;
  aspect-ratio: auto !important;
  opacity: 1 !important;
  filter: none !important;
}


.plans-combined__intro {
  margin: 0 auto clamp(22px, 3vw, 36px);
  max-width: 600px;
}

.plans-combined__intro .eyebrow--light {
  display: block;
  color: rgba(201, 168, 106, 0.76);
  letter-spacing: 0.14em;
  font-size: 10px;
  margin-bottom: 10px;
}

.plans-combined__intro h2 {
  color: #fff;
  font-family: var(--font-headline);
  font-size: clamp(28px, 6.5vw, 76px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

/* 3-liner body copy below the heading */
.plans-combined__body {
  margin: 0 auto;
  max-width: 52ch;
  color: rgba(246, 241, 231, 0.60);
  font-size: clamp(12px, 1vw, 13.5px);
  line-height: 1.65;
}

/* Shell just lets the figure span full width */
.plans-combined__shell {
  display: block !important;
  width: min(400px, 92%) !important;
  margin-inline: auto;
}

/* Smaller, tighter floor plan figure */
.plans-combined__media {
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  aspect-ratio: 4 / 3;
}

/* Override the generic #plans size rules for the combined variant */
#plans.signature-plans--combined .signature-plans__shell,
#plans.signature-plans--combined .plans-combined__shell {
  width: min(400px, 92%) !important;
  max-width: 400px !important;
}

#plans.signature-plans--combined .signature-plans__media,
#plans.signature-plans--combined .plans-combined__media {
  max-width: 400px !important;
  aspect-ratio: 4 / 3 !important;
}


/* ── Trust bar: counters + CTA in one horizontal strip ───────────────────── */
.plans-trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 24px);
  width: 100%;
  margin-top: clamp(2px, 0.5vw, 6px);
  padding: clamp(18px, 2.4vw, 28px) clamp(20px, 5vw, 64px);
  border-top: 1px solid rgba(201, 168, 106, 0.18);
  background: rgba(0, 0, 0, 0.48);
}

.plans-trust-bar__stats {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 32px);
  flex-wrap: nowrap;
  justify-content: center;
}

/* Vertical hairline separators between stats */
.plans-trust-bar__sep {
  display: block;
  width: 1px;
  height: 28px;
  background: rgba(201, 168, 106, 0.24);
  flex-shrink: 0;
}

/* Each stat counter + label */
.plans-trust-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex-shrink: 1;
}

.plans-trust-stat__val {
  color: var(--gold, #c7a764);
  font-family: var(--font-headline);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.plans-trust-stat__lbl {
  color: rgba(246, 241, 231, 0.60);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Small pill CTA */
.plans-trust-bar__cta {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  margin-left: clamp(0px, 2vw, 20px);
  border: 1px solid rgba(201, 168, 106, 0.44);
  border-radius: 999px;
  background: transparent;
  color: rgba(201, 168, 106, 0.92);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.plans-trust-bar__cta:hover {
  background: rgba(201, 168, 106, 0.12);
  border-color: rgba(201, 168, 106, 0.7);
  color: #c7a764;
}

@media (max-width: 620px) {
  .plans-trust-bar {
    flex-direction: column;
    gap: 14px;
    padding: 16px 12px 20px;
  }

  /* Keep all 3 counters on one line even on mobile */
  .plans-trust-bar__stats {
    flex-wrap: nowrap;
    width: 100%;
    justify-content: space-between;
    gap: 6px;
  }

  .plans-trust-bar__sep {
    display: block;
    height: 22px;
  }

  .plans-trust-stat__val {
    font-size: clamp(16px, 4.5vw, 22px);
  }

  .plans-trust-stat__lbl {
    font-size: 8px;
    letter-spacing: 0.04em;
  }

  .plans-trust-bar__cta {
    margin-left: 0;
    height: 38px;
    padding: 0 22px;
    font-size: 11px;
  }
}

/* Second scroll-scrubbed cinematic: pool amenity, pinned below the address
   statement. Same sticky-stage + tall-spacer technique as the hero video —
   self-contained (no fullscreen takeover, no menu) — a mid-page teaser that
   ends on a lead CTA once the scrub finishes. */
.video-scroll {
  position: relative;
  height: 260vh;
  background: #0f0d0b;
}

.video-scroll__stage {
  position: sticky;
  top: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

.video-scroll__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-scroll__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.78) 100%),
    radial-gradient(ellipse 70% 70% at 0% 100%, rgba(6, 5, 4, 0.85), transparent 70%),
    radial-gradient(ellipse 70% 70% at 100% 100%, rgba(6, 5, 4, 0.85), transparent 70%);
  pointer-events: none;
}

#hero .video-scroll__shade {
  background: rgba(0, 0, 0, .50);
  opacity: 1;
}

#pool .video-scroll__shade {
  opacity: var(--vs-pool-shade-opacity, 0);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.38) 40%, rgba(0, 0, 0, 0.88) 100%),
    radial-gradient(ellipse 75% 75% at 0% 100%, rgba(0, 0, 0, 0.92), transparent 75%),
    radial-gradient(ellipse 75% 75% at 100% 100%, rgba(0, 0, 0, 0.92), transparent 75%);
  will-change: opacity;
}

.video-scroll__copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 640px;
  padding: 0 clamp(20px, 6vw, 80px) clamp(96px, 15vh, 168px);
  color: #fff;
  opacity: var(--vs-copy-opacity, 1);
  transform: translateY(var(--vs-copy-y, 0px));
}

.video-scroll__copy .eyebrow {
  color: var(--gold, #c7a764);
}

.video-scroll__copy h2 {
  margin: 0 0 14px;
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.12;
}

.video-scroll__copy p:not(.eyebrow) {
  margin: 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.6;
}

/* Pool section: centre copy like the hero */
#pool .video-scroll__copy {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(80px, 12vh, 140px) clamp(20px, 6vw, 80px) clamp(96px, 15vh, 168px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#pool .video-scroll__copy p:not(.eyebrow) {
  margin: 0 auto;
}

/* Hero section centered layout matching reference design */
#hero .video-scroll__stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Brand eyebrow — small spaced caps above the statement */
.hero-brand-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold, #c7a764);
  margin: 0 0 20px;
  opacity: var(--vs-copy-opacity, 1);
}

/* Two-line editorial statement */
.hero-statement {
  font-family: var(--font-headline);
  font-size: clamp(28px, 4.2vw, 62px);
  font-weight: 400;
  line-height: 1.18;
  color: #ffffff;
  margin: 0;
  text-align: center;
  letter-spacing: 0.01em;
  opacity: var(--vs-copy-opacity, 1);
  transform: translateY(var(--vs-copy-y, 0px));
}

/* Location line — pinned to bottom center */
.hero-location-bar {
  position: absolute;
  bottom: clamp(100px, 14vh, 130px);
  left: 50%;
  transform: translateX(-50%) translateY(var(--vs-copy-y, 0px));
  z-index: 3;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  opacity: var(--vs-copy-opacity, 1);
}

/* Scroll to explore CTA with vertical line */
.hero-scroll-explore {
  position: absolute;
  bottom: clamp(16px, 3vh, 24px);
  left: 50%;
  transform: translateX(-50%) translateY(var(--vs-copy-y, 0px));
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: var(--vs-copy-opacity, 1);
  cursor: default;
  transition: opacity 0.3s ease;
}

.hero-scroll-explore__text {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.hero-scroll-explore__line {
  width: 1px;
  height: clamp(24px, 4vh, 36px);
  background: rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

/* Premium sliding gold dot indicator inside the line */
.hero-scroll-explore__line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: var(--gold, #c7a764);
  transform: translateY(-100%);
  will-change: transform, opacity;
  animation: heroScrollLineMove 2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

@keyframes heroScrollLineMove {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  15% {
    transform: translateY(0%);
    opacity: 1;
  }
  80% {
    transform: translateY(233%);
    opacity: 1;
  }
  95%, 100% {
    transform: translateY(333%);
    opacity: 0;
  }
}

/* Hide cue when section ends */
.hero-scroll-explore.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Dark overlay between video and text — fades out with the copy on scroll exit */
.hero-text-overlay {
  display: none;
}

.hero-copy-centered {
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 72px 16px 0 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.hero-mobile-logo {
  display: none;
}

@media (max-width: 768px) {
  .site-header {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    gap: 8px !important;
    min-height: 62px;
    padding: 9px 18px !important;
    border-bottom: 1px solid rgba(199, 167, 100, 0.28);
    background: #120f0d;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: opacity 350ms ease, transform 450ms cubic-bezier(.22, 1, .36, 1), visibility 350ms;
    pointer-events: none;
  }

  .site-header.is-mobile-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .site-header::after {
    display: none !important;
  }

  .site-header .icon-link {
    position: relative;
    z-index: 2;
    display: grid !important;
    width: 40px;
    height: 40px;
    border-color: rgba(199, 167, 100, 0.72);
    color: var(--gold, #c7a764);
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .site-header .brand {
    position: relative;
    z-index: 2;
  }

  .site-header .brand-lockup {
    display: grid !important;
  }

  .mobile-menu-toggle {
    position: relative;
    z-index: 2;
    display: flex;
    width: 44px;
    height: 44px;
    padding: 12px 9px;
    flex-direction: column;
    justify-content: space-between;
    border: 0;
    background: transparent;
    color: var(--gold, #c7a764);
    cursor: pointer;
  }

  .mobile-menu-toggle span {
    display: block;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform-origin: center;
    transition: width 300ms ease, transform 400ms cubic-bezier(.22, 1, .36, 1), opacity 200ms ease;
  }

  .mobile-menu-toggle span:nth-child(2) {
    width: 7px;
    height: 7px;
    align-self: center;
    transform: rotate(45deg);
  }

  .site-header.is-menu-open .mobile-menu-toggle span:nth-child(1) {
    transform: translateY(9.5px) rotate(45deg);
  }

  .site-header.is-menu-open .mobile-menu-toggle span:nth-child(2) {
    opacity: 0;
    transform: rotate(135deg) scale(0);
  }

  .site-header.is-menu-open .mobile-menu-toggle span:nth-child(3) {
    transform: translateY(-9.5px) rotate(-45deg);
  }

  .site-header .nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    display: grid !important;
    gap: 0 !important;
    padding: 10px 18px 18px !important;
    overflow: visible !important;
    background: #120f0d;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 250ms ease, transform 300ms ease, visibility 250ms;
    pointer-events: none;
  }

  .site-header.is-menu-open .nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .site-header .nav a {
    padding: 13px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    opacity: 0;
    transform: translateY(-8px);
    transition: color 220ms ease, opacity 350ms ease, transform 450ms cubic-bezier(.22, 1, .36, 1);
  }

  .site-header.is-menu-open .nav a {
    opacity: 1;
    transform: translateY(0);
  }

  .site-header.is-menu-open .nav a:nth-child(1) { transition-delay: 60ms; }
  .site-header.is-menu-open .nav a:nth-child(2) { transition-delay: 100ms; }
  .site-header.is-menu-open .nav a:nth-child(3) { transition-delay: 140ms; }
  .site-header.is-menu-open .nav a:nth-child(4) { transition-delay: 180ms; }
  .site-header.is-menu-open .nav a:nth-child(5) { transition-delay: 220ms; }
  .site-header.is-menu-open .nav a:nth-child(6) { transition-delay: 260ms; }

  .site-header .nav a:hover,
  .site-header .nav a:focus-visible {
    color: var(--gold, #c7a764);
  }

  .hero-mobile-logo {
    position: absolute;
    top: 60px;
    left: 50%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(74vw, 280px);
    color: #fff;
    text-align: center;
    text-decoration: none;
    opacity: var(--vs-copy-opacity, 1);
    transform: translateX(-50%) translateY(var(--vs-copy-y, 0px));
    filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.75));
    will-change: opacity, transform;
  }

  .hero-mobile-logo__crest {
    display: block;
    width: 38px;
    height: auto;
    margin-bottom: 12px;
  }

  .hero-mobile-logo__name {
    font-family: var(--font-headline);
    font-size: clamp(22px, 7vw, 28px);
    font-weight: 500;
    letter-spacing: 0.025em;
    line-height: 1;
    white-space: nowrap;
  }

  .hero-mobile-logo__sub {
    margin-top: 8px;
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.38em;
    line-height: 1;
    white-space: nowrap;
  }

  body.is-loaded .hero-mobile-logo__crest,
  body.is-loaded .hero-mobile-logo__name,
  body.is-loaded .hero-mobile-logo__sub {
    animation: heroMobileLogoEnter 900ms cubic-bezier(.22, 1, .36, 1) both;
  }

  body.is-loaded .hero-mobile-logo__name {
    animation-delay: 120ms;
  }

  body.is-loaded .hero-mobile-logo__sub {
    animation-delay: 240ms;
  }
}

@keyframes heroMobileLogoEnter {
  from {
    opacity: 0;
    filter: blur(7px);
    transform: translateY(18px) scale(.96);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mobile-logo,
  .hero-mobile-logo > * {
    animation: none !important;
    transition: none !important;
  }
}

.hero-header-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 22px;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.95));
}

.hero-brand-crest {
  width: 38px;
  height: auto;
  margin-bottom: 0;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.8));
}

.hero-brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.hero-brand-title {
  font-family: var(--font-headline);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: var(--gold, #c7a764);
  text-transform: uppercase;
  line-height: 1.1;
}

.hero-brand-sub {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: rgba(229, 193, 117, 0.95);
  margin-top: 3px;
  text-transform: uppercase;
  line-height: 1.1;
}

.eyebrow--hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--gold, #c7a764);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.eyebrow--hero::before,
.eyebrow--hero::after {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--gold, #c7a764);
  opacity: 0.75;
}

.hero-title {
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  font-family: var(--font-headline);
  font-size: clamp(28px, 5.5vw, 68px) !important;
  font-weight: 400;
  line-height: 1.08;
  color: #ffffff;
  margin: 0 0 16px !important;
  text-shadow: none;
}

.hero-title .heading-reveal-word {
  text-shadow: none;
}

.text-gold,
.heading-reveal-word.text-gold {
  color: var(--gold, #c7a764) !important;
  -webkit-text-fill-color: var(--gold, #c7a764) !important;
  background: none !important;
  display: inline-block;
  text-shadow: none;
  filter: none !important;
}

.hero-desc {
  max-width: 46ch !important;
  margin: 0 auto !important;
  font-size: clamp(13px, 1.1vw, 16px) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 1.55;
  text-shadow: none;
}

/* Inline word spin — single element, text-swap animation */
.hero-word-spin {
  display: inline-block;
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.4, 0, 1, 1);
  transform-origin: center top;
  will-change: opacity, transform;
}

.hero-word-spin.is-leaving {
  opacity: 0;
  transform: rotateX(70deg) translateY(-6px);
}

.hero-word-spin.is-entering {
  opacity: 0;
  transform: rotateX(-55deg) translateY(6px);
  transition: none;
}

/* Hero CTA always visible — not gated by address-elevation scroll state */
html body .hero-main-cta {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  visibility: visible !important;
  display: inline-flex !important;
  margin-top: 24px;
}

@media (max-width: 640px) {
  html body .hero-main-cta {
    margin-top: 18px;
    min-height: 44px !important;
    font-size: 10.5px !important;
    padding: 0 22px !important;
  }
}

.hero-cue-centered,
#hero .video-scroll__cue {
  position: absolute !important;
  bottom: clamp(80px, 14vh, 120px) !important;
  left: 50% !important;
  top: auto !important;
  right: auto !important;
  transform: translateX(-50%) translateY(var(--vs-copy-y, 0px)) !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  opacity: var(--vs-copy-opacity, 1) !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9));
  z-index: 3;
}

@keyframes heroStatEnter {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hero-bottom-stats {
  position: absolute;
  bottom: clamp(16px, 3.5vh, 32px);
  left: 50%;
  transform: translate(-50%, var(--vs-copy-y, 0px)) !important;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vw, 72px);
  width: 90%;
  max-width: 860px;
  opacity: var(--vs-copy-opacity, 1) !important;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.95));
}

.hero-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: heroStatEnter 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-stat-item:nth-child(1) { animation-delay: 0.2s; }
.hero-stat-item:nth-child(2) { animation-delay: 0.35s; }
.hero-stat-item:nth-child(3) { animation-delay: 0.5s; }
.hero-stat-item:nth-child(4) { animation-delay: 0.65s; }

.hero-stat-num {
  font-family: var(--font-headline);
  font-size: clamp(25px, 2.8vw, 38px);
  font-weight: 500;
  color: var(--gold, #c7a764);
  line-height: 1.1;
  background: linear-gradient(135deg, #fff2cc 0%, #e5c175 50%, #b89146 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.95));
}

.hero-stat-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  margin-top: 4px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

@media (max-width: 768px) {

  .hero-title,
  .hero-title .heading-reveal-word {
    text-shadow: none !important;
  }

  .text-gold,
  .heading-reveal-word.text-gold {
    text-shadow: none !important;
  }

  .hero-desc {
    text-shadow: none !important;
  }

  .hero-bottom-stats {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-around !important;
    gap: clamp(4px, 2vw, 14px) !important;
    width: 98% !important;
    max-width: 520px !important;
    bottom: clamp(10px, 2.5vh, 20px) !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)) !important;
  }

  .hero-stat-num {
    font-size: clamp(16px, 4.5vw, 22px) !important;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4)) !important;
  }

  .hero-stat-label {
    font-size: clamp(7.5px, 2vw, 9px) !important;
    letter-spacing: 0.12em !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  }
}

@media (max-width: 400px) {
  .hero-bottom-stats {
    gap: 2px !important;
    width: 100% !important;
    bottom: 8px !important;
  }

  .hero-stat-num {
    font-size: 15px !important;
  }

  .hero-stat-label {
    font-size: 7px !important;
    letter-spacing: 0.08em !important;
  }
}

.video-scroll__cue {
  position: absolute;
  z-index: 2;
  right: clamp(54px, 8vw, 120px);
  bottom: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 1;
  transition: opacity 0.4s ease;
}

@media (min-width: 992px) {
  #pool .video-scroll__cue {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

.video-scroll__cue-line {
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.4);
  overflow: hidden;
}

.video-scroll__cue-line::after {
  display: block;
  width: 100%;
  height: 40%;
  background: var(--gold, #c7a764);
  content: "";
  animation: videoScrollCue 1.8s ease-in-out infinite;
}

@keyframes videoScrollCue {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(250%); }
}

.video-scroll__cue.is-hidden {
  opacity: 0;
}

.video-scroll__cta {
  position: absolute;
  z-index: 3;
  left: 50%;
  right: auto;
  bottom: clamp(36px, 6vh, 64px);
  transform: translateX(-50%) translateY(18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(480px, 86vw);
  text-align: center;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.video-scroll.is-cta-visible .video-scroll__cta {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.video-scroll__cta p {
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  font-family: var(--font-headline);
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.9);
}

@media (prefers-reduced-motion: reduce) {
  .video-scroll {
    height: auto;
  }

  .video-scroll__stage {
    position: relative;
    height: 78vh;
    height: 78dvh;
  }

  .video-scroll__cue {
    display: none;
  }

  .video-scroll__cta {
    position: static;
    align-items: center;
    width: auto;
    text-align: center;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    padding: 0 20px 48px;
  }
}

@media (max-width: 640px) {
  .video-scroll {
    height: 220vh;
  }

  .video-scroll__copy {
    max-width: 100%;
    padding-bottom: clamp(140px, 30vh, 220px);
    text-align: center;
  }

  .video-scroll__copy h2 {
    font-size: clamp(21px, 6.4vw, 27px);
  }

  .video-scroll__copy p:not(.eyebrow) {
    max-width: 32ch;
    margin: 0 auto;
    font-size: 12.5px;
  }

  .video-scroll__cue {
    right: auto;
    left: 50%;
    bottom: clamp(28px, 6vh, 56px);
    transform: translateX(-50%);
  }

  .video-scroll__cta {
    right: 20px;
    left: 20px;
    width: auto;
    align-items: center;
    text-align: center;
  }

  .video-scroll__cta p {
    font-size: 14px;
  }
}

/* Section headings, word-by-word — same treatment as the opening "A
   residence composed..." statement (.address-word), generalized under
   data-heading-reveal so any section title can use it without repeating
   the per-word markup by hand. Values match .address-word exactly. */
.heading-reveal {
  transform: scale(calc(3 - 2 * var(--heading-progress, 0)));
  transform-origin: 50% 50%;
  transition: none;
  will-change: transform;
  backface-visibility: hidden;
}

html body #address-elevation-title {
  transition: none;
  backface-visibility: hidden;
}

@media (max-width: 640px) {
  .heading-reveal,
  html body #address-elevation-title {
    transform: translateZ(0) scale(calc(3 - 2 * var(--heading-progress, 0)));
    transform-origin: 50% 50%;
  }
}

@media (max-width: 760px) {
  .signature-connectivity .connectivity-map__full {
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .signature-connectivity #gmap-iframe {
    inset: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
}

/* Hero shadow reset: the only darkening now comes from the single flat
   .video-scroll__shade layer defined with the hero itself above. */
#hero .hero-mobile-logo,
#hero .hero-header-brand,
#hero .hero-brand-crest,
#hero .hero-cue-centered,
#hero .video-scroll__cue,
#hero .hero-bottom-stats,
#hero .hero-stat-num {
  filter: none !important;
}

#hero .hero-stat-label,
#hero .hero-desc,
#hero .hero-title,
#hero .hero-brand-title,
#hero .hero-brand-subtitle {
  text-shadow: none !important;
}

/* Hero logo/type must render cleanly against the single flat overlay. */
#hero .hero-mobile-logo,
#hero .hero-mobile-logo__crest,
#hero .hero-header-brand,
#hero .hero-brand-crest,
#hero .hero-cue-centered,
#hero .video-scroll__cue,
#hero .hero-bottom-stats,
#hero .hero-stat-num {
  filter: none !important;
}

#hero .video-scroll__stage * {
  text-shadow: none !important;
}

@media (max-width: 640px) {
  #hero .hero-stat-num {
    font-size: clamp(22px, 6.4vw, 30px) !important;
    line-height: 1.05;
  }

  #hero .hero-stat-label {
    margin-top: 6px;
    font-size: clamp(9px, 2.5vw, 10.5px) !important;
    letter-spacing: .14em !important;
    line-height: 1.2;
  }

  #hero .hero-bottom-stats {
    gap: clamp(7px, 2.8vw, 18px) !important;
    width: 96% !important;
  }
}

.heading-reveal .heading-reveal-word {
  display: inline-block;
}

.heading-reveal.is-visible {
  --heading-progress: 1;
}

/* Original cinematic word-by-word animation for #hero and #pool headings only */
#hero .heading-reveal,
#pool .heading-reveal {
  transform: none !important;
  transition: none !important;
}

#hero .heading-reveal-word,
#pool .heading-reveal-word {
  display: inline-block;
  opacity: 0;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  filter: blur(8px);
  transform: translate3d(0, .8em, 0) rotateX(-22deg);
  transform-origin: 50% 100%;
  transition:
    opacity 700ms cubic-bezier(.22, 1, .36, 1),
    filter 800ms cubic-bezier(.22, 1, .36, 1),
    transform 900ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--word-index) * 70ms);
  will-change: opacity, filter, transform;
}

#hero .heading-reveal.is-visible .heading-reveal-word,
#pool .heading-reveal.is-visible .heading-reveal-word {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) rotateX(0);
  transition-delay: calc(90ms + var(--word-index) * 70ms);
}

#hero .heading-reveal.is-after .heading-reveal-word,
#pool .heading-reveal.is-after .heading-reveal-word {
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(0, -.65em, 0) rotateX(18deg);
  transition-delay: calc(var(--word-exit-index) * 55ms);
}

@media (prefers-reduced-motion: reduce) {
  .heading-reveal .heading-reveal-word {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

/* Lead popup redesign: floating-label icon fields, animated open/close,
   staggered entrance, interactive submit state. Everything here is scoped
   under .lead-popup.signature-lead specifically (never bare .signature-lead
   or #enquire) so the main-page enquiry form, which shares those tokens,
   is left exactly as it was. */
.lead-popup.signature-lead {
  opacity: 0;
  transform: scale(0.96) translateY(10px);
  transition: opacity 320ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lead-popup.signature-lead.is-open {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.lead-popup.signature-lead.is-closing {
  pointer-events: none;
}

.lead-popup.signature-lead::backdrop {
  opacity: 0;
  transition: opacity 320ms ease;
}

.lead-popup.signature-lead.is-open::backdrop {
  opacity: 1;
}

.lead-popup.signature-lead .lead-popup__close {
  display: grid;
  place-items: center;
  color: var(--tm-ink);
}

.lead-popup.signature-lead .lead-popup__close svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lead-popup.signature-lead .lead-popup__close:hover svg,
.lead-popup.signature-lead .lead-popup__close:focus-visible svg {
  transform: rotate(90deg);
}

/* Trust markers under the copy — verified, factual claims already made
   elsewhere on the site (RERA number, developer-direct, portfolio stat). */
.lead-popup.signature-lead .lead-popup__trust {
  display: grid;
  gap: 11px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.lead-popup.signature-lead .lead-popup__trust li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  line-height: 1.45;
}

.lead-popup.signature-lead .lead-popup__trust svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  fill: none;
  stroke: var(--gold, #c7a764);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The copy panel (left column) can run taller than the form, and the
   dialog's own grid stretches both columns to match. Centering here
   (rather than packing to the top) spreads any leftover height evenly
   above and below instead of dumping it all as dead space under the
   button — the copy/text side is kept short so this stays minimal. */
.lead-popup.signature-lead .lead-form--popup {
  align-content: center;
}

/* Floating-label icon fields */
.lead-popup.signature-lead .lead-form--popup .field {
  position: relative;
  display: block;
  align-self: start;
}

.lead-popup.signature-lead .lead-form--popup .field__icon {
  position: absolute;
  top: 50%;
  left: 14px;
  z-index: 1;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--tm-gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 220ms ease;
}

.lead-popup.signature-lead .lead-form--popup .field:focus-within .field__icon {
  opacity: 1;
}

.lead-popup.signature-lead .lead-form--popup .field input {
  width: 100%;
  height: 54px;
  padding: 21px 14px 7px 40px;
  border: 1px solid var(--tm-line);
  border-radius: 8px;
  background: var(--tm-glass);
  color: var(--tm-ink);
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.lead-popup.signature-lead .lead-form--popup .field input:focus {
  outline: none;
  border-color: var(--tm-gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(184, 154, 88, 0.18);
}

.lead-popup.signature-lead .lead-form--popup .field input:not(:placeholder-shown) {
  background: #fff;
}

.lead-popup.signature-lead .lead-form--popup .field__label {
  position: absolute;
  top: 50%;
  left: 40px;
  color: rgba(33, 25, 19, 0.5);
  font-size: 14px;
  font-weight: 500;
  pointer-events: none;
  transform: translateY(-50%);
  transition: top 200ms ease, font-size 200ms ease, color 200ms ease, transform 200ms ease, letter-spacing 200ms ease;
}

.lead-popup.signature-lead .lead-form--popup .field__label .optional {
  color: rgba(33, 25, 19, 0.4);
  font-size: 11px;
  font-weight: 400;
}

.lead-popup.signature-lead .lead-form--popup .field input:focus ~ .field__label,
.lead-popup.signature-lead .lead-form--popup .field input:not(:placeholder-shown) ~ .field__label {
  top: 13px;
  transform: translateY(0);
  color: var(--tm-gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Entrance stagger, once the dialog is open */
.lead-popup.signature-lead .lead-popup__trust li,
.lead-popup.signature-lead .lead-form--popup > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms ease, transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lead-popup.signature-lead.is-open .lead-popup__trust li,
.lead-popup.signature-lead.is-open .lead-form--popup > * {
  opacity: 1;
  transform: translateY(0);
}

.lead-popup.signature-lead .lead-popup__trust li:nth-child(1) { transition-delay: 160ms; }
.lead-popup.signature-lead .lead-popup__trust li:nth-child(2) { transition-delay: 220ms; }
.lead-popup.signature-lead .lead-popup__trust li:nth-child(3) { transition-delay: 280ms; }
.lead-popup.signature-lead .lead-form--popup > *:nth-child(3) { transition-delay: 140ms; }
.lead-popup.signature-lead .lead-form--popup > *:nth-child(4) { transition-delay: 190ms; }
.lead-popup.signature-lead .lead-form--popup > *:nth-child(5) { transition-delay: 240ms; }
.lead-popup.signature-lead .lead-form--popup > *:nth-child(7) { transition-delay: 300ms; }

/* Submit button: gradient, shine sweep on hover, spinner while submitting */
.lead-popup.signature-lead .lead-form--popup button[type="submit"] {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(184, 154, 88, 0.5);
  background: linear-gradient(135deg, #c7a764, #93753a);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease;
}

.lead-popup.signature-lead .lead-form--popup button[type="submit"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 650ms ease;
}

.lead-popup.signature-lead .lead-form--popup button[type="submit"]:hover::before {
  transform: translateX(120%);
}

.lead-popup.signature-lead .lead-form--popup button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(120, 94, 45, 0.32);
}

.lead-popup.signature-lead .button__spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
}

.lead-popup.signature-lead .lead-form--popup button.is-submitting {
  cursor: progress;
  opacity: 0.9;
}

.lead-popup.signature-lead .lead-form--popup button.is-submitting .button__label {
  opacity: 0.8;
}

.lead-popup.signature-lead .lead-form--popup button.is-submitting .button__spinner {
  display: inline-block;
  animation: leadSubmitSpin 700ms linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .lead-popup.signature-lead,
  .lead-popup.signature-lead::backdrop,
  .lead-popup.signature-lead .lead-popup__trust li,
  .lead-popup.signature-lead .lead-form--popup > *,
  .lead-popup.signature-lead .lead-form--popup .field__label,
  .lead-popup.signature-lead .lead-form--popup .field input,
  .lead-popup.signature-lead .lead-popup__close svg,
  .lead-popup.signature-lead .lead-form--popup button[type="submit"],
  .lead-popup.signature-lead .lead-form--popup button[type="submit"]::before {
    transition: none !important;
    animation: none !important;
  }

  .lead-popup.signature-lead,
  .lead-popup.signature-lead::backdrop,
  .lead-popup.signature-lead .lead-popup__trust li,
  .lead-popup.signature-lead .lead-form--popup > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Lead popup v2: final scoped luxury system */
.lead-popup.signature-lead {
  width: min(860px, calc(100vw - 32px));
  max-width: 860px;
  max-height: min(720px, calc(100dvh - 32px));
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(199, 167, 100, 0.32);
  border-radius: 18px;
  background: #f4efe7;
  color: #201a16;
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.55);
  scrollbar-width: thin;
  scrollbar-color: rgba(199, 167, 100, 0.55) transparent;
}

.lead-popup.signature-lead[open] {
  display: grid;
  grid-template-columns: minmax(270px, 0.78fr) minmax(0, 1.22fr);
}

.lead-popup.signature-lead::backdrop {
  background: rgba(5, 4, 3, 0.74);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.lead-popup.signature-lead .lead-popup__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(34px, 5vw, 56px) clamp(28px, 4vw, 44px);
  background: #12100e;
  color: #f8f4ed;
}

.lead-popup.signature-lead .lead-popup__crest {
  width: 34px;
  height: auto;
  margin: 0 0 28px;
  object-fit: contain;
}

.lead-popup.signature-lead .lead-popup__copy .eyebrow {
  margin: 0 0 10px;
  color: #c7a764;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.lead-popup.signature-lead .lead-popup__copy h2 {
  max-width: 10ch;
  margin: 0 0 14px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.lead-popup.signature-lead .lead-popup__copy > p:not(.eyebrow) {
  max-width: 31ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 1.65;
}

.lead-popup.signature-lead .lead-popup__trust {
  gap: 9px;
  margin-top: 28px;
}

.lead-popup.signature-lead .lead-popup__trust li {
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
}

.lead-popup.signature-lead .lead-popup__trust svg { width: 15px; height: 15px; }

.lead-popup.signature-lead .lead-popup__close {
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-color: rgba(32, 26, 22, 0.13);
  background: rgba(255, 255, 255, 0.5);
  color: #201a16;
}

.lead-popup.signature-lead .lead-popup__close:focus-visible {
  outline: 2px solid #a98743;
  outline-offset: 3px;
}

.lead-popup.signature-lead .lead-form--popup {
  align-content: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: clamp(72px, 7vw, 88px) clamp(24px, 4vw, 44px) clamp(32px, 5vw, 48px);
  border: 0;
  border-radius: 0;
  background: #f4efe7;
  box-shadow: none;
  backdrop-filter: none;
}

.lead-popup.signature-lead .lead-form__intro {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}

.lead-popup.signature-lead .lead-form__intro > span {
  color: #201a16;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.15;
}

.lead-popup.signature-lead .lead-form__intro small,
.lead-popup.signature-lead .lead-form__privacy {
  color: rgba(32, 26, 22, 0.54);
  font-size: 10px;
  line-height: 1.5;
}

.lead-popup.signature-lead .lead-form--popup .field input {
  height: 56px;
  border-color: rgba(67, 53, 39, 0.18);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.58);
}

.lead-popup.signature-lead .lead-form--popup .field input:hover { border-color: rgba(169, 135, 67, 0.52); }

.lead-popup.signature-lead .lead-form--popup .field input:focus {
  border-color: #a98743;
  background: #fffdf9;
  box-shadow: 0 0 0 3px rgba(169, 135, 67, 0.16);
}

.lead-popup.signature-lead .lead-form--popup button[type="submit"] {
  min-height: 54px;
  margin-top: 2px;
  border-color: #a98743;
  border-radius: 7px;
  background: #a98743;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lead-popup.signature-lead .lead-form--popup button[type="submit"]::before { display: none; }
.lead-popup.signature-lead .lead-form--popup button[type="submit"]:hover {
  background: #927236;
  box-shadow: 0 10px 24px rgba(83, 61, 27, 0.22);
}
.lead-popup.signature-lead .lead-form--popup button[type="submit"]:focus-visible {
  outline: 2px solid #201a16;
  outline-offset: 3px;
}
.lead-popup.signature-lead .lead-form__privacy { margin: -3px 0 0; text-align: center; }

@media (max-width: 700px) {
  .lead-popup.signature-lead {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 14px;
  }
  .lead-popup.signature-lead[open] { grid-template-columns: minmax(0, 1fr); }
  .lead-popup.signature-lead .lead-popup__copy { padding: 28px 64px 24px 24px; }
  .lead-popup.signature-lead .lead-popup__crest { width: 26px; margin-bottom: 18px; }
  .lead-popup.signature-lead .lead-popup__copy h2 {
    max-width: none;
    margin-bottom: 10px;
    font-size: clamp(28px, 9vw, 38px);
  }
  .lead-popup.signature-lead .lead-popup__copy > p:not(.eyebrow) {
    max-width: 38ch;
    font-size: 12px;
    line-height: 1.55;
  }
  .lead-popup.signature-lead .lead-popup__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 18px;
  }
  .lead-popup.signature-lead .lead-popup__trust li { font-size: 10px; }
  .lead-popup.signature-lead .lead-popup__close {
    top: 12px;
    right: 12px;
    border-color: rgba(199, 167, 100, 0.34);
    background: #1b1815;
    color: #fff;
  }
  .lead-popup.signature-lead .lead-form--popup {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 24px;
  }
  .lead-popup.signature-lead .lead-form--popup .span-2 { grid-column: auto; }
  .lead-popup.signature-lead .lead-form__intro { margin-bottom: 4px; }
  .lead-popup.signature-lead .lead-form__intro > span { font-size: 19px; }
}

@media (max-width: 380px), (max-height: 680px) {
  .lead-popup.signature-lead .lead-popup__copy { padding-top: 22px; padding-bottom: 20px; }
  .lead-popup.signature-lead .lead-popup__crest,
  .lead-popup.signature-lead .lead-popup__trust { display: none; }
  .lead-popup.signature-lead .lead-form--popup { padding: 20px; }
}

/* 7D Security Sanctuary Section */
.security-sanctuary {
  position: relative;
  background-color: #0b0908;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(199, 167, 100, 0.14), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 110%, rgba(199, 167, 100, 0.08), transparent 70%);
  padding: clamp(60px, 9vw, 120px) 24px;
  overflow: hidden;
}

.security-sanctuary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
}

.security-sanctuary__container {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  container-name: security-carousel;
  container-type: inline-size;
}

.security-sanctuary__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 6vw, 70px);
}

.security-sanctuary__header .eyebrow--gold {
  display: inline-block;
  color: var(--gold, #c7a764);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.security-sanctuary__title {
  font-family: var(--font-headline);
  font-size: clamp(32px, 4.5vw, 54px);
  font-weight: 400;
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 16px;
}

.security-sanctuary__subtitle {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.2vw, 17px);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
  margin: 0;
}

.security-sanctuary__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2vw, 26px);
}

.security-card {
  grid-column: span 4;
  position: relative;
  background: rgba(22, 18, 14, 0.65);
  border: 1px solid rgba(199, 167, 100, 0.16);
  border-radius: 12px;
  padding: clamp(16px, 1.6vw, 24px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(32px) scale(0.96);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  will-change: transform, opacity;
}

.security-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.security-card.is-before {
  opacity: 0;
  transform: translateY(32px) scale(0.96);
}

.security-card.is-after {
  opacity: 0;
  transform: translateY(-24px) scale(0.96);
}

.security-card:nth-child(1) { transition-delay: 0.05s; }
.security-card:nth-child(2) { transition-delay: 0.15s; }
.security-card:nth-child(3) { transition-delay: 0.25s; }
.security-card:nth-child(4) { transition-delay: 0.35s; }
.security-card:nth-child(5) { transition-delay: 0.45s; }
.security-card:nth-child(6) { transition-delay: 0.55s; }
.security-card:nth-child(7) { transition-delay: 0.65s; }

@media (prefers-reduced-motion: reduce) {
  .security-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.security-card.is-visible:hover {
  transform: translateY(-4px) scale(1);
  border-color: rgba(199, 167, 100, 0.5);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 20px rgba(199, 167, 100, 0.1);
}

.security-card--featured {
  grid-column: span 12;
  flex-direction: row;
  align-items: center;
  gap: 22px;
  background: linear-gradient(135deg, rgba(32, 26, 20, 0.75), rgba(18, 14, 11, 0.85));
  border-color: rgba(199, 167, 100, 0.3);
}

.security-card__badge {
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: var(--font-headline);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: rgba(199, 167, 100, 0.4);
}

.security-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(199, 167, 100, 0.08);
  border: 1px solid rgba(199, 167, 100, 0.22);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  transition: background 0.35s ease, transform 0.35s ease;
}

.security-card:hover .security-card__icon {
  background: rgba(199, 167, 100, 0.18);
  transform: scale(1.05);
}

.security-card__icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--gold, #c7a764);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.security-card__level {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold, #c7a764);
  margin-bottom: 4px;
}

.security-card__title {
  font-family: var(--font-headline);
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 400;
  color: #ffffff;
  margin: 0 0 6px;
  line-height: 1.25;
}

.security-card__text {
  font-family: var(--font-body);
  font-size: clamp(11.5px, 0.82vw, 13px);
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.48;
  margin: 0;
}

.security-card--featured .security-card__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 0;
  flex-shrink: 0;
}

.security-card--featured .security-card__badge {
  top: 18px;
  right: 22px;
}

.security-sanctuary__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 3.5vw, 42px);
}

.security-cta-btn {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

@media (max-width: 1024px) {
  .security-card {
    grid-column: span 6;
  }
  .security-card--featured {
    grid-column: span 12;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

@media (max-width: 900px) {
  .security-sanctuary__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 16px;
    padding: 12px 24px 20px;
    margin: 0 -24px;
  }

  .security-sanctuary__grid::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .security-card {
    flex: 0 0 84vw;
    max-width: 340px;
    min-width: 270px;
    scroll-snap-align: center;
    grid-column: auto !important;
  }

  .security-card--featured {
    flex: 0 0 88vw;
    max-width: 360px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* All headings, uppercase site-wide — !important to win regardless of
   whatever per-component override happens to be sitting later in the
   cascade for a given h1/h2/h3. */
/* 7D Security: perspective carousel */
.security-sanctuary__grid[data-security-carousel] {
  position: relative;
  display: block;
  height: clamp(245px, 24vw, 310px);
  margin: 0 calc(clamp(24px, 5vw, 72px) * -1);
  padding: 0;
  overflow: hidden;
  perspective: 1300px;
  perspective-origin: 50% 45%;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  --security-drag-x: 0px;
}

.security-sanctuary__grid[data-security-carousel].is-dragging {
  cursor: grabbing;
}

.security-sanctuary__grid[data-security-carousel].is-dragging .security-card {
  transition: none !important;
  box-shadow: none !important;
}

.security-sanctuary__grid[data-security-carousel] .security-card {
  position: absolute;
  top: 18px;
  left: 50%;
  display: flex;
  grid-column: auto;
  width: min(34vw, 430px);
  min-width: 0;
  max-width: none;
  min-height: 205px;
  padding: clamp(19px, 2vw, 27px);
  opacity: 0;
  visibility: hidden;
  contain: layout paint style;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform-style: preserve-3d;
  transition: opacity 460ms ease, transform 620ms cubic-bezier(.2, .8, .2, 1), border-color 320ms ease, visibility 460ms;
  transition-delay: 0s;
  pointer-events: none;
}

.security-sanctuary__grid[data-security-carousel] .security-card--featured {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  background: rgba(22, 18, 14, 0.82);
}

.security-sanctuary__grid[data-security-carousel] .security-card--featured .security-card__icon {
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
}

.security-card.is-carousel-main-a,
.security-card.is-carousel-main-b,
.security-card.is-carousel-side-left,
.security-card.is-carousel-side-right,
.security-card.is-carousel-hidden-left,
.security-card.is-carousel-hidden-right {
  visibility: visible !important;
}

.security-card.is-carousel-main-a {
  z-index: 4;
  opacity: 1 !important;
  transform: translate3d(calc(-100% - 14px + var(--security-drag-x)), 0, 0) rotateY(0) scale(1) !important;
  pointer-events: auto !important;
}

.security-card.is-carousel-main-b {
  z-index: 4;
  opacity: 1 !important;
  transform: translate3d(calc(14px + var(--security-drag-x)), 0, 0) rotateY(0) scale(1) !important;
  pointer-events: auto !important;
}

.security-card.is-carousel-side-left {
  z-index: 2;
  opacity: .46 !important;
  transform: translate3d(calc(-190% - 50px + var(--security-drag-x)), 0, 0) rotateY(52deg) scale(.82) !important;
}

.security-card.is-carousel-side-right {
  z-index: 2;
  opacity: .46 !important;
  transform: translate3d(calc(90% + 50px + var(--security-drag-x)), 0, 0) rotateY(-52deg) scale(.82) !important;
}

.security-card.is-carousel-hidden-left {
  z-index: 1;
  opacity: 0 !important;
  transform: translate3d(calc(-260% - 80px + var(--security-drag-x)), 0, 0) rotateY(64deg) scale(.66) !important;
}

.security-card.is-carousel-hidden-right {
  z-index: 1;
  opacity: 0 !important;
  transform: translate3d(calc(160% + 80px + var(--security-drag-x)), 0, 0) rotateY(-64deg) scale(.66) !important;
}

.security-card.is-carousel-main-a:hover,
.security-card.is-carousel-main-b:hover {
  border-color: rgba(199, 167, 100, 0.52);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .42), 0 0 28px rgba(199, 167, 100, .08);
}

.security-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 20px;
}

.security-carousel__arrow {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(199, 167, 100, .34);
  border-radius: 50%;
  background: rgba(199, 167, 100, .06);
  color: var(--gold, #c7a764);
  cursor: pointer;
  transition: background 250ms ease, border-color 250ms ease, transform 250ms ease;
}

.security-carousel__arrow:hover,
.security-carousel__arrow:focus-visible {
  border-color: rgba(199, 167, 100, .75);
  background: rgba(199, 167, 100, .14);
  outline: none;
  transform: scale(1.06);
}

.security-carousel__arrow svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.security-carousel__dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.security-carousel__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  cursor: pointer;
  transition: width 300ms ease, border-radius 300ms ease, background 300ms ease;
}

.security-carousel__dot.is-active {
  width: 24px;
  border-radius: 999px;
  background: var(--gold, #c7a764);
}

@container security-carousel (max-width: 900px) {
  .security-sanctuary__grid[data-security-carousel] {
    height: 280px;
    margin: 0 -24px;
    overflow: hidden;
    perspective: none;
  }

  .security-sanctuary__grid[data-security-carousel] .security-card {
    top: 14px;
    right: auto !important;
    left: 50% !important;
    box-sizing: border-box;
    flex: none !important;
    width: min(calc(100% - 40px), 360px) !important;
    min-width: 0 !important;
    max-width: 360px !important;
    min-height: 230px;
    margin: 0 !important;
  }

  .security-sanctuary__grid[data-security-carousel] .security-card.is-carousel-main-a {
    z-index: 5;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(calc(-50% + var(--security-drag-x)), 0, 0) rotateY(0) scale(1) !important;
  }

  .security-sanctuary__grid[data-security-carousel]:not(.security-carousel--v2) .security-card:not(.is-carousel-main-a):not(.is-carousel-side-left):not(.is-carousel-side-right) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(calc(-50% + var(--security-drag-x)), 0, 0) rotateY(0) scale(.96) !important;
  }

  .security-sanctuary__grid[data-security-carousel] .security-card.is-carousel-side-left {
    z-index: 2;
    opacity: .3 !important;
    visibility: visible !important;
    transform: translate3d(calc(-145% + var(--security-drag-x)), 0, 0) rotateY(58deg) scale(.82) !important;
  }

  .security-sanctuary__grid[data-security-carousel] .security-card.is-carousel-side-right {
    z-index: 2;
    opacity: .3 !important;
    visibility: visible !important;
    transform: translate3d(calc(45% + var(--security-drag-x)), 0, 0) rotateY(-58deg) scale(.82) !important;
  }

}

.security-sanctuary__grid[data-security-carousel].is-single-card {
  height: 280px;
  margin: 0 -24px;
  overflow: hidden;
  perspective: none;
}

.security-sanctuary__grid[data-security-carousel].is-single-card .security-card,
.security-sanctuary__grid[data-security-carousel].is-single-card .security-card--featured {
  top: 14px;
  right: auto !important;
  left: 50% !important;
  box-sizing: border-box;
  flex: none !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  width: min(calc(100% - 40px), 360px) !important;
  min-width: 0 !important;
  max-width: 360px !important;
  min-height: 230px;
  margin: 0 !important;
}

.security-sanctuary__grid[data-security-carousel].is-single-card .security-card.is-carousel-main-a {
  z-index: 5;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(calc(-50% + var(--security-drag-x)), 0, 0) rotateY(0) scale(1) !important;
}

.security-sanctuary__grid[data-security-carousel].is-single-card .security-card:not(.is-carousel-main-a):not(.is-carousel-side-left):not(.is-carousel-side-right) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(calc(-50% + var(--security-drag-x)), 0, 0) scale(.96) !important;
}

.security-sanctuary__grid[data-security-carousel].is-single-card .security-card.is-carousel-side-left {
  z-index: 2;
  opacity: .3 !important;
  visibility: visible !important;
  transform: translate3d(calc(-145% + var(--security-drag-x)), 0, 0) rotateY(58deg) scale(.82) !important;
}

.security-sanctuary__grid[data-security-carousel].is-single-card .security-card.is-carousel-side-right {
  z-index: 2;
  opacity: .3 !important;
  visibility: visible !important;
  transform: translate3d(calc(45% + var(--security-drag-x)), 0, 0) rotateY(-58deg) scale(.82) !important;
}

/* Seamless carousel V2 — continuous track with cloned loop boundaries. */
.security-sanctuary__grid[data-security-carousel].security-carousel--v2 {
  position: relative;
  display: block !important;
  height: 270px;
  margin: 0 calc(clamp(24px, 5vw, 72px) * -1);
  padding: 0 !important;
  overflow: hidden !important;
  perspective: 1300px;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.security-carousel--v2.is-dragging {
  cursor: grabbing;
}

.security-carousel--v2 .security-carousel__track {
  position: relative;
  display: flex;
  width: max-content;
  gap: 16px;
  padding: 18px 0;
  will-change: transform;
  transition-property: transform;
  transition-timing-function: cubic-bezier(.22, .76, .26, 1);
}

.security-carousel--v2 .security-carousel__track > .security-card {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  box-sizing: border-box;
  flex: 0 0 var(--security-v2-card-width) !important;
  width: var(--security-v2-card-width) !important;
  min-width: var(--security-v2-card-width) !important;
  max-width: var(--security-v2-card-width) !important;
  min-height: 220px;
  margin: 0 !important;
  padding: clamp(19px, 2vw, 27px);
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  opacity: 0 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) rotateY(0) scale(.72) !important;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  pointer-events: none !important;
  will-change: transform, opacity;
  transition: transform 380ms cubic-bezier(.22, .76, .26, 1), opacity 260ms ease !important;
  transition-delay: 0ms !important;
}

.security-sanctuary__grid[data-security-carousel].security-carousel--v2 .security-carousel__track > .security-card.is-v2-main {
  z-index: 4;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) rotateY(0) scale(1) !important;
  pointer-events: auto !important;
}

.security-sanctuary__grid[data-security-carousel].security-carousel--v2 .security-carousel__track > .security-card.is-v2-left {
  z-index: 2;
  opacity: .42 !important;
  transform: translate3d(8%, 0, -90px) rotateY(52deg) scale(.82) !important;
}

.security-sanctuary__grid[data-security-carousel].security-carousel--v2 .security-carousel__track > .security-card.is-v2-right {
  z-index: 2;
  opacity: .42 !important;
  transform: translate3d(-8%, 0, -90px) rotateY(-52deg) scale(.82) !important;
}

.security-carousel--v2.is-mobile-v2 {
  height: 270px;
  margin: 0 -24px;
  perspective: 1000px;
}

.security-sanctuary__grid[data-security-carousel].security-carousel--v2.is-mobile-v2 .security-carousel__track > .security-card.is-v2-left,
.security-sanctuary__grid[data-security-carousel].security-carousel--v2.is-mobile-v2 .security-carousel__track > .security-card.is-v2-right {
  opacity: .28 !important;
  transform: translate3d(0, 0, -70px) rotateY(var(--security-v2-side-rotate, 0deg)) scale(.86) !important;
}

.security-sanctuary__grid[data-security-carousel].security-carousel--v2.is-mobile-v2 .security-carousel__track > .security-card.is-v2-left {
  --security-v2-side-rotate: 55deg;
}

.security-sanctuary__grid[data-security-carousel].security-carousel--v2.is-mobile-v2 .security-carousel__track > .security-card.is-v2-right {
  --security-v2-side-rotate: -55deg;
}

@media (prefers-reduced-motion: reduce) {
  .security-carousel--v2 .security-carousel__track,
  .security-carousel--v2 .security-carousel__track > .security-card {
    transition-duration: 0ms !important;
  }
}

h1, h2, h3 {
  text-transform: uppercase !important;
}

/* "The address advantage" wraps to two lines at the shared 620px cap the
   uppercase version needs more room than the mixed-case original did.
   #address is specific enough to win over the shared connectivity/gallery/
   enquire rule without touching those other two headings. */
#address .connectivity-map__intro h2 {
  max-width: none !important;
  white-space: nowrap !important;
}

/* Mobile stability pass: one deterministic 3D stage. The track never moves
   horizontally on phones, so clone normalization cannot leave every card
   outside the viewport. Only transform and opacity animate. */
@media (max-width: 700px) {
  .security-sanctuary {
    min-height: 0;
    padding: 64px 0 72px;
  }

  .security-sanctuary__container {
    width: 100%;
    max-width: 100%;
  }

  .security-sanctuary__header {
    width: min(100% - 40px, 560px);
    margin: 0 auto 36px;
  }

  .security-sanctuary__title {
    font-size: clamp(32px, 10vw, 44px);
  }

  .security-sanctuary__subtitle {
    max-width: 34ch;
    margin-inline: auto;
    font-size: 14px;
  }

  .security-sanctuary__grid[data-security-carousel].security-carousel--v2,
  .security-sanctuary__grid[data-security-carousel].security-carousel--v2.is-mobile-v2 {
    position: relative;
    width: 100%;
    height: 300px;
    margin: 0;
    overflow: hidden !important;
    perspective: 900px;
    perspective-origin: 50% 45%;
  }

  .security-carousel--v2.is-mobile-v2 .security-carousel__track {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    transform: none !important;
    transition: none !important;
  }

  .security-sanctuary__grid[data-security-carousel].security-carousel--v2.is-mobile-v2 .security-carousel__track > .security-card {
    position: absolute !important;
    top: 14px !important;
    left: 50% !important;
    right: auto !important;
    width: min(calc(100vw - 72px), 360px) !important;
    min-width: min(calc(100vw - 72px), 360px) !important;
    max-width: 360px !important;
    min-height: 238px;
    margin: 0 !important;
    padding: 22px;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(-50%, 0, -120px) scale(.82) !important;
    transform-origin: 50% 50%;
    transition: opacity 260ms ease, transform 360ms cubic-bezier(.22, .76, .26, 1), visibility 0s linear 360ms !important;
    pointer-events: none !important;
  }

  .security-sanctuary__grid[data-security-carousel].security-carousel--v2.is-mobile-v2 .security-carousel__track > .security-card.is-v2-main {
    z-index: 5;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(-50%, 0, 0) rotateY(0) scale(1) !important;
    transition-delay: 0ms !important;
    pointer-events: auto !important;
  }

  .security-sanctuary__grid[data-security-carousel].security-carousel--v2.is-mobile-v2 .security-carousel__track > .security-card.is-v2-left {
    z-index: 2;
    opacity: .22 !important;
    visibility: visible !important;
    transform: translate3d(-132%, 8px, -90px) rotateY(58deg) scale(.82) !important;
    transition-delay: 0ms !important;
  }

  .security-sanctuary__grid[data-security-carousel].security-carousel--v2.is-mobile-v2 .security-carousel__track > .security-card.is-v2-right {
    z-index: 2;
    opacity: .22 !important;
    visibility: visible !important;
    transform: translate3d(32%, 8px, -90px) rotateY(-58deg) scale(.82) !important;
    transition-delay: 0ms !important;
  }

  .security-sanctuary__grid[data-security-carousel].security-carousel--v2.is-mobile-v2 .security-card__text {
    font-size: 12px;
    line-height: 1.55;
  }

  /* Compact mobile enquiry: copy and form remain in normal flow, with no
     duplicated intro block crossing the surface boundary. */
  .lead-popup.signature-lead {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 14px;
  }

  .lead-popup.signature-lead[open] {
    display: block !important;
  }

  .lead-popup.signature-lead .lead-popup__copy {
    display: block;
    min-height: 0;
    padding: 24px 72px 22px 22px;
    overflow: hidden;
  }

  .lead-popup.signature-lead .lead-popup__crest,
  .lead-popup.signature-lead .lead-popup__copy > p:not(.eyebrow),
  .lead-popup.signature-lead .lead-popup__trust,
  .lead-popup.signature-lead .lead-form__intro {
    display: none !important;
  }

  .lead-popup.signature-lead .lead-popup__copy .eyebrow {
    margin: 0 0 7px;
  }

  .lead-popup.signature-lead .lead-popup__copy h2 {
    max-width: none;
    margin: 0 !important;
    font-size: clamp(27px, 8vw, 34px) !important;
    line-height: 1.04;
  }

  .lead-popup.signature-lead .lead-form--popup {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0;
    padding: 22px;
    background: #f4efe7;
  }

  .lead-popup.signature-lead .lead-form--popup .span-2 {
    grid-column: auto;
  }

  .lead-popup.signature-lead .lead-popup__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 380px) {
  .security-sanctuary__grid[data-security-carousel].security-carousel--v2,
  .security-sanctuary__grid[data-security-carousel].security-carousel--v2.is-mobile-v2 {
    height: 286px;
  }

  .security-sanctuary__grid[data-security-carousel].security-carousel--v2.is-mobile-v2 .security-carousel__track > .security-card {
    width: calc(100vw - 56px) !important;
    min-width: calc(100vw - 56px) !important;
    padding: 19px;
  }
}