/* =====================================================================
   MANSORY Residences by AMAAL — landing page
   Palette: carbon black · graphite · charcoal · warm off-white · metal
   No build step. Edit this file directly.

   Contents
     01  Fonts
     02  Tokens
     03  Reset
     04  Typography
     05  Layout helpers
     06  Scroll reveal
     07  Buttons
     08  Header + mobile menu
     09  Hero
     10  Statement
     11  Numbers
     12  Residence selector
     13  Gallery + lightbox
     14  Design philosophy
     15  Performance chain
     16  Amenity explorer
     17  Infinity Collection
     18  Payment plan
     19  Location
     20  Why
     21  Contact
     22  Footer
     23  Enquiry modal
     24  Mobile sticky CTA
     25  Legal pages
   ===================================================================== */

/* ---------------------------------------------------------------
   01  FONTS
   --------------------------------------------------------------- */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/barlow-condensed-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-condensed-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-condensed-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/barlow-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------
   02  TOKENS
   --------------------------------------------------------------- */
:root {
  /* colour */
  --c-black: #060606;
  --c-carbon: #0d0d0d;
  --c-graphite: #151515;
  --c-charcoal: #1e1e1e;
  --c-steel: #2b2b2b;
  --c-metal: #8d8c88;
  --c-metal-soft: #5f5e5a;
  --c-ink: #f1ede6;
  --c-ink-70: rgba(241, 237, 230, 0.7);
  --c-ink-50: rgba(241, 237, 230, 0.5);
  --c-ink-30: rgba(241, 237, 230, 0.3);
  --c-line: rgba(241, 237, 230, 0.12);
  --c-line-soft: rgba(241, 237, 230, 0.07);
  --c-accent: #b9a68b; /* champagne bronze — used sparingly */
  --c-accent-dim: rgba(185, 166, 139, 0.55);
  --c-error: #d19b96;

  /* type */
  --f-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --f-serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --f-sans: 'Barlow', 'Helvetica Neue', Arial, sans-serif;

  --fs-eyebrow: clamp(0.66rem, 0.6rem + 0.2vw, 0.78rem);
  --fs-body: clamp(0.98rem, 0.93rem + 0.2vw, 1.08rem);
  --fs-lead: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
  --fs-h3: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  --fs-h2: clamp(2.4rem, 1.6rem + 3.4vw, 5rem);
  --fs-h1: clamp(3.2rem, 2rem + 5.6vw, 7.5rem);
  --fs-giant: clamp(3rem, 1.7rem + 5.2vw, 7rem);
  --fs-stat: clamp(4.5rem, 2.6rem + 8vw, 10rem);

  /* layout */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --section: clamp(3.5rem, 6.5vw, 7.5rem);
  --max: 1680px;
  --header-h: 92px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cine: cubic-bezier(0.7, 0, 0.2, 1);
  --dur: 0.9s;
}

/* ---------------------------------------------------------------
   03  RESET
   --------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--c-black);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* `clip`, not `hidden`: hidden makes body a scroll container, which silently
   breaks `position: sticky` on descendants (the amenity image). */
html,
body {
  overflow-x: clip;
}
/* Author `display` rules beat the browser's [hidden] rule, so anything toggled
   with the hidden attribute needs this to actually disappear. */
[hidden] {
  display: none !important;
}
img,
video,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
/* <picture> must not generate a box, or `height: 100%` on the <img> inside
   resolves against an auto-height inline wrapper. */
picture {
  display: contents;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
dl,
dd {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
::selection {
  background: var(--c-accent);
  color: var(--c-black);
}
:focus-visible {
  outline: 1.5px solid var(--c-accent);
  outline-offset: 4px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 0.8rem 1.2rem;
  background: var(--c-ink);
  color: var(--c-black);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: translateY(-120%);
  transition: transform 0.3s;
}
.skip:focus {
  transform: none;
}

/* ---------------------------------------------------------------
   04  TYPOGRAPHY
   --------------------------------------------------------------- */
.eyebrow {
  font-family: var(--f-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-metal);
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
}
.eyebrow::before {
  content: '';
  width: 2.2em;
  height: 1px;
  background: var(--c-accent-dim);
}
.eyebrow--bare::before {
  display: none;
}

.display {
  font-family: var(--f-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.92;
}
.display--light {
  font-weight: 300;
}
.display em,
.serif-em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-ink);
}
.h1 {
  font-size: var(--fs-h1);
}
.h2 {
  font-size: var(--fs-h2);
}
.h3 {
  font-size: var(--fs-h3);
}
.giant {
  font-size: var(--fs-giant);
}

.lead {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.45;
  color: var(--c-ink-70);
  max-width: 36ch;
}
.serif-lead {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 2rem);
  line-height: 1.35;
  color: var(--c-ink);
}
.body {
  color: var(--c-ink-70);
  max-width: 52ch;
}
.muted {
  color: var(--c-ink-50);
}
.small {
  font-size: 0.85rem;
}
.index {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--c-accent);
}

/* ---------------------------------------------------------------
   05  LAYOUT HELPERS
   --------------------------------------------------------------- */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}
.section {
  padding-block: var(--section);
  position: relative;
}
.section--tight {
  padding-block: calc(var(--section) * 0.6);
}
.section--flush {
  padding-block: 0;
}
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-frame {
  position: relative;
  overflow: hidden;
  background: var(--c-graphite);
}
.img-frame img {
  transition: transform 1.6s var(--ease-out);
}
@media (hover: hover) {
  .img-frame--hover:hover img {
    transform: scale(1.035);
  }
}
/* carbon weave, extremely subtle */
.texture::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.018) 0 2px,
      transparent 2px 6px
    ),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.014) 0 2px, transparent 2px 6px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 70%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 70%);
}

/* section heading block */
.sh {
  display: grid;
  gap: clamp(1.2rem, 2vw, 2rem);
}
.sh--center {
  text-align: center;
  justify-items: center;
}
.sh--center .eyebrow::before {
  display: none;
}
.sh .lead {
  margin-top: 0.4rem;
}

/* ---------------------------------------------------------------
   06  SCROLL REVEAL
   --------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal='fade'] {
  transform: none;
}
[data-reveal='left'] {
  transform: translateX(-32px);
}
[data-reveal='right'] {
  transform: translateX(32px);
}
[data-reveal='scale'] {
  transform: scale(1.04);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* Sideways reveals would push past the viewport on narrow screens. */
@media (max-width: 900px) {
  [data-reveal='left'],
  [data-reveal='right'] {
    transform: translateY(28px);
  }
}
/* Image wipe. The clip lives on the <img>, never on the observed element:
   Chrome folds an element's own clip-path into its intersection rectangle, so a
   fully clipped target reports isIntersecting = false and never reveals. */
[data-reveal='wipe'] {
  opacity: 1;
  transform: none;
}
[data-reveal='wipe'] img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.3s var(--ease-cine);
}
[data-reveal='wipe'].is-in img {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
  [data-reveal='wipe'] img {
    clip-path: none;
  }
}

/* ---------------------------------------------------------------
   07  BUTTONS
   --------------------------------------------------------------- */
.cta {
  --pad-y: 1.05rem;
  --pad-x: 1.9rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: var(--pad-y) var(--pad-x);
  font-family: var(--f-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  isolation: isolate;
  transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out),
    background-color 0.4s var(--ease-out);
}
.cta--lg {
  --pad-y: 1.25rem;
  --pad-x: 2.4rem;
  font-size: 0.76rem;
}
.cta__icon {
  display: inline-flex;
  transition: transform 0.5s var(--ease-out);
}
.cta--primary {
  color: var(--c-black);
  background: var(--c-ink);
}
.cta--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease-cine);
}
.cta--ghost {
  color: var(--c-ink);
  border: 1px solid var(--c-ink-30);
  background: transparent;
}
.cta--link {
  padding: 0.4rem 0;
  color: var(--c-ink);
  gap: 0.8rem;
}
.cta--link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--c-accent-dim);
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 0.5s var(--ease-cine);
}
@media (hover: hover) {
  .cta--primary:hover::before {
    transform: scaleX(1);
  }
  .cta--ghost:hover {
    border-color: var(--c-ink);
    background: rgba(241, 237, 230, 0.06);
  }
  .cta--link:hover::after {
    transform: scaleX(1);
  }
  .cta:hover .cta__icon {
    transform: translateX(4px);
  }
}

/* ---------------------------------------------------------------
   08  HEADER + MOBILE MENU
   --------------------------------------------------------------- */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background-color 0.6s var(--ease-out), border-color 0.6s;
}
.hdr.is-scrolled {
  background: rgba(6, 6, 6, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--c-line-soft);
}
.hdr__in {
  height: 100%;
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
}
/* The navbar carries the Simple Choices mark alone — this is their page. The
   project lockup appears in the footer and on the enquiry page instead. */
.hdr__logo {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.hdr__logo-sc {
  /* two lines deep: below ~34px the "Luxury Collection" line stops reading */
  height: clamp(34px, 3.2vw, 50px);
  width: auto;
  flex: none;
}
.hdr__nav ul {
  display: flex;
  justify-content: center;
  gap: clamp(1.2rem, 2.2vw, 2.6rem);
}
.hdr__nav a {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--c-ink-70);
  position: relative;
  padding: 0.4rem 0;
  transition: color 0.3s;
}
.hdr__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-cine);
}
.hdr__nav a:hover,
.hdr__nav a.is-active {
  color: var(--c-ink);
}
.hdr__nav a:hover::after,
.hdr__nav a.is-active::after {
  transform: scaleX(1);
}
.hdr__burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
}
.hdr__burger-line {
  width: 26px;
  height: 1px;
  background: var(--c-ink);
  transition: transform 0.4s var(--ease-cine), opacity 0.3s;
}
.hdr__burger[aria-expanded='true'] .hdr__burger-line:first-of-type {
  transform: translateY(4px) rotate(45deg);
}
.hdr__burger[aria-expanded='true'] .hdr__burger-line:last-of-type {
  transform: translateY(-4px) rotate(-45deg);
}
@media (max-width: 1080px) {
  .hdr__nav {
    display: none;
  }
  .hdr__cta {
    justify-self: end;
  }
}
@media (max-width: 720px) {
  .hdr__cta {
    display: none;
  }
  .hdr__burger {
    display: flex;
    justify-self: end;
  }
  .hdr__logo-sc {
    height: 30px;
  }
}

.mm {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--c-black);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.mm.is-open {
  opacity: 1;
}
.mm nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}
.mm__list li {
  border-bottom: 1px solid var(--c-line-soft);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: calc(60ms * var(--i));
}
.mm.is-open .mm__list li {
  opacity: 1;
  transform: none;
}
.mm__list a {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1rem 0;
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1;
}
.mm__foot {
  display: grid;
  gap: 1.5rem;
  padding-top: 2rem;
}
.mm__foot .cta {
  justify-content: center;
}

/* ---------------------------------------------------------------
   09  HERO
   --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--c-black);
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  animation: heroZoom 14s var(--ease-out) forwards;
}
@keyframes heroZoom {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}
.hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
  pointer-events: none;
}
/* only fades in once the file can actually play, so the still never blinks */
.hero__video.is-playing {
  opacity: 1;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      to top,
      rgba(6, 6, 6, 0.94) 0%,
      rgba(6, 6, 6, 0.45) 42%,
      rgba(6, 6, 6, 0.18) 70%,
      rgba(6, 6, 6, 0.55) 100%
    ),
    linear-gradient(to right, rgba(6, 6, 6, 0.6) 0%, transparent 55%);
}
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
}
.hero__in {
  padding-block: clamp(6rem, 14vh, 10rem) clamp(6.5rem, 16vh, 10rem);
  display: grid;
  justify-items: start;
  gap: clamp(1.1rem, 2vw, 1.8rem);
}
.hero__kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-ink-70);
  opacity: 0;
  animation: fadeUp 1s var(--ease-out) 0.25s forwards;
}
.hero__rule {
  width: clamp(2rem, 6vw, 5rem);
  height: 1px;
  background: var(--c-accent);
  transform-origin: left;
  animation: ruleIn 1.2s var(--ease-cine) 0.15s backwards;
}
@keyframes ruleIn {
  from {
    transform: scaleX(0);
  }
}
.hero__title {
  max-width: 18ch;
  font-size: var(--fs-h1);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 0.2em;
}
.hero__sub {
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3.4rem);
  font-weight: 300;
  line-height: 1;
  color: var(--c-ink);
  max-width: 20ch;
}
.hero__sub em {
  color: var(--c-accent);
}
.hero__line {
  display: block;
  overflow: hidden;
  /* room for serif descenders, which the mask would otherwise clip */
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.hero__line > span {
  display: block;
  transform: translateY(110%);
  animation: lineUp 1.1s var(--ease-cine) forwards;
}
.hero__title .hero__line:nth-of-type(1) > span {
  animation-delay: 0.35s;
}
.hero__title .hero__line:nth-of-type(2) > span {
  animation-delay: 0.45s;
}
.hero__sub .hero__line:nth-of-type(1) > span {
  animation-delay: 0.62s;
}
.hero__sub .hero__line:nth-of-type(2) > span {
  animation-delay: 0.72s;
}
@keyframes lineUp {
  to {
    transform: translateY(0);
  }
}
.hero__lead {
  max-width: 44ch;
  color: var(--c-ink-70);
  font-size: clamp(0.98rem, 0.93rem + 0.3vw, 1.15rem);
  opacity: 0;
  animation: fadeUp 1s var(--ease-out) 0.95s forwards;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  opacity: 0;
  animation: fadeUp 1s var(--ease-out) 1.1s forwards;
}
/* a quiet line of attribution: whose page this is, before anything is asked */
.hero__presenter {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1rem, 2.5vw, 1.8rem);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink-50);
  opacity: 0;
  animation: fadeUp 1s var(--ease-out) 1.35s forwards;
}
.hero__presenter img {
  height: clamp(30px, 3vw, 40px);
  width: auto;
  flex: none;
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: 0;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  padding-bottom: clamp(1.5rem, 4vh, 3rem);
  opacity: 0;
  animation: fadeUp 1s var(--ease-out) 1.4s forwards;
}
.hero__scroll-label {
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-ink-50);
  writing-mode: vertical-rl;
}
.hero__scroll-line {
  width: 1px;
  height: clamp(40px, 7vh, 72px);
  background: linear-gradient(to bottom, var(--c-accent), transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-ink);
  animation: scrollPulse 2.4s var(--ease-cine) infinite;
}
@keyframes scrollPulse {
  0% {
    transform: translateY(-100%);
  }
  60%,
  100% {
    transform: translateY(100%);
  }
}
@media (max-width: 900px) {
  .hero__video {
    display: none;
  }
  .hero__img {
    object-position: center 45%;
  }
  .hero__scrim {
    background: linear-gradient(
      to top,
      rgba(6, 6, 6, 0.96) 0%,
      rgba(6, 6, 6, 0.86) 30%,
      rgba(6, 6, 6, 0.55) 62%,
      rgba(6, 6, 6, 0.35) 85%,
      rgba(6, 6, 6, 0.6) 100%
    );
  }
  .hero__scroll {
    display: none;
  }
  .hero__in {
    padding-bottom: clamp(5rem, 12vh, 7rem);
  }
  .hero__cta {
    flex-direction: column;
    align-items: stretch;
  }
  .hero__cta .cta {
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__img,
  .hero__line > span,
  .hero__kicker,
  .hero__lead,
  .hero__cta,
  .hero__scroll,
  .hero__scroll-line::after {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------
   09b  THE FILM
   A vertical cut set beside the copy, framed the way the renders are:
   a hairline, an accent rule, and a caption under the frame.
   --------------------------------------------------------------- */
.film {
  background: var(--c-carbon);
  border-block: 1px solid var(--c-line-soft);
}
/* one centred column: the line, the film, the call to action */
.film__in {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(1.8rem, 3.5vw, 2.8rem);
}
.film__lead {
  max-width: 56ch;
}

/* the frame — deliberately narrower than the measure, so it reads as a film
   set on the page rather than a full-bleed band */
.film__stage {
  width: min(100%, 820px);
}
.film__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--c-line);
  background: var(--c-graphite);
}
.film__poster,
.film__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.film__frame.is-playing .film__poster,
.film__frame.is-playing .film__play {
  display: none;
}
/* the play control sits over the still, centred */
.film__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: linear-gradient(to top, rgba(6, 6, 6, 0.5), rgba(6, 6, 6, 0.15));
  color: var(--c-ink);
  transition: background-color 0.4s;
}
.film__play-icon {
  display: grid;
  place-items: center;
  width: clamp(58px, 6vw, 78px);
  aspect-ratio: 1;
  border: 1px solid var(--c-ink-30);
  border-radius: 50%;
  background: rgba(6, 6, 6, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding-left: 4px;
  transition: border-color 0.4s var(--ease-out), background-color 0.4s, transform 0.5s var(--ease-out);
}
.film__play-label {
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
}
@media (hover: hover) {
  .film__play:hover .film__play-icon {
    border-color: var(--c-accent);
    background: rgba(6, 6, 6, 0.6);
    transform: scale(1.06);
  }
}

/* the call to action, centred under the film */
.film__cta {
  display: grid;
  justify-items: center;
  gap: 0.8rem;
}
.film__cta .cta {
  --pad-y: 1.45rem;
  font-size: 0.82rem;
}

/* ---------------------------------------------------------------
   10  STATEMENT
   --------------------------------------------------------------- */
.statement__head {
  margin-bottom: clamp(3rem, 6vw, 6rem);
}
.statement__title {
  margin-top: 1.8rem;
  font-weight: 400;
  max-width: 22ch;
}
.statement__title em {
  white-space: nowrap;
}
.statement__grid {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}
.statement__media {
  aspect-ratio: 4 / 5;
}
.statement__copy {
  display: grid;
  gap: 1.4rem;
  max-width: 56ch;
}
/* The section's opening line carries the whole proposition, and the two
   paragraphs under it are the only long-form reading on the page. Both are set
   a step above their shared class, which serves quotes and amenity taglines. */
.statement__copy .serif-lead {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.4rem);
  line-height: 1.3;
}
.statement__copy .body {
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
}
.statement__cta {
  margin-top: 0.8rem;
  justify-self: start;
}

/* ---------------------------------------------------------------
   11  NUMBERS
   A specification sheet set beside the tower elevation. Each figure is
   one row: value, label, note — read like a datasheet, not a card grid.
   --------------------------------------------------------------- */
.numbers {
  border-top: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
  background: var(--c-carbon);
  overflow: hidden;
}
.num__grid {
  display: grid;
  grid-template-columns: 1fr 0.68fr;
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: center;
}
.num__sheet {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-content: center;
}
.num__head {
  display: grid;
  gap: 1.4rem;
}
.num__title {
  font-weight: 400;
}

/* the rows */
.num__list {
  border-top: 1px solid var(--c-line);
}
.num__row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1.4rem, 2.6vw, 2.4rem);
  padding: clamp(0.9rem, 1.6vw, 1.35rem) 0;
  border-bottom: 1px solid var(--c-line);
}
/* a hairline that draws itself in on hover, like a selected spec line */
.num__row::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-cine);
}
@media (hover: hover) {
  .num__row:hover::after {
    transform: scaleX(1);
  }
  .num__row:hover .num__label {
    color: var(--c-ink);
  }
}
.num__val {
  font-size: clamp(2.8rem, 1.8rem + 4.4vw, 5.4rem);
  font-weight: 300;
  line-height: 0.82;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(168deg, var(--c-ink) 22%, var(--c-metal-soft) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* a fixed three-digit box, so every label starts on the same line */
  display: block;
  width: 3.2ch;
  text-align: right;
}
.num__meta {
  display: grid;
  gap: 0.5rem;
}
.num__label {
  font-size: clamp(0.74rem, 0.68rem + 0.2vw, 0.86rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-ink-70);
  transition: color 0.4s var(--ease-out);
}
.num__note {
  font-size: clamp(0.88rem, 0.83rem + 0.22vw, 1.02rem);
  line-height: 1.45;
  color: var(--c-ink-50);
  max-width: 34ch;
}

/* the footnote figures */
.num__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem clamp(2rem, 4vw, 4rem);
}
.num__facts dt {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-metal);
  margin-bottom: 0.45rem;
}
.num__facts dd {
  font-family: var(--f-display);
  font-size: 1.95rem;
  font-weight: 400;
  line-height: 1;
  color: var(--c-ink-70);
}

/* the elevation */
.num__media {
  position: relative;
  aspect-ratio: 4 / 5;
}
.num__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.num__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.4rem 1.3rem;
  background: linear-gradient(to top, rgba(6, 6, 6, 0.82), transparent);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-ink-70);
}
.num__caption-line {
  flex: 0 0 auto;
  width: 22px;
  height: 1px;
  background: var(--c-accent);
}
/* ---------------------------------------------------------------
   12  RESIDENCE SELECTOR
   --------------------------------------------------------------- */
.collection__head {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
/* the heading runs the full width here, so the lead reads as two long lines
   rather than the narrow 36ch column the shared class sets */
.collection__head .lead {
  max-width: 74ch;
}
.rs {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.rs__rail {
  display: flex;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rs__rail::-webkit-scrollbar {
  display: none;
}
.rs__tab {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.4rem clamp(1rem, 2vw, 2rem) 1.4rem 0;
  text-align: left;
  color: var(--c-ink-50);
  transition: color 0.4s var(--ease-out);
  white-space: nowrap;
}
.rs__tab::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-cine);
}
.rs__tab:hover {
  color: var(--c-ink-70);
}
.rs__tab.is-active {
  color: var(--c-ink);
}
.rs__tab.is-active::after {
  transform: scaleX(1);
}
.rs__tab-index {
  font-family: var(--f-display);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  color: var(--c-accent);
}
.rs__tab-name {
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.6rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}
.rs__panel {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 4vw, 5rem);
  /* the render starts and ends level with the spec column beside it */
  align-items: stretch;
}
.rs__panel.is-entering .rs__media,
.rs__panel.is-entering .rs__body > * {
  animation: rsIn 0.7s var(--ease-out) backwards;
}
.rs__panel.is-entering .rs__body > *:nth-child(1) {
  animation-delay: 60ms;
}
.rs__panel.is-entering .rs__body > *:nth-child(2) {
  animation-delay: 110ms;
}
.rs__panel.is-entering .rs__body > *:nth-child(3) {
  animation-delay: 160ms;
}
.rs__panel.is-entering .rs__body > *:nth-child(4) {
  animation-delay: 210ms;
}
.rs__panel.is-entering .rs__body > *:nth-child(5) {
  animation-delay: 250ms;
}
.rs__panel.is-entering .rs__body > *:nth-child(6) {
  animation-delay: 290ms;
}
@keyframes rsIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.rs__media {
  /* stretched by the panel on desktop; the ratio is the floor when it stacks */
  min-height: 0;
  aspect-ratio: auto;
}
.rs__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, center);
}
.rs__body {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}
.rs__name {
  font-weight: 400;
  /* a step under the section headings: this sits beside the spec list, not over it */
  font-size: clamp(1.9rem, 1.4rem + 2.1vw, 3.4rem);
}
.rs__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem 2rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
}
.rs__specs dt {
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-metal);
  margin-bottom: 0.4rem;
}
.rs__specs dd {
  color: var(--c-ink-70);
  font-size: 1.05rem;
}
.rs__num {
  font-family: var(--f-display);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--c-ink);
  letter-spacing: 0.01em;
  margin-right: 0.15em;
}
.rs__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.rs__highlights li {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--c-line);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-70);
}
.rs__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  margin-top: 0.5rem;
}
/* ---------------------------------------------------------------
   13  GALLERY + LIGHTBOX
   One near-full-bleed frame at a time. Slides are stacked absolutely and
   crossfade, so mixed source aspect ratios never affect the layout.
   --------------------------------------------------------------- */
.gal-sec {
  padding-top: var(--section);
  padding-bottom: clamp(3rem, 6vw, 6rem);
}
.gal__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem clamp(2rem, 5vw, 6rem);
  flex-wrap: wrap;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.gal__controls {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: 0.4rem;
}
.gal__counter {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.gal__counter-now {
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
  line-height: 1;
  color: var(--c-ink);
}
.gal__counter-sep {
  width: 26px;
  height: 1px;
  background: var(--c-accent-dim);
  transform: translateY(-0.35em);
}
.gal__counter-total {
  font-size: 0.95rem;
  color: var(--c-metal);
}
.gal__nav {
  display: flex;
  gap: 0.5rem;
}
.gal__arrow {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line);
  color: var(--c-ink-70);
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}
.gal__arrow:hover {
  color: var(--c-black);
  background: var(--c-ink);
  border-color: var(--c-ink);
}

/* category rail */
.gal__catbar {
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.gal__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.4rem, 3vw, 3rem);
  padding: 0.2rem 0;
}
.gal__cat {
  position: relative;
  padding: 1rem 0;
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-ink-50);
  transition: color 0.35s;
}
.gal__cat::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-cine);
}
.gal__cat:hover {
  color: var(--c-ink-70);
}
.gal__cat.is-active {
  color: var(--c-ink);
}
.gal__cat.is-active::after {
  transform: scaleX(1);
}

/* the stage */
.gal__stage {
  position: relative;
  width: 100%;
  height: min(84svh, 940px);
  min-height: 460px;
  overflow: hidden;
  background: var(--c-graphite);
  isolation: isolate;
  cursor: grab;
  touch-action: pan-y;
}
.gal__stage.is-dragging {
  cursor: grabbing;
}
.gal__stage:focus-visible {
  outline: 1.5px solid var(--c-accent);
  outline-offset: -3px;
}
.gal__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1s var(--ease-out), transform 1.6s var(--ease-out);
  will-change: opacity, transform;
}
.gal__slide.is-active {
  opacity: 1;
  transform: none;
  z-index: 1;
}
.gal__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gal__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
      to top,
      rgba(6, 6, 6, 0.92) 0%,
      rgba(6, 6, 6, 0.5) 28%,
      rgba(6, 6, 6, 0) 58%
    ),
    linear-gradient(to right, rgba(6, 6, 6, 0.72) 0%, rgba(6, 6, 6, 0.18) 40%, transparent 66%),
    radial-gradient(120% 90% at 0% 100%, rgba(6, 6, 6, 0.62) 0%, transparent 60%);
}

/* caption */
.gal__cap {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  bottom: clamp(2.4rem, 5vw, 4rem);
  max-width: min(42ch, 46vw);
  display: grid;
  gap: 0.55rem;
  justify-items: start;
}
.gal__cap-meta {
  letter-spacing: 0.26em;
}
.gal__cap-title {
  font-size: clamp(1.7rem, 1.1rem + 2.2vw, 3.4rem);
  font-weight: 400;
  line-height: 0.98;
}
.gal__cap-text {
  color: var(--c-ink-70);
  font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1.05rem);
  max-width: 38ch;
}
/* the caption re-animates on every frame change */
.gal__cap.is-swapping > * {
  animation: capIn 0.75s var(--ease-out) backwards;
}
.gal__cap.is-swapping > *:nth-child(1) { animation-delay: 40ms; }
.gal__cap.is-swapping > *:nth-child(2) { animation-delay: 90ms; }
.gal__cap.is-swapping > *:nth-child(3) { animation-delay: 140ms; }
.gal__cap.is-swapping > *:nth-child(4) { animation-delay: 190ms; }
@keyframes capIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.gal__expand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.7rem;
  padding: 0.85rem 1.4rem;
  border: 1px solid var(--c-ink-30);
  background: rgba(6, 6, 6, 0.32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-ink);
  transition: border-color 0.35s, background-color 0.35s;
}
.gal__expand:hover {
  border-color: var(--c-ink);
  background: rgba(6, 6, 6, 0.55);
}
.gal__expand-icon {
  display: inline-flex;
  color: var(--c-accent);
}

/* filmstrip */
.gal__film {
  position: absolute;
  z-index: 3;
  right: var(--gutter);
  bottom: clamp(2.4rem, 5vw, 4rem);
  display: flex;
  gap: 0.5rem;
  max-width: min(46vw, 620px);
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.gal__film::-webkit-scrollbar {
  display: none;
}
.gal__thumb {
  position: relative;
  flex: 0 0 auto;
  width: clamp(58px, 6vw, 88px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  opacity: 0.45;
  filter: grayscale(0.5);
  transition: opacity 0.4s var(--ease-out), filter 0.4s var(--ease-out);
}
.gal__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  transition: border-color 0.4s;
}
.gal__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gal__thumb:hover {
  opacity: 0.85;
  filter: none;
}
.gal__thumb.is-active {
  opacity: 1;
  filter: none;
}
.gal__thumb.is-active::after {
  border-color: var(--c-accent);
}

/* progress hairline along the bottom edge of the stage */
.gal__bar {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(241, 237, 230, 0.14);
}
.gal__bar span {
  display: block;
  height: 100%;
  width: 8.333%;
  background: var(--c-accent);
  transform-origin: left;
  transition: transform 0.6s var(--ease-cine), width 0.3s;
}

/* lightbox */
.lb {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: clamp(1rem, 4vw, 3rem);
  border: 0;
  background: var(--c-black);
  color: var(--c-ink);
  display: none;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
}
.lb[open] {
  display: grid;
}
.lb::backdrop {
  background: rgba(4, 4, 4, 0.94);
}
.lb__fig {
  display: grid;
  gap: 1.2rem;
  justify-items: center;
  min-width: 0;
}
.lb__fig img {
  max-width: 100%;
  max-height: 74dvh;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}
.lb.is-loaded .lb__fig img {
  opacity: 1;
}
.lb__cap {
  display: grid;
  gap: 0.3rem;
  text-align: center;
  max-width: 60ch;
}
.lb__close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--c-ink-70);
  transition: color 0.3s, transform 0.5s var(--ease-out);
}
.lb__close:hover {
  color: var(--c-ink);
  transform: rotate(90deg);
}
.lb__arrow {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  color: var(--c-ink-50);
  border: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
.lb__arrow:hover {
  color: var(--c-ink);
  border-color: var(--c-line);
}
/* ---------------------------------------------------------------
   14  DESIGN PHILOSOPHY
   --------------------------------------------------------------- */
/* the gallery runs flush into this section and the DNA band carries its own
   full-bleed image, so both edges need less air than a default section */
.design {
  padding-block: calc(var(--section) * 0.7);
}
.design__intro {
  display: grid;
  /* the title column takes only the width its own lines need, so the quote
     sits beside it rather than away at a fixed column boundary */
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 5rem);
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.design__title {
  grid-column: 1;
  margin-top: 1.6rem;
  font-weight: 400;
}
.design__quote {
  position: relative;
  padding-left: 1.6rem;
  border-left: 1px solid var(--c-accent-dim);
  /* wide enough for the line to stay unbroken where the column allows it */
  max-width: 56ch;
}
.design__attr {
  display: block;
  margin-top: 1rem;
  font-family: var(--f-sans);
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-metal);
}
.design__body {
  display: grid;
  grid-template-columns: 0.85fr 1fr 0.95fr;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  /* all three columns start and end on the same line: the figures take their
     height from the notes column rather than from a fixed aspect ratio */
  align-items: stretch;
}
.design__fig--tall,
.design__fig--wide {
  aspect-ratio: auto;
  margin-top: 0;
}
.design__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.design__notes {
  display: grid;
  gap: clamp(1.8rem, 3vw, 2.8rem);
  align-content: center;
}
.design__notes .body {
  font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.18rem);
  max-width: none;
}
.design__note-title {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.7rem;
}
.materials {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 2.2rem;
  border-top: 1px solid var(--c-line-soft);
}
.materials__label {
  margin-bottom: 1.4rem;
}
.materials__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.materials__list li {
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--c-line);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-ink-70);
  transition: border-color 0.4s, color 0.4s;
}
.materials__list li:hover {
  border-color: var(--c-accent-dim);
  color: var(--c-ink);
}

/* ---------------------------------------------------------------
   15  PERFORMANCE CHAIN
   --------------------------------------------------------------- */
.dna {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.dna__bg {
  position: absolute;
  inset: -10% 0;
  z-index: -2;
}
.dna__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
}
.dna::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--c-black), rgba(6, 6, 6, 0.72) 40%, var(--c-black));
}
.dna__head {
  /* generous, so the italic descenders clear the chain's top rule */
  margin-bottom: clamp(4rem, 8vw, 7rem);
}
.dna__chain {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--c-line);
}
.dna__link {
  position: relative;
  padding: 2rem clamp(0.8rem, 1.4vw, 1.6rem) 0 0;
  border-right: 1px solid var(--c-line-soft);
}
.dna__link:last-child {
  border-right: 0;
}
.dna__link::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 24px;
  height: 3px;
  background: var(--c-accent);
}
.dna__index {
  display: block;
  margin-bottom: 0.8rem;
}
.dna__title {
  font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.6rem);
  font-weight: 400;
  margin-bottom: 0.8rem;
}
.dna__body {
  line-height: 1.55;
}
.dna__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(3rem, 6vw, 5rem);
}

/* ---------------------------------------------------------------
   16  AMENITY EXPLORER
   --------------------------------------------------------------- */
.amenities__head {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* the title runs on one line here, so the lead gets a wider measure than the
   narrow 36ch column the shared class sets */
.amenities__head .lead {
  max-width: 62ch;
}
.ax {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.ax__list {
  border-top: 1px solid var(--c-line);
}
.ax__row {
  border-bottom: 1px solid var(--c-line);
}
.ax__trigger {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: baseline;
  gap: 1.2rem;
  padding: clamp(1.1rem, 2vw, 1.7rem) 0;
  text-align: left;
  color: var(--c-ink-50);
  transition: color 0.4s var(--ease-out);
}
.ax__trigger:hover {
  color: var(--c-ink-70);
}
.is-active .ax__trigger {
  color: var(--c-ink);
}
.ax__index {
  align-self: center;
}
.ax__name {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.9rem);
  font-weight: 400;
  line-height: 1;
}
.ax__level {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.64rem;
  align-self: center;
}
.ax__mark {
  position: relative;
  width: 14px;
  height: 14px;
  align-self: center;
}
.ax__mark::before,
.ax__mark::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 0.5s var(--ease-cine);
}
.ax__mark::before {
  left: 0;
  top: 6.5px;
  width: 14px;
  height: 1px;
}
.ax__mark::after {
  left: 6.5px;
  top: 0;
  width: 1px;
  height: 14px;
}
.is-active .ax__mark::after {
  transform: scaleY(0);
}
.ax__panel {
  overflow: hidden;
}
.ax__panel-in {
  display: grid;
  gap: 1.4rem;
  padding-bottom: 1.8rem;
  animation: axIn 0.6s var(--ease-out);
}
@keyframes axIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.ax__tagline {
  max-width: 40ch;
  color: var(--c-ink-70);
}
.ax__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 0.55rem 2rem;
}
.ax__items li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: var(--c-ink-70);
}
.ax__items li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 1px;
  background: var(--c-accent);
}
.ax__stage {
  position: sticky;
  top: calc(var(--header-h) + 3vh);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-graphite);
}
.ax__media {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.9s var(--ease-out), transform 1.4s var(--ease-out);
}
.ax__media.is-active {
  opacity: 1;
  transform: none;
}
.ax__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, center);
}

.services {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 2.5rem;
  border-top: 1px solid var(--c-line-soft);
}
.services__label {
  margin-bottom: 2rem;
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
}
.services__title {
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--c-line-soft);
}
.services__group li {
  font-size: 0.98rem;
  color: var(--c-ink-70);
  padding: 0.3rem 0;
}
.amenities__cta {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* ---------------------------------------------------------------
   17  INFINITY COLLECTION
   --------------------------------------------------------------- */
.infinity {
  background: var(--c-carbon);
}
.infinity__hero {
  position: relative;
  min-height: min(92svh, 900px);
  display: grid;
  /* one explicit row filling the frame — otherwise the free space is split
     across implicit tracks and align-items lands the copy mid-frame */
  grid-template-rows: minmax(0, 1fr);
  align-items: end;
}
/* <picture> is an in-flow grid item even though its <img> is absolute, so
   without this it claims a row of its own and align-items has nothing to
   align against. Both share one cell; the copy then sits where we ask. */
.infinity__hero > picture,
.infinity__hero > .infinity__hero-in {
  grid-area: 1 / 1;
}
.infinity__hero {
  overflow: hidden;
  isolation: isolate;
}
.infinity__hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.infinity__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      to top,
      var(--c-carbon) 1%,
      rgba(6, 6, 6, 0.82) 30%,
      rgba(6, 6, 6, 0.42) 62%,
      rgba(6, 6, 6, 0.3) 100%
    ),
    linear-gradient(to right, rgba(6, 6, 6, 0.78) 0%, rgba(6, 6, 6, 0.25) 45%, transparent 70%);
}
.infinity__hero-in {
  padding-block: clamp(4rem, 10vh, 8rem);
  display: grid;
  gap: 1.4rem;
}
.infinity__title {
  font-weight: 400;
}
.infinity__lead {
  max-width: 44ch;
}
.infinity__body {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: clamp(0.75rem, 1.5vw, 1.4rem);
  padding-block: clamp(3rem, 7vw, 6rem);
  /* the copy starts level with the top of the renders beside it */
  align-items: start;
}
.infinity__specs {
  display: grid;
  gap: 2.1rem;
  align-content: start;
}
.infinity__specs .body {
  font-size: clamp(1.02rem, 0.94rem + 0.36vw, 1.28rem);
  line-height: 1.58;
  max-width: 48ch;
}
.infinity__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.05rem 2rem;
}
.infinity__features li {
  position: relative;
  padding-left: 1.5rem;
  font-size: clamp(1.02rem, 0.92rem + 0.42vw, 1.32rem);
  line-height: 1.3;
  color: var(--c-ink);
}
.infinity__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 11px;
  height: 1px;
  background: var(--c-accent);
}
.infinity__mosaic {
  display: grid;
  /* equal columns: the two renders are the same size, not staggered */
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.4rem);
}
.infinity__m1,
.infinity__m2 {
  aspect-ratio: 3 / 4;
}
.infinity__mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ---------------------------------------------------------------
   18  PAYMENT PLAN
   --------------------------------------------------------------- */
.payment {
  padding-bottom: 0;
}

/* head: claim left, residence right */
.pay__head {
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.pay__intro {
  display: grid;
  gap: 1.5rem;
  align-content: center;
}
.pay__title {
  font-weight: 400;
  max-width: 14ch;
}
/* landscape, matching the render's own shape — a tall crop of a wide
   source is what made the earlier pick look soft */
.pay__media {
  aspect-ratio: 4 / 3;
}
.pay__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the 40/60 split, drawn to scale */
.split {
  margin-top: 0.6rem;
  display: grid;
  gap: 1.4rem;
}
.split__bar {
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: 4px;
  height: 6px;
}
.split__seg {
  display: block;
  height: 100%;
  transform-origin: left;
  animation: splitIn 1.1s var(--ease-cine) backwards;
}
.split__seg--a {
  background: var(--c-ink);
}
.split__seg--b {
  background: var(--c-accent);
  animation-delay: 0.12s;
}
@keyframes splitIn {
  from {
    transform: scaleX(0);
  }
}
.split__keys {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem clamp(1.8rem, 4vw, 3.5rem);
}
.split__keys dt {
  font-family: var(--f-display);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3.2rem);
  font-weight: 300;
  line-height: 1;
  color: var(--c-ink);
}
.split__keys div:nth-child(2) dt {
  color: var(--c-accent);
}
.split__keys dd {
  margin-top: 0.45rem;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-metal);
}

/* plan switcher */
.pt {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}
.pt__switch {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--c-line);
}
.pt__opt {
  position: relative;
  display: grid;
  gap: 0.35rem;
  padding: 1.4rem 1.2rem;
  text-align: left;
  color: var(--c-ink-50);
  border-right: 1px solid var(--c-line);
  transition: color 0.4s var(--ease-out), background-color 0.5s var(--ease-out);
}
.pt__opt:last-child {
  border-right: 0;
}
.pt__opt:hover {
  color: var(--c-ink-70);
}
.pt__opt.is-active {
  color: var(--c-ink);
  background: var(--c-graphite);
}
.pt__opt.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: var(--c-accent);
}
.pt__opt-dp {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
  font-weight: 400;
  line-height: 1;
}
.pt__opt-name {
  font-size: 0.72rem;
  /* 500 is the heaviest Barlow face self-hosted here; 600+ would be faux-bolded */
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.pt__opt-aud {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-metal);
}
.pt__panel {
  display: grid;
  gap: 2rem;
}
.pt__summary {
  max-width: 46ch;
}
.pt__line {
  display: flex;
  overflow-x: auto;
  padding-bottom: 1rem;
  scrollbar-width: none;
}
.pt__line::-webkit-scrollbar {
  display: none;
}
.pt__step {
  flex: 1 0 auto;
  min-width: 150px;
  position: relative;
  display: grid;
  gap: 0.4rem;
  padding: 2.4rem 1.2rem 0 0;
  animation: ptIn 0.65s var(--ease-out) backwards;
  animation-delay: calc(50ms * var(--i));
}
@keyframes ptIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.pt__step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 100%;
  height: 1px;
  background: var(--c-line);
}
.pt__step:last-child::before {
  background: linear-gradient(to right, var(--c-line) 0 12px, transparent 12px);
}
.pt__dot {
  position: absolute;
  left: 0;
  top: 5px;
  width: 11px;
  height: 11px;
  border: 1px solid var(--c-metal);
  background: var(--c-black);
  transform: rotate(45deg);
}
.pt__step--handover .pt__dot {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.pt__pct {
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3.2rem);
  font-weight: 400;
  line-height: 1;
  color: var(--c-ink);
}
.pt__step--handover .pt__pct {
  color: var(--c-accent);
}
.pt__ord {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-70);
}
.pt__when {
  letter-spacing: 0.1em;
}

/* small print, folded away */
.notes {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
}
.notes__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.3rem 0;
  cursor: pointer;
  list-style: none;
}
.notes__toggle::-webkit-details-marker {
  display: none;
}
.notes__label {
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-metal);
  transition: color 0.3s;
}
.notes:hover .notes__label {
  color: var(--c-ink-70);
}
.notes__mark {
  position: relative;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}
.notes__mark::before,
.notes__mark::after {
  content: '';
  position: absolute;
  background: var(--c-accent);
  transition: transform 0.45s var(--ease-cine);
}
.notes__mark::before {
  left: 0;
  top: 6px;
  width: 13px;
  height: 1px;
}
.notes__mark::after {
  left: 6px;
  top: 0;
  width: 1px;
  height: 13px;
}
.notes[open] .notes__mark::after {
  transform: scaleY(0);
}
.notes__body {
  padding-bottom: 1.6rem;
  display: grid;
  gap: 1rem;
  animation: notesIn 0.5s var(--ease-out);
}
@keyframes notesIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.notes__body ul {
  display: grid;
  /* six notes, three to a row */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem 2.5rem;
}
.notes__body li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--c-ink-70);
}
.notes__body .small {
  font-size: 0.95rem;
}
.notes__body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 1px;
  background: var(--c-accent);
}

/* The Perfect 5, on its own image */
.p5 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(4rem, 8vw, 7rem);
  padding-block: clamp(4rem, 9vw, 8rem);
}
.p5__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.p5__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
}
.p5::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--c-black) 0%, rgba(6, 6, 6, 0.78) 24%, rgba(6, 6, 6, 0.82) 76%, var(--c-black) 100%);
}
.p5__in {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}
.p5__head {
  display: grid;
  gap: 1.1rem;
  max-width: 46ch;
}
.p5__title {
  font-weight: 400;
}
.p5__title em {
  color: var(--c-accent);
}
/* Five privileges read as a numbered ledger — one full-width row each, the way
   the Numbers section sets its specs. Five rows are always even; any grid of
   five leaves an orphan. */
.p5__list {
  display: grid;
  border-top: 1px solid var(--c-line);
}
.p5__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: baseline;
  column-gap: clamp(1.2rem, 3vw, 3.2rem);
  padding: clamp(1.1rem, 2vw, 1.7rem) 0;
  border-bottom: 1px solid var(--c-line);
}
.p5__num {
  min-width: 2.4ch;
  font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--c-accent);
  letter-spacing: 0.02em;
}
.p5__name {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.6rem);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.12;
  color: var(--c-ink);
}
.p5__note {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--c-ink-50);
}
.p5__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
}
.p5__terms {
  font-size: 0.72rem;
  line-height: 1.6;
  max-width: 74ch;
}
/* ---------------------------------------------------------------
   19  LOCATION
   --------------------------------------------------------------- */
/* the location section runs into the next one, so it needs less air below */
.loc {
  padding-bottom: calc(var(--section) * 0.6);
}
.loc__head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 4vw, 5rem);
  /* the intro starts on the same line as the eyebrow beside it */
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.loc__title {
  margin-top: 1.5rem;
  max-width: 14ch;
}
.loc__intro {
  display: grid;
  gap: 1.1rem;
}
.loc__intro .body {
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
}
.loc__addr {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.7rem;
}
.loc__map {
  position: relative;
  /* an explicit width is what keeps this full-bleed: with only aspect-ratio and
     max-height, a short wide window caps the height and the ratio shrinks the
     WIDTH to match, pinning the band left with dead space beside it. With the
     width fixed, max-height crops the image instead (object-fit: cover). */
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 76vh;
}
.loc__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.loc__pin {
  position: absolute;
  left: clamp(1.5rem, 8vw, 10rem);
  bottom: clamp(1.5rem, 6vw, 5rem);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.3rem;
  background: rgba(6, 6, 6, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--c-line);
  font-size: 0.78rem;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.loc__pin-dot {
  width: 8px;
  height: 8px;
  background: var(--c-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(185, 166, 139, 0.6);
  animation: pin 2.6s var(--ease-out) infinite;
}
@keyframes pin {
  to {
    box-shadow: 0 0 0 16px rgba(185, 166, 139, 0);
  }
}
.loc__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  margin-top: clamp(3rem, 6vw, 5.5rem);
  align-items: start;
}
.loc__list {
  margin-top: 1.8rem;
  border-top: 1px solid var(--c-line-soft);
}
.loc__list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.loc__place {
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem);
  color: var(--c-ink);
}
.loc__dots {
  height: 1px;
  background: repeating-linear-gradient(to right, var(--c-line) 0 2px, transparent 2px 7px);
  align-self: center;
}
.loc__time {
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.7rem);
  font-weight: 400;
  color: var(--c-accent);
  white-space: nowrap;
}
.loc__disclaimer {
  margin-top: 1rem;
  font-size: 0.85rem;
}
.loc__views {
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border: 1px solid var(--c-line);
  background: var(--c-carbon);
  display: grid;
  gap: 1.4rem;
}
.loc__viewlist {
  display: grid;
  gap: 0.7rem;
}
.loc__viewlist li {
  position: relative;
  padding-left: 1.3rem;
  color: var(--c-ink-70);
}
.loc__viewlist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 7px;
  height: 1px;
  background: var(--c-accent);
}
.loc__actions {
  display: grid;
  gap: 1.2rem;
  justify-items: start;
  margin-top: 0.6rem;
}

/* ---------------------------------------------------------------
   20  WHY
   --------------------------------------------------------------- */
.why__head {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--c-line);
}
.why__item {
  display: grid;
  gap: 0.9rem;
  align-content: start;
  padding: 2rem clamp(1rem, 2vw, 2.2rem) 0 0;
  border-right: 1px solid var(--c-line-soft);
}
.why__item:last-child {
  border-right: 0;
}
.why__title {
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.8rem);
  font-weight: 400;
}

/* ---------------------------------------------------------------
   21  CONTACT
   --------------------------------------------------------------- */
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
}
/* the why grid sits directly above a full-bleed image band: less air between */
.why {
  padding-bottom: calc(var(--section) * 0.5);
}
.contact__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.contact__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}
.contact::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse at 50% 60%,
    rgba(6, 6, 6, 0.7) 0%,
    rgba(6, 6, 6, 0.94) 70%
  );
}
.contact__in {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  padding-block: clamp(2rem, 5vw, 5rem);
}
.contact__in .eyebrow::before {
  display: none;
}
.contact__title {
  font-weight: 400;
}
.contact__lead {
  max-width: 52ch;
  text-align: center;
}
.contact__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

/* ---------------------------------------------------------------
   22  FOOTER
   --------------------------------------------------------------- */
.ft {
  padding: clamp(4rem, 8vw, 7rem) 0 calc(2.5rem + 72px);
  border-top: 1px solid var(--c-line-soft);
  background: var(--c-black);
}
@media (min-width: 721px) {
  .ft {
    padding-bottom: 2.5rem;
  }
}
/* A stack of full-width bands separated by hairlines, not four columns of
   unequal height. Every row fills the measure, so nothing leaves a void. */
/* The agency leads the footer: its mark, its name, its line. The project
   lockup sits beside it, labelled as what this page markets. */
.ft__lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 3.5vw, 2.8rem);
}
/* the wordmark carries the name, so the tagline sits under it, not beside */
.ft__brand {
  display: grid;
  justify-items: start;
  gap: 0.85rem;
  align-content: start;
}
.ft__mark {
  height: clamp(52px, 5.5vw, 80px);
  width: auto;
  max-width: 100%;
}
.ft__tag {
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.ft__project {
  display: grid;
  gap: 0.7rem;
  justify-items: end;
  text-align: right;
}
.ft__project img {
  width: clamp(180px, 22vw, 280px);
  height: auto;
}
/* the two brands sit side by side only while both can breathe */
@media (max-width: 860px) {
  .ft__lead {
    grid-template-columns: 1fr;
    gap: clamp(1.6rem, 5vw, 2.2rem);
  }
  .ft__project {
    justify-items: start;
    text-align: left;
  }
}

.ft__label {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-metal);
}

/* bands */
.ft__band {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.2rem, 2.2vw, 1.8rem) 0;
  border-top: 1px solid var(--c-line-soft);
}
.ft__meta {
  grid-template-columns: 1fr auto;
  align-items: start;
}
.ft__cell {
  display: grid;
  gap: 0.5rem;
}
.ft__meta .ft__cell:last-child {
  justify-items: end;
  text-align: right;
}
/* the whole site on one wrapping line */
.ft__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem clamp(1.2rem, 2.5vw, 2.2rem);
}
.ft__text {
  color: var(--c-ink-70);
  font-size: 1rem;
  line-height: 1.6;
}
/* the registration line the brokerage is required to show: licence and ORN */
.ft__reg {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-metal);
}
.ft__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem clamp(1.2rem, 2.5vw, 2rem);
}
.ft__nav a,
.ft__social a,
.ft__legal a {
  /* 40px of touch on every footer link, at any width */
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 1rem;
  color: var(--c-ink-70);
  transition: color 0.3s;
}
.ft__social a,
.ft__legal a {
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-50);
}
/* the follow row carries the platform glyph, so the label is never ambiguous */
.ft__social a {
  gap: 0.55rem;
}
.ft__social svg {
  width: 15px;
  height: 15px;
  flex: none;
  opacity: 0.8;
  transition: opacity 0.3s;
}
.ft__social a:hover svg,
.ft__social a:focus-visible svg {
  opacity: 1;
}
.ft__nav a:hover,
.ft__social a:hover,
.ft__legal a:hover {
  color: var(--c-accent);
}

/* fine print */
.ft__fine {
  padding-top: clamp(1.2rem, 2.2vw, 1.8rem);
  border-top: 1px solid var(--c-line-soft);
  display: grid;
  gap: 1rem;
}
.ft__fine-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem 2rem;
}
.ft__fine-row > p {
  font-size: 0.85rem;
}
.ft__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem clamp(1.2rem, 2.5vw, 2rem);
}
.ft__disclaimer {
  font-size: 0.8rem;
  line-height: 1.6;
  max-width: 110ch;
}

/* ---------------------------------------------------------------
   23  ENQUIRY PAGE (questions.html)
   A stepped flow: contact details, residence type, timeline, budget.
   One step on screen at a time, with a back arrow and nothing that
   reveals how many questions remain.
   --------------------------------------------------------------- */
.questions-page {
  min-height: 100dvh;
}
.enq {
  min-height: 100dvh;
  background: var(--c-carbon);
  background-image: radial-gradient(120% 70% at 50% 0%, rgba(185, 166, 139, 0.08), transparent 62%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.enq.is-visible {
  opacity: 1;
}
.enq__shell {
  position: relative;
  min-height: 100dvh;
}
.enq__close {
  position: absolute;
  top: clamp(1rem, 2vw, 1.8rem);
  right: clamp(1rem, 2vw, 1.8rem);
  z-index: 3;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--c-ink-70);
  border: 1px solid var(--c-line);
  transition: color 0.3s, border-color 0.3s, transform 0.5s var(--ease-out);
}
.enq__close:hover {
  color: var(--c-ink);
  border-color: var(--c-ink-30);
  transform: rotate(90deg);
}
.enq__inner {
  width: min(100% - 2 * var(--gutter), 720px);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 8vw, 6rem);
  display: grid;
  justify-items: center;
}
.enq__logo-link {
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.enq__mark {
  height: clamp(46px, 5.5vw, 64px);
  width: auto;
  max-width: 100%;
}
.enq__logo {
  width: clamp(230px, 26vw, 330px);
  height: auto;
}


/* back only — no counter, no segmented bar */
.enq__bar {
  width: 100%;
  min-height: 34px;
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
.enq__back {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  color: var(--c-ink-50);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: color 0.3s;
}
.enq__back svg {
  transition: transform 0.4s var(--ease-out);
}
.enq__back:hover {
  color: var(--c-ink);
}
.enq__back:hover svg {
  transform: translateX(-4px);
}

/* form */
.enq__form {
  width: 100%;
}
.enq__step {
  display: grid;
  justify-items: center;
  gap: clamp(1.6rem, 3vw, 2.4rem);
  animation: enqIn 0.55s var(--ease-out);
}
@keyframes enqIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.enq__head {
  text-align: center;
  display: grid;
  gap: 0.8rem;
}
.enq__title {
  font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.9rem);
  font-weight: 400;
  line-height: 1.02;
  text-transform: none;
  letter-spacing: 0.01em;
  max-width: 26ch;
  margin-inline: auto;
}
.enq__sub {
  color: var(--c-ink-70);
  font-size: 0.98rem;
}
.enq__foot {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-30);
  text-align: center;
}
.enq__error {
  color: var(--c-error);
  font-size: 0.88rem;
  text-align: center;
}

/* contact fields */
.enq__fields {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 1.4rem;
}
.fld {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}
.fld--wide {
  grid-column: 1 / -1;
}
.fld label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--c-ink-70);
  font-weight: 400;
}
.req {
  color: var(--c-accent);
}
.fld input {
  width: 100%;
  background: rgba(241, 237, 230, 0.04);
  border: 1px solid var(--c-line);
  border-radius: 0;
  padding: 1rem 1.1rem;
  font-size: 1rem;
  font-weight: 300;
  color: var(--c-ink);
  transition: border-color 0.3s, background-color 0.3s;
  -webkit-appearance: none;
  appearance: none;
}
.fld input::placeholder {
  color: var(--c-ink-30);
}
.fld input:hover {
  border-color: var(--c-ink-30);
}
.fld input:focus {
  outline: none;
  border-color: var(--c-accent);
  background: rgba(241, 237, 230, 0.06);
}
.fld input.is-invalid {
  border-color: var(--c-error);
}
.phone {
  display: grid;
  grid-template-columns: minmax(132px, 0.32fr) 1fr;
  gap: 0.7rem;
}

/* searchable dialling-code picker */
.dial {
  position: relative;
  min-width: 0;
}
.dial__button {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1rem;
  background: rgba(241, 237, 230, 0.04);
  border: 1px solid var(--c-line);
  color: var(--c-ink);
  font-size: 1rem;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.3s, background-color 0.3s;
}
.dial__button:hover {
  border-color: var(--c-ink-30);
}
.dial__button[aria-expanded='true'] {
  border-color: var(--c-accent);
  background: rgba(241, 237, 230, 0.06);
}
.dial__button img {
  flex: 0 0 auto;
  width: 24px;
  height: 18px;
  object-fit: cover;
}
.dial__button > span:not(.dial__chev) {
  flex: 1;
  text-align: left;
}
.dial__chev {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--c-metal);
  border-bottom: 1px solid var(--c-metal);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.35s var(--ease-out);
}
.dial__button[aria-expanded='true'] .dial__chev {
  transform: translateY(1px) rotate(225deg);
}
.dial__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  /* 320px wide where there is room, never wider than the gutter box —
     on a 320px phone the panel would otherwise hang off the right edge */
  width: min(max(100%, 320px), calc(100vw - 2 * var(--gutter)));
  background: var(--c-charcoal);
  border: 1px solid var(--c-line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  animation: dialIn 0.25s var(--ease-out);
}
@keyframes dialIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dial__search {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-metal);
}
.dial__search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--c-ink);
}
.dial__search input::placeholder {
  color: var(--c-ink-30);
}
.dial__search input:focus {
  outline: none;
}
.dial__list {
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--c-steel) transparent;
}
.dial__list::-webkit-scrollbar {
  width: 8px;
}
.dial__list::-webkit-scrollbar-thumb {
  background: var(--c-steel);
}
.dial__opt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  cursor: pointer;
  transition: background-color 0.18s;
}
.dial__opt img {
  flex: 0 0 auto;
  width: 24px;
  height: 18px;
  object-fit: cover;
}
.dial__opt-name {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  color: var(--c-ink-70);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dial__opt-code {
  font-size: 0.86rem;
  color: var(--c-metal);
  font-variant-numeric: tabular-nums;
}
.dial__opt:hover {
  background: rgba(241, 237, 230, 0.06);
}
.dial__opt.is-active {
  background: rgba(185, 166, 139, 0.14);
}
.dial__opt.is-active .dial__opt-name {
  color: var(--c-ink);
}
.dial__opt.is-active .dial__opt-code {
  color: var(--c-accent);
}
.dial__empty {
  padding: 1.2rem 1rem;
  text-align: center;
  font-size: 0.86rem;
  color: var(--c-ink-30);
}

/* primary action */
.enq__submit {
  position: relative;
  width: 100%;
  padding: 1.25rem 2rem;
  background: var(--c-ink);
  color: var(--c-black);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  isolation: isolate;
  transition: opacity 0.3s;
}
.enq__submit::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-cine);
}
.enq__submit:hover::before {
  transform: scaleX(1);
}
.enq__submit[disabled] {
  opacity: 0.6;
  cursor: wait;
}
/* honeypot fields: off-screen rather than display:none, which bots know to skip */
.enq__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* residence tiles */
.tiles {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1rem);
}
.tile {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-graphite);
  border: 1px solid var(--c-line);
  transition: border-color 0.4s var(--ease-out);
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.62) saturate(0.85);
  transform: scale(1.01);
  transition: transform 1.2s var(--ease-out), filter 0.5s var(--ease-out);
}
.tile__label {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem 0.7rem 1.3rem;
  font-family: var(--f-display);
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.2rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.1;
  text-align: center;
  color: var(--c-ink);
  background: linear-gradient(to top, rgba(6, 6, 6, 0.82), transparent);
}
.tile__label svg {
  flex: 0 0 auto;
  color: var(--c-accent);
  transition: transform 0.4s var(--ease-out);
}
.tile:hover {
  border-color: var(--c-ink-30);
}
.tile:hover img {
  filter: brightness(0.78) saturate(1);
  transform: scale(1.06);
}
.tile:hover .tile__label svg {
  transform: translateX(3px);
}
.tile[aria-checked='true'] {
  border-color: var(--c-accent);
}
.tile[aria-checked='true'] img {
  filter: brightness(0.85) saturate(1);
}

/* timeline and budget options */
.opts {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.6rem, 1.2vw, 0.9rem);
}
.opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--c-line);
  background: rgba(241, 237, 230, 0.03);
  text-align: left;
  color: var(--c-ink);
  font-size: 0.95rem;
  font-weight: 400;
  transition: border-color 0.35s, background-color 0.35s;
}
.opt em {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--c-metal);
  font-size: 0.92em;
}
/* the tick only appears once the option is chosen */
.opt__tick {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line);
  color: var(--c-black);
  transition: background-color 0.3s, border-color 0.3s;
}
.opt__tick svg {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-out);
}
.opt:hover {
  border-color: var(--c-ink-30);
  background: rgba(241, 237, 230, 0.07);
}
.opt:hover .opt__tick {
  border-color: var(--c-ink-30);
}
.opt[aria-checked='true'] {
  border-color: var(--c-accent);
  background: rgba(185, 166, 139, 0.12);
}
.opt[aria-checked='true'] .opt__tick {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.opt[aria-checked='true'] .opt__tick svg {
  opacity: 1;
  transform: none;
}

/* success */
.enq__success {
  display: grid;
  gap: 1.4rem;
  justify-items: center;
  text-align: center;
  padding-block: clamp(2rem, 6vw, 4rem);
  animation: enqIn 0.6s var(--ease-out);
}
.enq__success .lead {
  max-width: 44ch;
}
.enq__done {
  margin-top: 1rem;
  padding: 1.1rem 2rem;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  border: 1px solid var(--c-ink-30);
  transition: border-color 0.3s;
}
.enq__done:hover {
  border-color: var(--c-ink);
}
/* ---------------------------------------------------------------
   24  MOBILE STICKY CTA
   --------------------------------------------------------------- */
.msc {
  display: none;
}

/* ---------------------------------------------------------------
   25  LEGAL PAGES
   --------------------------------------------------------------- */
.legal {
  padding-top: calc(var(--header-h) + var(--section));
}
.legal__title {
  margin-top: 1.5rem;
  font-weight: 400;
}
.legal__meta {
  margin-top: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.7rem;
}
.legal__body {
  max-width: 68ch;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  display: grid;
  gap: 1.2rem;
}
.legal__flag {
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--c-accent-dim);
  color: var(--c-ink-70);
  font-size: 0.9rem;
}
.legal__flag strong {
  color: var(--c-accent);
  font-weight: 500;
}
.legal__body h2 {
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 400;
  text-transform: uppercase;
  margin-top: 1.4rem;
}
.legal__body p {
  color: var(--c-ink-70);
}
.legal__body a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal__back {
  display: inline-flex;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: 1.05rem 1.9rem;
  border: 1px solid var(--c-ink-30);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.legal__back:hover {
  border-color: var(--c-ink);
}
.legal__body h3 {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin-top: 0.8rem;
}
.legal__body ul {
  display: grid;
  gap: 0.55rem;
  padding-left: 1.15rem;
  list-style: disc;
  color: var(--c-ink-70);
}
.legal__body li::marker {
  color: var(--c-accent-dim);
}
/* the identity block that opens every legal page: who is publishing it */
/* the wordmark is too wide to sit in a column beside the address: stack it */
.legal__who {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.2rem);
  justify-items: start;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--c-line);
  background: var(--c-carbon);
}
.legal__who img {
  height: clamp(40px, 4.5vw, 54px);
  width: auto;
  max-width: 100%;
}
.legal__who p {
  margin: 0;
}
.legal__who strong {
  display: block;
  font-family: var(--f-display);
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--c-ink);
  margin-bottom: 0.35rem;
}
@media (max-width: 640px) {
  .legal__who img {
    height: 38px;
  }
}

/* the legal pages carry a short footer: mark, copyright, the other policies */
.ft__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}
.ft__bottom-brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.ft__bottom-brand img {
  height: 30px;
  width: auto;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1100px) {
  .dna__chain {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 2.5rem;
  }
  .dna__link:nth-child(3n) {
    border-right: 0;
  }
  .why__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2.5rem;
  }
  .why__item:nth-child(2n) {
    border-right: 0;
  }
  .num__grid {
    grid-template-columns: 1fr 0.72fr;
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

@media (max-width: 1000px) {
  .ax {
    grid-template-columns: 1fr;
  }
  .ax__stage {
    position: relative;
    top: 0;
    order: -1;
    aspect-ratio: 3 / 2;
  }
}

@media (max-width: 900px) {
  .statement__grid,
  .design__intro,
  .design__body,
  .infinity__body,
  .pay__head,
  .loc__head,
  .loc__grid,
  .rs__panel {
    grid-template-columns: 1fr;
  }
  /* stacked: the figures have no column to take their height from, so the
     ratios come back */
  .statement__media,
  .design__fig--tall,
  .design__fig--wide {
    aspect-ratio: 3 / 2;
  }
  .rs__media {
    aspect-ratio: 16 / 10;
  }
  .design__quote {
    margin-top: 1.5rem;
  }
  .pay__media {
    aspect-ratio: 16 / 9;
    order: -1;
  }
  .pay__title {
    max-width: none;
  }
  .num__grid {
    grid-template-columns: 1fr;
  }
  .num__media {
    order: -1;
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
  .num__media img {
    object-position: center 22%;
  }
  .num__caption {
    letter-spacing: 0.16em;
    padding: 1.1rem 1rem;
  }
  .rs__media {
    aspect-ratio: 3 / 2;
  }
  .rs__tab {
    padding-right: 1.6rem;
  }
  .loc__map {
    aspect-ratio: 4 / 3;
  }
  .loc__list li {
    grid-template-columns: 1fr auto;
  }
  .loc__dots {
    display: none;
  }
  /* gallery: caption stacks under a shorter stage, filmstrip runs full width */
  .gal__stage {
    height: min(62svh, 620px);
    min-height: 380px;
  }
  .gal__cap {
    max-width: none;
    right: var(--gutter);
    bottom: clamp(4.6rem, 12vw, 6rem);
  }
  .gal__cap-text {
    display: none;
  }
  .gal__film {
    left: var(--gutter);
    right: var(--gutter);
    bottom: 1rem;
    max-width: none;
    justify-content: flex-start;
  }
  .gal__controls {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 860px) {
  .pt__switch {
    grid-template-columns: 1fr 1fr;
  }
  .pt__opt:nth-child(2) {
    border-right: 0;
  }
  .pt__opt:nth-child(-n + 2) {
    border-bottom: 1px solid var(--c-line);
  }
  .pt__step {
    min-width: 140px;
  }
  /* the call to action runs full width on a phone */
  .film__cta {
    justify-items: stretch;
    width: 100%;
  }
  .film__play-label {
    letter-spacing: 0.2em;
  }
  /* enquiry flow: single column, tiles two-up, options stacked */
  .enq__fields {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .tiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .opts {
    grid-template-columns: 1fr;
  }
  .enq__title {
    max-width: 24ch;
  }
}

@media (max-width: 720px) {
  .dna__chain {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
  .dna__link {
    border-right: 0;
    border-bottom: 1px solid var(--c-line-soft);
    padding-bottom: 1.6rem;
  }
  .dna__link:last-child {
    border-bottom: 0;
  }
  .why__grid,
  .infinity__features {
    grid-template-columns: 1fr;
  }
  /* ---- phone type & touch pass ----
     The tracked micro-labels bottom out around 10px on a phone, which is below
     comfortable reading size for uppercase set at 0.3em. Lift the shared token
     and the hand-set ones with it, and give the small links a real tap area. */
  :root {
    --fs-eyebrow: 0.75rem;
  }
  /* at the larger size this caption takes two lines, which rise out of the
     scrim onto the bright tower — deepen the scrim and tighten the tracking */
  .num__caption {
    padding: 2.6rem 1.1rem 1.1rem;
    letter-spacing: 0.16em;
    line-height: 1.35;
    color: var(--c-ink);
    background: linear-gradient(
      to top,
      rgba(6, 6, 6, 0.94) 0%,
      rgba(6, 6, 6, 0.85) 50%,
      rgba(6, 6, 6, 0.35) 80%,
      transparent 100%
    );
  }
  .num__caption,
  .ax__level,
  .gal__expand span,
  .design__attr,
  .pt__opt-aud,
  .num__facts dt,
  .rs__specs dt,
  .num__label,
  .hero__scroll-label {
    font-size: 0.8rem;
  }
  /* the legal and social rows are 14px tall links — give them a tap area */
  .ft__legal a,
  .ft__social a {
    padding-block: 0.6rem;
    font-size: 0.8rem;
  }
  .split__keys dd,
  .pt__ord,
  .rs__highlights li,
  .pt__opt-name {
    font-size: 0.8rem;
  }
  .loc__addr,
  .p5__terms,
  .ft__disclaimer,
  .ft__label {
    font-size: 0.8rem;
  }
  .cta,
  .msc__btn {
    font-size: 0.78rem;
  }
  /* 44px of touch on every small link */
  .cta--link {
    padding-block: 0.75rem;
  }
  .ft__nav a,
  .ft__social a,
  .ft__legal a {
    min-height: 44px;
  }
  .hdr__logo {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  /* the seven filters wrap 3/2/2 at phone widths; a swipe rail keeps them on
     one line, the same way the residence tabs above behave */
  .gal__cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 0 1.6rem;
  }
  .gal__cats::-webkit-scrollbar {
    display: none;
  }
  .gal__cat {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  /* the infinity hero is tall on a phone: centre the copy in the frame */
  .infinity__hero {
    align-items: center;
  }
  /* the ledger drops its third column: the note sits under the title */
  .p5__list li {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 0.45rem;
  }
  .p5__note {
    grid-column: 2;
  }
  .num__row {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  /* stacked, the value sits above its label with nothing to align its right
     edge to, so the fixed three-digit box just indents the shorter numbers */
  .num__val {
    justify-self: start;
    width: auto;
    text-align: left;
  }
  .why__item {
    border-right: 0;
    border-bottom: 1px solid var(--c-line-soft);
    padding-bottom: 1.6rem;
  }
  .why__item:last-child {
    border-bottom: 0;
  }
  .infinity__mosaic {
    grid-template-columns: 1fr 1fr;
  }
  .enq__logo {
    width: 200px;
  }
  .enq__mark {
    height: 40px;
  }
  .tile {
    aspect-ratio: 4 / 3;
  }
  /* The dial column sizes to its own content instead of a fixed 104px, so the
     flag, the code and the chevron always fit — a fixed track clipped the
     chevron against the right border. The number field takes what is left. */
  /* three columns are too narrow to read at this width */
  .notes__body ul {
    grid-template-columns: 1fr 1fr;
  }
  .phone {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem;
  }
  .dial__button {
    padding: 1rem 0.75rem;
    gap: 0.5rem;
  }
  .dial__button > span:not(.dial__chev) {
    flex: 0 0 auto;
  }
  /* 16px or iOS zooms the page when the search field takes focus */
  .dial__search input {
    font-size: 1rem;
  }

  /* A tracked uppercase label on one line is wider than a phone's gutter box;
     the longest CTAs were being clipped by their section. Let them wrap. */
  .cta {
    --pad-x: 1.35rem;
    gap: 0.7rem;
    letter-spacing: 0.2em;
    line-height: 1.35;
    white-space: normal;
    text-align: center;
  }
  .cta--lg {
    --pad-x: 1.5rem;
    font-size: 0.78rem;
  }
  .cta--link {
    text-align: left;
  }
  .hero__cta {
    flex-direction: column;
    justify-self: stretch;
  }
  .statement__cta {
    justify-self: stretch;
  }
  .hero__cta .cta,
  .statement__cta .cta,
  .dna__cta .cta,
  .infinity__cta .cta,
  .contact__cta .cta,
  .amenities__cta .cta,
  .p5__cta .cta--primary,
  .rs__actions .cta--primary {
    width: 100%;
    justify-content: center;
  }
  .lb {
    grid-template-columns: 1fr;
  }
  .lb__arrow--prev {
    position: absolute;
    left: 0.2rem;
    top: 50%;
    transform: translateY(-50%);
  }
  .lb__arrow--next {
    position: absolute;
    right: 0.2rem;
    top: 50%;
    transform: translateY(-50%);
  }

  /* sticky enquiry bar */
  .msc {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(6, 6, 6, 0.96), rgba(6, 6, 6, 0.86));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--c-line-soft);
    transform: translateY(110%);
    transition: transform 0.5s var(--ease-out);
  }
  .msc.is-visible {
    transform: none;
  }
  .msc__btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 1rem;
    background: var(--c-ink);
    color: var(--c-black);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
  }
}

@media (max-width: 560px) {
  /* the tracked phrase no longer fits on one line at this width */
  .statement__title em {
    white-space: normal;
  }
  .notes__body ul {
    grid-template-columns: 1fr;
  }
  /* chips as an even two-up grid instead of a ragged wrap; the odd last one
     takes the full width so no row is left half-empty */
  .materials__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .materials__list li {
    display: flex;
    align-items: center;
    justify-content: center;
    /* a common height so a two-line label does not make its row taller */
    min-height: 3.5rem;
    padding: 0.6rem 0.7rem;
    letter-spacing: 0.12em;
    line-height: 1.25;
    text-align: center;
  }
  .materials__list li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* keep the centred lockup clear of the 48px close button */
  .enq__logo {
    width: min(200px, calc(100vw - 150px));
  }
  .enq__mark {
    height: 36px;
  }
  /* the bands stack: label over content, everything left-aligned */
  .ft__band,
  .ft__meta {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .ft__meta .ft__cell:last-child {
    justify-items: start;
    text-align: left;
  }
  .ft__mark {
    height: 46px;
  }
}