/* =========================================================
   PROPERTY PAGE LAYOUTS  (round 47)
   Editorial / Premium (.ly--editorial, .ed-*), Modern Real-Estate (.ly--modern, .md-*), Immersive / Visual (.ly--immersive, .im-*).
   Shared section pieces are .sx-* (their composition changes per layout via the modifier classes the views add).
   Colours: only four backgrounds are editable; text, cards and buttons come from the variables set in properties/show.blade.php:
     --s-*  on the section background      --a-*  on the alternate background
   Loaded after public/css/property-theme.css, which still provides the popup, lightbox, FAQ-less shared bits (.pt-modal, .pt-lightbox,
   .pt-gtabs, .pt-chip, .pt-plans lock, .pt-prose, .pt-more, .pt-band, .pt-rel).
   ========================================================= */

/* ---------- tokens ---------- */
.ly { --gutter: clamp(20px, 3.2vw, 56px);
    --bg: var(--s-bg);
    --ink: var(--s-ink);
    --body: var(--s-body);
    --mute: var(--s-mute);
    --line: var(--s-line);
    --card: var(--s-card);
    --card-ink: var(--s-card-ink);
    --serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --sans: "Plus Jakarta Sans", system-ui, sans-serif;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    background: var(--s-bg);
    color: var(--s-body);
    overflow-x: clip; font-family: var(--f); font-size: var(--t-body); line-height: var(--lh-body); }

.ly--editorial { --r: 2px; --r-btn: 2px; }
.ly--modern { --r: 12px; --r-btn: 10px; }
.ly--immersive { --r: 4px; --r-btn: 999px; }

.ly .ly-sec--alt,
.ly .md-facts {
    --bg: var(--a-bg);
    --ink: var(--a-ink);
    --body: var(--a-body);
    --mute: var(--a-mute);
    --line: var(--a-line);
    --card: var(--a-card);
    --card-ink: var(--a-card-ink);
}

.ly .ly-sec {
    padding-block: clamp(64px, 7.5vw, 128px);
    background: var(--bg);
    color: var(--body);
}

.ly .ly-wrap {
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding-inline: var(--gutter);
}

.ly .ly-wrap--wide {
    max-width: 1920px;
}

/* ---------- type scale ----------
   One scale for all three layouts, the popup and the lightbox (clamp() = smooth between phone and large desktop).
   Title 28 > 56px, section heading 24 > 36px, card heading 18 > 22px, body 15 > 16px, metadata 13 > 14px, price 28 > 36px,
   supporting figures 18 > 24px, buttons 14px. One family (Plus Jakarta Sans), weights 400 / 500 / 600 only. */
.ly,
.pt-modal,
.pt-lightbox {
    --f: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --t-title: clamp(1.75rem, 1.03rem + 2.96vw, 3.5rem);
    --t-h2: clamp(1.5rem, 1.2rem + 1.24vw, 2.25rem);
    --t-h3: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
    --t-body: clamp(0.9375rem, 0.9rem + 0.12vw, 1rem);
    --t-small: clamp(0.8125rem, 0.78rem + 0.1vw, 0.875rem);
    --t-xs: 0.75rem;
    --t-figure: clamp(1.75rem, 1.35rem + 1.5vw, 2.25rem);
    --t-stat: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem);
    --t-stat-sm: clamp(1rem, 0.95rem + 0.15vw, 1.125rem);
    --t-btn: 0.875rem;
    --lh-body: 1.65;
    --btn-h: 46px;
    --serif: var(--f);
    --sans: var(--f);
}
/* ---------- automatic accent colours per surface ----------
   Sections (.ly-sec) take the readable gold / bronze computed for THEIR background in PropertyTheme::surface(); the hero and
   other photo areas keep the plain accent. A custom icon colour from the admin (--icon) always wins over the automatic one. */
.ly { --auto-icon-color: var(--s-bronze, #9A610F); --auto-icon-hover: var(--s-icon-hover, var(--ink)); }
.ly .ly-sec,
.ly .md-hero,
.ly .ly-sec--alt,
.ly .md-facts { --icon: var(--a-icon); --disc-icon: var(--a-disc-icon); --btn: var(--a-btn); --btn-text: var(--a-btn-text); --accent: var(--a-gold); --auto-icon-color: var(--a-bronze); --auto-number-color: var(--icon, var(--a-bronze)); --auto-arrow-color: var(--icon, var(--a-bronze)); --auto-border-color: var(--icon, var(--a-bronze)); --auto-icon-hover: var(--a-icon-hover); }
.ly .ly-sec .sx-amen__group, .ly .ly-sec .md-ov__details, .ly .ly-sec .sx-pay, .ly .ly-sec .sx-specs { --icon: var(--s-card-icon); --auto-icon-color: var(--s-card-bronze); --accent: var(--s-card-bronze); }
.ly .ly-sec--alt .sx-amen__group, .ly .ly-sec--alt .md-ov__details, .ly .ly-sec--alt .sx-pay, .ly .ly-sec--alt .sx-specs { --icon: var(--a-card-icon); --auto-icon-color: var(--a-card-bronze); --accent: var(--a-card-bronze); }

/* ---------- buttons ---------- */
.ly .ly-btn { display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 26px;
    border: 1px solid var(--btn, var(--ink));
    border-radius: var(--r-btn, 4px);
    background: var(--btn, var(--ink));
    color: var(--btn-text, var(--bg));
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.3s var(--ease), background-color 0.3s, color 0.3s, border-color 0.3s; font: 600 var(--t-btn)/1 var(--f); letter-spacing: 0.01em; height: var(--btn-h); }

.ly .ly-btn:hover { transform: translateY(-2px); }
.ly .ly-btn:active { transform: scale(0.98); }
.ly .ly-btn--ghost { background: transparent; color: var(--ink); }
.ly .ly-btn--ghost:hover { background: var(--btn, var(--ink)); color: var(--btn-text, var(--bg)); }
.ly .ly-btn--light { border-color: #fff; background: #fff; color: #1a1a1a; }
.ly .ly-btn--ghost-light { border-color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.08); color: #fff; }
.ly .ly-btn--ghost-light:hover { background: #fff; color: #1a1a1a; }

.ly .sx-link { display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
    text-decoration: none;
    color: var(--ink); font-size: var(--t-btn); font-weight: 600; }

/* ---------- shared section head ---------- */
.ly .sx-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 24px;
    margin-bottom: clamp(28px, 4vw, 60px);
}

.ly .sx-title {
    margin: 0;
    color: var(--ink);
}

.ly .sx-count { color: var(--mute); font-size: var(--t-small); }

.ly .sx-sub { margin: 0 0 14px;
    text-transform: uppercase;
    color: var(--mute); font: 600 var(--t-xs)/1.3 var(--f); letter-spacing: 0.12em; }

.ly .sx-sub i { margin-right: 6px; color: var(--accent); }
.ly .sx-note { margin: 18px 0 0; color: var(--mute); font-size: var(--t-small); }

/* ---------- reveal on scroll (the script adds .js-reveal, then .is-in as things enter) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .js-reveal .ly [data-reveal] .sx-head,
    .js-reveal .ly [data-reveal-item],
    .js-reveal .ly .ed-ov[data-reveal] .ed-ov__media,
    .js-reveal .ly .ed-ov[data-reveal] .ed-ov__text,
    .js-reveal .ly .md-ov[data-reveal] .md-ov__grid,
    .js-reveal .ly .sx-cta[data-reveal] .sx-cta__inner {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity 0.9s var(--ease) calc(var(--rv-i, 0) * 70ms), transform 0.9s var(--ease) calc(var(--rv-i, 0) * 70ms);
    }

    .js-reveal .ly [data-reveal].is-in .sx-head,
    .js-reveal .ly [data-reveal-item].is-in,
    .js-reveal .ly .ed-ov[data-reveal].is-in .ed-ov__media,
    .js-reveal .ly .ed-ov[data-reveal].is-in .ed-ov__text,
    .js-reveal .ly .md-ov[data-reveal].is-in .md-ov__grid,
    .js-reveal .ly .sx-cta[data-reveal].is-in .sx-cta__inner {
        opacity: 1;
        transform: none;
    }

    .js-reveal .ly .ed-ov[data-reveal] .ed-ov__text { transition-delay: 0.18s; }
}

/* =========================================================
   SHARED SECTION PIECES (.sx-*)
   ========================================================= */

/* gallery pieces */
.ly .sx-img {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    overflow: hidden;
    border-radius: var(--r);
    background: var(--line);
    cursor: zoom-in;
}

.ly .sx-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease);
}

.ly .sx-img:hover img { transform: scale(1.05); }

.ly .sx-tag { position: absolute;
    left: 0;
    bottom: 0;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff; font-size: var(--t-xs); letter-spacing: 0.02em; }

.ly .sx-more { position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(20, 18, 14, 0.55);
    color: #fff; font-size: var(--t-h3); font-weight: 600; }

.ly .sx-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 clamp(20px, 2.6vw, 34px);
    border-bottom: 1px solid var(--line);
}

.ly .sx-tabs .pt-gtabs__btn { position: relative;
    padding: 10px 16px 12px;
    border: 0;
    background: none;
    color: var(--mute);
    cursor: pointer; font: 500 var(--t-btn)/1 var(--f); }

.ly .sx-tabs .pt-gtabs__btn span { margin-left: 4px; opacity: 0.7; font-size: var(--t-xs); }
.ly .sx-tabs .pt-gtabs__btn::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: var(--ink); opacity: 0; }
.ly .sx-tabs .pt-gtabs__btn.is-active { color: var(--ink); }
.ly .sx-tabs .pt-gtabs__btn.is-active::after { opacity: 1; }
.ly .sx-pane[hidden] { display: none; }
.ly .sx-video { overflow: hidden; border-radius: var(--r); }
.ly .sx-video-link { margin-top: 24px; }

/* configuration pieces */
.ly .sx-cfg { color: var(--body); }
.ly .sx-cfg__type { margin: 0; color: var(--ink); }
.ly .sx-cfg__specs { display: flex; flex-wrap: wrap; gap: 8px 36px; margin: 0; }
.ly .sx-cfg__specs dt { margin: 0 0 2px; color: var(--mute); font-size: var(--t-small); font-weight: 500; }
.ly .sx-cfg__specs dd { margin: 0; color: var(--ink); font-size: var(--t-stat); font-weight: 600; line-height: 1.25; }
.ly .sx-cfg__specs dd small { color: var(--mute); font-size: var(--t-xs); font-weight: 500; }
.ly .sx-sub--spec { margin-top: clamp(40px, 5vw, 72px); }
.ly .sx-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(32px, 5vw, 96px); margin: 0; }
.ly .sx-specs__row dt { margin: 0 0 3px; color: var(--mute); font-size: var(--t-small); font-weight: 500; }
.ly .sx-specs__row dd { margin: 0; color: var(--ink); font-size: var(--t-body); font-weight: 500; line-height: 1.45; }

/* amenities pieces */
.ly .sx-amen__list { margin: 0; padding: 0; list-style: none; }
.ly .sx-amen__list li { color: var(--ink); }
.ly .sx-amen__list i { color: var(--icon, var(--auto-icon-color)); transition: color 0.3s; }

/* plans (the blur / unlock behaviour is the existing gate) */
.ly .sx-plan-box { position: relative; display: block; grid-template-columns: none; gap: 0; padding: 0; }
.ly .sx-plan-box .pt-plans__lock p { color: #5a5a5a; }
.ly .sx-plan-box .pt-plans__lock p strong { color: #1a1a1a; }
.ly .sx-plan-box.is-locked img { filter: blur(11px); transform: scale(1.03); transition: filter 0.6s var(--ease), transform 0.6s var(--ease); pointer-events: none; user-select: none; }
.ly .sx-plan-box.is-locked.is-asking img { filter: blur(22px); }
.ly .sx-plan { display: flex; flex-direction: column; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--card-ink); text-align: left; cursor: zoom-in; }
.ly .sx-plan img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 12px; background: color-mix(in srgb, var(--card-ink) 5%, var(--card)); }
.ly .sx-plan .pt-plan__cap { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; color: var(--card-ink); }
.ly .sx-plan .pt-plan__cap small { color: color-mix(in srgb, var(--card-ink) 60%, transparent); }
.ly .sx-plan[hidden], .ly .md-viewer__list li[hidden] { display: none; }

.ly .sx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(20px, 2.6vw, 32px); }
.ly .sx-chips .pt-chip { padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--r-btn); background: transparent; color: var(--ink); cursor: pointer; font: 500 var(--t-small)/1 var(--f); }
.ly .sx-chips .pt-chip.is-active { border-color: var(--ink); background: var(--ink); color: var(--bg); }

/* location pieces */
.ly .sx-map { position: relative; overflow: hidden; border-radius: var(--r); background: var(--line); }
.ly .sx-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ly .sx-place ul { margin: 0; padding: 0; list-style: none; }
.ly .sx-place li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 7px 0; color: var(--ink); font-size: var(--t-body); line-height: 1.45; }
.ly .sx-place li b { flex-shrink: 0; white-space: nowrap; color: var(--ink); font-size: var(--t-small); font-weight: 600; }

/* timeline pieces */
.ly .sx-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.ly .sx-timeline__date { display: block; text-transform: uppercase; color: var(--accent); font-size: var(--t-small); font-weight: 600; letter-spacing: 0.1em; }
.ly .sx-timeline__title { margin: 4px 0 6px; color: var(--ink); font-size: var(--t-h3); font-weight: 600; line-height: 1.25; }
.ly .sx-timeline__item p { margin: 0; max-width: 56ch; line-height: 1.6; color: var(--body); }
.ly .sx-timeline__photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ly .sx-timeline__photos img { width: 120px; height: 84px; object-fit: cover; border-radius: var(--r); }

.ly .sx-rera__body { display: grid; gap: clamp(28px, 3vw, 44px); }
.ly .sx-rera__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.ly .sx-rera__item { display: flex; align-items: center; gap: 20px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--card-ink); }
.ly .sx-rera__qr { flex-shrink: 0; width: 96px; height: 96px; padding: 4px; background: #fff; }
.ly .sx-rera__qr img, .ly .sx-rera__qr canvas { display: block; width: 88px; height: 88px; }
.ly .sx-rera__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ly .sx-rera__text small { color: color-mix(in srgb, var(--card-ink) 62%, transparent); font-size: var(--t-small); }
.ly .sx-rera__text strong { word-break: break-all; color: var(--card-ink); font-size: var(--t-h3); font-weight: 600; letter-spacing: 0.02em; }
.ly .sx-rera__text .sx-link { margin-top: 4px; align-self: flex-start; color: var(--card-ink); }
.ly .sx-docs ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ly .sx-docs a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); font-size: var(--t-body); font-weight: 600; }
.ly .sx-docs a span { flex: 1; }
.ly .sx-docs a i { color: var(--accent); }

/* FAQ */
.ly .sx-faq__list { max-width: 960px; }
.ly .sx-faq__item { border-bottom: 1px solid var(--line); }
.ly .sx-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; list-style: none; cursor: pointer; color: var(--ink); font-size: var(--t-h3); font-weight: 600; line-height: 1.4; }
.ly .sx-faq__item summary::-webkit-details-marker { display: none; }
.ly .sx-faq__item summary i { flex-shrink: 0; font-size: 18px; color: var(--accent); transition: transform 0.4s var(--ease); }
.ly .sx-faq__item[open] summary i { transform: rotate(45deg); }
.ly .sx-faq__item p { margin: 0 0 24px; max-width: 70ch; line-height: 1.7; color: var(--body); }

/* final CTA */
.ly--editorial .sx-cta h2 { font-family: var(--f); font-weight: 600; letter-spacing: -0.015em; }
.ly--immersive .sx-cta h2 { font-weight: 600; }
.ly .sx-cta { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(64px, 8vw, 128px); }
.ly .sx-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; }
.ly .sx-cta h2 { margin: 0 0 10px; font-size: var(--t-h2); line-height: 1.2; }
.ly .sx-cta p { margin: 0; max-width: 56ch; font-size: var(--t-body); line-height: var(--lh-body); }
.ly .sx-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ly .sx-cta--dark { background: var(--brand); color: #fff; }
.ly .sx-cta--dark h2 { color: #fff; }
.ly .sx-cta--dark p { color: rgba(255, 255, 255, 0.78); }
.ly .sx-cta--dark .ly-btn { border-color: #fff; background: #fff; color: #1a1a1a; }
.ly .sx-cta--dark .ly-btn--ghost { background: transparent; color: #fff; }
.ly .sx-cta--light { background: var(--a-bg); color: var(--a-body); }
.ly .sx-cta--light h2 { color: var(--a-ink); }
.ly .sx-cta--light .ly-btn { border-color: var(--a-ink); background: var(--a-ink); color: var(--a-bg); }
.ly .sx-cta--light .ly-btn--ghost { background: transparent; color: var(--a-ink); }
.ly .sx-cta--photo { min-height: clamp(420px, 70svh, 760px); display: flex; align-items: center; background: var(--brand); color: #fff; }
.ly .sx-cta--photo h2 { color: #fff; font-size: var(--t-h2); letter-spacing: -0.015em; }
.ly .sx-cta--photo p { color: rgba(255, 255, 255, 0.85); }
.ly .sx-cta--photo .sx-cta__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ly .sx-cta--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--brand-rgb), 0.9), rgba(var(--brand-rgb), 0.35)); }
.ly .sx-cta--photo .sx-cta__inner { width: 100%; }
.ly .sx-cta--photo .ly-btn { border-color: #fff; background: #fff; color: #1a1a1a; }
.ly .sx-cta--photo .ly-btn--ghost { background: transparent; color: #fff; }

/* shared old components that sit on the new backgrounds */
.ly .pt-prose { color: var(--body); }
.ly .pt-prose p { margin: 0 0 1.1em; line-height: 1.75; }
.ly .pt-more { padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; font: 600 var(--t-btn)/1 var(--f); }
.ly .pt-related { padding-block: clamp(48px, 6vw, 96px); }
.ly .pt-related .pt-h2 { color: var(--s-ink); }
.ly .pt-after { background: var(--s-bg); }

/* =========================================================
   LAYOUT 1: EDITORIAL / PREMIUM
   ========================================================= */
.ly--editorial .sx-title { font: 600 var(--t-h2)/1.2 var(--f); letter-spacing: -0.015em; }
.ly--editorial .sx-head { align-items: flex-end; padding-bottom: 18px; border-bottom: 1px solid var(--line); }

/* hero */
.ly--editorial .ed-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: max(660px, calc(100svh - var(--hx-header-h, 80px))); overflow: hidden; background: var(--brand); color: #fff; }
.ly--editorial .ed-hero__media { position: absolute; inset: 0; z-index: -2; }
.ly--editorial .ed-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.ly--editorial .ed-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(var(--brand-rgb), 0.9) 0%, rgba(var(--brand-rgb), 0.35) 38%, rgba(var(--brand-rgb), 0.05) 70%), linear-gradient(90deg, rgba(var(--brand-rgb), 0.55), rgba(var(--brand-rgb), 0) 62%); }
.ly--editorial .ed-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 96px; padding-bottom: clamp(140px, 14vw, 210px); }
.ly--editorial .ed-status { padding: 7px 14px; border: 1px solid rgba(255, 255, 255, 0.6); text-transform: uppercase; font: 600 var(--t-xs)/1 var(--f); letter-spacing: 0.14em; }
.ly--editorial .ed-title { margin: 0; max-width: 16ch; color: #fff; font: 600 var(--t-title)/1.12 var(--f); letter-spacing: -0.02em; text-wrap: balance; }
.ly--editorial .ed-loc { margin: 0; color: rgba(255, 255, 255, 0.9); font-size: var(--t-body); font-weight: 500; }
.ly--editorial .ed-loc i { margin-right: 6px; color: var(--accent); }
.ly--editorial .ed-hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px clamp(32px, 5vw, 80px); width: 100%; margin-top: 18px; }
.ly--editorial .ed-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.ly--editorial .ed-photos { margin-left: auto; padding: 0 0 4px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.7); background: none; color: #fff; cursor: pointer; font: 600 var(--t-btn)/1.2 var(--f); }
.ly--editorial .ed-photos i { margin-right: 8px; }

/* snapshot floating over the hero */
.ly--editorial .ed-snap { position: relative; z-index: 5; margin-top: calc(-1 * clamp(72px, 7vw, 112px)); padding-bottom: clamp(56px, 6vw, 104px); }
.ly--editorial .ed-snap__grid { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); margin: 0; border-radius: var(--r); background: var(--s-card); box-shadow: 0 0 0 1px rgba(26, 22, 18, 0.06), 0 44px 80px -44px rgba(20, 16, 10, 0.55); color: var(--s-card-ink); }
.ly--editorial .ed-snap__cell { padding: clamp(22px, 2.6vw, 38px) clamp(16px, 2vw, 32px); border-left: 1px solid var(--s-line); }
.ly--editorial .ed-snap__cell:first-child { border-left: 0; }
.ly--editorial .ed-snap__cell dt { margin: 0 0 6px; color: color-mix(in srgb, var(--s-card-ink) 62%, transparent); font-size: var(--t-small); font-weight: 500; }
.ly--editorial .ed-snap__cell dd { margin: 0; color: var(--s-card-ink); overflow-wrap: anywhere; font: 600 var(--t-stat)/1.25 var(--f); }

/* overview: image + a text block that overlaps its edge */
.ly--editorial .ed-ov { padding-top: clamp(24px, 3vw, 56px); }
.ly--editorial .ed-ov__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.ly--editorial .ed-ov__media { position: relative; grid-column: 6 / 13; grid-row: 1; margin: 0; height: clamp(420px, 46vw, 760px); overflow: hidden; border-radius: var(--r); }
.ly--editorial .ed-ov__media img { width: 100%; height: 100%; object-fit: cover; }
.ly--editorial .ed-ov__text { --ink: var(--card-ink); --body: color-mix(in srgb, var(--card-ink) 78%, transparent); --mute: color-mix(in srgb, var(--card-ink) 62%, transparent); --line: color-mix(in srgb, var(--card-ink) 16%, transparent); grid-column: 1 / 7; grid-row: 1; position: relative; z-index: 2; padding: clamp(28px, 3.6vw, 68px); background: var(--card); color: var(--card-ink); box-shadow: 0 0 0 1px rgba(26, 22, 18, 0.05), 0 50px 90px -50px rgba(20, 16, 10, 0.5); }
.ly--editorial .ed-ov__grid--text .ed-ov__text { grid-column: 3 / 11; }
.ly--editorial .ed-ov__text .sx-title { margin-bottom: 22px; font-size: var(--t-h2); }
.ly--editorial .ed-prose p:first-child { color: var(--ink); font: 500 var(--t-body)/var(--lh-body) var(--f); }
.ly--editorial .ed-prose.is-collapsed { max-height: 260px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.ly--editorial .ed-ov__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.ly--editorial .ed-ov__facts dt { margin: 0; color: var(--mute); font-size: var(--t-small); font-weight: 500; }
.ly--editorial .ed-ov__facts dd { margin: 2px 0 0; color: var(--ink); font-size: var(--t-body); font-weight: 600; }

/* why this project: statements, staggered */

/* masonry gallery */
.ly--editorial .sx-mosaic--masonry { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(110px, 12.5vw, 210px); gap: clamp(8px, 1vw, 16px); }
.ly--editorial .sx-mosaic--masonry .sx-img:nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 4; }
.ly--editorial .sx-mosaic--masonry .sx-img:nth-child(2) { grid-column: 8 / 13; grid-row: 1 / 3; }
.ly--editorial .sx-mosaic--masonry .sx-img:nth-child(3) { grid-column: 8 / 13; grid-row: 3 / 4; }
.ly--editorial .sx-mosaic--masonry .sx-img:nth-child(4) { grid-column: 1 / 5; grid-row: 4 / 6; }
.ly--editorial .sx-mosaic--masonry .sx-img:nth-child(5) { grid-column: 5 / 9; grid-row: 4 / 6; }
.ly--editorial .sx-mosaic--masonry .sx-img:nth-child(6) { grid-column: 9 / 13; grid-row: 4 / 6; }
.ly--editorial .sx-mosaic--masonry .sx-img:nth-child(7) { grid-column: 1 / 13; grid-row: 6 / 8; }
.ly--editorial .sx-mosaic--n1 .sx-img:nth-child(1) { grid-column: 1 / 13; grid-row: 1 / 5; }
.ly--editorial .sx-mosaic--n2 .sx-img:nth-child(2) { grid-row: 1 / 4; }
.ly--editorial .sx-mosaic--n3 .sx-img:nth-child(1) { grid-row: 1 / 4; }
.ly--editorial .sx-mosaic--n4 .sx-img:nth-child(4) { grid-column: 1 / 13; grid-row: 4 / 6; }
.ly--editorial .sx-mosaic--n5 .sx-img:nth-child(4) { grid-column: 1 / 7; }
.ly--editorial .sx-mosaic--n5 .sx-img:nth-child(5) { grid-column: 7 / 13; }

/* configurations: wide horizontal bands */

/* amenities: icon tiles */

/* plans: two large tiles */
/* Editorial plans (compact): 3 cards per row on desktop, 2 on tablet, 1 on phones. The image is a fixed-height frame with
   object-fit: contain, so a floor plan is never cropped or stretched whatever its proportions. */
.ly--editorial .sx-plan-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.ly--editorial .sx-plan img { aspect-ratio: auto; height: clamp(190px, 15.5vw, 260px); padding: 10px; object-fit: contain; }

/* location: wide map, then the places in columns */
.ly--editorial .sx-loc__body { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 64px); }

/* construction: a centre line, entries alternating either side */
.ly--editorial .sx-prog--centre .sx-timeline { max-width: 1100px; margin-inline: auto; }
.ly--editorial .sx-prog--centre .sx-timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 50%; width: 1px; background: var(--line); }
.ly--editorial .sx-prog--centre .sx-timeline__item { position: relative; width: 50%; padding: 0 clamp(28px, 4vw, 64px) clamp(36px, 4vw, 64px) 0; text-align: right; }
.ly--editorial .sx-prog--centre .sx-timeline__item:nth-child(even) { margin-left: 50%; padding: 0 0 clamp(36px, 4vw, 64px) clamp(28px, 4vw, 64px); text-align: left; }
.ly--editorial .sx-prog--centre .sx-timeline__item::after { content: ""; position: absolute; top: 6px; right: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px var(--bg); }
.ly--editorial .sx-prog--centre .sx-timeline__item:nth-child(even)::after { right: auto; left: -6px; }
.ly--editorial .sx-prog--centre .sx-timeline__item p { margin-left: auto; }
.ly--editorial .sx-prog--centre .sx-timeline__item:nth-child(even) p { margin-left: 0; }
.ly--editorial .sx-prog--centre .sx-timeline__photos { justify-content: flex-end; }
.ly--editorial .sx-prog--centre .sx-timeline__item:nth-child(even) .sx-timeline__photos { justify-content: flex-start; }

/* parallax (Editorial only). Layers travel at different speeds while they cross the screen:
   the hero photo drifts slower than the page, the overview and gallery photos slide inside their frames, the overview text card
   and every second "why" statement drift against the scroll for depth.
   Modern browsers: CSS scroll-driven animation (runs on the compositor, no JS). Others: a throttled script sets the same
   `translate` values and adds .par-js. Both use the individual `translate` property so the hover zoom (transform) and the reveal keep working.
   Nothing moves when the visitor asks for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .ly--editorial .ed-hero__media { inset: -12% 0; }
        .ly--editorial .ed-hero__media img { will-change: translate; animation: ed-par-hero linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
        .ly--editorial .ed-ov__media { view-timeline: --ed-ov block; } /* named, because the frame clips (overflow hidden) and so is a scroll container of its own */
        .ly--editorial .ed-ov__media img[data-par] { position: absolute; top: -9%; left: 0; height: 118%; will-change: translate; animation: ed-par-img linear both; animation-timeline: --ed-ov; }
        .ly--editorial .sx-mosaic--masonry .sx-img { view-timeline: --ed-tile block; }
        .ly--editorial .sx-mosaic--masonry .sx-img img[data-par] { position: absolute; top: -8%; left: 0; height: 116%; will-change: translate; animation: ed-par-tile linear both; animation-timeline: --ed-tile; }
    }
    @supports (animation-timeline: view()) {
        @media (min-width: 992px) {
            .ly--editorial .ed-ov__text[data-par] { animation: ed-par-float linear both; animation-timeline: view(); }
        }
    }

    /* fallback driven by the script */
    .par-js .ly--editorial .ed-hero__media { inset: -12% 0; }
    .par-js .ly--editorial .ed-hero__media img,
    .par-js .ly--editorial .ed-ov__media img[data-par],
    .par-js .ly--editorial .sx-mosaic--masonry .sx-img img[data-par] { will-change: translate; }
    .par-js .ly--editorial .ed-ov__media img[data-par] { position: absolute; top: -9%; left: 0; height: 118%; }
    .par-js .ly--editorial .sx-mosaic--masonry .sx-img img[data-par] { position: absolute; top: -8%; left: 0; height: 116%; }
}

@keyframes ed-par-hero { from { translate: 0 0; } to { translate: 0 10%; } }
@keyframes ed-par-img { from { translate: 0 -7%; } to { translate: 0 7%; } }
@keyframes ed-par-tile { from { translate: 0 -6%; } to { translate: 0 6%; } }
@keyframes ed-par-float { from { translate: 0 46px; } to { translate: 0 -46px; } }

/* =========================================================
   SHARED PIECES: same type scale (see "type scale" at the top)
   Related cards, developer band, plan captions, the enquiry popup and the lightbox are used by all three layouts.
   Same section rhythm in every layout: one padding scale, one heading gap.
   ========================================================= */
/* one family and restrained weights everywhere on the page (the site's global heading rule would otherwise bring in Outfit) */
.ly :is(h1, h2, h3, h4, h5, h6),
.pt-modal :is(h1, h2, h3, h4, h5, h6) { font-family: var(--f); }
.ly :is(strong, b) { font-weight: 600; }
.ly dt { font-weight: 500; }
.ly .ly-sec { padding-block: clamp(56px, 6.5vw, 104px); }
.ly--modern .ly-sec { padding-block: clamp(56px, 6.5vw, 104px); }
.ly .sx-head { margin-bottom: clamp(24px, 3vw, 44px); }
.ly .pt-prose { line-height: var(--lh-body); }
.ly .pt-prose p { margin: 0 0 1em; line-height: var(--lh-body); }

.ly .pt-h2,
.ly .pt-card__head .pt-h2,
.ly .pt-link { font-size: var(--t-btn); font-weight: 600; }
.ly .pt-rel h3 { font: 600 var(--t-h3)/1.25 var(--f); letter-spacing: -0.005em; }
.ly .pt-rel__type, .ly .pt-rel__tag { font-size: var(--t-xs); font-weight: 600; }
.ly .pt-rel__loc { font-size: var(--t-small); }
.ly .pt-plan__cap { font-size: var(--t-small); }
.ly .pt-plan__cap strong { font-size: var(--t-body); font-weight: 600; }
.ly .pt-plan__cap small { font-size: var(--t-xs); }
.ly .pt-plans__lock p { font-size: var(--t-small); }
.ly .pt-plans__lock p strong { font: 600 var(--t-h3)/1.25 var(--f); }
.ly .pt-btn, .pt-modal .pt-btn { font: 600 var(--t-btn)/1 var(--f); }

.pt-modal .pt-modal__title { font: 600 var(--t-h3)/1.25 var(--f); letter-spacing: -0.005em; }
.pt-modal .pt-modal__text { font-size: var(--t-small); line-height: 1.55; }
.pt-modal .pt-modal__field span { font-size: var(--t-xs); font-weight: 600; }
.pt-modal .pt-modal__field input { font: 400 var(--t-body)/1.4 var(--f); }
.pt-modal .pt-modal__error { font-size: var(--t-small); }
.pt-modal .pt-modal__fine { font-size: var(--t-xs); }
.pt-modal .pt-modal__done .pt-modal__text { font-size: var(--t-body); }
.pt-modal .pt-modal__submit { font: 600 var(--t-btn)/1 var(--f); min-height: var(--btn-h); }
.pt-lightbox figcaption { font: 400 var(--t-small)/1.4 var(--f); }

/* =========================================================
   HERO ENQUIRY FORM (optional, admin > Page Theme > "Show Enquiry Form in Hero Banner")
   A white card on the right of the banner in all three layouts. Two columns on desktop, stacked under the property details on
   tablets, full width on phones. Always white with dark text, whatever the page's background colours are.
   ========================================================= */
.ly .hf {
    --ink: #1A1A1A;
    --body: #4A4A4A;
    --mute: #6B6B6B;
    --line: #D9D6CE;
    --bg: #FFFFFF;
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(18px, 2vw, 26px);
    border-radius: 14px;
    background: #FFFFFF;
    color: var(--body);
    box-shadow: 0 0 0 1px rgba(26, 22, 18, 0.06), 0 30px 70px -28px rgba(10, 8, 5, 0.6);
}

.ly .hf__title { margin: 0 0 4px; font: 600 var(--t-h3)/1.25 var(--f); letter-spacing: -0.005em; color: var(--ink); }
.ly .hf__lead { margin: 0 0 14px; font-size: var(--t-small); line-height: 1.5; color: var(--mute); }
.ly .hf__field { margin: 0 0 10px; }
.ly .hf__field label { display: block; margin: 0 0 5px; font: 600 var(--t-xs)/1.2 var(--f); color: var(--ink); }
.ly .hf__field label em { font-style: normal; font-weight: 500; color: var(--mute); }
.ly .hf__field :is(input, textarea) {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #FFFFFF;
    font: 400 var(--t-body)/1.4 var(--f);
    color: var(--ink);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ly .hf__field textarea { resize: vertical; min-height: 56px; }
.ly .hf__field :is(input, textarea):focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.12); }
.ly .hf__field [aria-invalid="true"] { border-color: #B3261E; }
.ly .hf__err { margin: 5px 0 0; font-size: var(--t-xs); line-height: 1.4; color: #B3261E; }
.ly .hf__alert { margin: 0 0 12px; padding: 9px 12px; border-radius: 8px; background: #FCEDEC; font-size: var(--t-small); line-height: 1.45; color: #8C1D18; }
.ly .hf__submit { width: 100%; border-radius: 8px; }
.ly .hf__submit[disabled] { opacity: 0.7; cursor: progress; transform: none; }
.ly .hf__fine { margin: 10px 0 0; font-size: var(--t-xs); line-height: 1.45; color: var(--mute); }
.ly .hf__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ly .hf__done { padding: 24px 4px; text-align: center; outline: none; }
.ly .hf__done i { display: block; margin-bottom: 8px; font-size: 2.25rem; line-height: 1; color: #2E7D32; }
.ly .hf__done .hf__lead { margin: 0; }
.ly .hf__form[hidden], .ly .hf__done[hidden] { display: none; }

/* Editorial: the hero's inner box becomes two columns, details left and the form right */
.ly--editorial .ed-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; min-width: 0; }
.ly--editorial .ed-hero--form .ed-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); align-items: end; column-gap: clamp(28px, 4vw, 72px); }
.ly--editorial .ed-hero--form .hf { justify-self: end; }
.ly--editorial .ed-hero--form .ed-hero__row { margin-top: 4px; }
.ly--editorial .ed-hero--form .ed-photos { margin-left: 0; }

/* Immersive: same idea inside the full-screen hero */

/* Modern: with the form on, the photos and the property details share the left column and the form takes the right one */

@media (max-width: 991.98px) {
    .ly--editorial .ed-hero--form .ed-hero__inner { grid-template-columns: minmax(0, 1fr); row-gap: 24px; align-items: start; }
    .ly--editorial .ed-hero--form .hf { justify-self: start; max-width: 560px; }
}

@media (max-width: 575.98px) {
    .ly--editorial .ed-hero--form .hf { max-width: none; width: 100%; }
}

/* =========================================================
   LAYOUT 2: MODERN REAL-ESTATE
   ========================================================= */
.ly--modern .sx-title { font: 600 var(--t-h2)/1.2 var(--f); letter-spacing: -0.015em; }
.ly--modern .ly-sec { padding-block: clamp(48px, 5.5vw, 96px); }
.ly--modern .sx-head { margin-bottom: clamp(24px, 3vw, 40px); }

/* split hero */

/* facts strip */

/* sticky section bar with the enquiry button */

/* overview */
.ly--modern .md-ov__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.ly--modern .md-ov .pt-prose.is-collapsed { max-height: 300px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }

/* interactive numbered highlights */
@keyframes md-swap { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* gallery grid */
.ly--modern .sx-mosaic--n1 .sx-img:nth-child(1), .ly--modern .sx-mosaic--n2 .sx-img:nth-child(1) { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }


/* amenities: categorised rows */

/* plans: big preview + thumbnail list */
.ly--modern .md-viewer { display: grid; grid-template-columns: minmax(0, 8fr) minmax(260px, 4fr); gap: clamp(16px, 2vw, 28px); align-items: start; }
.ly--modern .md-viewer__main { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); cursor: zoom-in; }
.ly--modern .md-viewer__main img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 18px; background: color-mix(in srgb, var(--card-ink) 5%, var(--card)); }
.ly--modern .md-viewer__cap { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; text-align: left; color: var(--card-ink); }
.ly--modern .md-viewer__cap small { color: color-mix(in srgb, var(--card-ink) 60%, transparent); }
.ly--modern .md-viewer__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ly--modern .md-thumb { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); text-align: left; color: var(--card-ink); cursor: pointer; transition: border-color 0.3s; }
.ly--modern .md-thumb img { width: 84px; height: 64px; object-fit: cover; border-radius: calc(var(--r) - 4px); }
.ly--modern .md-thumb span { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-small); }
.ly--modern .md-thumb small { color: color-mix(in srgb, var(--card-ink) 58%, transparent); font-size: var(--t-xs); }
.ly--modern .md-thumb.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* location: list and map in one panel */

/* construction: a vertical rail on the left */

/* =========================================================
   LAYOUT 3: IMMERSIVE / VISUAL
   ========================================================= */
.ly--immersive .sx-title { font: 600 var(--t-h2)/1.2 var(--f); letter-spacing: -0.015em; }
.ly--immersive .sx-head { flex-direction: column; align-items: flex-start; gap: 10px; }
.ly--immersive .sx-count { font-size: var(--t-small); }


/* story */
.ly--immersive .im-prose { max-width: 62ch; font-size: var(--t-body); }
.ly--immersive .im-prose.is-collapsed { max-height: 220px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }

/* key numbers */




/* plans: a wide horizontal row */
.ly--immersive .sx-plan-row { display: flex; gap: clamp(14px, 2vw, 28px); overflow-x: auto; padding: 0 0 6px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.ly--immersive .sx-plan { flex: 0 0 min(82vw, 640px); scroll-snap-align: start; }
.ly--immersive .sx-plan img { aspect-ratio: 4 / 3; padding: 22px; }



/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1199.98px) {
    .ly--editorial .ed-snap__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ly--editorial .ed-snap__cell:nth-child(4) { border-left: 0; }
    .ly--editorial .ed-snap__cell:nth-child(n+4) { border-top: 1px solid var(--s-line); }
}

@media (max-width: 991.98px) {
    .ly--editorial .ed-ov__media { grid-column: 1 / -1; height: clamp(300px, 56vw, 520px); }
    .ly--editorial .ed-ov__text { grid-column: 1 / -1; grid-row: 2; margin: -64px clamp(0px, 4vw, 40px) 0; }
    .ly--editorial .ed-ov__grid--text .ed-ov__text { grid-column: 1 / -1; margin: 0; }
    .ly--editorial .sx-plan-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ly--editorial .sx-prog--centre .sx-timeline::before { left: 7px; }
    .ly--editorial .sx-prog--centre .sx-timeline__item, .ly--editorial .sx-prog--centre .sx-timeline__item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 36px 40px; text-align: left; }
    .ly--editorial .sx-prog--centre .sx-timeline__item::after, .ly--editorial .sx-prog--centre .sx-timeline__item:nth-child(even)::after { left: 1px; right: auto; }
    .ly--editorial .sx-prog--centre .sx-timeline__item p { margin-left: 0; }
    .ly--editorial .sx-prog--centre .sx-timeline__photos { justify-content: flex-start; }

    .ly--modern .md-ov__grid, .ly--modern .md-hl__grid, .ly--modern .md-viewer { grid-template-columns: minmax(0, 1fr); }

    .ly--immersive .im-amen { grid-template-columns: minmax(0, 1fr); }
    .ly--immersive .im-amen__tabs { flex-direction: row; gap: 18px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
    .ly--immersive .im-amen__tab { flex: none; padding: 8px 0; white-space: nowrap; }
    .ly--immersive .im-amen__tab.is-active { padding-left: 0; box-shadow: inset 0 -3px 0 var(--accent); }
}

@media (max-width: 767.98px) {
    .ly .sx-specs { grid-template-columns: minmax(0, 1fr); }
    .ly .sx-rera__item { flex-direction: row; }
    .ly .sx-cta__actions .ly-btn { flex: 1 1 100%; }

    .ly--editorial .ed-hero { min-height: max(600px, calc(100svh - var(--hx-header-h, 72px))); }
    .ly--editorial .ed-photos { margin-left: 0; }
    .ly--editorial .ed-snap__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ly--editorial .ed-snap__cell { border-left: 0; border-top: 1px solid var(--s-line); }
    .ly--editorial .ed-snap__cell:nth-child(-n+2) { border-top: 0; }
    .ly--editorial .ed-snap__cell:nth-child(even) { border-left: 1px solid var(--s-line); }
    .ly--editorial .sx-mosaic--masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 38vw; }
    .ly--editorial .sx-mosaic--masonry .sx-img:nth-child(n) { grid-column: auto; grid-row: auto; }
    .ly--editorial .sx-mosaic--masonry .sx-img:nth-child(1) { grid-column: 1 / -1; grid-row: span 2; }


    .ly--immersive .im-amen__panel { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ly *, .ly *::before, .ly *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

/* =========================================================
   EDITORIAL AMENITIES (reference: asymmetric category cards)
   Ivory #FAF8F3 section; header = bronze eyebrow + line, serif "Amenities", count far right. Cards on a 50-column grid with spans
   per position (27/23, 18/15/17, 33/17): ivory card, thin beige border, 3px bronze left edge, radius 10px, a soft beige curve behind
   the content; title = uppercase bronze sans + thin separator + count; items = 78px #F4EDE0 disc + bronze line icon (admin icon
   colour / hover colour) + serif name, with vertical hairlines between items.
   ========================================================= */
.ly--editorial .sx-amen--icons { --am-bronze: var(--icon, var(--auto-icon-color)); --am-title: var(--am-bronze); --am-ink: var(--ink); --am-mute: var(--mute); --am-line: var(--line); --am-card: color-mix(in srgb, var(--bg) 70%, #fff); --am-disc: color-mix(in srgb, var(--am-bronze) 11%, transparent); --am-curve: color-mix(in srgb, var(--am-bronze) 4%, transparent); --am-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif; }
.ly--editorial .ed-amen--ivory { --bg: #FAF8F3; --am-title: var(--iv-accent, #8F5A0A); --am-ink: var(--iv-ink, #171717); --am-mute: #6F6A62; --am-line: var(--iv-line, #E4DCCD); --am-card: #FCFAF6; --am-disc: var(--iv-tint, #F1E8D8); --am-curve: #F6F1E8; background: #FAF8F3; }
.ly--editorial .ed-amen__head { align-items: flex-end; margin-bottom: clamp(32px, 4vw, 56px); padding-bottom: 0; border-bottom: 0; }
.ly--editorial .ed-eyebrow { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; font: 500 clamp(0.8125rem, 0.78rem + 0.1vw, 0.9375rem)/1.2 var(--f); letter-spacing: 0.3em; text-transform: uppercase; color: var(--am-bronze); }
.ly--editorial .ed-eyebrow span { display: block; width: 56px; height: 1px; background: var(--am-bronze); }
.ly--editorial .sx-amen--icons .sx-title { font: 400 clamp(2.5rem, 1.4rem + 3vw, 4.25rem)/1 var(--am-serif); letter-spacing: -0.015em; color: var(--am-ink); }
.ly--editorial .sx-amen--icons .sx-count { font: 400 clamp(1rem, 0.95rem + 0.15vw, 1.125rem)/1 var(--f); color: var(--am-mute); }
.ly--editorial .ed-amen { display: grid; grid-template-columns: repeat(50, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 22px); }
.ly--editorial .ed-amen__card { position: relative; isolation: isolate; grid-column: span var(--span, 25); min-height: clamp(180px, 14vw, 205px); padding: clamp(20px, 2vw, 28px) clamp(20px, 2.2vw, 32px); overflow: hidden; border: 1px solid var(--am-line); border-left: 3px solid var(--am-bronze); border-radius: 10px; background: var(--am-card); }
.ly--editorial .ed-amen__card::after { content: ""; position: absolute; z-index: -1; right: -14%; bottom: -78%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--am-curve); }
.ly--editorial .ed-amen__card:nth-child(3n)::after { right: -20%; bottom: -60%; width: 40%; }
/* reference refinements: count line, tinted / white cards, curve corner per card, sans amenity names */
.ly--editorial .sx-amen--icons .sx-count { display: inline-flex; align-items: center; gap: 22px; }
.ly--editorial .ed-amen__countline { display: block; width: 74px; height: 1px; background: var(--am-bronze); }
.ly--editorial .ed-amen--ivory .ed-amen__card.is-tint { background: #F7F1E7; }
.ly--editorial .ed-amen--ivory .ed-amen__card.is-plain { background: #FFFFFF; }
.ly--editorial .ed-amen__card.is-plain::after { display: none; }
.ly--editorial .ed-amen--ivory .ed-amen__card.is-tint::after { background: #EFE5D5; opacity: 0.75; }
.ly--editorial .ed-amen__card.is-lead::after { top: -60%; bottom: auto; right: -10%; width: 42%; }
.ly--editorial .ed-amen__name { font: 400 clamp(1rem, 0.88rem + 0.38vw, 1.25rem)/1.35 var(--f); letter-spacing: -0.005em; }
.ly--editorial .ed-amen__cat { display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(16px, 1.8vw, 24px); font: 600 clamp(0.9375rem, 0.85rem + 0.3vw, 1.1875rem)/1.2 var(--f); letter-spacing: 0.14em; text-transform: uppercase; color: var(--am-title); }
.ly--editorial .ed-amen__cat span { display: block; width: 1px; height: 20px; background: var(--am-line); }
.ly--editorial .ed-amen__cat b { font-weight: 500; letter-spacing: 0.04em; color: var(--am-mute); }
.ly--editorial .ed-amen__list { display: flex; flex-wrap: wrap; gap: 16px 0; margin: 0; padding: 0; list-style: none; }
.ly--editorial .ed-amen__item { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 220px; padding: 0 clamp(14px, 1.6vw, 24px); border-left: 1px solid var(--am-line); transition: transform 0.35s var(--ease); }
.ly--editorial .ed-amen__item:first-child { padding-left: 0; border-left: 0; }
.ly--editorial .ed-amen__item:hover { transform: translateY(-2px); }
.ly--editorial .ed-amen__disc { flex: none; display: grid; place-items: center; width: clamp(60px, 5.4vw, 78px); height: clamp(60px, 5.4vw, 78px); border-radius: 50%; background: var(--icon-bg, var(--am-disc)); box-shadow: inset 0 0 0 1px var(--icon-border, transparent); }
.ly--editorial .ed-amen__disc i { font-size: clamp(1.6rem, 1.2rem + 0.9vw, 2.25rem); line-height: 1; color: var(--disc-icon, var(--am-bronze)); transition: color 0.3s; }
.ly--editorial .ed-amen__item:hover .ed-amen__disc i { color: var(--auto-icon-hover); }
.ly--editorial .ed-amen__name { min-width: 0; color: var(--am-ink); overflow-wrap: anywhere; }
@media (max-width: 1199.98px) {
    .ly--editorial .ed-amen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ly--editorial .ed-amen__card { grid-column: span 1; }
    .ly--editorial .ed-amen__card.is-wide { grid-column: 1 / -1; }
    .ly--editorial .ed-amen__card:last-child:not(.is-wide) { grid-column: 1 / -1; } /* a card left alone on the last row fills it */
}
@media (max-width: 767.98px) {
    .ly--editorial .ed-amen { grid-template-columns: minmax(0, 1fr); }
    .ly--editorial .ed-amen__card, .ly--editorial .ed-amen__card.is-wide { grid-column: 1 / -1; min-height: 0; padding: 20px; }
    .ly--editorial .ed-amen__item { flex: 1 1 100%; padding: 0; border-left: 0; }
    .ly--editorial .ed-amen__head { align-items: flex-start; }
}
/* =========================================================
   EDITORIAL "WHY THIS PROJECT" (split design)
   Full-width section, no outer padding: left ~40% = the property's photo covering the whole panel (cover, centred) under a dark
   warm overlay, with eyebrow, white serif heading, gold rule and the "N reasons" line on top; right ~60% = the numbered list
   (serif bronze number | 1px separator | serif text | circular arrow) on ivory #FAF8F3 (or the admin's Alternate background).
   ========================================================= */
.ly--editorial .ed-why {
    --why-bronze: var(--icon, var(--auto-icon-color));
    --why-gold: var(--photo-accent, #C9A15E);
    --why-ink: var(--ink);
    --why-body: var(--body);
    --why-line: var(--line);
    --why-tint: color-mix(in srgb, var(--why-bronze) 9%, transparent);
    --why-serif: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
    display: grid;
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    align-items: stretch;
    padding: 0;
    background: var(--bg);
}
.ly--editorial .ed-why--ivory { --bg: #FAF8F3; --why-ink: var(--iv-ink, #171717); --why-body: #55514B; --why-line: var(--iv-line, #D8D2C8); --why-tint: var(--iv-tint, #F1EBE1); background: #FAF8F3; }

.ly--editorial .ed-why__panel { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 100%; padding: clamp(56px, 7vw, 120px) clamp(28px, 4vw, 60px); background-color: var(--brand); background-size: cover; background-position: center; background-repeat: no-repeat; }
.ly--editorial .ed-why__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 16, 10, 0.55) 0%, rgba(20, 16, 10, 0.68) 60%, rgba(20, 16, 10, 0.78) 100%); }
.ly--editorial .ed-why__panel--plain::before { background: linear-gradient(160deg, rgba(var(--brand-rgb), 0.9), rgba(var(--brand-rgb), 1)); }
.ly--editorial .ed-why__intro { position: relative; width: 100%; max-width: 30rem; margin-top: -4%; }
.ly--editorial .ed-why__eyebrow { margin: 0 0 18px; font: 500 clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem)/1.3 var(--f); letter-spacing: 0.28em; text-transform: uppercase; color: var(--why-gold); }
.ly--editorial .ed-why__title { margin: 0; font: 400 clamp(2rem, 1rem + 3.4vw, 4.25rem)/1.02 var(--why-serif); letter-spacing: -0.015em; color: #FFFFFF; text-wrap: balance; }
.ly--editorial .ed-why__rule { display: block; width: 72px; height: 2px; margin: 24px 0 22px; background: var(--why-gold); }
.ly--editorial .ed-why__lead { margin: 0; max-width: 26ch; font: 400 clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem)/1.5 var(--why-serif); color: rgba(255, 250, 240, 0.88); }

.ly--editorial .ed-why__content { display: flex; align-items: center; padding: clamp(48px, 6vw, 104px) var(--gutter) clamp(48px, 6vw, 104px) clamp(28px, 4vw, 72px); }
.ly--editorial .ed-why__list { width: 100%; max-width: 1040px; margin: 0; padding: 0; list-style: none; }
.ly--editorial .ed-why__row { border-bottom: 1px solid var(--why-line); transition: background-color 0.3s; }
.ly--editorial .ed-why__row:last-child { border-bottom: 0; }
.ly--editorial .ed-why__row.is-first,
.ly--editorial .ed-why__row:hover { background: var(--why-tint); border-radius: 8px; }
.ly--editorial .ed-why__line { display: grid; grid-template-columns: minmax(0, 1fr) 46px; align-items: center; column-gap: clamp(16px, 2.4vw, 44px); min-height: 84px; padding: 12px clamp(14px, 2vw, 30px); }
.ly--editorial .ed-why__num { font: 400 clamp(1.25rem, 1rem + 0.6vw, 1.75rem)/1 var(--why-serif); font-variant-numeric: lining-nums tabular-nums; color: var(--why-bronze); }
.ly--editorial .ed-why__sep { width: 1px; height: 36px; background: var(--why-line); }
.ly--editorial .ed-why__head { margin: 0; font: 400 clamp(1rem, 0.75rem + 0.85vw, 1.5rem)/1.3 var(--why-serif); color: var(--why-ink); overflow-wrap: anywhere; }
.ly--editorial .ed-why__go { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--why-bronze); border-radius: 50%; background: transparent; font-size: 17px; color: var(--why-bronze); text-decoration: none; cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.ly--editorial .ed-why__go i { transition: transform 0.3s var(--ease); }
.ly--editorial .ed-why__row:hover .ed-why__go i,
.ly--editorial .ed-why__go:focus-visible i { transform: translateX(3px); }
.ly--editorial .ed-why__go:hover { background: var(--why-bronze); color: #FFFFFF; }
.ly--editorial .ed-why__go[aria-expanded="true"] i { transform: rotate(90deg); }
.ly--editorial .ed-why__text { margin: -4px 0 0; padding: 0 clamp(14px, 2vw, 30px) 18px calc(clamp(14px, 2vw, 30px) + clamp(48px, 4.5vw, 72px) + 1px + 2 * clamp(16px, 2.4vw, 44px)); font-size: var(--t-body); line-height: var(--lh-body); color: var(--why-body); }

@media (max-width: 991.98px) {
    .ly--editorial .ed-why { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
    .ly--editorial .ed-why__panel { padding: 56px 28px; }
    .ly--editorial .ed-why__title { font-size: clamp(2.5rem, 1.5rem + 2vw, 3rem); }
    .ly--editorial .ed-why__content { padding: 40px var(--gutter) 40px 24px; }
    .ly--editorial .ed-why__line { min-height: 70px; column-gap: 14px; padding: 10px 12px; }
}
@media (max-width: 767.98px) {
    .ly--editorial .ed-why { grid-template-columns: minmax(0, 1fr); }
    .ly--editorial .ed-why__panel { min-height: 340px; padding: 56px var(--gutter); background-position: center 35%; }
    .ly--editorial .ed-why__intro { margin-top: 0; }
    .ly--editorial .ed-why__title { font-size: clamp(2rem, 1.4rem + 2.6vw, 2.5rem); }
    .ly--editorial .ed-why__content { padding: 28px var(--gutter) 40px; }
    .ly--editorial .ed-why__line { grid-template-columns: minmax(0, 1fr) 40px; column-gap: 12px; min-height: 64px; padding: 12px 8px; }
    .ly--editorial .ed-why__sep { height: 28px; }
    .ly--editorial .ed-why__go { width: 40px; height: 40px; font-size: 15px; }
    .ly--editorial .ed-why__text { padding: 0 8px 16px 67px; }
}
/* =========================================================
   EDITORIAL CONFIGURATIONS + SPECIFICATIONS (user's reference)
   Ivory #FAF8F3, ink #111820, grey #777, bronze #9A610F, dividers #DED8D0, icon discs #F2EDE4 (a custom Alternate background from
   the admin takes over and the text colours then follow it). Serif for heading / names / values / spec text, sans for labels.
   ========================================================= */
.ly--editorial .ed-cfg {
    --cfg-ink: var(--ink); --cfg-mute: var(--mute); --cfg-bronze: var(--icon, var(--auto-icon-color)); --cfg-line: var(--line); --cfg-disc: color-mix(in srgb, var(--cfg-bronze) 10%, transparent);
    --cfg-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;
}
.ly--editorial .ed-cfg--navy { --bg: #112D59; --cfg-ink: var(--iv-ink, #F8FAFF); --cfg-mute: #C7D7ED; --cfg-line: var(--iv-line, rgba(190, 212, 240, 0.16)); --cfg-disc: var(--iv-tint, #FFFFFF); background: #112D59; }
.ly--editorial .ed-cfg__eyebrow { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; font: 500 0.8125rem/1.2 var(--f); letter-spacing: 0.32em; text-transform: uppercase; color: var(--cfg-bronze); }
.ly--editorial .ed-cfg__eyebrow span { display: block; width: 58px; height: 1px; background: var(--cfg-bronze); }
.ly--editorial .ed-cfg__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 48px; padding-bottom: clamp(28px, 3vw, 44px); border-bottom: 1px solid var(--cfg-line); }
.ly--editorial .ed-cfg__title { margin: 0; font: 400 clamp(2rem, 1rem + 3vw, 3.75rem)/1.08 var(--cfg-serif); letter-spacing: -0.015em; color: var(--cfg-ink); }
.ly--editorial .ed-cfg__lead { margin: 14px 0 0; font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.25rem); line-height: 1.5; color: var(--cfg-mute); }
.ly--editorial .ed-cfg__count { display: flex; align-items: center; gap: 20px; margin: 0; font: 400 clamp(1.125rem, 1rem + 0.4vw, 1.5rem)/1 var(--cfg-serif); color: var(--cfg-ink); white-space: nowrap; }
.ly--editorial .ed-cfg__count span { display: block; width: 68px; height: 1px; background: var(--cfg-bronze); }
.ly--editorial .ed-cfg__list { margin: 0; padding: 0; list-style: none; }
.ly--editorial .ed-cfg__row { display: grid; grid-template-columns: minmax(150px, 24%) minmax(0, 1fr) auto; align-items: center; min-height: clamp(96px, 8vw, 122px); padding: 12px clamp(12px, 1.6vw, 24px); border-bottom: 1px solid var(--cfg-line); }
.ly--editorial .ed-cfg__name { margin: 0; font: 400 clamp(1.5rem, 1.1rem + 1.1vw, 2.25rem)/1.1 var(--cfg-serif); color: var(--cfg-ink); }
.ly--editorial .ed-cfg__area { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); min-height: 58px; padding-left: clamp(28px, 4.5vw, 84px); border-left: 1px solid color-mix(in srgb, var(--cfg-bronze) 55%, transparent); }
.ly--editorial .ed-cfg__icon { font-size: 2.1rem; line-height: 1; color: var(--cfg-bronze); }
.ly--editorial .ed-cfg__label { margin: 0 0 6px; font: 600 0.75rem/1.2 var(--f); letter-spacing: 0.22em; text-transform: uppercase; color: var(--cfg-bronze); }
.ly--editorial .ed-cfg__value { margin: 0; font: 400 clamp(1.5rem, 1.15rem + 1vw, 2.25rem)/1.1 var(--cfg-serif); font-variant-numeric: lining-nums; color: var(--cfg-ink); }
.ly--editorial .ed-cfg__value small { margin-left: 4px; font-size: 0.55em; color: var(--cfg-mute); }
.ly--editorial .ed-cfg__go { display: inline-flex; align-items: center; gap: clamp(24px, 3vw, 40px); padding-bottom: 8px; border-bottom: 1px solid var(--cfg-bronze); font: 400 clamp(1.0625rem, 0.95rem + 0.35vw, 1.375rem)/1.2 var(--cfg-serif); color: var(--cfg-ink); text-decoration: none; white-space: nowrap; }
.ly--editorial .ed-cfg__go i { font-size: 1.1em; color: var(--cfg-bronze); transition: transform 0.3s var(--ease); }
.ly--editorial .ed-cfg__go:hover i { transform: translateX(4px); }
.ly--editorial .ed-cfg__name, .ly--editorial .ed-cfg__count, .ly--editorial .ed-spec__item dd, .ly--editorial .ed-cfg__title, .ly--editorial .ed-why__head, .ly--editorial .ed-why__lead { font-variant-numeric: lining-nums; }
.ly--editorial .ed-spec { padding-top: clamp(36px, 4vw, 56px); }
.ly--editorial .ed-spec .ed-cfg__eyebrow { margin-bottom: clamp(22px, 2.6vw, 34px); }
.ly--editorial .ed-spec__list { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); row-gap: 28px; margin: 0; }
.ly--editorial .ed-spec__item { display: flex; align-items: center; gap: 18px; min-width: 0; padding: 4px clamp(14px, 1.8vw, 30px); border-left: 1px solid var(--cfg-line); }
.ly--editorial .ed-spec__item:nth-child(5n + 1) { padding-left: 0; border-left: 0; }
.ly--editorial .ed-spec__icon { flex: none; display: grid; place-items: center; width: clamp(60px, 5.4vw, 78px); height: clamp(60px, 5.4vw, 78px); border-radius: 50%; background: var(--icon-bg, var(--cfg-disc)); box-shadow: inset 0 0 0 1px var(--icon-border, transparent); }
.ly--editorial .ed-spec__icon i { font-size: clamp(1.6rem, 1.2rem + 0.9vw, 2.25rem); line-height: 1; color: var(--disc-icon, var(--cfg-bronze)); }
.ly--editorial .ed-spec__item dt { margin: 0 0 6px; font: 600 0.75rem/1.2 var(--f); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cfg-bronze); }
.ly--editorial .ed-spec__item dd { margin: 0; font: 400 clamp(1rem, 0.85rem + 0.4vw, 1.25rem)/1.4 var(--cfg-serif); color: var(--cfg-ink); overflow-wrap: anywhere; }
@media (max-width: 1199.98px) {
    .ly--editorial .ed-spec__list { grid-template-columns: repeat(min(var(--n, 5), 3), minmax(0, 1fr)); }
    .ly--editorial .ed-spec__item:nth-child(5n + 1) { padding-left: clamp(14px, 1.8vw, 30px); border-left: 1px solid var(--cfg-line); }
    .ly--editorial .ed-spec__item:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
}
@media (max-width: 767.98px) {
    .ly--editorial .ed-cfg__head { grid-template-columns: minmax(0, 1fr); }
    .ly--editorial .ed-cfg__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name go" "area area"; row-gap: 14px; padding: 18px 4px; }
    .ly--editorial .ed-cfg__name { grid-area: name; }
    .ly--editorial .ed-cfg__go { grid-area: go; gap: 12px; font-size: 1rem; }
    .ly--editorial .ed-cfg__area { grid-area: area; gap: 16px; padding-left: 0; border-left: 0; }
    .ly--editorial .ed-spec__list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .ly--editorial .ed-spec__item, .ly--editorial .ed-spec__item:nth-child(n) { padding: 16px 0; border-left: 0; border-top: 1px solid var(--cfg-line); }
    .ly--editorial .ed-spec__item:first-child { border-top: 0; }
}
/* =========================================================
   EDITORIAL LOCATION (user's reference): flat ivory, three equal columns split by bronze-beige lines, two groups per column;
   group = bronze line icon + uppercase label above a bronze rule, rows = serif place left / serif bold time right over hairlines.
   ========================================================= */
.ly--editorial .ed-loc { --loc-bronze: var(--icon, var(--auto-icon-color)); --loc-label: var(--auto-number-color, var(--loc-bronze)); --loc-ink: var(--ink); --loc-mute: var(--mute); --loc-rule: color-mix(in srgb, var(--loc-bronze) 45%, transparent); --loc-line: var(--line); --loc-col: color-mix(in srgb, var(--loc-bronze) 55%, transparent); --loc-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif; }
.ly--editorial .ed-loc--ivory { --bg: #FAF8F3; --loc-label: var(--iv-accent, #8F5A0A); --loc-ink: var(--iv-ink, #17202A); --loc-mute: #6A665F; --loc-rule: var(--iv-soft, #D9C4A3); --loc-line: var(--iv-line, #DCCDB8); --loc-col: var(--iv-soft, #D6B98C); background: #FAF8F3; }
.ly--editorial .ed-loc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ly--editorial .ed-loc__group { grid-column: var(--c); grid-row: var(--r); min-width: 0; padding: clamp(14px, 1.6vw, 22px) clamp(24px, 2.4vw, 34px) clamp(26px, 3vw, 44px); }
.ly--editorial .ed-loc__group.has-line { border-left: 1px solid var(--loc-col); }
.ly--editorial .ed-loc__cat { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: end; column-gap: clamp(18px, 2vw, 34px); margin: 0 0 6px; }
.ly--editorial .ed-loc__cat i { font-size: clamp(1.9rem, 1.5rem + 0.6vw, 2.4rem); line-height: 1; color: var(--loc-bronze); }
.ly--editorial .ed-loc__cat span { padding-bottom: 14px; border-bottom: 1px solid var(--loc-rule); font: 600 clamp(0.875rem, 0.82rem + 0.15vw, 1rem)/1.2 var(--f); letter-spacing: 0.22em; text-transform: uppercase; color: var(--loc-label); }
.ly--editorial .ed-loc__rows { margin: 0; padding: 0; list-style: none; }
.ly--editorial .ed-loc__rows li { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: clamp(54px, 4.4vw, 64px); padding: 8px 0; border-bottom: 1px solid var(--loc-line); font: 400 clamp(1.125rem, 0.85rem + 0.75vw, 1.6875rem)/1.3 var(--loc-serif); color: var(--loc-ink); }
.ly--editorial .ed-loc__rows li span { min-width: 0; overflow-wrap: anywhere; }
.ly--editorial .ed-loc__rows li b { flex: none; font: 600 clamp(1.0625rem, 0.85rem + 0.6vw, 1.5625rem)/1.2 var(--loc-serif); font-variant-numeric: lining-nums; color: var(--loc-ink); white-space: nowrap; }
.ly--editorial .ed-loc__note { display: flex; align-items: center; gap: 14px; margin: clamp(8px, 1vw, 16px) 0 0; padding: clamp(18px, 2vw, 28px) clamp(24px, 2.4vw, 34px) 4px; border-top: 1px solid var(--loc-line); font: 400 clamp(0.9375rem, 0.88rem + 0.2vw, 1.125rem)/1.4 var(--loc-serif); color: var(--loc-mute); }
.ly--editorial .ed-loc__note i { font-size: 1.35em; color: var(--loc-bronze); }
.ly--editorial .ed-loc__map { position: relative; height: clamp(300px, 32vw, 460px); margin-top: clamp(28px, 3vw, 44px); }
@media (max-width: 991.98px) {
    .ly--editorial .ed-loc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ly--editorial .ed-loc__group { grid-column: auto; grid-row: auto; border-left: 0; }
    .ly--editorial .ed-loc__group:nth-child(even) { border-left: 1px solid var(--loc-col); }
}
@media (max-width: 575.98px) {
    .ly--editorial .ed-loc__grid { grid-template-columns: minmax(0, 1fr); }
    .ly--editorial .ed-loc__group, .ly--editorial .ed-loc__group:nth-child(even) { padding: 18px 0 22px; border-left: 0; border-top: 1px solid var(--loc-line); }
    .ly--editorial .ed-loc__group:first-child { border-top: 0; }
    .ly--editorial .ed-loc__note { padding-inline: 0; }
}
/* =========================================================
   EDITORIAL: CONSTRUCTION UPDATES + RERA SIDE BY SIDE
   One row, 60 / 40, both columns stretch to the same height with their own backgrounds; a thin divider between them.
   Only one of the two present = full width. Stacks below 992px (construction first).
   ========================================================= */
.ly--editorial .ed-duo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: stretch; }
.ly--editorial .ed-duo > .ly-sec { min-width: 0; }
.ly--editorial .ed-duo > .ly-sec:only-child { grid-column: 1 / -1; }
.ly--editorial .ed-duo > .ly-sec + .ly-sec { border-left: 1px solid var(--line); }
.ly--editorial .ed-duo > .ly-sec > .ly-wrap { max-width: none; padding-inline: clamp(24px, 3vw, 56px); }
.ly--editorial .ed-duo > .ly-sec:first-child:not(:only-child) > .ly-wrap { padding-left: max(var(--gutter), calc((100vw - 1680px) / 2 + var(--gutter))); }
.ly--editorial .ed-duo > .ly-sec:last-child:not(:only-child) > .ly-wrap { padding-right: max(var(--gutter), calc((100vw - 1680px) / 2 + var(--gutter))); }
/* the centre-line timeline becomes a left rail inside the narrower column */
.ly--editorial .ed-duo .sx-prog--centre .sx-timeline::before { left: 7px; }
.ly--editorial .ed-duo .sx-prog--centre .sx-timeline__item,
.ly--editorial .ed-duo .sx-prog--centre .sx-timeline__item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 clamp(28px, 3vw, 44px) 40px; text-align: left; }
.ly--editorial .ed-duo .sx-prog--centre .sx-timeline__item::after,
.ly--editorial .ed-duo .sx-prog--centre .sx-timeline__item:nth-child(even)::after { left: 1px; right: auto; }
.ly--editorial .ed-duo .sx-prog--centre .sx-timeline__item p { margin-left: 0; }
.ly--editorial .ed-duo .sx-prog--centre .sx-timeline__photos { justify-content: flex-start; }
.ly--editorial .ed-duo .sx-rera__list { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 991.98px) {
    .ly--editorial .ed-duo { grid-template-columns: minmax(0, 1fr); }
    .ly--editorial .ed-duo > .ly-sec + .ly-sec { border-left: 0; }
    .ly--editorial .ed-duo > .ly-sec > .ly-wrap { padding-inline: var(--gutter) !important; }
}
/* =========================================================
   POPUP + LIGHTBOX COLOURS
   They are rendered outside .property-detail (where the page's colour variables live), so they get their own fixed values:
   the enquiry popup is always a white card with dark text and a dark button, whatever the page backgrounds are.
   ========================================================= */
.pt-modal {
    --pt-card: #FFFFFF;
    --pt-card-ink: #1A1A1A;
    --pt-card-mute: #5A5A5A;
    --pt-ink: #1A1A1A;
    --pt-body: #5A5A5A;
    --pt-soft: #F4F2EE;
    --pt-line: rgba(0, 0, 0, 0.14);
    --pt-accent: #B79A63;
    --pt-accent-rgb: 183, 154, 99;
    --pt-btn: #1A1A1A;
    --pt-btn-text: #FFFFFF;
}
.pt-modal .pt-modal__box { background: #FFFFFF; color: #1A1A1A; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.55); }
.pt-modal .pt-modal__submit,
.pt-modal .pt-btn--solid { border-color: #1A1A1A; background: #1A1A1A; color: #FFFFFF; }
.pt-modal .pt-modal__submit:hover,
.pt-modal .pt-btn--solid:hover { background: #000000; color: #FFFFFF; }
/* =========================================================
   HEADER LOCK
   The header on every property page (all three layouts, the microsite header, the admin's preview tab and the published page)
   is permanently white. It is not a setting: no theme, layout, property or preview value reaches it, and these rules use
   !important so nothing loaded after this file can change it either. Only the background is locked: logo, links, spacing,
   alignment, hover and the layout of the header stay as they were. (nav.blade.php adds .hx-header--light on property pages only.)
   ========================================================= */
.hx-header.hx-header--light,
.hx-header.hx-header--light.is-scrolled,
.hx-header.hx-header--light.is-hidden {
    --hx-bg: #FFFFFF !important;
    --hx-ink: #1A1A1A !important;
    --hx-ink-soft: rgba(26, 26, 26, 0.72) !important;
    --hx-ink-mute: rgba(26, 26, 26, 0.5) !important;
    --hx-line: rgba(0, 0, 0, 0.1) !important;
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.hx-header.hx-header--light .hx-brand img:not(.is-custom-logo) {
    filter: none !important;
}
/* =========================================================
   EDITORIAL FAQ (user's reference): intro column 35% | divider | accordion 65%. Ivory palette by default; with a custom section
   background the page's own ink / muted / line colours and the readable icon gold take over (auto contrast).
   ========================================================= */
.ly--editorial .ed-faq { --faq-ink: var(--ink); --faq-mute: var(--mute); --faq-line: var(--line); --faq-gold: var(--icon, var(--auto-icon-color)); --faq-label: var(--auto-number-color, var(--faq-gold)); --faq-tint: color-mix(in srgb, var(--faq-ink) 4%, transparent); --faq-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif; position: relative; overflow: hidden; isolation: isolate; }
.ly--editorial .ed-faq--ivory { --bg: #FAF8F3; --faq-ink: var(--iv-ink, #111827); --faq-mute: #667080; --faq-line: var(--iv-line, #E3D8C8); --faq-label: var(--iv-accent, #9A610F); --faq-tint: rgba(232, 218, 196, 0.32); background: #FAF8F3; }
.ly--editorial .ed-faq--ivory { --faq-gold: var(--icon, var(--iv-accent, #9A610F)); }
.ly--editorial .ed-faq__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 37fr) minmax(0, 63fr); align-items: start; }
.ly--editorial .ed-faq__intro { padding: 8px clamp(16px, 2vw, 32px) 40px 0; }
.ly--editorial .ed-faq__eyebrow { display: flex; align-items: center; gap: 22px; margin: 0 0 clamp(18px, 2vw, 28px); font: 600 clamp(0.875rem, 0.82rem + 0.15vw, 1rem)/1.2 var(--f); letter-spacing: 0.22em; text-transform: uppercase; color: var(--faq-label); }
.ly--editorial .ed-faq__eyebrow::after { content: ""; width: 66px; height: 1px; background: currentColor; }
.ly--editorial .ed-faq__title { margin: 0; font: 400 clamp(2.125rem, 1rem + 3.33vw, 4.625rem)/1.05 var(--faq-serif); letter-spacing: -0.015em; color: var(--faq-ink); }
.ly--editorial .ed-faq__lead { max-width: 440px; margin: clamp(18px, 2.2vw, 30px) 0 0; font: 400 clamp(1rem, 0.75rem + 0.75vw, 1.4375rem)/1.6 var(--f); color: var(--faq-mute); }
.ly--editorial .ed-faq__list { padding-left: clamp(28px, 4.6vw, 76px); border-left: 1px solid var(--faq-line); border-top: 0; }
.ly--editorial .ed-faq__item { border-top: 1px solid var(--faq-line); }
.ly--editorial .ed-faq__item:last-child { border-bottom: 1px solid var(--faq-line); }
.ly--editorial .ed-faq__q { margin: 0; }
.ly--editorial .ed-faq__q button { display: flex; align-items: center; justify-content: space-between; gap: 28px; width: 100%; min-height: 48px; padding: clamp(22px, 2vw, 32px) 0; border: 0; background: none; text-align: left; font: 400 clamp(1.25rem, 0.75rem + 1.6vw, 2.25rem)/1.3 var(--faq-serif); color: var(--faq-ink); cursor: pointer; }
.ly--editorial .ed-faq__q button span { min-width: 0; overflow-wrap: anywhere; }
.ly--editorial .ed-faq__q button:focus-visible { outline: 2px solid var(--faq-gold); outline-offset: 4px; }
.ly--editorial .ed-faq__sign { position: relative; flex: none; width: 28px; height: 28px; margin-right: 8px; }
.ly--editorial .ed-faq__sign::before,
.ly--editorial .ed-faq__sign::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; background: var(--faq-gold); transition: transform 0.4s var(--ease); }
.ly--editorial .ed-faq__sign::after { transform: rotate(90deg); }
.ly--editorial .ed-faq__item.is-open .ed-faq__sign::after { transform: rotate(0deg); }
.ly--editorial .ed-faq__a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.45s var(--ease); }
.ly--editorial .ed-faq__a > div { min-height: 0; overflow: hidden; }
.ly--editorial .ed-faq__a p { max-width: 70ch; margin: 0; padding: 0 64px clamp(26px, 2.6vw, 40px) 0; font: 400 clamp(0.9375rem, 0.85rem + 0.3vw, 1.1875rem)/1.6 var(--f); color: var(--faq-mute); }
.ly--editorial .ed-faq.is-js .ed-faq__item:not(.is-open) .ed-faq__a { grid-template-rows: 0fr; }
.ly--editorial .ed-faq.is-js .ed-faq__item:not(.is-open) .ed-faq__sign::after { transform: rotate(90deg); }
.ly--editorial .ed-faq:not(.is-js) .ed-faq__sign::after { transform: rotate(0deg); }
.ly--editorial .ed-faq.is-js .ed-faq__item:not(.is-open) .ed-faq__a > div { visibility: hidden; transition: visibility 0s 0.45s; }
/* decorative arcs, bottom left, behind the content */
.ly--editorial .ed-faq__art { position: absolute; z-index: 0; left: -270px; bottom: -250px; width: 540px; height: 540px; border: 1px solid color-mix(in srgb, var(--faq-gold) 70%, transparent); border-radius: 50%; background: var(--faq-tint); pointer-events: none; }
.ly--editorial .ed-faq__art::before { content: ""; position: absolute; left: -180px; bottom: -260px; width: 620px; height: 620px; border-radius: 50%; background: var(--faq-tint); }
.ly--editorial .ed-faq__art::after { content: ""; position: absolute; left: -10px; top: 160px; width: 560px; height: 560px; border: 1px solid color-mix(in srgb, var(--faq-gold) 30%, transparent); border-radius: 50%; }
.ly--editorial .ed-faq__art i { position: absolute; right: -10px; top: 42%; width: 20px; height: 20px; border-radius: 50%; background: var(--faq-gold); opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
    .ly--editorial .ed-faq__a, .ly--editorial .ed-faq__sign::after { transition: none; }
}
@media (max-width: 1100px) {
    .ly--editorial .ed-faq__grid { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); }
    .ly--editorial .ed-faq__art { left: -330px; bottom: -330px; }
    .ly--editorial .ed-faq__title { font-size: clamp(2.75rem, 1.5rem + 2vw, 3.375rem); }
}
@media (max-width: 767px) {
    .ly--editorial .ed-faq__grid { grid-template-columns: minmax(0, 1fr); }
    .ly--editorial .ed-faq__intro { padding: 0 0 28px; }
    .ly--editorial .ed-faq__list { padding-left: 0; border-left: 0; }
    .ly--editorial .ed-faq__a p { padding-right: 36px; }
    .ly--editorial .ed-faq__sign { width: 22px; height: 22px; margin-right: 2px; }
    .ly--editorial .ed-faq__art { display: none; }
}
/* Brand icon background / border (admin > Icon colours, round 64): Modern and Immersive amenity icons get a round chip, but only
   when one of the two colours is set (show.blade.php adds .ly--icon-chip). Editorial discs read the same variables directly. */
.ly.ly--icon-chip .sx-amen__list i { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--icon-bg, transparent); box-shadow: inset 0 0 0 1px var(--icon-border, transparent); font-size: 1rem; color: var(--disc-icon, var(--icon, var(--auto-icon-color))); }
/* =========================================================
   EDITORIAL BUYER ASSISTANCE + ENQUIRY (user's reference, round 65)
   Dark charcoal #1C1C1B with a faint warm glow bottom right; gold rule + serif heading; four outlined cards (icon disc | divider |
   title + text, muted-gold border #65563D); full-width call-back panel (gold border #B58B4A, bronze glow right, vertical gold bar,
   serif heading, ivory button with a bronze phone icon). The gold follows the brand accent when one is applied (--photo-accent).
   ========================================================= */
.ly--editorial .ed-assist { --as-gold: var(--photo-accent, #D5A85C); --as-gold-c: var(--as-gold); --as-line: #65563D; --as-edge: #B58B4A; --as-hover: #B58B4A; --as-ink: #F8F6F1; --as-body: #E2DFD8; --as-muted: rgba(226, 223, 216, 0.78); --as-c-ink: var(--as-ink); --as-c-body: var(--as-body); --as-bg: #1C1C1B; --as-card: #222221; --as-cta: #1F1E1C; --as-disc: rgba(213, 168, 92, 0.05); --as-dev-line: rgba(101, 86, 61, 0.55); --as-btn: #F8F5EE; --as-btn-ink: #171717; --as-btn-ic: #9A610F; --as-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;
    position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(48px, 6vw, 90px); background: radial-gradient(900px 520px at 88% 100%, rgba(181, 139, 74, 0.13), transparent 62%), linear-gradient(180deg, #1F1F1E 0%, #1B1B1A 100%); background-color: var(--as-bg); color: var(--as-body); }
.ly--editorial .ed-assist__wrap { max-width: 1500px; }
.ly--editorial .ed-assist__dev { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); margin: 0 0 clamp(28px, 3.4vw, 48px); padding-bottom: clamp(20px, 2.4vw, 32px); border-bottom: 1px solid var(--as-dev-line); }
.ly--editorial .ed-assist__dev img { flex: none; max-width: 150px; max-height: 56px; object-fit: contain; padding: 8px 12px; border-radius: 8px; background: #F8F6F1; }
.ly--editorial .ed-assist__dev h3 { margin: 0 0 4px; font: 600 var(--t-body)/1.3 var(--f); color: var(--as-ink); }
.ly--editorial .ed-assist__dev p { max-width: 78ch; margin: 0; font-size: var(--t-small); line-height: 1.6; color: var(--as-muted); }
.ly--editorial .ed-assist__rule { display: block; width: 68px; height: 3px; margin: 0 0 clamp(18px, 2.2vw, 30px); background: var(--as-gold); }
.ly--editorial .ed-assist__title { margin: 0 0 clamp(28px, 3.4vw, 48px); font: 400 clamp(2rem, 1rem + 3.7vw, 4.25rem)/1.15 var(--as-serif); letter-spacing: -0.01em; color: var(--as-ink); }
.ly--editorial .ed-assist__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.7vw, 26px); margin: 0 0 clamp(20px, 2.2vw, 36px); padding: 0; list-style: none; }
.ly--editorial .ed-assist__card { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); min-height: clamp(110px, 10.4vw, 155px); padding: clamp(16px, 1.6vw, 24px) clamp(18px, 2.4vw, 36px); border: 1px solid var(--as-line); border-radius: 12px; background: var(--as-card); transition: border-color 0.3s, transform 0.4s var(--ease); }
.ly--editorial .ed-assist__card:hover { border-color: var(--as-hover); transform: translateY(-2px); }
.ly--editorial .ed-assist__ic { flex: none; display: grid; place-items: center; width: clamp(60px, 5.7vw, 82px); height: clamp(60px, 5.7vw, 82px); border: 1.5px solid var(--as-line); border-radius: 50%; background: var(--as-disc); }
.ly--editorial .ed-assist__ic i { font-size: clamp(1.5rem, 1.15rem + 1vw, 2.25rem); line-height: 1; color: var(--as-gold-c); }
.ly--editorial .ed-assist__sep { flex: none; align-self: stretch; width: 1px; margin-block: clamp(2px, 0.6vw, 8px); background: var(--as-line); }
.ly--editorial .ed-assist__txt { min-width: 0; }
.ly--editorial .ed-assist__txt h3 { margin: 0 0 6px; font: 500 clamp(1.25rem, 1rem + 0.85vw, 1.6875rem)/1.25 var(--f); letter-spacing: -0.005em; color: var(--as-c-ink); }
.ly--editorial .ed-assist__txt p { margin: 0; font: 400 clamp(0.9375rem, 0.78rem + 0.6vw, 1.375rem)/1.45 var(--f); color: var(--as-c-body); }
.ly--editorial .ed-assist__cta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: clamp(170px, 14vw, 200px); border: 1px solid var(--as-edge); border-radius: 12px; background: radial-gradient(620px 340px at 100% 60%, var(--as-cta-glow, rgba(181, 139, 74, 0.26)), transparent 70%), var(--as-cta); }
.ly--editorial .ed-assist__ctatext { position: relative; min-width: 0; padding: clamp(22px, 2.3vw, 34px) clamp(24px, 3vw, 44px) clamp(22px, 2.3vw, 34px) clamp(30px, 3.6vw, 52px); }
.ly--editorial .ed-assist__ctatext::before { content: ""; position: absolute; left: clamp(20px, 2.2vw, 34px); top: 50%; width: 4px; height: min(64%, 124px); transform: translateY(-50%); border-radius: 2px; background: var(--as-gold-c); }
.ly--editorial .ed-assist__ctatext h2 { margin: 0 0 10px; font: 400 clamp(1.75rem, 1rem + 2.3vw, 3.25rem)/1.15 var(--as-serif); letter-spacing: -0.01em; color: var(--as-c-ink); }
.ly--editorial .ed-assist__ctatext p { max-width: 850px; margin: 0; font: 400 clamp(1rem, 0.78rem + 0.65vw, 1.375rem)/1.6 var(--f); color: var(--as-c-body); }
.ly--editorial .ed-assist__act { align-self: stretch; display: grid; align-content: center; justify-items: center; gap: 12px; padding: clamp(20px, 2.2vw, 32px) clamp(20px, 2.9vw, 42px); border-left: 1px solid var(--as-line); }
.ly--editorial .ed-assist__btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: clamp(54px, 5.2vw, 76px); padding: 0 clamp(24px, 2.8vw, 40px); border-radius: 8px; background: var(--as-btn); font: 600 clamp(0.9375rem, 0.82rem + 0.4vw, 1.25rem)/1.2 var(--f); color: var(--as-btn-ink); text-decoration: none; white-space: nowrap; transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.ly--editorial .ed-assist__btn i { font-size: 1.35em; line-height: 1; color: var(--as-btn-ic); }
.ly--editorial .ed-assist__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); }
.ly--editorial .ed-assist__btn:active { transform: scale(0.98); }
.ly--editorial .ed-assist a:focus-visible { outline: 2px solid var(--as-gold-c); outline-offset: 3px; }
.ly--editorial .ed-assist__tel { font: 500 var(--t-small)/1.3 var(--f); color: var(--as-c-body); text-decoration: none; }
.ly--editorial .ed-assist__tel:hover { color: var(--as-gold-c); }
@media (max-width: 991.98px) {
    .ly--editorial .ed-assist__act { padding-inline: clamp(18px, 2.4vw, 28px); }
}
@media (max-width: 767.98px) {
    .ly--editorial .ed-assist__title { font-size: clamp(2rem, 1.5rem + 2vw, 2.5rem); }
    .ly--editorial .ed-assist__grid { grid-template-columns: minmax(0, 1fr); }
    .ly--editorial .ed-assist__card { min-height: 0; padding: 16px 18px; }
    .ly--editorial .ed-assist__txt h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.4375rem); }
    .ly--editorial .ed-assist__txt p { font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); }
    .ly--editorial .ed-assist__cta { grid-template-columns: minmax(0, 1fr); }
    .ly--editorial .ed-assist__ctatext { padding: 24px 20px 8px 34px; }
    .ly--editorial .ed-assist__ctatext::before { left: 16px; top: 28px; height: 56px; transform: none; }
    .ly--editorial .ed-assist__act { padding: 12px 20px 22px; border-left: 0; }
    .ly--editorial .ed-assist__btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ly--editorial .ed-assist__card, .ly--editorial .ed-assist__btn { transition: none; }
}
/* =========================================================
   EDITORIAL COMPACT RHYTHM (round 66)
   One spacing scale for the whole Editorial page, written last so it replaces the older, looser values: section padding
   (--sec-y), gap under a section heading (--head-gap), card padding (--pad), grid gaps (--gap). Typography, colours, icon sizes and
   the automatic contrast are untouched; only margins, paddings, gaps and a few over-tall frames change. Other layouts: not affected.
   The enquiry popup and the footer are shared with the whole site, so they are compacted only on pages that use this layout.
   ========================================================= */
.ly--editorial { --sec-y: clamp(36px, 4.2vw, 60px); --head-gap: clamp(18px, 2vw, 28px); --pad: clamp(16px, 1.7vw, 24px); --gap: clamp(12px, 1.4vw, 22px); }
.ly--editorial .ly-sec:not(.ed-why),
.ly--editorial .pt-related,
.ly--editorial .ed-assist { padding-block: var(--sec-y); }
.ly--editorial .sx-head { gap: 4px 20px; margin-bottom: var(--head-gap); padding-bottom: 12px; }
.ly--editorial .sx-sub { margin-bottom: 10px; }
.ly--editorial .sx-note { margin-top: 12px; }
.ly--editorial .pt-prose p, .ly--editorial .ed-prose p { margin-bottom: 0.7em; }
.ly--editorial .pt-related .pt-h2 { margin-bottom: 14px; }

/* hero: same height and design, tighter stack of title / location / buttons, snapshot strip closer to the hero */
.ly--editorial .ed-hero__inner { gap: 12px; padding-top: clamp(64px, 7vw, 96px); padding-bottom: clamp(104px, 10vw, 150px); }
.ly--editorial .ed-hero__row { gap: 14px clamp(24px, 4vw, 64px); margin-top: 8px; }
.ly--editorial .ed-snap { padding-bottom: clamp(28px, 3.2vw, 48px); }
.ly--editorial .ed-snap__cell { padding: clamp(14px, 1.6vw, 24px) clamp(14px, 1.7vw, 26px); }
.ly--editorial .ed-snap__cell dt { margin-bottom: 4px; }

/* overview */
.ly--editorial .ed-ov__media { height: clamp(340px, 36vw, 540px); }
.ly--editorial .ed-ov__text { padding: clamp(20px, 2.4vw, 40px); }
.ly--editorial .ed-ov__text .sx-title { margin-bottom: 12px; }
.ly--editorial .ed-ov__facts { gap: 10px 20px; margin-top: 16px; padding-top: 14px; }

/* why this project */
.ly--editorial .ed-why__panel { padding: clamp(36px, 4.6vw, 76px) clamp(24px, 3.4vw, 52px); }
.ly--editorial .ed-why__eyebrow { margin-bottom: 12px; }
.ly--editorial .ed-why__rule { margin: 16px 0 14px; }
.ly--editorial .ed-why__content { padding: clamp(28px, 3.6vw, 56px) var(--gutter) clamp(28px, 3.6vw, 56px) clamp(24px, 3.4vw, 56px); }
.ly--editorial .ed-why__line { min-height: 68px; padding-block: 8px; }
.ly--editorial .ed-why__text { padding-bottom: 12px; }

/* gallery */
.ly--editorial .sx-mosaic--masonry { grid-auto-rows: clamp(96px, 10.2vw, 168px); gap: clamp(8px, 0.9vw, 14px); }
.ly--editorial .sx-tabs, .ly--editorial .sx-chips { margin-bottom: clamp(14px, 1.6vw, 22px); }
.ly--editorial .sx-video-link { margin-top: 16px; }

/* configurations + specifications */
.ly--editorial .ed-cfg__eyebrow { margin-bottom: 12px; }
.ly--editorial .ed-cfg__head { gap: 14px 32px; padding-bottom: clamp(16px, 1.8vw, 26px); }
.ly--editorial .ed-cfg__lead { margin-top: 8px; }
.ly--editorial .ed-cfg__row { min-height: clamp(72px, 6vw, 92px); padding-block: 8px; }
.ly--editorial .ed-cfg__area { min-height: 46px; }
.ly--editorial .ed-cfg__label, .ly--editorial .ed-spec__item dt { margin-bottom: 4px; }
.ly--editorial .ed-spec { padding-top: clamp(24px, 2.8vw, 40px); }
.ly--editorial .ed-spec .ed-cfg__eyebrow { margin-bottom: clamp(14px, 1.6vw, 22px); }
.ly--editorial .ed-spec__list { row-gap: 16px; }

/* amenities */
.ly--editorial .ed-amen__head { margin-bottom: var(--head-gap); }
.ly--editorial .ed-eyebrow { margin-bottom: 8px; }
.ly--editorial .ed-amen { gap: clamp(12px, 1.2vw, 18px); }
.ly--editorial .ed-amen__card { min-height: clamp(140px, 11vw, 168px); padding: clamp(14px, 1.5vw, 22px) clamp(18px, 1.8vw, 26px); }
.ly--editorial .ed-amen__cat { margin-bottom: clamp(10px, 1.2vw, 16px); }
.ly--editorial .ed-amen__list { gap: 12px 0; }

/* plans */
.ly--editorial .sx-plan .pt-plan__cap { padding: 10px 14px; }

/* location */
.ly--editorial .sx-loc__body { gap: clamp(18px, 2.4vw, 32px); }
.ly--editorial .ed-loc__group { padding: 10px clamp(20px, 2vw, 28px) clamp(14px, 1.8vw, 24px); }
.ly--editorial .ed-loc__cat { margin-bottom: 2px; }
.ly--editorial .ed-loc__cat span { padding-bottom: 10px; }
.ly--editorial .ed-loc__rows li { min-height: clamp(44px, 3.6vw, 52px); padding-block: 5px; }
.ly--editorial .ed-loc__note { margin-top: 6px; padding-top: 14px; padding-bottom: 0; }
.ly--editorial .ed-loc__map { height: clamp(260px, 26vw, 380px); margin-top: clamp(18px, 2vw, 28px); }

/* construction updates + RERA */
.ly--editorial .sx-prog--centre .sx-timeline__item { padding-bottom: clamp(20px, 2.4vw, 34px); }
.ly--editorial .sx-prog--centre .sx-timeline__item:nth-child(even) { padding-bottom: clamp(20px, 2.4vw, 34px); }
.ly--editorial .ed-duo .sx-prog--centre .sx-timeline__item,
.ly--editorial .ed-duo .sx-prog--centre .sx-timeline__item:nth-child(even) { padding-bottom: clamp(16px, 1.8vw, 24px); }
.ly--editorial .sx-timeline__title { margin: 2px 0 4px; }
.ly--editorial .sx-timeline__photos { margin-top: 10px; }
.ly--editorial .sx-rera__body { gap: clamp(18px, 2vw, 28px); }
.ly--editorial .sx-rera__list { gap: 12px; }
.ly--editorial .sx-rera__item { gap: 16px; padding: 14px 18px; }
.ly--editorial .sx-docs ul { gap: 8px; }

/* FAQ */
.ly--editorial .ed-faq__intro { padding-bottom: 16px; }
.ly--editorial .ed-faq__eyebrow { margin-bottom: 12px; }
.ly--editorial .ed-faq__lead { margin-top: 12px; }
.ly--editorial .ed-faq__q button { padding-block: clamp(14px, 1.4vw, 20px); }
.ly--editorial .ed-faq__a p { padding-bottom: clamp(16px, 1.6vw, 24px); }

/* buyer assistance + enquiry */
.ly--editorial .ed-assist__dev { gap: 16px; margin-bottom: 20px; padding-bottom: 14px; }
.ly--editorial .ed-assist__rule { margin-bottom: 14px; }
.ly--editorial .ed-assist__title { margin-bottom: clamp(18px, 2.2vw, 30px); }
.ly--editorial .ed-assist__grid { gap: clamp(12px, 1.4vw, 20px); margin-bottom: clamp(14px, 1.6vw, 22px); }
.ly--editorial .ed-assist__card { min-height: clamp(96px, 8.6vw, 126px); padding: clamp(12px, 1.2vw, 18px) clamp(16px, 2vw, 28px); }
.ly--editorial .ed-assist__txt h3 { margin-bottom: 4px; }
.ly--editorial .ed-assist__cta { min-height: clamp(140px, 11.5vw, 168px); }
.ly--editorial .ed-assist__ctatext { padding-block: clamp(18px, 1.8vw, 26px); }
.ly--editorial .ed-assist__ctatext h2 { margin-bottom: 6px; }
.ly--editorial .ed-assist__act { padding-block: 16px; }

@media (max-width: 991.98px) {
    .ly--editorial .ed-why__panel { padding: 40px 24px; }
    .ly--editorial .ed-why__content { padding: 28px var(--gutter) 28px 24px; }
    .ly--editorial .ed-why__line { min-height: 58px; padding-block: 8px; }
}
@media (max-width: 767.98px) {
    .ly--editorial { --sec-y: clamp(32px, 8vw, 40px); --head-gap: 18px; }
    .ly--editorial .ed-ov__media { height: clamp(260px, 62vw, 380px); }
    .ly--editorial .ed-why__panel { min-height: 260px; padding: 40px var(--gutter); }
    .ly--editorial .ed-why__content { padding: 20px var(--gutter) 28px; }
    .ly--editorial .ed-why__line { min-height: 54px; padding: 8px; }
    .ly--editorial .ed-cfg__row { row-gap: 10px; padding: 12px 4px; }
    .ly--editorial .ed-spec__item, .ly--editorial .ed-spec__item:nth-child(n) { padding: 12px 0; }
    .ly--editorial .ed-amen__card, .ly--editorial .ed-amen__card.is-wide { padding: 16px; }
    .ly--editorial .ed-loc__group, .ly--editorial .ed-loc__group:nth-child(even) { padding: 12px 0 14px; }
    .ly--editorial .ed-faq__intro { padding-bottom: 12px; }
    .ly--editorial .ed-assist__card { min-height: 0; padding: 12px 16px; }
    .ly--editorial .ed-assist__ctatext { padding: 18px 18px 6px 32px; }
    .ly--editorial .ed-assist__act { padding: 10px 18px 18px; }
}

/* shared pieces, compacted only on pages that use this layout */
body:has(.ly--editorial) .pt-modal .pt-modal__box { padding: 26px 28px 22px; }
body:has(.ly--editorial) .pt-modal .pt-modal__text { margin-bottom: 14px; }
body:has(.ly--editorial) .pt-modal .pt-modal__field { margin-bottom: 10px; }
body:has(.ly--editorial) .pt-modal .pt-modal__field span { margin-bottom: 4px; }
body:has(.ly--editorial) .pt-modal .pt-modal__field input { padding-block: 10px; }
body:has(.ly--editorial) .pt-modal .pt-modal__fine { margin-top: 10px; }
body:has(.ly--editorial) .site-footer { padding-top: 32px !important; padding-bottom: 16px !important; }
body:has(.ly--editorial) .site-footer .row { --bs-gutter-y: 1rem; }
body:has(.ly--editorial) .site-footer h5.mb-3, body:has(.ly--editorial) .site-footer h6.mb-3 { margin-bottom: 10px !important; }
body:has(.ly--editorial) .site-footer li.mb-2 { margin-bottom: 4px !important; }
body:has(.ly--editorial) .site-footer hr { margin-block: 16px !important; }
/* =========================================================
   EDITORIAL ONE TYPE SCALE (round 67)
   The serif section headings, item titles and body texts of the reference-style sections (Why, Configurations, Amenities, FAQ,
   Buyer assistance) were sized one by one and drifted apart (heading 36-74px, card text 20-36px). They now share three sizes:
     --ed-h   section heading   28 > 44px      --ed-item  item title (row names, questions, places)  18 > 26px      --ed-text  body / description  15 > 17px
   Written last; only font sizes, line heights and the sizes of icon discs change. Colours and fonts are untouched.
   ========================================================= */
.ly--editorial { --ed-h: clamp(1.75rem, 1.1rem + 2vw, 2.75rem); --ed-item: clamp(1.125rem, 0.9rem + 0.8vw, 1.625rem); --ed-text: clamp(0.9375rem, 0.88rem + 0.22vw, 1.0625rem); --ed-disc: clamp(52px, 4.4vw, 64px); --ed-disc-i: clamp(1.4rem, 1.1rem + 0.5vw, 1.625rem); }
.ly--editorial .ed-why__title,
.ly--editorial .sx-amen--icons .sx-title,
.ly--editorial .ed-cfg__title,
.ly--editorial .ed-faq__title,
.ly--editorial .ed-assist__title { font-size: var(--ed-h); line-height: 1.12; }
.ly--editorial .ed-why__lead, .ly--editorial .ed-cfg__lead, .ly--editorial .ed-faq__lead, .ly--editorial .sx-amen--icons .sx-count, .ly--editorial .ed-cfg__count { font-size: var(--ed-text); }
.ly--editorial .ed-why__head, .ly--editorial .ed-cfg__name, .ly--editorial .ed-cfg__value, .ly--editorial .ed-faq__q button,
.ly--editorial .ed-loc__rows li, .ly--editorial .ed-loc__rows li b { font-size: var(--ed-item); line-height: 1.3; }
.ly--editorial .ed-cfg__go { font-size: clamp(1rem, 0.92rem + 0.25vw, 1.125rem); }
.ly--editorial .ed-cfg__icon { font-size: 1.6rem; }
.ly--editorial .ed-spec__item dd { font-size: var(--ed-text); line-height: 1.4; }
.ly--editorial .ed-spec__icon, .ly--editorial .ed-amen__disc { width: var(--ed-disc); height: var(--ed-disc); }
.ly--editorial .ed-spec__icon i, .ly--editorial .ed-amen__disc i { font-size: var(--ed-disc-i); }
.ly--editorial .ed-amen__name { font-size: var(--ed-text); }
.ly--editorial .ed-amen__cat { font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem); }
.ly--editorial .ed-amen__card { min-height: clamp(120px, 9.2vw, 140px); }
.ly--editorial .ed-faq__a p { font-size: var(--ed-text); }
.ly--editorial .ed-faq__sign { width: 22px; height: 22px; }
.ly--editorial .ed-loc__cat i { font-size: 1.6rem; }
.ly--editorial .ed-cfg__row { min-height: clamp(62px, 5vw, 76px); }

/* buyer assistance + enquiry: smaller cards and panel, same sizes as the sections above */
.ly--editorial .ed-assist__card { min-height: clamp(84px, 6.8vw, 100px); gap: clamp(12px, 1.5vw, 20px); padding: 12px clamp(14px, 1.6vw, 22px); }
.ly--editorial .ed-assist__ic { width: var(--ed-disc); height: var(--ed-disc); }
.ly--editorial .ed-assist__ic i { font-size: var(--ed-disc-i); }
.ly--editorial .ed-assist__txt h3 { font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem); }
.ly--editorial .ed-assist__txt p { font-size: var(--ed-text); line-height: 1.45; }
.ly--editorial .ed-assist__cta { min-height: clamp(112px, 9vw, 136px); }
.ly--editorial .ed-assist__ctatext { padding-block: clamp(16px, 1.5vw, 22px); }
.ly--editorial .ed-assist__ctatext h2 { font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.25rem); }
.ly--editorial .ed-assist__ctatext p { font-size: var(--ed-text); line-height: 1.55; }
.ly--editorial .ed-assist__btn { min-height: clamp(48px, 3.8vw, 56px); font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem); }
.ly--editorial .ed-assist__act { padding-block: 14px; }
@media (max-width: 767.98px) {
    .ly--editorial .ed-assist__card { padding: 10px 14px; }
    .ly--editorial .ed-assist__txt h3 { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }
}
/* Buyer assistance follows the page theme once a section or alternate background is set (round 69).
   By default (nothing customised) it keeps its dark reference look through the tokens above. With a custom background the same
   tokens point at the page's own surfaces: section background for the band and its heading, alternate background for the cards and
   the call-back panel, the theme border colour (--s-line / --a-line, which is the brand border colour when one is set) for every
   card border, divider and the panel border, the readable accent for icons / rules, and the page's button colours for the button. */
.ly--editorial .ed-assist--themed {
    --as-bg: var(--s-bg); --as-ink: var(--s-ink); --as-body: var(--s-body); --as-muted: var(--s-mute); --as-dev-line: var(--s-line);
    --as-gold: var(--s-icon, var(--s-bronze)); --as-gold-c: var(--a-icon, var(--a-bronze));
    --as-card: var(--a-bg); --as-cta: var(--a-bg); --as-c-ink: var(--a-ink); --as-c-body: var(--a-body);
    --as-line: var(--a-line); --as-edge: var(--a-line); --as-hover: var(--as-gold-c);
    --as-disc: var(--icon-bg, color-mix(in srgb, var(--as-gold-c) 9%, transparent));
    --as-cta-glow: color-mix(in srgb, var(--as-gold-c) 14%, transparent);
    --as-btn: var(--a-btn); --as-btn-ink: var(--a-btn-text); --as-btn-ic: var(--a-btn-text);
    background: radial-gradient(900px 520px at 88% 100%, color-mix(in srgb, var(--as-gold) 9%, transparent), transparent 62%), var(--as-bg);
}
.ly--editorial .ed-assist--themed .ed-assist__ic { box-shadow: inset 0 0 0 1px var(--icon-border, transparent); }
/* Editorial plans on phones: one card per row, a suitable image height */
@media (max-width: 599.98px) {
    .ly--editorial .sx-plan-row { grid-template-columns: minmax(0, 1fr); }
    .ly--editorial .sx-plan img { height: clamp(180px, 54vw, 240px); }
}
/* =========================================================
   MODERN REAL-ESTATE: HERO + FACTS STRIP (round 71, reference: Bayleaf)
   Hero = cream copy column | property photo fading into the cream | enquiry card over the right edge; then a dark facts strip.
   Default palette: warm ivory #FAF8F3, charcoal text, muted gold #9A610F, charcoal strip #211F1D. When the admin sets a section or
   alternate background (PropertyTheme::$customBackgrounds) the --themed classes take every colour from the page's own surfaces
   (--s-* for the hero, --a-* for the strip), so the configured backgrounds, borders, icon colours and buttons always win.
   Tablets and phones: title + location, photo, details, form. The site header and the sticky section bar are not touched.
   ========================================================= */
.ly--modern .md-hero { --mh-bg: #FAF8F3; --mh-ink: #14181F; --mh-body: #5A626E; --mh-mute: #6B7280; --mh-gold: var(--s-icon, #9A610F); --mh-line: rgba(166, 107, 22, 0.4); --mh-chip: rgba(166, 107, 22, 0.13); --mh-btn: #9A610F; --mh-btn-ink: #FFFFFF; --mh-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;
    --mh-pad: max(var(--gutter), calc((100% - 1680px) / 2 + var(--gutter)));
    position: relative; isolation: isolate; display: grid; grid-template-columns: var(--mh-pad) minmax(0, 34fr) minmax(0, 36fr) minmax(320px, 400px) var(--mh-pad); align-items: center;
    min-height: clamp(540px, 44vw, 740px); padding-block: clamp(32px, 4vw, 64px); overflow: hidden; background: var(--mh-bg); color: var(--mh-body); }
.ly--modern .md-hero--themed { --mh-bg: var(--s-bg); --mh-ink: var(--s-ink); --mh-body: var(--s-body); --mh-mute: var(--s-mute); --mh-gold: var(--s-icon, var(--s-bronze)); --mh-line: var(--s-line); --mh-chip: color-mix(in srgb, var(--mh-gold) 16%, transparent); --mh-btn: var(--s-btn); --mh-btn-ink: var(--s-btn-text); }
.ly--modern .md-hero:not(.md-hero--form) { grid-template-columns: var(--mh-pad) minmax(0, 40fr) minmax(0, 60fr) var(--mh-pad); }

/* photo: across the middle and right, its left edge melts into the cream */
.ly--modern .md-hero__media { position: absolute; z-index: -1; inset: 0 0 0 30%; margin: 0; }
.ly--modern .md-hero__main { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: var(--s-line); cursor: zoom-in; }
.ly--modern .md-hero__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ly--modern .md-hero__main::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--mh-bg) 0%, color-mix(in srgb, var(--mh-bg) 62%, transparent) 15%, transparent 44%); }
.ly--modern .md-hero__count { position: absolute; z-index: 1; left: 34%; bottom: 20px; padding: 9px 15px; border-radius: 999px; background: rgba(0, 0, 0, 0.62); color: #fff; font: 600 var(--t-small)/1 var(--f); }

/* copy */
.ly--modern .md-hero__info { grid-column: 2; display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 22px); min-width: 0; }
.ly--modern .md-hero:not(.md-hero--form) .md-hero__info { grid-column: 2; }
.ly--modern .md-hero__head, .ly--modern .md-hero__body { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 1.4vw, 18px); min-width: 0; }
.ly--modern .md-status { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--mh-chip); color: var(--mh-gold); font: 600 var(--t-small)/1 var(--f); }
.ly--modern .md-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ly--modern .md-title { margin: 0; max-width: 11ch; color: var(--mh-ink); font: 600 clamp(2.25rem, 1.2rem + 3.3vw, 4.25rem)/1.05 var(--mh-serif); letter-spacing: -0.015em; text-wrap: balance; }
.ly--modern .md-loc { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--mh-body); font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem); line-height: 1.45; }
.ly--modern .md-loc i { flex: none; margin-top: 2px; color: var(--mh-gold); }
.ly--modern .md-hero__rule { display: block; width: 64px; height: 2px; background: var(--mh-gold); }
.ly--modern .md-hero__desc { margin: 0; max-width: 34ch; color: var(--mh-body); font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.1875rem); line-height: 1.6; }
.ly--modern .md-keys { display: flex; width: 100%; margin: 4px 0 0; }
.ly--modern .md-keys div { flex: 1 1 0; min-width: 0; padding: 0 clamp(12px, 1.4vw, 22px); border-left: 1px solid var(--mh-line); }
.ly--modern .md-keys div:first-child { padding-left: 0; border-left: 0; }
.ly--modern .md-keys dt { display: flex; flex-direction: column; gap: 8px; margin: 0 0 6px; color: var(--mh-mute); font: 500 var(--t-small)/1.2 var(--f); }
.ly--modern .md-keys dt i { font-size: clamp(1.5rem, 1.2rem + 0.7vw, 2rem); line-height: 1; color: var(--mh-gold); }
.ly--modern .md-keys dd { margin: 0; color: var(--mh-ink); font: 600 var(--t-body)/1.35 var(--f); overflow-wrap: anywhere; }
.ly--modern .md-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.ly--modern .md-hero .ly-btn { --btn: var(--mh-btn); --btn-text: var(--mh-btn-ink); }
.ly--modern .md-hero .ly-btn--ghost { background: transparent; color: var(--mh-ink); border-color: var(--mh-ink); }

/* enquiry card over the right edge (the existing hero form, restyled for this layout only) */
.ly--modern .md-hero .hf { grid-column: 4; justify-self: end; max-width: 400px; border-radius: 16px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 28px 60px -28px rgba(20, 16, 10, 0.45); }
.ly--modern .md-hero .hf__field :is(input, textarea) { border-radius: 10px; }
.ly--modern .md-hero .hf__field:has(input[required]) label::after { content: " *"; color: #B3261E; }
.ly--modern .md-hero .hf__submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-radius: 10px; }
.ly--modern .md-hero .hf__submit { border-color: transparent; background: var(--mh-form-btn, #9A610F); color: var(--mh-form-ink, #FFFFFF); }
.ly--modern .md-hero--themed .hf__submit { background: var(--mh-form-btn, #1A1A1A); color: var(--mh-form-ink, #FFFFFF); }
.ly--modern .md-hero .hf__submit::after { content: "\2192"; font-size: 1.1em; line-height: 1; }

/* facts strip */
.ly--modern .md-facts { --mf-bg: #211F1D; --mf-ink: #F7F3EA; --mf-mute: #CFC9BC; --mf-gold: var(--a-icon, #D5A85C); --mf-line: rgba(213, 168, 92, 0.28); background: var(--mf-bg); border: 0; color: var(--mf-ink); }
.ly--modern .md-facts--themed { --mf-bg: var(--a-bg); --mf-ink: var(--a-ink); --mf-mute: var(--a-mute); --mf-gold: var(--a-icon, var(--a-bronze)); --mf-line: var(--a-line); }
.ly--modern .md-facts__strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; clip-path: inset(1px 0 0 1px); }
.ly--modern .md-facts__cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: clamp(18px, 2vw, 30px) clamp(14px, 1.6vw, 26px); box-shadow: inset 1px 0 0 var(--mf-line); }
.ly--modern .md-facts__cell dt { display: flex; flex-direction: column; gap: 10px; margin: 0; color: var(--mf-mute); font: 500 var(--t-small)/1.2 var(--f); }
.ly--modern .md-facts__cell dt i { font-size: clamp(1.5rem, 1.2rem + 0.7vw, 2rem); line-height: 1; color: var(--mf-gold); }
.ly--modern .md-facts__cell dd { margin: 0; color: var(--mf-ink); font: 600 clamp(1rem, 0.9rem + 0.45vw, 1.375rem)/1.3 var(--f); overflow-wrap: anywhere; }

/* plans viewer: compact preview frame (floor plans never dominate the page) */
.ly--modern .md-viewer { grid-template-columns: minmax(0, 6fr) minmax(260px, 4fr); }
.ly--modern .md-viewer__main img { aspect-ratio: auto; height: clamp(220px, 22vw, 320px); padding: 10px; }
.ly--modern .md-viewer__cap { padding: 12px 16px; }

@media (max-width: 1099.98px) {
    .ly--modern .md-hero, .ly--modern .md-hero:not(.md-hero--form) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(20px, 3vw, 36px); row-gap: clamp(16px, 2.4vw, 24px); min-height: 0; padding: clamp(22px, 3vw, 36px) var(--gutter); overflow: visible; align-items: start; }
    .ly--modern .md-hero__info { display: contents; }
    .ly--modern .md-hero__head { grid-column: 1 / -1; grid-row: 1; }
    .ly--modern .md-hero__media { position: relative; inset: auto; z-index: auto; grid-column: 1 / -1; grid-row: 2; margin-inline: calc(-1 * var(--gutter)); aspect-ratio: 16 / 9; max-height: 480px; }
    .ly--modern .md-hero__main::after { display: none; }
    .ly--modern .md-hero__count { left: var(--gutter); }
    .ly--modern .md-hero__body { grid-column: 1; grid-row: 3; }
    .ly--modern .md-hero:not(.md-hero--form) .md-hero__body { grid-column: 1 / -1; }
    .ly--modern .md-hero .hf { grid-column: 2; grid-row: 3; justify-self: stretch; max-width: none; }
    .ly--modern .md-title { max-width: none; }
    .ly--modern .md-hero__desc { max-width: 60ch; }
    .ly--modern .md-facts__strip { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); grid-auto-columns: auto; }
}
@media (max-width: 699.98px) {
    .ly--modern .md-hero, .ly--modern .md-hero:not(.md-hero--form) { grid-template-columns: minmax(0, 1fr); }
    .ly--modern .md-hero__body, .ly--modern .md-hero:not(.md-hero--form) .md-hero__body { grid-column: 1; grid-row: 3; }
    .ly--modern .md-hero .hf { grid-column: 1; grid-row: 4; }
    .ly--modern .md-hero__media { aspect-ratio: 4 / 3; }
    .ly--modern .md-keys { flex-wrap: wrap; row-gap: 14px; }
    .ly--modern .md-keys div { flex: 1 1 40%; }
    .ly--modern .md-keys div:nth-child(odd) { padding-left: 0; border-left: 0; }
    .ly--modern .md-facts__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ly--modern .md-viewer__main img { height: clamp(200px, 56vw, 280px); }
}
/* =========================================================
   MODERN OVERVIEW (round 72, reference: Bayleaf) + the sticky section bar's gold underline / button
   Two columns: eyebrow + serif "Overview" + gold rule + the description | a thin-bordered panel of property details
   (gold icon, label, vertical divider, bold value). Ivory by default; --themed classes follow the page's own surfaces (--s-*).
   ========================================================= */
.ly--modern .md-ov--ivory { --bg: #FAF8F3; background: #FAF8F3; }
.ly--modern .md-ov { --mo-gold: var(--s-icon, var(--s-bronze)); --mo-ink: var(--s-ink); --mo-body: var(--s-body); --mo-mute: var(--s-mute); --mo-line: var(--s-line); --mo-panel: var(--s-card); --mo-icon: var(--s-card-icon, var(--s-card-bronze)); --mo-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif; }
.ly--modern .md-ov--ivory { --mo-gold: var(--s-icon, #9A610F); --mo-ink: #14181F; --mo-body: #3F4651; --mo-mute: #6B7280; --mo-line: #E3DCCD; --mo-panel: #FDFCFA; --mo-icon: var(--s-icon, #9A610F); }
.ly--modern .md-ov__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.ly--modern .md-ov__eyebrow { display: flex; align-items: center; gap: 18px; margin: 0 0 clamp(10px, 1.2vw, 16px); color: var(--mo-gold); font: 500 clamp(0.75rem, 0.7rem + 0.2vw, 0.9375rem)/1.2 var(--f); letter-spacing: 0.3em; text-transform: uppercase; }
.ly--modern .md-ov__eyebrow span { width: clamp(48px, 5vw, 72px); height: 1px; background: currentColor; }
.ly--modern .md-ov__title { margin: 0; color: var(--mo-ink); font: 500 clamp(2.5rem, 1.3rem + 3.4vw, 4.5rem)/1.05 var(--mo-serif); letter-spacing: -0.015em; }
.ly--modern .md-ov__rule { display: block; width: clamp(72px, 8vw, 116px); height: 1px; margin: clamp(18px, 2vw, 28px) 0 clamp(20px, 2.4vw, 34px); background: var(--mo-gold); }
.ly--modern .md-ov .pt-prose { color: var(--mo-body); font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem); line-height: 1.7; }
.ly--modern .md-ov .pt-prose p { margin: 0 0 clamp(14px, 1.6vw, 22px); line-height: 1.7; }
.ly--modern .md-ov .pt-prose p:first-child { font: inherit; color: inherit; }
.ly--modern .md-ov .pt-more { margin-top: 4px; color: var(--mo-gold); }
.ly--modern .md-ov__details { margin: 0; padding: clamp(6px, 1vw, 14px) clamp(16px, 2vw, 28px); border: 1px solid var(--mo-line); border-radius: 14px; background: var(--mo-panel); color: var(--mo-ink); }
.ly--modern .md-ov__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); border-top: 1px solid var(--mo-line); }
.ly--modern .md-ov__row:first-child { border-top: 0; }
.ly--modern .md-ov__row dt { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); padding: clamp(12px, 1.2vw, 16px) 0; color: var(--mo-body); font: 400 clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem)/1.3 var(--f); }
.ly--modern .md-ov__row dt i { flex: none; width: 1.5em; text-align: center; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1; color: var(--mo-icon); }
.ly--modern .md-ov__row dd { margin: 0; padding: clamp(12px, 1.2vw, 16px) 0 clamp(12px, 1.2vw, 16px) clamp(16px, 2.4vw, 36px); border-left: 1px solid var(--mo-line); display: flex; align-items: center; color: var(--mo-ink); font: 600 clamp(0.9375rem, 0.88rem + 0.3vw, 1.125rem)/1.35 var(--f); overflow-wrap: anywhere; }


@media (max-width: 991.98px) {
    .ly--modern .md-ov__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 6vw, 44px); }
}
@media (max-width: 575.98px) {
    .ly--modern .md-ov__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ly--modern .md-ov__details { padding-inline: 14px; }
    .ly--modern .md-ov__row dd { padding-left: 14px; }
    .ly--modern .md-ov__row dt { gap: 10px; }
}
/* =========================================================
   MODERN PROJECT HIGHLIGHTS (round 73, reference: Bayleaf)
   Left: eyebrow, serif heading, numbered list (gold number | hairline | text; active row = thin gold border + soft tint).
   Right: rounded photo + compact caption panel with the selected highlight. Dark charcoal by default; --themed uses the page's
   alternate surface (--a-*) so the builder's background settings apply. Selection / photo swap = the existing script ([data-hl]).
   ========================================================= */
.ly--modern .md-hl { --mhl-bg: #1E1B17; --mhl-ink: #F7F3EA; --mhl-body: #E4DED2; --mhl-mute: #BDB5A6; --mhl-line: rgba(213, 168, 92, 0.22); --mhl-gold: var(--a-icon, #D5A85C); --mhl-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif; background: var(--mhl-bg); color: var(--mhl-body); }
.ly--modern .md-hl--themed { --mhl-bg: var(--a-bg); --mhl-ink: var(--a-ink); --mhl-body: var(--a-body); --mhl-mute: var(--a-mute); --mhl-line: var(--a-line); --mhl-gold: var(--a-icon, var(--a-bronze)); }
.ly--modern .md-hl { --mhl-edge: color-mix(in srgb, var(--mhl-gold) 60%, transparent); --mhl-tint: color-mix(in srgb, var(--mhl-gold) 10%, transparent); }
.ly--modern .md-hl__grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.ly--modern .md-hl__eyebrow { display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(10px, 1.2vw, 16px); color: var(--mhl-gold); font: 500 clamp(0.75rem, 0.7rem + 0.2vw, 0.9375rem)/1.2 var(--f); letter-spacing: 0.28em; text-transform: uppercase; }
.ly--modern .md-hl__eyebrow span { width: clamp(32px, 3.4vw, 46px); height: 1px; background: currentColor; }
.ly--modern .md-hl__title { margin: 0 0 clamp(18px, 2.2vw, 30px); color: var(--mhl-ink); font: 400 clamp(2.25rem, 1.2rem + 3vw, 4rem)/1.1 var(--mhl-serif); letter-spacing: -0.01em; }
.ly--modern .md-hl__list { margin: 0; padding: 0; list-style: none; }
.ly--modern .md-hl__list li { border-bottom: 1px solid var(--mhl-line); }
.ly--modern .md-hl__list li:last-child, .ly--modern .md-hl__list li:has(.is-active) { border-bottom-color: transparent; }
.ly--modern .md-hl__btn { display: flex; align-items: stretch; gap: clamp(14px, 1.8vw, 24px); width: 100%; min-height: 56px; padding: clamp(12px, 1.2vw, 18px) clamp(14px, 1.8vw, 24px); border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--mhl-ink); text-align: left; cursor: pointer; transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease); font: 400 clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem)/1.45 var(--f); }
.ly--modern .md-hl__btn:hover:not(.is-active) { border-color: color-mix(in srgb, var(--mhl-gold) 34%, transparent); background: color-mix(in srgb, var(--mhl-gold) 6%, transparent); }
.ly--modern .md-hl__btn.is-active { border-color: var(--mhl-edge); background: var(--mhl-tint); }
.ly--modern .md-hl__btn:active { transform: scale(0.995); }
/* interaction cues: whole row is the button; a gold arrow at the right end is dim on idle rows, brightens and nudges on hover, and is full strength on the selected row */
.ly--modern .md-hl__btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ly--modern .md-hl__t { flex: 1 1 auto; }
.ly--modern .md-hl__btn::after { content: "\2192"; flex: none; align-self: center; margin-left: 4px; color: var(--mhl-gold); font: 400 1.25rem/1 var(--f); opacity: 0.5; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.ly--modern .md-hl__btn:hover::after, .ly--modern .md-hl__btn:focus-visible::after { opacity: 0.95; transform: translateX(3px); }
.ly--modern .md-hl__btn.is-active::after { opacity: 1; transform: none; }
.ly--modern .md-hl__btn:focus-visible { outline: 2px solid var(--mhl-gold); outline-offset: 2px; }
.ly--modern .md-hl__n { flex: none; display: flex; align-items: center; min-width: 2ch; color: var(--mhl-gold); font: 400 clamp(1.375rem, 1.1rem + 0.9vw, 2rem)/1 var(--mhl-serif); font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.01em; }
.ly--modern .md-hl__t { display: flex; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.ly--modern .md-hl__stage { position: sticky; top: calc(var(--hx-header-h, 80px) + 70px); display: flex; flex-direction: column; gap: 14px; min-width: 0; margin-top: clamp(0px, 3vw, 44px); }
.ly--modern .md-hl__figure { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 16px; background: var(--mhl-line); }
.ly--modern .md-hl__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ly--modern .md-hl__cap { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 24px); margin: 0; padding: clamp(14px, 1.6vw, 22px) clamp(16px, 2vw, 28px); border: 1px solid var(--mhl-line); border-radius: 12px; background: color-mix(in srgb, var(--mhl-ink) 4%, transparent); color: var(--mhl-ink); font: 400 clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem)/1.5 var(--f); }
.ly--modern .md-hl__cap > span:first-child { flex: none; width: clamp(24px, 2.6vw, 36px); height: 1px; background: var(--mhl-gold); }
.ly--modern .md-hl__stage.is-swap img, .ly--modern .md-hl__stage.is-swap .md-hl__cap { animation: md-swap 0.5s var(--ease); }
@media (max-width: 991.98px) {
    .ly--modern .md-hl__grid { grid-template-columns: minmax(0, 1fr); }
    .ly--modern .md-hl__stage { position: static; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ly--modern .md-hl__btn, .ly--modern .md-hl__btn::after { transition: none; }
    .ly--modern .md-hl__btn:active { transform: none; }
    .ly--modern .md-hl__stage.is-swap img, .ly--modern .md-hl__stage.is-swap .md-hl__cap { animation: none; }
}
/* =========================================================
   MODERN CONFIGURATIONS + SPECIFICATIONS (round 75, reference: Bayleaf)
   Configurations: independent cards (small gold mark, serif type, area rows, gold "Enquire for details" link; hover = gold border + lift of
   the tint). Specifications: two-column list, no outer box: gold outline icon tile + muted label + emphasised value, hairlines between rows.
   Dark charcoal by default (--mc-* tokens); --themed takes the page's alternate surface (--a-*) so the builder's colours, borders and
   accent apply. The enquiry link is the existing .js-cta (opens the popup, data-config names the home).
   ========================================================= */
.ly--modern .md-cfg { --mc-bg: #29251C; --mc-ink: #F8F5EF; --mc-body: #E4DED2; --mc-mute: #B7B4AB; --mc-line: #5B554A; --mc-border: #676257; --mc-gold: var(--a-icon, #E6A817); --mc-card: #343027; --mc-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif; background: var(--mc-bg); color: var(--mc-body); }
.ly--modern .md-cfg--themed { --mc-bg: var(--a-bg); --mc-ink: var(--a-ink); --mc-body: var(--a-body); --mc-mute: var(--a-mute); --mc-line: var(--a-line); --mc-border: var(--a-line); --mc-gold: var(--a-icon, var(--a-bronze)); --mc-card: var(--a-card); }
.ly--modern .md-cfg { --mc-edge: color-mix(in srgb, var(--mc-gold) 65%, transparent); --mc-hover: color-mix(in srgb, var(--mc-gold) 8%, var(--mc-card)); }
.ly--modern .md-cfg__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.ly--modern .md-cfg__rule { display: block; width: clamp(48px, 5vw, 72px); height: 2px; margin-bottom: clamp(12px, 1.4vw, 18px); background: var(--mc-gold); }
.ly--modern .md-cfg__title { margin: 0; color: var(--mc-ink); font: 400 clamp(2.25rem, 1.2rem + 3vw, 4rem)/1.08 var(--mc-serif); letter-spacing: -0.01em; }
.ly--modern .md-cfg__count { margin: 0 0 8px; color: var(--mc-mute); font: 500 var(--t-small)/1.2 var(--f); white-space: nowrap; }
.ly--modern .md-cfg__grid { display: grid; gap: clamp(14px, 1.8vw, 24px); }
.ly--modern .md-cfg__grid--n1 { grid-template-columns: minmax(0, 420px); }
.ly--modern .md-cfg__grid--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ly--modern .md-cfg__grid--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ly--modern .md-cfg__card { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px); padding: clamp(22px, 2.4vw, 34px); border: 1px solid var(--mc-border); border-radius: 14px; background: var(--mc-card); transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease); }
.ly--modern .md-cfg__card:hover { border-color: var(--mc-edge); background: var(--mc-hover); }
.ly--modern .md-cfg__media { position: relative; overflow: hidden; width: 100%; height: clamp(150px, 13vw, 200px); border-radius: 12px; background: var(--mc-card); }
.ly--modern .md-cfg__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(16px); transform: scale(1.18); }
.ly--modern .md-cfg__val--blur { filter: blur(4px); }
.ly--modern .md-cfg__mark { display: block; width: 36px; height: 2px; background: var(--mc-gold); }
.ly--modern .md-cfg__type { margin: 0; padding-bottom: clamp(14px, 1.6vw, 20px); border-bottom: 1px solid var(--mc-line); color: var(--mc-ink); font: 400 clamp(1.875rem, 1.3rem + 1.8vw, 2.875rem)/1.1 var(--mc-serif); font-variant-numeric: lining-nums; }
.ly--modern .md-cfg__rows { display: grid; margin: 0; }
.ly--modern .md-cfg__rows div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--mc-line); }
.ly--modern .md-cfg__rows div:first-child { padding-top: 0; }
.ly--modern .md-cfg__rows dt { margin: 0; color: var(--mc-mute); font: 400 var(--t-small)/1.3 var(--f); }
.ly--modern .md-cfg__rows dd { margin: 0; color: var(--mc-ink); font: 600 clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem)/1.25 var(--f); text-align: right; font-variant-numeric: lining-nums; }
.ly--modern .md-cfg__rows dd small { margin-left: 2px; color: var(--mc-mute); font-size: 0.65em; font-weight: 500; }
.ly--modern .md-cfg__go { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; min-height: 44px; margin-top: auto; padding-bottom: 4px; border-bottom: 1px solid var(--mc-gold); color: color-mix(in srgb, var(--mc-gold) 78%, var(--mc-ink)); font: 600 var(--t-body)/1.2 var(--f); text-decoration: none; }
.ly--modern .md-cfg__go i { transition: transform 0.3s var(--ease); }
.ly--modern .md-cfg__go:hover i, .ly--modern .md-cfg__card:hover .md-cfg__go i { transform: translateX(4px); }
.ly--modern .md-cfg__go:focus-visible { outline: 2px solid var(--mc-gold); outline-offset: 4px; }
.ly--modern .md-spec { margin-top: clamp(32px, 4vw, 56px); }
.ly--modern .md-spec--first { margin-top: 0; }
.ly--modern .md-spec__eyebrow { display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(14px, 1.8vw, 24px); color: var(--mc-ink); font: 600 clamp(0.75rem, 0.7rem + 0.2vw, 0.9375rem)/1.2 var(--f); letter-spacing: 0.26em; text-transform: uppercase; }
.ly--modern .md-spec__eyebrow span { width: clamp(32px, 3.4vw, 46px); height: 2px; background: var(--mc-gold); }
.ly--modern .md-spec__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); margin: 0; }
.ly--modern .md-spec__item { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); min-width: 0; padding: clamp(12px, 1.3vw, 18px) 0; border-bottom: 1px solid var(--mc-line); }
.ly--modern .md-spec__icon { flex: none; display: grid; place-items: center; width: clamp(46px, 4.2vw, 56px); height: clamp(46px, 4.2vw, 56px); border: 1px solid var(--mc-line); border-radius: 12px; }
.ly--modern .md-spec__icon i { font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem); line-height: 1; color: var(--mc-gold); }
.ly--modern .md-spec__item dt { margin: 0 0 3px; color: var(--mc-mute); font: 400 var(--t-small)/1.3 var(--f); }
.ly--modern .md-spec__item dd { margin: 0; color: var(--mc-ink); font: 500 clamp(0.9375rem, 0.88rem + 0.3vw, 1.125rem)/1.4 var(--f); overflow-wrap: anywhere; }
@media (max-width: 1199.98px) {
    .ly--modern .md-cfg__grid--n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .ly--modern .md-spec__grid { grid-template-columns: minmax(0, 1fr); }
    .ly--modern .md-cfg__grid--n2, .ly--modern .md-cfg__grid--n3 { grid-template-columns: minmax(0, 1fr); }
    .ly--modern .md-cfg__grid--n1 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .ly--modern .md-cfg__card, .ly--modern .md-cfg__go i { transition: none; }
}
/* =========================================================
   MODERN AMENITIES (round 76, reference: Bayleaf)
   Eyebrow + serif "Amenities" + gold line, "N in total" at the right; category panels flow in three columns (CSS columns: a short panel
   sits under the previous one, no blank space); each panel = circular icon badge + uppercase title + gold line, then rows of a tinted
   icon square + name with hairlines. Ivory by default; md-amen--themed follows the page's section surface (--s-*).
   ========================================================= */
.ly--modern .md-amen { --ma-bg: #FAF8F3; --ma-ink: #14181F; --ma-body: #3F4651; --ma-mute: #6B7280; --ma-line: #E6DECF; --ma-panel: #FDFCFA; --ma-gold: var(--s-icon, #9A610F); --ma-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif; background: var(--ma-bg); }
.ly--modern .md-amen--themed { --ma-bg: var(--s-bg); --ma-ink: var(--s-ink); --ma-body: var(--s-body); --ma-mute: var(--s-mute); --ma-line: var(--s-line); --ma-panel: var(--s-card); --ma-gold: var(--s-card-icon, var(--s-card-bronze)); }
.ly--modern .md-amen { --ma-tint: color-mix(in srgb, var(--ma-gold) 11%, transparent); }
.ly--modern .md-amen__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: clamp(20px, 2.6vw, 36px); }
.ly--modern .md-amen__eyebrow { margin: 0 0 clamp(8px, 1vw, 12px); color: var(--ma-gold); font: 600 clamp(0.75rem, 0.7rem + 0.2vw, 0.9375rem)/1.2 var(--f); letter-spacing: 0.28em; text-transform: uppercase; }
.ly--modern .md-amen__titlerow { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.ly--modern .md-amen__title { margin: 0; color: var(--ma-ink); font: 400 clamp(2.5rem, 1.3rem + 3.4vw, 4.5rem)/1.05 var(--ma-serif); letter-spacing: -0.015em; }
.ly--modern .md-amen__line, .ly--modern .md-amen__count span, .ly--modern .md-amen__catline { display: block; height: 1px; background: linear-gradient(90deg, var(--ma-gold), transparent); }
.ly--modern .md-amen__line { width: clamp(48px, 7vw, 110px); }
.ly--modern .md-amen__count { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; color: var(--ma-body); font: 400 clamp(1rem, 0.95rem + 0.2vw, 1.25rem)/1 var(--f); white-space: nowrap; }
.ly--modern .md-amen__count b { color: var(--ma-gold); font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.25rem)/1 var(--ma-serif); font-variant-numeric: lining-nums; }
.ly--modern .md-amen__count span { width: clamp(40px, 6vw, 96px); background: linear-gradient(90deg, transparent, var(--ma-gold)); }
.ly--modern .md-amen__grid { columns: 3; column-gap: clamp(14px, 1.6vw, 22px); }
.ly--modern .md-amen__panel { display: block; break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 clamp(14px, 1.6vw, 22px); padding: clamp(16px, 1.8vw, 26px) clamp(16px, 1.8vw, 28px) clamp(10px, 1.2vw, 18px); border: 1px solid var(--ma-line); border-radius: 18px; background: var(--ma-panel); }
.ly--modern .md-amen__cat { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); margin: 0 0 clamp(8px, 1vw, 14px); }
.ly--modern .md-amen__badge { flex: none; display: grid; place-items: center; width: clamp(44px, 3.6vw, 56px); height: clamp(44px, 3.6vw, 56px); border-radius: 50%; background: var(--ma-tint); }
.ly--modern .md-amen__badge i { font-size: clamp(1.15rem, 1rem + 0.4vw, 1.5rem); line-height: 1; color: var(--ma-gold); }
.ly--modern .md-amen__cattitle { color: var(--ma-ink); font: 600 clamp(0.8125rem, 0.78rem + 0.2vw, 1rem)/1.2 var(--f); letter-spacing: 0.2em; text-transform: uppercase; }
.ly--modern .md-amen__catline { flex: 1 1 24px; min-width: 24px; }
.ly--modern .md-amen__list { margin: 0; padding: 0; list-style: none; }
.ly--modern .md-amen__list li { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 18px); min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--ma-line); }
.ly--modern .md-amen__list li:last-child { border-bottom: 0; }
.ly--modern .md-amen__ic { flex: none; display: grid; place-items: center; width: clamp(38px, 3.2vw, 46px); height: clamp(38px, 3.2vw, 46px); border-radius: 10px; background: var(--icon-bg, var(--ma-tint)); box-shadow: inset 0 0 0 1px var(--icon-border, transparent); }
.ly--modern .md-amen__ic i { font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.3rem); line-height: 1; color: var(--disc-icon, var(--ma-gold)); }
.ly--modern .md-amen__name { min-width: 0; color: var(--ma-ink); font: 400 clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem)/1.4 var(--f); overflow-wrap: anywhere; }
@media (max-width: 991.98px) {
    .ly--modern .md-amen__grid { columns: 2; }
}
@media (max-width: 599.98px) {
    .ly--modern .md-amen__grid { columns: 1; }
    .ly--modern .md-amen__count span, .ly--modern .md-amen__line { display: none; }
}
/* =========================================================
   MODERN LOCATION & CONNECTIVITY (round 77, reference: Bayleaf)
   Header (eyebrow, serif title, address with pin) / left bordered panel of destination groups / right rounded map of the same height.
   Ivory by default; md-loc--themed uses the page's section surface (--s-*). The map is the existing iframe embed (interactive).
   ========================================================= */
.ly--modern .md-loc { --ml-bg: #FAF8F3; --ml-ink: #14181F; --ml-body: #3F4651; --ml-mute: #6B7280; --ml-line: #E6DECF; --ml-panel: #FDFCFA; --ml-gold: var(--s-icon, #9A610F); --ml-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif; background: var(--ml-bg); }
.ly--modern .md-loc--themed { --ml-bg: var(--s-bg); --ml-ink: var(--s-ink); --ml-body: var(--s-body); --ml-mute: var(--s-mute); --ml-line: var(--s-line); --ml-panel: var(--s-card); --ml-gold: var(--s-card-icon, var(--s-card-bronze)); }
.ly--modern .md-loc { --ml-tint: color-mix(in srgb, var(--ml-gold) 11%, transparent); }
.ly--modern .md-loc__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: clamp(20px, 2.6vw, 34px); }
.ly--modern .md-loc__eyebrow { display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(8px, 1vw, 14px); color: var(--ml-gold); font: 500 clamp(0.75rem, 0.7rem + 0.2vw, 0.9375rem)/1.2 var(--f); letter-spacing: 0.28em; text-transform: uppercase; }
.ly--modern .md-loc__eyebrow span { width: clamp(32px, 3.4vw, 52px); height: 1px; background: currentColor; }
.ly--modern .md-loc__title { margin: 0; color: var(--ml-ink); font: 500 clamp(2.25rem, 1.2rem + 3.2vw, 4.25rem)/1.05 var(--ml-serif); letter-spacing: -0.015em; }
.ly--modern .md-loc__addr { display: flex; align-items: flex-start; gap: 12px; max-width: 38ch; margin: 0 0 6px; padding-bottom: 10px; border-bottom: 1px solid var(--ml-gold); color: var(--ml-ink); font: 400 clamp(0.9375rem, 0.88rem + 0.3vw, 1.125rem)/1.4 var(--f); }
.ly--modern .md-loc__addr i { flex: none; margin-top: 2px; color: var(--ml-gold); font-size: 1.25em; }
.ly--modern .md-loc__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(14px, 1.6vw, 22px); align-items: stretch; }
.ly--modern .md-loc__body--nomap, .ly--modern .md-loc__body--nopanel { grid-template-columns: minmax(0, 1fr); }
.ly--modern .md-loc__panel { min-width: 0; padding: clamp(10px, 1.2vw, 18px) clamp(16px, 2vw, 30px) clamp(14px, 1.6vw, 22px); border: 1px solid var(--ml-line); border-radius: 18px; background: var(--ml-panel); }
.ly--modern .md-loc__group { display: grid; grid-template-columns: minmax(104px, 30%) minmax(0, 1fr); align-items: center; padding: clamp(14px, 1.6vw, 22px) 0; border-bottom: 1px solid var(--ml-line); }
.ly--modern .md-loc__group:last-of-type { border-bottom: 0; }
.ly--modern .md-loc__cat { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 16px); margin: 0; padding-right: 12px; color: var(--ml-body); font: 500 clamp(0.6875rem, 0.64rem + 0.2vw, 0.8125rem)/1.35 var(--f); letter-spacing: 0.16em; text-transform: uppercase; }
.ly--modern .md-loc__badge { flex: none; display: grid; place-items: center; width: clamp(40px, 3.4vw, 50px); height: clamp(40px, 3.4vw, 50px); border-radius: 50%; background: var(--ml-tint); }
.ly--modern .md-loc__badge i { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem); line-height: 1; color: var(--ml-gold); }
.ly--modern .md-loc__rows { margin: 0; padding: 0 0 0 clamp(14px, 1.8vw, 24px); border-left: 1px solid var(--ml-line); list-style: none; }
.ly--modern .md-loc__rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--ml-line); color: var(--ml-ink); font: 400 clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem)/1.4 var(--f); }
.ly--modern .md-loc__rows li:first-child { border-top: 0; }
.ly--modern .md-loc__rows li span { min-width: 0; overflow-wrap: anywhere; }
.ly--modern .md-loc__rows li b { flex: none; color: var(--ml-ink); font-weight: 600; white-space: nowrap; font-variant-numeric: lining-nums; }
.ly--modern .md-loc__note { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--ml-line); color: var(--ml-mute); font: 400 var(--t-small)/1.4 var(--f); }
.ly--modern .md-loc__map { position: relative; min-height: clamp(320px, 38vw, 560px); overflow: hidden; border-radius: 18px; background: var(--ml-line); }
.ly--modern .md-loc__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ly--modern .md-loc__body--nomap .md-loc__panel { max-width: 860px; }
@media (max-width: 991.98px) {
    .ly--modern .md-loc__body { grid-template-columns: minmax(0, 1fr); }
    .ly--modern .md-loc__map { min-height: clamp(280px, 60vw, 420px); }
    .ly--modern .md-loc__body--nomap .md-loc__panel { max-width: none; }
}
@media (max-width: 575.98px) {
    .ly--modern .md-loc__group { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .ly--modern .md-loc__rows { padding-left: 0; border-left: 0; }
    .ly--modern .md-loc__rows li:first-child { border-top: 1px solid var(--ml-line); }
}
/* =========================================================
   MODERN PROJECT GALLERY (round 78, reference: Bayleaf)
   Eyebrow, serif heading, one-line description; a bar with filter pills (left) and "N Images" + circular prev / next arrows (right);
   16:9 rounded tiles, three columns, caption ("01. Title") over a bottom gradient. Ivory by default; md-gal--themed = the page's section
   surface. Pill / arrow gold = the page's readable accent. Paging + counts: [data-gal] script; filters + lightbox: the existing ones.
   ========================================================= */
.ly--modern .md-gal { --mg-bg: #FAF8F3; --mg-ink: #14181F; --mg-body: #5A626E; --mg-mute: #6B7280; --mg-line: #DDD5C4; --mg-gold: var(--s-icon, #9A610F); --mg-fill: #9A610F; --mg-on-gold: #FFFFFF; --mg-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif; background: var(--mg-bg); }
.ly--modern .md-gal--themed { --mg-bg: var(--s-bg); --mg-ink: var(--s-ink); --mg-body: var(--s-body); --mg-mute: var(--s-mute); --mg-line: var(--s-line); --mg-gold: var(--s-icon, var(--s-bronze)); }
.ly--modern .md-gal__head { margin-bottom: clamp(16px, 2vw, 26px); }
.ly--modern .md-gal__eyebrow { display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(8px, 1vw, 12px); color: var(--mg-gold); font: 600 clamp(0.75rem, 0.7rem + 0.2vw, 0.9375rem)/1.2 var(--f); letter-spacing: 0.26em; text-transform: uppercase; }
.ly--modern .md-gal__eyebrow span { width: clamp(28px, 3vw, 42px); height: 1px; background: currentColor; }
.ly--modern .md-gal__title { margin: 0; color: var(--mg-ink); font: 500 clamp(2.25rem, 1.2rem + 3vw, 4rem)/1.08 var(--mg-serif); letter-spacing: -0.015em; }
.ly--modern .md-gal__lead { margin: clamp(8px, 1vw, 12px) 0 0; max-width: 70ch; color: var(--mg-mute); font: 400 clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem)/1.5 var(--f); }
.ly--modern .md-gal__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: clamp(16px, 2vw, 26px); }
.ly--modern .md-gal__pills { display: flex; gap: 10px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.ly--modern .md-gal__pills::-webkit-scrollbar { display: none; }
.ly--modern .md-gal__pill { flex: none; min-height: 44px; padding: 0 clamp(16px, 1.8vw, 26px); border: 1px solid var(--mg-line); border-radius: 999px; background: transparent; color: var(--mg-ink); font: 500 var(--t-small)/1 var(--f); cursor: pointer; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease); }
.ly--modern .md-gal__pill span { margin-left: 6px; opacity: 0.65; }
.ly--modern .md-gal__pill:hover:not(.is-active) { border-color: var(--mg-gold); }
.ly--modern .md-gal__pill.is-active { border-color: var(--mg-fill); background: var(--mg-fill); color: var(--mg-on-gold); font-weight: 600; }
.ly--modern .md-gal__pill:focus-visible, .ly--modern .md-gal__arrow:focus-visible, .ly--modern .md-gal__item:focus-visible { outline: 2px solid var(--mg-gold); outline-offset: 3px; }
.ly--modern .md-gal__tools { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.ly--modern .md-gal__count { color: var(--mg-ink); font: 500 var(--t-small)/1 var(--f); white-space: nowrap; }
.ly--modern .md-gal__nav { display: flex; gap: 12px; }
.ly--modern .md-gal__nav[hidden] { display: none; }
.ly--modern .md-gal__arrow { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--mg-gold); border-radius: 50%; background: transparent; color: var(--mg-gold); font-size: 1.05rem; cursor: pointer; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s; touch-action: manipulation; }
.ly--modern .md-gal__arrow:hover:not(:disabled) { background: var(--mg-fill); color: var(--mg-on-gold); }
.ly--modern .md-gal__arrow:disabled { opacity: 0.4; cursor: not-allowed; }
.ly--modern .md-gal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.ly--modern .md-gal__item { aspect-ratio: 16 / 9; border-radius: 16px; }
.ly--modern .md-gal__item[hidden] { display: none; }
.ly--modern .md-gal__item::after { content: ""; position: absolute; inset: auto 0 0 0; height: 42%; pointer-events: none; background: linear-gradient(0deg, rgba(10, 8, 6, 0.72), rgba(10, 8, 6, 0)); }
.ly--modern .md-gal__cap { position: absolute; z-index: 1; left: clamp(12px, 1.4vw, 20px); right: clamp(12px, 1.4vw, 20px); bottom: clamp(10px, 1.2vw, 16px); display: flex; align-items: center; gap: 10px; color: #FFFFFF; font: 500 clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem)/1.3 var(--f); text-align: left; }
.ly--modern .md-gal__cap i { flex: none; font-size: 1.15em; }
.ly--modern .md-gal__cap > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ly--modern .md-gal .sx-video { margin-top: 4px; }
@media (max-width: 991.98px) {
    .ly--modern .md-gal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
    .ly--modern .md-gal__grid { grid-template-columns: minmax(0, 1fr); }
    .ly--modern .md-gal__tools { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
    .ly--modern .md-gal__pill, .ly--modern .md-gal__arrow { transition: none; }
}
/* =========================================================
   MODERN CONSTRUCTION UPDATES + RERA (round 79, reference: Bayleaf)
   Updates: horizontal timeline (gold-ringed marker, date badge, line) over equal-height bordered cards (tinted icon circle, bold title,
   description); 3 per row, 2 on tablets, vertical timeline on phones. RERA: intro on the left, registration card on the right
   (QR | number + verify link | divider | status). Ivory by default; --themed classes use the page's surfaces (progress: alternate --a-*,
   RERA: section --s-*), borders and readable accent.
   ========================================================= */
.ly--modern .md-prog, .ly--modern .md-rera { --mp-bg: #FAF8F3; --mp-ink: #14181F; --mp-body: #5A626E; --mp-mute: #6B7280; --mp-line: #E6DECF; --mp-card: #FDFCFA; --mp-gold: var(--s-icon, #9A610F); --mp-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif; background: var(--mp-bg); }
.ly--modern .md-prog--themed { --mp-bg: var(--a-bg); --mp-ink: var(--a-ink); --mp-body: var(--a-body); --mp-mute: var(--a-mute); --mp-line: var(--a-line); --mp-card: var(--a-card); --mp-gold: var(--a-card-icon, var(--a-card-bronze)); }
.ly--modern .md-rera--themed { --mp-bg: var(--s-bg); --mp-ink: var(--s-ink); --mp-body: var(--s-body); --mp-mute: var(--s-mute); --mp-line: var(--s-line); --mp-card: var(--s-card); --mp-gold: var(--s-card-icon, var(--s-card-bronze)); }
.ly--modern .md-prog, .ly--modern .md-rera { --mp-tint: color-mix(in srgb, var(--mp-gold) 11%, transparent); --mp-ruleline: color-mix(in srgb, var(--mp-gold) 45%, transparent); }
.ly--modern .md-rera--ivory { border-top: 1px solid var(--mp-line); }
.ly--modern .md-prog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.ly--modern .md-prog__eyebrow, .ly--modern .md-rera__eyebrow { display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(8px, 1vw, 14px); color: var(--mp-gold); font: 500 clamp(0.75rem, 0.7rem + 0.2vw, 0.9375rem)/1.2 var(--f); letter-spacing: 0.26em; text-transform: uppercase; }
.ly--modern .md-prog__eyebrow span, .ly--modern .md-rera__eyebrow span { width: clamp(28px, 3vw, 42px); height: 1px; background: currentColor; }
.ly--modern .md-prog__title, .ly--modern .md-rera__title { margin: 0; color: var(--mp-ink); font: 500 clamp(2.25rem, 1.2rem + 3vw, 4rem)/1.08 var(--mp-serif); letter-spacing: -0.015em; }
.ly--modern .md-prog__lead, .ly--modern .md-rera__lead { margin: clamp(10px, 1.2vw, 16px) 0 0; max-width: 56ch; color: var(--mp-mute); font: 400 clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem)/1.55 var(--f); }
.ly--modern .md-prog__count { margin: clamp(8px, 1.2vw, 16px) 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--mp-gold); color: var(--mp-ink); font: 500 clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem)/1 var(--f); white-space: nowrap; }
.ly--modern .md-prog__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px) clamp(14px, 1.8vw, 24px); margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; list-style: none; }
.ly--modern .md-prog__item { display: flex; flex-direction: column; min-width: 0; }
.ly--modern .md-prog__top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-left: 2px; }
.ly--modern .md-prog__marker { position: relative; flex: none; width: 24px; height: 24px; border: 2px solid var(--mp-gold); border-radius: 50%; }
.ly--modern .md-prog__marker::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--mp-gold); }
.ly--modern .md-prog__marker::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 16px; background: var(--mp-gold); }
.ly--modern .md-prog__date { flex: none; padding: 8px 16px; border-radius: 999px; background: var(--mp-tint); color: var(--mp-ink); font: 600 var(--t-small)/1 var(--f); letter-spacing: 0.04em; text-transform: uppercase; }
.ly--modern .md-prog__line { flex: 1 1 24px; height: 1px; background: var(--mp-ruleline); }
.ly--modern .md-prog__card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(14px, 1.6vw, 20px); align-items: start; flex: 1; padding: clamp(16px, 1.8vw, 24px); border: 1px solid var(--mp-line); border-radius: 14px; background: var(--mp-card); }
.ly--modern .md-prog__ic { display: grid; place-items: center; width: clamp(48px, 4.2vw, 60px); height: clamp(48px, 4.2vw, 60px); border-radius: 50%; background: var(--mp-tint); }
.ly--modern .md-prog__ic i { font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.6rem); line-height: 1; color: var(--mp-gold); }
.ly--modern .md-prog__txt { min-width: 0; }
.ly--modern .md-prog__txt h3 { margin: 0 0 6px; color: var(--mp-ink); font: 600 clamp(1.0625rem, 1rem + 0.3vw, 1.25rem)/1.3 var(--f); overflow-wrap: anywhere; }
.ly--modern .md-prog__txt p { margin: 0; color: var(--mp-body); font: 400 clamp(0.9375rem, 0.9rem + 0.15vw, 1rem)/1.55 var(--f); }
.ly--modern .md-prog__photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ly--modern .md-prog__photos img { width: 96px; height: 68px; object-fit: cover; border-radius: 8px; }
.ly--modern .md-rera__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.ly--modern .md-rera__cards { display: grid; gap: 14px; min-width: 0; }
.ly--modern .md-rera__card { display: flex; align-items: center; flex-wrap: wrap; gap: 18px clamp(20px, 2.4vw, 36px); padding: clamp(18px, 2vw, 28px) clamp(18px, 2.4vw, 36px); border: 1px solid var(--mp-line); border-radius: 16px; background: var(--mp-card); }
.ly--modern .md-rera__qr { flex: none; display: block; width: 120px; height: 120px; padding: 4px; background: #FFFFFF; line-height: 0; }
.ly--modern .md-rera__qr img, .ly--modern .md-rera__qr canvas { display: block; width: 112px; height: 112px; }
.ly--modern .md-rera__info { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ly--modern .md-rera__info small { color: var(--mp-mute); font: 400 var(--t-small)/1.3 var(--f); }
.ly--modern .md-rera__info strong { color: var(--mp-ink); font: 600 clamp(1.125rem, 1rem + 0.7vw, 1.625rem)/1.25 var(--f); letter-spacing: 0.01em; overflow-wrap: anywhere; word-break: break-all; }
.ly--modern .md-rera__verify { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; padding: 8px 0 2px; border-bottom: 1px solid var(--mp-gold); color: var(--mp-ink); font: 500 var(--t-body)/1.2 var(--f); text-decoration: none; }
.ly--modern .md-rera__verify:hover { color: var(--mp-gold); }
.ly--modern .md-rera__verify:focus-visible { outline: 2px solid var(--mp-gold); outline-offset: 3px; }
.ly--modern .md-rera__status { flex: 1 1 180px; display: flex; align-items: center; gap: 16px; align-self: stretch; padding-left: clamp(18px, 2.2vw, 32px); border-left: 1px solid var(--mp-line); }
.ly--modern .md-rera__badge { flex: none; display: grid; place-items: center; width: clamp(52px, 4.4vw, 64px); height: clamp(52px, 4.4vw, 64px); border-radius: 50%; background: var(--mp-tint); }
.ly--modern .md-rera__badge i { font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.75rem); color: var(--mp-gold); }
.ly--modern .md-rera__status p { margin: 0; color: var(--mp-body); font: 400 var(--t-body)/1.45 var(--f); }
.ly--modern .md-rera__docs { margin-top: clamp(20px, 2.4vw, 32px); }
@media (max-width: 991.98px) {
    .ly--modern .md-prog__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ly--modern .md-rera__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599.98px) {
    .ly--modern .md-prog__list { position: relative; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-left: 28px; }
    .ly--modern .md-prog__list::before { content: ""; position: absolute; left: 13px; top: 12px; bottom: 12px; width: 1px; background: var(--mp-ruleline); }
    .ly--modern .md-prog__top { margin-left: -28px; margin-bottom: 12px; }
    .ly--modern .md-prog__marker::after, .ly--modern .md-prog__line { display: none; }
    .ly--modern .md-prog__card { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ly--modern .md-rera__card { flex-direction: column; align-items: flex-start; }
    .ly--modern .md-rera__info, .ly--modern .md-rera__status { flex: 0 0 auto; }
    .ly--modern .md-rera__status { align-self: auto; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--mp-line); width: 100%; }
}
/* =========================================================
   MODERN FAQ (round 80, reference: Bayleaf)
   Intro on the left (eyebrow, serif heading, line naming the property); numbered accordion cards on the right: cream number badge,
   question, circular gold + / - control; the open card has a stronger gold border and a tinted header, its answer sits beside a gold rule.
   Ivory by default; md-faq--themed uses the alternate surface (--a-*). Collapsing only happens once the script adds .is-js.
   ========================================================= */
.ly--modern .md-faq { --mq-bg: #FAF8F3; --mq-ink: #14181F; --mq-body: #5A626E; --mq-mute: #6B7280; --mq-line: #E6DECF; --mq-card: #FDFCFA; --mq-gold: var(--s-icon, #9A610F); --mq-fill: #9A610F; --mq-on-gold: #FFFFFF; --mq-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif; background: var(--mq-bg); }
.ly--modern .md-faq--themed { --mq-bg: var(--a-bg); --mq-ink: var(--a-ink); --mq-body: var(--a-body); --mq-mute: var(--a-mute); --mq-line: var(--a-line); --mq-card: var(--a-card); --mq-gold: var(--a-card-icon, var(--a-card-bronze)); }
.ly--modern .md-faq { --mq-tint: color-mix(in srgb, var(--mq-gold) 11%, transparent); --mq-edge: color-mix(in srgb, var(--mq-gold) 62%, transparent); }
.ly--modern .md-faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.ly--modern .md-faq__eyebrow { display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(10px, 1.2vw, 16px); color: var(--mq-gold); font: 500 clamp(0.75rem, 0.7rem + 0.2vw, 0.9375rem)/1.2 var(--f); letter-spacing: 0.28em; text-transform: uppercase; }
.ly--modern .md-faq__eyebrow span { width: clamp(32px, 3.4vw, 52px); height: 1px; background: currentColor; }
.ly--modern .md-faq__title { margin: 0; color: var(--mq-ink); font: 500 clamp(2.25rem, 1.2rem + 3.2vw, 4.25rem)/1.07 var(--mq-serif); letter-spacing: -0.015em; }
.ly--modern .md-faq__lead { max-width: 38ch; margin: clamp(14px, 1.6vw, 22px) 0 0; color: var(--mq-mute); font: 400 clamp(0.9375rem, 0.88rem + 0.3vw, 1.1875rem)/1.6 var(--f); }
.ly--modern .md-faq__list { display: grid; gap: clamp(10px, 1.1vw, 16px); min-width: 0; }
.ly--modern .md-faq__item { overflow: hidden; border: 1px solid var(--mq-line); border-radius: 14px; background: var(--mq-card); transition: border-color 0.35s var(--ease); }
.ly--modern .md-faq__item.is-open { border-color: var(--mq-edge); }
.ly--modern .md-faq__q { margin: 0; }
.ly--modern .md-faq__q button { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px); width: 100%; min-height: 64px; padding: clamp(12px, 1.3vw, 18px) clamp(14px, 1.7vw, 24px); border: 0; background: transparent; color: var(--mq-ink); text-align: left; cursor: pointer; font: 600 clamp(1rem, 0.92rem + 0.4vw, 1.25rem)/1.35 var(--f); transition: background-color 0.35s var(--ease); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ly--modern .md-faq__item.is-open .md-faq__q button { background: var(--mq-tint); }
.ly--modern .md-faq__q button:hover:not([aria-expanded="true"]) { background: color-mix(in srgb, var(--mq-gold) 5%, transparent); }
.ly--modern .md-faq__q button:focus-visible { outline: 2px solid var(--mq-gold); outline-offset: -3px; }
.ly--modern .md-faq__n { flex: none; display: grid; place-items: center; width: clamp(38px, 3.4vw, 48px); height: clamp(38px, 3.4vw, 48px); border-radius: 50%; background: var(--mq-tint); color: var(--mq-ink); font: 500 clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem)/1 var(--f); font-variant-numeric: lining-nums tabular-nums; }
.ly--modern .md-faq__t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ly--modern .md-faq__ctl { position: relative; flex: none; width: clamp(34px, 3vw, 42px); height: clamp(34px, 3vw, 42px); border: 1.5px solid var(--mq-gold); border-radius: 50%; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease); }
.ly--modern .md-faq__ctl::before, .ly--modern .md-faq__ctl::after { content: ""; position: absolute; left: 50%; top: 50%; width: 42%; height: 2px; margin: -1px 0 0 -21%; border-radius: 1px; background: var(--mq-gold); transition: transform 0.35s var(--ease), background-color 0.3s var(--ease); }
.ly--modern .md-faq__ctl::after { transform: rotate(90deg); }
.ly--modern .md-faq__item.is-open .md-faq__ctl { border-color: var(--mq-fill); background: var(--mq-fill); }
.ly--modern .md-faq__item.is-open .md-faq__ctl::before, .ly--modern .md-faq__item.is-open .md-faq__ctl::after { background: var(--mq-on-gold); }
.ly--modern .md-faq__item.is-open .md-faq__ctl::after { transform: rotate(0deg); }
.ly--modern .md-faq__a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.4s var(--ease); }
.ly--modern .md-faq__a > div { min-height: 0; overflow: hidden; }
.ly--modern .md-faq__a p { margin: clamp(10px, 1.2vw, 16px) clamp(14px, 1.7vw, 24px) clamp(16px, 1.8vw, 24px); padding: 2px 0 2px clamp(14px, 1.6vw, 22px); border-left: 2px solid var(--mq-gold); color: var(--mq-body); font: 400 clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem)/1.65 var(--f); overflow-wrap: anywhere; }
.ly--modern .md-faq.is-js .md-faq__item:not(.is-open) .md-faq__a { grid-template-rows: 0fr; }
.ly--modern .md-faq.is-js .md-faq__item:not(.is-open) .md-faq__a > div { visibility: hidden; transition: visibility 0s 0.4s; }
@media (max-width: 991.98px) {
    .ly--modern .md-faq__grid { grid-template-columns: minmax(0, 1fr); }
    .ly--modern .md-faq__lead { max-width: 60ch; }
}
@media (prefers-reduced-motion: reduce) {
    .ly--modern .md-faq__a, .ly--modern .md-faq__ctl, .ly--modern .md-faq__ctl::before, .ly--modern .md-faq__ctl::after, .ly--modern .md-faq__item, .ly--modern .md-faq__q button { transition: none; }
}

/* =========================================================
   MODERN SERVICES + FINAL ENQUIRY (round 81, reference: Bayleaf)
   Services: charcoal band, heading left (about a quarter to a third of the width), four items right with thin vertical dividers
   (gold outlined icon in a ring, bold title, short grey text). Enquiry: ivory band, gold rule + heading + line left, charcoal
   "Request a call back" button and a gold-outlined phone link right. Defaults are charcoal / ivory; md-svc--themed follows the section
   background (--s-*) and md-enq--themed the alternate background (--a-*), including button colours and accents.
   ========================================================= */
.ly--modern .md-svc { --sv-bg: #25231F; --sv-ink: #F7F3EA; --sv-body: #BDB8AD; --sv-line: rgba(213, 168, 92, 0.3); --sv-gold: var(--photo-accent, #C9A05A); background: var(--sv-bg); color: var(--sv-body); padding-block: clamp(36px, 4.4vw, 68px); }
.ly--modern .md-svc--themed { --sv-bg: var(--s-bg); --sv-ink: var(--s-ink); --sv-body: var(--s-mute); --sv-line: var(--s-line); --sv-gold: var(--s-icon, var(--sv-gold-auto, var(--s-gold))); border-top: 1px solid var(--s-line); }
.ly--modern .md-svc { --sv-ring: color-mix(in srgb, var(--sv-gold) 62%, transparent); --sv-disc: color-mix(in srgb, var(--sv-gold) 9%, transparent); }
.ly--modern .md-svc__dev { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); margin: 0 0 clamp(20px, 2.6vw, 36px); padding-bottom: clamp(16px, 2vw, 26px); border-bottom: 1px solid var(--sv-line); }
.ly--modern .md-svc__dev img { flex: none; max-width: 140px; max-height: 52px; object-fit: contain; padding: 8px 12px; border-radius: 8px; background: #F8F6F1; }
.ly--modern .md-svc__dev h3 { margin: 0 0 4px; color: var(--sv-ink); font: 600 var(--t-body)/1.3 var(--f); }
.ly--modern .md-svc__dev p { max-width: 78ch; margin: 0; color: var(--sv-body); font-size: var(--t-small); line-height: 1.6; }
.ly--modern .md-svc__grid { display: grid; grid-template-columns: minmax(0, 3.5fr) minmax(0, 8.5fr); align-items: stretch; }
.ly--modern .md-svc__intro { align-self: center; padding-right: clamp(20px, 3vw, 48px); }
.ly--modern .md-svc__rule { display: block; width: 38px; height: 3px; margin: 0 0 clamp(14px, 1.6vw, 22px); background: var(--sv-gold); }
.ly--modern .md-svc__title { margin: 0; color: var(--sv-ink); font: 500 clamp(1.5rem, 0.95rem + 1.5vw, 2.5rem)/1.2 var(--f); letter-spacing: -0.015em; text-wrap: balance; }
.ly--modern .md-svc__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.ly--modern .md-svc__item { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 1.4vw, 18px); min-width: 0; padding: clamp(6px, 0.8vw, 12px) clamp(12px, 1.6vw, 28px); border-left: 1px solid var(--sv-line); }
.ly--modern .md-svc__ic { flex: none; display: grid; place-items: center; width: clamp(52px, 4.6vw, 68px); height: clamp(52px, 4.6vw, 68px); border: 1.5px solid var(--icon-border, var(--sv-ring)); border-radius: 50%; background: var(--icon-bg, var(--sv-disc)); }
.ly--modern .md-svc__ic i { color: var(--sv-gold); font-size: clamp(1.25rem, 1rem + 0.75vw, 1.75rem); line-height: 1; }
.ly--modern .md-svc__txt { min-width: 0; }
.ly--modern .md-svc__txt h3 { margin: 0 0 6px; color: var(--sv-ink); font: 600 clamp(1rem, 0.9rem + 0.35vw, 1.25rem)/1.3 var(--f); letter-spacing: -0.005em; text-wrap: balance; }
.ly--modern .md-svc__txt p { margin: 0; color: var(--sv-body); font: 400 clamp(0.9375rem, 0.88rem + 0.2vw, 1.0625rem)/1.5 var(--f); }

.ly--modern .md-enq { --eq-bg: #FAF8F3; --eq-ink: #14181F; --eq-body: #5A626E; --eq-gold: #9A610F; --eq-btn: #26231F; --eq-btn-ink: #FFFFFF; --eq-btn-ic: #D5A85C; background: var(--eq-bg); color: var(--eq-body); padding-block: clamp(36px, 4.6vw, 72px); }
.ly--modern .md-enq--themed { --eq-bg: var(--a-bg); --eq-ink: var(--a-ink); --eq-body: var(--a-body); --eq-gold: var(--a-icon, var(--eq-gold-auto, var(--a-gold))); --eq-btn: var(--a-btn); --eq-btn-ink: var(--a-btn-text); --eq-btn-ic: var(--a-btn-text); border-top: 1px solid var(--a-line); }
.ly--modern .md-enq { --eq-edge: color-mix(in srgb, var(--eq-gold) 60%, transparent); }
.ly--modern .md-enq__wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(20px, 2.4vw, 32px) clamp(28px, 4vw, 64px); }
.ly--modern .md-enq__text { flex: 1 1 380px; min-width: 0; }
.ly--modern .md-enq__rule { display: block; width: 38px; height: 3px; margin: 0 0 clamp(12px, 1.4vw, 18px); background: var(--eq-gold); }
.ly--modern .md-enq h2 { margin: 0 0 clamp(8px, 1vw, 12px); color: var(--eq-ink); font: 600 clamp(1.625rem, 1.05rem + 1.7vw, 2.75rem)/1.15 var(--f); letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: anywhere; }
.ly--modern .md-enq p { max-width: 62ch; margin: 0; color: var(--eq-body); font: 400 clamp(0.9375rem, 0.88rem + 0.3vw, 1.125rem)/1.6 var(--f); }
.ly--modern .md-enq__actions { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(12px, 1.4vw, 18px); }
.ly--modern .md-enq__btn, .ly--modern .md-enq__tel { display: inline-flex; align-items: center; justify-content: center; gap: clamp(10px, 1.1vw, 14px); min-height: clamp(52px, 4.4vw, 64px); padding: 0 clamp(20px, 2.2vw, 32px); border-radius: 10px; font: 600 clamp(0.9375rem, 0.88rem + 0.25vw, 1.125rem)/1.2 var(--f); text-decoration: none; white-space: nowrap; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ly--modern .md-enq__btn { border: 1px solid var(--eq-btn); background: var(--eq-btn); color: var(--eq-btn-ink); }
.ly--modern .md-enq__btn i { color: var(--eq-btn-ic); font-size: 1.2em; line-height: 1; }
.ly--modern .md-enq__arrow { margin-left: 4px; transition: transform 0.25s var(--ease); }
.ly--modern .md-enq__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); }
.ly--modern .md-enq__btn:hover .md-enq__arrow { transform: translateX(4px); }
.ly--modern .md-enq__btn:active, .ly--modern .md-enq__tel:active { transform: scale(0.98); }
.ly--modern .md-enq__tel { border: 1px solid var(--eq-edge); background: transparent; color: var(--eq-ink); font-variant-numeric: lining-nums tabular-nums; }
.ly--modern .md-enq__tel i { color: var(--eq-gold); font-size: 1.2em; line-height: 1; }
.ly--modern .md-enq__tel:hover { border-color: var(--eq-gold); background: color-mix(in srgb, var(--eq-gold) 8%, transparent); }
.ly--modern .md-enq a:focus-visible { outline: 2px solid var(--eq-gold); outline-offset: 3px; }
@media (max-width: 1099.98px) {
    .ly--modern .md-svc__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); }
    .ly--modern .md-svc__intro { padding-right: 0; }
    .ly--modern .md-svc__item:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 991.98px) {
    .ly--modern .md-svc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; gap: clamp(18px, 3vw, 28px) clamp(16px, 3vw, 32px); }
    .ly--modern .md-svc__item, .ly--modern .md-svc__item:first-child { padding: clamp(14px, 2vw, 20px) 0 0; border-left: 0; border-top: 1px solid var(--sv-line); }
}
@media (max-width: 599.98px) {
    .ly--modern .md-enq__wrap { flex-direction: column; align-items: stretch; }
    .ly--modern .md-enq__text { flex: 0 0 auto; }
    .ly--modern .md-enq__actions { flex-direction: column; align-items: stretch; }
    .ly--modern .md-enq__btn, .ly--modern .md-enq__tel { width: 100%; white-space: normal; }
}
@media (max-width: 479.98px) {
    .ly--modern .md-svc__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .ly--modern .md-svc__item, .ly--modern .md-svc__item:first-child { flex-direction: row; align-items: center; gap: 16px; padding: 16px 0; }
    .ly--modern .md-svc__item:first-child { padding-top: 0; border-top: 0; }
    .ly--modern .md-svc__ic { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
    .ly--modern .md-enq__btn, .ly--modern .md-enq__tel, .ly--modern .md-enq__arrow { transition: none; }
    .ly--modern .md-enq__btn:hover, .ly--modern .md-enq__btn:hover .md-enq__arrow { transform: none; }
}

/* =========================================================
   MOTION (round 82): Lenis smooth scroll + GSAP reveals / parallax, all three layouts (public/js/property-motion.js).
   Everything here only applies once the script has added html.js-gsap / html.lenis, and never with reduced motion.
   ========================================================= */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
    /* photos that drift inside their frame: the frame clips them, the script scales them a little */
    .js-gsap .ly--modern .md-hero__main { overflow: hidden; }
    .js-gsap .ly--modern .md-hero__main img,
    .js-gsap .ly--immersive .im-hero__media img,
    .js-gsap .ly--immersive .sx-cta--photo .sx-cta__bg { will-change: transform; }
    .js-gsap .ly--modern .md-gal__item img { scale: 1.12; will-change: translate; }
}

/* =========================================================
   IMMERSIVE HERO (round 87, reference: Bayleaf)
   Edge-to-edge photo under a light left-to-right shade; left: gold line +
   status, big serif name, location with a pin, then the Enquire button and the "N photos" button. The global header above is untouched.
   Without a photo: brand gradient. Accent / button colours come from the page theme (--photo-accent, --im-btn).
   ========================================================= */
.ly--immersive .im-hero { --im-gold: var(--photo-accent, #D5A85C); --im-tint: color-mix(in srgb, var(--im-gold) 55%, #FFF1D6); --im-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif; position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: max(560px, min(calc(100svh - var(--hx-header-h, 80px)), 56vw)); overflow: hidden; background: var(--brand); color: #fff; }
.ly--immersive .im-hero--noimg { background: radial-gradient(900px 520px at 78% 28%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%), linear-gradient(135deg, var(--brand), #0D0D0D); }
.ly--immersive .im-hero__media { position: absolute; inset: 0; z-index: -3; }
.ly--immersive .im-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.ly--immersive .im-hero__shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(12, 11, 10, 0.68) 0%, rgba(12, 11, 10, 0.42) 28%, rgba(12, 11, 10, 0.08) 58%, rgba(12, 11, 10, 0) 76%), linear-gradient(0deg, rgba(12, 11, 10, 0.5) 0%, rgba(12, 11, 10, 0) 34%), linear-gradient(180deg, rgba(12, 11, 10, 0.16) 0%, rgba(12, 11, 10, 0) 16%); }
.ly--immersive .im-hero__inner { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(48px, 7.5vw, 124px); }
.ly--immersive .im-hero--form .im-hero__inner { padding-top: clamp(64px, 6vw, 96px); padding-bottom: clamp(32px, 4vw, 64px); }
.ly--immersive .im-hero__top { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.ly--immersive .im-hero--form .im-hero__top { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); column-gap: clamp(28px, 4vw, 72px); }
.ly--immersive .im-hero--form .hf { justify-self: end; }
.ly--immersive .im-hero__copy { min-width: 0; max-width: min(100%, 720px); }
.ly--immersive .im-status { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); margin: 0 0 clamp(8px, 1.1vw, 16px); color: #F3EBDD; font: 400 clamp(0.75rem, 0.7rem + 0.22vw, 0.9375rem)/1.2 var(--f); letter-spacing: 0.3em; text-transform: uppercase; }
.ly--immersive .im-status span { flex: none; width: clamp(32px, 4vw, 60px); height: 1.5px; background: var(--im-gold); }
.ly--immersive .im-title { margin: 0 0 clamp(12px, 1.4vw, 20px); max-width: 10em; color: #FBF4E8; font: 500 clamp(2.75rem, 1.3rem + 5vw, 5.75rem)/0.98 var(--im-serif); letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: break-word; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25); }
.ly--immersive .im-title__acc { color: var(--im-tint); }
.ly--immersive .im-desc { max-width: 46ch; margin: 0 0 clamp(20px, 2.4vw, 34px); color: rgba(255, 255, 255, 0.92); font: 400 clamp(0.9375rem, 0.86rem + 0.35vw, 1.1875rem)/1.6 var(--f); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); }
.ly--immersive .im-loc { margin-bottom: clamp(14px, 1.6vw, 22px); }
.ly--immersive .im-title--long { font-size: clamp(2.5rem, 1.2rem + 4vw, 4.5rem); }
.ly--immersive .im-title--xl { font-size: clamp(2.25rem, 1.1rem + 3.1vw, 3.5rem); line-height: 1.08; }
.ly--immersive .im-loc { display: flex; align-items: center; gap: 10px; margin: 0 0 clamp(20px, 2.4vw, 34px); color: #FBF4E8; font: 500 clamp(0.9375rem, 0.88rem + 0.25vw, 1.125rem)/1.4 var(--f); }
.ly--immersive .im-loc i { flex: none; color: var(--im-gold); }
.ly--immersive .im-hero__cta { display: flex; flex-wrap: wrap; gap: 12px clamp(12px, 1.4vw, 18px); }
.ly--immersive .im-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: clamp(52px, 4.2vw, 64px); padding: 0 clamp(22px, 2.4vw, 36px); border: 1px solid transparent; border-radius: 6px; font: 500 clamp(0.9375rem, 0.88rem + 0.2vw, 1.0625rem)/1.2 var(--f); text-decoration: none; cursor: pointer; transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ly--immersive .im-btn i { font-size: 1.15em; line-height: 1; }
.ly--immersive .im-btn--primary { border-color: var(--im-btn); background: var(--im-btn); color: var(--im-btn-ink); }
.ly--immersive .im-btn--ghost { border-color: rgba(255, 255, 255, 0.72); background: rgba(12, 11, 10, 0.34); color: #fff; }
.ly--immersive .im-btn__arrow { transition: transform 0.25s var(--ease); }
.ly--immersive .im-btn:hover { transform: translateY(-2px); }
.ly--immersive .im-btn--primary:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); }
.ly--immersive .im-btn--primary:hover .im-btn__arrow { transform: translateX(4px); }
.ly--immersive .im-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.16); }
.ly--immersive .im-btn:active { transform: scale(0.98); }
.ly--immersive .im-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 991.98px) {
    .ly--immersive .im-hero--form .im-hero__top { grid-template-columns: minmax(0, 1fr); row-gap: 24px; align-items: start; }
    .ly--immersive .im-hero--form .hf { justify-self: start; max-width: 560px; }
    .ly--immersive .im-hero__media img { object-position: 68% 50%; }
    .ly--immersive .im-hero__shade { background: linear-gradient(90deg, rgba(12, 11, 10, 0.7) 0%, rgba(12, 11, 10, 0.4) 55%, rgba(12, 11, 10, 0.1) 100%), linear-gradient(0deg, rgba(12, 11, 10, 0.55) 0%, rgba(12, 11, 10, 0) 40%), linear-gradient(180deg, rgba(12, 11, 10, 0.16) 0%, rgba(12, 11, 10, 0) 16%); }
}
@media (max-width: 599.98px) {
    .ly--immersive .im-hero { min-height: 0; }
    .ly--immersive .im-hero__shade { background: linear-gradient(180deg, rgba(12, 11, 10, 0.5) 0%, rgba(12, 11, 10, 0.5) 45%, rgba(12, 11, 10, 0.78) 100%); }
    .ly--immersive .im-hero__inner { padding-top: 56px; padding-bottom: 40px; }
    .ly--immersive .im-hero__top { align-items: end; }
    .ly--immersive .im-hero__cta { flex-direction: column; align-items: stretch; }
    .ly--immersive .im-btn { width: 100%; }
    .ly--immersive .im-hero--form .hf { max-width: none; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ly--immersive .im-btn, .ly--immersive .im-btn__arrow { transition: none; }
    .ly--immersive .im-btn:hover, .ly--immersive .im-btn--primary:hover .im-btn__arrow { transform: none; }
}

/* =========================================================
   IMMERSIVE PROJECT HIGHLIGHTS (round 85, reference: Bayleaf)
   Narrow ivory panel left (gold line + "The story", serif "Project / Highlights", round-icon list with hairlines); the photo fills the
   right side to the section edge, its left edge cut by one big curve (a quarter ellipse) with a fine gold outline and a fainter second line
   (box-shadow rings follow the curve). Ivory + gold by default; brand heading / accent / border colours when set; the page's own
   section colours (--s-*) with a custom background. Stacks on phones with a softer corner.
   ========================================================= */
.ly--immersive .im-hl { --ih-bg: #FAF8F3; --ih-ink: var(--iv-ink, #14181F); --ih-body: #5A626E; --ih-line: var(--iv-line, #E3DACA); --ih-gold: var(--iv-accent, #9A610F); --ih-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif; --ih-cut: 40%; position: relative; display: grid; grid-template-columns: minmax(0, 33%) minmax(0, 1fr); overflow: hidden; background: radial-gradient(760px 520px at 8% 24%, rgba(255, 255, 255, 0.6), transparent 70%), var(--ih-bg); color: var(--ih-body); }
.ly--immersive .im-hl--themed { --ih-bg: var(--s-bg); --ih-ink: var(--s-ink); --ih-body: var(--s-mute); --ih-line: var(--s-line); --ih-gold: var(--s-icon, var(--ih-gold-auto, var(--s-gold))); background: var(--ih-bg); }
.ly--immersive .im-hl--noimg { grid-template-columns: minmax(0, 1fr); }
.ly--immersive .im-hl__main { position: relative; z-index: 1; min-width: 0; padding: clamp(32px, 4.4vw, 72px) clamp(20px, 2.4vw, 40px) clamp(32px, 4.4vw, 72px) max(var(--gutter), calc((100vw - 1920px) / 2 + var(--gutter))); }
.ly--immersive .im-hl--noimg .im-hl__main { max-width: 760px; }
.ly--immersive .im-hl__eyebrow { display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(8px, 1vw, 14px); color: var(--ih-ink); font: 600 clamp(0.6875rem, 0.65rem + 0.15vw, 0.8125rem)/1.2 var(--f); letter-spacing: 0.28em; text-transform: uppercase; }
.ly--immersive .im-hl__eyebrow span { flex: none; width: clamp(32px, 3.4vw, 52px); height: 1px; background: var(--ih-gold); }
.ly--immersive .im-hl__title { margin: 0 0 clamp(18px, 2.2vw, 32px); font: 400 clamp(2.25rem, 1rem + 2.9vw, 4rem)/1.05 var(--ih-serif); letter-spacing: -0.015em; }
.ly--immersive .im-hl__t1, .ly--immersive .im-hl__t2 { display: block; }
.ly--immersive .im-hl__t1 { color: var(--ih-ink); }
.ly--immersive .im-hl__t2 { color: var(--ih-gold); }
.ly--immersive .im-hl__list { margin: 0; padding: 0; list-style: none; }
.ly--immersive .im-hl__item { display: flex; align-items: center; gap: clamp(14px, 1.4vw, 20px); padding: clamp(10px, 1vw, 14px) 0; border-bottom: 1px solid var(--ih-line); }
.ly--immersive .im-hl__item:last-child { border-bottom: 0; }
.ly--immersive .im-hl__ic { flex: none; display: grid; place-items: center; width: clamp(46px, 3.9vw, 58px); height: clamp(46px, 3.9vw, 58px); border: 1px solid var(--icon-border, var(--ih-line)); border-radius: 50%; background: var(--icon-bg, color-mix(in srgb, #FFFFFF 70%, transparent)); box-shadow: 0 6px 16px rgba(60, 44, 20, 0.08); }
.ly--immersive .im-hl--themed .im-hl__ic { background: var(--icon-bg, color-mix(in srgb, var(--ih-gold) 10%, transparent)); box-shadow: none; }
.ly--immersive .im-hl__ic i { color: var(--ih-gold); font-size: clamp(1.125rem, 0.95rem + 0.5vw, 1.5rem); line-height: 1; }
.ly--immersive .im-hl__txt { min-width: 0; }
.ly--immersive .im-hl__txt h3 { margin: 0; color: var(--ih-ink); font: 600 clamp(0.9375rem, 0.86rem + 0.28vw, 1.125rem)/1.35 var(--f); overflow-wrap: anywhere; }
.ly--immersive .im-hl__txt p { margin: 2px 0 0; color: var(--ih-body); font: 400 clamp(0.875rem, 0.82rem + 0.2vw, 1rem)/1.45 var(--f); overflow-wrap: anywhere; }
.ly--immersive .im-hl__media { position: relative; z-index: 0; margin: 0; min-height: 100%; overflow: hidden; border-radius: 0 0 0 var(--ih-cut) / 0 0 0 100%; background: color-mix(in srgb, var(--ih-gold) 18%, var(--ih-bg)); box-shadow: 0 0 0 2px var(--ih-gold), 0 0 0 14px var(--ih-bg), 0 0 0 15px color-mix(in srgb, var(--ih-gold) 45%, transparent); }
.ly--immersive .im-hl__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
@media (max-width: 1099.98px) {
    .ly--immersive .im-hl { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); --ih-cut: 30%; }
    .ly--immersive .im-hl__media { box-shadow: 0 0 0 2px var(--ih-gold); }
}
@media (max-width: 767.98px) {
    .ly--immersive .im-hl { grid-template-columns: minmax(0, 1fr); }
    .ly--immersive .im-hl__main { padding: clamp(28px, 7vw, 44px) var(--gutter) 24px; }
    .ly--immersive .im-hl__media { min-height: 0; aspect-ratio: 16 / 10; border-radius: 36% 0 0 0 / 28% 0 0 0; margin-left: var(--gutter); box-shadow: 0 0 0 2px var(--ih-gold); }
    .ly--immersive .im-hl__ic { width: 44px; height: 44px; }
}
/* the property description stays reachable under the list: three lines, then "Read more" (existing script) */
.ly--immersive .im-hl__story { margin-top: clamp(14px, 1.6vw, 22px); padding-top: clamp(14px, 1.6vw, 22px); border-top: 1px solid var(--ih-line); }
.ly--immersive .im-hl__story .im-prose { max-width: none; color: var(--ih-body); font: 400 clamp(0.875rem, 0.82rem + 0.2vw, 1rem)/1.6 var(--f); }
.ly--immersive .im-hl__story .im-prose.is-collapsed { max-height: 4.9em; }
.ly--immersive .im-hl__story .im-prose.is-collapsed::after { display: none; } /* the shared white fade would show as a pale block; the mask above fades the text */
.ly--immersive .im-hl__story .pt-more { margin-top: 8px; color: var(--ih-gold); }
.ly--immersive .im-hl__story .pt-more:focus-visible { outline: 2px solid var(--ih-gold); outline-offset: 3px; }

/* =========================================================
   IMMERSIVE PROPERTY STATISTICS (round 88, compact band under the hero since round 92)
   Full-width warm ivory band: one row of up to six statistics (round gold icon, small caps label, big value + small unit) with thin gold
   dividers, (no decoration). 3 per row <=1099, 2 per row
   <=599. Ivory by default, the page's alternate background (--a-*) with a custom background.
   ========================================================= */
.ly--immersive .im-nums { --in-bg: #FBF7EE; --in-ink: var(--iv-ink, #14181F); --in-mute: #6B6F76; --in-gold: var(--iv-accent, #9A610F); --in-top: #FFFDF8; --in-hi: color-mix(in srgb, #FFFFFF 70%, var(--in-bg)); position: relative; isolation: isolate; overflow: hidden; padding: clamp(20px, 2.4vw, 36px) 0; border-bottom: 1px solid color-mix(in srgb, var(--in-gold) 18%, transparent); background: linear-gradient(180deg, var(--in-top) 0%, var(--in-bg) 100%); }
.ly--immersive .im-nums--themed { --in-bg: var(--a-bg); --in-ink: var(--a-ink); --in-mute: var(--a-mute); --in-gold: var(--a-icon, var(--in-gold-auto, var(--a-gold))); --in-top: var(--a-bg); --in-hi: color-mix(in srgb, var(--in-gold) 8%, var(--a-bg)); }
.ly--immersive .im-nums__grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; }
.ly--immersive .im-nums__item { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0 clamp(8px, 1.4vw, 24px); text-align: center; }
.ly--immersive .im-nums__item + .im-nums__item::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 4%; width: 1px; background: color-mix(in srgb, var(--in-gold) 38%, transparent); }
.ly--immersive .im-nums__ic { display: grid; place-items: center; width: clamp(42px, 3.4vw, 56px); height: clamp(42px, 3.4vw, 56px); border: 1px solid color-mix(in srgb, var(--in-gold) 34%, transparent); border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--in-hi), color-mix(in srgb, var(--in-gold) 14%, var(--in-bg))); }
.ly--immersive .im-nums__ic i { color: var(--in-gold); font-size: clamp(1.0625rem, 0.9rem + 0.55vw, 1.5rem); line-height: 1; }
.ly--immersive .im-nums__item dt { margin: clamp(6px, 0.7vw, 10px) 0 2px; color: var(--in-mute); font: 500 clamp(0.625rem, 0.6rem + 0.12vw, 0.75rem)/1.3 var(--f); letter-spacing: 0.14em; text-transform: uppercase; overflow-wrap: anywhere; }
.ly--immersive .im-nums__item dd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 clamp(5px, 0.6vw, 9px); margin: 0; min-width: 0; }
.ly--immersive .im-num { color: var(--in-ink); font: 700 clamp(1.25rem, 0.95rem + 1vw, 2.125rem)/1.1 var(--f); letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.ly--immersive .im-num--long { font-size: clamp(1.0625rem, 0.85rem + 0.7vw, 1.5rem); }
.ly--immersive .im-unit { color: var(--in-mute); font: 400 clamp(0.75rem, 0.7rem + 0.2vw, 0.9375rem)/1.2 var(--f); }
@media (max-width: 1099.98px) {
    .ly--immersive .im-nums__grid { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: clamp(18px, 2.6vw, 26px); }
    .ly--immersive .im-nums__item { grid-column: span 2; }
    .ly--immersive .im-nums__item::before { display: block; }
    .ly--immersive .im-nums__item:nth-child(3n+1)::before { display: none; }
    .ly--immersive .im-nums__item:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
    .ly--immersive .im-nums__item:nth-last-child(2):nth-child(3n+1), .ly--immersive .im-nums__item:last-child:nth-child(3n+2) { grid-column: span 3; }
}
@media (max-width: 599.98px) {
    .ly--immersive .im-nums { padding-block: 22px; }
    .ly--immersive .im-nums__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
    .ly--immersive .im-nums__item, .ly--immersive .im-nums__item:nth-last-child(2):nth-child(3n+1), .ly--immersive .im-nums__item:last-child:nth-child(3n+2), .ly--immersive .im-nums__item:last-child:nth-child(3n+1) { grid-column: auto; }
    .ly--immersive .im-nums__item:nth-child(3n+1)::before { display: block; }
    .ly--immersive .im-nums__item:nth-child(2n+1)::before { display: none; }
    .ly--immersive .im-nums__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* =========================================================
   IMMERSIVE PAGE SYSTEM (round 94): one look for every section below the story / cards.
   - .im-body re-points the surface variables to the warm ivory defaults (ivory / white bands alternate); a custom section / alternate
     background keeps the page's own colours (.im-body--themed).
   - every section header = one short gold rule, a serif title (same face as the hero and the story) and a quiet count line.
   - cards, tabs, FAQ rows, timelines and the RERA box share one border / radius / gold-accent language.
   ========================================================= */
.ly--immersive .im-body { --ib-gold: var(--iv-accent, #9A610F); --ib-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif; --ib-line: var(--iv-line, #E6DECF); background: var(--bg); }
.ly--immersive .im-body--ivory { --s-bg: #FBF8F2; --a-bg: #FFFFFF; --bg: #FBF8F2; --s-line: var(--ib-line); --a-line: var(--ib-line); --line: var(--ib-line); --accent: var(--ib-gold); --s-card: #FFFFFF; --a-card: #FFFFFF; --card: #FFFFFF; --card-ink: #14181F; }
.ly--immersive .im-body--themed { --ib-gold: var(--s-icon, var(--ib-gold-auto, var(--s-gold))); --ib-line: var(--s-line); --accent: var(--ib-gold); }
.ly--immersive .im-body .ly-sec { padding-block: clamp(44px, 5.4vw, 88px); }
.ly--immersive .im-body .ly-wrap { max-width: 1920px; }
.ly--immersive .im-body .sx-head { display: grid; justify-items: start; gap: 8px; margin: 0 0 clamp(24px, 3vw, 44px); }
.ly--immersive .im-body .sx-head::before { content: ""; width: clamp(36px, 3.4vw, 52px); height: 1.5px; margin-bottom: 4px; background: var(--ib-gold); }
.ly--immersive .im-body .sx-title, .ly--immersive .im-body .pt-h2 { margin: 0; color: var(--ink); font: 400 clamp(2rem, 1.1rem + 2.6vw, 3.5rem)/1.08 var(--ib-serif); letter-spacing: -0.015em; text-wrap: balance; }
.ly--immersive .im-body .sx-count { color: var(--mute); font: 500 clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem)/1.4 var(--f); letter-spacing: 0.03em; }
.ly--immersive .im-body .sx-count i { color: var(--ib-gold); }
.ly--immersive .im-body .sx-sub { margin: clamp(32px, 4vw, 56px) 0 clamp(14px, 1.6vw, 22px); color: var(--ib-gold); font: 600 0.8125rem/1.2 var(--f); letter-spacing: 0.22em; text-transform: uppercase; }
.ly--immersive .im-body .sx-link { color: var(--ib-gold); font-weight: 600; }




/* plans */
.ly--immersive .sx-plan { border-radius: clamp(12px, 1.2vw, 18px); background: var(--card); }



.ly--immersive .sx-docs ul a { border-color: var(--line); border-radius: 12px; }

/* FAQ: a rounded row per question, gold + that turns */
.ly--immersive .sx-faq__list { display: grid; gap: 10px; max-width: 1000px; }
.ly--immersive .sx-faq__item { border: 1px solid var(--line); border-radius: 14px; background: var(--card); transition: border-color 0.3s var(--ease); }
.ly--immersive .sx-faq__item[open] { border-color: color-mix(in srgb, var(--ib-gold) 60%, transparent); }
.ly--immersive .sx-faq__item summary { padding: clamp(14px, 1.6vw, 22px) clamp(16px, 2vw, 26px); color: var(--ink); font: 600 clamp(1rem, 0.92rem + 0.35vw, 1.1875rem)/1.4 var(--f); }
.ly--immersive .sx-faq__item summary i { color: var(--ib-gold); }
.ly--immersive .sx-faq__item[open] summary i { transform: rotate(45deg); }
.ly--immersive .sx-faq__item p { margin: 0; padding: 0 clamp(16px, 2vw, 26px) clamp(16px, 1.8vw, 24px); color: var(--body); }

/* similar properties */
.ly--immersive .im-body .pt-after { padding-block: clamp(44px, 5.4vw, 88px) clamp(28px, 3vw, 48px); }
.ly--immersive .im-body .pt-rel { border-radius: clamp(12px, 1.2vw, 18px); }

/* final photo call to action: serif headline, the same rounded buttons as the hero */
.ly--immersive .sx-cta--photo h2 { font: 400 clamp(2.25rem, 1.2rem + 3.4vw, 4.5rem)/1.05 var(--ib-serif, "Playfair Display", Georgia, serif); letter-spacing: -0.015em; text-wrap: balance; }
.ly--immersive .sx-cta--photo p { max-width: 54ch; font-size: clamp(1rem, 0.92rem + 0.35vw, 1.1875rem); }
.ly--immersive .sx-cta--photo .ly-btn { border-radius: 6px; min-height: clamp(52px, 4.2vw, 62px); padding-inline: clamp(22px, 2.4vw, 36px); font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
    .ly--immersive .sx-faq__item { transition: none; }
}

/* guidance services band at the foot of the page: the Modern layout's design, scoped to Immersive */.ly--immersive .md-svc { --sv-bg: #25231F; --sv-ink: #F7F3EA; --sv-body: #BDB8AD; --sv-line: rgba(213, 168, 92, 0.3); --sv-gold: var(--photo-accent, #C9A05A); background: var(--sv-bg); color: var(--sv-body); padding-block: clamp(36px, 4.4vw, 68px); }
.ly--immersive .md-svc--themed { --sv-bg: var(--s-bg); --sv-ink: var(--s-ink); --sv-body: var(--s-mute); --sv-line: var(--s-line); --sv-gold: var(--s-icon, var(--sv-gold-auto, var(--s-gold))); border-top: 1px solid var(--s-line); }
.ly--immersive .md-svc { --sv-ring: color-mix(in srgb, var(--sv-gold) 62%, transparent); --sv-disc: color-mix(in srgb, var(--sv-gold) 9%, transparent); }
.ly--immersive .md-svc__dev { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); margin: 0 0 clamp(20px, 2.6vw, 36px); padding-bottom: clamp(16px, 2vw, 26px); border-bottom: 1px solid var(--sv-line); }
.ly--immersive .md-svc__dev img { flex: none; max-width: 140px; max-height: 52px; object-fit: contain; padding: 8px 12px; border-radius: 8px; background: #F8F6F1; }
.ly--immersive .md-svc__dev h3 { margin: 0 0 4px; color: var(--sv-ink); font: 600 var(--t-body)/1.3 var(--f); }
.ly--immersive .md-svc__dev p { max-width: 78ch; margin: 0; color: var(--sv-body); font-size: var(--t-small); line-height: 1.6; }
.ly--immersive .md-svc__grid { display: grid; grid-template-columns: minmax(0, 3.5fr) minmax(0, 8.5fr); align-items: stretch; }
.ly--immersive .md-svc__intro { align-self: center; padding-right: clamp(20px, 3vw, 48px); }
.ly--immersive .md-svc__rule { display: block; width: 38px; height: 3px; margin: 0 0 clamp(14px, 1.6vw, 22px); background: var(--sv-gold); }
.ly--immersive .md-svc__title { margin: 0; color: var(--sv-ink); font: 500 clamp(1.5rem, 0.95rem + 1.5vw, 2.5rem)/1.2 var(--f); letter-spacing: -0.015em; text-wrap: balance; }
.ly--immersive .md-svc__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.ly--immersive .md-svc__item { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 1.4vw, 18px); min-width: 0; padding: clamp(6px, 0.8vw, 12px) clamp(12px, 1.6vw, 28px); border-left: 1px solid var(--sv-line); }
.ly--immersive .md-svc__ic { flex: none; display: grid; place-items: center; width: clamp(52px, 4.6vw, 68px); height: clamp(52px, 4.6vw, 68px); border: 1.5px solid var(--icon-border, var(--sv-ring)); border-radius: 50%; background: var(--icon-bg, var(--sv-disc)); }
.ly--immersive .md-svc__ic i { color: var(--sv-gold); font-size: clamp(1.25rem, 1rem + 0.75vw, 1.75rem); line-height: 1; }
.ly--immersive .md-svc__txt { min-width: 0; }
.ly--immersive .md-svc__txt h3 { margin: 0 0 6px; color: var(--sv-ink); font: 600 clamp(1rem, 0.9rem + 0.35vw, 1.25rem)/1.3 var(--f); letter-spacing: -0.005em; text-wrap: balance; }
.ly--immersive .md-svc__txt p { margin: 0; color: var(--sv-body); font: 400 clamp(0.9375rem, 0.88rem + 0.2vw, 1.0625rem)/1.5 var(--f); }

@media (max-width: 1099.98px) {
    .ly--immersive .md-svc__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); }
    .ly--immersive .md-svc__intro { padding-right: 0; }
    .ly--immersive .md-svc__item:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 991.98px) {
    .ly--immersive .md-svc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; gap: clamp(18px, 3vw, 28px) clamp(16px, 3vw, 32px); }
    .ly--immersive .md-svc__item, .ly--immersive .md-svc__item:first-child { padding: clamp(14px, 2vw, 20px) 0 0; border-left: 0; border-top: 1px solid var(--sv-line); }
}
@media (max-width: 479.98px) {
    .ly--immersive .md-svc__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .ly--immersive .md-svc__item, .ly--immersive .md-svc__item:first-child { flex-direction: row; align-items: center; gap: 16px; padding: 16px 0; }
    .ly--immersive .md-svc__item:first-child { padding-top: 0; border-top: 0; }
    .ly--immersive .md-svc__ic { width: 52px; height: 52px; }
}
/* round 94 touch-ups: services title in the page's serif, related header, a gold rule over the closing call to action */
.ly--immersive .md-svc__title { font-family: var(--ib-serif, "Playfair Display", "Cormorant Garamond", Georgia, serif); font-weight: 400; letter-spacing: -0.015em; }
.ly--immersive .im-body .pt-related .pt-card__head { display: grid; justify-items: start; gap: 10px; margin: 0 0 clamp(20px, 2.6vw, 36px); }
.ly--immersive .im-body .pt-related .pt-card__head::before { content: ""; width: clamp(36px, 3.4vw, 52px); height: 1.5px; background: var(--ib-gold); }
.ly--immersive .im-body .pt-related .pt-link { color: var(--ib-gold); font-weight: 600; }
.ly--immersive .sx-cta--photo .sx-cta__text::before { content: ""; display: block; width: clamp(36px, 3.4vw, 52px); height: 1.5px; margin-bottom: clamp(12px, 1.4vw, 18px); background: var(--photo-accent, #D5A85C); }

/* =========================================================
   IMMERSIVE GALLERY (round 96, reference: Bayleaf): eyebrow + serif title + count on the left, round arrows (outline + solid gold) on the right;
   one big image (about 68%) and two stacked side images (about 32%) with softly rounded corners, a bottom shade and a "01 / 03" counter on
   each (a progress line on the big one) and a round zoom badge. The arrows slide a window of three through ALL the images (script:
   [data-im-gal]); one image = one big image, two = big + one tall side image. A faint gold glow sits behind the heading (no lines). Phones: big image on top,
   the side images as a thumbnail row. Colours from the page theme (--ib-gold, --line).
   ========================================================= */
.ly--immersive .sx-gallery--strip { position: relative; overflow: hidden; isolation: isolate; }
.ly--immersive .sx-gallery--strip::before, .ly--immersive .sx-gallery--strip::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.ly--immersive .sx-gallery--strip::before { left: -8%; top: -30%; width: 60%; height: 80%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ib-gold) 9%, transparent), transparent); }
.ly--immersive .sx-gallery--strip::after { right: -6%; top: -24%; width: 48%; height: 70%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ib-gold) 7%, transparent), transparent); }
.ly--immersive .im-gal__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 clamp(18px, 2.2vw, 32px); }
.ly--immersive .im-gal__titles { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.ly--immersive .im-gal__eyebrow { display: flex; align-items: center; gap: 16px; margin: 0; color: var(--ib-gold); font: 500 clamp(0.75rem, 0.7rem + 0.2vw, 0.9375rem)/1.2 var(--f); letter-spacing: 0.3em; text-transform: uppercase; }
.ly--immersive .im-gal__eyebrow span { width: clamp(32px, 3.4vw, 52px); height: 1.5px; background: var(--ib-gold); }
.ly--immersive .im-gal__titles .sx-title { margin: 0; }
.ly--immersive .im-gal__nav { display: flex; flex: none; gap: 12px; }
.ly--immersive .im-gal__arrow { display: grid; place-items: center; width: clamp(44px, 3.6vw, 56px); height: clamp(44px, 3.6vw, 56px); border: 1.5px solid var(--ib-gold); border-radius: 50%; background: transparent; color: var(--ib-gold); font-size: 1.2rem; cursor: pointer; transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ly--immersive .im-gal__arrow--solid { background: var(--ib-gold); color: #fff; }
.ly--immersive .im-gal__arrow:hover { background: var(--ib-gold); color: #fff; transform: translateY(-1px); }
.ly--immersive .im-gal__arrow--solid:hover { background: color-mix(in srgb, var(--ib-gold) 84%, #000); }
.ly--immersive .im-gal__arrow:focus-visible, .ly--immersive .im-gal__tile:focus-visible { outline: 2px solid var(--ib-gold); outline-offset: 3px; }
.ly--immersive .im-gal { padding-inline: var(--gutter); }
.ly--immersive .im-gal__grid { display: grid; grid-template-columns: minmax(0, 68fr) minmax(0, 32fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 18px); height: clamp(340px, 34vw, 660px); transition: opacity 0.14s linear; }
.ly--immersive .im-gal__grid--n1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.ly--immersive .im-gal__grid--n2 { grid-template-rows: minmax(0, 1fr); }
.ly--immersive .im-gal.is-swap .im-gal__grid { opacity: 0.35; }
.ly--immersive .im-gal__tile { position: relative; isolation: isolate; display: block; min-width: 0; min-height: 0; padding: 0; overflow: hidden; border: 0; border-radius: clamp(10px, 1.1vw, 18px); background: color-mix(in srgb, var(--ib-gold) 16%, var(--bg)); color: #fff; cursor: zoom-in; text-align: left; }
.ly--immersive .im-gal__tile--main { grid-row: 1 / -1; }
.ly--immersive .im-gal__tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.ly--immersive .im-gal__tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(12, 11, 10, 0.55) 0%, rgba(12, 11, 10, 0.12) 30%, rgba(12, 11, 10, 0) 52%); pointer-events: none; }
.ly--immersive .im-gal__tile:hover img { transform: scale(1.03); }
.ly--immersive .im-gal__idx { position: absolute; left: clamp(14px, 1.6vw, 28px); right: clamp(14px, 1.6vw, 28px); bottom: clamp(12px, 1.3vw, 22px); display: flex; align-items: center; gap: 16px; font: 500 clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem)/1 var(--f); letter-spacing: 0.08em; font-variant-numeric: lining-nums tabular-nums; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); }
.ly--immersive .im-gal__tile--main .im-gal__idx { font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1.125rem); right: clamp(76px, 7vw, 110px); }
.ly--immersive .im-gal__bar { flex: 1 1 auto; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.ly--immersive .im-gal__bar i { display: block; height: 100%; background: #fff; transition: width 0.35s var(--ease); }
.ly--immersive .im-gal__zoom { position: absolute; right: clamp(12px, 1.4vw, 24px); bottom: clamp(12px, 1.4vw, 24px); display: grid; place-items: center; width: clamp(40px, 3.6vw, 56px); height: clamp(40px, 3.6vw, 56px); border: 1.5px solid var(--im-gold, var(--photo-accent, #D5A85C)); border-radius: 50%; background: rgba(12, 11, 10, 0.4); color: var(--im-gold, var(--photo-accent, #D5A85C)); font-size: clamp(1rem, 0.9rem + 0.4vw, 1.375rem); }
.ly--immersive .im-gal__tile .sx-tag { z-index: 1; top: clamp(10px, 1.2vw, 18px); right: auto; bottom: auto; left: clamp(12px, 1.4vw, 22px); }
@media (max-width: 991.98px) {
    .ly--immersive .im-gal__grid { height: clamp(300px, 50vw, 480px); }
}
@media (max-width: 767.98px) {
    .ly--immersive .im-gal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; height: auto; }
    .ly--immersive .im-gal__tile { aspect-ratio: 16 / 10; }
    .ly--immersive .im-gal__tile--main { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
    .ly--immersive .im-gal__grid--n2 .im-gal__tile--side { grid-column: 1 / -1; }
    .ly--immersive .im-gal__grid--n1 { grid-template-columns: minmax(0, 1fr); }
    .ly--immersive .sx-gallery--strip::before, .ly--immersive .sx-gallery--strip::after { display: none; }
    .ly--immersive .im-gal__idx { gap: 10px; }
    .ly--immersive .im-gal__tile--main .im-gal__idx { right: 64px; }
}
@media (prefers-reduced-motion: reduce) {
    .ly--immersive .im-gal__grid, .ly--immersive .im-gal__tile img, .ly--immersive .im-gal__arrow, .ly--immersive .im-gal__bar i { transition: none; }
    .ly--immersive .im-gal__tile:hover img { transform: none; }
}

/* =========================================================
   IMMERSIVE CONFIGURATIONS (round 194, reference: frosted navy/blue card) + PROPERTY SPECIFICATIONS (round 97, still gold, unchanged below)
   One wide frosted-glass card per configuration: the saved photo, strongly blurred, with the BHK badge (navy pill) sharp over its corner |
   carpet area | built-up area (soft blue icon square, caps label, the value blurred - masked server-side first, see PropertyTheme::maskArea()
   - "sq. ft." sharp) | blue button, thin blue dividers. --cf-btn / --cf-btn-ink come from the property's button colour (set in the Blade
   partial), everything else derives from --cf-btn so one accent drives the whole card; --cf-navy is a darker shade of it for the badge.
   ========================================================= */
.ly--immersive .im-cfg {
    --cf-navy: color-mix(in srgb, var(--cf-btn, #3B6CA6) 55%, #0A1626);
    --cf-line: color-mix(in srgb, var(--cf-btn, #3B6CA6) 26%, transparent);
    --cf-ic-bg: color-mix(in srgb, var(--cf-btn, #3B6CA6) 11%, #fff);
    --cf-label: color-mix(in srgb, var(--cf-btn, #3B6CA6) 82%, #0F1E33);
    position: relative; isolation: isolate; overflow: hidden;
}
.ly--immersive .im-cfg__head { display: grid; justify-items: start; gap: 6px; margin: 0 0 clamp(18px, 2.2vw, 30px); }
.ly--immersive .im-cfg__eyebrow { display: flex; align-items: center; gap: 16px; margin: 0; color: var(--ib-gold); font: 600 clamp(0.6875rem, 0.65rem + 0.2vw, 0.8125rem)/1.2 var(--f); letter-spacing: 0.3em; text-transform: uppercase; }
.ly--immersive .im-cfg__eyebrow span { width: clamp(28px, 3vw, 44px); height: 1.5px; background: var(--ib-gold); }
/* the Configurations eyebrow only - Specifications shares .im-cfg__head/.im-cfg__eyebrow above and keeps the gold default */
.ly--immersive .im-cfg__eyebrow.im-cfg__eyebrow--accent { color: var(--cf-btn); }
.ly--immersive .im-cfg__eyebrow--accent span { background: var(--cf-btn); }
.ly--immersive .im-cfg__head .sx-title { margin: 0; }
.ly--immersive .im-cfg__list { display: grid; gap: clamp(16px, 1.8vw, 26px); }
.ly--immersive .im-cfg__card { display: flex; align-items: stretch; gap: clamp(16px, 2vw, 30px); padding: clamp(14px, 1.6vw, 22px); border: 1px solid color-mix(in srgb, var(--cf-btn) 18%, #DCE6F2); border-radius: clamp(22px, 2.4vw, 32px); background: linear-gradient(135deg, color-mix(in srgb, #fff 90%, var(--cf-btn)), color-mix(in srgb, #fff 80%, var(--cf-btn))); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 20px 44px -24px color-mix(in srgb, var(--cf-navy) 35%, transparent); }
.ly--immersive .im-cfg__media { position: relative; flex: 1.1 1 0; align-self: stretch; min-width: 0; min-height: clamp(170px, 15vw, 230px); isolation: isolate; overflow: hidden; border-radius: clamp(14px, 1.6vw, 22px); background: var(--cf-ic-bg); }
.ly--immersive .im-cfg__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(16px); transform: scale(1.18); }
.ly--immersive .im-cfg__badge { position: absolute; z-index: 1; left: clamp(10px, 1.2vw, 18px); top: clamp(10px, 1.2vw, 18px); padding: 8px 18px; border-radius: 999px; background: var(--cf-navy); color: #fff; font: 600 clamp(0.875rem, 0.84rem + 0.15vw, 1rem)/1.2 var(--f); white-space: nowrap; box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--cf-navy) 70%, transparent); }
.ly--immersive .im-cfg__metrics { display: flex; flex: 1.7 1 0; margin: 0; min-width: 0; }
.ly--immersive .im-cfg__cell { position: relative; flex: 1 1 0; display: grid; justify-items: center; align-content: center; gap: 6px; min-width: 0; padding: clamp(10px, 1.2vw, 22px) clamp(8px, 1.4vw, 24px); text-align: center; }
.ly--immersive .im-cfg__cell::before, .ly--immersive .im-cfg__go::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: var(--cf-line); }
.ly--immersive .im-cfg__ic { display: grid; place-items: center; width: clamp(42px, 3.6vw, 56px); height: clamp(42px, 3.6vw, 56px); margin-bottom: clamp(4px, 0.6vw, 8px); border-radius: clamp(10px, 1vw, 14px); background: var(--cf-ic-bg); color: var(--cf-btn); font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem); }
.ly--immersive .im-cfg__cell dt { margin: 0; color: var(--cf-label); font: 600 clamp(0.6875rem, 0.65rem + 0.15vw, 0.8125rem)/1.2 var(--f); letter-spacing: 0.2em; text-transform: uppercase; }
.ly--immersive .im-cfg__cell dd { display: grid; justify-items: center; gap: 2px; margin: 0; }
.ly--immersive .im-cfg__val { color: var(--cf-navy); font: 700 clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem)/1.1 var(--f); letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
/* the area figure is already a masked placeholder rendered by the server (PropertyTheme::maskArea) - this blur is purely the reference's
   visual treatment on top of that, not what hides the real number */
.ly--immersive .im-cfg__val--blur { filter: blur(4px); }
.ly--immersive .im-cfg__unit { color: var(--mute); font: 400 clamp(0.875rem, 0.82rem + 0.2vw, 1rem)/1.3 var(--f); }
.ly--immersive .im-cfg__go { position: relative; flex: 0 0 auto; display: grid; align-content: center; padding: 10px clamp(16px, 2vw, 36px); }
.ly--immersive .im-cfg__btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: clamp(52px, 4.2vw, 62px); padding: 0 clamp(22px, 2.2vw, 34px); border-radius: clamp(10px, 1vw, 14px); background: var(--cf-btn); color: var(--cf-btn-ink); font: 500 clamp(0.9375rem, 0.88rem + 0.2vw, 1.0625rem)/1.2 var(--f); text-decoration: none; white-space: nowrap; box-shadow: 0 14px 26px -10px color-mix(in srgb, var(--cf-btn) 55%, transparent); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ly--immersive .im-cfg__btn i { font-size: 1.2em; line-height: 1; transition: transform 0.25s var(--ease); }
.ly--immersive .im-cfg__btn:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -10px color-mix(in srgb, var(--cf-btn) 60%, transparent); }
.ly--immersive .im-cfg__btn:hover i { transform: translateX(4px); }
.ly--immersive .im-cfg__btn:focus-visible { outline: 2px solid var(--cf-navy); outline-offset: 3px; }
.ly--immersive .im-spec { margin-top: clamp(32px, 4vw, 60px); }
.ly--immersive .im-spec--first { margin-top: 0; }
.ly--immersive .im-spec__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 16px) clamp(12px, 1.4vw, 20px); margin: 0; }
.ly--immersive .im-spec__item { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); min-width: 0; padding: clamp(12px, 1.3vw, 18px) clamp(14px, 1.8vw, 26px); border: 1px solid color-mix(in srgb, var(--ib-gold) 24%, transparent); border-radius: clamp(12px, 1.2vw, 18px); background: color-mix(in srgb, var(--card) 86%, transparent); }
.ly--immersive .im-spec__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ly--immersive .im-spec__ic { flex: none; display: grid; place-items: center; width: clamp(44px, 4vw, 58px); height: clamp(44px, 4vw, 58px); border-radius: 50%; background: color-mix(in srgb, var(--ib-gold) 12%, var(--card)); color: var(--ib-gold); font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem); }
.ly--immersive .im-spec__sep { flex: none; align-self: stretch; width: 1px; margin-block: 6px; background: color-mix(in srgb, var(--ib-gold) 36%, transparent); }
.ly--immersive .im-spec__txt { min-width: 0; }
.ly--immersive .im-spec__txt dt { margin: 0 0 3px; color: var(--ib-gold); font: 600 clamp(0.6875rem, 0.65rem + 0.15vw, 0.8125rem)/1.2 var(--f); letter-spacing: 0.2em; text-transform: uppercase; overflow-wrap: anywhere; }
.ly--immersive .im-spec__txt dd { margin: 0; color: var(--ink); font: 400 clamp(0.9375rem, 0.88rem + 0.25vw, 1.125rem)/1.45 var(--f); overflow-wrap: anywhere; }
@media (max-width: 1099.98px) {
    .ly--immersive .im-cfg__card { flex-wrap: wrap; }
    .ly--immersive .im-cfg__media { flex: 1 1 100%; min-height: clamp(150px, 30vw, 220px); }
    .ly--immersive .im-cfg__metrics { flex: 1 1 100%; }
    .ly--immersive .im-cfg__metrics .im-cfg__cell:first-child::before { display: none; }
    .ly--immersive .im-cfg__go { flex: 0 0 100%; padding: 8px; }
    .ly--immersive .im-cfg__go::before { display: none; }
    .ly--immersive .im-cfg__btn { width: 100%; }
}
@media (max-width: 767.98px) {
    .ly--immersive .im-spec__grid { grid-template-columns: minmax(0, 1fr); }
    .ly--immersive .im-spec__item:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 599.98px) {
    .ly--immersive .im-cfg__metrics { flex: 1 1 100%; flex-direction: column; }
    .ly--immersive .im-cfg__cell { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; column-gap: 16px; padding: 14px 8px; text-align: left; }
    .ly--immersive .im-cfg__cell + .im-cfg__cell { border-top: 1px solid var(--cf-line); }
    .ly--immersive .im-cfg__cell::before { display: none; }
    .ly--immersive .im-cfg__ic { grid-row: 1 / 3; align-self: center; margin: 0; }
    .ly--immersive .im-cfg__cell dt { align-self: end; }
    .ly--immersive .im-cfg__cell dd { justify-items: start; grid-auto-flow: column; align-items: baseline; justify-content: start; gap: 8px; align-self: start; }
    .ly--immersive .im-spec__sep { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ly--immersive .im-cfg__btn, .ly--immersive .im-cfg__btn i { transition: none; }
    .ly--immersive .im-cfg__btn:hover, .ly--immersive .im-cfg__btn:hover i { transform: none; }
}

/* =========================================================
   IMMERSIVE CONFIGURATIONS + SPECIFICATIONS: compact pass (round 99) - tighter section padding, shorter cards, smaller icons and values, closer
   specification cards; small gold labels and eyebrows use --ib-gold-text (4.5:1 on the card surface, set from the theme on custom colours).
   ========================================================= */
.ly--immersive .im-body { --ib-gold-text: var(--ib-gold); }
.ly--immersive .im-cfg__eyebrow, .ly--immersive .im-gal__eyebrow, .ly--immersive .im-spec__txt dt, .ly--immersive .im-body .sx-sub { color: var(--ib-gold-text); }
.ly--immersive .im-body .im-cfg.ly-sec { padding-block: clamp(28px, 3.2vw, 48px); }
.ly--immersive .im-cfg__head { gap: 4px; margin-bottom: clamp(12px, 1.4vw, 20px); }
.ly--immersive .im-cfg__list { gap: clamp(8px, 1vw, 14px); }
.ly--immersive .im-cfg__card { padding: clamp(10px, 1.1vw, 16px); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--cf-navy) 32%, transparent); }
.ly--immersive .im-cfg__media { min-height: clamp(150px, 13vw, 200px); }
.ly--immersive .im-cfg__cell { gap: 2px; padding: clamp(8px, 1vw, 14px) clamp(8px, 1.2vw, 20px); }
.ly--immersive .im-cfg__ic { width: clamp(36px, 3vw, 46px); height: clamp(36px, 3vw, 46px); margin-bottom: 4px; border-radius: 12px; font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.375rem); }
.ly--immersive .im-cfg__cell dt { font-size: 0.6875rem; letter-spacing: 0.18em; }
.ly--immersive .im-cfg__val { font-size: clamp(1.375rem, 1rem + 1.1vw, 2rem); }
.ly--immersive .im-cfg__unit { font-size: clamp(0.8125rem, 0.78rem + 0.12vw, 0.9375rem); line-height: 1.1; }
.ly--immersive .im-cfg__go { padding: 8px clamp(12px, 1.6vw, 28px); }
.ly--immersive .im-cfg__btn { min-height: clamp(44px, 3.4vw, 52px); padding: 0 clamp(18px, 1.8vw, 26px); font-size: clamp(0.875rem, 0.84rem + 0.15vw, 1rem); }
.ly--immersive .im-spec { margin-top: clamp(20px, 2.4vw, 34px); }
.ly--immersive .im-spec__grid { gap: clamp(6px, 0.7vw, 10px) clamp(10px, 1.1vw, 16px); }
.ly--immersive .im-spec__item { gap: clamp(10px, 1.1vw, 16px); padding: clamp(8px, 0.9vw, 12px) clamp(12px, 1.4vw, 20px); border-radius: clamp(10px, 1vw, 14px); }
.ly--immersive .im-spec__ic { width: clamp(36px, 3.2vw, 46px); height: clamp(36px, 3.2vw, 46px); font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem); }
.ly--immersive .im-spec__sep { margin-block: 2px; }
.ly--immersive .im-spec__txt dt { margin-bottom: 1px; font-size: 0.6875rem; letter-spacing: 0.18em; }
.ly--immersive .im-spec__txt dd { font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem); line-height: 1.35; }
@media (max-width: 1099.98px) {
    .ly--immersive .im-cfg__go { padding: 6px; }
}
@media (max-width: 599.98px) {
    .ly--immersive .im-cfg__cell { padding: 10px 6px; }
}

/* =========================================================
   IMMERSIVE PROJECT PROGRESS + RERA (round 100, reference: Bayleaf)
   Progress: deep navy band (#0B1D35 > #142C4A), serif title + "N updates" on the left, a construction photograph blended into the right (luminosity
   blend, navy mask, faint oversized circles), the updates as translucent navy cards in a row - ring marker + dashed line above, pale-blue serif date,
   white title, muted description. Phones: one column, one continuous dashed line.
   RERA: white band, thin blue rule, serif RERA, "Registered with MahaRERA", faint blueprint sketch (inline SVG), and a white card per registration
   (QR in a bordered square | divider | label, bold navy number, underlined verify link). Fixed palette of the design (variables below).
   ========================================================= */
.ly--immersive .im-pg, .ly--immersive .im-rr { --pg-navy: #0B1D35; --pg-navy2: #142C4A; --pg-accent: #7EA8E8; --pg-pale: color-mix(in srgb, var(--pg-accent) 62%, #fff); --pg-text: #fff; --pg-muted: #B6C6DC; --rr-bg: #fff; --rr-link: #2F5DA8; --pg-line: #DCE5F0; --pg-body: #6F7784; --pg-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif; }
.ly--immersive .im-pg { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(44px, 5.6vw, 92px); background: var(--pg-navy); color: var(--pg-text); }
.ly--immersive .im-pg__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ly--immersive .im-pg__bg img { position: absolute; top: 0; right: 0; bottom: 0; width: 56%; height: 100%; object-fit: cover; object-position: 60% 40%; mix-blend-mode: luminosity; opacity: 0.55; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); }
.ly--immersive .im-pg__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--pg-navy) 0%, color-mix(in srgb, var(--pg-navy) 72%, transparent) 38%, transparent 82%); }
.ly--immersive .im-pg__ring { position: absolute; z-index: 1; border: 1px solid color-mix(in srgb, var(--pg-accent) 20%, transparent); border-radius: 50%; }
.ly--immersive .im-pg__ring--a { right: -14%; top: -38%; width: 62vw; max-width: 1100px; aspect-ratio: 1; }
.ly--immersive .im-pg__ring--b { right: 2%; top: -12%; width: 38vw; max-width: 700px; aspect-ratio: 1; border-color: color-mix(in srgb, var(--pg-accent) 13%, transparent); }
.ly--immersive .im-pg__wrap { position: relative; z-index: 2; }
.ly--immersive .im-pg__head { display: grid; justify-items: start; gap: 6px; margin: 0 0 clamp(36px, 5vw, 84px); }
.ly--immersive .im-pg__rule { width: clamp(36px, 3.4vw, 52px); height: 1.5px; margin-bottom: 8px; background: var(--pg-accent); }
.ly--immersive .im-pg__title { margin: 0; color: var(--pg-text); font: 500 clamp(2.25rem, 1.2rem + 3.4vw, 4.25rem)/1.05 var(--pg-serif); letter-spacing: -0.015em; text-wrap: balance; }
.ly--immersive .im-pg__count { margin: 0; color: var(--pg-muted); font: 400 clamp(0.875rem, 0.82rem + 0.2vw, 1rem)/1.4 var(--f); letter-spacing: 0.02em; }
.ly--immersive .im-pg__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(14px, 2vw, 32px); max-width: min(100%, 1180px); margin: 0; padding: 0; list-style: none; }
.ly--immersive .im-pg__item { position: relative; padding: 0 0 0 clamp(26px, 2.6vw, 40px); min-width: 0; }
.ly--immersive .im-pg__dot { position: absolute; left: 0; top: 0; z-index: 1; width: 24px; height: 24px; border: 2px solid var(--pg-accent); border-radius: 50%; background: var(--pg-navy); box-shadow: 0 0 0 5px color-mix(in srgb, var(--pg-accent) 16%, transparent); }
.ly--immersive .im-pg__dot::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--pg-text); }
.ly--immersive .im-pg__item::before { content: ""; position: absolute; left: 11px; top: 30px; bottom: 0; border-left: 1.5px dashed color-mix(in srgb, var(--pg-accent) 55%, transparent); }
.ly--immersive .im-pg__card { margin-top: clamp(20px, 2.4vw, 32px); padding: clamp(18px, 2vw, 28px); border: 1px solid color-mix(in srgb, var(--pg-accent) 26%, transparent); border-radius: clamp(12px, 1.2vw, 18px); background: color-mix(in srgb, var(--pg-navy2) 62%, transparent); box-shadow: 0 14px 34px rgba(3, 10, 22, 0.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ly--immersive .im-pg__date { display: block; color: var(--pg-pale); font: 500 clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem)/1.15 var(--pg-serif); letter-spacing: -0.01em; }
.ly--immersive .im-pg__bar { display: block; width: 36px; height: 1.5px; margin: clamp(10px, 1.2vw, 16px) 0; background: var(--pg-text); opacity: 0.85; }
.ly--immersive .im-pg__ttl { margin: 0 0 8px; color: var(--pg-text); font: 600 clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem)/1.3 var(--f); }
.ly--immersive .im-pg__desc { margin: 0; color: var(--pg-muted); font: 400 clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem)/1.6 var(--f); }
.ly--immersive .im-pg__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ly--immersive .im-pg__thumbs img { width: 64px; height: 46px; object-fit: cover; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--pg-accent) 30%, transparent); }
@media (max-width: 767.98px) {
    .ly--immersive .im-pg__list { display: block; max-width: none; }
    .ly--immersive .im-pg__item { padding: 0 0 clamp(12px, 3vw, 18px) 34px; }
    .ly--immersive .im-pg__item:last-child { padding-bottom: 0; }
    .ly--immersive .im-pg__item:last-child::before { display: none; }
    .ly--immersive .im-pg__card { margin-top: 0; margin-left: 4px; }
    .ly--immersive .im-pg__dot { top: 18px; }
    .ly--immersive .im-pg__item::before { top: 18px; }
    .ly--immersive .im-pg__bg img { width: 100%; opacity: 0.28; -webkit-mask-image: none; mask-image: none; }
    .ly--immersive .im-pg__ring--b { display: none; }
}

.ly--immersive .im-rr { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(40px, 5vw, 84px) clamp(96px, 11vw, 190px); background: var(--rr-bg); color: var(--pg-body); }
.ly--immersive .im-rr__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: center; gap: clamp(24px, 4vw, 72px); }
.ly--immersive .im-rr__intro { display: grid; justify-items: start; gap: 8px; }
.ly--immersive .im-rr__rule { width: clamp(36px, 3.4vw, 52px); height: 1.5px; margin-bottom: 8px; background: var(--pg-accent); }
.ly--immersive .im-rr__title { margin: 0; color: var(--pg-navy); font: 600 clamp(3rem, 1.8rem + 4.6vw, 6rem)/1 var(--pg-serif); letter-spacing: -0.02em; }
.ly--immersive .im-rr__lead { margin: 0; color: var(--pg-body); font: 400 clamp(1rem, 0.9rem + 0.5vw, 1.375rem)/1.4 var(--f); }
.ly--immersive .im-rr__cards { display: grid; gap: clamp(10px, 1.2vw, 16px); }
.ly--immersive .im-rr__card { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); padding: clamp(16px, 2vw, 28px) clamp(16px, 2.4vw, 36px); border: 1px solid var(--pg-line); border-radius: clamp(14px, 1.4vw, 20px); background: var(--rr-card, var(--rr-bg)); box-shadow: 0 12px 34px rgba(11, 29, 53, 0.07); }
.ly--immersive .im-rr__qr { flex: none; display: grid; place-items: center; width: clamp(104px, 9vw, 136px); height: clamp(104px, 9vw, 136px); border: 1px solid var(--pg-line); border-radius: 14px; background: var(--rr-card, var(--rr-bg)); }
.ly--immersive .im-rr__qr img, .ly--immersive .im-rr__qr canvas { display: block; width: 84%; height: 84%; }
.ly--immersive .im-rr__sep { flex: none; align-self: stretch; width: 1px; background: var(--pg-line); }
.ly--immersive .im-rr__info { display: grid; gap: 4px; min-width: 0; }
.ly--immersive .im-rr__info small { color: var(--pg-body); font: 400 clamp(0.875rem, 0.82rem + 0.2vw, 1rem)/1.3 var(--f); }
.ly--immersive .im-rr__info strong { color: var(--pg-navy); font: 700 clamp(1.125rem, 0.95rem + 0.8vw, 1.625rem)/1.25 var(--f); letter-spacing: 0.01em; overflow-wrap: anywhere; }
.ly--immersive .im-rr__verify { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding-bottom: 3px; border-bottom: 2px solid var(--rr-link); color: var(--rr-link); font: 600 clamp(0.875rem, 0.84rem + 0.15vw, 1rem)/1.3 var(--f); text-decoration: none; }
.ly--immersive .im-rr__verify:hover { color: var(--pg-navy); border-color: var(--pg-navy); }
.ly--immersive .im-rr__verify:focus-visible { outline: 2px solid var(--rr-link); outline-offset: 4px; }
.ly--immersive .im-rr__docs { margin-top: clamp(24px, 3vw, 44px); }
.ly--immersive .im-rr__plan { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: clamp(110px, 13vw, 210px); opacity: 0.1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 240' fill='none' stroke='%230B1D35' stroke-width='1.2'%3E%3Cpath d='M0 238H1000M40 238V110L110 90V238M110 90L170 110V238M60 130H100M60 150H100M60 170H100M60 190H100M60 210H100'/%3E%3Cpath d='M210 238V70H300V238M210 70L255 50L300 70M225 100H285M225 125H285M225 150H285M225 175H285M225 200H285M255 70V238'/%3E%3Cpath d='M350 238V130H430V238M350 130H430M370 130V238M390 130V238M410 130V238M350 160H430M350 190H430M350 215H430'/%3E%3Cpath d='M520 238L900 160M600 238L1000 200M470 40L880 120'/%3E%3C/svg%3E") left bottom / auto 100% repeat-x; pointer-events: none; }
@media (max-width: 991.98px) {
    .ly--immersive .im-rr__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479.98px) {
    .ly--immersive .im-rr__card { flex-direction: column; align-items: flex-start; }
    .ly--immersive .im-rr__sep { align-self: stretch; width: auto; height: 1px; }
}

/* =========================================================
   IMMERSIVE FAQ (round 101, reference: Bayleaf navy "Questions")
   Navy band (#0B1D35 > #142C4A). Left: thin light-blue rule, serif "Questions", one supporting line, a faint line-art tower sketch (inline SVG)
   over a big low-opacity circle. Right: the property's saved FAQs as rounded translucent cards - round badge | divider | serif question | round
   + / - control; the open card is brighter with its answer under a hairline. Answers collapse only once the script adds .is-js. Fixed palette.
   ========================================================= */
.ly--immersive .im-fq { --fq-navy: #0B1D35; --fq-navy2: #142C4A; --fq-open: #203F63; --fq-line: #385472; --fq-accent: var(--photo-accent, #8FB8EA); --fq-text: #F7F8FC; --fq-muted: #B3C5DA; --fq-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif; --fq-badge: clamp(38px, 3.3vw, 48px); --fq-gap: clamp(12px, 1.5vw, 22px); --fq-pad: clamp(14px, 1.6vw, 24px); position: relative; isolation: isolate; overflow: hidden; min-height: clamp(520px, 46vw, 700px); background: var(--fq-navy); color: var(--fq-text); }
.ly--immersive .im-body .im-fq { padding-block: clamp(44px, 5.4vw, 88px); }
.ly--immersive .im-fq__art { position: absolute; z-index: 0; left: 0; bottom: 0; width: min(50%, 860px); height: 100%; pointer-events: none; }
.ly--immersive .im-fq__circle { position: absolute; left: 12%; bottom: -14%; width: 74%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--fq-accent) 14%, transparent), color-mix(in srgb, var(--fq-accent) 5%, transparent) 78%, color-mix(in srgb, var(--fq-accent) 10%, transparent) 100%); }
.ly--immersive .im-fq__towers { position: absolute; left: 0; bottom: 0; width: 100%; height: min(74%, calc(100% - 340px)); opacity: 0.5; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 560' fill='none' stroke='%238FB8EA' stroke-width='1' stroke-linecap='round'%3E%3Cdefs%3E%3Cpattern id='w' width='18' height='13' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 .5H18M.5 0V13' stroke-opacity='.55'/%3E%3C/pattern%3E%3Cpattern id='f' width='34' height='13' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 .5H34' stroke-opacity='.5'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M24 150V520' stroke-opacity='.5'/%3E%3Cpath d='M0 520H760' stroke-opacity='.6'/%3E%3Cpath d='M0 532H760M0 544H760' stroke-opacity='.2'/%3E%3Cg stroke-opacity='.85'%3E%3Crect x='150' y='190' width='86' height='330' fill='url(%23w)'/%3E%3Cpath d='M150 190H236M156 184H230'/%3E%3Crect x='236' y='70' width='102' height='450' fill='url(%23w)'/%3E%3Cpath d='M236 70H338M244 62H330M262 50H312M287 24V50'/%3E%3Cpath d='M270 70V520M304 70V520' stroke-opacity='.4'/%3E%3Crect x='338' y='120' width='100' height='400' fill='url(%23w)'/%3E%3Cpath d='M338 120H438M346 112H430'/%3E%3Crect x='438' y='235' width='78' height='285' fill='url(%23w)'/%3E%3Cpath d='M438 235H516'/%3E%3Crect x='516' y='300' width='46' height='220' fill='url(%23f)' stroke-opacity='.45'/%3E%3Crect x='580' y='330' width='30' height='190' fill='url(%23f)' stroke-opacity='.4'/%3E%3Crect x='624' y='290' width='22' height='230' fill='url(%23f)' stroke-opacity='.35'/%3E%3C/g%3E%3Cpath d='M60 466H590V520H60Z' fill='url(%23f)' stroke-opacity='.85'/%3E%3Cpath d='M60 466H590M44 458H606M80 466V520M150 466V520M236 466V520M338 466V520M438 466V520M516 466V520' stroke-opacity='.7'/%3E%3Cg stroke-opacity='.45'%3E%3Ccircle cx='56' cy='430' r='26'/%3E%3Ccircle cx='84' cy='446' r='20'/%3E%3Ccircle cx='34' cy='458' r='18'/%3E%3Cpath d='M56 456V520M84 466V520'/%3E%3Ccircle cx='612' cy='452' r='22'/%3E%3Ccircle cx='640' cy='466' r='18'/%3E%3Cpath d='M612 474V520'/%3E%3C/g%3E%3C/svg%3E") left bottom / contain no-repeat; }
.ly--immersive .im-fq__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(28px, 5vw, 96px); }
.ly--immersive .im-fq__intro { display: grid; justify-items: start; gap: clamp(8px, 1vw, 14px); max-width: 520px; }
.ly--immersive .im-fq__rule { width: clamp(40px, 4vw, 64px); height: 1.5px; margin-bottom: 4px; background: var(--fq-accent); }
.ly--immersive .im-fq__title { margin: 0; color: var(--fq-text); font: 500 clamp(2.5rem, 1.3rem + 3.6vw, 4.5rem)/1.05 var(--fq-serif); letter-spacing: -0.015em; }
.ly--immersive .im-fq__lead { max-width: 30ch; margin: 0; color: var(--fq-muted); font: 400 clamp(1rem, 0.92rem + 0.4vw, 1.375rem)/1.45 var(--f); }
.ly--immersive .im-fq__list { display: grid; gap: clamp(8px, 0.9vw, 12px); min-width: 0; }
.ly--immersive .im-fq__item { overflow: hidden; border: 1px solid var(--fq-line); border-radius: clamp(12px, 1.2vw, 16px); background: linear-gradient(135deg, color-mix(in srgb, var(--fq-open) 34%, transparent), color-mix(in srgb, var(--fq-navy2) 52%, transparent)); box-shadow: 0 10px 26px rgba(3, 10, 22, 0.22); transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease); }
.ly--immersive .im-fq__item:hover { border-color: color-mix(in srgb, var(--fq-accent) 45%, var(--fq-line)); }
.ly--immersive .im-fq__item.is-open { border-color: color-mix(in srgb, var(--fq-accent) 55%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--fq-open) 96%, transparent), color-mix(in srgb, var(--fq-open) 68%, transparent)); }
.ly--immersive .im-fq__q { margin: 0; }
.ly--immersive .im-fq__q button { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--fq-gap); width: 100%; min-height: clamp(62px, 5.2vw, 78px); padding: 0 var(--fq-pad); border: 0; background: transparent; color: var(--fq-text); text-align: left; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ly--immersive .im-fq__q button:focus-visible { outline: 2px solid var(--fq-accent); outline-offset: -4px; border-radius: clamp(12px, 1.2vw, 16px); }
.ly--immersive .im-fq__n { display: grid; place-items: center; width: var(--fq-badge); height: var(--fq-badge); border: 1px solid color-mix(in srgb, var(--fq-accent) 50%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--fq-accent) 16%, transparent); color: var(--fq-text); font: 500 clamp(0.875rem, 0.8rem + 0.2vw, 1.0625rem)/1 var(--fq-serif); font-variant-numeric: lining-nums; }
.ly--immersive .im-fq__sep { align-self: stretch; margin-block: clamp(12px, 1.2vw, 16px); background: color-mix(in srgb, var(--fq-accent) 28%, transparent); }
.ly--immersive .im-fq__t { min-width: 0; padding-block: clamp(12px, 1.2vw, 16px); font: 500 clamp(1.0625rem, 0.95rem + 0.55vw, 1.5rem)/1.3 var(--fq-serif); letter-spacing: -0.005em; overflow-wrap: anywhere; }
.ly--immersive .im-fq__ctl { position: relative; width: clamp(34px, 3vw, 42px); height: clamp(34px, 3vw, 42px); border: 1.5px solid color-mix(in srgb, var(--fq-accent) 80%, transparent); border-radius: 50%; }
.ly--immersive .im-fq__ctl::before, .ly--immersive .im-fq__ctl::after { content: ""; position: absolute; left: 50%; top: 50%; width: 42%; height: 1.5px; margin: -0.75px 0 0 -21%; border-radius: 1px; background: var(--fq-text); transition: transform 0.35s var(--ease); }
.ly--immersive .im-fq__ctl::after { transform: rotate(90deg); }
.ly--immersive .im-fq__item.is-open .im-fq__ctl::after { transform: rotate(0deg); }
.ly--immersive .im-fq__a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.4s var(--ease), opacity 0.3s var(--ease); }
.ly--immersive .im-fq__a > div { min-height: 0; overflow: hidden; }
.ly--immersive .im-fq__a p { margin: 0 var(--fq-pad) clamp(16px, 1.8vw, 24px) var(--fq-pad); padding-top: clamp(12px, 1.3vw, 18px); border-top: 1px solid color-mix(in srgb, var(--fq-accent) 20%, transparent); color: var(--fq-muted); font: 400 clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem)/1.65 var(--f); overflow-wrap: anywhere; }
.ly--immersive .im-fq__a a { color: var(--fq-accent); text-decoration: underline; text-underline-offset: 3px; }
.ly--immersive .im-fq__a a:focus-visible { outline: 2px solid var(--fq-accent); outline-offset: 3px; }
.ly--immersive .im-fq.is-js .im-fq__item:not(.is-open) .im-fq__a { grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows 0.4s var(--ease), opacity 0.2s var(--ease), visibility 0s linear 0.4s; }
@media (max-width: 991.98px) {
    .ly--immersive .im-fq__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 4vw, 32px); }
    .ly--immersive .im-fq__intro { max-width: none; }
    .ly--immersive .im-fq__art { left: auto; right: 0; top: 0; bottom: auto; width: min(78%, 460px); height: clamp(180px, 40vw, 300px); }
    .ly--immersive .im-fq__circle { display: none; }
    .ly--immersive .im-fq__towers { height: 100%; opacity: 0.26; background-position: right top; }
}
@media (max-width: 479.98px) {
    .ly--immersive .im-fq { --fq-badge: 34px; --fq-gap: 10px; --fq-pad: 12px; }
    .ly--immersive .im-fq__ctl { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .ly--immersive .im-fq__item, .ly--immersive .im-fq__a, .ly--immersive .im-fq__ctl::before, .ly--immersive .im-fq__ctl::after { transition: none; }
}

/* =========================================================
   IMMERSIVE AMENITIES (round 141, reference: navy + gold). Dark band. Left: gold line + AMENITIES, serif title, "N thoughtfully designed amenities...".
   Right: category capsules (round icon chip + name + "N amenities"; active = gold with a dark icon chip). Below: cards two per row - round icon with a thin
   gold arc | gold caps label + serif name | divider | round gold arrow (enquiry popup). Default palette navy #0B2239 / #153550, gold #F5C66A; with a custom
   page background (.im-body--themed) the page's own surfaces and accent are used (see the theme-following lines below).
   ========================================================= */
.ly--immersive .im-am {
    --am-bg: #0B2239; --am-surface: #153550; --am-ink: #FFFFFF; --am-body: #C3D0DF; --am-gold: #F5C66A; --am-on-gold: #0B2239; --am-line: rgba(255, 255, 255, 0.08); --am-pill-line: rgba(255, 255, 255, 0.14);
    --am-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;
    position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(60% 90% at 100% 0%, rgba(245, 198, 106, 0.08), transparent 60%), var(--am-bg); color: var(--am-body);
}
.ly--immersive .im-body .im-am { padding-block: var(--cs-y, clamp(32px, 3.8vw, 52px)); }
.ly--immersive .im-am__top { display: grid; grid-template-columns: minmax(240px, 380px) minmax(0, 1fr); align-items: center; gap: clamp(16px, 2.4vw, 40px); margin: 0 0 var(--cs-head, 22px); }
.ly--immersive .im-am__intro { display: grid; justify-items: start; gap: 6px; }
.ly--immersive .im-am__eyebrow { display: flex; align-items: center; gap: 14px; margin: 0; color: var(--am-gold); font: 600 clamp(0.6875rem, 0.65rem + 0.2vw, 0.8125rem)/1.2 var(--f); letter-spacing: 0.3em; text-transform: uppercase; }
.ly--immersive .im-am__eyebrow span { width: clamp(24px, 2.4vw, 36px); height: 1px; background: var(--am-gold); }
.ly--immersive .im-am__title { margin: 0; color: var(--am-ink); font: 700 clamp(2.25rem, 1.3rem + 3vw, 3.75rem)/1.05 var(--am-serif); letter-spacing: -0.015em; }
.ly--immersive .im-am__count { margin: 4px 0 0; max-width: 28ch; color: var(--am-body); font: 400 clamp(0.9375rem, 0.88rem + 0.25vw, 1.125rem)/1.4 var(--f); }
.ly--immersive .im-am__cats { display: flex; align-items: stretch; gap: 10px; min-width: 0; padding-bottom: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.ly--immersive .im-am__cats::-webkit-scrollbar { display: none; }
.ly--immersive .im-am__cat { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px; border: 1px solid var(--am-pill-line); border-radius: 999px; background: color-mix(in srgb, var(--am-ink) 4%, transparent); color: var(--am-ink); text-align: left; cursor: pointer; scroll-snap-align: start; transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ly--immersive .im-am__cat-ic { flex: none; display: grid; place-items: center; width: clamp(40px, 3.4vw, 48px); height: clamp(40px, 3.4vw, 48px); border-radius: 50%; background: transparent; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.ly--immersive .im-am__cat-ic i { font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem); line-height: 1; }
.ly--immersive .im-am__cat-txt { display: grid; gap: 3px; white-space: nowrap; }
.ly--immersive .im-am__cat-name { font: 500 clamp(0.875rem, 0.82rem + 0.2vw, 1rem)/1.2 var(--f); }
.ly--immersive .im-am__cat-n { color: color-mix(in srgb, var(--am-ink) 62%, transparent); font: 400 0.8125rem/1.2 var(--f); font-variant-numeric: lining-nums; }
.ly--immersive .im-am__cat:hover { border-color: color-mix(in srgb, var(--am-gold) 55%, transparent); }
.ly--immersive .im-am__cat.is-active { border-color: transparent; background: var(--am-gold); color: var(--am-on-gold); }
.ly--immersive .im-am__cat.is-active .im-am__cat-ic { background: var(--am-bg); color: var(--am-gold); }
.ly--immersive .im-am__cat.is-active .im-am__cat-n { color: color-mix(in srgb, var(--am-on-gold) 72%, transparent); }
.ly--immersive .im-am__cat:focus-visible { outline: 2px solid var(--am-gold); outline-offset: 3px; }
.ly--immersive .im-am__panel[hidden] { display: none; }
.ly--immersive .im-am__panel { animation: im-am-in 0.4s var(--ease) both; }
@keyframes im-am-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ly--immersive .im-am__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
/* the compound selector (not just .im-am__grid--one) keeps this winning over the column-count breakpoints below regardless of source order */
.ly--immersive .im-am__grid.im-am__grid--one { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1199.98px) {
    .ly--immersive .im-am__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .ly--immersive .im-am__grid { grid-template-columns: minmax(0, 1fr); }
}
.ly--immersive .im-am__card {
    display: grid; grid-template-columns: auto minmax(0, 1fr) 1px auto; align-items: center; column-gap: clamp(14px, 1.8vw, 28px); min-width: 0; min-height: clamp(96px, 8vw, 120px);
    padding: clamp(14px, 1.5vw, 22px) clamp(16px, 2vw, 32px); border: 1px solid var(--am-line); border-radius: clamp(14px, 1.4vw, 20px);
    background: linear-gradient(135deg, color-mix(in srgb, var(--am-surface) 70%, transparent), color-mix(in srgb, var(--am-surface) 38%, transparent));
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.ly--immersive .im-am__card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--am-gold) 45%, transparent); box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.55); }
.ly--immersive .im-am__ic { position: relative; display: grid; place-items: center; width: clamp(56px, 4.8vw, 72px); height: clamp(56px, 4.8vw, 72px); margin: 7px; border-radius: 50%; background: color-mix(in srgb, var(--am-ink) 5%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--am-ink) 14%, transparent); color: var(--am-gold); font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); }
.ly--immersive .im-am__ic::before { content: ""; position: absolute; inset: -6px; border: 2px solid transparent; border-top-color: var(--am-gold); border-right-color: var(--am-gold); border-radius: 50%; transform: rotate(-12deg); opacity: 0.9; }
.ly--immersive .im-am__body { min-width: 0; }
.ly--immersive .im-am__cat-label { margin: 0 0 4px; color: var(--am-gold); font: 600 clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem)/1.2 var(--f); letter-spacing: 0.2em; text-transform: uppercase; overflow-wrap: anywhere; }
.ly--immersive .im-am__body h3 { margin: 0; color: var(--am-ink); font: 700 clamp(1.125rem, 0.95rem + 0.8vw, 1.625rem)/1.2 var(--am-serif); letter-spacing: -0.005em; overflow-wrap: anywhere; }
.ly--immersive .im-am__sep { align-self: stretch; min-height: 44px; margin-block: 4px; background: var(--am-line); }
.ly--immersive .im-am__go { display: grid; place-items: center; width: clamp(40px, 3.4vw, 50px); height: clamp(40px, 3.4vw, 50px); border-radius: 50%; background: var(--am-gold); color: var(--am-on-gold); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.3125rem); text-decoration: none; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), filter 0.25s var(--ease); touch-action: manipulation; }
.ly--immersive .im-am__go:hover { transform: translateX(3px); filter: brightness(1.08); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--am-gold) 70%, transparent); }
.ly--immersive .im-am__go:focus-visible { outline: 2px solid var(--am-ink); outline-offset: 3px; }
/* The card's icon/title/arrow sizing above was tuned for a 2-column card (roughly double this width); at 4 columns the same
   clamp()s (driven by viewport width, not the card's own width) leave too little room for the title and it wraps to one
   word per line. Scale the card down to fit, only at the width where it is actually shown 4-up. */
@media (min-width: 1200px) {
    .ly--immersive .im-am__card { column-gap: 14px; padding: 14px 16px; min-height: 0; }
    .ly--immersive .im-am__ic { width: 44px; height: 44px; margin: 4px; font-size: 1.125rem; }
    .ly--immersive .im-am__cat-label { font-size: 0.625rem; margin-bottom: 3px; }
    .ly--immersive .im-am__body h3 { font-size: 1.0625rem; line-height: 1.25; }
    .ly--immersive .im-am__sep { min-height: 36px; }
    .ly--immersive .im-am__go { width: 36px; height: 36px; font-size: 0.9375rem; }
}
@media (max-width: 991.98px) {
    .ly--immersive .im-am__top { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .ly--immersive .im-am__count { max-width: none; }
    /* the card grid's own column count is handled by the 1199.98px / 767.98px breakpoints above */
}
@media (max-width: 599.98px) {
    .ly--immersive .im-am__cat { padding: 6px 16px 6px 6px; gap: 10px; }
    .ly--immersive .im-am__card { grid-template-columns: auto minmax(0, 1fr) 1px auto; column-gap: 12px; min-height: 0; padding: 12px 14px; }
    .ly--immersive .im-am__ic { width: 48px; height: 48px; margin: 5px; font-size: 1.25rem; }
    .ly--immersive .im-am__ic::before { inset: -5px; }
    .ly--immersive .im-am__go { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .ly--immersive .im-am__panel { animation: none; }
    .ly--immersive .im-am__card, .ly--immersive .im-am__go, .ly--immersive .im-am__cat, .ly--immersive .im-am__cat-ic { transition: none; }
    .ly--immersive .im-am__card:hover, .ly--immersive .im-am__go:hover { transform: none; }
}
/* ---- theme following (round 103): the four fixed-palette Immersive sections (Project progress, RERA, FAQ, Amenities) keep their designed look by
   default and now follow the admin Page Theme: the brand accent / heading / border colours (--photo-accent, --iv-accent, --iv-ink, --iv-line) and, with
   a custom section / alternate background (.im-body--themed), the page's own surfaces (--s-*, --a-*, --ib-gold) ---- */
.ly--immersive .im-pg { --pg-accent: var(--photo-accent, #7EA8E8); }
.ly--immersive .im-rr { --pg-navy: var(--iv-ink, #0B1D35); --pg-line: var(--iv-line, #DCE5F0); --pg-accent: var(--iv-accent, #7EA8E8); --rr-link: var(--iv-accent, #2F5DA8); }
.ly--immersive .im-body--themed .im-pg { --pg-navy: var(--a-bg); --pg-navy2: color-mix(in srgb, var(--a-ink) 8%, var(--a-bg)); --pg-accent: var(--ib-gold); --pg-pale: var(--ib-gold-text); --pg-text: var(--a-ink); --pg-muted: var(--a-mute); }
.ly--immersive .im-body--themed .im-pg__card { background: color-mix(in srgb, var(--a-ink) 8%, transparent); border-color: color-mix(in srgb, var(--a-ink) 20%, transparent); }
.ly--immersive .im-body--themed .im-rr { --rr-bg: var(--bg); --rr-card: var(--card); --pg-navy: var(--ink); --pg-line: var(--line); --pg-body: var(--mute); --pg-accent: var(--ib-gold); --rr-link: var(--ib-gold-text); }
.ly--immersive .im-body--themed .im-fq { --fq-navy: var(--a-bg); --fq-navy2: color-mix(in srgb, var(--a-ink) 6%, var(--a-bg)); --fq-open: color-mix(in srgb, var(--a-ink) 16%, var(--a-bg)); --fq-line: color-mix(in srgb, var(--a-ink) 24%, transparent); --fq-accent: var(--ib-gold-text); --fq-text: var(--a-ink); --fq-muted: var(--a-mute); }
.ly--immersive .im-body--themed .im-am { --am-bg: var(--bg); --am-surface: color-mix(in srgb, var(--ink) 7%, var(--bg)); --am-ink: var(--ink); --am-body: var(--mute); --am-gold: var(--ib-gold-text); --am-on-gold: var(--ib-on-gold-text, #fff); --am-line: var(--line); --am-pill-line: var(--line); }

/* =========================================================
   IMMERSIVE LOCATION & CONNECTIVITY (round 105, reference: warm white "Strategically Located")
   Top: ~40% intro (gold line + LOCATION, serif heading with the place in gold, summary, gold "View on Google Maps") | ~60% live map in a
   rounded 3:2 frame. Below: one soft panel with every saved place - gold line icon, bold time / distance, muted label, thin dividers, up to seven
   per row. Default palette = the design's (#17243A ink, #C69840 gold, #606B7C body, #E8E2D8 line, #F7F5F1 soft); brand colours (--iv-*) and a
   custom background (.im-body--themed) take over when set.
   ========================================================= */
.ly--immersive .im-lc { --lc-ink: var(--iv-ink, #17243A); --lc-gold: var(--iv-accent, #C69840); --lc-gold-text: var(--iv-accent, #A47A24); --lc-body: #606B7C; --lc-line: var(--iv-line, #E8E2D8); --lc-bg: #FDFCFA; --lc-soft: #F7F5F1; --lc-btn: color-mix(in srgb, var(--lc-gold) 84%, #000); --lc-on-btn: #fff; position: relative; background: var(--lc-bg); color: var(--lc-body); }
.ly--immersive .im-body--themed .im-lc { --lc-ink: var(--ink); --lc-gold: var(--ib-gold); --lc-gold-text: var(--ib-gold-text); --lc-body: var(--body); --lc-line: var(--line); --lc-bg: var(--bg); --lc-soft: color-mix(in srgb, var(--ink) 5%, var(--bg)); --lc-btn: var(--ib-gold-text); --lc-on-btn: var(--ib-on-gold-text, #fff); }
.ly--immersive .im-body .im-lc { padding-block: clamp(36px, 4.6vw, 76px); }
.ly--immersive .im-lc__top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); align-items: start; gap: clamp(24px, 4vw, 72px); }
.ly--immersive .im-lc__top--nomap { grid-template-columns: minmax(0, 1fr); }
.ly--immersive .im-lc__intro { display: grid; justify-items: start; gap: clamp(12px, 1.4vw, 22px); min-width: 0; padding-top: clamp(0px, 1.6vw, 28px); }
.ly--immersive .im-lc__eyebrow { display: flex; align-items: center; gap: 16px; margin: 0; color: var(--lc-gold-text); font: 500 clamp(0.75rem, 0.7rem + 0.2vw, 0.9375rem)/1.2 var(--f); letter-spacing: 0.26em; text-transform: uppercase; }
.ly--immersive .im-lc__eyebrow span { width: clamp(28px, 3vw, 44px); height: 1.5px; background: var(--lc-gold); }
.ly--immersive .im-lc__title { margin: 0; color: var(--lc-ink); font: 700 clamp(2.125rem, 1.1rem + 2.7vw, 3.375rem)/1.1 var(--ib-serif, "Playfair Display", Georgia, serif); letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: anywhere; }
.ly--immersive .im-lc__title span { color: var(--lc-gold-text); }
.ly--immersive .im-lc__lead { max-width: 34ch; margin: 0; color: var(--lc-body); font: 400 clamp(1rem, 0.92rem + 0.4vw, 1.375rem)/1.6 var(--f); }
.ly--immersive .im-lc__btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: clamp(52px, 4.4vw, 64px); margin-top: 6px; padding: 0 clamp(24px, 2.6vw, 38px); border-radius: 999px; background: var(--lc-btn); color: var(--lc-on-btn); font: 500 clamp(0.9375rem, 0.88rem + 0.25vw, 1.125rem)/1.2 var(--f); text-decoration: none; box-shadow: 0 10px 24px color-mix(in srgb, var(--lc-btn) 28%, transparent); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ly--immersive .im-lc__btn i { font-size: 1.2em; line-height: 1; transition: transform 0.25s var(--ease); }
.ly--immersive .im-lc__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px color-mix(in srgb, var(--lc-btn) 36%, transparent); }
.ly--immersive .im-lc__btn:hover i { transform: translateX(4px); }
.ly--immersive .im-lc__btn:focus-visible { outline: 2px solid var(--lc-ink); outline-offset: 3px; }
.ly--immersive .im-lc__map { position: relative; min-width: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 20px; background: var(--lc-soft); box-shadow: 0 14px 38px color-mix(in srgb, var(--lc-ink) 12%, transparent); }
.ly--immersive .im-lc__map iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.ly--immersive .im-lc__panel { margin-top: clamp(20px, 2.6vw, 40px); padding: clamp(18px, 2.2vw, 34px) clamp(14px, 2vw, 32px) clamp(12px, 1.6vw, 22px); border-radius: clamp(14px, 1.6vw, 24px); background: var(--lc-soft); }
.ly--immersive .im-lc__list { display: grid; grid-template-columns: repeat(var(--lc-cols, 7), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ly--immersive .im-lc__item { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 4px clamp(10px, 1.4vw, 24px); border-left: 1px solid var(--lc-line); }
.ly--immersive .im-lc__item:nth-child(7n+1) { border-left: 0; padding-left: 0; }
.ly--immersive .im-lc__item i { margin-bottom: 8px; color: var(--lc-gold); font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.125rem); line-height: 1; }
.ly--immersive .im-lc__item strong { color: var(--lc-ink); font: 700 clamp(1.125rem, 1rem + 0.5vw, 1.5rem)/1.15 var(--f); font-variant-numeric: lining-nums; }
.ly--immersive .im-lc__item span { color: var(--lc-body); font: 400 clamp(0.875rem, 0.82rem + 0.2vw, 1.0625rem)/1.4 var(--f); overflow-wrap: anywhere; }
.ly--immersive .im-lc__note { margin: clamp(12px, 1.4vw, 20px) 0 0; color: var(--lc-body); font: 400 0.8125rem/1.4 var(--f); opacity: 0.85; }
@media (max-width: 1199.98px) {
    .ly--immersive .im-lc__list { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: clamp(16px, 2vw, 24px); }
    .ly--immersive .im-lc__item:nth-child(7n+1) { border-left: 1px solid var(--lc-line); padding-left: clamp(10px, 1.4vw, 24px); }
    .ly--immersive .im-lc__item:nth-child(4n+1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 991.98px) {
    .ly--immersive .im-lc__top { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .ly--immersive .im-lc__intro { padding-top: 0; }
    .ly--immersive .im-lc__lead { max-width: 52ch; }
}
@media (max-width: 599.98px) {
    .ly--immersive .im-lc__btn { width: 100%; }
    .ly--immersive .im-lc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
    .ly--immersive .im-lc__item:nth-child(4n+1) { border-left: 1px solid var(--lc-line); padding-left: 14px; }
    .ly--immersive .im-lc__item:nth-child(2n+1) { border-left: 0; padding-left: 0; }
    .ly--immersive .im-lc__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .ly--immersive .im-lc__btn, .ly--immersive .im-lc__btn i { transition: none; }
    .ly--immersive .im-lc__btn:hover, .ly--immersive .im-lc__btn:hover i { transform: none; }
}
/* ============================================================================================================================
   ROUND 107 - AUDIT FIXES
   1) specification lists are <ul><li><dl><dt><dd></dl></li></ul> (valid markup) with the same look as before
   2) Immersive: every band has its own accent pair (-s = section colour, -a = alternate colour), set in immersive.blade.php
   3) small labels on a custom brand icon colour use a text-grade shade (5:1) while icons keep the brand colour itself (3:1)
   ============================================================================================================================ */
.ly--editorial .ed-spec__list, .ly--modern .md-spec__grid, .ly--immersive .im-spec__grid { list-style: none; padding: 0; }
.ly--editorial .ed-spec__item > dl, .ly--modern .md-spec__item > dl, .ly--immersive .im-spec__item > dl { margin: 0; min-width: 0; }

.ly--immersive .im-body--themed .ly-sec--alt { --ib-gold: var(--ib-gold-a); --ib-gold-text: var(--ib-gold-text-a); --ib-on-gold-text: var(--ib-on-gold-text-a); }
.ly--immersive .im-body--themed .im-pg { --pg-accent: var(--ib-gold-a); --pg-pale: var(--ib-gold-text-a); }
.ly--immersive .im-body--themed .im-fq { --fq-accent: var(--ib-gold-text-a); }

.ly .ly-sec { --icon-text: var(--s-icon-text); }
.ly .ly-sec--alt { --icon-text: var(--a-icon-text); }
.ly--editorial .ed-why:not(.ed-why--ivory) .ed-why__eyebrow { color: var(--icon-text, var(--why-gold)); }
.ly--editorial .ed-cfg:not(.ed-cfg--navy) .ed-cfg__eyebrow, .ly--editorial .ed-cfg:not(.ed-cfg--navy) .ed-cfg__label { color: var(--icon-text, var(--cfg-bronze)); }
.ly--editorial .ed-faq:not(.ed-faq--ivory) .ed-faq__eyebrow { color: var(--icon-text, var(--faq-label)); }
.ly--editorial .ed-amen:not(.ed-amen--ivory) .ed-eyebrow { color: var(--icon-text, var(--am-bronze)); }
.ly--editorial .ed-why:not(.ed-why--ivory) .ed-why__num { color: var(--icon-text, var(--why-bronze)); }
.ly--editorial .ed-cfg:not(.ed-cfg--navy) .ed-spec__item dt { color: var(--icon-text, var(--cfg-bronze)); }

.ly--modern .md-hero--themed, .ly--modern .md-ov:not(.md-ov--ivory), .ly--modern .md-amen--themed, .ly--modern .md-loc--themed, .ly--modern .md-gal--themed, .ly--modern .md-rera--themed { --icon-text: var(--s-icon-text); }
.ly--modern .md-hl--themed, .ly--modern .md-cfg--themed, .ly--modern .md-prog--themed, .ly--modern .md-faq--themed { --icon-text: var(--a-icon-text); }
.ly--modern .md-hero--themed .md-status { color: var(--icon-text, var(--mh-gold)); }
.ly--modern .md-ov:not(.md-ov--ivory) .md-ov__eyebrow { color: var(--icon-text, var(--mo-gold)); }
.ly--modern .md-hl--themed .md-hl__eyebrow { color: var(--icon-text, var(--mhl-gold)); }
.ly--modern .md-amen--themed .md-amen__eyebrow { color: var(--icon-text, var(--ma-gold)); }
.ly--modern .md-loc--themed .md-loc__eyebrow { color: var(--icon-text, var(--ml-gold)); }
.ly--modern .md-gal--themed .md-gal__eyebrow { color: var(--icon-text, var(--mg-gold)); }
.ly--modern .md-prog--themed .md-prog__eyebrow, .ly--modern .md-rera--themed .md-rera__eyebrow { color: var(--icon-text, var(--mp-gold)); }
.ly--modern .md-faq--themed .md-faq__eyebrow { color: var(--icon-text, var(--mq-gold)); }
.ly--modern .md-hl--themed .md-hl__n { color: var(--icon-text, var(--mhl-gold)); }
.ly--editorial .ed-why--ivory .ed-why__num { color: #8F5A0A; }
.ly--immersive .im-body--themed .pt-related .pt-link { color: var(--ib-gold-text); }

/* ==========================================================================
   ROUND 135: the property page navbar (properties/partials/section-nav.blade.php) - ONE single-row white bar for all three layouts, rendered by
   partials/nav.blade.php in place of the site header on property pages: square brand mark, Home, Properties, the page's sections, Enquire Now,
   and the builder's own logo at the far right. It sits outside .property-detail, so every value is defined here (--pn-*), fixed colours on purpose.
   ========================================================================== */
.pn {
    --pn-bg: #FFFFFF; --pn-ink: #172033; --pn-gold: #C99A3D; --pn-gold-ink: #9A6A14; --pn-line: #E5E7EB;
    --pn-h: 74px; --pn-pad: clamp(16px, 2.2vw, 42px);
    position: sticky; top: 0; z-index: 1040; background: var(--pn-bg); color: var(--pn-ink); border-bottom: 1px solid var(--pn-line);
    font-family: var(--hx-sans, "Plus Jakarta Sans", system-ui, sans-serif);
}
.pn__inner { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 30px); height: var(--pn-h); padding: 0 var(--pn-pad); min-width: 0; }

/* the square brand mark: the site's favicon artwork, gold on a dark tile (falls back to the logo image / the site name) */
.pn__mark { flex: none; display: grid; place-items: center; width: 54px; height: 50px; background: #1D1B18; text-decoration: none; }
.pn__mark-art { display: block; width: 36px; height: 34px; background: var(--pn-gold); -webkit-mask: var(--pn-mark) center / contain no-repeat; mask: var(--pn-mark) center / contain no-repeat; }
.pn__mark--logo { width: clamp(90px, 7.5vw, 130px); height: 46px; background: none; }
.pn__mark--logo img { display: block; width: 100%; height: 42px; object-fit: contain; object-position: left center; }
.pn__mark--text { width: auto; padding: 0 4px; background: none; font-weight: 700; font-size: 1.15rem; color: var(--pn-ink); white-space: nowrap; }

.pn__links { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; margin-left: auto; gap: clamp(14px, 1.6vw, 38px); } /* the links and the button sit together in the middle: free space is shared equally on both sides of them */
.pn__primary, .pn__sections { display: flex; align-items: center; gap: inherit; }
.pn__sections { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pn__sections::-webkit-scrollbar { display: none; }
.pn__link {
    position: relative; flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 6px 0;
    color: var(--pn-ink); font-size: clamp(0.875rem, 0.7rem + 0.25vw, 1rem); font-weight: 500; line-height: 1.2; letter-spacing: 0; text-decoration: none; white-space: nowrap;
    transition: color .2s ease;
}
.pn__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--pn-gold); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.pn__link:hover { color: var(--pn-gold-ink); }
.pn__link:hover::after { transform: scaleX(.4); }
.pn__link.is-active { color: var(--pn-gold-ink); font-weight: 600; }
.pn__link.is-active::after { transform: scaleX(1); }
.pn a:focus-visible, .pn button:focus-visible { outline: 2px solid var(--pn-gold-ink); outline-offset: 3px; border-radius: 4px; }

.pn__cta {
    flex: none; margin-right: auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: clamp(140px, 9.5vw, 160px); height: 44px; padding: 0 14px; border: 0; border-radius: 9px; cursor: pointer;
    background: linear-gradient(135deg, #B98A2C 0%, #94650F 100%); color: #FFFFFF; font-weight: 700; font-size: .9375rem; line-height: 1; font-family: inherit; white-space: nowrap;
    transition: filter .2s ease, transform .2s ease;
}
.pn__cta:hover { filter: brightness(1.08); }
.pn__cta:active { transform: translateY(1px); }
.pn__cta .bi { font-size: 1.05em; }

.pn__builder { flex: none; display: flex; align-items: center; }
.pn__builder img { display: block; width: clamp(100px, 10vw, 160px); height: 44px; object-fit: contain; object-position: right center; }
.pn__builder-name { font-weight: 700; font-size: 1rem; color: var(--pn-ink); max-width: 200px; line-height: 1.2; }

.pn__burger { display: none; flex: none; position: relative; width: 44px; height: 44px; padding: 0; border: 1px solid var(--pn-line); border-radius: 10px; background: #fff; color: var(--pn-ink); cursor: pointer; }
.pn__burger i { position: absolute; left: 12px; right: 12px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s ease, top .3s ease; }
.pn__burger i:nth-child(1) { top: 16px; } .pn__burger i:nth-child(2) { top: 26px; }
.pn__burger[aria-expanded="true"] i:nth-child(1) { top: 21px; transform: rotate(45deg); }
.pn__burger[aria-expanded="true"] i:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* the page's own sections land below the bar, not under it */
:root { scroll-padding-top: calc(var(--hx-header-h, 100px) + 24px); }

/* tablet: tighter bar, the section links scroll sideways when they do not all fit */
@media (max-width: 1199.98px) {
    .pn { --pn-h: 66px; }
    .pn__mark { width: 48px; height: 44px; } .pn__mark-art { width: 32px; height: 30px; }
    .pn__cta { width: 136px; height: 40px; font-size: .875rem; }
    .pn__link { font-size: .875rem; }
}
/* mobile: compact header (menu button, mark, Enquire Now, builder logo) with the section links in a scrolling row underneath */
@media (max-width: 767.98px) {
    .pn { --pn-h: 56px; --pn-row: 42px; --pn-pad: 14px; }
    .pn__inner { gap: 10px; flex-wrap: wrap; height: auto; padding-top: 0; padding-bottom: 0; }
    .pn__burger { display: block; order: 1; width: 40px; height: 40px; } .pn__burger i { left: 11px; right: 11px; } .pn__burger i:nth-child(1) { top: 14px; } .pn__burger i:nth-child(2) { top: 23px; }
    .pn__burger[aria-expanded="true"] i:nth-child(1), .pn__burger[aria-expanded="true"] i:nth-child(2) { top: 19px; }
    .pn__mark { order: 2; width: 40px; height: 38px; margin-block: 9px; } .pn__mark-art { width: 26px; height: 24px; }
    .pn__mark--logo { width: 100px; } .pn__mark--logo img { height: 32px; } .pn__mark--text { font-size: .875rem; }
    .pn__cta { order: 4; margin-left: auto; margin-right: 0; width: auto; height: 36px; padding: 0 12px; gap: 8px; font-size: .8125rem; }
    .pn__builder { order: 5; }
    .pn__builder img { width: clamp(60px, 19vw, 100px); height: 30px; }
    .pn__builder-name { font-size: .8125rem; }
    .pn__links { order: 6; flex: 0 0 calc(100% + var(--pn-pad) * 2); box-sizing: border-box; border-top: 1px solid var(--pn-line); margin: 0 calc(var(--pn-pad) * -1); padding: 0 var(--pn-pad); }
    .pn__primary { display: none; }
    .pn__sections { gap: 18px; width: 100%; flex: 1 1 auto; }
    .pn__link { min-height: var(--pn-row); padding: 0; font-size: .875rem; }
    .pn__link::after { bottom: 0; }
}
@media (max-width: 389.98px) { .pn__cta .bi { display: none; } .pn__inner { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .pn *, .pn *::after { transition: none !important; } }

/* ==========================================================================
   ROUND 137: Editorial Configurations + Specifications (configurations.blade.php, mode "bands"). Heading on top, then two columns split by a thin
   divider: a uniform list of configuration rows on the left, specifications as a two-column grid of line icons on the right. Scoped to .ed-cfg;
   written last so it replaces the earlier row / spec layouts.
   ROUND 198: the default variant (no admin "Alternate section background") is now the navy reference design (deep navy #112D59, row surface
   #163562, white text, light-blue secondary text/border/icon tones, no configuration photos) instead of the old ivory/gold one - renamed
   ed-cfg--ivory -> ed-cfg--navy throughout. Gold = the page's icon colour when the admin set one, else the navy accent blue #245A9C.
   ========================================================================== */
.ly--editorial .ed-cfg { --cfg-gold: var(--cfg-bronze); --cfg-gold-ink: var(--icon-text, var(--cfg-bronze)); }
.ly--editorial .ed-cfg--navy { --cfg-ink: var(--iv-ink, #F8FAFF); --cfg-mute: #C7D7ED; --cfg-line: var(--iv-line, rgba(190, 212, 240, 0.16)); --cfg-gold: var(--icon, #245A9C); --cfg-gold-ink: var(--icon-text, #C7D7ED); --cfg-bronze: var(--cfg-gold); --cfg-btn-bg: rgba(190, 212, 240, 0.18); --cfg-row-bg: #163562; }
.ly--editorial .ed-cfg__eyebrow { color: var(--cfg-gold-ink); }
.ly--editorial .ed-cfg__eyebrow span, .ly--editorial .ed-cfg__count span { background: var(--cfg-gold); }
.ly--editorial .ed-cfg__head { border-bottom: 0; padding-bottom: clamp(24px, 3vw, 40px); }
.ly--editorial .ed-cfg__label, .ly--editorial .ed-spec__item dt { color: var(--cfg-mute); font-weight: 600; letter-spacing: 0.2em; }

.ly--editorial .ed-cfg__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 56px); }
.ly--editorial .ed-cfg__body:not(.ed-cfg__body--split) .ed-spec__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
@media (min-width: 900px) {
    .ly--editorial .ed-cfg__body--split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0; align-items: start; }
    .ly--editorial .ed-cfg__body--split .ed-cfg__list { padding-right: clamp(24px, 3.4vw, 64px); }
    .ly--editorial .ed-cfg__body--split .ed-spec { padding-left: clamp(24px, 3.4vw, 64px); border-left: 1px solid var(--cfg-line); }
}

/* configuration rows: one uniform bordered/rounded list, thin dividers between rows, no cards, no highlighted first row (round 198) */
.ly--editorial .ed-cfg__list { display: grid; border: 1px solid var(--cfg-line); border-radius: 16px; overflow: hidden; }
.ly--editorial .ed-cfg__row { grid-template-columns: minmax(84px, 24%) minmax(0, 1fr) minmax(200px, 20%); min-height: clamp(84px, 6.4vw, 104px); padding: 14px clamp(14px, 1.6vw, 26px); background: var(--cfg-row-bg, transparent); border-bottom: 1px solid var(--cfg-line); }
.ly--editorial .ed-cfg__row:last-child { border-bottom-color: transparent; }
.ly--editorial .ed-cfg__name { color: var(--cfg-ink); }
.ly--editorial .ed-cfg__area { gap: clamp(16px, 2vw, 30px); padding-left: clamp(18px, 3vw, 52px); border-left: 1px solid var(--cfg-line); }
.ly--editorial .ed-cfg__icon { color: var(--cfg-gold); font-size: 1.4rem; }
.ly--editorial .ed-cfg__value { color: var(--cfg-ink); }
.ly--editorial .ed-cfg__num--blur { filter: blur(4px); }

/* the enquiry button: wide, translucent on navy, uniform across every row (round 198 - no highlighted first row) */
.ly--editorial .ed-cfg__go {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; padding: 12px 28px; border: 1px solid var(--cfg-gold); border-radius: 10px;
    background: var(--cfg-btn-bg, transparent); color: var(--cfg-ink); font: 600 0.9375rem/1 var(--f); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, filter 0.25s ease;
}
.ly--editorial .ed-cfg__go i { color: var(--cfg-gold); font-size: 1.05em; transition: transform 0.3s var(--ease), color 0.25s ease; }
.ly--editorial .ed-cfg__go:hover { background: var(--cfg-gold); border-color: var(--cfg-gold); color: #fff; }
.ly--editorial .ed-cfg__go:hover i { color: #fff; transform: translateX(4px); }
.ly--editorial .ed-cfg__go:focus-visible { outline: 2px solid var(--cfg-gold-ink); outline-offset: 3px; }

/* specifications: two columns, simple line icons (no discs unless the admin set an icon background / border) */
.ly--editorial .ed-spec { padding-top: 0; }
.ly--editorial .ed-spec .ed-cfg__eyebrow { margin-bottom: clamp(18px, 2vw, 28px); }
.ly--editorial .ed-spec__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 32px) clamp(18px, 2.4vw, 40px); }
.ly--editorial .ed-spec__item, .ly--editorial .ed-spec__item:nth-child(n) { align-items: flex-start; gap: 14px; padding: 0; border: 0; }
.ly--editorial:not(.ly--icon-chip) .ed-spec__icon { width: 30px; height: 30px; border-radius: 0; background: none; box-shadow: none; place-items: start center; }
.ly--editorial:not(.ly--icon-chip) .ed-spec__icon i { font-size: 1.5rem; color: var(--cfg-gold); }
/* navy variant (round 198): always a white icon circle, matching the reference - overrides the "no disc" default above regardless of the
   admin's global icon-chip setting, since the reference's specifications always show circular icon backgrounds. */
.ly--editorial .ed-cfg--navy .ed-spec__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--cfg-disc, #fff); box-shadow: none; place-items: center; }
.ly--editorial .ed-cfg--navy .ed-spec__icon i { font-size: 1.25rem; color: var(--cfg-gold); }
.ly--editorial .ed-spec__item dt { margin-bottom: 5px; font-size: 0.6875rem; }
.ly--editorial .ed-spec__item dd { color: var(--cfg-ink); font-size: 1rem; line-height: 1.45; }

@media (max-width: 899.98px) {
    .ly--editorial .ed-cfg__body--split .ed-spec { padding-top: clamp(24px, 4vw, 36px); border-top: 1px solid var(--cfg-line); }
}
@media (max-width: 767.98px) {
    .ly--editorial .ed-cfg__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name go" "area area"; row-gap: 12px; padding: 16px 12px; }
    .ly--editorial .ed-cfg__go { min-height: 44px; padding: 10px 20px; font-size: 0.875rem; }
    .ly--editorial .ed-cfg__area { padding-left: 0; border-left: 0; }
}
@media (max-width: 599.98px) {
    .ly--editorial .ed-spec__list { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .ly--editorial .ed-cfg__go, .ly--editorial .ed-cfg__go i { transition: none; } }

/* ==========================================================================
   ROUND 138: Editorial Amenities (amenities.blade.php, mode "icons"). Heading with a short lead and "N in total" on the right, then one compact card per
   category in a 3 / 2 / 1-column grid: round icon | uppercase title + the amenities | divider | large gold count. The cards alternate warm ivory and
   soft blue. Navy #10264A, gold #B88632 (small gold text #946519); a custom section background or icon colour from the admin still takes over.
   Scoped to .sx-amen--icons / .ed-ac; the earlier .ed-amen__card rules are no longer used by this section.
   ========================================================================== */
.ly--editorial .sx-amen--icons { --am-gold: var(--am-bronze); --am-gold-ink: var(--icon-text, var(--am-bronze)); --am-card-a: color-mix(in srgb, var(--am-bronze) 8%, transparent); --am-card-b: color-mix(in srgb, var(--am-ink) 5%, transparent); --am-edge-a: var(--am-line); --am-edge-b: var(--am-line); }
.ly--editorial .ed-amen--ivory { --bg: #FFFFFF; --am-ink: var(--iv-ink, #10264A); --am-mute: #6E6E6E; --am-line: var(--iv-line, #E7DFCF); --am-gold: var(--icon, #B88632); --am-gold-ink: var(--icon-text, #946519); --am-card-a: #FBF7EF; --am-card-b: #F3F7FC; --am-edge-a: #EFE6D4; --am-edge-b: #E1E9F3; background: #FFFFFF; }
.ly--editorial .sx-amen--icons .ed-eyebrow { color: var(--am-gold-ink); }
.ly--editorial .sx-amen--icons .ed-eyebrow span, .ly--editorial .ed-amen__countline { background: var(--am-gold); }
.ly--editorial .ed-amen__head { margin-bottom: clamp(22px, 2.6vw, 34px); }
.ly--editorial .sx-amen--icons .sx-title { color: var(--am-ink); font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem); }
.ly--editorial .ed-amen__lead { margin: 12px 0 0; font: 400 clamp(0.9375rem, 0.86rem + 0.3vw, 1.125rem)/1.5 var(--f); color: var(--am-mute); }
.ly--editorial .sx-amen--icons .sx-count { color: var(--am-ink); }
.ly--editorial .sx-amen--icons .sx-count b { font: 600 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1 var(--am-serif); margin-right: 6px; color: var(--am-ink); font-variant-numeric: lining-nums; }

.ly--editorial .ed-ac { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); }
.ly--editorial .ed-ac__card {
    display: flex; align-items: center; gap: clamp(14px, 1.5vw, 22px); min-width: 0; padding: clamp(14px, 1.4vw, 20px) clamp(16px, 1.8vw, 26px);
    border: 1px solid var(--am-edge-a); border-radius: 14px; background: var(--am-card-a);
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.ly--editorial .ed-ac__card:nth-child(even) { background: var(--am-card-b); border-color: var(--am-edge-b); }
.ly--editorial .ed-ac__card:hover { border-color: color-mix(in srgb, var(--am-gold) 55%, transparent); transform: translateY(-2px); box-shadow: 0 10px 22px -16px rgba(16, 38, 74, 0.4); }
.ly--editorial .ed-ac__disc { flex: none; display: grid; place-items: center; width: clamp(48px, 4.2vw, 64px); height: clamp(48px, 4.2vw, 64px); border-radius: 50%; background: color-mix(in srgb, var(--am-gold) 14%, #fff); }
.ly--editorial .ed-ac__card:nth-child(even) .ed-ac__disc { background: color-mix(in srgb, var(--am-ink) 8%, #fff); }
.ly--editorial .ed-ac__disc i { font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.625rem); line-height: 1; color: var(--am-ink); }
.ly--editorial .ed-ac__body { flex: 1 1 auto; min-width: 0; }
.ly--editorial .ed-ac__cat { margin: 0 0 6px; font: 700 clamp(0.75rem, 0.7rem + 0.15vw, 0.875rem)/1.3 var(--f); letter-spacing: 0.14em; text-transform: uppercase; color: var(--am-ink); overflow-wrap: anywhere; }
.ly--editorial .ed-ac__names { margin: 0; font: 400 clamp(0.875rem, 0.82rem + 0.15vw, 0.9375rem)/1.45 var(--f); color: color-mix(in srgb, var(--am-ink) 74%, transparent); overflow-wrap: anywhere; }
.ly--editorial .ed-ac__sep { flex: none; align-self: stretch; width: 1px; min-height: 44px; margin-block: 4px; background: var(--am-line); }
.ly--editorial .ed-ac__n { flex: none; min-width: 1.6ch; text-align: center; font: 400 clamp(1.75rem, 1.4rem + 1vw, 2.375rem)/1 var(--am-serif); font-variant-numeric: lining-nums; color: var(--am-gold-ink); }

@media (max-width: 1099.98px) {
    .ly--editorial .ed-ac { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ly--editorial .ed-ac__card:nth-child(even) { background: var(--am-card-a); border-color: var(--am-edge-a); }
    .ly--editorial .ed-ac__card:nth-child(4n + 2), .ly--editorial .ed-ac__card:nth-child(4n + 3) { background: var(--am-card-b); border-color: var(--am-edge-b); }
    .ly--editorial .ed-ac__card:nth-child(even) .ed-ac__disc { background: color-mix(in srgb, var(--am-gold) 14%, #fff); }
    .ly--editorial .ed-ac__card:nth-child(4n + 2) .ed-ac__disc, .ly--editorial .ed-ac__card:nth-child(4n + 3) .ed-ac__disc { background: color-mix(in srgb, var(--am-ink) 8%, #fff); }
}
@media (max-width: 599.98px) {
    .ly--editorial .ed-ac { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .ly--editorial .ed-ac__card, .ly--editorial .ed-ac__card:nth-child(4n + 2), .ly--editorial .ed-ac__card:nth-child(4n + 3) { background: var(--am-card-a); border-color: var(--am-edge-a); padding: 14px 16px; }
    .ly--editorial .ed-ac__card:nth-child(even) { background: var(--am-card-b); border-color: var(--am-edge-b); }
    .ly--editorial .ed-ac__card .ed-ac__disc { background: color-mix(in srgb, var(--am-gold) 14%, #fff); }
    .ly--editorial .ed-ac__card:nth-child(even) .ed-ac__disc { background: color-mix(in srgb, var(--am-ink) 8%, #fff); }
    .ly--editorial .ed-amen__head { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .ly--editorial .ed-ac__card { transition: none; } .ly--editorial .ed-ac__card:hover { transform: none; } }

/* ==========================================================================
   ROUND 139: Editorial Location (location.blade.php, mode "stack"): heading + locality, then a network visual - the property photo in a soft dome
   with a pin, a dashed orbit with small dots, and a light card per destination category on an arc around it. Under 1100px (and for categories that
   would not fit the arc) the cards are a plain grid under the dome. Olive #304D12 / sage #EEF2E3 / ivory #FBF8F1 / navy #10264A by default; a custom
   section background makes everything follow the page theme. Scoped to .ed-lc*; the note and map keep the earlier .ed-loc__note / .ed-loc__map rules.
   ========================================================================== */
.ly--editorial .ed-loc { --lc-ink: var(--ink); --lc-green: var(--icon, var(--auto-icon-color)); --lc-sage: color-mix(in srgb, var(--lc-green) 13%, transparent); --lc-card: color-mix(in srgb, var(--ink) 4%, transparent); --lc-edge: var(--line); --lc-mute: var(--mute); --lc-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif; }
.ly--editorial .ed-loc--ivory { --bg: #FBF8F1; --lc-ink: var(--iv-ink, #10264A); --lc-green: #304D12; --lc-sage: #EEF2E3; --lc-card: #FFFFFF; --lc-edge: #EFE8D8; --lc-mute: #6B7280; --loc-ink: var(--lc-ink); --loc-mute: var(--lc-mute); --loc-line: #E8E0CF; --loc-bronze: #304D12; background: #FBF8F1; font-weight: 400; color: var(--lc-ink); }
.ly--editorial .ed-lc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: clamp(8px, 1.4vw, 18px); }
.ly--editorial .ed-lc__titlerow { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.ly--editorial .ed-lc__title { margin: 0; font: 400 clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem)/1.05 var(--lc-serif); letter-spacing: -0.015em; color: var(--lc-ink); }
.ly--editorial .ed-lc__rule { display: block; width: clamp(56px, 7vw, 112px); height: 1px; background: var(--lc-green); }
.ly--editorial .ed-lc__lead { margin: 10px 0 0; font: 400 clamp(0.9375rem, 0.86rem + 0.3vw, 1.125rem)/1.5 var(--f); color: var(--lc-mute); }
.ly--editorial .ed-lc__where { display: flex; align-items: center; gap: 16px; margin: clamp(6px, 1vw, 14px) 0 0; font: 500 clamp(1rem, 0.9rem + 0.3vw, 1.25rem)/1.2 var(--f); color: var(--lc-ink); }
.ly--editorial .ed-lc__where i { margin: 0; font-size: 1.4rem; color: var(--lc-green); }
.ly--editorial .ed-lc__vsep { display: block; align-self: stretch; width: 1px; min-height: 26px; background: var(--loc-line, var(--lc-edge)); }

/* the stage: a wide canvas on desktop with the cards on an arc (positions are inline percentages) */
.ly--editorial .ed-lc { margin-top: clamp(40px, 4vw, 56px); margin-bottom: clamp(20px, 2.4vw, 32px); }
.ly--editorial .ed-lc__stage { position: relative; }
.ly--editorial .ed-lc__home { position: relative; display: grid; justify-items: center; }
.ly--editorial .ed-lc__dome { position: relative; width: 100%; height: clamp(190px, 22vw, 260px); overflow: hidden; border-radius: 999px 999px 0 0; background: radial-gradient(120% 100% at 50% 100%, #FFFFFF 0%, #F6EFDF 45%, #E6EEF6 100%); box-shadow: 0 0 0 10px color-mix(in srgb, var(--lc-green) 5%, transparent); }
.ly--editorial .ed-lc__dome img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.ly--editorial .ed-lc__dome::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(251, 248, 241, 0.55) 0%, rgba(251, 248, 241, 0) 45%); }
.ly--editorial .ed-lc__pin { position: absolute; z-index: 2; top: 14%; left: 50%; display: grid; justify-items: center; gap: 6px; transform: translateX(-50%); }
.ly--editorial .ed-lc__pin i { margin: 0; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); line-height: 1; color: var(--lc-green); filter: drop-shadow(0 2px 3px rgba(255, 255, 255, 0.8)); }
.ly--editorial .ed-lc__tag { padding: 9px 22px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 6px 18px -10px rgba(16, 38, 74, 0.35); font: 500 clamp(0.875rem, 0.82rem + 0.2vw, 1rem)/1.2 var(--f); color: var(--lc-ink); }

/* cards */
.ly--editorial .ed-lc__card { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; padding: 40px 18px 18px; border: 1px solid var(--lc-edge); border-radius: 24px; background: var(--lc-card); text-align: center; box-shadow: 0 10px 24px -20px rgba(16, 38, 74, 0.35); min-width: 0; }
.ly--editorial .ed-lc__ic { position: absolute; top: -30px; left: 50%; display: grid; place-items: center; width: 60px; height: 60px; transform: translateX(-50%); border-radius: 50%; background: var(--lc-sage); box-shadow: 0 0 0 6px var(--lc-card); }
.ly--editorial .ed-lc__ic i { margin: 0; font-size: 1.6rem; line-height: 1; color: var(--lc-green); }
.ly--editorial .ed-lc__cat { margin: 0; font: 700 0.75rem/1.3 var(--f); letter-spacing: 0.2em; text-transform: uppercase; color: var(--lc-green); overflow-wrap: anywhere; }
.ly--editorial .ed-lc__name { margin: 0; font: 400 clamp(0.9375rem, 0.88rem + 0.2vw, 1.0625rem)/1.35 var(--f); color: var(--lc-ink); overflow-wrap: anywhere; }
.ly--editorial .ed-lc__time { display: inline-block; padding: 6px 16px; border-radius: 8px; background: var(--lc-sage); font: 600 0.9375rem/1.2 var(--f); font-variant-numeric: lining-nums; color: var(--lc-green); white-space: nowrap; }
.ly--editorial .ed-lc__list { display: grid; gap: 10px; width: 100%; margin: 4px 0 0; padding: 0; list-style: none; text-align: left; }
.ly--editorial .ed-lc__list li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-left: 16px; font: 400 clamp(0.9375rem, 0.88rem + 0.2vw, 1.0625rem)/1.3 var(--f); color: var(--lc-ink); }
.ly--editorial .ed-lc__list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: color-mix(in srgb, var(--lc-green) 55%, #fff); }
.ly--editorial .ed-lc__lname { min-width: 0; overflow-wrap: anywhere; }

/* desktop arc */
@media (min-width: 1100px) {
    .ly--editorial .ed-lc--arc .ed-lc__stage { aspect-ratio: 1800 / 700; }
    .ly--editorial .ed-lc--arc .ed-lc__home { position: absolute; left: 50%; bottom: 0; width: 34%; transform: translateX(-50%); }
    .ly--editorial .ed-lc--arc .ed-lc__dome { height: clamp(210px, 21vw, 290px); }
    .ly--editorial .ed-lc--arc .ed-lc__card { position: absolute; left: var(--x); top: var(--y); width: clamp(150px, 16.5%, 250px); transform: translate(-50%, -50%); transition: border-color 0.25s ease, box-shadow 0.25s ease; }
    .ly--editorial .ed-lc--arc .ed-lc__card:hover { border-color: color-mix(in srgb, var(--lc-green) 40%, transparent); box-shadow: 0 14px 28px -18px rgba(16, 38, 74, 0.45); }
    .ly--editorial .ed-lc__orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
    .ly--editorial .ed-lc__orbit path { fill: none; stroke: color-mix(in srgb, var(--lc-green) 45%, transparent); stroke-width: 1.2px; stroke-dasharray: 5 7; }
    .ly--editorial .ed-lc__node { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--lc-green); box-shadow: 0 0 0 5px #FFFFFF, 0 0 0 6px color-mix(in srgb, var(--lc-green) 35%, transparent); pointer-events: none; }
}
/* tablet / phone, and big categories: the dome on top, the same cards in a grid beneath it */
@media (max-width: 1099.98px) {
    .ly--editorial .ed-lc__orbit, .ly--editorial .ed-lc__node { display: none; }
    .ly--editorial .ed-lc--arc .ed-lc__stage, .ly--editorial .ed-lc--grid .ed-lc__stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 16px; }
    .ly--editorial .ed-lc__home { grid-column: 1 / -1; width: min(100%, 560px); justify-self: center; margin-bottom: 8px; }
}
.ly--editorial .ed-lc--grid .ed-lc__stage { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 44px 20px; }
.ly--editorial .ed-lc--grid .ed-lc__home { grid-column: 1 / -1; width: min(100%, 640px); justify-self: center; margin-bottom: 8px; }
@media (max-width: 599.98px) {
    .ly--editorial .ed-lc--arc .ed-lc__stage, .ly--editorial .ed-lc--grid .ed-lc__stage { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .ly--editorial .ed-lc__dome { height: 190px; }
    .ly--editorial .ed-lc__where { margin-top: 0; }
    .ly--editorial .ed-lc__head { flex-direction: column; gap: 14px; }
    .ly--editorial .ed-lc__card { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) { .ly--editorial .ed-lc__card { transition: none; } }

/* ==========================================================================
   ROUND 140: one compact vertical rhythm for ALL THREE property layouts (Editorial, Modern, Immersive). Written last, replaces the looser values of the
   earlier rounds; layouts, colours, fonts and type sizes are untouched, only section padding, gaps under headings, grid / column gaps, a few
   over-tall frames and the hero heights change.
   Section padding --cs-y: 32-52px desktop and tablet, 24-32px phone. Under a heading --cs-head 16-24px. Wide two-column gutters 24-48px, card grids
   16-22px. Content decides the height: the fixed min-heights of the FAQ band, the closing photo band and the map were lowered.
   ========================================================================== */
.ly { --cs-y: clamp(32px, 3.8vw, 52px); --cs-head: clamp(16px, 1.8vw, 24px); --cs-gap: clamp(24px, 3.2vw, 48px); --cs-gap-s: clamp(20px, 2.4vw, 36px); }
@media (max-width: 767.98px) { .ly { --cs-y: clamp(24px, 6vw, 32px); --cs-head: 16px; --cs-gap: 24px; --cs-gap-s: 20px; } }

/* section padding */
.ly--editorial { --sec-y: var(--cs-y); --head-gap: var(--cs-head); }
.ly--modern .ly-sec, .ly .pt-related { padding-block: var(--cs-y); }
.ly--immersive .im-body .ly-sec:not(.im-cfg), .ly--immersive .im-body .im-am, .ly--immersive .im-body .im-lc, .ly--immersive .im-body .im-fq, .ly--immersive .im-body .im-pg, .ly--immersive .im-body .im-rr { padding-block: var(--cs-y); }
.ly .pt-related { margin-top: 0; padding-block: var(--cs-y) 0; } /* the wrapper under it (.pt-after) carries the bottom space */
.ly .pt-after { padding-bottom: clamp(24px, 3vw, 40px); }
.ly--immersive .im-body .pt-after { padding-block: 0 clamp(24px, 3vw, 36px); }
.ly .md-svc, .ly .md-enq { padding-block: clamp(28px, 3.2vw, 44px); }
.ly .sx-cta--photo { min-height: clamp(340px, 46svh, 460px); }
.ly--immersive .sx-cta--photo { padding-block: clamp(40px, 5vw, 64px); }
.ly--immersive .im-nums { padding-block: clamp(20px, 2.4vw, 28px); }

/* heroes: still the full composition, no longer a full screen of empty space */
.ly--editorial .ed-hero { min-height: clamp(500px, calc(100svh - var(--hx-header-h, 75px) - 110px), 700px); }
.ly--editorial .ed-hero__inner { padding-top: clamp(40px, 5vw, 72px); }
.ly--modern .md-hero { min-height: clamp(420px, 58svh, 580px); padding-block: clamp(28px, 3.4vw, 48px); }
.ly--immersive .im-hero { min-height: clamp(500px, min(calc(100svh - var(--hx-header-h, 75px) - 60px), 52vw), 700px); }
.ly--immersive .im-loc, .ly--immersive .im-desc { margin-bottom: 20px; }

/* heading to content */
.ly--modern .md-cfg__head, .ly--modern .md-amen__head, .ly--modern .md-loc__head, .ly--modern .sx-head, .ly--immersive .sx-head, .ly--immersive .im-gal__head { margin-bottom: var(--cs-head); }
.ly--modern .md-hl__title, .ly--immersive .im-hl__title { margin-bottom: 18px; }
.ly--immersive .im-am__top { margin-bottom: var(--cs-head); row-gap: 20px; column-gap: 20px; }
.ly--immersive .im-pg__head { margin-bottom: clamp(24px, 3vw, 32px); }
.ly--modern .sx-chips, .ly--immersive .sx-chips { margin-bottom: 20px; }
.ly--modern .md-prog__list { margin-top: 24px; }
.ly--modern .md-spec, .ly--immersive .im-spec { margin-top: clamp(24px, 2.8vw, 36px); }
.ly--modern .md-hl__stage { margin-top: 16px; }
.ly--immersive .im-lc__panel { margin-top: 24px; }
.ly--editorial .ed-lc { margin-top: clamp(28px, 3vw, 40px); }

/* two-column gutters and grids */
.ly--modern .md-ov__grid, .ly--modern .md-hl__grid, .ly--modern .md-faq__grid { row-gap: var(--cs-gap); column-gap: var(--cs-gap); }
.ly--modern .md-spec__grid { column-gap: var(--cs-gap); }
.ly--modern .md-rera__grid, .ly--immersive .im-rr__grid, .ly--immersive .im-lc__top { row-gap: var(--cs-gap-s); column-gap: var(--cs-gap-s); }
.ly--immersive .im-fq__grid { row-gap: var(--cs-gap); column-gap: var(--cs-gap); }
.ly--modern .md-enq__wrap, .ly--immersive .sx-cta__inner { column-gap: var(--cs-gap-s); }

/* over-tall frames: the content decides */
.ly--immersive .sx-faq, .ly--immersive .im-fq { min-height: 0; }
.ly--modern .md-loc__map { min-height: clamp(300px, 32vw, 440px); }
.ly--immersive .im-hl__main { padding-block: clamp(32px, 3.6vw, 48px); }
.ly--editorial .ed-why__panel { padding-block: clamp(28px, 3.4vw, 48px); }
.ly--editorial .ed-why__content { padding-block: clamp(24px, 2.8vw, 40px); }
.ly--editorial .sx-mosaic--masonry { grid-auto-rows: clamp(88px, 8.6vw, 136px); }
@media (max-width: 767.98px) {
    .ly--editorial .ed-hero { min-height: clamp(460px, calc(100svh - var(--hx-header-h, 99px) - 120px), 640px); }
    .ly--modern .md-hero { min-height: 0; }
    .ly--modern .md-loc__map { min-height: clamp(260px, 64vw, 340px); }
}

/* round 140, phones and tablets: repeated blocks take less height (same content, same order) */
@media (max-width: 767.98px) {
    .ly--editorial .sx-plan-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .ly--editorial .sx-plan img { height: clamp(110px, 32vw, 170px); padding: 6px; }
    .ly .sx-plan .pt-plan__cap, .ly--editorial .sx-plan .pt-plan__cap { padding: 8px 10px; }
    .ly--modern .md-facts__cell { padding: 14px 14px; }
    .ly--modern .md-facts__cell dt { gap: 6px; }
    .ly--editorial .ed-lc--arc .ed-lc__stage, .ly--editorial .ed-lc--grid .ed-lc__stage { gap: 36px; }
    .ly--editorial .ed-lc__dome { height: 150px; }
}
@media (max-width: 767.98px) {
    .ly .pt-related__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ly .pt-rel { flex-direction: row; align-items: stretch; }
    .ly .pt-rel__media { flex: 0 0 36%; aspect-ratio: auto; min-height: 100px; }
    .ly .pt-rel__body { justify-content: center; gap: 4px; padding: 12px 14px; }
}

/* cards and rows inside the sections */
.ly--modern .md-cfg__card { padding: clamp(18px, 2vw, 26px); gap: clamp(12px, 1.4vw, 16px); }
.ly--modern .md-cfg__type { padding-bottom: clamp(10px, 1.2vw, 14px); }
.ly--modern .md-cfg__rows div { padding-block: 10px; }
.ly--modern .md-cfg__go { min-height: 40px; }
.ly--modern .md-spec__item { padding-block: clamp(10px, 1vw, 14px); }
.ly--modern .md-amen__list li { min-height: 48px; padding-block: 6px; }
.ly--modern .md-amen__panel { margin-bottom: clamp(12px, 1.4vw, 18px); }
.ly--immersive .sx-plan { flex-basis: min(82vw, 440px); }
.ly--immersive .sx-plan img { padding: 12px; }
.ly--editorial .ed-ov__media { height: clamp(280px, 30vw, 460px); }
.ly--editorial .ed-loc__map { height: clamp(240px, 24vw, 340px); margin-top: clamp(16px, 2vw, 24px); }
.ly--editorial .sx-plan img { height: clamp(150px, 12.5vw, 210px); }
.ly .pt-rel__media { aspect-ratio: 16 / 9; }
@media (max-width: 1099.98px) {
    .ly--editorial .ed-ov__media { height: clamp(240px, 40vw, 340px); }
}
@media (max-width: 767.98px) {
    .ly--editorial .sx-plan img { height: clamp(110px, 32vw, 170px); }
    .ly .pt-rel__media { aspect-ratio: auto; }
}

/* ==========================================================================
   ROUND 142: Editorial property snapshot (editorial.blade.php, .ed-snap): one wide rounded card over the hero's bottom edge. Each block = round ivory icon
   chip with a gold line icon, grey label, bold navy value; thin dividers; 6 columns / 3 x 2 / 2 columns. Ivory + navy + gold by default (.ed-snap--ivory),
   the page theme's card colours with a custom section background. Scoped to .ed-snap; written last so it replaces the earlier cell rules.
   ========================================================================== */
.ly--editorial .ed-snap { --sn-bg: var(--s-card); --sn-ink: var(--s-card-ink); --sn-mute: color-mix(in srgb, var(--s-card-ink) 62%, transparent); --sn-gold: var(--s-card-icon, var(--s-card-bronze)); --sn-line: var(--s-line); --sn-chip: color-mix(in srgb, var(--sn-gold) 12%, transparent); margin-top: calc(-1 * clamp(56px, 5.6vw, 88px)); padding-bottom: clamp(16px, 2vw, 28px); }
.ly--editorial .ed-snap--ivory { --sn-bg: #FCFAF5; --sn-ink: #10264A; --sn-mute: #737985; --sn-gold: #B88632; --sn-line: #EADFCB; --sn-chip: #F6EEDF; }
.ly--editorial .ed-snap__grid { border-radius: clamp(18px, 1.8vw, 24px); background: var(--sn-bg); box-shadow: 0 0 0 1px var(--sn-line), 0 30px 60px -36px rgba(16, 38, 74, 0.5); color: var(--sn-ink); }
.ly--editorial .ed-snap__cell { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; padding: clamp(16px, 1.8vw, 24px) clamp(10px, 1.4vw, 22px) clamp(14px, 1.6vw, 22px); border-left: 0; text-align: center; }
.ly--editorial .ed-snap__cell::before { content: ""; position: absolute; left: 0; top: 16%; bottom: 16%; width: 1px; background: var(--sn-line); }
.ly--editorial .ed-snap__cell:first-child::before { display: none; }
.ly--editorial .ed-snap__ic { display: grid; place-items: center; width: clamp(46px, 3.9vw, 56px); height: clamp(46px, 3.9vw, 56px); margin-bottom: 2px; border-radius: 50%; background: var(--sn-chip); }
.ly--editorial .ed-snap__ic i { margin: 0; font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem); line-height: 1; color: var(--sn-gold); }
.ly--editorial .ed-snap__cell dt { margin: 0; color: var(--sn-mute); font: 500 clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem)/1.2 var(--f); }
.ly--editorial .ed-snap__cell dd { margin: 0; color: var(--sn-ink); font: 700 clamp(1rem, 0.86rem + 0.7vw, 1.5rem)/1.25 var(--f); font-variant-numeric: lining-nums; overflow-wrap: anywhere; text-wrap: balance; }
@media (max-width: 1199.98px) {
    .ly--editorial .ed-snap__grid { grid-template-columns: repeat(min(var(--n, 6), 3), minmax(0, 1fr)); }
    .ly--editorial .ed-snap__cell:nth-child(n) { border-top: 0; }
    .ly--editorial .ed-snap__cell:nth-child(n + 4) { border-top: 1px solid var(--sn-line); }
    .ly--editorial .ed-snap__cell:nth-child(3n + 1)::before { display: none; }
    .ly--editorial .ed-snap__cell:nth-child(3n + 2)::before, .ly--editorial .ed-snap__cell:nth-child(3n)::before { display: block; }
}
@media (max-width: 767.98px) {
    .ly--editorial .ed-snap { margin-top: calc(-1 * clamp(36px, 8vw, 56px)); }
    .ly--editorial .ed-snap__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ly--editorial .ed-snap__cell:nth-child(n) { border-top: 0; }
    .ly--editorial .ed-snap__cell:nth-child(n + 3) { border-top: 1px solid var(--sn-line); }
    .ly--editorial .ed-snap__cell:nth-child(odd)::before { display: none; }
    .ly--editorial .ed-snap__cell:nth-child(even)::before { display: block; }
}

/* ROUND 144: banner VIDEO (partials/banner-media.blade.php) fills the same frame as the banner image of each layout; the layouts' own shade / overlay stays on top */
.pt-bv { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.ly--editorial .ed-hero__media video { width: 100%; height: 100%; object-fit: cover; }
.ly--modern .md-hero__main video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ly--immersive .im-hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
@media (max-width: 767.98px) { .ly--immersive .im-hero__media video { object-position: 68% 50%; } }