/* 24 Carat. Colours, type and sizes measured from the Website.zip SVG designs (1280 wide). */
@font-face { font-family: "League Spartan"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/league-spartan-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "League Spartan"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/league-spartan-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "League Spartan"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/league-spartan-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "League Spartan"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/league-spartan-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/josefin-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/josefin-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/josefin-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/josefin-sans-latin-700-normal.woff2) format("woff2"); }

/* All earlier rules sit in a lower layer, so the design system at the end always wins where it sets something. */
@layer legacy {
:root {
  --navy: #103d5e; --navy-2: #215981; --beige: #f5f5dc; --soft: #f8f8ec; --page: #f7f7e4; --gold: #dcb240; --tab: #e8e8ae; --ink: #040607; --ink-2: #181f22;
  --gold-grad: linear-gradient(135deg, #fce6ab 0%, #cfa23a 100%);
  --title-grad: linear-gradient(115deg, #103d5e 0%, #2b6c9a 40%, #030c13 100%);
  --serif: "League Spartan", system-ui, sans-serif; --jos: "Josefin Sans", system-ui, sans-serif; --ag: "Josefin Sans", system-ui, sans-serif; --spartan: "League Spartan", system-ui, sans-serif; --nave: "League Spartan", system-ui, sans-serif;
  --ease: cubic-bezier(.22, .8, .24, 1);
  /* 24 carat gold: a bright foil for dark backgrounds, a deeper foil that stays readable on cream */
  --foil-hi: linear-gradient(100deg, #c9a03a 0%, #f6e3a1 18%, #d6ad49 36%, #a87c16 54%, #f2d888 74%, #c9a03a 100%);
  --foil-dk: linear-gradient(100deg, #a8740a 0%, #c9971f 30%, #e0b443 50%, #c9971f 70%, #a8740a 100%);
  --foil-btn: linear-gradient(135deg, #f3dc98 0%, #dcb54f 50%, #cfa23a 100%);
}
@keyframes foil { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes sheen { from { translate: -120% 0; } to { translate: 260% 0; } }
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; font-synthesis: none; scroll-behavior: smooth; }
html.lenis { scroll-behavior: auto; }
@media (min-width: 1100px) { html { font-size: min(calc(100vw / 80), 22px); } }
body { margin: 0; background: var(--page); color: var(--navy); font: 400 1rem/1.35 var(--ag); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid #e0a500; outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; z-index: 100; left: 12px; top: -60px; padding: 10px 16px; background: #fff; border-radius: 8px; transition: top .2s; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }
h1, h2, h3 { text-wrap: balance; }
[id] { scroll-margin-top: 6.25rem; }

/* One continuous page colour: sections no longer read as separate bands */
.beige, .soft { background: transparent; }
.sec { position: relative; padding: 5rem 0; overflow: clip; }

/* Header */
.nav { position: fixed; z-index: 60; top: 1.125rem; left: 50%; translate: -50% 0; width: 62.5rem; height: 3.625rem; display: flex; align-items: center; padding: 0 1.375rem; background: var(--navy); border-radius: 0.625rem; box-shadow: 0 0.5rem 1.5rem rgba(16, 61, 94, .18); transition: top .3s var(--ease), box-shadow .3s; }
.nav.scrolled { top: 0.625rem; box-shadow: 0 0.75rem 1.875rem rgba(6, 26, 42, .32); }
.nav-logo img { width: 4.875rem; height: auto; }
.nav-links { flex: 1; display: flex; align-items: center; gap: 2.125rem; margin-left: 4rem; font-size: 0.9375rem; color: #fff; }
.nav-links > a:not(.nav-cta) { position: relative; padding: 0.375rem 0 0.25rem; }
.nav-links > a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #f3d98d; transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s var(--ease); }
.nav-links > a:hover::after, .nav-links > a[aria-current]::after { transform: scaleX(1); }
.nav-links > a[aria-current] { font-weight: 600; }
.btn-gold { display: inline-flex; align-items: center; gap: 0.625rem; height: 2.25rem; padding: 0.1875rem 1rem 0; border-radius: 0.5rem; background: var(--gold-grad); color: var(--navy); font: 400 0.9375rem/1 var(--jos); letter-spacing: 0; white-space: nowrap; transition: filter .2s, transform .2s; }
.btn-gold:hover { filter: brightness(1.08); transform: translateY(-1px); }
.nav-cta { margin-left: auto; }
.chev { width: 0.5rem; height: 0.8125rem; flex: none; margin-top: -0.125rem; }
.nav-toggle { display: none; }

/* Buttons */
.btn-navy, .btn-goldfill { white-space: nowrap; flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: 0.1875rem 2.125rem 0; border-radius: 0.625rem; font: 500 1rem/1.1 var(--jos); color: #fff; text-align: center; transition: translate .2s var(--ease), box-shadow .2s, background .2s; }
.btn-navy { background: var(--navy); } .btn-goldfill { background: var(--gold); }
.btn-navy:hover, .btn-goldfill:hover { translate: 0 -0.125rem; box-shadow: 0 0.75rem 1.5rem rgba(16, 61, 94, .24); }
.btn-navy:hover { background: #0c3049; } .btn-goldfill:hover { background: #cfa533; }
.btn-navy:active, .btn-goldfill:active { translate: none; }
.box-arrows { display: flex; gap: 1.0625rem; }
.box-arrow { width: 2.0625rem; height: 2.0625rem; display: grid; place-items: center; border: 0.125rem solid var(--navy); border-radius: 0.5625rem; color: var(--navy); transition: background .2s, color .2s; }
.box-arrow svg { width: 1.25rem; height: 1.25rem; }
.box-arrow.prev svg { transform: scaleX(-1); }
.box-arrow:hover { background: var(--navy); color: #fff; }
.box-arrows.light .box-arrow { border-color: #fff; color: #fff; }
.box-arrows.light .box-arrow:hover { background: #fff; color: var(--navy); }

/* ===== Gold layer ===== */
/* Reading progress */
.progress { position: fixed; z-index: 70; left: 0; top: 0; width: 100%; height: 3px; background: var(--foil-hi); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
/* Header and footer hairlines */
.foot-top::before { content: ""; position: absolute; left: 50%; top: 0; width: 22.5rem; max-width: 80%; height: 1px; translate: -50% 0; background: linear-gradient(90deg, transparent, #e2bd5a, transparent); }
.foot-social a:hover { color: #f1d68a; }
/* Accent words and big numbers in deep gold foil */
.hd .main b, .drawer .hd.md .main b { padding-right: .06em; background: var(--foil-dk); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hd.light .main b { background: var(--foil-hi); -webkit-background-clip: text; background-clip: text; }
html .num, html .acc-i.on .acc-n, html .why-n { background: var(--foil-dk); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Gold buttons: foil fill, navy text, a light sheen on hover */
html .btn-goldfill, html .btn-submit { background: var(--foil-btn); color: var(--navy); }
html .btn-goldfill:hover, html .btn-submit:hover { background: var(--foil-btn); filter: brightness(1.06) saturate(1.05); }
.btn-navy { box-shadow: inset 0 0 0 1px rgba(232, 198, 110, .38); }
.btn-gold, .btn-goldfill, .btn-navy, .btn-submit, .btn-wide { position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::after, .btn-goldfill::after, .btn-navy::after, .btn-submit::after, .btn-wide::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 249, 225, .5), transparent); translate: -120% 0; pointer-events: none; }
.btn-navy::after, .btn-wide::after { background: linear-gradient(100deg, transparent, rgba(241, 214, 138, .28), transparent); }
.btn-gold:hover::after, .btn-goldfill:hover::after, .btn-navy:hover::after, .btn-submit:hover::after, .btn-wide:hover::after { animation: sheen .8s var(--ease); }
/* Cursor glare on cards */
.qk-c::before, .why-c::after { content: ""; position: absolute; z-index: 3; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(243, 217, 141, .34), rgba(243, 217, 141, 0) 46%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.qk-c:hover::before, .why-c:hover::after { opacity: 1; }
/* Hero: gold foil title, an inner gold frame and drifting gold dust */
html .hero-h { background: var(--foil-hi); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 9s linear infinite; filter: drop-shadow(0 2px 14px rgba(8, 24, 44, .35)); }
.hero-pill { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 7px 13px 6px; border-radius: 40px; background: rgba(8, 24, 44, .32); border: 1px solid rgba(243, 217, 141, .42); font: 500 12px/1 var(--jos); letter-spacing: .02em; color: #fff; }
.hero-pill i { width: 7px; height: 7px; border-radius: 50%; background: #f1d68a; box-shadow: 0 0 0 3px rgba(241, 214, 138, .22); }
.hero-dust { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (min-width: 1100px) {
  .hero-stage { box-shadow: 0 0 0 1px rgba(220, 178, 64, .55), 0 1.875rem 3.75rem rgba(16, 61, 94, .16); }
  .hero-stage::after { content: ""; position: absolute; z-index: 1; inset: 0.875rem; border: 1px solid rgba(243, 217, 141, .4); border-radius: 0.625rem; pointer-events: none; }
}
@media (max-width: 1099px) { .hero-dust { bottom: auto; height: 120vw; } }

/* Gold leaves in the open spaces of a page, swaying gently */
.cyc::after, .why-k::after, .giri::before, .why-hero::after, .feat-l::after, .da-short::after { content: ""; position: absolute; z-index: 0; width: 7.5rem; height: 7.5rem; background: url(../img/leaves.svg) center / contain no-repeat; opacity: .55; pointer-events: none; transform-origin: 50% 100%; animation: leafSway 5.5s ease-in-out infinite alternate; }
.cyc::after { right: 6.875rem; top: 26%; width: 10.625rem; height: 10.625rem; }
.why-k::after { right: 4.375rem; top: 2.5rem; }
.giri::before { left: 6.25rem; top: 5.625rem; animation-delay: -2s; }
.why-hero::after { right: 5.625rem; top: 6.875rem; width: 8.125rem; height: 8.125rem; }
.feat-l { position: relative; }
.feat-l::after { right: 0.625rem; top: 0.375rem; width: 6.25rem; height: 6.25rem; animation-delay: -3s; }
.da-short::after { left: 6.875rem; top: 1.25rem; width: 6.25rem; height: 6.25rem; animation-delay: -1s; }
@keyframes leafSway { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
@media (max-width: 640px) { .cyc::after { right: 14px; top: 44px; width: 76px; height: 76px; } .why-k::after { right: 12px; top: 28px; width: 60px; height: 60px; } .why-hero::after { right: 10px; top: 84px; width: 56px; height: 56px; } }

/* Headings */
.hd { font-family: var(--serif); font-weight: 400; color: var(--navy); font-variant-numeric: lining-nums; }
.hd .pre, .hd .main { display: block; }
.hd .main { font-style: italic; }
.hd .main b { font-weight: 700; }
.hd.xl .pre { font-size: 2.875rem; letter-spacing: -.032em; line-height: 1.1; }
.hd.xl .main { font-size: 4.75rem; letter-spacing: -.032em; line-height: 1.08; }
.hd.lg .pre { font-size: 2.5rem; letter-spacing: -.032em; line-height: 1.12; }
.hd.lg .main { font-size: 4.0625rem; letter-spacing: -.032em; line-height: 1.08; }
.hd.md .pre { font-size: 2.0625rem; letter-spacing: -.032em; line-height: 1.15; color: var(--ink-2); }
.hd.md .main { font-size: 3.4375rem; letter-spacing: -.032em; line-height: 1.1; font-weight: 700; }
.hd.center { text-align: center; }
.hd.center .pre { color: var(--navy); }
.hd.light, .hd.light .pre { color: #fff; }
.serif-t { font: 600 3.125rem/1.12 var(--serif); letter-spacing: -.032em; text-align: center; color: var(--navy); font-variant-numeric: lining-nums; }
.nave { font: 400 3.875rem/1.13 var(--nave); letter-spacing: -.04em; color: var(--navy); }
.grad-t { font: 700 5.25rem/1.02 var(--spartan); letter-spacing: -.035em; background: var(--title-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .1em; }
.grad-t.big { font-size: 4.75rem; }
.body { font: 400 1rem/1.38 var(--ag); letter-spacing: 0; color: var(--navy); }
.lead { margin-top: 1rem; max-width: 38.75rem; font: 400 1rem/1.3 var(--jos); letter-spacing: 0; }
.center-p { max-width: 45rem; margin: 0.875rem auto 0; text-align: center; font: 400 1rem/1.38 var(--ag); letter-spacing: 0; color: var(--navy); }
.center-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.625rem; }
.num { font: 600 5.375rem/1 var(--ag); letter-spacing: -.04em; background: linear-gradient(120deg, #2b6c9a, #103d5e); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Hero */
.hero { position: relative; height: 67.5rem; overflow: clip; background: #4a6f9c; isolation: isolate; }
.hero-bg { position: absolute; left: -18%; top: -21.25rem; width: 136%; z-index: -2; aspect-ratio: 2630 / 2529; will-change: transform; transform-origin: 50% 40%; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 26.25rem; background: linear-gradient(0deg, var(--page) 0%, rgba(247, 247, 228, .92) 16%, rgba(247, 247, 228, 0) 100%); }
.hero-txt { position: absolute; z-index: 2; left: 50%; top: 5.875rem; translate: -50% 0; width: 65rem; text-align: center; color: #fff; }
.eyebrow { font: 500 0.875rem/1 var(--jos); letter-spacing: .24em; }
.hero-h { margin-top: 0.125rem; font: 700 5.5rem/1.02 var(--spartan); letter-spacing: -.04em; background: linear-gradient(180deg, #ffd45e 30%, #c9a030 110%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .05em; }
.hero-strong { font: 500 1.1875rem/1.2 var(--jos); letter-spacing: 0; }
.hero-p { max-width: 50rem; margin: 0.25rem auto 0; font: 400 1rem/1.25 var(--jos); letter-spacing: 0; }
.hero-btns { display: flex; justify-content: center; gap: 0.75rem; margin-top: 0.75rem; }
.hero-btns a { min-height: 2.75rem; padding-inline: 1.625rem; }
.qk { position: absolute; left: 50%; top: 43.75rem; perspective: 1100px; translate: -50% 0; width: 67.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9375rem; }
.qk-c { position: relative; display: flex; flex-direction: column; height: 19.9375rem; overflow: hidden; background: var(--beige); border-radius: 0.625rem; transition: box-shadow .35s; transform-style: preserve-3d; will-change: transform; }
.qk-c:hover, .qk-c:focus-visible { box-shadow: 0 1.875rem 3.375rem rgba(16, 61, 94, .32); }
.qk-c::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.1875rem; background: var(--gold-grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease); }
.qk-c:hover::after, .qk-c:focus-visible::after { transform: scaleX(1); }
.qk-c:focus-visible .qk-i img { transform: scale(1.06); }
.qk-t { display: flex; justify-content: space-between; gap: 0.75rem; padding: 1.125rem 1.25rem 0.75rem 1.75rem; font-family: var(--jos); }
.qk-t b { display: block; font-weight: 400; font-size: 1.25rem; letter-spacing: 0; color: var(--navy); }
.qk-t small { display: block; margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.2; letter-spacing: 0; color: var(--navy); }
.dot { flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; transition: transform .35s var(--ease), background .25s, color .25s; }
.dot svg { width: 1.375rem; height: 1.375rem; }
.qk-c:hover .dot, .qk-c:focus-visible .dot { transform: rotate(-45deg) scale(1.12); background: var(--gold); color: var(--navy); }
.qk-i { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.qk-i img { position: absolute; transition: transform .6s var(--ease); will-change: transform; }
.qk-i.cover img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qk-i.tw img { left: -8%; top: 0; width: 132%; height: auto; }
.qk-i.iso img { left: 4%; top: 0; width: 96%; height: auto; }
.qk-i.home img { left: 2%; top: 0; width: 100%; height: auto; }

/* Key figures under the hero */
.stats { padding: 3.5rem 0 0.5rem; }
.st-grid { width: 70rem; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(16, 61, 94, .14); }
.st-grid li { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem 1.5rem 0.375rem; border-left: 1px solid rgba(16, 61, 94, .14); }
.st-grid li:first-child { border-left: 0; padding-left: 0; }
.st-grid b { font: 600 2.5rem/1 var(--ag); letter-spacing: -.03em; color: var(--navy); font-variant-numeric: lining-nums; }
.st-grid em { margin-left: 0.25rem; font: 600 1.1875rem/1 var(--serif); font-style: normal; color: #8a6a10; }
.st-grid li > span { font: 400 0.9375rem/1.3 var(--jos); color: #4b5d68; }
.arch-stat { margin-top: 0.875rem; font: 600 0.9375rem/1 var(--jos); letter-spacing: .08em; color: #8a6a10; }

/* Amenity levels in 3D */
.lvls { width: 68.75rem; margin: 2.5rem auto 0.625rem; display: grid; grid-template-columns: minmax(0, 1fr) 26.875rem; gap: 2.5rem; align-items: center; }
.lv-stage { position: relative; height: 37.5rem; perspective: 1700px; }
/* Each plate carries the whole tilt itself, so Safari keeps the stack instead of flattening it */
.lv-rot { position: absolute; left: 50%; top: 60%; width: 18.75rem; height: 25rem; margin: -12.5rem 0 0 -9.375rem; }
.lv { position: absolute; inset: 0; padding: 0.625rem; background: #fbf8ee; border-radius: 0.875rem; box-shadow: 0 0 0 1px rgba(190, 150, 50, .35), 0 1.875rem 3.125rem rgba(16, 61, 94, .22); transform: perspective(1700px) rotateX(58deg) rotateZ(-34deg) translateZ(calc(var(--k) * var(--spread, 1) * 8.75rem + var(--lift, 0rem))); transition: transform .55s var(--ease), box-shadow .4s, opacity .4s; }
.lv img { width: 100%; height: 100%; object-fit: contain; }
.lv.on { --lift: 1.625rem; box-shadow: 0 0 0 2px var(--gold), 0 2.5rem 3.75rem rgba(16, 61, 94, .32); }
.lvls:has(.lv.on) .lv:not(.on) { opacity: .92; }
.lv-list { display: grid; gap: 0.625rem; counter-reset: lv; }
.lv-list li { position: relative; padding: 1.125rem 1.25rem 1rem; border-radius: 0.75rem; background: #fff; box-shadow: 0 0.375rem 1.125rem rgba(16, 61, 94, .06); transition: box-shadow .3s, translate .3s var(--ease); }
.lv-list li::before { content: ""; position: absolute; left: 0; top: 1rem; bottom: 1rem; width: 0.1875rem; border-radius: 0.1875rem; background: var(--gold-grad); transform: scaleY(0); transition: transform .35s var(--ease); }
.lv-list li.on { box-shadow: 0 1rem 2rem rgba(16, 61, 94, .14); translate: -0.375rem 0; }
.lv-list li.on::before { transform: scaleY(1); }
.lv-b { display: grid; gap: 0.25rem; width: 100%; text-align: left; }
.lv-n { font: 600 0.8125rem/1 var(--jos); letter-spacing: .16em; text-transform: uppercase; color: #8a6a10; }
.lv-t { font: 700 1.625rem/1.1 var(--serif); font-style: italic; color: var(--navy); }
.lv-d { font: 400 0.9375rem/1.4 var(--ag); color: var(--navy); }
.lv-z { position: absolute; right: 1rem; top: 0.875rem; min-height: 2rem; padding: 0.125rem 0.75rem 0; border-radius: 0.5rem; font: 500 0.8125rem/1 var(--jos); color: var(--navy); box-shadow: inset 0 0 0 1px rgba(16, 61, 94, .2); transition: background .2s, color .2s; }
.lv-z:hover { background: var(--navy); color: #fff; }

/* Film and video */
.film-sec { padding: 3.25rem 0 4.25rem; }
.split-head { width: 70rem; margin: 0 auto 2.5rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.875rem; }
.video { position: relative; display: block; width: 70rem; height: 41.25rem; margin: 0 auto; border-radius: 0.625rem; overflow: hidden; }
.video img { width: 100%; height: 100%; object-fit: cover; }
.film-sec .video img { width: 114%; height: 114%; max-width: none; transform-origin: 0 0; }
.play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 3.75rem; height: 3.75rem; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #17181b; transition: transform .25s var(--ease); }
.play svg { width: 1.75rem; height: 1.75rem; margin-left: 0.1875rem; }
.video:hover .play, .aerial:hover .play { transform: scale(1.14); }

/* Giridhari */
.giri { text-align: center; padding: 7.75rem 0 6rem; }
.giri-logo { width: 36.25rem; height: auto; margin: 0 auto; }
.giri-h { font-size: 3.5rem; margin-top: 0.5rem; }
.giri-p { max-width: 49.375rem; margin: 1rem auto 0; font: 400 1.25rem/1.3 var(--jos); letter-spacing: 0; color: #000; }
.giri-m { margin-top: 2.25rem; font: 600 1.75rem/1.1 var(--jos); letter-spacing: 0; color: #000; }

/* Picture + thumbnails */
.show { display: grid; grid-template-columns: 37.875rem 29.625rem; gap: 1.875rem; justify-content: center; padding: 5rem 0; }
.show-main { height: 40.875rem; border-radius: 0.375rem; overflow: hidden; }
.show.alt .show-main { height: 35rem; border-radius: 0.625rem; }
.show-main img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s; }
.show-side { display: flex; flex-direction: column; padding-top: 1.5rem; }
.show-side .body { margin-top: 0.625rem; }
.show-bar { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.show-lab { font: 400 1.5625rem/1.1 var(--jos); letter-spacing: 0; }
.thumbs { display: grid; grid-template-columns: repeat(3, 9.375rem); gap: 0.75rem; margin-top: 2.375rem; }
.thumbs button { height: 9.375rem; border-radius: 0.625rem; overflow: hidden; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.thumbs button:hover img { transform: scale(1.07); }

/* Split band above the map */
.band-split { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; padding: 3.5rem 5rem; }
.band-split > div { max-width: 50rem; }
.band-split .body { margin-top: 0.625rem; max-width: 42.5rem; }
.band-split .btn-goldfill { flex: none; }

/* Map: fades into the page at top and bottom */
.map { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.map::-webkit-scrollbar { display: none; }
.map-in { position: relative; aspect-ratio: 1280 / 800; min-width: 720px; container-type: inline-size; }
.map-in > img:first-child { width: 100%; height: 100%; }
.m-l { position: absolute; font: 500 1.875cqw/1.03 var(--ag); letter-spacing: 0; color: var(--navy); white-space: nowrap; }
.m-l.sm { font-size: 1.41cqw; text-align: center; }
.m-l.c { text-align: center; }
.m-l.wide { font-weight: 600; font-size: 1.41cqw; letter-spacing: .36em; }
.m-p { position: absolute; width: 2.34cqw; height: 2.34cqw; margin: -1.17cqw 0 0 -1.17cqw; border-radius: 50%; background: #ee9d06; box-shadow: 0 0 0 .14cqw #fde1a0; }
.m-p::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #f7b526; opacity: 0; animation: pinBlink 2.4s ease-out infinite; animation-delay: var(--d, 0s); pointer-events: none; }
@keyframes pinBlink { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(3.1); } }
.m-p.home { z-index: 2; width: 2.7cqw; height: 2.7cqw; margin: -1.35cqw 0 0 -1.35cqw; background: linear-gradient(135deg, #fce6ab, #b58a2a); box-shadow: 0 0 0 .34cqw #fff, 0 .5cqw 1.4cqw rgba(8, 32, 52, .45); }
.m-p.home::after { display: none; }
.m-tag { position: absolute; z-index: 2; translate: -50% calc(-100% - 2.5cqw); }
.m-tag::after { content: ""; position: absolute; left: 50%; top: 100%; margin: -1px 0 0 -.75cqw; border: .75cqw solid transparent; border-bottom: 0; border-top-color: #0c2f4a; }
.m-logo { display: block; width: 12.6cqw; max-width: none; height: auto; padding: .85cqw 1.3cqw; background: linear-gradient(150deg, #1a5280 0%, #0c2f4a 100%); border-radius: .8cqw; box-shadow: 0 .8cqw 2.4cqw rgba(8, 32, 52, .42); }
/* 24 Carat on the map: rings grow from small to big, one after the other */
.m-r { position: absolute; width: 13cqw; height: 13cqw; margin: -6.5cqw 0 0 -6.5cqw; border-radius: 50%; border: .16cqw solid rgba(190, 150, 50, .85); background: radial-gradient(circle, rgba(220, 178, 64, .42) 0%, rgba(220, 178, 64, .16) 72%); opacity: 0; transform: scale(.14); animation: mapRing 3s cubic-bezier(.2, .6, .35, 1) infinite; pointer-events: none; }
.m-r.b { animation-delay: 1.5s; }
@keyframes mapRing { 0% { opacity: .95; transform: scale(.14); } 80% { opacity: .18; } 100% { opacity: 0; transform: scale(1); } }
@supports not (width: 1cqw) {
  .m-l { font-size: max(1.875vw, 13px); } .m-l.sm, .m-l.wide { font-size: max(1.41vw, 10px); }
  .m-p { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
  .m-logo { width: max(12.6vw, 90px); }
  .m-r { width: 130px; height: 130px; margin: -65px 0 0 -65px; }
}

/* Enquiry */
.enquiry { position: relative; min-height: 50rem; padding: 6.25rem 6.25rem 13.4375rem; overflow: clip; isolation: isolate; }
/* Full width; the pale sky melts into the page at the top, the road keeps a short soft edge */
.enq-bg { position: absolute; inset: 0; z-index: -1; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 95%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 95%, transparent 100%); }
.enq-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 100%; }
.enq-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(247, 244, 226, .94) 0%, rgba(247, 244, 226, .7) 20%, rgba(247, 244, 226, 0) 42%); pointer-events: none; }
.enq-text { max-width: 32.5rem; margin-top: 0.5rem; font: 400 1rem/1.28 var(--jos); letter-spacing: 0; color: var(--navy); }
.form { width: 23.75rem; margin-top: 1.625rem; display: grid; gap: 0.75rem; }
.field { position: relative; }
.field input, .field select { width: 100%; height: 2.75rem; padding: 0.125rem 2.75rem 0 0.875rem; border: 1px solid transparent; border-radius: 0; background: #fff; font: 400 0.875rem/1 var(--ag); letter-spacing: 0; color: #171f22; appearance: none; outline-offset: 0; transition: border-color .2s; }
.field input::placeholder { color: #171f22; opacity: 1; }
.field input:focus, .field select:focus { border-color: var(--gold); outline: 2px solid var(--gold); }
.field > img { position: absolute; right: 0.75rem; top: 0.75rem; width: 1.25rem; height: 1.25rem; object-fit: contain; pointer-events: none; }
.field.select::after { content: ""; position: absolute; right: 1rem; top: 0.9375rem; width: 0.5rem; height: 0.5rem; border-right: 2px solid #b48a1e; border-bottom: 2px solid #b48a1e; transform: rotate(45deg); pointer-events: none; }
.field.bad input, .field.bad select { border-color: #b3261e; }
.err { margin-top: 0.25rem; font-size: 0.8125rem; color: #a31f18; }
.btn-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 2.75rem; padding: 0 0.875rem; background: var(--gold); color: #fff; font: 500 0.875rem/1 var(--ag); letter-spacing: 0; transition: background .2s; }
.btn-submit:hover { background: #cfa533; }
.btn-submit .chev { width: 0.4375rem; height: 0.75rem; }
.form-msg { padding: 0.625rem 0.75rem; font-size: 0.875rem; line-height: 1.3; }
.form-msg.ok { background: #fff; color: #125c33; }
.form-msg.bad { background: #fff; color: #a31f18; }
.form-msg.wa { background: #fff; color: var(--navy); }
.btn-wa { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; margin-top: 0.5rem; background: var(--navy); color: #fff; font: 500 0.875rem/1 var(--ag); border-radius: 0.25rem; transition: background .2s; }
.btn-wa:hover { background: #0c3049; }
.btn-submit:disabled { opacity: .7; cursor: wait; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Contact box */
.contact { padding: 7.375rem 0 5rem; }
.ct-box { position: relative; width: 58.125rem; height: 23.75rem; margin: 0 auto; }
.ct-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ct-l { position: absolute; left: -2.4375rem; top: 4.125rem; width: 26.25rem; }
.ct-r { position: absolute; left: 26.5625rem; top: 4.4375rem; width: 29.375rem; display: grid; grid-template-columns: 15rem 1fr; column-gap: 0.375rem; }
.ct-col img { width: auto; height: 3.4375rem; margin-bottom: 0.5rem; }
.ct-col h3 { font: 700 1.125rem/1.1 var(--jos); letter-spacing: 0; color: var(--ink); margin-bottom: 0.25rem; }
.ct-col p { font: 500 0.9375rem/1.65 var(--jos); letter-spacing: 0; color: #000; }
.ct-col a:hover { color: var(--navy); text-decoration: underline; }
.btn-wide { grid-column: 1 / -1; margin-top: 1.375rem; display: flex; align-items: center; justify-content: space-between; height: 2.75rem; padding: 0.125rem 1rem 0; border-radius: 0.625rem; background: var(--navy); color: #fff; font: 500 1.125rem/1 var(--ag); transition: background .2s; }
.btn-wide:hover { background: #0c3049; }

/* Footer */
.foot { margin: 0 1.25rem 1.1875rem; border-radius: 1.875rem 1.875rem 0 0; background: var(--navy); color: #fff; overflow: hidden; }
.foot-top { position: relative; padding: 1.375rem 0 2.125rem; text-align: center; }
.foot-logo { width: 9.25rem; height: auto; margin: 0 auto; }
.foot-links { display: grid; grid-template-columns: repeat(5, 10.625rem); justify-content: center; gap: 1rem 0; margin-top: 1.5rem; font: 400 1rem/1 var(--jos); letter-spacing: .02em; }
.foot-links a { transition: color .2s; }
.foot-links a:hover { color: #f3d98d; }
.to-top { position: absolute; right: 1.875rem; top: 1.625rem; width: 3rem; height: 3rem; min-width: 44px; min-height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-grad); color: var(--navy); transition: translate .2s var(--ease), box-shadow .2s; }
.to-top svg { width: 1.375rem; height: 1.375rem; min-width: 20px; min-height: 20px; }
.to-top:hover { translate: 0 -0.1875rem; box-shadow: 0 0.625rem 1.375rem rgba(0, 0, 0, .3); }
.foot-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 6.875rem; padding: 0 3.125rem; background: var(--navy-2); border-radius: 1.25rem 1.25rem 0 0; }
.foot-giri { width: 7rem; height: auto; filter: brightness(0) invert(1); }
.foot-bar p { font: 400 0.75rem/1 var(--ag); }
.foot-social { justify-self: end; }
.foot-social span { display: block; margin-bottom: 0.625rem; font: 600 0.75rem/1 var(--jos); }
.foot-social div { display: flex; gap: 1.375rem; }
.foot-social a { display: block; width: 1.5rem; height: 1.5rem; transition: transform .2s; }
.foot-social a:hover { transform: translateY(-0.125rem); }

/* Lightbox and film */
.lb { width: min(1200px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: 12px; background: #fff; overflow: visible; }
.lb::backdrop { background: rgba(4, 16, 28, .82); }
.lb-in { max-height: 92vh; overflow: auto; overscroll-behavior: contain; border-radius: 12px; }
.lb-in img { width: 100%; height: auto; }
.lb-in iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.lb-x { position: absolute; z-index: 2; right: -6px; top: -6px; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 26px; line-height: 1; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }

/* Enquiry panel: slides in from the right */
.drawer { position: fixed; inset: 0 0 0 auto; width: min(26.25rem, 460px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--page); color: var(--navy); overflow: hidden; box-shadow: -1.5rem 0 3.75rem rgba(4, 16, 28, .35); }
.drawer:focus { outline: none; }
.drawer[open] { animation: drawerIn .5s var(--ease) both; }
.drawer.closing { animation: drawerOut .34s cubic-bezier(.5, 0, .75, 0) both; }
.drawer::backdrop { background: rgba(4, 16, 28, .58); backdrop-filter: blur(3px); animation: drawerFade .4s ease both; }
.drawer.closing::backdrop { animation: drawerFade .34s ease reverse both; }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes drawerOut { from { transform: none; } to { transform: translateX(100%); } }
@keyframes drawerFade { from { opacity: 0; } to { opacity: 1; } }
/* The picture gives up height first, so the whole form stays on screen without a scrollbar on normal windows */
.drawer-scroll { display: flex; flex-direction: column; height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.drawer-art { position: relative; flex: 1 1 13.125rem; min-height: 0; overflow: hidden; background: #e8eef0; }
.drawer-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 85% 42%; }
.drawer-in { flex: none; padding: 1.375rem 1.75rem 1.625rem; }
.drawer-in > * { animation: drawerRise .55s var(--ease) both; }
.drawer-in > :nth-child(1) { animation-delay: .14s; } .drawer-in > :nth-child(2) { animation-delay: .2s; } .drawer-in > :nth-child(3) { animation-delay: .26s; }
@keyframes drawerRise { from { opacity: 0; transform: translateY(1.125rem); } to { opacity: 1; transform: none; } }
.drawer-text { margin-top: 0.5rem; font: 400 1rem/1.3 var(--jos); letter-spacing: 0; }
.drawer .hd.md .main { font-size: 2.625rem; font-weight: 400; }
.drawer .hd.md .main b { font-weight: 700; }
.drawer .hd.md .pre { font-size: 1.75rem; color: var(--navy); }
.drawer .form { width: 100%; margin-top: 1.125rem; gap: 0.625rem; }
.drawer .field input, .drawer .field select { border-color: rgba(16, 61, 94, .14); }
.drawer-x { position: absolute; z-index: 3; right: 0.875rem; top: 0.875rem; width: 2.5rem; height: 2.5rem; min-width: 44px; min-height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; font-size: 1.5rem; line-height: 1; box-shadow: 0 0.375rem 1rem rgba(4, 16, 28, .3); transition: background .2s, rotate .3s var(--ease); }
.drawer-x:hover { background: #0c3049; rotate: 90deg; }
@media (max-height: 640px) {
  .drawer-art { display: none; }
  .drawer-in { padding-top: 1.25rem; padding-right: 72px; }
  .drawer .form { margin-right: -40px; width: calc(100% + 40px); }
}
@media (max-width: 640px) {
  .drawer { width: 100vw; }
  .drawer-x { right: 12px; top: 12px; }
  .drawer-art { flex-basis: 170px; }
  .drawer-in { padding: 20px 16px 24px; }
  .drawer .hd.md .main { font-size: 36px; } .drawer .hd.md .pre { font-size: 24px; }
}
@media (max-width: 640px) and (max-height: 640px) {
  .drawer-in { padding-right: 16px; }
  .drawer .hd { padding-right: 52px; }
  .drawer .form { margin-right: 0; width: 100%; }
}

/* Page heroes */
.page-hero { position: relative; overflow: clip; }
.page-hero.center { text-align: center; }
.hero-sub { font: 400 1rem/1.28 var(--jos); letter-spacing: 0; color: var(--navy); }
.page-hero.center .hero-sub { max-width: 56.25rem; margin: 0.875rem auto 0; }

/* Homes */
.unit { padding: 10rem 0 5rem; }
.ptabs { position: relative; width: 32.25rem; margin: 3.625rem auto 0; padding-left: 10.75rem; display: grid; grid-template-columns: 7.3125rem 14.1875rem; height: 5.625rem; }
.ptabs { grid-template-columns: 1fr 1fr; }
.ptabs-img { position: absolute; left: 0; bottom: 0; width: 10.75rem; height: 7.875rem; object-fit: cover; border-radius: 0.625rem; z-index: 2; }
.ptab { position: relative; background: #fff; text-align: left; padding: 0.625rem 0.5rem 0 1rem; border-radius: 0 0.625rem 0 0; transition: background .25s; }
.ptab:first-of-type { border-radius: 0; padding-left: 1rem; }
.ptab[aria-selected="true"] { background: var(--tab); }
.pn { display: block; font: 400 1.5rem/1 var(--ag); color: #181f22; }
.pn b { font: 600 3.5rem/1 var(--jos); letter-spacing: -.03em; }
.ptab small { display: block; margin-top: -0.25rem; font-size: 0.875rem; line-height: 1.1; color: #181f22; }
.psizes { position: relative; z-index: 3; width: 54.75rem; min-height: 5.625rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-around; background: #fff; border-radius: 0.625rem; box-shadow: 0 0.625rem 1.625rem rgba(16, 61, 94, .08); }
.psize { position: relative; padding: 0.5rem 0.25rem 0.625rem; font: 400 1.5rem/1 var(--ag); letter-spacing: 0; color: #181f22; }
.psize em { font: 600 1rem/1 var(--serif); font-style: normal; }
.psize::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.125rem; background: var(--tab); transform: scaleX(0); transition: transform .25s var(--ease); }
.psize:hover::after, .psize[aria-selected="true"]::after { transform: scaleX(1); }
.psize[aria-selected="true"] { font-weight: 700; }
.pview { width: 70rem; margin: 2.75rem auto 0; display: grid; grid-template-columns: 15.8125rem 35.125rem 1fr; column-gap: 1.125rem; align-items: center; }
.pkey img { width: 15.8125rem; height: auto; }
.pbox { min-width: 0; display: grid; justify-items: center; gap: 0.875rem; }
.pmode { display: inline-flex; padding: 0.25rem; background: #fff; border-radius: 0.625rem; box-shadow: 0 0.375rem 1.125rem rgba(16, 61, 94, .08); }
.pm { min-height: 2.5rem; padding: 0.125rem 1.25rem 0; border-radius: 0.4375rem; font: 500 0.9375rem/1 var(--jos); color: var(--navy); transition: background .2s, color .2s; }
.pm:hover { background: rgba(232, 232, 174, .55); }
.pm[aria-pressed="true"] { background: var(--navy); color: #fff; }
.pstage { width: 100%; cursor: zoom-in; }
.pstage img { width: 100%; height: auto; }
.pstage [data-plan-3d] { width: 88%; margin: 0 auto; filter: drop-shadow(0 1rem 1.125rem rgba(16, 61, 94, .18)); transition: filter .3s; }
.pstage:hover [data-plan-3d] { filter: drop-shadow(0 1.375rem 1.5rem rgba(16, 61, 94, .26)); }
.pangles { display: flex; justify-content: center; gap: 0.625rem; }
.pa { width: 4.5rem; height: 4.5rem; min-width: 44px; min-height: 44px; padding: 0.1875rem; background: #fff; border-radius: 0.625rem; box-shadow: inset 0 0 0 1px rgba(16, 61, 94, .12); transition: translate .2s var(--ease), box-shadow .2s; }
.pa img { width: 100%; height: 100%; object-fit: contain; }
.pa:hover { translate: 0 -0.125rem; box-shadow: inset 0 0 0 1px var(--navy); }
.pa[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--gold); }
.pfacts { display: grid; gap: 2.75rem; padding-left: 5rem; }
.pfacts > div { position: relative; }
.pfacts > div::before { content: ""; position: absolute; left: -3.375rem; top: 1rem; width: 1.875rem; border-top: 1px dashed var(--navy); }
.pfacts b { display: block; font: 700 2rem/1.1 var(--ag); letter-spacing: 0; white-space: nowrap; }
.pfacts em { font: 600 1.5rem/1 var(--serif); font-style: normal; }
.pfacts p { font-size: 1rem; color: #55636c; }
.pcta { margin-top: 1.625rem; display: flex; justify-content: center; }
.pill { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.625rem; padding: 0 1.125rem; border-radius: 0.5rem; background: #fff; font: 500 0.875rem/1 var(--ag); color: #1a2024; box-shadow: 0 0.375rem 1.125rem rgba(16, 61, 94, .08); transition: transform .2s, box-shadow .2s; }
.pill:hover { transform: translateY(-0.125rem); box-shadow: 0 0.625rem 1.375rem rgba(16, 61, 94, .16); }
.pill img { width: 1.25rem; height: 1.25rem; object-fit: contain; }
.arch { padding: 4rem 0 3.625rem; text-align: center; }
.arch-h { max-width: 55rem; margin: 0 auto; font-size: 3.5rem; }
.fly { position: absolute; right: 7.375rem; top: 3.625rem; width: 10.75rem; height: auto; opacity: .55; pointer-events: none; }
.master { padding: 3.375rem 0 4.375rem; }
.mp-grid { width: 68.125rem; margin: 2.25rem auto 0; display: grid; grid-template-columns: 33.75rem 1fr; gap: 3.125rem; align-items: center; }
.mp-img { display: block; width: 100%; cursor: zoom-in; }
.mp-img img { width: 100%; height: auto; }
.mp-lh { font: 600 2.125rem/1.1 var(--serif); font-style: italic; letter-spacing: -.02em; }
.mp-list { margin: 1.125rem 0 1.75rem; display: grid; grid-template-rows: repeat(10, auto); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.6875rem 1.375rem; }
.mp-list li { display: flex; align-items: center; gap: 0.625rem; font: 400 0.9375rem/1.15 var(--ag); letter-spacing: 0; }
.mp-list b { flex: none; width: 1.625rem; height: 1.625rem; display: grid; place-items: center; border-radius: 50%; background: #a4342a; color: #fff; font: 600 0.75rem/1 var(--ag); letter-spacing: 0; }
.club { padding: 3.125rem 0 4rem; }
.ftabs { width: 54.75rem; height: 4.375rem; margin: 1.75rem auto 0; display: flex; align-items: center; justify-content: space-around; background: #fff; border-radius: 0.625rem; box-shadow: 0 0.625rem 1.625rem rgba(16, 61, 94, .1); }
.ftab { position: relative; padding: 0.375rem 0.375rem 0.5rem; font: 600 1rem/1 var(--serif); color: var(--navy); }
.ftab b { font: 400 1.5rem/1 var(--ag); letter-spacing: 0; }
.ftab[aria-selected="true"] b { font-weight: 600; }
.ftab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.125rem; background: var(--tab); transform: scaleX(0); transition: transform .25s var(--ease); }
.ftab[aria-selected="true"]::after { transform: scaleX(1); }
.club-grid { width: 67.5rem; margin: 3.5rem auto 0; display: grid; grid-template-columns: 27.3125rem 1fr; gap: 4rem; align-items: center; }
.club-plan { height: 35rem; padding: 0.75rem; background: #f3eedb; border-radius: 1.3125rem; box-shadow: 0 0 0 1px rgba(190, 150, 50, .25); }
.club-plan button { width: 100%; height: 100%; cursor: zoom-in; }
.club-plan img { width: 100%; height: 100%; object-fit: contain; }
.club-area { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.125rem 0.5rem; color: var(--navy); }
.club-area b { font: 700 2.625rem/1 var(--ag); letter-spacing: -.03em; }
.club-area em { font: 600 1.375rem/1 var(--serif); font-style: normal; }
.club-area span { font: 400 1.0625rem/1 var(--jos); letter-spacing: 0; margin-left: 0.25rem; }
.club-side .club-area { margin-bottom: 1.625rem; }
.ca-txt .club-area { margin-top: 1.125rem; }
.club-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.375rem 0.875rem; margin-bottom: 1.875rem; }
.club-feats li { display: flex; flex-direction: column; align-items: center; gap: 0.5625rem; text-align: center; }
.club-feats i { width: 4.125rem; height: 4.125rem; display: grid; place-items: center; border-radius: 50%; background: #f3ebd0; box-shadow: inset 0 0 0 1px rgba(190, 150, 50, .28); transition: background .25s, translate .25s var(--ease); }
.club-feats li:hover i { background: #ece1bd; translate: 0 -0.1875rem; }
.club-feats i img, .club-feats i svg { width: 2.75rem; height: 2.75rem; object-fit: contain; }
.club-feats b { font: 600 0.875rem/1.18 var(--ag); letter-spacing: 0; }

/* Amenities */
.am-hero { padding: 10.625rem 0 3.625rem; }
.am-hero .grad-t { padding-inline: 2.5rem; }
.cue { display: inline-block; margin-top: 1rem; padding-bottom: 0.1875rem; font: 500 1rem/1 var(--jos); border-bottom: 1px solid var(--gold); }
.drift { position: relative; height: 20rem; margin-top: 2.375rem; width: 93.75rem; left: calc(50% - 46.875rem); will-change: transform; }
.drift figure { position: absolute; border-radius: 0.375rem; overflow: hidden; }
.drift img { width: 100%; height: 100%; object-fit: cover; }
.d-a { left: 1.3125rem; top: 2.125rem; width: 20.625rem; height: 13.125rem; } .d-b { left: 23.8125rem; top: 7rem; width: 15.625rem; height: 13rem; } .d-c { left: 41.3125rem; top: 0; width: 15.625rem; height: 19.375rem; } .d-d { left: 58.8125rem; top: 2rem; width: 15.875rem; height: 13.25rem; } .d-e { left: 76.5625rem; top: 0; width: 15.875rem; height: 19.375rem; }
.feat { display: grid; grid-template-columns: 28.25rem 35rem; column-gap: 4.25rem; justify-content: center; }
.feat-l { display: flex; flex-direction: column; padding-top: 0.75rem; }
.feat-l .hd { margin-top: 0.875rem; }
.feat-l .body { margin-top: 0.875rem; color: var(--ink); }
.feat-s { margin-top: auto; height: 19.5625rem; border-radius: 0.375rem; overflow: hidden; }
.feat-b { height: 43.625rem; border-radius: 0.375rem; overflow: hidden; }
.feat figure img, .ca-img img, .sp-img img { width: 100%; height: 100%; object-fit: cover; }
.feat.rev .feat-b { order: -1; height: 35rem; }
.feat.rev { grid-template-columns: 35rem 28.25rem; }
@media (min-width: 1100px) { #badminton { align-items: center; } #badminton .feat-b { height: 22.875rem; } }
.feat.rev .feat-l { justify-content: center; }
.club-am { padding: 3.875rem 0 5rem; }
.grad-t.big.center-t { max-width: 62.5rem; margin-inline: auto; text-align: center; font-size: 4.125rem; }
.da-p { max-width: 47.5rem; }
.da-short { padding: 2.5rem 0 0; }

/* Why 24 Carat */
.why-hero { padding: 8.125rem 0 0; }
.why-eye { margin-bottom: 0.625rem; font: 600 0.9375rem/1 var(--jos); letter-spacing: .24em; color: #8a6a10; }
.why-pic { width: 70rem; height: 40rem; margin: 2.25rem auto 0; border-radius: 0.625rem; overflow: hidden; background: #0b3a76; }
.why-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
.why-list { padding: 3.5rem 0 5rem; }
.why-grid { width: 70rem; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.why-c { position: relative; padding: 1.375rem 1.375rem 1.5rem; overflow: hidden; background: #fff; border-radius: 0.625rem; box-shadow: 0 0.375rem 1.125rem rgba(16, 61, 94, .06); transition: translate .25s var(--ease), box-shadow .25s; }
.why-c::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.1875rem; background: var(--gold-grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease); }
.why-c:hover { translate: 0 -0.25rem; box-shadow: 0 1rem 1.875rem rgba(16, 61, 94, .14); }
.why-c:hover::before { transform: scaleX(1); }
.why-n { display: block; font: 600 2.375rem/1 var(--ag); letter-spacing: 0; background: linear-gradient(120deg, #2b6c9a, #103d5e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.why-c h2 { margin-top: 0.75rem; font: 700 1.4375rem/1.12 var(--serif); font-variant-numeric: lining-nums; letter-spacing: -.02em; color: var(--navy); }
.why-c p { margin-top: 0.5rem; font: 400 0.9375rem/1.36 var(--ag); letter-spacing: 0; color: var(--navy); }
.ca-grid { width: 69.75rem; margin: 2.75rem auto 0; display: grid; grid-template-columns: 33.75rem 32.25rem; gap: 3.75rem; align-items: center; }
.ca-img { height: 40.25rem; border-radius: 0.375rem; overflow: hidden; }
.ca-txt .hd { margin-top: 0.875rem; }
.ca-txt .body { margin-top: 0.875rem; }
.nlist { margin-top: 2.5rem; display: grid; gap: 1.75rem; font: 700 1.875rem/1.1 var(--serif); letter-spacing: -.03em; }
.nlist li { display: flex; gap: 1.625rem; align-items: baseline; }
.nlist b { font: 600 1.75rem/1 var(--ag); }
.th-wrap { padding: 0 1.25rem; }
.theatre { position: relative; height: 54.6875rem; border-radius: 1rem; overflow: clip; background: #080c16; }
.th-img { position: absolute; left: 0; right: 0; top: 0; height: 46.875rem; overflow: hidden; display: block; }
.th-img img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.theatre::after { content: ""; position: absolute; left: 0; right: 0; top: 27rem; height: 20rem; background: linear-gradient(180deg, rgba(8, 12, 22, 0) 0%, #080c16 92%); }
.th-txt { position: absolute; z-index: 2; left: 6.25rem; bottom: 5.625rem; }
.feat figure, .ca-img { will-change: transform; }

/* Neighbourhood */
.nb-hero { padding: 10.625rem 0 1.875rem; }
.nb-hero .grad-t { max-width: 70rem; margin: 0 auto; }
.fan { position: relative; height: 32.75rem; margin-top: 2.5rem; }
.fan figure { position: absolute; overflow: hidden; border-radius: 0.375rem; will-change: transform; }
.fan img { width: 100%; height: 100%; object-fit: cover; }
.f-c { z-index: 2; left: 50%; margin-left: -11.6875rem; top: 0; width: 23.375rem; height: 30.5625rem; }
.f-l, .f-r { top: 8.5625rem; width: 16.125rem; height: 21.6875rem; left: 50%; }
.f-l { margin-left: -21.1875rem; transform: rotate(-25deg); }
.f-r { margin-left: 5.0625rem; transform: rotate(25deg); }
button.aerial { position: relative; display: block; width: calc(100% - 2.5rem); height: 45rem; margin: 0 1.25rem; border-radius: 1rem; overflow: clip; }
.aerial .th-img { inset: 0; height: 100%; position: absolute; }
.green { padding: 3.75rem 0 4rem; }
.green .main b { font-weight: 700; }
.frames { position: relative; width: 70rem; margin: 2.875rem auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; }
.frame { padding: 0.6875rem; background: #fff; box-shadow: 0 0.625rem 1.625rem rgba(16, 61, 94, .14); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame.a, .frame.c { height: 17.5rem; } .frame.b { height: 26.25rem; margin-top: 3.5rem; }
.why-nb { width: 68.75rem; margin: 0 auto; padding: 3.5rem 0 2.5rem; display: grid; grid-template-columns: 21.25rem 1fr; gap: 3.125rem; align-items: center; overflow: visible; }
.wn-p { font: 400 1.25rem/1.45 var(--jos); letter-spacing: 0; color: var(--navy); }
/* Same 1100 wide column as the distances below, so the cyclist and heading line up with them */
.cyc { display: flex; align-items: center; gap: 4rem; width: 68.75rem; margin: 0 auto; padding: 3.125rem 0 1.625rem; overflow: visible; }
.cyc-l { max-width: 42.5rem; }
.cyc-l .grad-t { font-size: 4.75rem; }
.cyc-l .body { margin-top: 0.5rem; font: 400 1rem/1.3 var(--jos); letter-spacing: 0; color: var(--ink); }
.cyc-img { width: 20.1875rem; height: auto; flex: none; }
.route { padding: 4.5rem 0 6rem; }
.route-top { width: 68.75rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.route-h { font: 500 2.0625rem/1.15 var(--serif); font-style: italic; letter-spacing: -.03em; }
.tl { position: relative; width: 68.75rem; height: 15.625rem; margin: 3.75rem auto 0; }
.tl-line { position: absolute; left: 0.875rem; right: 0.6875rem; top: 7.75rem; border-top: 1px dashed var(--navy); }
.tl-fill { position: absolute; left: 0; top: -0.125rem; height: 0.1875rem; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; }
.tl-dot { position: absolute; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: linear-gradient(135deg, #e5c678, #b58a2a); box-shadow: 0 0 0 0 rgba(220, 178, 64, .5); transition: box-shadow .35s; }
.tl-dot.on { box-shadow: 0 0 0 0.375rem rgba(220, 178, 64, .28); }
.tl > .tl-dot { left: 0.25rem; top: 7.125rem; }
.tl-car { position: absolute; z-index: 3; left: 0.375rem; top: 5.9375rem; width: 8.125rem; height: auto; will-change: transform; }
.route-eye { margin-bottom: 0.375rem; font: 600 0.9375rem/1 var(--jos); letter-spacing: .14em; text-transform: uppercase; color: #8a6a10; }
.tl-stops { position: absolute; inset: 0; }
.tl-stops li { position: absolute; top: 0; width: 11.25rem; height: 100%; }
.tl-stops li:nth-child(1) { left: 10.625rem; } .tl-stops li:nth-child(2) { left: 21.875rem; } .tl-stops li:nth-child(3) { left: 33.125rem; } .tl-stops li:nth-child(4) { left: 44.375rem; } .tl-stops li:nth-child(5) { left: 55.625rem; } .tl-stops li:nth-child(6) { left: 66.75rem; }
.tl-stops .tl-dot { left: 0; top: 7.125rem; }
.tl-v { position: absolute; left: -2rem; top: 1.375rem; font: 400 0.875rem/1 var(--ag); letter-spacing: 0; white-space: nowrap; }
.tl-v b { font: 500 4.125rem/1 var(--ag); letter-spacing: -.02em; }
.tl-n { position: absolute; left: -2rem; top: 12rem; width: 10.625rem; font: 600 1.25rem/1.08 var(--ag); letter-spacing: 0; }
.tl-stops li:nth-child(6) .tl-v { left: -3.125rem; }
.tl-stops li:nth-child(6) .tl-n { left: -3.125rem; width: 10.3125rem; }
.tl-note { width: 68.75rem; margin: 1.625rem auto 0; font-size: 0.9375rem; }
.why-k { padding: 4rem 5.5rem 5rem; }
.wk-cols { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.25rem; }
.wk-cols h3 { font: 700 2rem/1.1 var(--serif); font-style: italic; letter-spacing: -.03em; }
.wk-cols p { margin-top: 0.875rem; max-width: 19.375rem; font: 400 1rem/1.38 var(--ag); letter-spacing: 0; }

/* Specifications */
/* Text centred beside the tower, so there is no empty block under the button */
.sp-hero { display: grid; grid-template-columns: minmax(0, 1fr) 35rem; align-items: center; gap: 1.875rem; padding: 6.875rem 0 0.625rem 4.75rem; }
.sp-l { width: 42.5rem; position: relative; z-index: 2; }
.sp-l .grad-t { font-size: 6rem; }
.sp-l .hero-sub { margin: 1.25rem 0 1.625rem; color: var(--ink); max-width: 38.75rem; }
.sp-tower { position: relative; width: 35rem; height: auto; }
.finishes { padding: 2.5rem 0 5rem; }
.sp-grid { width: 67.5rem; margin: 4.125rem auto 0; display: grid; grid-template-columns: 36.125rem 1fr; gap: 3.125rem; align-items: center; }
.building .sp-grid { margin-top: 0; grid-template-columns: 1fr 36.125rem; }
.sp-img { position: relative; height: 40rem; border-radius: 0.625rem; overflow: hidden; background: #dfe4dc; }
.sp-img img { position: absolute; inset: 0; opacity: 0; transform: scale(1.05); transition: opacity .55s ease, transform 1.1s var(--ease); }
.sp-img img.on { opacity: 1; transform: none; }
.sp-img figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 3.75rem 1.625rem 1.25rem; background: linear-gradient(180deg, rgba(4, 16, 28, 0), rgba(4, 16, 28, .68)); color: #fff; font: 500 1.1875rem/1.1 var(--jos); letter-spacing: 0; }
.acc-i { position: relative; padding: 1rem 0 1rem 1.375rem; }
.acc-i::before { content: ""; position: absolute; left: 0; top: 1rem; bottom: 1rem; width: 0.1875rem; border-radius: 0.1875rem; background: var(--gold-grad); transform: scaleY(0); transform-origin: 50% 0; transition: transform .4s var(--ease); }
.acc-i:hover::before { transform: scaleY(.45); }
.acc-i.on::before { transform: scaleY(1); }
.acc-h { display: flex; align-items: baseline; gap: 1.625rem; width: 100%; text-align: left; }
.acc-t { transition: font-size .3s var(--ease), translate .25s var(--ease), color .2s; }
.acc-i:not(.on) .acc-h:hover .acc-t { translate: 0.5rem 0; }
.acc-n { font: 600 1.875rem/1 var(--ag); letter-spacing: 0; transition: font-size .3s var(--ease); }
.acc-t { font: 700 1.875rem/1.1 var(--serif); letter-spacing: -.03em; }
.acc-h:hover .acc-t { color: #2b6c9a; }
.acc-i.on .acc-h { flex-direction: column; gap: 0.5rem; }
.acc-i.on .acc-n { font-size: 5.375rem; letter-spacing: -.04em; background: linear-gradient(120deg, #2b6c9a, #103d5e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.acc-i.on .acc-t { font-size: 3.125rem; font-style: italic; }
.acc-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.acc-i.on .acc-b { grid-template-rows: 1fr; }
.acc-b > div { overflow: hidden; }
.bul { padding-top: 0.875rem; display: grid; gap: 0.625rem; }
.bul li { position: relative; padding-left: 1rem; font: 400 1rem/1.3 var(--ag); letter-spacing: 0; transition: translate .25s var(--ease), color .2s; }
.bul li::before { content: ""; position: absolute; left: 0.0625rem; top: .5em; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: var(--navy); transition: background .2s, scale .25s var(--ease); }
.bul li:hover, .bul li.cur { translate: 0.375rem 0; color: #2b6c9a; }
.bul li:hover::before, .bul li.cur::before { background: var(--gold); scale: 1.8; }
.acc.measure, .acc.measure * { transition: none !important; }
.acc-p { padding-top: 0.75rem; max-width: 27.5rem; font: 400 1rem/1.38 var(--ag); letter-spacing: 0; }
.build-h { padding: 2.5rem 2.5rem 0; text-align: center; }
.build-h .grad-t { font-size: 4rem; }
.building { padding: 3rem 0 4.375rem; }
.rera { width: 67.5rem; margin: 2.875rem auto 0; font-size: 1rem; text-align: center; }

/* Media */
.md-hero { height: 50rem; display: flex; align-items: center; padding-left: 10.625rem; }
.md-l { width: 28.125rem; position: relative; z-index: 2; padding-top: 3.75rem; }
.md-l .grad-t { font-size: 4.125rem; text-wrap: wrap; }
.md-l .hero-sub { margin-top: 1rem; }
.cats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.cats a { display: block; padding: 0.5rem 0.875rem 0.3125rem; background: #fff; border-radius: 0.5rem; font: 500 0.875rem/1.2 var(--jos); transition: background .2s, color .2s; }
.cats a:hover { background: var(--navy); color: #fff; }
.md-cols { position: absolute; left: 41.5rem; top: 0; bottom: 0; display: flex; gap: 1.25rem; }
.md-col { width: 15.625rem; display: grid; gap: 1.25rem; align-content: start; will-change: transform; }
.md-col img { width: 15.625rem; border-radius: 0.375rem; object-fit: cover; }
.md-col.a { margin-top: 5.625rem; } .md-col.a img { height: 13.125rem; }
.md-col.b { margin-top: -6.5625rem; } .md-col.b img { height: 19.375rem; }
.walk { padding: 4.375rem 0 5rem; }
.walk .video { margin-top: 2.125rem; }
.gallery { padding: 2.75rem 0 6.875rem; }
.gl-grid { width: 70rem; margin: 2.5rem auto 0; display: grid; grid-template-columns: 50.5rem 18.875rem; gap: 0.625rem; }
.gl-main { position: relative; height: 36.875rem; border-radius: 0.625rem; overflow: hidden; }
.gl-open { width: 100%; height: 100%; cursor: zoom-in; }
.gl-open img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.gl-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 4.375rem 1.625rem 1.625rem 1.875rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #fff; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .66)); pointer-events: none; }
.gl-bar .box-arrows { pointer-events: auto; justify-self: end; }
.gl-bar p { font: 500 1.25rem/1 var(--jos); letter-spacing: 0; }
.gl-dots { display: flex; align-items: center; gap: 0.5rem; }
.gl-dots i { width: 0.375rem; height: 0.375rem; border-radius: 0.375rem; background: rgba(255, 255, 255, .7); transition: width .25s; }
.gl-dots i.on { width: 1.25rem; background: #fff; }
.gl-side { display: grid; grid-template-rows: repeat(3, 11.875rem); gap: 0.625rem; }
.gl-side button { position: relative; overflow: hidden; border-radius: 0.625rem; color: #fff; font: 500 1rem/1 var(--jos); letter-spacing: 0; }
.gl-side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gl-side button:hover img { transform: scale(1.06); }
.gl-side button::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .78)); }
.gl-side span { position: absolute; z-index: 2; bottom: 0.8125rem; left: 0.75rem; }
.gl-side span + span { left: auto; right: 0.75rem; }

/* Laptop and desktop hero, as in the Website.zip design: full-width sky, the tower in the middle,
   the gold title and lines above it, three large cards over the lower floors, fading into cream */
@media (min-width: 1100px) {
  .hero-stage { display: contents; }
  .hero-stage::before, .hero-stage::after { content: none; }
  .hero { height: 81.875rem; }
  .hero::after { height: 35rem; background: linear-gradient(0deg, var(--page) 0%, var(--page) 30%, rgba(247, 247, 228, .75) 45%, rgba(247, 247, 228, 0) 62%); }
  /* A warm light behind the tower so it stands out from the sky */
  .hero-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 30% 34% at 50% 52%, rgba(255, 214, 140, .22), rgba(255, 214, 140, 0) 100%); mix-blend-mode: screen; pointer-events: none; }
  .hero-txt { top: 8.75rem; }
  .hero-h { font-size: 5.5rem; }
  .hero-side { margin-top: 0.5rem; text-shadow: 0 1px 10px rgba(9, 28, 58, .45); }
  .hero-strong { font: 500 1.25rem/1.2 var(--jos); letter-spacing: 0; }
  .hero-p { max-width: 51.25rem; margin: 0.25rem auto 0; font: 400 0.9375rem/1.35 var(--jos); letter-spacing: 0; }
  /* Smaller building, set higher, just under the lines; the cards sit below its gate so nothing covers it */
  .hero-bg { left: 0; width: 100%; top: -10.625rem; }
  .qk { top: 60.5rem; width: 67.5rem; }
}
@media (max-width: 1099px) { .hero-stage { display: contents; } .hero-side { margin-top: 2px; } }

/* Hero picture without the trees: the sky stays, the lower sides fade away, and only the tower column continues down to its gate */
.hero-bg img { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 61%), linear-gradient(90deg, transparent 31.900%, #000 32.300%, #000 67.200%, transparent 67.600%); mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 61%), linear-gradient(90deg, transparent 31.900%, #000 32.300%, #000 67.200%, transparent 67.600%); }
/* The sky carries on down behind the tower in the photo's own colours, then melts into cream near the cards */
@media (min-width: 1100px) { .hero { background: linear-gradient(180deg, #526c8e 0%, #6f7e95 30%, #7b8698 38%, #9aa1ab 50%, #c8c6c2 64%, #e9e5d6 76%, var(--page) 86%); } }

/* Hero cards: a soft cream spreads out in a circle from the arrow until it fills the card; the cut-out picture stays on top */
@property --qr { syntax: "<length>"; inherits: false; initial-value: 0px; }
.qk-c { --qr: 0px; background: radial-gradient(circle at var(--qx, calc(100% - 2.375rem)) var(--qy, 2.375rem), #fbf3dc 0, #f3e6c4 var(--qr), rgba(243, 230, 196, 0) calc(var(--qr) + 1px)), #fff; transition: --qr .7s var(--ease), box-shadow .35s; }
.qk-c:hover, .qk-c:focus-visible { --qr: 900px; }
.qk-c:hover .dot, .qk-c:focus-visible .dot { background: var(--gold-grad); color: var(--navy); }

/* ===== Tablet ===== */
@media (max-width: 1099px) {
  .sec { padding: 56px 0; }
  .nav { top: 10px; width: calc(100% - 24px); height: 56px; padding: 0 10px 0 14px; justify-content: space-between; }
  .nav.scrolled { top: 6px; }
  .nav-logo img { width: 68px; }
  .nav-toggle { display: grid; gap: 5px; width: 44px; height: 44px; place-content: center; }
  .nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s, opacity .2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-links { position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin-left: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 18px 18px; background: var(--navy); border-radius: 10px; box-shadow: 0 18px 34px rgba(6, 26, 42, .3); display: none; }
  .nav-links.open { display: flex; }
  .nav-links > a:not(.nav-cta) { padding: 14px 2px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .nav-links > a:not(.nav-cta)::after { display: none; }
  .nav-cta { margin: 14px 0 0; height: 48px; justify-content: center; }

  /* Text, then the whole tower, then the cards: each follows the one before, so they never overlap the building */
  .hero { display: flex; flex-direction: column; height: auto; padding-bottom: 28px; background: linear-gradient(#436a9b, #436a9b) top / 100% 320px no-repeat; }
  .hero-txt { order: 1; }
  .hero-bg { order: 2; }
  .qk { order: 3; }
  .hero-txt { position: relative; left: auto; top: auto; translate: none; width: auto; padding: 100px 24px 0; }
  .hero-h { font-size: clamp(38px, 7.6vw, 62px); }
  .hero-strong { font-size: 18px; margin-top: 4px; }
  .hero-p { font-size: 16px; line-height: 1.32; letter-spacing: -.03em; }
  .hero-btns a { min-height: 48px; }
  .hero-bg { position: relative; left: -15%; top: auto; flex: none; width: 130%; margin-top: -46vw; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 90%, transparent 100%); }
  .hero-bg img { object-position: 50% 0; }
  .qk { position: relative; left: auto; top: auto; translate: none; width: auto; margin: -7vw 24px 0; }
  .qk-c { height: 300px; }
  .hero::after { display: none; }

  .split-head, .video, .pview, .gl-grid, .club-grid, .ca-grid, .sp-grid, .route-top, .tl-note, .rera { width: auto; margin-inline: 24px; }
  .video { height: auto; aspect-ratio: 16 / 10; }
  .giri-logo { width: 62%; }
  .giri-h, .giri-p, .giri-m { padding-inline: 24px; }
  .giri-h { font-size: 40px; }
  .show { grid-template-columns: minmax(0, 1fr); padding-inline: 24px; }
  .show-main, .show.alt .show-main { height: auto; aspect-ratio: 4 / 3; }
  .show-bar { margin-top: 28px; }
  .thumbs { grid-template-columns: repeat(3, 1fr); margin-top: 18px; }
  .thumbs button { height: auto; aspect-ratio: 1; }
  .band-split { padding: 44px 24px; }
  .enquiry { padding: 60px 24px 80vw; min-height: 0; }
  .enq-bg { inset: auto 0 0 0; height: 88vw; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 95%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 95%, transparent 100%); }
  .enq-bg::after { display: none; }
  .stats { padding: 36px 0 0; }
  .st-grid { width: auto; margin-inline: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-grid li { padding: 18px 16px 14px; border-top: 1px solid rgba(16, 61, 94, .14); }
  .st-grid li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .st-grid li:nth-child(-n+2) { border-top: 0; }
  .st-grid b { font-size: 26px; } .st-grid em { display: inline-block; font-size: 15px; white-space: nowrap; } .st-grid li > span { font-size: 14px; }
  .lvls { width: auto; margin-inline: 24px; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lv-stage { height: 400px; }
  .lv-rot { top: 64%; }
  .lv-rot { width: 220px; height: 296px; margin: -148px 0 0 -110px; }
  .lv { transform: perspective(1200px) rotateX(58deg) rotateZ(-34deg) translateZ(calc(var(--k) * var(--spread, 1) * 100px + var(--lift, 0px))); padding: 7px; }
  .lv-list li { padding: 16px 16px 14px; }
  .lv-t { font-size: 24px; } .lv-d { font-size: 15px; } .lv-n { font-size: 12px; }
  .lv-z { min-height: 40px; font-size: 13px; }
  .form { width: min(100%, 520px); }
  .field input, .field select, .btn-submit { height: 48px; font-size: 16px; }
  .field > img { top: 14px; }
  .field.select::after { top: 17px; }
  .contact { padding: 60px 24px; }
  .ct-box { width: auto; height: auto; padding: 40px 28px; border: 2px solid #d6aa3a; border-radius: 36px 40px 0 0; }
  .ct-frame { display: none; }
  .ct-l, .ct-r { position: static; width: auto; }
  .ct-r { margin-top: 26px; grid-template-columns: 1fr 1fr; gap: 20px; }
  .btn-wide { min-height: 48px; }
  .foot { margin: 0 12px 12px; }
  .foot-links { grid-template-columns: repeat(5, auto); gap: 2px 18px; }
  .foot-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 6px; }
  .to-top { right: 14px; top: 14px; }
  .foot-social a { display: grid; place-items: center; width: 44px; height: 44px; }
  .foot-social a svg { width: 24px; height: 24px; }
  .foot-social div { gap: 4px; }
  .ct-col a { display: inline-block; padding: 12px 0; margin: -6px 0; }
  .cue { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .nav-logo { display: flex; align-items: center; min-height: 44px; }
  .foot-bar { height: auto; padding: 22px; gap: 14px; }

  .unit { padding-top: 110px; }
  .serif-t, .center-p { padding-inline: 24px; }
  .ptabs { width: min(100% - 48px, 620px); padding-left: 0; height: auto; }
  .ptabs-img { display: none; }
  .ptab { padding: 14px 16px 12px; border-radius: 0; min-height: 80px; }
  .psizes { width: min(100% - 48px, 620px); flex-wrap: wrap; padding: 8px; gap: 2px; }
  .psize { padding: 12px 8px; min-height: 44px; }
  .pview { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pkey { order: 3; display: none; }
  .pm { min-height: 44px; }
  .pstage [data-plan-3d] { width: min(100%, 560px); }
  .pa { width: 68px; height: 68px; }
  .pfacts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-left: 0; }
  .pfacts > div::before { display: none; }
  .pill { min-height: 48px; }
  .fly { right: 14px; top: 10px; width: 76px; }
  .arch { padding: 72px 24px 48px; }
  .arch-h { font-size: 40px; }
  .mp-grid { width: auto; margin-inline: 24px; grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .mp-img { width: min(100%, 560px); margin: 0 auto; }
  .mp-side .btn-navy { min-height: 48px; }
  .mp-list li { font-size: 15px; }
  .mp-list b { width: 26px; height: 26px; font-size: 12px; }
  .club-feats i { width: 66px; height: 66px; }
  .club-feats i img, .club-feats i svg { width: 44px; height: 44px; }
  .club-feats b { font-size: 14px; }
  .pm { padding-inline: 18px; }
  .ftabs { width: min(100% - 48px, 620px); }
  .ftab { min-height: 44px; padding: 12px; }
  .club-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .club-plan { height: 70vw; max-height: 560px; }

  .am-hero, .nb-hero { padding-top: 110px; }
  .am-hero .hero-sub, .nb-hero .hero-sub { padding-inline: 24px; }
  .grad-t.big { font-size: clamp(38px, 7.4vw, 60px); padding-inline: 24px; }
  .feat, .feat.rev { grid-template-columns: minmax(0, 1fr); padding-inline: 24px; gap: 26px; }
  .feat.rev .feat-b { order: 1; height: auto; }
  .feat-b { height: auto; aspect-ratio: 4 / 3; order: 1; }
  .feat-s { margin-top: 22px; height: auto; aspect-ratio: 16 / 9; }
  .grad-t.big.center-t { font-size: clamp(34px, 6.4vw, 52px); padding-inline: 16px; }
  .da-short { padding: 32px 0 0; }
  .why-hero { padding-top: 104px; }
  .why-pic { width: auto; height: auto; aspect-ratio: 4 / 3; margin: 24px 24px 0; }
  .why-list { padding: 32px 0 48px; }
  .why-grid { width: auto; margin-inline: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .why-c { padding: 18px; }
  .why-n { font-size: 34px; } .why-c h2 { margin-top: 10px; font-size: 22px; } .why-c p { margin-top: 6px; font-size: 15px; }
  .why-eye { font-size: 13px; }
  .route-eye { font-size: 13px; }
  .ca-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ca-img { height: auto; aspect-ratio: 4 / 3; }
  .theatre { height: 92vw; }
  .th-img { height: 70vw; }
  .theatre::after { top: 34vw; height: 38vw; }
  .th-txt { left: 24px; bottom: 28px; }
  .fan { height: 76vw; max-height: 620px; }
  .f-c { width: 42vw; height: 56vw; margin-left: -21vw; }
  .f-l, .f-r { width: 30vw; height: 40vw; top: 16vw; }
  .f-l { margin-left: -38vw; } .f-r { margin-left: 8vw; }
  button.aerial { width: calc(100% - 24px); height: 56vw; margin: 0 12px; border-radius: 12px; }
  .th-wrap { padding: 0 12px; }
  .theatre { border-radius: 12px; }
  .giri::before, .feat-l::after, .da-short::after { display: none; }
  .frames { width: auto; margin-inline: 24px; }
  .frame.a, .frame.c { height: 30vw; } .frame.b { height: 42vw; margin-top: 30px; }
  .why-nb { width: auto; margin-inline: 24px; padding: 40px 0 24px; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .wn-p { font-size: 17px; line-height: 1.45; }
  .cyc { width: auto; margin: 0; padding: 44px 24px 16px; gap: 24px; overflow: clip; }
  .cyc-l .grad-t { font-size: clamp(38px, 7vw, 58px); }
  .cyc-img { width: 28vw; }
  .route-top { gap: 18px; }
  .tl { width: auto; height: auto; margin: 36px 24px 0; padding-left: 0; }
  .tl-line { left: 9px; right: auto; top: 0; bottom: 0; width: 0; border-top: 0; border-left: 1px dashed var(--navy); height: 100%; }
  .tl-fill { left: -2px; top: 0; width: 3px; height: 100%; transform: scaleY(0); transform-origin: 50% 0; }
  .tl > .tl-dot { display: none; }
  .tl-car { left: -22px; top: 0; width: 64px; rotate: 90deg; }
  .tl-stops { position: static; display: grid; gap: 36px; padding-block: 56px 10px; }
  .tl-stops li, .tl-stops li:nth-child(n) { position: relative; left: auto; top: auto; width: auto; height: auto; padding-left: 44px; }
  .tl-stops .tl-dot { top: 22px; }
  .tl-v, .tl-n, .tl-stops li:nth-child(6) .tl-v, .tl-stops li:nth-child(6) .tl-n { position: static; width: auto; }
  .tl-n { margin-top: 6px; }
  .why-k { padding: 56px 24px; }
  .sp-hero { display: block; height: auto; padding: 110px 24px 0; }
  .sp-l { width: auto; }
  .sp-l .grad-t { padding: 0; font-size: clamp(44px, 9vw, 72px); }
  .sp-tower { position: relative; right: auto; top: auto; width: min(76%, 520px); margin: 26px 0 0 auto; }
  .sp-grid, .building .sp-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sp-img { height: auto; aspect-ratio: 4 / 3; }
  .building .sp-img { order: -1; }
  .acc-h { min-height: 44px; }
  .build-h { padding: 48px 24px; }
  .build-h .grad-t { font-size: clamp(34px, 6.4vw, 58px); }
  .md-hero { height: auto; display: block; padding: 110px 24px 0; }
  .md-l { width: auto; padding-top: 0; }
  .md-l .grad-t { padding: 0; font-size: clamp(38px, 7.4vw, 60px); }
  .cats a { padding: 13px 14px 10px; }
  .md-cols { position: relative; left: auto; margin: 26px -24px 0; height: 80vw; max-height: 620px; overflow: hidden; justify-content: center; }
  .md-col { width: 44vw; }
  .md-col img { width: 100%; }
  .gl-grid { grid-template-columns: minmax(0, 1fr); }
  .gl-main { height: 62vw; }
  .gl-side { grid-template-columns: repeat(3, 1fr); grid-template-rows: none; }
  .gl-side button { height: 24vw; }
  .box-arrow { width: 44px; height: 44px; }
}

/* ===== Phone ===== */
@media (max-width: 640px) {
  .eyebrow { font-size: 12px; }
  .hero-txt { padding: 88px 14px 0; }
  .hero-h { font-size: 37px; }
  .hero-strong { font-size: 17px; }
  .hero-btns { gap: 8px; }
  .hero-btns a { padding-inline: 16px; white-space: nowrap; font-size: 15px; }
  .hero-bg { left: 0; width: 100%; aspect-ratio: auto; height: 182.700vw; margin-top: -68vw; overflow: hidden; }
  .hero-bg img { width: 190%; max-width: none; margin-left: -45%; height: auto; }
  .qk { grid-template-columns: minmax(0, 1fr); margin: -13vw 16px 0; }
  .qk-c { height: 270px; }
  .split-head { flex-direction: column; align-items: flex-start; margin-inline: 16px; }
  .video, .pview, .gl-grid, .club-grid, .ca-grid, .sp-grid, .route-top, .tl-note, .rera { margin-inline: 16px; }
  .hd.xl .pre { font-size: 30px; } .hd.xl .main { font-size: 46px; }
  .hd.lg .pre { font-size: 28px; } .hd.lg .main { font-size: 42px; }
  .hd.md .pre { font-size: 24px; } .hd.md .main { font-size: 36px; }
  .serif-t { font-size: 34px; padding-inline: 16px; }
  .nave { font-size: 40px; }
  .giri-h { font-size: 32px; padding-inline: 16px; }
  .giri-p { font-size: 17px; line-height: 1.38; padding-inline: 16px; letter-spacing: -.04em; }
  .giri-m { font-size: 22px; padding-inline: 16px; }
  .show { padding-inline: 16px; }
  .band-split { flex-direction: column; align-items: flex-start; padding: 36px 16px; }
  .enquiry { padding: 48px 16px 96vw; }
  .enq-bg { height: 104vw; }
  .enq-bg img { object-position: 82% 100%; }
  .contact { padding: 48px 16px; }
  .ct-box { padding: 32px 20px; }
  .ct-col p { font-size: 15px; overflow-wrap: anywhere; }
  .foot-bar { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .foot-social { justify-self: center; }
  .why-pic { margin-inline: 16px; }
  .why-grid { margin-inline: 16px; grid-template-columns: minmax(0, 1fr); }
  .foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 14px; }
  .foot-top { padding-top: 18px; }
  .mp-grid { margin-inline: 16px; }
  .mp-list { margin-bottom: 22px; gap: 10px 12px; }
  .mp-list li { font-size: 14px; gap: 8px; }
  .club-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 10px; }
  .why-nb { margin-inline: 16px; }
  .psizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .psize { font-size: 18px; white-space: nowrap; }
  .psize em { font-size: 12px; }
  .psize:only-child { grid-column: 1 / -1; justify-self: center; }
  .feat, .feat.rev { padding-inline: 16px; }
  .num { font-size: 60px; }
  .grad-t.big { padding-inline: 16px; }
  .fan { height: 96vw; }
  .f-c { width: 52vw; height: 68vw; margin-left: -26vw; }
  .f-l, .f-r { width: 36vw; height: 50vw; top: 18vw; }
  .f-l { margin-left: -44vw; } .f-r { margin-left: 8vw; }
  .frames { grid-template-columns: minmax(0, 1fr); margin-inline: 16px; }
  .frame.a, .frame.b, .frame.c { height: 62vw; margin-top: 0; }
  .cyc { flex-direction: column; align-items: flex-start; padding: 40px 16px 8px; gap: 14px; }
  .cyc-img { width: 58vw; }
  .route-top { flex-direction: column; align-items: flex-start; }
  .route-h { font-size: 27px; }
  .why-k { padding: 48px 16px; }
  .wk-cols { grid-template-columns: minmax(0, 1fr); margin-top: 30px; gap: 28px; }
  .wk-cols p { max-width: none; }
  .sp-hero, .md-hero { padding-inline: 16px; }
  .md-cols { margin-inline: -16px; }
  .acc-i.on .acc-n { font-size: 60px; }
  .acc-i.on .acc-t { font-size: 38px; }
  .acc-t { font-size: 26px; }
  .gl-main { height: 92vw; }
  .gl-bar { padding: 50px 14px 14px; grid-template-columns: 1fr auto; }
  .gl-dots { display: none; }
  .gl-side button { height: 30vw; font-size: 12px; }
  .gl-side span + span { display: none; }
}

/* Small screens: the whole map fits the width, with labels sized to stay readable */
@media (max-width: 720px) {
  .map-in { min-width: 0; }
  .m-l { font-size: 9.5px; line-height: 1.04; letter-spacing: -.01em; }
  .m-l.sm { font-size: 8.5px; margin-top: -4px; }
  .m-l.c { margin-top: -2px; }
  .m-l.wide { font-size: 8.5px; letter-spacing: .22em; }
  .m-l.eco { margin-left: -9px; margin-top: 1px; }
  .m-p { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; box-shadow: 0 0 0 1px #fde1a0; }
  .m-tag { translate: -50% calc(-100% - 10px); }
  .m-logo { width: 64px; padding: 5px 7px; border-radius: 5px; }
  .m-tag::after { margin-left: -4px; border-width: 4px; border-bottom: 0; }
  .m-p.home { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(8, 32, 52, .45); }
  .m-r { border-width: 1px; }
}
@media (max-width: 400px) {
  .m-l { font-size: 8.5px; }
  .m-l.sm { font-size: 7.5px; }
  .m-l.hh { margin-left: -14px; }
}

/* ===== Contact panel, Vue style: picture melting into the panel, centred text, soft fields, solid dark button ===== */
.drawer { background: #f5f1e2; }
.drawer-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(180deg, rgba(245, 241, 226, 0) 0%, #f5f1e2 100%); }
.drawer-in { text-align: center; padding: 0.25rem 2.125rem 1.75rem; }
.drawer .hd.md .pre { font-size: 1.625rem; }
.drawer .hd.md .main { font-size: 2.5rem; }
.drawer-text { max-width: 21.25rem; margin: 0.5rem auto 0; }
.drawer .form { margin-top: 1.25rem; gap: 0.75rem; text-align: left; }
.drawer .field input, .drawer .field select { height: 3rem; padding: 0.125rem 1rem 0; border: 1px solid transparent; border-radius: 0.5rem; background: #ebe5cf; font-size: 0.9375rem; }
.drawer .field input:focus, .drawer .field select:focus { background: #fff; border-color: var(--gold); outline: 2px solid rgba(220, 178, 64, .45); }
.drawer .field > img { display: none; }
.drawer .field.select::after { top: 1.125rem; right: 1.125rem; }
html .drawer .btn-submit { justify-content: center; gap: 0.75rem; height: 3.125rem; border-radius: 0.625rem; background: #0f2a44; color: #fff; font-size: 1rem; }
html .drawer .btn-submit:hover { background: #163c5f; filter: none; }
.drawer-x { right: 1rem; top: 1rem; background: #fff; color: var(--navy); box-shadow: 0 0.375rem 1.125rem rgba(4, 16, 28, .22); }
.drawer-x:hover { background: #fff; color: #0c2f4a; }
@media (max-width: 1099px) {
  .drawer .field input, .drawer .field select { height: 50px; font-size: 16px; }
  html .drawer .btn-submit { height: 52px; }
}

/* ===== Amenities photo strip, Vue style: a slow continuous scroll at alternating heights ===== */
.drift { display: block; margin: 2.875rem 0 0; overflow: hidden; height: auto; }
.mq { display: flex; align-items: center; gap: 1.375rem; width: max-content; animation: marquee 48s linear infinite; }
.drift:hover .mq { animation-play-state: paused; }
.mq figure { position: relative; flex: none; margin: 0; border-radius: 0.625rem; overflow: hidden; box-shadow: 0 0.875rem 1.875rem rgba(16, 61, 94, .12); }
/* One landscape, one portrait, in turn: same width throughout */
.mq figure:nth-child(odd) { width: 15.625rem; height: 12.8125rem; } .mq figure:nth-child(even) { width: 15.625rem; height: 19.0625rem; }
.mq img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.mq figure:hover img { transform: scale(1.06); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 1099px) {
  .drift { margin-top: 30px; }
  .mq { gap: 12px; animation-duration: 36s; }
  .mq figure:nth-child(odd) { width: 160px; height: 132px; } .mq figure:nth-child(even) { width: 160px; height: 196px; }
}
@media (prefers-reduced-motion: reduce) { .mq { animation: none; } .drift { overflow-x: auto; } }

/* Leaf clusters sit only in the free side margin beside the content; with no free margin they shrink away */
/* A single gold leaf beside a section heading */
.hleaf { position: absolute; z-index: 1; display: block; margin: 0; width: 24px; height: 38px; background: url(../img/leaf-gold.svg) center / contain no-repeat; opacity: .85; transform-origin: 50% 100%; animation: leafSway 5s ease-in-out infinite alternate; pointer-events: none; }
@media (max-width: 1099px) { .hleaf { display: none; } }
@media (prefers-reduced-motion: reduce) { .hleaf { animation: none; } }
/* Gold sprig in a section corner: large, faint, behind the content, gently swaying from its base */
.sprig { position: absolute; z-index: -1; top: -0.625rem; width: 14.375rem; aspect-ratio: 230 / 340; background: url(../img/sprig.svg) center / contain no-repeat; opacity: .3; pointer-events: none; transform-origin: 20% 100%; animation: sprigSway 9s ease-in-out infinite alternate; }
.sprig.r { right: -4.375rem; scale: -1 1; } .sprig.l { left: -4.375rem; }
.sprig.low { top: auto; bottom: -1.25rem; }
@keyframes sprigSway { from { rotate: -3deg; } to { rotate: 3deg; } }
@media (max-width: 1099px) { .sprig { width: 140px; opacity: .22; } .sprig.r { right: -46px; } .sprig.l { left: -46px; } }
@media (prefers-reduced-motion: reduce) { .sprig { animation: none; } }
.leaf-fall { display: none !important; }
.leaf-cl { position: absolute; z-index: 0; aspect-ratio: 60 / 96; background: url(../img/leaf-gold.svg) center / contain no-repeat; opacity: .7; transform-origin: 50% 100%; animation: leafSway 6s ease-in-out infinite alternate; pointer-events: none; }
@media (max-width: 1099px) { .leaf-cl, .leaf-fall { display: none; } }
/* The earlier built-in clusters are retired, so no spot ends up with several leaves together */
.cyc::after, .why-k::after, .giri::before, .why-hero::after, .feat-l::after, .da-short::after { content: none !important; }
@media (prefers-reduced-motion: reduce) { .leaf-cl { animation: none; } }

/* Footer links on phones stay on one line each */
@media (max-width: 640px) { .foot-links a { white-space: nowrap; font-size: 14px; } }

/* ===== Home hero, Vajra style: the dusk render in a rounded card, tower on the left, large white words in the sky on the right ===== */
.vj { position: relative; padding: 5.75rem 1.25rem 0; }
.vj-card { position: relative; height: clamp(37.5rem, calc(100vh - 5.75rem - 20px), 50vw); border-radius: 1.375rem; overflow: clip; isolation: isolate; background: #1c2d3a; color: #fff; }
.vj-bg { position: absolute; z-index: -2; inset: 0; will-change: transform; }
.vj-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 16% 50%; }
.vj-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgba(10, 20, 30, .72) 0%, rgba(10, 20, 30, .25) 26%, rgba(10, 20, 30, 0) 44%), linear-gradient(90deg, rgba(10, 20, 30, .4) 0%, rgba(10, 20, 30, 0) 16%); pointer-events: none; }
.vj-pill { position: absolute; z-index: 3; left: 2rem; top: 1.875rem; display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.5625rem 1rem 0.4375rem; border-radius: 2.5rem; background: rgba(8, 24, 44, .32); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 0.875rem/1 var(--jos); letter-spacing: .02em; }
.vj-pill i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #f1d68a; box-shadow: 0 0 0 0.25rem rgba(241, 214, 138, .22); }
.vj-h { position: absolute; z-index: 2; left: 53%; top: 15%; width: 37.5rem; margin: 0; font-weight: 400; }
.vj-a { display: block; margin-left: 0.375rem; font: 400 2.875rem/1 var(--jos); letter-spacing: -.025em; color: #fff; }
.vj-b { display: block; margin-top: 0.25rem; font: 700 9.375rem/.88 var(--spartan); letter-spacing: -.055em; color: #fff; text-shadow: 0 0.375rem 1.875rem rgba(8, 20, 34, .25); }
.vj-bar { position: absolute; z-index: 3; left: 53%; right: 1.875rem; bottom: 1.875rem; padding: 1.25rem 1.5rem; border-radius: 0.875rem; background: rgba(8, 24, 44, .34); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); }
.vj-strong { font: 600 1.3125rem/1.2 var(--jos); letter-spacing: 0; }
.vj-p { margin-top: 0.375rem; font: 400 0.9375rem/1.45 var(--jos); opacity: .92; }
.vj .qk { position: relative; left: auto; top: auto; translate: none; width: 71.25rem; margin: 1.625rem auto 0; gap: 1.25rem; }
.vj .qk-c { height: 21.5625rem; border-radius: 0.875rem; box-shadow: 0 1.25rem 2.75rem rgba(16, 61, 94, .12); background: radial-gradient(circle at var(--qx, calc(100% - 2.375rem)) var(--qy, 2.375rem), #1d5a84 0, #0c2f4a var(--qr), rgba(12, 47, 74, 0) calc(var(--qr) + 1px)), #fff; }
.vj .qk-t { padding: 1.25rem 1.375rem 0.75rem 1.625rem; }
.vj .qk-t b { font-size: 1.3125rem; }
@media (max-width: 1099px) {
  .vj { padding: 80px 12px 0; }
  .vj-card { height: auto; display: flex; flex-direction: column; padding: 20px 18px 18px; border-radius: 16px; background: linear-gradient(180deg, #4f6a8c 0%, #6f86a3 60%, #1c2d3a 100%); }
  .vj-pill { order: 1; } .vj-h { order: 2; } .vj-bg { order: 3; } .vj-bar { order: 4; }
  .vj-pill { position: static; align-self: flex-start; padding: 7px 12px 6px; font-size: 12px; gap: 8px; }
  .vj-pill i { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(241, 214, 138, .22); }
  .vj-h { position: static; width: auto; margin-top: 18px; }
  .vj-a { font-size: 22px; margin-left: 2px; }
  .vj-b { font-size: clamp(56px, 17vw, 110px); }
  .vj-bg { position: relative; inset: auto; z-index: 0; margin: 14px -18px 0; }
  .vj-bg img { height: auto; aspect-ratio: 1440 / 1600; object-position: 50% 100%; }
  .vj-card::before { display: none; }
  .vj-bar { position: relative; left: auto; right: auto; bottom: auto; margin-top: -60px; padding: 16px; }
  .vj-strong { font-size: 18px; } .vj-p { font-size: 15px; }
  .vj .qk { width: auto; margin: 20px 12px 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .vj .qk-c { height: 290px; }
}
@media (max-width: 640px) { .vj .qk { margin: 16px 12px 0; grid-template-columns: minmax(0, 1fr); } .vj .qk-c { height: 280px; } }

/* ===== Home hero: sky, title high up, the whole tower visible in the first screen, the description beside it, compact cards over its base ===== */
.hv { position: relative; height: 62.5rem; overflow: clip; isolation: isolate; background: #dfe6ee; }
.hv-sky { position: absolute; z-index: -3; left: 0; right: 0; top: 0; height: 53.75rem; will-change: transform; }
.hv-sky img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hv-sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 30, 60, .3) 0%, rgba(10, 30, 60, .1) 30%, rgba(241, 246, 251, 0) 60%); }
.hv::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 20.625rem; background: linear-gradient(0deg, var(--page) 0%, var(--page) 34%, rgba(247, 247, 228, .7) 62%, rgba(247, 247, 228, 0) 100%); pointer-events: none; }
.hv-txt { position: absolute; z-index: 2; left: 0; right: 0; top: 6rem; text-align: center; }
.hv-h { margin: 0; font: 700 4.875rem/1 var(--spartan); letter-spacing: -.012em; background: linear-gradient(100deg, #ffd45e 0%, #fff0b8 22%, #f2c548 40%, #c9a030 62%, #ffe08a 82%, #ffd45e 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 9s linear infinite; padding-bottom: .06em; filter: drop-shadow(0 2px 12px rgba(8, 26, 54, .3)); }
.hv-strong { margin-top: 0.5rem; font: 500 1.375rem/1.3 var(--jos); letter-spacing: 0; color: #fff; text-shadow: 0 1px 10px rgba(8, 26, 54, .55); }
.hv-p { position: absolute; z-index: 2; left: calc(50% + 15.75rem); top: 29.375rem; width: 18.75rem; margin: 0; text-align: left; font: 400 1.125rem/1.55 var(--jos); letter-spacing: 0; color: #fff; text-shadow: 0 1px 10px rgba(8, 26, 54, .55); }
.hv-p::before { content: ""; display: block; width: 2.75rem; height: 0.125rem; margin-bottom: 1rem; background: var(--gold-grad); }
.hv-tower { position: absolute; z-index: -1; left: 0; right: 0; margin: 0 auto; top: 14.25rem; width: auto; height: 37.5rem; max-width: none; filter: drop-shadow(0 1.625rem 2.75rem rgba(16, 61, 94, .3)); }
.hv-mist { position: absolute; z-index: -1; left: 0; right: 0; top: 40.625rem; height: 14.375rem; pointer-events: none; opacity: .9; }
.hv-mist img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.hv .qk { position: absolute; z-index: 2; left: 0; right: 0; margin: 0 auto; top: 45.5rem; translate: none; width: 62.5rem; gap: 1.125rem; perspective: 1100px; }
.hv .qk-c { height: 15.5rem; border-radius: 0.875rem; box-shadow: 0 1.125rem 2.5rem rgba(16, 61, 94, .14); }
.hv .qk-t { padding: 1.125rem 1.125rem 0.5rem 1.375rem; }
.hv .qk-t b { font-size: 1.3125rem; }
.hv .qk-t small { font-size: 0.875rem; }
.qk-i.plan img { inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4% 8% 2%; }
@media (max-width: 1099px) {
  .hv { height: auto; padding: 96px 0 48px; }
  .hv .qk-c { box-shadow: 0 12px 28px rgba(16, 61, 94, .13); }
  .hv-sky { height: 150vw; }
  .hv::after { height: 60vw; }
  .hv-txt { position: relative; top: auto; padding: 0 20px; }
  .hv-h { font-size: clamp(40px, 8.4vw, 64px); }
  .hv-strong { font-size: 18px; }
  .hv-p { position: relative; left: auto; top: auto; width: auto; max-width: 34em; margin: 12px auto 0; padding: 0 20px; text-align: center; font-size: 16px; }
  .hv-p::before { margin: 0 auto 12px; }
  .hv-tower { position: relative; left: auto; right: auto; top: auto; display: block; width: min(74vw, 440px); height: auto; margin: 26px auto 0; }
  .hv-mist { display: none; }
  .hv .qk { position: relative; left: auto; right: auto; top: auto; width: auto; margin: -26vw 24px 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .hv .qk-c { height: 250px; }
}
@media (max-width: 640px) {
  /* compact card rows: picture on the left, title and arrow on the right */
  .hv .qk { margin: -24vw 16px 0; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hv .qk-c { height: 104px; flex-direction: row; border-radius: 12px; }
  .hv .qk-i { order: -1; flex: 0 0 38%; }
  .hv .qk-t { flex: 1; align-items: center; padding: 12px 14px 12px 16px; }
  .hv .qk-t b { font-size: 19px; } .hv .qk-t small { font-size: 13px; }
  .hv .qk-i.tw img { left: -6%; width: 120%; }
  .hv .qk-i.iso img { left: 6%; width: 90%; }
  .hv .qk-i.home img { left: -2%; top: 0; bottom: auto; width: 106%; }
  .hv .qk-c { --qx: calc(100% - 32px); --qy: 50%; }
  .hv .qk-i.plan img { padding: 4px; }
}

/* ===== Hero preview (hero-preview.html only) ===== */
.vh { position: relative; padding: 5.75rem 1.25rem 0; }
.vh-card { position: relative; height: clamp(37.5rem, calc(100vh - 5.75rem - 20px), 52vw); border-radius: 1.375rem; overflow: clip; isolation: isolate; background: #0b2447; color: #fff; }
.vh-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(4, 14, 32, .55) 0%, rgba(4, 14, 32, .18) 45%, rgba(4, 14, 32, 0) 70%), linear-gradient(0deg, rgba(4, 14, 32, .55) 0%, rgba(4, 14, 32, 0) 32%); pointer-events: none; }
.vh-sky { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.vh-pill { position: absolute; z-index: 3; left: 2.5rem; top: 2.125rem; display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.5625rem 1rem 0.4375rem; border-radius: 2.5rem; background: rgba(8, 24, 44, .38); border: 1px solid rgba(243, 217, 141, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 0.875rem/1 var(--jos); letter-spacing: .02em; }
.vh-pill i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #f1d68a; box-shadow: 0 0 0 0.25rem rgba(241, 214, 138, .22); }
.vh-h { position: absolute; z-index: 1; left: 3.125rem; top: 6.5rem; margin: 0; font-weight: 400; }
.vh-a { display: block; margin-left: 0.625rem; font: 500 2.875rem/1 var(--jos); letter-spacing: -.02em; color: #fff; }
.vh-b { display: block; margin-top: 0.375rem; font: 700 11.125rem/.92 var(--spartan); letter-spacing: -.055em; white-space: nowrap; background: var(--foil-hi); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 9s linear infinite; padding-bottom: .06em; }
/* The tower stands in front of the big words */
.vh-tower { position: absolute; z-index: 2; right: 9%; bottom: -3%; width: auto; height: 94%; max-width: none; filter: drop-shadow(0 1.875rem 3.125rem rgba(0, 0, 0, .45)); pointer-events: none; }
.vh-bar { position: absolute; z-index: 3; left: 1.875rem; bottom: 1.875rem; width: 35rem; padding: 1.25rem 1.625rem; border-radius: 0.875rem; background: rgba(8, 24, 44, .38); border: 1px solid rgba(243, 217, 141, .3); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); }
.vh-strong { font: 600 1.375rem/1.2 var(--jos); letter-spacing: 0; }
.vh-p { margin-top: 0.375rem; font: 400 0.9375rem/1.45 var(--jos); opacity: .92; }
.vh .qk { position: relative; left: auto; top: auto; translate: none; width: 67.5rem; margin: 1.625rem auto 0; }
@media (max-width: 1099px) {
  .vh { padding: 80px 12px 0; }
  .vh-card { height: auto; display: flex; flex-direction: column; padding: 22px 18px 18px; border-radius: 16px; }
  .vh-pill { position: static; align-self: flex-start; padding: 7px 12px 6px; font-size: 12px; gap: 8px; }
  .vh-pill i { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(241, 214, 138, .22); }
  .vh-h { position: static; margin-top: 18px; }
  .vh-a { margin-left: 2px; font-size: 22px; }
  .vh-b { font-size: 17.500vw; white-space: normal; line-height: .92; }
  .vh-tower { position: relative; right: auto; bottom: auto; align-self: center; width: 78%; height: auto; margin-top: -3vw; }
  .vh-bar { position: relative; left: auto; bottom: auto; width: auto; margin-top: -10px; padding: 16px; }
  .vh-strong { font-size: 18px; } .vh-p { font-size: 15px; }
  .vh .qk { width: auto; margin: 20px 12px 0; grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 641px) and (max-width: 1099px) { .vh .qk { grid-template-columns: repeat(3, 1fr); } .vh-b { font-size: 14vw; } .vh-tower { width: 56%; } }

/* ===== Round 5 layouts ===== */
/* Clubhouse and terrace plans shown full size, no box around them */
.club-plan, .club-plan button { height: auto; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.club-plan img { height: auto; object-fit: initial; border-radius: 1rem; box-shadow: 0 1.25rem 2.75rem rgba(16, 61, 94, .18); }
.club-grid { align-items: start; }
/* Amenities: one picture per section, alternating sides */
.feat { align-items: center; }
.feat-l { justify-content: center; }
.feat-b, .feat.rev .feat-b, #badminton .feat-b { height: 35rem; }
/* Amenities hero: a calm, symmetric row, tallest in the middle */
.drift { position: relative; left: auto; width: auto; height: auto; margin: 2.75rem 2.5rem 0; display: flex; align-items: center; justify-content: center; gap: 1.125rem; will-change: auto; }
.drift figure { position: relative; left: auto; top: auto; flex: none; border-radius: 0.625rem; overflow: hidden; box-shadow: 0 1rem 2.125rem rgba(16, 61, 94, .14); }
.drift img { transition: transform .6s var(--ease); }
.drift figure:hover img { transform: scale(1.05); }
.d-a, .d-e { width: 13.75rem; height: 15.625rem; } .d-b, .d-d { width: 15.625rem; height: 19.375rem; } .d-c { width: 18.75rem; height: 24.375rem; }
/* Neighbourhood: three straight photos, the middle one taller */
.fan { height: auto; display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 2.75rem; }
.fan figure { position: relative; left: auto; top: auto; margin: 0; transform: none; flex: none; border-radius: 0.625rem; box-shadow: 0 1rem 2.125rem rgba(16, 61, 94, .16); }
.f-l, .f-r { width: 16.875rem; height: 18.75rem; } .f-c { width: 20.625rem; height: 29.375rem; }
/* Cyclist with turning wheels */
.cyc-img { position: relative; }
.cyc-img img { position: relative; z-index: 1; width: 100%; height: auto; }
.wheel { position: absolute; z-index: 0; width: 28.9%; height: auto; aspect-ratio: 1; stroke: #103d5e; stroke-width: 4.5; stroke-linecap: round; }
/* Specifications tower: soft bottom edge instead of a hard crop */
/* The picture's own rounded bottom corners are cropped off, and the edge above them fades softly */
.sp-tower { clip-path: inset(0 0 11% 0); margin-bottom: -6%; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 89%); mask-image: linear-gradient(180deg, #000 70%, transparent 89%); }
/* Clubhouse slider */
.cs { width: 77.5rem; margin: 2.25rem auto 4.375rem; }
.cs-frame { position: relative; height: 38.75rem; border-radius: 1.125rem; overflow: clip; background: #0b1320; box-shadow: 0 0 0 1px rgba(220, 178, 64, .45), 0 1.875rem 3.75rem rgba(16, 61, 94, .2); }
.cs-frame::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(180deg, rgba(4, 10, 20, 0), rgba(4, 10, 20, .78)); pointer-events: none; }
.cs-s { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.cs-s img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 6s linear; }
.cs-s.on { opacity: 1; } .cs-s.on img { transform: scale(1); }
.cs-cap { position: absolute; z-index: 2; left: 2.75rem; bottom: 2.5rem; color: #fff; }
.cs-k { font: 600 0.8125rem/1 var(--jos); letter-spacing: .22em; text-transform: uppercase; color: #f1d68a; }
.cs-t { margin-top: 0.625rem; font: 400 4rem/1 var(--serif); font-style: italic; letter-spacing: -.02em; color: #fff; }
.cs-nav { position: absolute; z-index: 2; right: 2.5rem; bottom: 2.75rem; }
.cs-tabs { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1.125rem; padding: 0.25rem; overflow-x: auto; scrollbar-width: none; }
.cs-tabs::-webkit-scrollbar { display: none; }
.cs-b { flex: none; min-height: 2.5rem; padding: 0.125rem 1rem 0; border-radius: 2.5rem; font: 500 0.875rem/1 var(--jos); color: var(--navy); box-shadow: inset 0 0 0 1px rgba(16, 61, 94, .2); transition: background .25s, box-shadow .25s; }
.cs-b:hover { box-shadow: inset 0 0 0 1px var(--navy); }
.cs-b[aria-pressed="true"] { background: var(--foil-btn); box-shadow: none; }
/* Why page icons */
.why-sub { margin: 0 auto 1.875rem; text-align: center; font: 500 2.125rem/1.15 var(--serif); font-style: italic; letter-spacing: -.02em; color: var(--navy); }
.why-c h3 { margin-top: 0.875rem; font: 700 1.4375rem/1.12 var(--serif); font-variant-numeric: lining-nums; letter-spacing: -.02em; color: var(--navy); }
.why-ic { position: relative; width: 3.375rem; height: 3.375rem; display: grid; place-items: center; border-radius: 50%; background: #f3ebd0; box-shadow: inset 0 0 0 1px rgba(190, 150, 50, .28); transition: background .25s, translate .25s var(--ease); }
.why-ic img { width: 2rem; height: 2rem; }
.why-c:hover .why-ic { background: #ece1bd; translate: 0 -0.125rem; }
/* Falling leaves */
.leaf-fall { position: absolute; z-index: 0; right: calc(9.375rem + var(--x, 0px)); top: 14%; width: calc(1.125rem * var(--s, 1)); height: calc(1.75rem * var(--s, 1)); background: url(../img/leaf-gold.svg) center / contain no-repeat; opacity: 0; pointer-events: none; animation: leafFall var(--t, 11s) linear var(--d, 0s) infinite; }
.giri .leaf-fall, .da-short .leaf-fall { right: auto; left: calc(9.375rem + var(--x, 0px)); }
@keyframes leafFall { 0% { opacity: 0; transform: translate(0, 0) rotate(0deg); } 12% { opacity: .75; } 50% { transform: translate(-2.875rem, 8.125rem) rotate(150deg); } 88% { opacity: .55; } 100% { opacity: 0; transform: translate(-6rem, 17.5rem) rotate(310deg); } }
@media (max-width: 1099px) {
  .club-plan img { border-radius: 12px; }
  .feat-b, .feat.rev .feat-b, #badminton .feat-b { height: auto; aspect-ratio: 4 / 3; }
  .drift { margin: 30px 16px 0; gap: 10px; }
  .d-a, .d-e { width: 15vw; height: 20vw; } .d-b, .d-d { width: 18vw; height: 26vw; } .d-c { width: 22vw; height: 32vw; }
  .fan { gap: 12px; margin: 30px 16px 0; }
  .f-l, .f-r { width: 26vw; height: 30vw; } .f-c { width: 34vw; height: 48vw; }
  .cs { width: auto; margin: 24px 12px 48px; }
  .cs-frame { height: 62vw; border-radius: 12px; }
  .cs-cap { left: 18px; bottom: 18px; } .cs-k { font-size: 12px; }
  .finishes { padding-bottom: 8px; } .build-h { padding-top: 12px; padding-bottom: 0; } .building { padding-top: 24px; } .cs-t { font-size: clamp(26px, 6vw, 44px); }
  .cs-nav { right: 14px; bottom: 16px; }
  .cs-tabs { justify-content: flex-start; } .cs-b { min-height: 44px; padding-inline: 16px; font-size: 14px; }
  .why-ic { width: 48px; height: 48px; } .why-ic img { width: 28px; height: 28px; }
  .why-sub { font-size: 26px; margin-bottom: 20px; padding-inline: 16px; }
  .why-c h3 { margin-top: 12px; font-size: 22px; }
  .leaf-fall { width: calc(13px * var(--s, 1)); height: calc(20px * var(--s, 1)); }
}
@media (max-width: 640px) {
  .d-a, .d-e { display: none; } .d-b, .d-d { width: 28vw; height: 36vw; } .d-c { width: 36vw; height: 50vw; }
  .f-l, .f-r { width: 27vw; height: 34vw; } .f-c { width: 36vw; height: 52vw; }
  .cs-frame { height: 74vw; }
}

@media (prefers-reduced-motion: reduce) {
  .leaf-fall { display: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .m-p::after { animation: none; }
  html .hero-h { animation: none; }
  .hero-dust { display: none; }
  .sec::before, .sec::after, .why-hero::after, .feat-l::after { animation: none !important; }
  .m-r { animation: none; opacity: .5; transform: scale(.55); }
  .m-r.b { display: none; }
  .drawer[open], .drawer.closing, .drawer::backdrop, .drawer-in > * { animation-duration: .01ms !important; animation-delay: 0s !important; }
}


/* Two-leaf gold cluster placed by the page in a section's empty corner, swaying gently like the other leaves */
.lfc { position: absolute; z-index: 0; background: url(../img/leaves.svg) center / contain no-repeat; opacity: .6; pointer-events: none; transform-origin: 50% 100%; animation: leafSway 5.5s ease-in-out infinite alternate; }
@media (max-width: 1099px) { .lfc { opacity: .5; } }

/* ===== Typography system: two families only. League Spartan (was Cormorant Garamond) for headings and figures, Josefin Sans for reading and UI.
   Serif headings get natural tracking; body copy is set larger, looser and to a comfortable line length. ===== */
.hd .pre, .hd .main, .serif-t, .nave, .grad-t, .hero-h, .mp-lh, .why-c h2, .why-c h3, .nlist, .route-h, .wk-cols h3, .acc-t, .cs-t, .why-sub, .lv-t, .st-grid em, .psize em, .pfacts em, .club-area em, .ftab { letter-spacing: -.008em; }
.grad-t, .hero-h, .nave { font-weight: 700; }
.grad-t { font-size: 5.5rem; line-height: 1.04; }
.grad-t.big { font-size: 5rem; }
.grad-t.big.center-t { font-size: 4.5rem; }
.nave { font-weight: 600; }
/* figures: the serif's lining numerals, so numbers match the headings */
.num, .acc-n, .acc-i.on .acc-n, .why-n, .st-grid b, .pn b, .pfacts b, .club-area b, .tl-v b, .nlist b, .ftab b { font-family: var(--serif); font-weight: 600; font-variant-numeric: lining-nums; letter-spacing: -.01em; }
.num, .acc-i.on .acc-n { font-weight: 700; }
/* reading text */
body { font-size: 1.0625rem; line-height: 1.6; }
.body, .center-p, .lead, .lv-d, .why-c p, .wk-cols p, .acc-p, .enq-text, .cyc-l .body, .drawer-text, .hero-sub, .giri-p, .wn-p { font-size: 1.0625rem; line-height: 1.6; letter-spacing: 0; word-spacing: normal; }
.giri-p, .wn-p { font-size: 1.1875rem; }
.bul li { font-size: 1rem; line-height: 1.5; letter-spacing: 0; }
.ct-col p { font-size: 1rem; line-height: 1.6; letter-spacing: 0; }
.mp-list li, .club-feats b, .field input, .field select, .btn-submit, .btn-wa, .foot-bar p, .pill, .cats a { letter-spacing: 0; }
.foot-bar p, .foot-social span { font-size: 0.8125rem; }
/* line length: paragraphs never run wider than their heading block reads comfortably */
.feat-l .body, .show-side .body, .band-split .body, .acc-p, .enq-text, .lead { max-width: 30em; }
.center-p { max-width: 40em; margin-inline: auto; }
@media (max-width: 1099px) {
  body, .body, .center-p, .lead, .lv-d, .why-c p, .wk-cols p, .acc-p, .enq-text, .cyc-l .body, .drawer-text, .hero-sub { font-size: 16px; line-height: 1.6; }
  .giri-p, .wn-p { font-size: 17px; letter-spacing: 0; }
  .hero-p { letter-spacing: 0; }
  .grad-t { font-size: clamp(40px, 8.6vw, 64px); }
  .grad-t.big, .grad-t.big.center-t { font-size: clamp(36px, 7.6vw, 56px); }
}

/* ===== Round: layout fixes ===== */
/* One-line heading */
.hd.one .pre, .hd.one .main { display: inline; font-size: 3.875rem; line-height: 1.1; }
.hd.one .pre { font-style: normal; color: var(--navy); }
.hd.one .main b { font-style: italic; }
.hd.one .main { margin-left: .18em; }
/* Plans: steady stage so the key plan never jumps between 3D and floor plan */
.pview { align-items: start; }
.pkey { padding-top: 6rem; }
.pfacts { padding-top: 9.375rem; }
.pstage { height: 31.25rem; display: grid; place-items: center; }
.pstage img, .pstage [data-plan-3d] { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.pstage [data-plan-3d] { max-height: 30rem; }
.pang-row { display: flex; align-items: center; justify-content: center; gap: 0.875rem; }
.pang-row.off { visibility: hidden; }
.p360 { display: flex; align-items: center; gap: 0.5rem; padding-right: 0.875rem; border-right: 1px solid rgba(190, 150, 50, .45); color: var(--navy); }
.p360 svg { width: 2.125rem; height: 2.125rem; }
.p360 small { font: 600 0.75rem/1.2 var(--jos); letter-spacing: .1em; text-transform: uppercase; color: #8a6a10; white-space: nowrap; }
/* Master plan legend: plain numbering */
.mp-list b, .mp-list b { width: auto; min-width: 1.5rem; height: auto; display: block; place-items: initial; border-radius: 0; background: none; color: #8a6a10; font: 600 1rem/1.15 var(--serif); font-variant-numeric: lining-nums tabular-nums; text-align: right; }
.mp-list li { align-items: baseline; }
/* Level plates: picture fills the plate */
.lv { padding: 0; overflow: hidden; }
.lv img { object-fit: cover; }
/* Clubhouse slider: title, arrows and tabs share one frame */
.cs-frame::after { height: 60%; }
.cs-cap { bottom: 6.5rem; }
.cs-nav { bottom: 6.875rem; }
.cs-tabs { position: absolute; z-index: 2; left: 2.75rem; right: 2.75rem; bottom: 1.875rem; margin: 0; padding: 1.125rem 0 0; justify-content: flex-start; border-top: 1px solid rgba(255, 255, 255, .22); }
.cs-b { color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cs-b:hover { box-shadow: inset 0 0 0 1px #fff; background: rgba(255, 255, 255, .16); }
.cs-b[aria-pressed="true"] { color: var(--navy); }
.cs-b:focus-visible { outline: 2px solid #f1d68a; outline-offset: 2px; }
/* Readable line length beside headings */
.feat-l .body { max-width: 25em; }
/* Contact: compact, one-line title */
/* Enquiry picture ends cleanly, no washed-out fade at the bottom */
/* Map fits the screen */
.map { width: min(75rem, calc((100svh - 120px) * 1.6), calc(100% - 48px)); margin: 0 auto; border-radius: 1.5rem; overflow: hidden; -webkit-mask-image: none; mask-image: none; box-shadow: 0 0 0 1px rgba(190, 150, 50, .3), 0 1.5rem 3.125rem rgba(16, 61, 94, .12); }
/* Why 24 Carat eyebrow */
.why-eye { font-size: 1.5rem; letter-spacing: .2em; margin-bottom: 0.875rem; }
/* Neighbourhood columns with dividers */
.wk-cols { gap: 0; }
.wk-cols article { padding: 0.25rem 2.5rem; }
.wk-cols article:first-child { padding-left: 0; }
.wk-cols article + article { border-left: 1px solid rgba(190, 150, 50, .5); }
/* Drive-time timeline: four stops */
@media (min-width: 1100px) {
.tl-stops li:nth-child(1) { left: 14.375rem; } .tl-stops li:nth-child(2) { left: 29.375rem; } .tl-stops li:nth-child(3) { left: 44.375rem; } .tl-stops li:nth-child(4) { left: 59.375rem; }
.tl-stops li:nth-child(4) .tl-v { left: -2rem; } .tl-stops li:nth-child(4) .tl-n { width: 10.625rem; }
}
.tl-n small { display: block; margin-top: 0.5rem; font: 500 0.9375rem/1 var(--jos); color: #8a6a10; letter-spacing: .04em; }
.route-h { font-size: 2.25rem; }
/* RERA in the footer */
.foot-bar .foot-c { display: grid; gap: 0.5rem; text-align: center; }
.foot-bar .foot-rera { font: 600 0.875rem/1 var(--jos); letter-spacing: .06em; color: #f1d68a; }
/* Club icon circles: one tone */
.club-feats i { background: #f5eed6; }
@media (max-width: 1099px) {
  .hd.one .pre, .hd.one .main { font-size: 40px; }
  .pkey, .pfacts { padding-top: 0; }
  .pstage { height: min(88vw, 520px); }
  .pstage [data-plan-3d] { max-height: 100%; }
  .cs-frame { height: 82vw; }
  .map { width: auto; margin-inline: 24px; border-radius: 18px; }
  .why-eye { font-size: 18px; }
  .wk-cols article, .wk-cols article:first-child { padding: 0; }
  .wk-cols article + article { border-left: 0; border-top: 1px solid rgba(190, 150, 50, .5); padding-top: 26px; }
  .tl-stops li:nth-child(n) .tl-v, .tl-stops li:nth-child(n) .tl-n { position: static; width: auto; }
}
@media (max-width: 640px) {
  .hd.one .pre, .hd.one .main { font-size: 32px; }
  .cs-frame { height: 128vw; }
  .cs-cap { left: 18px; bottom: 132px; } .cs-nav { right: 14px; bottom: 134px; }
  .cs-tabs { left: 14px; right: 0; bottom: 16px; padding-top: 14px; padding-right: 14px; flex-wrap: nowrap; }
  .p360 small { display: none; } .p360 { padding-right: 8px; }
  .pang-row { gap: 8px; }
  .map { margin-inline: 16px; }
}
/* Films: project film with the short beside it */
.films { width: 70rem; margin: 2.125rem auto 0; display: grid; grid-template-columns: minmax(0, 1fr) 18.75rem; gap: 1.25rem; }
.films .video { width: auto; height: auto; margin: 0; border-radius: 1rem; }
.films .film-a { aspect-ratio: 16 / 9; }
.walk .films .video { margin-top: 0; }
.film-cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 0.375rem; padding: 3.75rem 1.625rem 1.375rem; text-align: left; color: #fff; background: linear-gradient(180deg, rgba(4, 10, 20, 0), rgba(4, 10, 20, .75)); pointer-events: none; }
.film-cap b { font: 600 1.5rem/1.15 var(--serif); }
.film-cap small { font: 600 0.75rem/1 var(--jos); letter-spacing: .16em; text-transform: uppercase; color: #f1d68a; }
.why-film { padding: 2.5rem 0 1.875rem; }
.why-film .video { margin-top: 1.875rem; border-radius: 1rem; }
@media (max-width: 1099px) {
  .films { width: auto; margin-inline: 24px; grid-template-columns: minmax(0, 1fr); }
  .films .video { height: auto; aspect-ratio: 16 / 9; }
  .films .film-b { aspect-ratio: 4 / 5; max-width: 420px; }
  .why-film .video { width: auto; height: auto; aspect-ratio: 16 / 9; margin-inline: 24px; }
}
@media (max-width: 640px) { .films, .why-film .video { margin-inline: 16px; } .film-cap b { font-size: 20px; } }
.film-a .film-cap { display: none; }
@media (max-width: 1099px) { .tl-n { margin-top: 14px; } }
@media (max-width: 400px) { .pa { width: 56px; height: 56px; } .pangles { gap: 6px; } .p360 svg { width: 26px; height: 26px; } }

/* Card pictures grow from their base on hover, so the top of the building is never cut */
.qk-i img { transform-origin: 50% 100%; }
.qk-c:focus-visible .qk-i img { transform: scale(1.05); }
@media (min-width: 641px) { .hv .qk-i.home img { top: 9%; left: 8%; width: 84%; } .hv .qk-i.iso img { top: 6%; } }

/* ===== Two sans-serif families: League Spartan for headings and figures, Josefin Sans for reading and UI ===== */
html { font-synthesis: none; }
.hd .pre, .hd .main, .serif-t, .nave, .grad-t, .hero-h, .hv-h, .mp-lh, .why-c h3, .route-h, .wk-cols h3, .acc-t, .cs-t, .why-sub, .lv-t, .film-cap b, .ftab, .num, .acc-n, .tl-v b, .pn b, .pfacts b, .club-area b, .psize, .st-grid b { font-size-adjust: .4; letter-spacing: -.01em; }
.hd .main, .hd .main b, .serif-t, .grad-t, .hv-h, .nave, .cs-t, .lv-t, .wk-cols h3, .route-h, .acc-t, .why-sub { font-weight: 600; }
.hd .pre { font-weight: 400; }

/* Contact: the original framed design, with tighter spacing and a one-line title */
@media (min-width: 1100px) {
  .contact { padding: 5.25rem 0 4.375rem; }
  .ct-box { height: 21.25rem; }
  .ct-l { top: 50%; translate: 0 -50%; width: auto; }
  .ct-l h2 { white-space: nowrap; font-size: 3.25rem; line-height: 1.1; }
  .ct-r { top: 2.25rem; width: 30.625rem; grid-template-columns: 14.75rem 1fr; row-gap: 0.875rem; }
  .ct-r .btn-wide { margin-top: 0.375rem; }
}
@media (max-width: 1099px) { .ct-l h2 { font-size: 40px; } }
@media (max-width: 640px) { .ct-l h2 { font-size: 36px; } .ct-r { grid-template-columns: minmax(0, 1fr); gap: 22px; } .ct-col p { font-size: 16px; } }
/* Enquiry picture: the soft wash stays behind the words only, and the picture melts into the page with no hard edge */
.enq-bg { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 88%, transparent 100%); }
.enq-bg::after { -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 78%); mask-image: linear-gradient(180deg, #000 50%, transparent 78%); }
@media (max-width: 1099px) { .enq-bg { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 88%, transparent 100%); } }

/* 3D angle control: arrows either side of the 360 icon, which also turns the view */
.pang-row { gap: 1rem; }
.pang-row .box-arrow { width: 2.75rem; height: 2.75rem; min-width: 44px; min-height: 44px; }
.pang-row .p360 { display: flex; align-items: center; gap: 0.625rem; min-height: 44px; padding: 0.375rem 1rem; border: 0; border-radius: 2.5rem; background: #fff; box-shadow: inset 0 0 0 1px rgba(190, 150, 50, .45); cursor: pointer; transition: box-shadow .2s, translate .2s var(--ease); }
.pang-row .p360:hover { box-shadow: inset 0 0 0 1.5px var(--gold); translate: 0 -0.125rem; }
.pang-row .p360:focus-visible, .pang-row .box-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.pang-row .p360 small { display: inline; font-variant-numeric: tabular-nums; }
.p360 svg.spin { animation: p360spin .6s var(--ease); }
@keyframes p360spin { from { rotate: 0deg; } to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .p360 svg.spin { animation: none; } }
@media (max-width: 640px) { .pang-row .p360 small { display: inline; font-size: 11px; } .pang-row .p360 { padding: 6px 12px; } }

/* Contact title on two lines: a light lead-in, then a bold gradient line */
.ct-h span, .ct-h b { display: block; }
.ct-h span { font-weight: 400; font-size: 3.5rem; line-height: 1.05; color: var(--navy); }
.ct-h b { font-weight: 700; font-size: 4.5rem; line-height: 1.05; background: linear-gradient(100deg, #103d5e 0%, #2a6a9a 55%, #103d5e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 1100px) { .ct-l h2.ct-h { font-size: inherit; white-space: nowrap; } .ct-l { left: -1.875rem; } }
@media (max-width: 1099px) { .ct-h span { font-size: 36px; } .ct-h b { font-size: 46px; } }
@media (max-width: 640px) { .ct-h span { font-size: 32px; } .ct-h b { font-size: 40px; } }
/* Specifications hero: a sunrise-sky panel with the tower standing in it */
.sp-hero { display: block; padding: 6.5rem 1.5rem 0; }
.sp-panel { position: relative; height: 40rem; border-radius: 1.75rem; overflow: hidden; isolation: isolate; background: #4f86c6; box-shadow: 0 1.875rem 3.75rem rgba(16, 61, 94, .16); }
.sp-sky { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.sp-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(9, 37, 61, .78) 0%, rgba(9, 37, 61, .52) 34%, rgba(9, 37, 61, 0) 62%), linear-gradient(0deg, rgba(255, 214, 160, .35) 0%, rgba(255, 214, 160, 0) 30%); }
.sp-l { position: absolute; left: 4.75rem; top: 50%; translate: 0 -50%; width: 37.5rem; z-index: 2; }
.sp-kicker { display: inline-flex; align-items: center; gap: 0.75rem; font: 600 0.875rem/1 var(--jos); letter-spacing: .2em; text-transform: uppercase; color: #f3d98a; }
.sp-kicker::before { content: ""; width: 2.25rem; height: 1px; background: currentColor; }
.sp-h { margin-top: 1.125rem; font: 400 3.625rem/1.05 var(--spartan); letter-spacing: -.02em; color: #fff; }
.sp-h span, .sp-h b { display: block; }
.sp-h b { font-weight: 700; font-size: 5rem; background: linear-gradient(100deg, #f7e3a1 0%, #d6aa3a 55%, #f3d98a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.sp-l .hero-sub { margin: 1.125rem 0 1.875rem; max-width: 31.25rem; color: rgba(255, 255, 255, .92); }
.sp-tower { position: absolute; right: 4.375rem; bottom: -2.75rem; width: 31.25rem; height: auto; z-index: 1; clip-path: none; margin: 0; -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 1.25rem 1.875rem rgba(9, 37, 61, .3)); }
@media (max-width: 1099px) {
  .sp-hero { padding: 96px 16px 0; }
  .sp-panel { height: auto; border-radius: 20px; display: flex; flex-direction: column; }
  .sp-panel::before { background: linear-gradient(180deg, rgba(9, 37, 61, .78) 0%, rgba(9, 37, 61, .45) 40%, rgba(9, 37, 61, 0) 65%); }
  .sp-l { position: relative; left: auto; top: auto; translate: none; width: auto; padding: 40px 28px 0; }
  .sp-h { font-size: clamp(34px, 6vw, 48px); }
  .sp-h b { font-size: clamp(42px, 8vw, 64px); }
  .sp-l .hero-sub { font-size: 17px; }
  .sp-tower { position: relative; right: auto; bottom: auto; width: min(78%, 440px); margin: 10px 0 -30px auto; align-self: flex-end; }
}
@media (max-width: 640px) { .sp-l { padding: 32px 22px 0; } .sp-tower { width: 88%; margin: 12px auto -24px; align-self: center; } }

/* Why page: the 24 reasons fan out along an arc as you scroll */
.why-no { display: none; }
.why-list.arc-on { height: 100vh; min-height: 660px; padding: 7rem 0 0; overflow: hidden; display: flex; flex-direction: column; }
.arc-on .why-sub { margin-bottom: 0; }
.arc-on .why-arc { position: relative; flex: 1; }
.arc-on .why-grid { position: absolute; inset: 0; width: auto; margin: 0; display: block; }
.arc-on .why-c { position: absolute; left: 50%; top: 2.75rem; width: 18.75rem; min-height: 21.25rem; margin-left: -9.375rem; padding: 1.875rem 1.625rem 1.75rem; display: flex; flex-direction: column; border-radius: 1.375rem; transform-origin: 50% 50%; will-change: transform; transition: box-shadow .25s; box-shadow: 0 1.125rem 2.5rem rgba(16, 61, 94, .12), inset 0 0 0 1px rgba(255, 255, 255, .7); background: linear-gradient(165deg, #f6e5ad 0%, #fbf6e4 100%); }
.arc-on .why-c:nth-child(6n+2) { background: linear-gradient(165deg, #d5e3dc 0%, #f4f8f3 100%); }
.arc-on .why-c:nth-child(6n+3) { background: linear-gradient(165deg, #e2dcf0 0%, #f8f6fc 100%); }
.arc-on .why-c:nth-child(6n+4) { background: linear-gradient(165deg, #d3e3f2 0%, #f3f8fc 100%); }
.arc-on .why-c:nth-child(6n+5) { background: linear-gradient(165deg, #f1dcd2 0%, #fcf6f2 100%); }
.arc-on .why-c:nth-child(6n) { background: linear-gradient(165deg, #e8e0c6 0%, #faf7ee 100%); }
.arc-on .why-c:hover { translate: none; }
.arc-on .why-c::before { display: none; }
.arc-on .why-no { display: block; position: absolute; right: 1.5rem; top: 1.625rem; font: 600 0.9375rem/1 var(--jos); letter-spacing: .12em; color: rgba(16, 61, 94, .55); }
.arc-on .why-ic { width: 4rem; height: 4rem; background: rgba(255, 255, 255, .75); }
.arc-on .why-ic img { width: 2.25rem; height: 2.25rem; }
.arc-on .why-c h3 { margin-top: 1.375rem; font-size: 1.625rem; }
.arc-on .why-c p { margin-top: 0.625rem; font-size: 1rem; line-height: 1.45; }
.arc-meta { display: none; }
.arc-on .arc-meta { display: flex; align-items: baseline; justify-content: center; gap: 0.375rem; position: absolute; left: 0; right: 0; bottom: 1.875rem; font: 600 1rem/1 var(--jos); letter-spacing: .08em; color: var(--navy); }
.arc-on .arc-meta span { font-size: 1.375rem; color: #a8740a; }
.arc-on .arc-meta small { margin-left: 1.125rem; font: 400 0.875rem/1 var(--jos); letter-spacing: .04em; color: rgba(16, 61, 94, .65); }
@media (max-width: 1099px) {
  .why-list.arc-on { padding-top: 104px; min-height: 600px; }
  .arc-on .why-c { top: 28px; width: 270px; min-height: 300px; margin-left: -135px; padding: 26px 22px; border-radius: 18px; }
  .arc-on .why-c h3 { font-size: 23px; } .arc-on .why-c p { font-size: 15px; }
  .arc-on .why-no { right: 20px; top: 22px; font-size: 13px; }
  .arc-on .arc-meta { bottom: 22px; font-size: 14px; } .arc-on .arc-meta span { font-size: 19px; }
  .arc-on .arc-meta small { display: none; }
}
@media (max-width: 640px) { .arc-on .why-c { width: 240px; margin-left: -120px; } .why-list.arc-on .why-sub { padding-inline: 16px; font-size: 26px; } }

/* Phone and tablet: let the sunrise sky fade out instead of ending on a hard line */
@media (max-width: 1099px) { .hv-sky img { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); } }

/* Single gold leaves at hand-picked spots on the home page */
.giri, .show, .band-split, .enquiry { position: relative; }
.sleaf { position: absolute; z-index: 1; width: 1.875rem; height: 3rem; background: url(../img/leaf-gold.svg) center / contain no-repeat; opacity: .8; pointer-events: none; transform-origin: 50% 100%; animation: leafSway 5.5s ease-in-out infinite alternate; }
.sl-giri-r { right: 7%; top: 8%; rotate: 18deg; animation-delay: -1.2s; }
.sl-giri-l { left: 6%; top: 46%; rotate: -16deg; scale: -1 1; animation-delay: -3s; }
.sl-show { right: 2.5%; bottom: 2%; rotate: 24deg; animation-delay: -2.1s; }
.sl-loc { right: 5%; top: 4%; rotate: -10deg; animation-delay: -4s; }
.sl-enq { left: 47%; top: 15%; rotate: 14deg; animation-delay: -.6s; }
@media (max-width: 1099px) { .sleaf { display: none; } }
@media (prefers-reduced-motion: reduce) { .sleaf { animation: none; } }

/* Hero: the sky sits back (softer, darker, edges shaded) so the gold tower is the brightest thing */
.hv-sky { overflow: hidden; }
.hv-sky img { filter: brightness(.74) saturate(.88) contrast(.94) blur(2px); scale: 1.04; }
.hv-sky::after { background: radial-gradient(ellipse 34% 58% at 50% 56%, rgba(255, 214, 140, .22) 0%, rgba(255, 214, 140, 0) 70%), radial-gradient(ellipse 80% 90% at 50% 50%, rgba(8, 28, 52, 0) 40%, rgba(8, 28, 52, .45) 100%), linear-gradient(180deg, rgba(8, 28, 52, .35) 0%, rgba(8, 28, 52, .12) 34%, rgba(8, 28, 52, 0) 62%); }
/* Calm sky: clouds softened in the image itself, so only a light tone is needed here */
.hv-sky img { filter: brightness(.9) saturate(.95); scale: 1; }
/* Specifications hero: calm sky, with a gentle shade on the right too so the tower is the focus */
.sp-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 30% 70% at 76% 60%, rgba(255, 220, 160, .18) 0%, rgba(255, 220, 160, 0) 70%), linear-gradient(270deg, rgba(9, 37, 61, .32) 0%, rgba(9, 37, 61, 0) 22%); }

/* Leaf spots, round 2 */
.sl-film { left: 7.5%; top: 2%; rotate: -14deg; scale: -1 1; animation-delay: -2.4s; }
.sl-enq { left: 7.5%; top: 7%; }
/* Contact: three columns (contact, project location, Giridhari Homes office) inside a wider frame */
@media (min-width: 1100px) {
  .contact .ct-box { width: 70rem; }
  .contact .ct-r { left: 25rem; width: 42.5rem; grid-template-columns: 12.5rem 1fr 1fr; column-gap: 1.75rem; }
  .contact .ct-r .btn-wide { grid-column: 1 / -1; }
}
@media (min-width: 641px) and (max-width: 1099px) { .ct-r { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ct-r .btn-wide { grid-column: 1 / -1; } }
.hv .sl-film { z-index: 3; left: 6.5%; top: auto; bottom: 0.875rem; }
.sl-enq { top: 3%; }

/* Hero cards: the building image never grows on hover or focus, so its top is never cut off */
.qk-c:focus-visible .qk-i img { transform: none; }
@media (min-width: 641px) { .hv .qk-i.tw img { top: 7%; } }

/* ===== Round 11: polish ===== */
/* No decorative leaves anywhere */
.sleaf, .hleaf, .lfc, .sprig, .leaf-cl, .leaf-fall { display: none !important; }

/* Home hero: two-tone headline, the short line, then three key facts */
.hv-h span { font-weight: 400; color: #fff; }
.hv-h b { font-weight: 700; }
.hv-strong { margin-top: 0.75rem; font: 500 1.4375rem/1.3 var(--jos); letter-spacing: .01em; }
.hv-tags { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 0; margin: 1.125rem 0 0; padding: 0; list-style: none; font: 600 0.8125rem/1 var(--jos); letter-spacing: .22em; text-transform: uppercase; color: #f6dc92; text-shadow: 0 1px 8px rgba(8, 26, 54, .65); }
.hv-tags li { display: inline-flex; align-items: center; padding-top: 0.125rem; white-space: nowrap; }
.hv-tags li + li::before { content: ""; width: 0.3125rem; height: 0.3125rem; margin: -0.125rem 1.125rem 0; border-radius: 50%; background: currentColor; }
@media (max-width: 1099px) { .hv-strong { font-size: 18px; } .hv-tags { margin-top: 14px; font-size: 11.500px; letter-spacing: .16em; } .hv-tags li + li::before { width: 4px; height: 4px; margin-inline: 10px; } }
@media (max-width: 640px) { .hv-tags { font-size: 10.500px; letter-spacing: .12em; } .hv-tags li + li::before { margin-inline: 8px; } }

/* Key plan: the chosen home glows on the site plan */
.pk-in { position: relative; }
.pk-u { position: absolute; border-radius: 0.1875rem; pointer-events: none; transition: background .3s, box-shadow .3s; }
.pk-u.on { background: rgba(214, 170, 58, .5); box-shadow: inset 0 0 0 2px #b8892a, 0 0 0 3px rgba(214, 170, 58, .3); animation: pkGlow 1.6s ease-in-out infinite alternate; }
@keyframes pkGlow { from { background: rgba(214, 170, 58, .3); } to { background: rgba(214, 170, 58, .62); } }
.pk-cap { margin-top: 0.75rem; font: 500 0.8125rem/1.35 var(--jos); color: var(--navy); text-align: center; }
@media (prefers-reduced-motion: reduce) { .pk-u.on { animation: none; } }

/* "24 Carat" in the button gold */
.hd .main b.gold-name { background: linear-gradient(135deg, #e3bf5f 0%, #c99a2e 45%, #a5791b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Location band: centred over the map, which now uses the page width */
.band-split { flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; padding: 4.5rem 1.5rem 2.75rem; text-align: center; }
.band-split > div { max-width: 56.25rem; }
.band-split .body { margin: 0.75rem auto 0; max-width: 43.75rem; }
.band-split .hd .pre { color: var(--navy); }
@media (min-width: 1100px) { .map { width: calc(100% - 5rem); max-width: 97.5rem; } }
@media (max-width: 640px) { .band-split { align-items: center; padding: 44px 16px 28px; } }

/* Neighbourhood title on two lines */
.nb-h span { display: block; }

/* Neoclassical paragraph on three lines */
@media (min-width: 1100px) { .arch .center-p { max-width: 67.5rem; } }

/* Rounder form fields */
.field input, .field select, .btn-submit { border-radius: 0.75rem; }

/* Clubhouse slider: small dots instead of the row of buttons */
.cs-tabs { justify-content: center; gap: 0.25rem; padding: 0; border-top: 0; bottom: 1.25rem; overflow: visible; }
.cs-b, .cs-b:hover, .cs-b[aria-pressed="true"] { display: grid; place-items: center; width: 1.875rem; min-width: 1.875rem; height: 1.875rem; min-height: 1.875rem; padding: 0; font-size: 0; color: transparent; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cs-b::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 0.5rem; background: rgba(255, 255, 255, .5); transition: width .3s var(--ease), background .3s; }
.cs-b:hover::before { background: #fff; }
.cs-b[aria-pressed="true"]::before { width: 1.75rem; background: var(--foil-btn); }
@media (max-width: 1099px) { .cs-tabs { left: 0; right: 0; justify-content: center; padding: 0; } .cs-b, .cs-b:hover, .cs-b[aria-pressed="true"] { width: 30px; min-width: 30px; height: 44px; min-height: 44px; padding: 0; } .cs-b::before { width: 8px; height: 8px; } .cs-b[aria-pressed="true"]::before { width: 26px; } }

/* Specifications label, styled like WHY 24 CARAT? */
.sp-kicker { font: 600 1.25rem/1 var(--jos); letter-spacing: .2em; color: #f3d98a; }
.sp-kicker::before { display: none; }
@media (max-width: 1099px) { .sp-kicker { font-size: 15px; } }

/* Media title a size down */
.md-hero .grad-t.big { font-size: 3.75rem; }
@media (max-width: 1099px) { .md-hero .grad-t.big { font-size: clamp(34px, 6.4vw, 48px); } }

/* Why Kismatpur: heading on one line, paragraph centred under it */
.why-nb { width: 61.25rem; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; text-align: center; padding: 4.5rem 0 3.5rem; }
.why-nb .hd .pre, .why-nb .hd .main { display: inline; }
.why-nb .hd .pre { font-size: 3.4375rem; color: var(--navy); }
@media (max-width: 1099px) { .why-nb { width: auto; } .why-nb .hd .pre { font-size: inherit; } }

/* A neighbourhood with room to grow: one line */
@media (min-width: 1100px) { .why-k .hd .pre, .why-k .hd .main { display: inline; } .why-k .hd .pre { font-size: 3.4375rem; color: var(--navy); } }

/* New hero: more room above the title, a bigger tower */
.hv { height: 71.25rem; }
.hv-txt { top: 8.375rem; padding: 0 1.5rem; }
.hv-h { font-size: 4.75rem; line-height: 1.05; }
.hv-sky { height: 60rem; }
.hv-tower { top: 19.875rem; height: 48.75rem; }
.hv-mist { top: 50rem; }
@media (min-width: 1100px) { .hv .qk { top: 54.25rem; } }
@media (max-width: 1099px) {
  .hv { height: auto; }
  .hv-txt { top: auto; }
  .hv-h { font-size: clamp(38px, 7.6vw, 60px); }
  .hv-sky { height: 150vw; }
  .hv-tower { top: auto; height: auto; width: min(86vw, 540px); }
}
/* Round 11 fixes */
.why-nb .hd .pre, .why-k .hd .pre { margin-right: .24em; }
.nb-h span:first-child { font-size: .64em; font-weight: 500; color: var(--navy); }
@media (min-width: 1100px) { .arch .center-p { max-width: 51.875rem; } }
.md-hero .grad-t.big { font-size: 3.375rem; }
/* Phone: the three facts sit on two tidy rows */
@media (max-width: 640px) { .hv-tags li:first-child { flex-basis: 100%; justify-content: center; } .hv-tags li:nth-child(2)::before { display: none; } }
/* One-line headings: both words the same size */
.why-nb .hd .pre, .why-nb .hd .main { font-size: 3.4375rem; }
@media (min-width: 1100px) { .why-k .hd .pre, .why-k .hd .main { font-size: 3.25rem; } }
@media (max-width: 1099px) { .why-nb .hd .pre, .why-nb .hd .main { font-size: 40px; } }
@media (max-width: 640px) { .why-nb .hd .pre, .why-nb .hd .main { font-size: 34px; } }
/* Plan view on tablets and phones: the picture fits its frame (the frame is a button, so give the limit in real units) */
@media (max-width: 1099px) { .pstage img, .pstage [data-plan-3d] { max-height: min(88vw, 520px); width: auto; } }
@media (max-width: 1099px) { .pfacts { text-align: center; } }

/* ===== Round 12 ===== */
/* Hero: text a step higher, tower a little smaller */
@media (min-width: 1100px) { .hv-txt { top: 7.25rem; } .hv-tower { top: 18.5rem; height: 45rem; } }
@media (max-width: 1099px) { .hv-tower { width: min(78vw, 480px); } }

/* Gold words in headings use the cream gold of the Book a Visit button */
.hd .main b, .hd .main b.gold-name, .serif-t b.gold-w { background: linear-gradient(135deg, #ebcb7a 0%, #d4ab4a 45%, #b5882b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.serif-t b.gold-w { font-weight: inherit; padding-right: .04em; }

/* Even line lengths for intro paragraphs */
.band-split .body, .hero-sub, .center-p, .giri-p, .wn-p, .lead, .enq-text { text-wrap: balance; }
.am-hero .am-sub { max-width: 62.5rem; }

/* Map blends into the page: full width, soft edges, no frame */
.map, html .map { width: 100%; max-width: none; margin: 0; border-radius: 0; box-shadow: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-composite: intersect; }
@media (max-width: 1099px) { .map, html .map { margin-inline: 0; } }

/* Contact: the email sits on one line */
@media (min-width: 1100px) {
  .contact .ct-box { width: 73.75rem; }
  .contact .ct-r { width: 47.5rem; grid-template-columns: 17.5rem 1fr 1fr; }
}
.ct-col a[href^="mailto"] { white-space: nowrap; }
@media (max-width: 380px) { .ct-col a[href^="mailto"] { white-space: normal; } }

/* Specifications title: "THE DETAILS," set like WHY 24 CARAT? */
.sp-h span { margin-bottom: 0.875rem; font: 600 1.5rem/1.1 var(--jos); letter-spacing: .2em; text-transform: uppercase; color: #f3d98a; }
@media (max-width: 1099px) { .sp-h span { font-size: 17px; margin-bottom: 10px; } }

/* Plans page: tighter gaps above the Neoclassical and clubhouse headings */
.unit { padding-bottom: 2.25rem; }
.arch { padding-top: 2.5rem; }
.master { padding-bottom: 1.5rem; }
.club { padding-top: 1.875rem; }
@media (max-width: 1099px) { .unit { padding-bottom: 24px; } .arch { padding-top: 40px; } .master { padding-bottom: 16px; } .club { padding-top: 24px; } }

/* Media hero: three columns of pictures running to the right edge */
@media (min-width: 1100px) {
  .md-cols { left: 40rem; right: 0; gap: 1.25rem; }
  .md-col { flex: 1 1 0; width: auto; }
  .md-col img { width: 100%; }
  .md-col.c { margin-top: 1.875rem; } .md-col.c img { height: 15.625rem; }
}
@media (max-width: 1099px) { .md-col.c { display: none; } }

/* Why icons: simple line drawings */
.why-ic svg { width: 2rem; height: 2rem; }
@media (max-width: 1099px) { .why-ic svg { width: 28px; height: 28px; } }
.foot-giri { width: 8.75rem; filter: none; }
/* Hero title: Josefin Sans, one gold colour across the whole line */
.hv-h { font-family: var(--jos); font-weight: 700; font-size: 5.125rem; line-height: 1.04; letter-spacing: -.005em; font-size-adjust: none; }
.hv-h span, .hv-h b { font-weight: 700; color: transparent; }
@media (max-width: 1099px) { .hv-h { font-size: clamp(40px, 8vw, 64px); } }

/* ===== Round 13 ===== */
/* Desktop scale: the calmer proportions you liked at 75–80% browser zoom, now at 100% */
@media (min-width: 1100px) { html { font-size: min(calc(100vw / 90), 20px); } }

/* Hero title: Nave when the Adobe Fonts kit is added; until then the lightest League Spartan. Even spacing below it */
.hv-h { font-family: "nave", var(--spartan); font-weight: 400; font-size: 5.25rem; line-height: 1; letter-spacing: -.01em; }
.hv-h span, .hv-h b { font-weight: 400; }
.hv-strong { margin-top: 1.25rem; }
.hv-tags { margin-top: 1.125rem; }
@media (max-width: 1099px) { .hv-h { font-size: clamp(42px, 8.4vw, 66px); } .hv-strong { margin-top: 14px; } .hv-tags { margin-top: 12px; } }

/* "A closer look at 24 Carat": the intro line runs on one line now the button is gone */
@media (min-width: 1100px) { .film-sec .lead { max-width: none; } }

/* Enquiry heading on one line */
@media (min-width: 1100px) { .enquiry .hd.one { white-space: nowrap; } .enquiry .hd.one .pre, .enquiry .hd.one .main { font-size: 3.375rem; } }

/* Request a Call Back: label centred, arrow at the end */
.btn-submit { position: relative; justify-content: center; }
.btn-submit .chev { position: absolute; right: 1rem; top: 50%; translate: 0 -50%; }

/* Specification titles a size smaller */
.acc-t { font-size: 1.5rem; } .acc-n { font-size: 1.5rem; }
.acc-i.on .acc-t { font-size: 2.375rem; } .acc-i.on .acc-n { font-size: 4rem; }
@media (max-width: 1099px) { .acc-t { font-size: 21px; } .acc-i.on .acc-t { font-size: 30px; } .acc-i.on .acc-n { font-size: 48px; } }

/* A neighbourhood with room to grow: no bold */
.why-k .hd .main { font-weight: 400; }

/* Clubhouse slider dots a little lower */
@media (min-width: 1100px) { .cs-tabs { bottom: 0.5rem; } }

/* Media hero: two columns, moved toward the right edge */
@media (min-width: 1100px) {
  .md-cols { left: auto; right: 4.375rem; gap: 1.375rem; }
  .md-col { flex: none; width: 18.125rem; }
  .md-col img { width: 18.125rem; }
}

/* round 14: less empty sky above the Why tower, tighter gap before "Find your way" */
.why-pic { height: 36.875rem; }
.why-pic img { object-position: 50% 100%; }
@media (max-width: 1099px) { .why-pic { height: auto; aspect-ratio: 16 / 11; } }
.route { padding-bottom: 2.25rem; }
.route + .band-split { padding-top: 2.25rem; }
@media (max-width: 1099px) { .route { padding-bottom: 28px; } .route + .band-split { padding-top: 24px; } }

/* round 14: the showcase picture is wide like the photos, so nothing important is cut off; three even thumbnails below */
.show { grid-template-columns: 42.5rem 29.375rem; gap: 2.125rem; align-items: start; }
.show-main, .show.alt .show-main { height: auto; aspect-ratio: 3 / 2; border-radius: 0.625rem; }
.show-side { align-self: stretch; padding-top: 0.375rem; }
.thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; margin-top: 1.125rem; }
.thumbs button { height: auto; aspect-ratio: 4 / 3; }
@media (max-width: 1099px) {
  .show { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .show-main, .show.alt .show-main { aspect-ratio: 3 / 2; }
  .show-side { padding-top: 0; }
  .thumbs { gap: 10px; margin-top: 16px; }
}

/* round 14: hero heading in Nave Light (Adobe Fonts kit); Fraunces Light stands in until the kit link is added */
.hv-h { font-family: "nave", "Fraunces", Georgia, serif; font-weight: 300; font-size: 4.875rem; line-height: 1.04; letter-spacing: -.01em; font-size-adjust: none; font-variation-settings: "opsz" 36, "SOFT" 0, "WONK" 0; padding-bottom: .08em; }
.hv-h span, .hv-h b { font-weight: 300; }
.hv-strong { margin-top: 0.75rem; }
.hv-tags { margin-top: 0.875rem; }
@media (max-width: 1099px) { .hv-h { font-size: clamp(40px, 8vw, 64px); } .hv-strong { margin-top: 10px; } .hv-tags { margin-top: 12px; } }

/* round 14: the arrow sits right after the words, and the pair is centred together */
.btn-submit { gap: 0.75rem; }
.btn-submit .chev { position: static; translate: none; }

/* round 14: tighter gap between the media gallery and "Let's talk about" */
.gallery { padding-bottom: 2.5rem; }
.gallery + .enquiry { padding-top: 4rem; }
@media (max-width: 1099px) { .gallery { padding-bottom: 28px; } .gallery + .enquiry { padding-top: 36px; } }

/* round 15: 100% zoom now looks like the old 80% zoom (smaller type and boxes), with a readable floor on small laptops */
@media (min-width: 1100px) { html { font-size: clamp(14px, calc(100vw / 96), 18px); } }

/* round 15: hero words sit higher and closer together */
@media (min-width: 1100px) { .hv-txt { top: 6.5rem; } }
.hv-strong { margin-top: 0.375rem; }
.hv-tags { margin-top: 0.75rem; }
@media (max-width: 1099px) { .hv-strong { margin-top: 6px; } .hv-tags { margin-top: 10px; } }

/* round 15: the Book a Visit drawer button matches the page button: words and arrow centred together */
html .drawer .btn-submit { justify-content: center; gap: 0.75rem; }
html .drawer .btn-submit .chev { position: static; translate: none; }

/* round 16 audit: phone map labels larger (were 7.5-8.5px), still fitting the whole map */
@media (max-width: 720px) { .m-l { font-size: 11px; line-height: 1.02; } .m-l.sm, .m-l.wide { font-size: 9.5px; } }
@media (max-width: 400px) { .m-l { font-size: 10.5px; } .m-l.sm, .m-l.wide { font-size: 9.5px; } .m-l.hh { margin-left: -20px; } .m-l.eco { margin-left: -14px; } }

/* round 16 audit: clubhouse dots are 40px wide on phones so each one is easy to tap */
@media (max-width: 1099px) { .cs-b, .cs-b:hover, .cs-b[aria-pressed="true"] { width: 40px; min-width: 40px; } .cs-tabs { gap: 0; } }

/* round 16 audit: the 360° caption is at least 12px */
.p360 small, .pang-row .p360 small { font-size: max(12px, 0.75rem); }
@media (max-width: 720px) { .m-l.sm { margin-top: -10px; margin-left: -6px; } }

/* round 16: the form and the contact details read as one closing block */
.enquiry + .contact { padding-top: 1.5rem; }
@media (max-width: 1099px) { .enquiry + .contact { padding-top: 12px; } }

/* round 17: the badminton picture uses a wide frame like the photo, so all three players show */
@media (min-width: 1100px) { #badminton.feat.rev { grid-template-columns: 45rem 25rem; column-gap: 3.5rem; } }
#badminton .feat-b { height: auto; aspect-ratio: 1500 / 916; }
#badminton .feat-b img { object-position: 50% 50%; }

/* round 17: all three amenity pictures use the same wide frame as their photos */
@media (min-width: 1100px) { .feat { grid-template-columns: 25rem 45rem; column-gap: 3.5rem; } .feat.rev { grid-template-columns: 45rem 25rem; } }
.feat-b, .feat.rev .feat-b, #badminton .feat-b { height: auto; aspect-ratio: 16 / 9; }
#badminton .feat-b { aspect-ratio: 1500 / 916; }
@media (max-width: 1099px) { .feat-b, .feat.rev .feat-b { aspect-ratio: 16 / 10; } #badminton .feat-b { aspect-ratio: 1500 / 916; } }

/* round 17: "Decentralised amenities" wraps inside the phone screen */
@media (max-width: 640px) { .grad-t.big.center-t { white-space: normal; text-wrap: balance; padding-inline: 16px; max-width: 100%; box-sizing: border-box; } }

} /* end @layer legacy */

/* =====================================================================
   DESIGN SYSTEM (round 18) — one type scale, one colour logic, one content width.
   Everything below overrides the earlier layered rules on purpose.
   Page title (H1)      : League Spartan 600, blue title gradient (gold on photo heroes)
   Section headline (H2): League Spartan 600 navy; optional light lead-in (.pre) above it
   Small heading (H3)   : League Spartan 600 navy
   Intro / body / small : Josefin Sans 400 navy
   Labels               : Josefin Sans 600 uppercase, gold ink
   ===================================================================== */
:root {
  --w: 70rem;
  --fs-h1: 4.75rem; --fs-h1-pre: 2.125rem;
  --fs-h2: 3.25rem; --fs-h2-pre: 1.875rem;
  --fs-h3: 1.4375rem; --fs-h4: 1.1875rem;
  --fs-lead: 1.1875rem; --fs-body: 1.0625rem; --fs-small: 0.9375rem;
  --fs-eye: 0.875rem; --fs-eye-page: 1.1875rem;
  --ink: #103d5e; --ink-soft: #3b5a72; --gold-ink: #8a6a10; --gold-light: #f1d68a;
}
@media (max-width: 1099px) {
  :root { --w: calc(100% - 48px); --fs-h1: 50px; --fs-h1-pre: 24px; --fs-h2: 38px; --fs-h2-pre: 23px; --fs-h3: 21px; --fs-h4: 18px; --fs-lead: 18px; --fs-body: 16px; --fs-small: 15px; --fs-eye: 13px; --fs-eye-page: 15px; }
}
@media (max-width: 640px) {
  :root { --w: calc(100% - 32px); --fs-h1: 38px; --fs-h1-pre: 20px; --fs-h2: 30px; --fs-h2-pre: 19px; --fs-h3: 20px; --fs-h4: 17px; --fs-lead: 17px; --fs-body: 16px; --fs-small: 15px; --fs-eye: 12px; --fs-eye-page: 13px; }
}

/* ---- Page titles (H1) ---- */
html body h1:not(.hv-h) { font-family: var(--spartan); font-size: var(--fs-h1); font-weight: 600; font-style: normal; line-height: 1.05; letter-spacing: -.012em; font-size-adjust: .4; text-wrap: balance; }
html body h1:not(.hv-h):not(.sp-h) { background: var(--title-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
html body h1.nb-h span { display: block; font-size: var(--fs-h1-pre); font-weight: 400; line-height: 1.2; margin-bottom: .1em; }
html body h1.nb-h b, html body h1.nb-h span + span { font-size: inherit; font-weight: 600; }
/* specifications: label line + gold title on the photo */
html body h1.sp-h { color: #fff; }
html body h1.sp-h span { display: block; margin-bottom: 0.875rem; font: 600 var(--fs-eye-page)/1.2 var(--jos); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light); font-size-adjust: none; }
html body h1.sp-h b { display: block; font-size: var(--fs-h1); font-weight: 600; line-height: 1.05; }

/* ---- Page labels: "WHY 24 CARAT?" and "THE DETAILS," share one style ---- */
html body .why-eye { font: 600 var(--fs-eye-page)/1.2 var(--jos); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 0.875rem; }
/* ---- Section labels ---- */
html body :is(.route-eye, .cs-k) { font: 600 var(--fs-eye)/1.2 var(--jos); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 0.625rem; }
html body .cs-k { color: var(--gold-light); }

/* ---- Section headlines (H2) ---- */
html body h2:is(.serif-t, .grad-t, .giri-h, .route-h, .why-sub, .arch-h, .cs-t) { font-family: var(--spartan); font-size: var(--fs-h2); font-weight: 600; font-style: normal; line-height: 1.1; letter-spacing: -.01em; font-size-adjust: .4; text-wrap: balance; }
html body h2:is(.serif-t, .grad-t, .giri-h, .route-h, .why-sub, .arch-h) { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); padding-bottom: 0; }
html body h2.cs-t { color: #fff; }
html body .hd, html body .ct-h { font-family: var(--spartan); font-style: normal; text-wrap: balance; }
html body :is(.hd, .ct-h) :is(.pre, span:first-child) { display: block; font-size: var(--fs-h2-pre); font-weight: 400; font-style: normal; line-height: 1.2; letter-spacing: -.005em; color: var(--ink); font-size-adjust: .4; }
html body :is(.hd .main, .ct-h b) { display: block; font-size: var(--fs-h2); font-weight: 600; font-style: normal; line-height: 1.08; letter-spacing: -.012em; color: var(--ink); font-size-adjust: .4; }
html body .hd .main b { font-weight: 600; font-style: normal; }
html body .hd.light :is(.pre, .main) { color: #fff; }
/* one-line variant ("A closer look at 24 Carat"): both parts at headline size */
html body .hd.one :is(.pre, .main) { display: inline; font-size: var(--fs-h2); line-height: 1.1; }
html body .hd.one .pre { font-weight: 400; }
html body .hd.one .main { margin-left: .2em; }
/* "A neighbourhood with room to grow" stays light, as requested */
html body .why-k .hd .main { font-weight: 400; }
html body .ct-h span { margin-bottom: 0.125rem; }

/* ---- Small headings (H3 / column titles) ---- */
html body :is(.why-c h3, .wk-cols h3, .mp-lh, .lv-t) { font-family: var(--spartan); font-size: var(--fs-h3); font-weight: 600; font-style: normal; line-height: 1.22; letter-spacing: -.008em; color: var(--ink); font-size-adjust: .4; }
html body .ct-col h3 { font-family: var(--spartan); font-size: var(--fs-h4); font-weight: 600; line-height: 1.25; letter-spacing: 0; color: var(--ink); font-size-adjust: .4; }

/* ---- Text ---- */
html body :is(.body, .center-p, .lead, .enq-text, .giri-p, .wn-p, .acc-p, .drawer-text, .feat-l .body, .show-side .body) { font-family: var(--jos); font-size: var(--fs-body); font-weight: 400; line-height: 1.6; letter-spacing: 0; color: var(--ink); }
html body :is(.hero-sub, .am-sub) { font-family: var(--jos); font-size: var(--fs-lead); font-weight: 400; line-height: 1.55; letter-spacing: 0; color: var(--ink); text-wrap: balance; }
html body .sp-hero .hero-sub { color: rgba(255, 255, 255, .94); }
html body h1 + .center-p { font-size: var(--fs-lead); line-height: 1.55; }
html body :is(.why-c p, .lv-d, .ct-col p, .wk-cols p) { font-family: var(--jos); font-size: var(--fs-small); font-weight: 400; line-height: 1.55; letter-spacing: 0; color: var(--ink-soft); }
html body .ct-col p a { color: inherit; }
/* comfortable line lengths */
html body :is(.center-p, .wn-p) { max-width: 40em; margin-inline: auto; }
html body :is(.hero-sub, .am-sub) { max-width: 36em; }
html body .center .hero-sub, html body .page-hero.center :is(.hero-sub, .am-sub) { margin-inline: auto; }
html body :is(.body, .enq-text, .lead) { max-width: 34em; }

/* ---- One content width on laptops and desktops ---- */
@media (min-width: 1100px) {
  html body :is(.split-head, .video, .pview, .frames, .gl-grid, .why-pic, .why-grid, .route-top, .tl, .lvls, .mp-grid, .club-grid, .ct-box, .cs-frame, .wk-cols) { width: var(--w); max-width: var(--w); margin-inline: auto; }
  html body .why-k .hd { width: var(--w); margin-inline: auto; }
  html body .show { grid-template-columns: 40rem 27.875rem; column-gap: 2.125rem; }
  html body .feat { grid-template-columns: 23.75rem 42.5rem; column-gap: 3.75rem; }
  html body .feat.rev { grid-template-columns: 42.5rem 23.75rem; }
  html body .enquiry { padding-inline: 0; }
  html body .enq-in { width: var(--w); margin-inline: auto; }
  html body .md-hero { padding-left: calc((100% - var(--w)) / 2); }
  html body .sp-l { left: calc((100% - var(--w)) / 2); }
}

/* ---- Contact box: content sits inside the frame, heading on the frame line ---- */
@media (min-width: 1100px) {
  html body .contact .ct-box { height: auto; min-height: 20rem; display: grid; grid-template-columns: 18.75rem minmax(0, 1fr); align-items: center; padding: 3.5rem 3.25rem 3.25rem 0; }
  html body .contact .ct-l { position: relative; left: 0; top: auto; translate: none; width: auto; padding-right: 1.5rem; }
  html body .contact .ct-r { position: static; width: auto; left: auto; top: auto; grid-template-columns: 16.5rem minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.75rem; row-gap: 1.25rem; }
  html body .contact .ct-r .btn-wide { margin-top: 0.25rem; }
  html body .film-sec .lead { max-width: none; }
}

/* ---- Card titles: one size for small cards, no orphaned hyphen breaks ---- */
html body .why-c h3 { font-size: var(--fs-h4); line-height: 1.25; text-wrap: pretty; hyphens: manual; }
/* ---- Media hero: two-line H1 ---- */
@media (min-width: 1100px) {
  html body .md-l { width: 36.25rem; }
  html body .md-l h1 { text-wrap: balance; }
}
.nw { white-space: nowrap; }

/* ---- Gold accent words on cream: deeper gold so large text meets 3:1 ---- */
html body :is(.hd .main b, .hd .main b.gold-name, .serif-t b.gold-w) { background: linear-gradient(135deg, #b0852a 0%, #9c741b 50%, #86620f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 1100px) {
  html body .sp-grid { width: var(--w); grid-template-columns: 37.5rem minmax(0, 1fr); column-gap: 4rem; }
  html body .building .sp-grid { grid-template-columns: minmax(0, 1fr) 37.5rem; }
}

/* ---- Centred page heroes: first line of content starts at the same height on every page ---- */
@media (min-width: 1100px) { html body :is(.unit, .am-hero, .nb-hero, .why-hero) { padding-top: 10rem; } }
@media (max-width: 1099px) { html body .why-hero { padding-top: 110px; } }

/* ===== Forms: one field, button and message system for the page form and the drawer ===== */
html body .field :is(input, select) { height: 3rem; border-radius: 0.625rem; font-size: 0.9375rem; }
html body .btn-submit { height: 3.125rem; border-radius: 0.625rem; font-size: 1rem; }
html body .field :is(input, select):focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
html body .field.bad :is(input, select) { border-color: #b3261e; background-color: #fff; box-shadow: 0 0 0 1px #b3261e inset; }
html body .err { margin: 0.375rem 0.125rem 0; font: 500 0.875rem/1.35 var(--jos); letter-spacing: 0; color: #a31f18; text-align: left; }
html body .form-msg { margin-top: 0.125rem; padding: 1rem 1.125rem; border-radius: 0.75rem; border: 1px solid rgba(16, 61, 94, .12); background: #fff; font: 400 0.9375rem/1.5 var(--jos); letter-spacing: 0; text-align: center; box-shadow: 0 0.5rem 1.375rem rgba(16, 61, 94, .08); }
html body .form-msg.ok { color: #125c33; border-color: rgba(18, 92, 51, .25); }
html body .form-msg.bad { color: #a31f18; border-color: rgba(163, 31, 24, .25); }
html body .form-msg.wa { color: var(--ink); border-color: rgba(201, 154, 46, .45); }
html body .form-msg.wa p { margin: 0 auto; max-width: 26em; text-wrap: balance; }
html body .btn-wa { display: flex; align-items: center; justify-content: center; gap: 0.625rem; width: 100%; height: 3.125rem; margin-top: 0.75rem; border-radius: 0.625rem; background: var(--foil-btn); color: var(--navy); font: 600 1rem/1 var(--ag); letter-spacing: 0; transition: filter .2s; }
html body .btn-wa:hover { background: var(--foil-btn); filter: brightness(1.06) saturate(1.05); }
html body .btn-wa:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
html body .btn-submit:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
html body .drawer .btn-submit:focus-visible { outline-color: var(--gold); }
@media (max-width: 1099px) {
  html body .field :is(input, select) { height: 50px; font-size: 16px; }
  html body .btn-submit, html body .btn-wa { height: 52px; font-size: 16px; }
  html body .err, html body .form-msg { font-size: 15px; }
}
html body .drawer-text { text-wrap: pretty; }
/* "Building for Hyderabad since 2008." reads as an H3-level statement in brand navy */
html body .giri-m { font-family: var(--spartan); font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; color: var(--ink); text-wrap: balance; font-size-adjust: .4; }

html body .cs-cap { text-shadow: 0 1px 14px rgba(4, 16, 28, .55), 0 0 2px rgba(4, 16, 28, .35); }
/* Left-aligned hero H1 sits on the text edge */
html body .md-l h1 { padding-inline: 0; }
/* Reason cards on phones: icon beside the text so 24 cards stay scannable */
@media (max-width: 640px) {
  html body .why-grid { gap: 10px; }
  html body .why-c { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px 16px 18px; }
  html body .why-c .why-ic { grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; }
  html body .why-c h3 { margin-top: 2px; }
  html body .why-c p { margin-top: 4px; }
}
/* Media collage: soft fade where the columns are clipped instead of a hard cut */
html body .md-cols { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 84%, transparent 100%); }
@media (max-width: 640px) { html body .hv-tags { font-size: 12px; letter-spacing: .1em; } html body .hv-tags li + li::before { margin-inline: 7px; } }
html body .hv-strong { text-wrap: balance; }

/* Hero cards: give their shadow room inside the clipped hero (it was cut off in a hard line), keeping the same gap to the next heading */
@media (min-width: 1100px) { html body .hv { height: 74.5rem; } html body .hv + .film-sec { padding-top: 0; } }
@media (max-width: 1099px) { html body .hv { padding-bottom: 88px; } html body .hv + .film-sec { padding-top: 16px; } }
@media (min-width: 1100px) { html body .hv::after { height: 28.75rem; background: linear-gradient(0deg, var(--page) 0%, var(--page) 46%, rgba(247, 247, 228, .82) 64%, rgba(247, 247, 228, .35) 84%, rgba(247, 247, 228, 0) 100%); } }
/* Submit button: the words sit at the exact centre; an invisible spacer on the left balances the arrow on the right */
/* (replaced by the grid below) */

/* "Talk to Our Team": keep the original contact heading (large regular line + bold gradient line) */
html body .contact .ct-h span { font-size: 3.5rem; font-weight: 400; line-height: 1.05; color: var(--navy); margin-bottom: 0; }
html body .contact .ct-h b { font-size: 4.5rem; font-weight: 700; line-height: 1.05; letter-spacing: 0; background: linear-gradient(100deg, #103d5e 0%, #2a6a9a 55%, #103d5e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 1100px) { html body .contact .ct-box { grid-template-columns: 20.625rem minmax(0, 1fr); } }
@media (max-width: 1099px) { html body .contact .ct-h span { font-size: 36px; } html body .contact .ct-h b { font-size: 46px; } }
@media (max-width: 640px) { html body .contact .ct-h span { font-size: 32px; } html body .contact .ct-h b { font-size: 40px; } }
/* As before: the heading starts left of the frame line and crosses the gap in the frame */
@media (min-width: 1100px) { html body .contact .ct-l { left: -1.875rem; } }

/* ===== Plan viewer: a bigger floor plan, drawn straight on the page ===== */
@media (min-width: 1100px) {
  html body .pview { grid-template-columns: 13.75rem minmax(0, 1fr) 13.375rem; column-gap: 1.5rem; }
  html body .pkey img { width: 13.75rem; }
  html body .pfacts { padding-left: 3.125rem; }
  html body .pfacts > div::before { left: -2.75rem; width: 1.75rem; }
  html body .pview[data-mode="2d"] .pstage, html body [data-mode="2d"] .pview .pstage { height: 31.25rem; }
}
/* the drawing's off-white paper melts into the cream page instead of showing as a box */
html body .pstage { background: var(--page); }
html body .pstage [data-plan-img] { mix-blend-mode: darken; }
/* each drawing is sized to sit just inside its own paper margin (margins measured per image); width, not scale, because GSAP owns the transform */
html body .pstage [data-plan-img] { --s: 1.03; width: calc(100% * var(--s)); max-width: none; height: auto; max-height: none; }
html body .pstage [data-plan-img][src$="fp-1192.webp"] { --s: 1.09; }
html body .pstage [data-plan-img][src$="fp-1951.webp"] { --s: 1.1; }
html body .pstage { overflow-x: clip; overflow-y: visible; }

/* Clubhouse slider: plain arrows, caption and arrows sit lower (bottom row) */
html body .cs-nav { display: flex; gap: 0.25rem; }
html body .cs-nav .box-arrow { width: 2.75rem; height: 2.75rem; border: 0; border-radius: 0.5rem; background: none; color: #fff; filter: drop-shadow(0 1px 6px rgba(4, 16, 28, .5)); transition: color .2s, translate .2s var(--ease); }
html body .cs-nav .box-arrow svg { width: 1.75rem; height: 1.75rem; }
html body .cs-nav .box-arrow:hover { background: none; color: #f1d68a; }
html body .cs-nav .box-arrow.next:hover { translate: 0.1875rem 0; }
html body .cs-nav .box-arrow.prev:hover { translate: -0.1875rem 0; }
html body .cs-nav .box-arrow:active { translate: none; }
html body .cs-nav .box-arrow:focus-visible { outline: 2px solid #f1d68a; outline-offset: 0; }
@media (min-width: 1100px) {
  html body .cs-cap { bottom: 3.625rem; }
  html body .cs-tabs { bottom: 0.875rem; }
  html body .cs-nav { right: 1.875rem; bottom: 0.4375rem; }
}
@media (max-width: 1099px) {
  html body .cs-nav .box-arrow { width: 44px; height: 44px; }
  html body .cs-nav .box-arrow svg { width: 26px; height: 26px; }
  html body .cs-cap { bottom: 64px; }
  html body .cs-nav { right: 8px; bottom: 60px; }
}

/* Media hero heading: smaller */
html body .md-l h1 { font-size: 3.75rem; }
@media (max-width: 1099px) { html body .md-l h1 { font-size: 42px; } }
@media (max-width: 640px) { html body .md-l h1 { font-size: 33px; } }

/* Terrace plan has a cut-out background: shadow follows the site outline, not a box */
html body .club-plan [data-pane="c2"] img { border-radius: 0; box-shadow: none; filter: drop-shadow(0 0.875rem 1.375rem rgba(16, 61, 94, .16)); }

/* Plan viewer: key plan, plan and facts share one centre line; Floor Plan mode uses the angle-row space instead of leaving a gap */
@media (min-width: 1100px) {
  html body .pview { align-items: stretch; }
  html body .pbox { grid-template-rows: auto 31.25rem auto; align-content: start; }
  html body .pmode { grid-row: 1; grid-column: 1; }
  html body .pstage { grid-row: 2; grid-column: 1; }
  html body .pang-row { grid-row: 3; grid-column: 1; }
  html body [data-plans][data-mode="2d"] .pview .pstage { grid-row: 2 / 4; grid-column: 1; height: auto; align-self: stretch; }
  html body .pkey, html body .pfacts { --top: calc(44px + 0.875rem); display: flex; flex-direction: column; justify-content: center; padding-top: var(--top); }
  html body .pfacts { gap: 2.75rem; }
}
@media (max-width: 1099px) {
  html body [data-plans][data-mode="2d"] .pstage { height: auto; }
  html body [data-plans][data-mode="2d"] .pang-row { display: none; }
}

/* Home-type picker: photo + 2 BHK + 3 BHK as one tab strip sitting flush on the size bar (active tab in navy, like the view toggle) */
html body .ptabs { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr 1fr; width: 37.5rem; height: auto; margin: 3.25rem auto 0; padding: 0; background: #fff; border-radius: 0.875rem 0.875rem 0 0; overflow: hidden; box-shadow: 0 -0.5rem 1.375rem rgba(16, 61, 94, .06); }
html body .ptab { display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; min-height: 6.25rem; padding: 0.75rem 1.5rem; border-radius: 0; background: #fff; color: var(--navy); transition: background .25s, color .25s; }
html body .ptab + .ptab { box-shadow: inset 1px 0 0 rgba(16, 61, 94, .08); }
html body .ptab:hover { background: #f6f1dc; }
html body .ptab[aria-selected="true"] { background: var(--navy); box-shadow: none; }
html body .ptab .pn, html body .ptab small { color: inherit; }
html body .ptab[aria-selected="true"] .pn, html body .ptab[aria-selected="true"] small { color: #fff; }
html body .ptab small { margin-top: 0; opacity: .85; }
html body .ptab:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
html body .psizes { border-radius: 0.875rem; }
@media (min-width: 1100px) {
  html body .ptabs { grid-template-columns: 11.25rem 1fr 1fr; }
  html body .ptabs-img { position: static; display: block; width: 100%; height: 100%; min-height: 6.25rem; border-radius: 0; object-fit: cover; }
}
@media (max-width: 1099px) {
  html body .ptabs { width: min(100% - 48px, 620px); border-radius: 14px 14px 0 0; }
  html body .ptab { min-height: 84px; padding: 12px 18px; }
  html body .psizes { border-radius: 0 0 14px 14px; }
}
@media (max-width: 640px) { html body .ptabs { width: calc(100% - 32px); } }
@media (min-width: 1100px) { html body .ptabs-img { width: calc(100% + 1px); margin-right: -1px; } }
@media (max-width: 640px) { html body .psizes { width: calc(100% - 32px); } }

/* Call-back button: a 3-column grid. Column 2 holds the words at the exact centre of the button; column 3 holds the arrow at the right edge. */
html body .btn-submit { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-content: normal; column-gap: 0; padding: 0 1rem; }
html body .btn-submit::before { content: ""; }
html body .btn-submit > span { grid-column: 2; text-align: center; white-space: nowrap; line-height: 1; padding-top: 0.125rem; }
html body .btn-submit .chev { grid-column: 3; justify-self: end; position: static; translate: none; }
html body .drawer .btn-submit { justify-content: normal; gap: 0; }

/* Home-type tabs: the area reads "1,192 SQ.FT." like the size bar */
html body .ptab small em { font: 600 .86em/1 var(--serif); font-style: normal; letter-spacing: 0; }

/* Home-type picker, desktop: like the reference. The photo stands taller than the tab strip and overhangs above it; the strip is shorter and sits flush on the size bar. */
@media (min-width: 1100px) {
  html body .ptabs { width: 40rem; margin-top: 4.375rem; grid-template-columns: 10.5rem 1fr 1fr; overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  html body .ptabs-img { position: absolute; left: 0; bottom: 0; width: 10.5rem; height: 7.5rem; min-height: 0; margin: 0; object-fit: cover; border-radius: 0.875rem 0 0 0; box-shadow: 0 -0.375rem 1.375rem rgba(16, 61, 94, .14); z-index: 2; }
  html body .ptab[data-bhk="2"] { grid-column: 2; }
  html body .ptab[data-bhk="3"] { grid-column: 3; border-radius: 0 0.875rem 0 0; }
  html body .ptab { min-height: 5.25rem; padding: 0.625rem 1.5rem 0.75rem; gap: 0.125rem; }
  html body .ptab .pn { font-size: 1.375rem; }
  html body .ptab .pn b { font-size: 2.875rem; }
  html body .ptab small { font-size: 0.8125rem; }
  html body .ptab + .ptab { box-shadow: none; }
}

/* "Talk to Our Team": sits a little higher in its frame (the frame gap follows it) */
@media (min-width: 1100px) { html body .contact .ct-l { top: -1.625rem; } }

/* Master plan, desktop: plan and legend sit together in one frame. The legend runs the full height of the plan (top and bottom level with it), one numbered line per point. */
@media (min-width: 1100px) {
  html body .mp-grid { grid-template-columns: 33.75rem minmax(0, 1fr); gap: 3rem; align-items: stretch; padding: 1.875rem; border-radius: 1.25rem; background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px rgba(190, 150, 50, .34); }
  html body .mp-side { display: flex; flex-direction: column; min-width: 0; padding: 0.25rem 0.375rem 0 0; }
  html body .mp-lh { margin: 0 0 0.75rem; padding-bottom: 0.875rem; border-bottom: 1px solid rgba(190, 150, 50, .45); }
  html body .mp-list { flex: 1; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(20, minmax(0, 1fr)); grid-auto-flow: row; gap: 0; }
  html body .mp-list li { align-items: center; gap: 0.875rem; font-size: 1.0625rem; border-bottom: 1px solid rgba(16, 61, 94, .1); }
  html body .mp-list li:last-child { border-bottom: 0; }
  html body .mp-list b { min-width: 2rem; }
}

/* Home-type picker, desktop: compact like the reference. A narrow strip (photo, active tab, inactive tab) whose photo overhangs a little; active tab in the site's blue gradient; the size bar's active size is underlined in blue. */
@media (min-width: 1100px) {
  html body .ptabs { width: 31.25rem; margin-top: 3.375rem; grid-template-columns: 8.25rem 1fr 1fr; }
  html body .ptabs-img { width: 8.25rem; height: 5.625rem; border-radius: 0.75rem 0 0 0; }
  html body .ptab { min-height: 4.25rem; padding: 0.5rem 1.125rem 0.625rem; gap: 0.0625rem; }
  html body .ptab[data-bhk="3"] { border-radius: 0 0.75rem 0 0; }
  html body .ptab .pn { font-size: 1.125rem; }
  html body .ptab .pn b { font-size: 1.875rem; }
  html body .ptab small { font-size: 0.75rem; }
  html body .ptab[aria-selected="true"] { background: linear-gradient(135deg, #103d5e 0%, #2a6a9a 100%); }
}
html body .psize::after { height: 2px; background: linear-gradient(90deg, #103d5e, #2a6a9a); }

/* Size bar, desktop: no spare space below the sizes (the bar is as tall as the reference); sizes centred, underline close to the bottom */
@media (min-width: 1100px) {
  html body .psizes { min-height: 4.125rem; }
  html body .psize { padding: 0.375rem 0.25rem 0.5rem; }
}

/* Terrace legend: the 24 numbered points, two columns of 12, numbers matching the markers on the plan */
html body .mp-list.club-legend { margin: 0 0 1.875rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(12, auto); grid-auto-flow: column; gap: 0 1.75rem; }
html body .mp-list.club-legend li { align-items: center; gap: 0.75rem; padding: 0.5rem 0; font-size: 1rem; border-bottom: 1px solid rgba(16, 61, 94, .1); }
html body .mp-list.club-legend b { min-width: 1.875rem; }
@media (max-width: 640px) { html body .mp-list.club-legend { gap: 0 14px; } html body .mp-list.club-legend li { font-size: 14px; gap: 8px; padding: 7px 0; } html body .mp-list.club-legend b { min-width: 26px; } }

/* Both clubhouse plans are cut-outs now: the shadow follows the site outline */
html body .club-plan [data-pane="c1"] img { border-radius: 0; box-shadow: none; filter: drop-shadow(0 0.875rem 1.375rem rgba(16, 61, 94, .16)); }

/* Level plates: each plan sits fully inside its plate's gold outline (nothing cropped) */
html body .lv { padding: 0.875rem; }
html body .lv img { object-fit: contain; }
@media (max-width: 1099px) { html body .lv { padding: 9px; } }

/* Master plan: no white fill, shown like the terrace plan (cut-out on the page colour, shadow follows the site outline) */
@media (min-width: 1100px) { html body .mp-grid { background: none; } }
html body .mp-img img { filter: drop-shadow(0 0.875rem 1.375rem rgba(16, 61, 94, .16)); }

/* Clubhouse plans (desktop): never taller than the screen, so the whole plan is visible at once; centred in its column */
@media (min-width: 1100px) {
  html body .club-plan button { display: flex; justify-content: center; }
  html body .club-plan img { width: auto; max-width: 100%; height: auto; max-height: max(440px, calc(100vh - 170px)); }
}

/* Map: clicking it opens 24 Carat in Google Maps (the site's own "Get Directions" link) */
html body .m-go { position: absolute; inset: 0; z-index: 6; display: block; cursor: pointer; }
html body .m-go span { position: absolute; right: 1.6cqw; bottom: 1.6cqw; padding: .95cqw 1.6cqw .85cqw; border-radius: 99px; background: rgba(255, 255, 255, .94); color: var(--navy); font: 600 max(12px, 1.5cqw)/1 var(--jos); letter-spacing: 0; box-shadow: 0 .4cqw 1.6cqw rgba(8, 32, 52, .22), inset 0 0 0 1px rgba(190, 150, 50, .45); transition: background .2s, color .2s; }
html body .m-go:hover span { background: var(--navy); color: #fff; }
html body .m-go:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; border-radius: 12px; }

/* =====================================================================
   ROUND 19 — one rhythm for the whole site
   1. Section spacing: every content section gets the same top and bottom space (--sy), so the gap between any two sections is identical.
   2. Heading → text → action: fixed gaps.
   3. Buttons: one size, weight and radius; full width on phones.
   4. Arrow buttons: one round style everywhere (the clubhouse slider keeps its plain arrows).
   5. Phones: section content is left-aligned for easy reading; page titles stay centred.
   6. Map labels: one type style.
   ===================================================================== */
:root { --sy: 4rem; --gap-hp: 1.125rem; --gap-pb: 1.875rem; }
@media (max-width: 1099px) { :root { --sy: 52px; --gap-hp: 16px; --gap-pb: 26px; } }
@media (max-width: 640px) { :root { --sy: 36px; --gap-hp: 14px; --gap-pb: 24px; } }

/* 1. section spacing */
html body main > :where(.sec:not(.film-sec, .page-hero, .unit), .band-split) { padding-top: var(--sy); padding-bottom: var(--sy); }
html body main > .band-split { padding-bottom: calc(var(--sy) * .6); }
html body main > .sec > :is(h2, .hd, .serif-t, .grad-t, .giri-logo, .route-top, .split-head):first-of-type { margin-top: 0; }
html body main > .film-sec { padding-bottom: var(--sy); }
html body main > .sec.unit { padding-bottom: var(--sy); }
/* "Details that shape the experience." is the heading of the section below it */
html body main > .build-h { padding-bottom: 0; }
html body main > .build-h + .building { padding-top: calc(var(--sy) * .6); }
html body main > .build-h > h2 { margin: 0; }
/* the Giridhari brand block */
html body .giri > .giri-logo { margin-top: 0; }
html body .giri-m { margin-top: var(--gap-pb); }

/* 2. heading → text → action */
html body :is(.hd, .serif-t, .grad-t, .route-h, .giri-h) + :is(p, .center-p, .body, .lead, .wn-p, .arch-stat) { margin-top: var(--gap-hp); }
html body .arch-stat + .center-p { margin-top: 0.75rem; }
html body .center-btns { margin-top: var(--gap-pb); }

/* 3. buttons */
html body :is(.btn-navy, .btn-goldfill) { min-height: 3.25rem; padding: 0.125rem 1.875rem 0; border-radius: 0.625rem; font: 600 1rem/1.1 var(--jos); letter-spacing: .01em; }
html body .btn-wide { height: 3.25rem; border-radius: 0.625rem; font: 600 1rem/1 var(--jos); letter-spacing: .01em; padding: 0.125rem 1.125rem 0; }
html body :is(.btn-navy, .btn-goldfill, .btn-wide, .btn-submit):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
html body .btn-submit { font-weight: 600; letter-spacing: .01em; }
@media (max-width: 1099px) {
  html body :is(.btn-navy, .btn-goldfill) { min-height: 52px; font-size: 16px; padding-inline: 28px; }
  html body .btn-wide { height: 52px; font-size: 16px; }
}
@media (max-width: 640px) {
  html body main :is(.btn-navy, .btn-goldfill) { display: flex; width: 100%; white-space: normal; }
  html body .center-btns { display: block; }
}

/* 4. arrow buttons: round, thin outline, filled on hover */
html body .box-arrow:not(.cs-nav .box-arrow) { width: 2.75rem; height: 2.75rem; min-width: 44px; min-height: 44px; border: 1.5px solid var(--navy); border-radius: 50%; background: transparent; color: var(--navy); transition: background .2s, color .2s, border-color .2s; }
html body .box-arrow:not(.cs-nav .box-arrow) svg { width: 1.125rem; height: 1.125rem; min-width: 18px; min-height: 18px; }
html body .box-arrow:not(.cs-nav .box-arrow):hover { background: var(--navy); color: #fff; }
html body .box-arrows.light .box-arrow { border-color: rgba(255, 255, 255, .9); color: #fff; background: rgba(8, 28, 44, .18); }
html body .box-arrows.light .box-arrow:hover { background: #fff; color: var(--navy); }
html body .box-arrow:not(.cs-nav .box-arrow):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
html body .box-arrows:not(.cs-nav) { display: flex; gap: 0.625rem; }
@media (max-width: 1099px) { html body .box-arrows:not(.cs-nav) { gap: 10px; } }
/* caption beside the arrows: heading family, same size everywhere */
html body :is(.show-lab, .gl-bar p) { font: 600 var(--fs-h4)/1.2 var(--spartan); letter-spacing: -.005em; font-size-adjust: .4; }
html body .show-bar { gap: 1rem; }

/* 5. phones: left-aligned reading */
@media (max-width: 640px) {
  html body main > :is(.sec, .band-split):not(.page-hero):not(.unit) :is(h2, .hd, .serif-t, .grad-t, .center-p, .body, .lead, .giri-p, .giri-m, .wn-p, .arch-stat, .route-eye, .route-h) { text-align: left; margin-inline: 0; }
  html body main > :is(.sec, .band-split):not(.page-hero):not(.unit) .hd.center { text-align: left; }
  html body main > .band-split { align-items: stretch; text-align: left; }
  html body .giri { text-align: left; padding-inline: 16px; }
  html body .giri > :not(.giri-logo) { max-width: none; }
  html body main > .giri > img.giri-logo { display: block; width: 190px; max-width: 60%; margin: 0 16px 18px; }
  html body .why-nb .hd, html body .why-nb .wn-p { text-align: left; }
  /* page titles: centred, comfortable */
  html body :is(.unit, .am-hero, .nb-hero) :is(h1, .center-p, .hero-sub) { text-align: center; }
}

/* 6. map labels: one type style (water in a soft blue so it reads as water) */
html body .m-l, html body .m-l.sm, html body .m-l.wide, html body .m-l.c { font-family: var(--jos); font-weight: 600; font-size: max(1.5cqw, 10.5px); line-height: 1.1; letter-spacing: 0; text-transform: none; color: var(--navy); }
html body .m-l.w { color: #2a6a9a; font-weight: 600; }
html body .m-l.area { font-size: max(1.9cqw, 12px); letter-spacing: .02em; }
html body .m-l.c, html body .m-l.sm { text-align: center; }
html body .m-go span { font: 600 max(12px, 1.3cqw)/1 var(--jos); }
@media (max-width: 640px) { html body .m-l, html body .m-l.sm, html body .m-l.wide, html body .m-l.c { font-size: 10px; } html body .m-l.area { font-size: 11px; } }

/* footer: pages in the first row (desktop) / first column (phone), company links in the second */
@media (max-width: 640px) { html body .foot-links { grid-auto-flow: column; grid-template-rows: repeat(5, auto); } }
html body .foot-home { display: inline-block; border-radius: 0.5rem; }
html body .foot-home:focus-visible, html body .nav-logo:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (max-width: 640px) {
  html body main > .sec:not(.page-hero):not(.unit) :is(.center-p, .wn-p, .giri-p, .body, .lead) { padding-inline: 0; max-width: none; }
}
/* Phones: every text block in a section starts on the same 16px edge as the page (sections that run edge to edge keep padding 0; their text gets the margin) */
@media (max-width: 640px) {
  html body main > :is(.arch, .build-h, .giri, .why-nb) { padding-inline: 0; }
  html body main > .sec:not(.page-hero):not(.unit):not(.show):not(.feat):not(.route):not(.why-k) > :is(h2, .hd, .serif-t, .grad-t, .giri-h, .center-p, .wn-p, .giri-p, .giri-m, .arch-stat, .center-btns) { margin-left: 16px; margin-right: 16px; padding-inline: 0; width: auto; max-width: none; }
}
/* Location title: the main line wraps tight like every other H1 */
html body h1.nb-h span + span { line-height: 1.05; }
/* Specifications title: gold runs top to bottom so every word has the same colour, whatever the line length */
html body h1.sp-h b { background: linear-gradient(180deg, #f8e7ae 0%, #e2bd5a 60%, #c99a2e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Media title on phones: centred like the other page titles; the four categories sit in a 2 x 2 grid */
@media (max-width: 640px) {
  html body .md-l { text-align: center; }
  html body .md-l h1, html body .md-l .hero-sub { margin-inline: auto; text-align: center; }
  html body .md-l .cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; justify-content: stretch; }
  html body .md-l .cats a { display: flex; justify-content: center; align-items: center; min-height: 44px; width: 100%; }
}
/* Giridhari wordmark: clear space below it before the heading */
@media (min-width: 641px) { html body .giri > .giri-logo { margin-bottom: 1.75rem; } }

/* ===== Map, round 20: each label is anchored to its own pin; place names sit on the place. One colour, one type style. ===== */
html body .map-in .m-l { position: absolute; z-index: 3; margin: 0; font: 600 max(1.45cqw, 10px)/1.15 var(--jos); letter-spacing: 0; text-transform: none; color: var(--navy); white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 .25cqw #fffbe9, 0 0 .5cqw #fffbe9, 0 0 .8cqw #fffbe9; }
html body .map-in .m-l.pin.r { translate: 1.9cqw -50%; text-align: left; }
html body .map-in .m-l.pin.l { translate: calc(-100% - 1.9cqw) -50%; text-align: right; }
html body .map-in .m-l.place { translate: -50% -50%; text-align: center; color: #1d5683; font-weight: 600; }
html body .map-in .m-l.place.river { rotate: -6deg; }
html body .map-in .m-l.place:last-of-type { letter-spacing: .04em; }
@media (max-width: 640px) {
  html body .map-in .m-l { font-size: 9.5px; text-shadow: 0 0 2px #fffbe9, 0 0 4px #fffbe9; }
  html body .map-in .m-l.pin.r { translate: 9px -50%; }
  html body .map-in .m-l.pin.l { translate: calc(-100% - 9px) -50%; }
}

/* ===== Header, desktop: links centred in the space between the logo and the button ===== */
@media (min-width: 1100px) {
  html body .nav-links { margin-left: 1.5rem; gap: 2.125rem; }
  html body .nav-links::before { content: ""; flex: 1; order: -1; }
  html body .nav-links::after { content: ""; flex: 1; order: 2; }
  html body .nav-links .nav-cta { order: 3; margin-left: 0; }
}
html body .map-in .m-l > span { display: block; }
/* Map: shorter fade at top and bottom so the pins near the edge (Eco Park) stay readable */
html body .map { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0, #000 3%, #000 98.5%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0, #000 3%, #000 98.5%, transparent 100%); mask-composite: intersect; }
@media (max-width: 640px) { html body .m-go span { right: 6px; bottom: 6px; padding: 6px 9px 5px; font-size: 10px; } html body .map-in .m-logo { width: 54px; padding: 4px 6px; } }

/* ===== Round 21: audit fixes ===== */
/* Navy text on the gold buttons now meets 4.5:1 along the whole gradient (the old dark end was 2.8:1) */
/* No one-word last lines in paragraphs */
html body :is(p, li, .lv-d, .pk-cap) { text-wrap: pretty; }
/* Neighbourhood cards: titles and paragraphs line up across the three columns */
@media (min-width: 641px) {
  html body .wk-cols { grid-template-rows: auto 1fr; }
  html body .wk-cols article { display: grid; grid-template-rows: subgrid; grid-row: span 2; align-content: start; }
}
/* Small controls: a comfortable target without changing how they look */
html body .acc-h { position: relative; }
html body .acc-h::after { content: ""; position: absolute; inset: -10px 0; }
html body .cats a { padding: 0.75rem 1rem 0.625rem; }
html body .lv-z { min-height: 38px; }
html body .lv-z::after { content: ""; position: absolute; inset: -6px; }
/* Home-type labels never drop below 12px */
html body .ptab small, html body .psize em, html body .ptab small em { font-size: max(12px, 0.75rem); }
html body .psize { font-size: max(18px, 1.375rem); }
/* Level plates on tablet and phone: less empty space above the stack */
@media (max-width: 1099px) { html body .lv-stage { height: 350px; } html body .lv-rot { top: 54%; } }

/* ===== Round 22: interaction polish — every control answers a hover, a press and the keyboard ===== */
html { scroll-padding-top: 96px; }
html body main [id], html body .contact, html body .enquiry { scroll-margin-top: 96px; }
/* pressed state: a small, quick squeeze (uses `scale`, so it never fights the scroll animations that own `transform`) */
html body :is(.btn-navy, .btn-goldfill, .btn-submit, .btn-wide, .btn-gold, .btn-wa, .box-arrow, .pm, .psize, .ptab, .ftab, .cs-b, .cats a, .lv-z, .to-top, .gl-open, .thumbs button):active { scale: .97; transition-duration: .08s; }
/* tabs: same blue underline as the size bar, a hint of it on hover */
html body .ftab { transition: color .2s; }
html body .ftab::after { height: 2px; background: linear-gradient(90deg, #103d5e, #2a6a9a); }
html body .ftab:not([aria-selected="true"]):hover { color: #2b6c9a; }
html body .ftab:not([aria-selected="true"]):hover::after { transform: scaleX(.55); }
/* level cards lift a little */
html body .lv-list li { transition: translate .25s var(--ease), box-shadow .25s; }
html body .lv-list li:hover { translate: 0 -2px; box-shadow: 0 12px 26px rgba(16, 61, 94, .12); }
/* zoomable plans: a clear "enlarge" hint on hover (mouse devices only) */
html body :is(.mp-img, .club-plan button[data-zoom]) { position: relative; }
@media (hover: hover) {
  html body :is(.mp-img, .club-plan button[data-zoom])::after { content: "Click to enlarge"; position: absolute; right: 12px; top: 12px; padding: 8px 14px 6px; border-radius: 99px; background: rgba(16, 61, 94, .92); color: #fff; font: 600 13px/1 var(--jos); letter-spacing: .01em; opacity: 0; translate: 0 -6px; transition: opacity .25s, translate .25s var(--ease); pointer-events: none; }
  html body :is(.mp-img, .club-plan button[data-zoom]):is(:hover, :focus-visible)::after { opacity: 1; translate: 0 0; }
  html body :is(.mp-img, .club-plan button[data-zoom]) img { transition: filter .3s; }
  html body :is(.mp-img, .club-plan button[data-zoom]):hover img { filter: drop-shadow(0 18px 28px rgba(16, 61, 94, .24)); }
}
/* menu button and lightbox close: hover feedback */
html body .nav-toggle { transition: background .2s; border-radius: 8px; }
html body .nav-toggle:hover { background: rgba(255, 255, 255, .1); }
html body .lb-x { transition: background .2s, color .2s; }
html body .lb-x:hover { background: #fff; color: var(--navy); }
/* footer links: gold underline slides in */
html body .foot-links a { position: relative; }
@media (hover: hover) {
  html body .foot-links a::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 1px; background: #f3d98d; transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s var(--ease); }
  html body .foot-links a:hover::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) { html body :is(.btn-navy, .btn-goldfill, .btn-submit, .btn-wide, .box-arrow):active { scale: none; } html body .lv-list li:hover { translate: none; } }

/* ===== Round 23 ===== */
/* Tabs and buttons are controls, not text: a double-click no longer paints them grey */
html body :is(button, .btn-navy, .btn-goldfill, .btn-wide, .btn-gold, .nav-links a, .foot-links a) { -webkit-user-select: none; user-select: none; }

/* Experience the Greenery: three rows. Picture left with text right, text left with picture right, picture left with text right. */
html body .green .gr-list { width: var(--w); margin: 3.25rem auto 0; display: grid; gap: 4rem; }
html body .green .gr-row { display: grid; grid-template-columns: minmax(0, 32.5rem) minmax(0, 25rem); column-gap: 4.5rem; justify-content: center; align-items: center; }
html body .green .gr-row.rev { grid-template-columns: minmax(0, 25rem) minmax(0, 27.5rem); }
html body .green .gr-row.rev .gr-t { order: -1; }
html body .green .gr-pic { padding: 0.6875rem; background: #fff; box-shadow: 0 0.625rem 1.625rem rgba(16, 61, 94, .14); aspect-ratio: 3 / 2; }
html body .green .gr-row.rev .gr-pic { aspect-ratio: 4 / 5; }
html body .green .gr-pic img { width: 100%; height: 100%; object-fit: cover; }
html body .green .gr-t::before { content: ""; display: block; width: 2.75rem; height: 2px; margin-bottom: 1.125rem; background: linear-gradient(90deg, #b0852a, #dcb240); }
html body .green .gr-t h3 { font-family: var(--spartan); font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -.008em; color: var(--ink); font-size-adjust: .4; }
html body .green .gr-t h3 span { display: block; }
html body .green .gr-t h3 span + span { font-weight: 400; }
html body .green .gr-t p { margin-top: 0.875rem; max-width: 26em; font: 400 var(--fs-body)/1.6 var(--jos); color: var(--ink-soft); }
@media (max-width: 1099px) {
  html body .green .gr-list { width: auto; margin: 40px 24px 0; gap: 44px; }
  html body .green .gr-row, html body .green .gr-row.rev { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 32px; }
  html body .green .gr-row.rev { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
  html body .green .gr-pic { padding: 8px; }
  html body .green .gr-t::before { width: 40px; margin-bottom: 14px; }
}
@media (max-width: 640px) {
  html body .green .gr-list { margin: 32px 16px 0; gap: 40px; }
  html body .green .gr-row, html body .green .gr-row.rev { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  html body .green .gr-row.rev .gr-t { order: 0; }
  /* Round 33: alternate rows no longer sit inset to the right on phones (client request); every wildlife photo spans the text column at 3:2. */
  html body .green .gr-row.rev .gr-pic { aspect-ratio: 3 / 2; }
  html body .green .hd { text-align: left; margin-inline: 16px; }
}
/* no hairline seam between the photo and the first tab */
@media (min-width: 1100px) { html body .ptabs .ptabs-img { width: calc(8.25rem + 1px); } }

/* ===== Plans picker, as in the reference: the tab strip sits flush on the size bar. 3 BHK has six sizes, so its bar is wide;
   2 BHK has one, so its bar is only as wide as the strip and the size sits in the middle. The bar eases between the two widths. ===== */
html body .psizes { transition: width .4s var(--ease); }
@media (min-width: 1100px) {
  html body [data-plans][data-single="1"] .psizes { width: 31.25rem; }
}
@media (max-width: 640px) {
  html body [data-plans][data-single="1"] .psizes { grid-template-columns: minmax(0, 1fr); min-height: 64px; }
}

/* ===== Amenities slider (home): one scrolling row of thumbnails, the current one ringed ===== */
html body .thumbs.strip { position: relative; display: flex; gap: 0.625rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(16, 61, 94, .35) transparent; padding: 0.375rem 0.375rem 0.75rem; margin: 0.75rem -0.375rem 0; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%); }
html body .thumbs.strip button { flex: none; width: calc((100% - 1.25rem) / 3.15); height: auto; aspect-ratio: 4 / 3; border-radius: 0.625rem; scroll-snap-align: center; opacity: .72; transition: opacity .25s, outline-color .25s; outline: 2px solid transparent; outline-offset: 2px; }
html body .thumbs.strip button:hover { opacity: 1; }
html body .thumbs.strip button[aria-current="true"] { opacity: 1; outline-color: var(--navy); }
html body .thumbs.strip button:focus-visible { opacity: 1; outline-color: var(--gold); }
html body .thumbs.strip::-webkit-scrollbar { height: 6px; }
html body .thumbs.strip::-webkit-scrollbar-thumb { background: rgba(16, 61, 94, .3); border-radius: 6px; }
@media (max-width: 1099px) { html body .thumbs.strip { gap: 10px; padding: 6px 6px 12px; margin: 12px -6px 0; } html body .thumbs.strip button { width: calc((100% - 20px) / 3.15); border-radius: 10px; } }
@media (max-width: 640px) { html body .thumbs.strip button { width: calc((100% - 10px) / 2.4); } }

/* ===== Round 24: map place names share the label colour; "Why Kismatpur?" spacing ===== */
html body .map-in .m-l.place { color: var(--navy); }
html body .map-in .m-l.place.river { rotate: -7deg; }
/* one word space between "Why" and "Kismatpur?" (as in "Find your way to 24 Carat"), and the same heading-to-text gap as every other section */
html body .why-nb { gap: 0; }
html body .why-nb .hd .pre { margin-right: 0; }


/* ===== Round 25: phone spacing and the home-type tabs ===== */
@media (max-width: 1099px) {
  /* the hero cards and the next section: no big empty band between them */
  html body .hv { padding-bottom: 48px; }
  html body .hv + .film-sec { padding-top: 24px; }
  /* home-type tabs: compact, text centred in the tab, nothing touching an edge */
  html body .ptab { min-height: 72px; padding: 10px 16px; gap: 3px; justify-content: center; }
  html body .ptab .pn { font-size: 17px; line-height: 1.1; }
  html body .ptab .pn b { font-size: 30px; line-height: 1; }
  html body .ptab small { font-size: 12px; line-height: 1.2; margin-top: 0; }
}
@media (max-width: 640px) {
  :root { --sy: 30px; }
  html body .hv { padding-bottom: 36px; }
  html body .hv + .film-sec { padding-top: 20px; }
  html body .am-hero { padding-bottom: 20px; }
  html body .ptab { min-height: 64px; padding: 8px 14px; }
  html body .ptab .pn b { font-size: 28px; }
}
/* contact lines: even, tight spacing; the phone and email links keep a comfortable touch area without extra space */
html body .ct-col p { margin: 0; }
html body .ct-col h3 + p { margin-top: 8px; }
html body .ct-col p + p { margin-top: 4px; }
html body .ct-col p a { display: inline-block; padding-block: 5px; margin-block: -5px; }

/* ===== Round 26: one heading-to-content gap, compact phone lists, hero tower fade ===== */
:root { --gap-hc: 2.5rem; }
@media (max-width: 1099px) { :root { --gap-hc: 32px; } }
@media (max-width: 640px) { :root { --gap-hc: 24px; } }
@media (max-width: 1099px) {
  /* the same distance between a section heading block and the content under it, on every page */
  html body .unit .ptabs, html body .unit .pview, html body .master .mp-grid, html body .club .ftabs, html body .club .club-grid,
  html body .finishes .sp-grid, html body .green .gr-list, html body .route .tl, html body .why-k .wk-cols,
  html body .club-am .lvls, html body .gallery .gl-grid { margin-top: var(--gap-hc); }
  html body .film-sec .split-head { margin-bottom: var(--gap-hc); }
  html body .club .ftabs + .club-grid { margin-top: 20px; }
  /* tower dissolves into the sky before the cards start, so it never looks sliced */
  html body .hv-tower { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 97%); mask-image: linear-gradient(180deg, #000 70%, transparent 97%); }
}
@media (max-width: 640px) {
  /* amenity highlights read as one list: tighter steps between items */
  html body main > .sec.feat { padding-block: 22px; }
  html body main > .sec.feat:first-of-type { padding-top: 30px; }
  /* drive times: number beside the place, half the height */
  html body .tl-stops { gap: 22px; padding-block: 48px 4px; }
  html body .tl-stops li, html body .tl-stops li:nth-child(n) { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; column-gap: 8px; }
  html body .tl-stops .tl-dot { top: 50%; translate: 0 -50%; }
  html body .tl-v b { font-size: 44px; }
  html body .tl-n { margin-top: 0; font-size: 18px; line-height: 1.2; }
  html body .tl-n small { margin-top: 4px; }
  /* page titles share one size; the contact card heading matches section headings */
  html body h1.grad-t.big, html body .md-hero h1 { font-size: var(--fs-h1); }
  html body .ct-h span { font-size: var(--fs-h2-pre); }
  html body .ct-h b { font-size: var(--fs-h2); }
  /* 2 BHK has one size: a slim confirmation strip, not a tall box */
  html body [data-plans][data-single="1"] .psizes { min-height: 48px; }
  /* enquiry art: keep the tower, less dead space before the contact card */
  html body .enquiry { padding-bottom: 78vw; }
  html body .enq-bg { height: 88vw; }
}
@media (max-width: 640px) {
  html body [data-plans][data-single="1"] .psizes { min-height: 0; padding: 2px 8px; }
  html body [data-plans][data-single="1"] .psize { padding-block: 8px; min-height: 44px; }
}
/* one-line headings already have a real space between the two parts: no extra margin on top of it */
html body .hd.one .main { margin-left: 0; } html body .hd.one .pre { margin-right: 0; }
/* specification accordions: hairline rows and a plus sign on closed rows, so they read as a list you can open */
html body .acc-i + .acc-i { border-top: 1px solid rgba(16, 61, 94, .12); }
html body .acc-i:not(.on)::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; translate: 0 -50%; pointer-events: none;
  background: linear-gradient(var(--navy), var(--navy)) center / 14px 2px no-repeat, linear-gradient(var(--navy), var(--navy)) center / 2px 14px no-repeat; opacity: .55; transition: opacity .2s; }
html body .acc-i:not(.on):hover::after { opacity: 1; }
html body .acc-i:not(.on) .acc-h { padding-right: 32px; }
@media (max-width: 640px) { html body .acc-i:not(.on) { padding-block: 10px; } }
html body .acc-i:not(.on) .acc-h { align-items: center; }
html body .acc-i:not(.on)::after { translate: 0 calc(-50% - 2px); }
@media (min-width: 641px) and (max-width: 1099px) {
  html body .club-am .lvls { margin-top: 48px; }
  html body .enquiry { padding-bottom: 58vw; }
  html body .enq-bg { height: 70vw; }
  /* drive times on tablet: two columns of compact rows */
  html body .tl-stops { grid-template-columns: 1fr 1fr; gap: 28px 24px; padding-block: 56px 4px; }
  html body .tl-stops li, html body .tl-stops li:nth-child(n) { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; column-gap: 8px; }
  html body .tl-stops .tl-dot { top: 50%; translate: 0 -50%; }
  html body .tl-v b { font-size: 48px; }
  html body .tl-n { margin-top: 0; font-size: 19px; line-height: 1.2; }
}
@media (min-width: 641px) and (max-width: 1099px) { html body .tl-stops { grid-template-columns: minmax(0, 520px); gap: 26px; } }

/* ===== Round 27: final design review ===== */
/* Specifications: the "Details" heading now lives inside its section, so the whole block holds together while it steps */
html body .sec.building > h2 { margin: 0 0 var(--gap-hc); }
html body .sec.building .sp-grid { margin-top: 0; }
@media (min-width: 1100px) { html body .sec.building > h2 { text-align: center; margin-bottom: 2.5rem; } }
/* step counter shown only while the section holds in place on laptops */
html body .sp-prog { display: flex; align-items: center; gap: 0.875rem; margin-top: 1.125rem; padding-left: 1.375rem; font: 500 0.8125rem/1 var(--jos); letter-spacing: .08em; color: rgba(16, 61, 94, .72); font-variant-numeric: tabular-nums; }
html body .sp-prog i { flex: 1; height: 2px; border-radius: 2px; background: rgba(16, 61, 94, .14); overflow: hidden; }
html body .sp-prog b { display: block; height: 100%; background: linear-gradient(90deg, #d8b45a, #b58a2a); transform: scaleX(0); transform-origin: 0 50%; transition: transform .2s linear; }

/* amenities image strip: room for the card shadows, soft edges instead of a hard clipped box */
html body .drift { padding-block: 14px 40px; margin-bottom: -26px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }

@media (max-width: 640px) {
  /* hero: crisp, full-strength tower; the cards overlap it as a deliberate layer (a fade made the lower floors look ghosted) */
  html body .hv-tower { -webkit-mask-image: none; mask-image: none; }
  html body .drift { margin-inline: -16px; }
  /* level plates: sized for the phone so they sit inside the screen and clear the text above */
  html body .lv-stage { height: 250px; }
  html body .lv-rot { top: 168px; width: 176px; height: 236px; margin: -118px 0 0 -88px; }
  html body .lv { transform: perspective(1000px) rotateX(58deg) rotateZ(-34deg) translateZ(calc(var(--k) * var(--spread, 1) * 76px + var(--lift, 0px))); }
  /* two-part one-line headings break between the parts, never mid-phrase */
  html body .hd.xl.one .pre { display: block; }
  /* media hero columns: fade out softly at the bottom instead of leaving cut slivers */
  html body .md-cols { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 96%); mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 96%); }
}
/* every two-part heading has a bold second line */
html body .why-k .hd .main { font-weight: 600; }
@media (max-width: 640px) { html body main > section.why-nb { margin-inline: 0; padding-inline: 0; width: auto; } }
@media (max-width: 640px) { html body .md-cols { height: 72vw; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 82%, transparent 100%); } }
/* captions on bright interiors: a deeper, taller scrim so white text stays readable on light rooms */
html body .sp-img figcaption { padding-top: 72px; background: linear-gradient(180deg, rgba(4, 16, 28, 0) 0%, rgba(4, 16, 28, .45) 45%, rgba(4, 16, 28, .82) 100%); text-shadow: 0 1px 10px rgba(4, 16, 28, .45); }
html body .gl-side button::after { inset: 30% 0 0; background: linear-gradient(180deg, rgba(4, 16, 28, 0), rgba(4, 16, 28, .86)); }
html body .gl-side span { text-shadow: 0 1px 6px rgba(4, 16, 28, .5); }
/* Details heading keeps the page gutter at every width */
html body .sec.building > h2 { width: var(--w); max-width: var(--w); margin-inline: auto; }
@media (max-width: 640px) { html body .sec.building > h2 { width: auto; max-width: none; margin-inline: 16px; } }
/* tablet: level plates sized to clear the paragraph above */
@media (min-width: 641px) and (max-width: 1099px) {
  html body .lv-stage { height: 300px; }
  html body .lv-rot { top: 205px; width: 196px; height: 262px; margin: -131px 0 0 -98px; }
  html body .lv { transform: perspective(1100px) rotateX(58deg) rotateZ(-34deg) translateZ(calc(var(--k) * var(--spread, 1) * 84px + var(--lift, 0px))); }
}
/* map: the Google Maps pill sits top-right on phones so it never covers a place label */
@media (max-width: 640px) { html body .m-go span { top: 6px; bottom: auto; } }
/* Mini Theatre dots fit the card on the narrowest phones */
/* 320-360px phones */
@media (max-width: 360px) {
  html body .hv-tags li { display: block; }
  html body .hv-tags li + li::before { content: none; }
  html body .hv .qk-c { height: auto; min-height: 104px; }
  html body .hv .qk-i { flex-basis: 34%; }
  html body .hv .qk-t { padding: 12px 10px 12px 12px; gap: 8px; }
  html body .hv .qk-t b { font-size: 17px; }
  html body .hv .qk-t small { font-size: 12px; line-height: 1.3; }
  html body .pfacts :is(p, span, small) { white-space: nowrap; }
  html body .pfacts small { font-size: 13px; }
  html body .ftab { white-space: nowrap; padding-inline: 6px; }
  html body .sp-panel :is(.btn-goldfill, .btn-gold) { padding-inline: 14px; font-size: 15px; }
  html body .gl-side span { left: 8px; font-size: 11px; }
}
@media (min-width: 641px) { html body .sec.building > h2 { text-align: center; } }

/* ===== Round 28: design-approval fixes ===== */
/* phone hero: the sky photo used to end in a hard line that slid up across the tower while scrolling; it now fades into the hero tone */
html body .hv-sky { -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%); mask-image: linear-gradient(180deg, #000 68%, transparent 100%); }
@media (max-width: 1099px) { html body .hv-sky { height: 175vw; } }

/* clubhouse floor tabs sit on the same edges as the heading and text above */
@media (max-width: 1099px) { html body .club .ftabs { width: var(--w); max-width: var(--w); margin-inline: auto; } }
@media (max-width: 640px) { html body .club .ftabs { width: auto; max-width: none; margin-inline: 16px; } }

/* amenities level cards: one shared edge on phone and tablet, the active card is marked by its gold bar and a navy hairline instead of a sideways nudge */
@media (max-width: 1099px) {
  html body .club-am .lvls { width: var(--w); max-width: var(--w); margin-inline: auto; }
  html body .lv-list li.on { translate: none; box-shadow: 0 0 0 1px rgba(16, 61, 94, .22), 0 12px 26px rgba(16, 61, 94, .1); }
}
@media (max-width: 640px) { html body .club-am .lvls { width: auto; max-width: none; margin-inline: 16px; } }

/* 3 BHK sizes on the smallest phones: two roomy columns instead of three cramped ones */
@media (max-width: 359px) { html body .psizes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* media categories read as buttons: outlined, weighted, with clear hover and focus */
html body .md-l .cats a { background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 61, 94, .2); color: var(--navy); font-weight: 500; transition: background .2s, color .2s, box-shadow .2s; }
html body .md-l .cats a:hover { background: var(--navy); color: #fff; box-shadow: inset 0 0 0 1px var(--navy); }
@media (max-width: 640px) { html body .md-l .cats a { min-height: 48px; font-size: 15px; } }

/* media pictures below 1100px: four complete photos in two columns, no cropping, fading or drifting */
@media (max-width: 1099px) {
  html body .md-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; height: auto; max-height: none; overflow: visible; margin: 32px 0 0; -webkit-mask-image: none; mask-image: none; }
  html body .md-col { width: auto; margin: 0; gap: 14px; transform: none !important; will-change: auto; }
  html body .md-col img { width: 100%; height: auto; border-radius: 10px; }
  html body .md-col img:nth-child(n + 3) { display: none; }
}
@media (max-width: 640px) {
  html body .md-cols { gap: 10px; margin-inline: 0; } html body .md-col { gap: 10px; }
  html body .md-col.a img:first-child, html body .md-col.b img:nth-child(2) { aspect-ratio: 4 / 5; }
  html body .md-col.a img:nth-child(2), html body .md-col.b img:first-child { aspect-ratio: 4 / 3; }
}

/* gallery: the deep-blue-sky elevation is framed on the tower instead of the empty sky above it */
html body .gl-open img[src*="why-tower"] { transform-origin: 50% 100%; scale: 1.3; }

/* footer links: each column shares a left edge, the pair is centred as a block */
@media (max-width: 640px) {
  html body .foot-links { grid-template-columns: repeat(2, auto); justify-content: center; column-gap: 40px; padding-inline: 0; }
  html body .foot-links a { justify-content: flex-start; padding-inline: 0; }
  html body .foot-links a::after { left: 0; right: 0; }
}
@media (max-width: 340px) { html body .foot-links { column-gap: 28px; } }
/* media pictures on tablets: one row of four complete photos, so the grid stays short */
@media (min-width: 641px) and (max-width: 1099px) {
  html body .md-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html body .md-col { display: contents; }
  html body .md-col img { aspect-ratio: 3 / 4; }
}

/* ===== Round 29: release check ===== */
/* Mini Theatre slider dots: a full 44x44 tap target wherever eight of them fit in the frame (390px and wider); the drawn dot is unchanged */
@media (min-width: 390px) { html body .cs-b, html body .cs-b:hover, html body .cs-b[aria-pressed="true"] { width: 44px; min-width: 44px; height: 44px; min-height: 44px; } }
@media (min-width: 1100px) { html body .cs-tabs { gap: 0; margin-bottom: -8px; } }
/* reduced motion: the hero headline keeps its gold colour but stops shimmering */
@media (prefers-reduced-motion: reduce) { html body .hv-h { animation: none; } }
/* Mini Theatre controls below 390px: eight 44px dots do not fit the frame, so the dots give way to a compact "01 / 08" counter between the two 44px arrows; swipe still works */
html body .cs-count { display: none; margin: 0; font: 600 14px/1 var(--jos); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 1px 8px rgba(4, 16, 28, .55); white-space: nowrap; }
html body .cs-count b { font-weight: 600; color: var(--gold-light, #f1d68a); }
@media (max-width: 389px) {
  html body .cs-tabs { display: none; }
  html body .cs-count { display: block; align-self: center; padding: 3px 2px 0; }
  html body .cs-nav { align-items: center; gap: 0; left: 6px; right: auto; bottom: 10px; }
  html body .cs-cap { bottom: 62px; }
}

/* ===== Round 31: Mini Theatre control hit areas ===== */
/* the dot row's box spans the frame and sat on top of the arrows, swallowing clicks on desktop; only the dots themselves take clicks now */
html body .cs-tabs { pointer-events: none; }
html body .cs-tabs .cs-b { pointer-events: auto; }
/* 390-1099px: the 44px dot row overlapped the arrows' 44px boxes by 4px; the dot row drops 8px so a 4px gap separates them (caption and arrows stay put) */
@media (min-width: 390px) and (max-width: 1099px) { html body .cs-tabs { bottom: 12px; } }
/* hover nudge moves the arrow icon only; moving the whole button slid it out from under the pointer, so clicks near its inner edge missed */
html body .cs-nav .box-arrow svg { transition: translate .2s var(--ease); }
html body .cs-nav .box-arrow.next:hover, html body .cs-nav .box-arrow.prev:hover { translate: none; }
html body .cs-nav .box-arrow.next:hover svg { translate: 0.1875rem 0; }
html body .cs-nav .box-arrow.prev:hover svg { translate: -0.1875rem 0; }
html body .cs-nav .box-arrow:active svg { translate: none; }

/* ===== Round 32: final QA ===== */
/* the gold frame is decoration: with reduced motion (no reveal transforms) it sat on top of the contact text and blocked the phone and email links on desktop */
html body .ct-frame { pointer-events: none; }
/* phone and email links: the 5px tap padding overlapped the next line by 6px, so the bottom of the phone link opened email; 2px makes the two tap areas meet without overlapping (text does not move) */
html body .ct-col p a { padding-block: 2px; margin-block: -2px; }
/* Clubhouse plans below 1100px: an old 560px max-height on the plan box was never lifted, so from about 430px wide the portrait plan spilled out of its box and covered the amenity list (and the Explore button on tablets). The box now grows with the plan, and the plan is capped at the screen height and centred, as on desktop */
@media (max-width: 1099px) {
  html body .club-plan { max-height: none; }
  html body .club-plan img { width: 100%; height: auto; max-height: max(440px, calc(100vh - 170px)); object-fit: contain; }
}
/* Phone menu in landscape: the panel ran past the bottom of the screen and, under a fixed header, its last item ("Book a Visit") could not be reached; it now stops at the screen edge and scrolls inside */
@media (max-width: 1099px) {
  html body .nav-links.open { max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain; }
  html body .nav-links.open > * { flex-shrink: 0; }
}

/* ===== Round 33: picture-showcase order on phones and tablets ===== */
/* Below 1100px the showcase stacks in one column: heading first, then the photo, then the paragraph, then the caption,
   arrows and thumbnails (client request, home "Right at home" and plans "Everyday living"). Desktop keeps photo left, text right. */
@media (max-width: 1099px) {
  html body .show { row-gap: 0; }
  html body .show > .show-side { display: contents; }
  html body .show > .show-side > .hd { order: 1; }
  html body .show > .show-main { order: 2; margin-top: 20px; }
  html body .show > .show-side > .body { order: 3; margin-top: 20px; }
  html body .show > .show-side > .show-bar { order: 4; margin-top: 20px; }
  html body .show > .show-side > .thumbs { order: 5; }
}

/* ===== Round 34: one type and spacing system on phones; Location title sizes swapped ===== */
/* Location title (all widths, client request): "Kismatpur, Hyderabad." takes the large gradient line, "Your address in the city" the small lead line. */
html body h1.nb-h span:first-child { font-size: inherit; font-weight: 600; line-height: 1.05; color: transparent; margin-bottom: .16em; }
html body h1.nb-h span + span { font-size: var(--fs-h1-pre); font-weight: 400; line-height: 1.25; color: var(--navy); margin-bottom: 0; }
@media (max-width: 640px) {
  /* Section rhythm: the site's section token (--sy) drops from 30px to 24px, so 48px separates the last block of one
     section from the first block of the next. The enquiry block joins the same rhythm. */
  :root { --sy: 24px; --fs-h3-two: 24px; }
  html body main > .enquiry { padding-top: var(--sy); }
  /* Amenities feature rows: no extra 26px above the heading (column padding + heading margin) on top of the section padding. */
  html body .feat-l { padding-top: 0; }
  html body .feat-l > .hd:first-child { margin-top: 0; }
  /* Blocks whose own bottom spacing added to the section padding: the showcase thumbnail strip keeps its 12px for the
     active ring, so the section gives up 12px; the master-plan legend list drops its bottom margin; the Amenities hero
     photo cards already carry 40px of shadow room below them. */
  html body main > .sec.show:not(.unit) { padding-bottom: calc(var(--sy) - 12px); }
  /* Page openers end on the same rhythm as everything below them. */
  html body main > .hv { padding-bottom: var(--sy); }
  html body .mp-side > :last-child { margin-bottom: 0; }
  html body main > .am-hero { padding-bottom: 10px; }
  /* Two-line "lead-in + name" headings ("A closer look at / 24 Carat", "Find your way to / 24 Carat") use the same
     19px lead-in over 30px title as Amenities, instead of two 30px lines. */
  html body .hd.xl.one :is(.pre, .main) { display: block; }
  html body .hd.xl.one .pre { font-size: var(--fs-h2-pre); line-height: 1.2; }
  html body .hd.xl.one .main { margin-left: 0; font-size: var(--fs-h2); line-height: 1.08; }
  /* "Talk to / Our Team" (every page) was 32px over 40px on phones, larger than any section heading; it now uses the same
     two-line scale. The gradient on "Our Team" stays. */
  html body .contact .ct-h > span:first-child { font-size: var(--fs-h2-pre); line-height: 1.2; }
  html body .contact .ct-h > b { font-size: var(--fs-h2); line-height: 1.08; font-weight: 600; letter-spacing: -.012em; }
  /* Location wildlife rows follow the Amenities feature rows: regular lead-in, bold title, navy body copy. */
  html body .green .gr-t h3 span:first-child { font-size: var(--fs-h2-pre); font-weight: 400; line-height: 1.2; }
  html body .green .gr-t h3 span + span { font-size: var(--fs-h3-two); font-weight: 600; line-height: 1.12; margin-top: 2px; }
  html body .green .gr-t p { color: var(--ink); }
  /* "A neighbourhood with room to grow": body copy at the body size and colour used everywhere else. */
  html body .why-k p { font-size: var(--fs-body); line-height: 1.6; color: var(--ink); }
}
/* Plans: "2 & 3 BHK homes · 1,192–1,952 sq. ft." needs 296px at 15px and broke after the dot on 320px phones; slightly
   smaller and tighter it fits one line (277px of 288px). 360px and wider are unchanged. */
@media (max-width: 359px) { html body .arch-stat { font-size: 14px; letter-spacing: .08em; } }
/* Deferred pictures (Round 34): with JavaScript off, the <noscript> copy shows and the 1px placeholder is hidden. */
@media (scripting: none) { img[data-src] { display: none; } }

/* Map (Round 34, client request): the two Giridhari projects keep the full label size; every other pin and place name is
   about a quarter smaller, so they read as context around 24 Carat and the Giridhari projects. */
html body .map-in .m-l:not(.key) { font-size: max(1.1cqw, 8.5px); }
@media (max-width: 640px) { html body .map-in .m-l:not(.key) { font-size: 8px; } }

/* ===== Round 34b: phones follow the desktop alignment (client request) =====
   An earlier phone rule set every section heading and paragraph to the left edge. On desktop, these section openers are centred,
   so on phones they are centred again: Home "Giridhari" and "Kismatpur, Hyderabad", Plans "Neoclassical design", "One community"
   and "Shared spaces", Amenities "Decentralised amenities", Location "Experience the Greenery", "Why Kismatpur?" and "Find your way
   to", Specifications section titles, Media "The details, in view". Sections that are left-aligned on desktop (photo beside text,
   feature rows, drive times, wildlife rows, accordions) stay left. Desktop and tablet are not affected. */
@media (max-width: 640px) {
  /* Same shape as the earlier left-edge rule, with one more class, so it takes precedence only for these sections. */
  html body main > :is(.sec, .band-split):not(.page-hero):not(.unit):is(.giri, .arch, .master, .club, .club-am, .gallery, .why-nb, .green, .finishes, .build-h, .building)
    > :is(.hd, .giri-h, .serif-t, .grad-t, .center-p, .wn-p, .arch-stat, .giri-p, .giri-m),
  html body main > :is(.sec, .band-split):not(.page-hero):not(.unit):is(.band-split) > div > :is(.hd, .body) { text-align: center; }
  html body main > :is(.sec, .band-split):not(.page-hero):not(.unit).band-split { align-items: center; text-align: center; }
  html body main > .sec.giri:not(.page-hero) { text-align: center; }
  html body main > .giri > img.giri-logo { margin: 0 auto 18px; }
}

/* ===== Round 35 (client copy round) ===== */
/* footer link underline: on desktop it sat across the bottom of the letters; now it sits just under the word */
@media (min-width: 1100px) { html body .foot-links a { justify-self: center; } html body .foot-links a::after { left: 0; right: 0; bottom: -6px; } }
/* finishes and building sections hold in place on laptops: keep the whole photo on screen when the window is short */
@media (min-width: 1100px) { html body .sp-img { max-height: max(300px, calc(100vh - 390px)); } }
/* the two upright tower photos are shown whole (not cropped) inside the wide picture frame, on a soft sky backdrop */
html body .sp-img img[data-n^="tower-"] { object-fit: contain; }
html body .sp-img:has(img[data-n^="tower-"].on) { background: linear-gradient(180deg, #c9d8e6 0%, #e4e8e4 70%, #eef0e4 100%); }