/* ==========================================================================
   ESTATE-CORE — public design system
   Every colour / font / radius / shadow comes from a CSS variable that the
   admin Appearance module writes (see App\Core\Theme). NO literal colours here.
   ========================================================================== */

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--c-border); margin: 0; }
:target { scroll-margin-top: 96px; }

/* focus — never removed, gold ring */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ------------------------------------------------------------------ type */
.display, h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-heading);
  color: var(--c-heading);
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.display { font-size: var(--fs-hero); line-height: 1.05; }
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.3; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--label-spacing);
  text-transform: var(--label-transform);
  color: var(--c-accent-text);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--c-accent); opacity: .85;
}
.eyebrow--plain::before { display: none; }
.lede { font-size: 1.08em; color: var(--c-text-soft); max-width: 62ch; }
.small { font-size: var(--fs-small); }
.muted { color: var(--c-text-soft); }
.num { font-variant-numeric: tabular-nums; }
.serif { font-family: var(--font-display); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* ------------------------------------------------------------------ layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(18px, 5vw, 40px); }
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 780px; }

.section { padding-block: clamp(52px, 8vw, 104px); position: relative; }
.section--tight { padding-block: clamp(34px, 5vw, 60px); }
.section--alt { background: var(--c-bg-alt); }
.section--dark { background: var(--c-dark-bg); color: var(--c-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--c-on-dark); }
.section--dark .muted, .section--dark .lede { color: var(--c-on-dark-soft); }
.section--dark .eyebrow { color: var(--c-accent-light); }

.section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: clamp(26px, 4vw, 48px); }
.section__head > div { max-width: 68ch; }
.section__title { margin-top: 12px; }
.section__sub { margin-top: 12px; color: var(--c-text-soft); max-width: 62ch; }

/* Modifiers are deliberately self-sufficient — they each re-declare `display: grid`
   so that forgetting the base `.grid` class can never silently collapse a section
   into a single stacked column. */
.grid,
.grid--2, .grid--3, .grid--4, .grid--auto, .grid--sidebar {
  display: grid;
  gap: clamp(18px, 2.4vw, 30px);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: clamp(28px, 4vw, 56px); }
/* A sticky child only travels inside its own containing block. With align-items:start
   the aside shrinks to the height of the card inside it, leaving zero travel — the
   card then scrolls away with the page and never sticks at all. Stretching just the
   aside gives it the full row height to stick within, without stretching the cards
   in the other columns. */
.grid--sidebar > aside { align-self: stretch; }
.flex { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.stack > * + * { margin-top: 1.05em; }
.hairline { height: 1px; background: var(--c-border); border: 0; }
.section--dark .hairline { background: var(--c-hairline-dark); }

@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4, .grid--auto { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ buttons */
.btn {
  --btn-h: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: var(--btn-h); padding: 0 clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--btn-primary-bd);
  border-radius: var(--r-md);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: .04em; text-transform: var(--label-transform);
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.btn:active { transform: translateY(0); }
.btn--gold { background: var(--c-accent-grad); border-color: transparent; color: var(--c-accent-on); }
.btn--outline { background: transparent; color: var(--c-heading); border-color: var(--c-border-strong); }
.btn--outline:hover { border-color: var(--c-accent); color: var(--c-accent-text); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--c-heading); padding-inline: 4px; }
.btn--ghost::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: 10px; height: 1px;
  background: var(--c-accent); transform: scaleX(.28); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.btn--ghost:hover { transform: none; box-shadow: none; }
.btn--ghost:hover::after { transform: scaleX(1); }
.btn--onDark { background: transparent; color: var(--c-on-dark); border-color: var(--c-hairline-dark); }
.btn--onDark:hover { border-color: var(--c-accent); color: var(--c-accent-light); }
.btn--sm { --btn-h: 40px; padding-inline: 16px; font-size: var(--fs-micro); }
.btn--lg { --btn-h: 58px; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-loading { opacity: .55; pointer-events: none; }

.link-arrow { display: inline-flex; align-items: center; gap: .5em; font-size: var(--fs-small); font-weight: 600; color: var(--c-accent-text); }
.link-arrow svg, .link-arrow .arr { transition: transform var(--dur) var(--ease); }
.link-arrow:hover .arr { transform: translateX(4px); }
.link-underline { border-bottom: 1px solid var(--c-accent); padding-bottom: 1px; }

/* ------------------------------------------------------------------ badges & chips */
.badge {
  display: inline-flex; align-items: center; gap: .4em;
  padding: 5px 10px; border-radius: var(--r-sm);
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--label-spacing); text-transform: var(--label-transform);
  background: var(--c-support-soft); color: var(--c-support);
  line-height: 1.2; white-space: nowrap;
}
.badge--new  { background: var(--badge-new);  color: #fff; }
.badge--uc   { background: var(--badge-uc);   color: #fff; }
.badge--rtm  { background: var(--badge-rtm);  color: #fff; }
.badge--sold { background: var(--badge-sold); color: #fff; }
.badge--gold { background: var(--c-accent); color: var(--c-accent-on); }
.badge--outline { background: transparent; border: 1px solid var(--c-border-strong); color: var(--c-text-soft); }
.badge--rera { background: transparent; border: 1px solid var(--c-accent); color: var(--c-accent-text); }
.badge--exclusive { background: var(--c-ink); color: var(--c-on-dark); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: .45em;
  padding: 7px 14px; border: 1px solid var(--c-border); border-radius: var(--r-pill);
  font-size: var(--fs-small); color: var(--c-text-soft); background: var(--c-surface);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip:hover, .chip.is-active { border-color: var(--c-accent); color: var(--c-heading); }
.chip.is-active { background: var(--c-accent-soft); }

/* ------------------------------------------------------------------ media */
.media { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-md); background: var(--c-bg-alt); }
.media::before { content: ""; display: block; padding-top: calc(100% / (var(--ar, var(--img-ratio)))); }
.media > img, .media > picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media > picture > img { width: 100%; height: 100%; object-fit: cover; }
.media__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px; font-size: var(--fs-micro); color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.62), transparent); }
.media--ratio-1 { --ar: 1 / 1; }
.media--ratio-4-3 { --ar: 4 / 3; }
.media--ratio-3-2 { --ar: 3 / 2; }
.media--ratio-16-9 { --ar: 16 / 9; }
.media--ratio-3-4 { --ar: 3 / 4; }
.media--ratio-21-9 { --ar: 21 / 9; }
.media__img { transition: transform 900ms var(--ease); }
.is-placeholder { object-fit: cover; }

/* ------------------------------------------------------------------ header */
.site-header {
  --header-h: 74px;
  position: sticky; top: 0; z-index: 90;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }

/* On hero pages the header floats OVER the hero. Without this negative margin the
   header would sit in normal flow above the hero — light nav text on the light page
   background — i.e. an invisible menu. The hero is pulled up by exactly one header
   height and given matching top padding so nothing is hidden underneath. */
body.has-hero .site-header { margin-bottom: calc(-1 * var(--header-h)); }
body.has-hero .hero { padding-top: var(--header-h); }

.site-header.is-transparent { background: transparent; color: var(--c-on-dark); }
.site-header.is-transparent .brand,
.site-header.is-transparent .nav__link,
.site-header.is-transparent .nav__actions > a:not(.btn) { color: var(--c-on-dark); }
.site-header.is-transparent .wordmark__a { color: var(--c-on-dark); }
.site-header.is-transparent .nav-toggle { color: var(--c-on-dark); }
/* Buttons keep their own fill, but the outline variant needs a light edge on dark. */
.site-header.is-transparent .btn:not(.btn--gold) {
  background: transparent; color: var(--c-on-dark); border-color: rgba(255, 255, 255, .5);
}
.site-header.is-transparent .btn:not(.btn--gold):hover { border-color: var(--c-accent); color: var(--c-accent-light); }
.site-header.is-solid, .site-header:not(.is-transparent) {
  background: color-mix(in srgb, var(--c-bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--c-border);
}
.site-header.is-solid { box-shadow: var(--shadow-1); }

.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { max-height: 40px; width: auto; }
.wordmark { font-family: var(--font-display); font-size: 1.28rem; letter-spacing: .02em; line-height: 1; }
.wordmark__a { font-weight: 600; }
.wordmark__b { margin-left: .34em; color: var(--c-accent-text); font-weight: 400; }
.site-header.is-transparent .wordmark__b { color: var(--c-accent-light); }

.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav__link {
  position: relative; font-size: var(--fs-small); font-weight: 500; padding: 8px 2px;
  display: inline-flex; align-items: center; gap: .4em;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--c-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__actions { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: currentColor; margin: 5px 0; transition: transform var(--dur) var(--ease), opacity var(--dur); }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: color-mix(in srgb, var(--c-surface) 96%, transparent);
  backdrop-filter: saturate(170%) blur(16px);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 34px 64px -34px rgba(11, 11, 12, .38), 0 1px 0 var(--c-border);
  padding: 38px 0 30px; color: var(--c-text);
  animation: megaIn 300ms var(--ease) both;
}
/* Hairline of brand accent along the top edge — the small signal that separates a
   luxury menu from a utility dropdown. */
.mega::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--c-accent-grad); opacity: .9;
}
@keyframes megaIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 300px; gap: 0; }
.mega__col { padding-inline: clamp(16px, 2vw, 30px); }
.mega__col:first-child { padding-left: 0; }
.mega__col + .mega__col { border-left: 1px solid var(--c-border); }

/* Column head: serif place name + gold rule */
.mega__col h4 {
  font-family: var(--font-display); font-weight: var(--fw-heading);
  font-size: 1.12rem; letter-spacing: 0; text-transform: none;
  color: var(--c-heading); margin-bottom: 6px;
}
.mega__col h4 a:hover { color: var(--c-accent-text); }
.mega__col h4 + .mega__rule { display: block; width: 30px; height: 1px; background: var(--c-accent); margin-bottom: 16px; }

.mega__list { list-style: none; display: grid; gap: 1px; }
.mega__list a {
  position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: var(--fs-small); padding: 7px 8px 7px 12px; border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
.mega__list a::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  background: var(--c-accent); border-radius: 2px;
  transform: scaleY(0); transform-origin: center; transition: transform var(--dur-fast) var(--ease);
}
.mega__list a:hover { color: var(--c-accent-text); background: var(--c-accent-soft); padding-left: 16px; }
.mega__list a:hover::before { transform: scaleY(1); }
.mega__count { font-size: var(--fs-micro); color: var(--c-text-soft); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.mega__all {
  margin-top: 12px; padding-left: 12px; display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--label-spacing);
  text-transform: var(--label-transform); color: var(--c-accent-text);
}
.mega__all .arr { transition: transform var(--dur) var(--ease); }
.mega__all:hover .arr { transform: translateX(5px); }

/* Featured card replaces the flat promo box */
.mega__feature {
  display: block; background: var(--c-ink); color: var(--c-on-dark);
  border-radius: var(--r-lg); overflow: hidden; position: relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mega__feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.mega__feature .media { border-radius: 0; }
.mega__feature:hover .media__img { transform: scale(1.05); }
.mega__feature__body { padding: 16px 18px 18px; }
.mega__feature__eyebrow {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--label-spacing);
  text-transform: var(--label-transform); color: var(--c-accent-light);
}
.mega__feature__title { font-family: var(--font-display); font-size: 1.08rem; line-height: 1.25; margin-top: 7px; color: var(--c-on-dark); }
.mega__feature__text { font-size: var(--fs-micro); color: var(--c-on-dark-soft); margin-top: 8px; line-height: 1.6; }
.mega__feature__cta {
  display: inline-flex; align-items: center; gap: .45em; margin-top: 12px;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--label-spacing);
  text-transform: var(--label-transform); color: var(--c-accent-light);
}
.mega__feature:hover .mega__feature__cta .arr { transform: translateX(5px); }
.mega__feature__cta .arr { transition: transform var(--dur) var(--ease); }

/* Quick collections strip along the bottom of the panel */
.mega__foot {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--c-border);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.mega__foot .mega__foot-label {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--label-spacing);
  text-transform: var(--label-transform); color: var(--c-text-soft); margin-right: 4px;
}

/* Developer tiles */
.mega__devs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mega__dev {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 13px; border: 1px solid var(--c-border); border-radius: var(--r-md);
  font-size: var(--fs-small); background: var(--c-surface);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.mega__dev:hover { border-color: var(--c-accent); background: var(--c-accent-soft); transform: translateY(-2px); color: var(--c-accent-text); }
.mega__dev strong { font-weight: 500; }

@media (max-width: 1180px) {
  .mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega__col--feature { display: none; }
}

.drawer {
  position: fixed; inset: 0; z-index: 120; background: var(--c-bg);
  transform: translateX(100%); transition: transform var(--dur) var(--ease);
  overflow-y: auto; padding: 20px 0 60px;
}
.drawer.is-open { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.drawer__group { border-bottom: 1px solid var(--c-border); }
.drawer__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; background: none; border: 0; font-family: var(--font-display); font-size: 1.16rem; text-align: left; cursor: pointer; }
.drawer__panel { display: none; padding-bottom: 16px; }
.drawer__panel.is-open { display: block; }
.drawer__panel a { display: block; padding: 9px 0; font-size: var(--fs-small); color: var(--c-text-soft); }

@media (max-width: 1024px) {
  .nav--desktop { display: none; }
  /* grid, not block: the circular burger further down centres its three bars this way. */
  .nav-toggle { display: grid; place-content: center; }
}

/* announcement bar */
.announce { background: var(--c-ink); color: var(--c-on-dark); font-size: var(--fs-micro); letter-spacing: .06em; }
.announce__inner { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 38px; text-align: center; }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; isolation: isolate; background: var(--c-dark-bg); color: var(--c-on-dark); }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* The <picture> has to be told to fill, or height:100% on the img resolves against
   an inline box sized to the image's own 21:9 ratio — the hero stayed 643px tall on
   a phone while the image stopped at 211px, leaving a black band under it. */
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,.72) 0%, rgba(0,0,0,.44) 46%, rgba(0,0,0,.18) 100%);
}
/* Constrain the CONTENT, not the block. If .hero__inner itself carried the max-width
   it would inherit .container's `margin-inline: auto` on pages that put both classes
   on one element — floating the copy in a centred column instead of lining it up with
   the logo and nav on the container's left edge. */
.hero__inner { position: relative; padding-block: clamp(96px, 17vh, 190px); }
.hero__inner > * { max-width: 46rem; }

/* The homepage hero is sized to ONE screen so the search bar always lands above the
   fold. Height is driven by the viewport (not fixed padding) and the content is
   vertically centred, so it holds up from 720p laptops to tall desktop monitors.
   `svh` keeps mobile browser chrome from pushing the CTA out of view. */
.hero--tall { display: grid; align-items: center; }
.hero--tall { min-height: min(860px, calc(100vh - 48px)); }
@supports (height: 100svh) {
  .hero--tall { min-height: min(860px, calc(100svh - 48px)); }
}
/* Asymmetric padding biases the centred content slightly below the optical middle —
   it sits under the header rather than crowding it, and leaves the lower third of the
   photograph visible. */
.hero--tall .hero__inner { padding-block: clamp(80px, 14vh, 160px) clamp(36px, 6vh, 80px); }
@media (max-width: 720px) {
  .hero--tall { min-height: auto; }
}
.hero h1, .hero .display { color: var(--c-on-dark); }
.hero__sub { margin-top: 20px; color: var(--c-on-dark-soft); font-size: 1.06em; max-width: 54ch; }
.hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero__meta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 26px 40px; }
.hero__meta dt { font-size: var(--fs-micro); letter-spacing: var(--label-spacing); text-transform: var(--label-transform); color: var(--c-accent-light); }
.hero__meta dd { font-family: var(--font-display); font-size: 1.18rem; margin-top: 5px; color: var(--c-on-dark); }
.hero__scroll { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-size: var(--fs-micro);
  letter-spacing: var(--label-spacing); text-transform: var(--label-transform); color: var(--c-on-dark-soft); }

/* search bar in hero */
.searchbar { margin-top: 34px; display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 1px;
  background: var(--c-hairline-dark); border: 1px solid var(--c-hairline-dark); border-radius: var(--r-md); overflow: hidden; }
.searchbar > * { background: color-mix(in srgb, var(--c-dark-bg) 82%, transparent); border: 0; padding: 15px 18px; color: var(--c-on-dark); font-size: var(--fs-small); }
.searchbar select { appearance: none; }
.searchbar button { background: var(--c-accent); color: var(--c-accent-on); font-weight: 700; letter-spacing: .06em;
  text-transform: var(--label-transform); padding-inline: 26px; cursor: pointer; }
@media (max-width: 760px) { .searchbar { grid-template-columns: 1fr 1fr; } .searchbar button { grid-column: 1 / -1; } }

/* ---- hero, phone ----
   Deliberately placed after every base .hero rule above. Written earlier in the file
   these lost on source order and silently did nothing — the same trap that has now
   caught .consent__more, .review-grid--2 and the sitemap CLI. */
@media (max-width: 720px) {
  .hero--tall .hero__inner { padding-block: clamp(48px, 9vh, 84px) clamp(28px, 5vh, 48px); }

  /* The desktop scrim runs left-to-right because the copy sits in the left column.
     Full width on a phone, the end of every line lands on the bright part of the
     photograph — which is why "Talk to an Advisor" sat on a sunlit pool. Vertical and
     bottom-weighted, so legibility does not depend on what is behind any one line. */
  .hero__media::after {
    background: linear-gradient(to bottom, rgba(0,0,0,.34) 0%, rgba(0,0,0,.12) 26%, rgba(0,0,0,.64) 66%, rgba(0,0,0,.88) 100%);
  }

  .hero .display { font-size: clamp(25px, 6.9vw, 32px); line-height: 1.12; }
  .hero__sub { margin-top: 14px; font-size: .96em; line-height: 1.5; }

  /* Side by side, not two stacked slabs. Two full-width buttons read as a form and
     were taking a third of the first screen. Letter-spacing is dropped so the longer
     label still fits on one line at this width. */
  .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .hero__actions .btn { width: 100%; min-height: 48px; padding-inline: 8px; font-size: 11px; letter-spacing: .02em; }

  /* One field and a button. The city and budget selects stay in the DOM and still
     submit — they are simply not what belongs in front of someone on a phone, and the
     search page carries the full filter set. */
  .searchbar { margin-top: 20px; grid-template-columns: 1fr auto; }
  .searchbar select { display: none; }
  .searchbar > * { padding: 14px 15px; }
  .searchbar button { grid-column: auto; padding-inline: 20px; }
}

/* ------------------------------------------------------------------ trust strip */
.trust { border-block: 1px solid var(--c-border); background: var(--c-bg); }
.trust__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 22px; padding-block: 24px; }
.trust__item { display: flex; align-items: center; gap: 12px; font-size: var(--fs-small); min-width: 0; }
/* A RERA registration number sits in this slot. It has no spaces to break at, so
   without this it refuses to wrap and drags the whole page wider than the phone —
   which is what put a white gutter down the right of every mobile screen. */
.trust__num { font-family: var(--font-display); font-size: 1.5rem; color: var(--c-heading); line-height: 1; min-width: 0; overflow-wrap: anywhere; }
.trust__label { color: var(--c-text-soft); font-size: var(--fs-micro); letter-spacing: var(--label-spacing); text-transform: var(--label-transform); }
@media (max-width: 620px) {
  .trust__inner { gap: 16px 14px; padding-block: 18px; }
  .trust__item { flex: 1 1 42%; flex-direction: column; align-items: flex-start; gap: 3px; }
  .trust__num { font-size: 1.12rem; }

  /* Standalone controls that were 17-25px tall on a phone. Padding rather than a
     min-height, so the hit area grows without the text moving. Inline links inside a
     sentence are left alone on purpose — WCAG exempts them, and padding them out
     would tear up the line spacing of every paragraph. */
  .link-arrow { padding-block: 9px; }
  .brand { padding-block: 7px; }
}

/* ------------------------------------------------------------------ project card */
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Badges sit on a photograph, so they need their own contrast rather than borrowing
   the page's. Without this they disappear into a bright sky. */
.card__badges .badge { box-shadow: 0 1px 6px rgba(11,11,12,.22); backdrop-filter: saturate(1.3) blur(3px); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--c-border-strong); }
.card:hover .media__img { transform: scale(1.045); }
.card__media { position: relative; }
.card__badges { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; }
.card__fav { position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(255,255,255,.9); border: 0;
  width: 34px; height: 34px; border-radius: var(--r-pill); display: grid; place-items: center; cursor: pointer; }
.card__body { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__dev { font-size: var(--fs-micro); letter-spacing: var(--label-spacing); text-transform: var(--label-transform); color: var(--c-text-soft); }
.card__title { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.18; color: var(--c-heading); letter-spacing: -.005em; }
.card:hover .card__title { color: var(--c-accent-text); }
.card__loc { font-size: var(--fs-small); color: var(--c-text-soft); display: flex; align-items: center; gap: .4em; }
.card__specs { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-small); color: var(--c-text-soft); }
.card__specs span { display: inline-flex; align-items: center; gap: .4em; }
.card__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--c-border); display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.card__price { font-family: var(--font-display); font-size: 1.12rem; color: var(--c-heading); }
.card__price small { display: block; font-family: var(--font-body); font-size: var(--fs-micro); color: var(--c-text-soft);
  letter-spacing: var(--label-spacing); text-transform: var(--label-transform); margin-bottom: 3px; }
.card__cta { font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--label-spacing);
  text-transform: var(--label-transform); color: var(--c-accent-text); }
.card__link { position: absolute; inset: 0; z-index: 1; }

/* ---- boxed spec rows (grid + wide variants) ---- */
.card__spec {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: 7px 11px; background: var(--c-surface);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.card:hover .card__spec { border-color: var(--c-border-strong); }
.card__spec__ico {
  width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 50%; background: var(--c-accent-soft); color: var(--c-accent-text);
}
.card__spec__body { display: grid; gap: 1px; min-width: 0; }
.card__spec__label {
  font-size: var(--fs-micro); letter-spacing: var(--label-spacing);
  text-transform: var(--label-transform); color: var(--c-text-soft);
}
.card__spec__value {
  font-size: var(--fs-small); color: var(--c-heading); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card__spec__value--price { font-family: var(--font-display); font-weight: 400; font-size: 1.06rem; }
.card__specrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* ---- the two actions ---- */
/* z-index 2 clears .card__link (z-index 1), so the card-wide link still works for
   everything except these two controls. */
.card__actions { margin-top: auto; padding-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; position: relative; z-index: 2; }
.card__actions .btn { min-height: 36px; padding: 0 10px; font-size: var(--fs-micro); letter-spacing: var(--label-spacing); }
@media (max-width: 400px) { .card__actions { grid-template-columns: minmax(0, 1fr); } }
.card--wide { flex-direction: row; }
.card--wide .card__media { width: 42%; flex-shrink: 0; }
.card--wide .media::before { padding-top: 0; }
.card--wide .media { height: 100%; }
.card--compact .card__body { padding: 14px; gap: 7px; }
.card--sold { opacity: .82; }
.card--sold .card__media::after { content: "SOLD OUT"; position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(11,11,12,.42); color: #fff; font-size: var(--fs-micro); letter-spacing: .3em; font-weight: 700; }
@media (max-width: 620px) { .card--wide { flex-direction: column; } .card--wide .card__media { width: 100%; } .card--wide .media::before { padding-top: calc(100% / (3/2)); } }

/* ------------------------------------------------------------------ tiles / logos */
.tile { position: relative; display: block; overflow: hidden; border-radius: var(--r-lg); background: var(--c-dark-bg); color: #fff; }
.tile img { transition: transform 1000ms var(--ease); }
.tile:hover img { transform: scale(1.06); }
.tile__body { position: absolute; inset: auto 0 0 0; padding: 22px; background: linear-gradient(to top, rgba(0,0,0,.74), transparent); }
.tile__title { font-family: var(--font-display); font-size: 1.35rem; color: #fff; }
.tile__count { font-size: var(--fs-micro); letter-spacing: var(--label-spacing); text-transform: var(--label-transform); color: rgba(255,255,255,.78); margin-top: 4px; }
.tile--tall .media { --ar: 3 / 4; }

.logo-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.logo-grid a { background: var(--c-surface); display: grid; place-items: center; padding: 26px 18px; min-height: 108px;
  transition: background-color var(--dur) var(--ease); }
.logo-grid a:hover { background: var(--c-bg-alt); }
.logo-grid img { max-height: 42px; width: auto; filter: grayscale(1); opacity: .72; transition: filter var(--dur), opacity var(--dur); }
.logo-grid a:hover img { filter: none; opacity: 1; }
.logo-grid .logo-text { font-family: var(--font-display); font-size: 1rem; text-align: center; color: var(--c-text-soft); }
@media (max-width: 1024px) { .logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 620px) { .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ about */
.about-hero { background: linear-gradient(180deg, var(--c-bg-alt) 0%, var(--c-bg) 80%); }
.about-hero__head { text-align: center; max-width: 62ch; margin: 8px auto clamp(28px, 3.8vw, 42px); }
.about-hero__title {
  font-family: var(--font-display); font-weight: var(--fw-heading);
  font-size: var(--fs-h1); line-height: 1.14; color: var(--c-heading);
  margin-top: 14px; letter-spacing: -.014em;
}
.about-hero__rule { margin-left: auto; margin-right: auto; }
.about-hero__sub { margin-top: 18px; color: var(--c-text-soft); font-size: var(--fs-small); }

.about-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.about-stat {
  position: relative; overflow: hidden; text-align: center;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 24px 16px 20px; box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.about-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--c-accent-light); }
.about-stat::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
}
.about-stat__num {
  display: block; font-family: var(--font-display); font-weight: var(--fw-heading);
  font-size: clamp(1.7rem, 3vw, 2.15rem); color: var(--c-heading); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.about-stat__label {
  display: block; margin-top: 9px; font-size: var(--fs-micro);
  letter-spacing: var(--label-spacing); text-transform: var(--label-transform); color: var(--c-text-soft);
}
@media (max-width: 860px) { .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ contact */
.contact-hero { background: linear-gradient(180deg, var(--c-bg-alt) 0%, var(--c-bg) 78%); }
.contact-hero__head { text-align: center; max-width: 58ch; margin: 8px auto clamp(26px, 3.6vw, 40px); }
.contact-hero__title {
  font-family: var(--font-display); font-weight: var(--fw-heading);
  font-size: var(--fs-h1); line-height: 1.1; color: var(--c-heading);
  margin-top: 14px; letter-spacing: -.014em;
}
.contact-hero__rule { margin-left: auto; margin-right: auto; }
.contact-hero__sub { margin-top: 16px; color: var(--c-text-soft); font-size: var(--fs-small); }

.channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.channel {
  display: grid; gap: 4px; align-content: start;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 22px 20px 18px; box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.channel:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--c-accent-light); }
.channel__ico {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--c-accent-soft); color: var(--c-accent-text);
  border: 1px solid var(--c-accent-light); margin-bottom: 10px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.channel:hover .channel__ico { background: var(--c-accent); color: var(--c-accent-on); }
.channel__label { font-size: var(--fs-micro); letter-spacing: var(--label-spacing); text-transform: var(--label-transform); color: var(--c-text-soft); }
/* Phone numbers and email addresses have no space to break at, so they need this or
   they run out of the card on a phone. */
.channel__value { font-family: var(--font-display); font-size: 1.16rem; color: var(--c-heading); line-height: 1.3; overflow-wrap: anywhere; }
.channel__go { margin-top: 8px; font-size: var(--fs-micro); color: var(--c-accent-text); font-weight: 600; }

.office-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-1);
}
.office-card__title { font-family: var(--font-display); font-size: 1.16rem; color: var(--c-heading); margin-bottom: 14px; }
.office-card .facts { border: 0; background: transparent; gap: 0; grid-template-columns: minmax(0, 1fr); }
.office-card .fact { padding: 12px 0; border-bottom: 1px solid var(--c-border); background: transparent; }
.office-card .fact:last-child { border-bottom: 0; padding-bottom: 0; }
.office-card .fact:first-child { padding-top: 0; }

@media (max-width: 900px) { .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .channels { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ why us */
.why__head { text-align: center; max-width: 58ch; margin: 0 auto clamp(28px, 4vw, 44px); }
.why__title {
  font-family: var(--font-display); font-weight: var(--fw-heading);
  font-size: var(--fs-h2); line-height: 1.12; color: var(--c-heading);
  margin-top: 14px; letter-spacing: -.012em;
}
.why__rule { margin-left: auto; margin-right: auto; }
.why__sub { margin-top: 16px; color: var(--c-text-soft); font-size: var(--fs-small); }

.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.why-card {
  position: relative; overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 26px 22px 24px;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.why-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--c-accent-light); }
/* The number is texture, not content — oversized, low contrast, behind everything.
   It gives the four cards a rhythm without adding a line to read. */
.why-card__no {
  position: absolute; top: -10px; right: 10px; z-index: 0;
  font-family: var(--font-display); font-size: 66px; line-height: 1;
  color: var(--c-accent); opacity: .13; pointer-events: none; user-select: none;
}
.why-card__ico, .why-card__title, .why-card__body { position: relative; z-index: 1; }
.why-card__ico {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--c-accent-soft); color: var(--c-accent-text);
  border: 1px solid var(--c-accent-light);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.why-card:hover .why-card__ico { background: var(--c-accent); color: var(--c-accent-on); }
.why-card__title { font-family: var(--font-display); font-size: 1.1rem; color: var(--c-heading); margin-top: 16px; line-height: 1.25; }
.why-card__body { margin-top: 9px; font-size: var(--fs-small); color: var(--c-text-soft); line-height: 1.68; }

.why-note {
  margin-top: clamp(22px, 3vw, 34px);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(120deg, var(--c-dark-bg) 0%, #17181B 100%);
  color: var(--c-on-dark); border-radius: var(--r-lg);
  padding: 24px 26px; border: 1px solid rgba(255,255,255,.08);
}
.why-note__avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid var(--c-hairline-dark); }
.why-note__avatar img, .why-note__avatar .media { width: 100%; height: 100%; object-fit: cover; }
.why-note__text { flex: 1 1 320px; font-size: var(--fs-small); color: var(--c-on-dark-soft); line-height: 1.65; }
.why-note__text strong { display: block; color: var(--c-on-dark); font-family: var(--font-display); font-weight: var(--fw-heading); font-size: 1.06rem; margin-bottom: 4px; }
.why-note__cta { flex-shrink: 0; }

@media (max-width: 1080px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .why-grid { grid-template-columns: minmax(0, 1fr); }
  .why-note { padding: 20px; gap: 14px; }
  .why-note__cta { width: 100%; }
}

/* ------------------------------------------------------------------ reviews */
.reviews { background: linear-gradient(180deg, var(--c-bg-alt) 0%, var(--c-bg) 74%); }
.reviews__head { text-align: center; max-width: 56ch; margin: 0 auto clamp(28px, 4vw, 44px); }
.reviews__title {
  font-family: var(--font-display); font-weight: var(--fw-heading);
  font-size: var(--fs-h2); line-height: 1.12; color: var(--c-heading);
  margin-top: 14px; letter-spacing: -.012em;
}
.reviews__rule { margin-left: auto; margin-right: auto; }
.reviews__score { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.reviews__score strong { font-family: var(--font-display); font-size: 1.24rem; color: var(--c-heading); font-weight: var(--fw-heading); }
.reviews__count { font-size: var(--fs-small); color: var(--c-text-soft); }
.reviews__stars, .review__stars { display: inline-flex; gap: 3px; }
.star { color: var(--c-border-strong); }
.star--on { color: var(--c-accent); }

.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* Immediately after its base rule on purpose — declared up in the About block it
   lost on source order and quietly rendered three columns for two cards. */
.review-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.review {
  position: relative; margin: 0; display: flex; flex-direction: column; gap: 13px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 26px 22px 22px; box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.review:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--c-accent-light); }
/* Decorative quote mark, deliberately oversized and low-contrast — it should register
   as texture, not as a character to read. */
/* z-index 0 with the content lifted to 1: an absolutely positioned element paints
   above in-flow siblings by default, so without this the mark sits on top of the
   first line of the quote instead of behind it. */
.review__mark {
  position: absolute; top: 0; right: 16px; z-index: 0;
  font-family: var(--font-display); font-size: 76px; line-height: 1;
  color: var(--c-accent); opacity: .15; pointer-events: none; user-select: none;
}
.review__stars, .review__body, .review__foot { position: relative; z-index: 1; }
.review__body { margin: 0; font-size: var(--fs-small); line-height: 1.72; color: var(--c-text); }
.review__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--c-border); display: flex; align-items: center; gap: 12px; }
.review__avatar {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--c-accent-soft);
  color: var(--c-accent-text); font-family: var(--font-display); font-size: .96rem;
  border: 1px solid var(--c-accent-light);
}
.review__avatar img, .review__avatar .media { width: 100%; height: 100%; object-fit: cover; }
.review__who { display: grid; gap: 1px; min-width: 0; }
.review__name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--c-heading); font-size: var(--fs-small); }
.review__tick { color: var(--c-success); flex-shrink: 0; }
.review__role, .review__bought { font-size: var(--fs-micro); color: var(--c-text-soft); }
.review__bought strong { color: var(--c-accent-text); font-weight: 600; }
.reviews__cta { display: flex; justify-content: center; margin-top: clamp(26px, 3.4vw, 38px); }

@media (max-width: 1024px) { .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .review-grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ curated collections */
.collections {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 420px at 12% 0%, var(--c-accent-soft), transparent 68%),
    linear-gradient(168deg, var(--c-bg-alt) 0%, var(--c-bg) 62%);
  padding-bottom: clamp(58px, 7vw, 96px);
}
.collections__head { max-width: 54ch; }
/* Rules on both sides — same treatment as the partners eyebrow, so the two bands
   read as one family rather than two designs. */
.eyebrow--both::after { content: ""; width: 26px; height: 1px; background: var(--c-accent); opacity: .85; }
.collections__title {
  font-family: var(--font-display); font-weight: var(--fw-heading);
  font-size: var(--fs-h2); line-height: 1.1; color: var(--c-heading);
  margin-top: 14px; letter-spacing: -.012em;
}
.collections__rule { display: block; width: 128px; height: 1px; margin-top: 16px; background: var(--c-accent); opacity: .55; position: relative; }
.collections__rule::after {
  content: ""; position: absolute; left: 74px; top: 50%; width: 6px; height: 6px;
  transform: translateY(-50%) rotate(45deg); background: var(--c-accent);
}
.collections__sub { margin-top: 16px; color: var(--c-text-soft); font-size: var(--fs-small); max-width: 46ch; }

.collection-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px; margin-top: clamp(26px, 3.6vw, 42px);
}
.collection {
  position: relative; display: grid; gap: 12px; align-content: start;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 18px 16px 40px;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.collection:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--c-accent-light); }
.collection__ico { color: var(--c-accent-text); display: grid; place-items: start; }
.collection__label { display: grid; gap: 1px; font-size: var(--fs-small); line-height: 1.3; }
.collection__lead { color: var(--c-text-soft); }
.collection__strong { color: var(--c-heading); font-weight: 600; }
/* Anchored bottom-right rather than in flow, so tiles stay the same height however
   long the label wraps. */
.collection__go {
  position: absolute; right: 14px; bottom: 14px;
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: var(--c-accent); color: var(--c-accent-on);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.collection:hover .collection__go { transform: translateX(3px); background: var(--c-accent-dark); }

.collections__wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(48px, 6vw, 90px); pointer-events: none; }

@media (max-width: 1080px) { .collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .collection { padding: 15px 13px 38px; } }

/* ------------------------------------------------------------------ developer partners */
.partner-head { text-align: center; max-width: 60ch; margin: 0 auto clamp(28px, 4vw, 44px); }
.eyebrow--centred { justify-content: center; }
/* The eyebrow's leading rule reads as a bullet when the text is centred, so give it
   one on each side instead of tearing the balance to the left. */
.eyebrow--centred::after { content: ""; width: 26px; height: 1px; background: var(--c-accent); opacity: .85; }
.partner-title {
  font-family: var(--font-display); font-weight: var(--fw-heading);
  font-size: var(--fs-h2); line-height: 1.12; color: var(--c-heading);
  margin-top: 14px; letter-spacing: -.01em;
}
.partner-rule {
  display: block; width: 132px; height: 1px; margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
  position: relative;
}
.partner-rule::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--c-accent);
}
.partner-sub { margin-top: 16px; color: var(--c-text-soft); font-size: var(--fs-small); }

.partner-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.partner {
  display: grid; justify-items: center; align-content: center; gap: 12px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 26px 16px 20px; min-height: 168px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.partner:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--c-accent-light); }
.partner__mark { display: grid; place-items: center; min-height: 46px; }
/* Grayscale by default so ten different brand palettes do not fight each other, and
   so the section reads as one wall rather than ten logos. Colour returns on hover. */
.partner__mark img { max-height: 44px; width: auto; filter: grayscale(1); opacity: .74; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.partner:hover .partner__mark img { filter: none; opacity: 1; }
.partner__name { font-family: var(--font-display); font-size: 1.02rem; text-align: center; color: var(--c-text-soft); line-height: 1.25; }
.partner:hover .partner__name { color: var(--c-heading); }
.partner__rule { display: block; width: 34px; height: 1px; background: var(--c-border-strong); transition: background var(--dur) var(--ease), width var(--dur) var(--ease); }
.partner:hover .partner__rule { background: var(--c-accent); width: 46px; }
.partner__arrow {
  width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--c-border-strong); color: var(--c-text-soft);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.partner:hover .partner__arrow { border-color: var(--c-accent); color: var(--c-accent-on); background: var(--c-accent); }

.partner-cta { display: flex; justify-content: center; margin-top: clamp(26px, 3.5vw, 40px); }
.partner-cta .btn .arr { transition: transform var(--dur) var(--ease); }
.partner-cta .btn:hover .arr { transform: translateX(4px); }

.partner-trust {
  list-style: none; padding: 0; margin: clamp(24px, 3.4vw, 38px) auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 12px 0; border-top: 1px solid var(--c-border); padding-top: clamp(20px, 2.6vw, 28px);
}
.partner-trust li {
  display: inline-flex; align-items: center; gap: 9px; padding: 0 clamp(16px, 2.4vw, 30px);
  font-size: var(--fs-micro); letter-spacing: var(--label-spacing);
  text-transform: var(--label-transform); color: var(--c-text-soft); font-weight: 600;
}
.partner-trust li + li { border-left: 1px solid var(--c-border); }
.partner-trust svg { color: var(--c-accent-text); flex-shrink: 0; }

@media (max-width: 1024px) { .partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .partner { min-height: 138px; padding: 20px 12px 16px; }
  .partner-trust li { padding: 0 12px; }
  .partner-trust li + li { border-left: 0; }
}

/* ------------------------------------------------------------------ read-more clamp */
/* Visual only. The text stays in the document at full length, which is what keeps it
   crawlable — hiding it would mean not shipping it. */
.clamp { position: relative; }
.clamp__body { transition: max-height var(--dur) var(--ease); }
.clamp.is-clamped .clamp__body { max-height: 420px; overflow: hidden; }
/* Fade rather than a hard cut, so it reads as "there is more" instead of "this
   paragraph ends mid-sentence". */
.clamp.is-clamped::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 44px; height: 110px;
  background: linear-gradient(to bottom, transparent, var(--c-bg) 88%);
  pointer-events: none;
}
.clamp.is-clamped.on-alt::after { background: linear-gradient(to bottom, transparent, var(--c-bg-alt) 88%); }
.clamp__more {
  margin-top: 14px; display: inline-flex; align-items: center; gap: .5em;
  background: none; border: 0; cursor: pointer; padding: 8px 0;
  font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--label-spacing); text-transform: var(--label-transform);
  color: var(--c-accent-text); border-bottom: 1px solid var(--c-accent);
}
.clamp__more:hover { color: var(--c-heading); }
.clamp__more .arr { transition: transform var(--dur) var(--ease); }
.clamp:not(.is-clamped) .clamp__more .arr { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .clamp__body { transition: none; } }

/* ------------------------------------------------------------------ answer box (GEO) */
.answer-box {
  border-left: 2px solid var(--c-accent);
  background: var(--c-accent-soft);
  padding: 18px 22px; border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 1.03em; color: var(--c-heading);
}
.answer-box strong { font-weight: 600; }
.takeaways { background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 22px 24px; }
.takeaways h2, .takeaways h3 { font-size: var(--fs-h4); margin-bottom: 12px; }
.takeaways ul { list-style: none; display: grid; gap: 10px; }
.takeaways li { position: relative; padding-left: 26px; font-size: var(--fs-small); }
.takeaways li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px;
  border: 1px solid var(--c-accent); transform: rotate(45deg); }

/* ------------------------------------------------------------------ facts / stats */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--c-border);
  border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.fact { background: var(--c-surface); padding: 16px 18px; }
/* Both block: these are spans, and the margin-top on __value below has never done
   anything on an inline box. In the narrow grid cells they happened to wrap onto
   separate lines and looked right; given full width they ran together as
   "ADDRESSGolf Course Road". */
.fact__label { display: block; font-size: var(--fs-micro); letter-spacing: var(--label-spacing); text-transform: var(--label-transform); color: var(--c-text-soft); }
/* Email addresses and RERA registration numbers live in these cells. Neither has a
   space to break at, so on a 375px phone they ran past the card and were clipped —
   an email you cannot read is worse than one on two lines. */
.fact__value { display: block; font-family: var(--font-display); font-size: 1.12rem; color: var(--c-heading); margin-top: 5px; line-height: 1.25; overflow-wrap: anywhere; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 26px; }
.stat__num { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.8rem); color: var(--c-heading); line-height: 1; }
.section--dark .stat__num { color: var(--c-on-dark); }
.stat__label { font-size: var(--fs-micro); letter-spacing: var(--label-spacing); text-transform: var(--label-transform); color: var(--c-text-soft); margin-top: 8px; }
.section--dark .stat__label { color: var(--c-on-dark-soft); }

/* ------------------------------------------------------------------ tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-border); border-radius: var(--r-md); }
.table { font-size: var(--fs-small); background: var(--c-surface); }
.table th, .table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.table thead th { background: var(--c-bg-alt); font-size: var(--fs-micro); letter-spacing: var(--label-spacing);
  text-transform: var(--label-transform); color: var(--c-text-soft); font-weight: 700; white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--c-accent-soft); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table--plain { border: 0; }
.table--plain th, .table--plain td { padding-inline: 0; }

/* stacked table on mobile */
@media (max-width: 720px) {
  .table--stack thead { display: none; }
  .table--stack tr { display: block; border-bottom: 1px solid var(--c-border); padding: 12px 0; }
  .table--stack td { display: flex; justify-content: space-between; gap: 16px; border: 0; padding: 6px 14px; }
  .table--stack td::before { content: attr(data-label); font-size: var(--fs-micro); letter-spacing: var(--label-spacing);
    text-transform: var(--label-transform); color: var(--c-text-soft); }
}

/* ------------------------------------------------------------------ accordion / tabs / faq */
.acc { border-top: 1px solid var(--c-border); }
.acc__item { border-bottom: 1px solid var(--c-border); }
.acc__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 1.08rem; color: var(--c-heading); }
.acc__icon { flex-shrink: 0; width: 22px; height: 22px; position: relative; }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; background: var(--c-accent); transition: transform var(--dur) var(--ease); }
.acc__icon::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.acc__icon::after { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.acc__item.is-open .acc__icon::after { transform: translateX(-50%) scaleY(0); }
.acc__panel { display: none; padding-bottom: 22px; color: var(--c-text-soft); max-width: 76ch; }
.acc__item.is-open .acc__panel { display: block; }

/* ---- FAQ, feature treatment (homepage). The plain .acc above is unchanged and
       still serves inner pages and the project specifications accordion. ---- */
.faq-head { text-align: center; max-width: 56ch; margin: 0 auto clamp(26px, 3.6vw, 40px); }
.faq-title {
  font-family: var(--font-display); font-weight: var(--fw-heading);
  font-size: var(--fs-h2); line-height: 1.12; color: var(--c-heading);
  margin-top: 14px; letter-spacing: -.012em;
}
.faq-rule { margin-left: auto; margin-right: auto; }
.faq-sub { margin-top: 16px; color: var(--c-text-soft); font-size: var(--fs-small); }

.acc--cards { border-top: 0; display: grid; gap: 10px; }
.acc--cards .acc__item {
  border: 1px solid var(--c-border); border-radius: var(--r-lg);
  background: var(--c-surface); overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.acc--cards .acc__item:hover { border-color: var(--c-border-strong); }
.acc--cards .acc__item.is-open { border-color: var(--c-accent-light); box-shadow: var(--shadow-1); }
.acc--cards .acc__trigger { padding: 18px 20px; gap: 16px; font-size: 1.04rem; }
.acc--cards .acc__panel { padding: 0 20px 20px; max-width: none; }
/* The open row gets a gold rule between question and answer rather than a heavier
   border, so a long list of closed rows stays calm. */
.acc--cards .acc__item.is-open .acc__panel { border-top: 1px solid var(--c-border); padding-top: 16px; }
.acc--cards .acc__icon {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--c-border-strong); background: var(--c-surface);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.acc--cards .acc__icon::before { left: 8px; right: 8px; }
.acc--cards .acc__icon::after { top: 8px; bottom: 8px; }
.acc--cards .acc__item:hover .acc__icon { border-color: var(--c-accent); }
.acc--cards .acc__item.is-open .acc__icon { background: var(--c-accent); border-color: var(--c-accent); }
.acc--cards .acc__item.is-open .acc__icon::before { background: var(--c-accent-on); }

.tabs { display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--c-border); margin-bottom: 26px; }
.tab { flex-shrink: 0; padding: 13px 18px; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  font-size: var(--fs-small); font-weight: 600; color: var(--c-text-soft); white-space: nowrap; transition: color var(--dur), border-color var(--dur); }
.tab.is-active { color: var(--c-heading); border-bottom-color: var(--c-accent); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ------------------------------------------------------------------ amenities / pros-cons / timeline */
.amenities { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 20px; }
.amenity { display: flex; align-items: center; gap: 11px; font-size: var(--fs-small); }
.amenity__icon { flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--c-border); border-radius: var(--r-pill); color: var(--c-accent-text); }
.amenity--signature .amenity__icon { background: var(--c-accent-soft); border-color: var(--c-accent); }
.amenity-group + .amenity-group { margin-top: 34px; }
.amenity-group__title { font-size: var(--fs-micro); letter-spacing: var(--label-spacing); text-transform: var(--label-transform);
  color: var(--c-text-soft); font-weight: 700; margin-bottom: 16px; }

.proscons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--c-border);
  border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.proscons__col { background: var(--c-surface); padding: 24px; }
.proscons__title { display: flex; align-items: center; gap: 10px; font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--label-spacing); text-transform: var(--label-transform); margin-bottom: 16px; }
.proscons__title--pro { color: var(--c-success); }
.proscons__title--con { color: var(--c-error); }
.proscons ul { list-style: none; display: grid; gap: 12px; }
.proscons li { font-size: var(--fs-small); padding-left: 22px; position: relative; }
.proscons li::before { content: ""; position: absolute; left: 0; top: .58em; width: 10px; height: 10px; border-radius: 2px; }
.proscons__col--pro li::before { background: var(--c-success); opacity: .8; }
.proscons__col--con li::before { background: var(--c-error); opacity: .8; }
@media (max-width: 720px) { .proscons { grid-template-columns: minmax(0, 1fr); } }

.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: var(--c-border); }
.timeline__item { position: relative; padding-bottom: 30px; }
.timeline__item::before { content: ""; position: absolute; left: -28px; top: 6px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--c-bg); border: 1.5px solid var(--c-accent); }
.timeline__date { font-size: var(--fs-micro); letter-spacing: var(--label-spacing); text-transform: var(--label-transform); color: var(--c-accent-text); }
.timeline__title { font-family: var(--font-display); font-size: 1.08rem; margin-top: 5px; }

/* progress bar */
.progress { height: 5px; background: var(--c-border); border-radius: var(--r-pill); overflow: hidden; }
.progress__fill { height: 100%; background: var(--c-accent-grad); }

/* ------------------------------------------------------------------ gallery */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gallery__item { position: relative; overflow: hidden; border-radius: var(--r-md); cursor: zoom-in; background: none; border: 0; padding: 0; }
.gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
.gallery__item img { transition: transform 800ms var(--ease); }
.gallery__item:hover img { transform: scale(1.05); }
.gallery__more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11,11,12,.56);
  color: #fff; font-size: var(--fs-small); letter-spacing: .1em; }
@media (max-width: 720px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery__item:first-child { grid-column: span 2; grid-row: auto; } }

/* ------------------------------------------------------------------ enquiry modal */
/* z-index above the lightbox (200) and the sticky mobile bar, so an enquiry opened
   from anywhere lands on top of whatever is already showing. */
.modal { position: fixed; inset: 0; z-index: 260; display: none; }
.modal.is-open { display: grid; place-items: center; padding: 20px; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(8,8,9,.62); backdrop-filter: blur(3px); }
.modal__panel {
  position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 40px);
  overflow-y: auto; background: var(--c-surface); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); padding: 30px 28px 24px;
  animation: modal-in var(--dur) var(--ease) both;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal__panel { animation: none; } }
.modal__close {
  position: absolute; top: 10px; right: 12px; width: 36px; height: 36px;
  display: grid; place-items: center; font-size: 26px; line-height: 1;
  background: none; border: 0; color: var(--c-text-soft); cursor: pointer; border-radius: var(--r-sm);
}
.modal__close:hover { color: var(--c-heading); background: var(--c-bg-alt); }
.modal__eyebrow {
  font-size: var(--fs-micro); letter-spacing: var(--label-spacing);
  text-transform: var(--label-transform); color: var(--c-accent-text); margin: 0 0 6px;
}
.modal__title { font-size: var(--fs-h3); margin: 0 0 6px; }
.modal__sub { font-size: var(--fs-small); color: var(--c-text-soft); margin: 0 0 18px; }
.modal__foot {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--c-border);
  font-size: var(--fs-micro); color: var(--c-text-soft); text-align: center;
}
@media (max-width: 520px) {
  .modal.is-open { padding: 0; place-items: end stretch; }
  .modal__panel { max-width: none; max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8,8,9,.96); display: none; }
.lightbox.is-open { display: grid; grid-template-rows: auto 1fr auto; }
.lightbox__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; color: #fff; font-size: var(--fs-small); }
.lightbox__stage { display: grid; place-items: center; padding: 0 22px; overflow: hidden; }
.lightbox__stage img { max-height: 78vh; width: auto; max-width: 100%; object-fit: contain; }
.lightbox__foot { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 16px; }
.lightbox__btn { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff;
  width: 44px; height: 44px; border-radius: var(--r-pill); cursor: pointer; display: grid; place-items: center; }
.lightbox__btn:hover { background: rgba(255,255,255,.2); }

/* ------------------------------------------------------------------ forms */
.field { display: block; margin-bottom: 16px; }
.field__label { display: block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--label-spacing);
  text-transform: var(--label-transform); color: var(--c-text-soft); margin-bottom: 7px; }
.field__label .req { color: var(--c-error); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 12px 15px;
  background: var(--c-surface); color: var(--c-heading);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  font-size: var(--fs-small); transition: border-color var(--dur), box-shadow var(--dur);
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); outline: none; }
.textarea { min-height: 108px; resize: vertical; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field--error .input, .field--error .select, .field--error .textarea { border-color: var(--c-error); }
.field__error { color: var(--c-error); font-size: var(--fs-micro); margin-top: 6px; }
.field__hint { color: var(--c-text-soft); font-size: var(--fs-micro); margin-top: 6px; }
.checkbox { display: flex; gap: 11px; align-items: flex-start; font-size: var(--fs-micro); color: var(--c-text-soft); line-height: 1.55; }
.checkbox input { width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; accent-color: var(--c-accent); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
.honeypot { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; width: 0; }

.lead-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-1); }
/* Sticks once its top clears the sticky project bar, so the article scrolls past a
   form that stays put. align-self keeps it at its natural height instead of being
   stretched by the grid, which would stop sticky working at all.
   The height cap matters on short screens: a sticky card taller than the viewport
   puts its own submit button below the fold with no way to scroll to it, because
   the card no longer moves with the page. Capping it adds an inner scroll only when
   that would otherwise happen - on a normal desktop it never binds. */
.lead-card--sticky {
  position: sticky; top: 96px;
  max-height: calc(100vh - 116px); overflow-y: auto;
  overscroll-behavior: contain;
}
/* Tightened for the sidebar only. On a laptop with a bookmarks bar the content
   viewport is nearer 610px than 768px, and at the roomier sizes the submit button
   fell past the card's own scroll — reachable, but invisible, which reads as a
   broken form. Other pages keep the larger box. */
.lead-card--sticky { padding: 22px; }
.lead-card--sticky .textarea { min-height: 74px; }
.lead-card--sticky .adm-field, .lead-card--sticky .field { margin-bottom: 0; }
.lead-card__title { font-family: var(--font-display); font-size: 1.28rem; }
.lead-card__sub { font-size: var(--fs-small); color: var(--c-text-soft); margin-top: 7px; margin-bottom: 20px; }
.lead-card__trust { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: var(--fs-micro); color: var(--c-text-soft); }
.consent span { font-size: var(--fs-micro); color: var(--c-text-soft); line-height: 1.5; }
.consent__more {
  background: none; border: 0; padding: 0 0 0 4px; cursor: pointer;
  font: inherit; color: var(--c-accent-text); text-decoration: underline;
  text-underline-offset: 2px;
}
.consent__more:hover { color: var(--c-heading); }
/* Defined here rather than in the mobile block further up the file: this base rule
   would otherwise win on source order and the control would stay 17px on a phone. */
@media (max-width: 620px) { .consent__more { padding: 7px 5px; } }
.consent__full {
  margin-top: 8px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--c-bg-alt); border: 1px solid var(--c-border);
  font-size: var(--fs-micro); color: var(--c-text-soft); line-height: 1.55;
}
.form-note { font-size: var(--fs-micro); color: var(--c-text-soft); margin-top: 14px; }
.form-success { background: var(--c-support-soft); border: 1px solid var(--c-support); color: var(--c-support);
  border-radius: var(--r-md); padding: 18px 20px; font-size: var(--fs-small); }
.form-error { background: color-mix(in srgb, var(--c-error) 8%, transparent); border: 1px solid var(--c-error);
  color: var(--c-error); border-radius: var(--r-md); padding: 14px 18px; font-size: var(--fs-small); margin-bottom: 16px; }

/* band CTA */
.cta-band { background: var(--c-dark-bg); color: var(--c-on-dark); }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; padding-block: clamp(38px, 5vw, 62px); }
.cta-band h2 { color: var(--c-on-dark); max-width: 30ch; }
.cta-band p { color: var(--c-on-dark-soft); margin-top: 12px; max-width: 52ch; }

/* ------------------------------------------------------------------ sticky bars */
.sticky-bar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 95;
  background: color-mix(in srgb, var(--c-bg) 96%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-border);
  transform: translateY(-100%); transition: transform var(--dur) var(--ease);
  box-shadow: var(--shadow-1);
}
.sticky-bar.is-visible { transform: translateY(0); }
.sticky-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 66px; }
.sticky-bar__title { font-family: var(--font-display); font-size: 1.04rem; line-height: 1.2; }
.sticky-bar__price { font-size: var(--fs-small); color: var(--c-accent-text); font-weight: 600; }
.sticky-bar__actions { display: flex; gap: 10px; }
@media (max-width: 720px) { .sticky-bar__meta { display: none; } }

.mobile-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 96; display: none;
  grid-template-columns: repeat(3, 1fr); background: var(--c-surface); border-top: 1px solid var(--c-border); }
.mobile-actions a { padding: 13px 8px; text-align: center; font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .06em; text-transform: var(--label-transform); border-right: 1px solid var(--c-border); }
.mobile-actions a:last-child { border-right: 0; }
.mobile-actions a.is-primary { background: var(--c-ink); color: var(--c-on-dark); }
@media (max-width: 860px) { .mobile-actions { display: grid; } body { padding-bottom: 52px; } }

.wa-fab { position: fixed; right: 18px; bottom: 74px; z-index: 94; width: 52px; height: 52px; border-radius: var(--r-pill);
  background: var(--c-support); color: var(--c-support-on); display: grid; place-items: center; box-shadow: var(--shadow-2); }
@media (min-width: 861px) { .wa-fab { bottom: 24px; } }

/* ------------------------------------------------------------------ breadcrumbs / pager */
.crumbs { font-size: var(--fs-micro); color: var(--c-text-soft); padding-block: 16px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crumbs li::after { content: "/"; margin-left: 8px; opacity: .5; }
.crumbs li:last-child::after { display: none; }
.crumbs a:hover { color: var(--c-accent-text); }
.crumbs--onDark { color: var(--c-on-dark-soft); }

.pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; }
.pager a, .pager span { min-width: 42px; height: 42px; display: grid; place-items: center; padding-inline: 12px;
  border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: var(--fs-small); }
.pager a:hover { border-color: var(--c-accent); color: var(--c-accent-text); }
.pager .is-current { background: var(--c-ink); color: var(--c-on-dark); border-color: var(--c-ink); }
.pager .is-disabled { opacity: .4; pointer-events: none; }

/* ------------------------------------------------------------------ prose (article body) */
.prose { max-width: var(--measure); font-size: 1.04em; }
.prose > * + * { margin-top: 1.35em; }
.prose h2 { font-size: var(--fs-h2); margin-top: 2.1em; }
.prose h3 { font-size: var(--fs-h3); margin-top: 1.7em; }
.prose h4 { font-size: var(--fs-h4); margin-top: 1.5em; }
.prose p { color: var(--c-text); }
.prose a { color: var(--c-accent-text); border-bottom: 1px solid color-mix(in srgb, var(--c-accent) 45%, transparent); }
.prose a:hover { border-bottom-color: var(--c-accent); }
.prose ul, .prose ol { padding-left: 1.35em; display: grid; gap: .55em; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: 1.5em; }
.prose ul > li::before { content: ""; position: absolute; left: .35em; top: .68em; width: 6px; height: 6px;
  border: 1px solid var(--c-accent); transform: rotate(45deg); }
.prose ol { list-style: decimal; }
.prose ol > li::marker { color: var(--c-accent-text); font-family: var(--font-display); }
.prose blockquote { border-left: 2px solid var(--c-accent); padding: 6px 0 6px 24px; font-family: var(--font-display);
  font-size: 1.2em; line-height: 1.5; color: var(--c-heading); }
.prose figure { margin: 2em 0; }
.prose figcaption { font-size: var(--fs-micro); color: var(--c-text-soft); margin-top: 10px; text-align: center; }
.prose img { border-radius: var(--r-md); }
.prose code { background: var(--c-bg-alt); padding: .15em .4em; border-radius: var(--r-sm); font-size: .92em; }
.prose .table-wrap { margin: 2em 0; }
.callout { border: 1px solid var(--c-border); border-left: 2px solid var(--c-accent); background: var(--c-bg-alt);
  border-radius: 0 var(--r-md) var(--r-md) 0; padding: 18px 22px; font-size: var(--fs-small); }
.callout--warn { border-left-color: var(--c-warn); }
.callout--tip { border-left-color: var(--c-success); }
.callout__title { font-weight: 700; margin-bottom: 6px; color: var(--c-heading); }

/* TOC */
.toc { position: sticky; top: 96px; font-size: var(--fs-small); border-left: 1px solid var(--c-border); padding-left: 20px; }
.toc__title { font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--label-spacing);
  text-transform: var(--label-transform); color: var(--c-text-soft); margin-bottom: 14px; }
.toc ol { list-style: none; display: grid; gap: 9px; }
.toc a { color: var(--c-text-soft); }
.toc a:hover, .toc a.is-active { color: var(--c-accent-text); }
.toc .is-sub { padding-left: 14px; font-size: .95em; }

/* article meta */
.byline { display: flex; align-items: center; gap: 14px; font-size: var(--fs-small); color: var(--c-text-soft); }
.byline img { width: 44px; height: 44px; border-radius: var(--r-pill); object-fit: cover; }
.byline__name { color: var(--c-heading); font-weight: 600; }
.updated-badge { display: inline-flex; align-items: center; gap: .5em; font-size: var(--fs-micro);
  letter-spacing: var(--label-spacing); text-transform: var(--label-transform); color: var(--c-accent-text); }
.sources { font-size: var(--fs-small); color: var(--c-text-soft); }
.sources ol { padding-left: 1.4em; display: grid; gap: 8px; }
.author-card { display: flex; gap: 20px; padding: 24px; background: var(--c-bg-alt); border-radius: var(--r-md); }
.author-card img { width: 74px; height: 74px; border-radius: var(--r-pill); object-fit: cover; flex-shrink: 0; }

/* blog card */
.post-card { display: flex; flex-direction: column; gap: 14px; }
.post-card__cat { font-size: var(--fs-micro); letter-spacing: var(--label-spacing); text-transform: var(--label-transform); color: var(--c-accent-text); }
.post-card__title { font-family: var(--font-display); font-size: 1.22rem; line-height: 1.26; color: var(--c-heading); }
.post-card:hover .post-card__title { color: var(--c-accent-text); }
.post-card:hover .media__img { transform: scale(1.045); }
.post-card__meta { font-size: var(--fs-micro); color: var(--c-text-soft); display: flex; gap: 14px; }
.post-card--h { flex-direction: row; gap: 18px; align-items: center; }
.post-card--h .post-card__media { width: 132px; flex-shrink: 0; }

/* quote / testimonial */
.quote-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.quote-card__mark { font-family: var(--font-display); font-size: 2.6rem; line-height: .6; color: var(--c-accent); }
.quote-card__body { font-size: var(--fs-small); color: var(--c-text); }
.quote-card__foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 10px; }
.quote-card__avatar { width: 42px; height: 42px; border-radius: var(--r-pill); object-fit: cover; }
.quote-card__name { font-weight: 600; color: var(--c-heading); font-size: var(--fs-small); }
.quote-card__role { font-size: var(--fs-micro); color: var(--c-text-soft); }
.stars { color: var(--c-accent); letter-spacing: .15em; font-size: var(--fs-small); }

/* POI table + map facade */
.map-facade { position: relative; border-radius: var(--r-md); overflow: hidden; cursor: pointer; }
.map-facade__btn { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11,11,12,.34); border: 0; cursor: pointer; }
.map-facade__label { background: var(--c-surface); color: var(--c-heading); padding: 12px 22px; border-radius: var(--r-pill);
  font-size: var(--fs-small); font-weight: 600; box-shadow: var(--shadow-1); }
.video-facade { position: relative; border-radius: var(--r-md); overflow: hidden; }
.video-facade__play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11,11,12,.28); border: 0; cursor: pointer; }
.video-facade__play span { width: 68px; height: 68px; border-radius: var(--r-pill); background: var(--c-accent);
  color: var(--c-accent-on); display: grid; place-items: center; font-size: 1.3rem; }

/* filter bar */
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 16px; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-md); margin-bottom: 30px; }
.filters .select, .filters .input { min-height: 42px; width: auto; min-width: 140px; }
.filters__count { margin-left: auto; font-size: var(--fs-small); color: var(--c-text-soft); }

/* empty state */
.empty { text-align: center; padding: 60px 20px; border: 1px dashed var(--c-border); border-radius: var(--r-lg); }
.empty__title { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 10px; }

/* ------------------------------------------------------------------ footer */
.site-footer { background: var(--c-footer-bg); color: var(--c-on-dark); padding-top: clamp(48px, 6vw, 78px); }
.site-footer a { color: var(--c-on-dark-soft); }
.site-footer a:hover { color: var(--c-accent-light); }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 34px; padding-bottom: 44px; }
.footer__brand .wordmark { color: var(--c-on-dark); font-size: 1.5rem; }
.footer__about { font-size: var(--fs-small); color: var(--c-on-dark-soft); margin-top: 16px; max-width: 42ch; }
.footer__col h4 { font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--label-spacing); text-transform: var(--label-transform); color: var(--c-accent-light); margin-bottom: 16px; }
.footer__col ul { list-style: none; display: grid; gap: 10px; font-size: var(--fs-small); }
.footer__meta { border-top: 1px solid var(--c-hairline-dark); padding-block: 22px; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 16px; font-size: var(--fs-micro); color: var(--c-on-dark-soft); }
.footer__legal { border-top: 1px solid var(--c-hairline-dark); padding-block: 20px 28px; font-size: var(--fs-micro);
  color: color-mix(in srgb, var(--c-on-dark) 52%, transparent); line-height: 1.65; }
.footer__socials { display: flex; gap: 12px; }
.footer__socials a { width: 36px; height: 36px; border: 1px solid var(--c-hairline-dark); border-radius: var(--r-pill); display: grid; place-items: center; }
.footer__socials a:hover { border-color: var(--c-accent); }
@media (max-width: 1024px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .footer__top { grid-template-columns: minmax(0, 1fr); gap: 26px; } }

/* newsletter */
.subscribe { display: flex; gap: 10px; margin-top: 16px; }
.subscribe .input { background: transparent; border-color: var(--c-hairline-dark); color: var(--c-on-dark); }
.subscribe .input::placeholder { color: color-mix(in srgb, var(--c-on-dark) 50%, transparent); }

/* ------------------------------------------------------------------ motion */
.reveal { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 70ms; }
.reveal[data-delay="2"] { transition-delay: 140ms; }
.reveal[data-delay="3"] { transition-delay: 210ms; }
.reveal[data-delay="4"] { transition-delay: 280ms; }

/* ------------------------------------------------------------------ utilities */
.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-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--c-ink); color: var(--c-on-dark); padding: 12px 20px; }
.skip-link:focus { left: 12px; top: 12px; }
.no-scroll { overflow: hidden; }
.cv-auto { content-visibility: auto; contain-intrinsic-size: auto 600px; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 10px; } .mt-2 { margin-top: 20px; } .mt-3 { margin-top: 32px; } .mt-4 { margin-top: 48px; }
.mb-1 { margin-bottom: 10px; } .mb-2 { margin-bottom: 20px; } .mb-3 { margin-bottom: 32px; } .mb-4 { margin-bottom: 48px; }
.hide-mobile { }
@media (max-width: 720px) { .hide-mobile { display: none !important; } }
@media (min-width: 721px) { .only-mobile { display: none !important; } }

/* ------------------------------------------------------------------ a11y / motion / print */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .media__img { transform: none !important; }
}

/* ==========================================================================
   FIRST-SCREEN POLISH
   Everything here overrides a base rule defined earlier, so it lives at the end of
   the file on purpose. Four separate rules this week silently did nothing because
   they were written next to what they logically belonged with, above the thing they
   were meant to override.
   ========================================================================== */

/* ---- announcement bar ---- */
.announce__text { display: inline-flex; align-items: center; gap: 9px; }
.announce__ico { color: var(--c-accent); flex-shrink: 0; }
.announce__cta {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  color: var(--c-accent); font-weight: 600;
}
.announce__cta svg { transition: transform var(--dur) var(--ease); }
.announce__cta:hover svg { transform: translateX(3px); }

/* ---- hero headline accent ---- */
/* Its own line on wider screens so the accent reads as a deliberate second line
   rather than a stray coloured phrase mid-sentence. On a phone the headline wraps
   anyway, so it is left inline. */
.display__accent { color: var(--c-accent); }
@media (min-width: 721px) { .display__accent { display: block; } }

/* ---- hero: gold rule + iconed actions + search field ---- */
.hero__rule {
  display: block; width: 92px; height: 1px; margin-top: 22px;
  background: linear-gradient(90deg, var(--c-accent), transparent);
}
.hero__actions .btn svg { flex-shrink: 0; }
/* The magnifier sits inside the field, so the input loses its own background and
   the wrapper carries it instead. */
.searchbar__field { display: flex; align-items: center; gap: 10px; min-width: 0; }
.searchbar__field input { flex: 1 1 auto; min-width: 0; background: none; border: 0; padding: 0; color: inherit; font: inherit; }
.searchbar__field input::placeholder { color: var(--c-on-dark-soft); }
.searchbar__ico { color: var(--c-accent); flex-shrink: 0; }
.searchbar > .searchbar__field { padding: 15px 18px; background: color-mix(in srgb, var(--c-dark-bg) 82%, transparent); }

/* ---- trust strip ---- */
.trust__ico {
  width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center;
  color: var(--c-accent);
}
.trust__body { display: grid; gap: 3px; min-width: 0; }
.trust__num--long { font-family: var(--font-display); font-size: 1.16rem; line-height: 1.15; color: var(--c-heading); overflow-wrap: anywhere; }

/* ---- WhatsApp button + burger ---- */
.wa-fab { box-shadow: 0 0 0 2px var(--c-accent), var(--shadow-2); }
/* No display here on purpose. The burger is hidden by default and switched on only in
   the mobile breakpoint; setting display in this block turned it back on at every width
   and put a burger in the desktop header next to the full nav. */
.nav-toggle {
  width: 42px; height: 42px; border-radius: 50%; padding: 0;
  border: 1px solid var(--c-hairline-dark);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-solid .nav-toggle { border-color: var(--c-border); }
.nav-toggle:hover { border-color: var(--c-accent); }

/* ---- sticky action bar ---- */
.mobile-actions {
  background: color-mix(in srgb, var(--c-dark-bg) 96%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-hairline-dark);
}
.mobile-actions a {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  color: var(--c-on-dark); border-right-color: var(--c-hairline-dark); padding: 14px 6px;
}
.mobile-actions a svg { color: var(--c-accent); }
.mobile-actions a.is-primary {
  background: linear-gradient(140deg, var(--c-accent-light) 0%, var(--c-accent) 46%, var(--c-accent-dark) 100%);
  color: var(--c-accent-on);
}
.mobile-actions a.is-primary svg { color: var(--c-accent-on); }
/* One line, always. At 360px "Enquire Now" and its chevron wrapped, which took the bar
   from 49px to 68px — and the homepage first screen is sized against that height, so a
   wrapping label showed up as a 20px band of the next section. Below 380px the label
   loses a little size and letter-spacing rather than a second line. */
.mobile-actions a { white-space: nowrap; }
@media (max-width: 380px) {
  .mobile-actions a { font-size: 10.5px; letter-spacing: .04em; gap: 5px; padding-inline: 4px; }
}

@media (max-width: 720px) {
  /* Announcement wraps to two lines on a phone, so the CTA goes underneath rather
     than fighting the headline for the same row. */
  .announce__inner { flex-direction: column; gap: 4px; padding-block: 8px; }

  .hero__rule { margin-top: 16px; width: 76px; }
  .hero__actions .btn { gap: 7px; }

  /* Dark, two-up, hairline-divided — it reads as the closing band of the hero
     rather than the first band of the page below it. */
  .trust { background: var(--c-dark-bg); border-block-color: var(--c-hairline-dark); }
  .trust__inner {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    padding-block: 0;
  }
  /* Half a 375px screen leaves ~169px per cell. Padding, gap and icon are sized to
     leave the text ~116px, and the two longest strings — the registration number and
     "Partner Developers" — are sized to fit that without wrapping. Measured, not
     guessed: at the previous sizes three of the four overflowed their cell, which is
     worse than the wrapping it was meant to cure. */
  .trust__item {
    flex-direction: row; align-items: center; gap: 9px;
    padding: 17px 10px; border-bottom: 1px solid var(--c-hairline-dark);
  }
  .trust__item:nth-child(odd) { border-right: 1px solid var(--c-hairline-dark); }
  .trust__item:nth-last-child(-n+2) { border-bottom: 0; }
  .trust__ico { width: 24px; height: 24px; }
  .trust__ico svg { width: 20px; height: 20px; }
  .trust__num { font-size: 1.06rem; color: var(--c-on-dark); }
  .trust__num--long { font-size: .62rem; letter-spacing: 0; color: var(--c-on-dark); white-space: nowrap; }
  .trust__label { color: var(--c-on-dark-soft); font-size: 8.6px; letter-spacing: .07em; white-space: nowrap; }

  /* The first screen is the announcement bar + hero + trust strip, with the fixed action
     bar sitting over the bottom of it. Whatever the hero does not fill, the next section
     does — and that section is cream, so a band of white shows between the trust strip
     and the action bar. Rather than padding the headline by a fixed amount (which only
     lands on the one phone it was measured against), the hero absorbs the leftover: the
     three other pieces are width-driven, not height-driven, so subtracting them from the
     viewport height makes the trust strip finish exactly on the action bar at any height.

     svh, not dvh: svh is the height with the browser's URL bar showing, which is the
     state the page loads in. dvh re-measures as that bar hides on scroll, which would
     drag every section below the hero up and down while the visitor is reading.

     The trust strip and the action bar are the same height at every phone width, so those
     two are constants measured at 390px — re-measure if either is restyled. The
     announcement bar is not: its height follows the owner's text, so header.php overwrites
     --firstscreen-announce with the real value. The number here is only the pre-script
     fallback.

     Scoped to .hero--tall, which only the homepage uses. Developer, city and project pages
     share .hero but have no trust strip under it, so the arithmetic below means nothing
     there — on a plain .hero it just inflates the banner to most of the screen. */
  :root {
    --firstscreen-announce: 79px;
    --firstscreen-trust: 140px;
    /* The bar measures 49px, or 47px below 380px where the labels are set smaller. Two
       under the smaller figure on purpose: erring this way tucks the last few pixels of
       the trust strip behind the bar, where both are dark and nothing shows. Erring the
       other way leaves a white hairline, which is the thing being fixed. */
    --firstscreen-actions: 45px;
  }
  .hero--tall {
    min-height: calc(100vh  - var(--firstscreen-trust) - var(--firstscreen-actions));
    min-height: calc(100svh - var(--firstscreen-trust) - var(--firstscreen-actions));
  }
  body:has(.announce) .hero--tall {
    min-height: calc(100vh  - var(--firstscreen-announce) - var(--firstscreen-trust) - var(--firstscreen-actions));
    min-height: calc(100svh - var(--firstscreen-announce) - var(--firstscreen-trust) - var(--firstscreen-actions));
  }
  /* Bottom-weighted, so the slack the hero just absorbed opens up above the headline —
     which is what was asked for — instead of below the search bar. */
  .hero--tall .hero__inner { display: flex; flex-direction: column; justify-content: flex-end; }

  /* On a 640px-tall viewport — an ordinary Android phone once Chrome's own chrome is
     taken off — the headline, buttons and search bar plus the old fixed padding came to
     392px against 372px of room, so the trust strip slid under the action bar. The
     padding now scales with the viewport: it hits the old values on a tall phone, where
     the min-height above is doing the work anyway, and gives back the ~20px a short one
     needs. Below roughly 600px tall nothing will make it fit, and there the strip is
     clipped by the action bar rather than leaving the white band this all started with.
     Two classes, not one: .hero--tall .hero__inner is already set higher up the file, and
     a bare .hero__inner here would lose to it on specificity no matter where it sits. */
  .hero--tall .hero__inner { padding-block: clamp(26px, 7.2vh, 68px) clamp(18px, 4.6vh, 38px); }
}

/* An old 320px phone leaves each trust cell 88px of text and the registration number
   wants 105. Same treatment as at 375, one step further down; the alternative is a
   number spilling over its own divider. */
@media (max-width: 359px) {
  .trust__item { padding-inline: 8px; gap: 7px; }
  .trust__num--long { font-size: .54rem; }
  .trust__label { font-size: 7.8px; letter-spacing: .03em; }
}

@media print {
  .site-header, .site-footer, .sticky-bar, .mobile-actions, .wa-fab, .lead-card, .cta-band, .lightbox, .filters { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 12pt; }
  .card, .facts, .table-wrap { break-inside: avoid; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .prose { max-width: none; }
}