/* ============================================================================
   EASTERN HEIGHTS — stylesheet
   ----------------------------------------------------------------------------
   Design language: a highway-facing hilltop community on Hyderabad's Eastern
   Corridor, sold on dawn views and open horizon. The palette pairs a deep
   pine green (from the project mark) with a warm brass "sunrise" accent and
   a cool horizon teal, set on quiet limestone neutrals — deliberately not
   the warm-cream + terracotta pairing that reads as generic AI output.

   Typography: Fraunces (display serif, used with restraint for headlines),
   Manrope (body/UI sans), Space Grotesk (utility face for stats, eyebrows,
   and data labels — chosen because plot sizes / acreage / distances are
   literal data points in this brief, not decoration).

   Table of contents
   1.  Tokens
   2.  Reset & base
   3.  Layout utilities
   4.  Typography helpers
   5.  Buttons & chips
   6.  Header & navigation
   7.  Hero
   8.  Sections: stats, features, cards, amenities, plots, location, gallery
   9.  Image placeholder component
   10. Footer & sticky CTA
   11. Forms
   12. Responsive
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------- */
:root {
    /* Color */
    --pine-900: #10201A;
    --pine-800: #16302A;
    --pine-700: #1C3F32;
    --pine-600: #2A5445;
    --teal-600: #2E6B60;
    --teal-500: #3E8577;
    --gold-600: #AD7E2C;
    --gold-500: #C79A3D;
    --gold-400: #DAB666;
    --gold-100: #F4E9CE;
    --sage-50:  #F8F8F3;
    --sage-100: #EFF1E8;
    --sage-200: #E4E6DA;
    --stone-line: #DBD9CB;
    --ink-900: #1B211C;
    --ink-700: #4B534B;
    --ink-500: #757D74;
    --white: #FFFFFF;

    /* Type */
    --font-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-utility: 'Space Grotesk', 'Manrope', sans-serif;

    /* Layout */
    --wrap-width: 1240px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 22px;
    --shadow-sm: 0 1px 2px rgba(16, 32, 26, 0.06);
    --shadow-md: 0 12px 32px -12px rgba(16, 32, 26, 0.22);
    --shadow-lg: 0 24px 60px -20px rgba(16, 32, 26, 0.35);
    --header-h: 68px;
}

/* -------------------------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink-900);
    background: var(--sage-50);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; margin: 0 0 0.5em; color: var(--pine-900); }
p { margin: 0 0 1em; color: var(--ink-700); }
button { font-family: inherit; cursor: pointer; }
button.btn { border: none; font-family: var(--font-utility); }

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

.skip-link {
    position: absolute; left: -999px; top: 0; background: var(--pine-900); color: var(--white);
    padding: 12px 18px; z-index: 999; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   3. LAYOUT UTILITIES
   ---------------------------------------------------------------------- */
.wrap { max-width: var(--wrap-width); margin: 0 auto; padding: 0 28px; }
.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }
.section--sage { background: var(--sage-100); }
.section--pine { background: var(--pine-800); color: var(--sage-100); }
.section--pine h2, .section--pine h3 { color: var(--white); }
.section--pine p { color: rgba(248, 248, 243, 0.72); }
.section-head { max-width: 640px; margin-bottom: 52px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.divider { height: 1px; background: var(--stone-line); border: 0; margin: 0; }

/* -------------------------------------------------------------------------
   4. TYPOGRAPHY HELPERS
   ---------------------------------------------------------------------- */
.eyebrow {
    font-family: var(--font-utility);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-600);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.eyebrow::before {
    content: '';
    width: 26px; height: 1px; background: var(--gold-500); display: inline-block;
}
.eyebrow--light { color: var(--gold-400); }
h1 { font-size: clamp(2.4rem, 4.4vw, 3.9rem); }
h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
h3 { font-size: 1.3rem; }
.lede { font-size: 1.15rem; color: var(--ink-700); max-width: 60ch; }
.text-center { text-align: center; }
.font-utility { font-family: var(--font-utility); }

/* -------------------------------------------------------------------------
   5. BUTTONS & CHIPS
   ---------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 28px;
    border-radius: var(--radius-sm);
    font-family: var(--font-utility);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--pine-800); color: var(--white); }
.btn--primary:hover { background: var(--pine-700); }
.btn--forest { background: #143129; color: var(--white); }
.btn--forest:hover { background: #1c4238; }
.btn--gold { background: var(--gold-500); color: var(--pine-900); }
.btn--gold:hover { background: var(--gold-400); }
.btn--ghost-light { border-color: rgba(248,248,243,0.4); color: var(--sage-50); }
.btn--ghost-light:hover { border-color: var(--gold-400); color: var(--gold-400); }
.btn--outline { border-color: var(--pine-800); color: var(--pine-800); }
.btn--outline:hover { background: var(--pine-800); color: var(--white); }
.btn--sm { padding: 10px 18px; font-size: 0.82rem; }
.btn--block { width: 100%; }

.chip {
    display: inline-block;
    font-family: var(--font-utility);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 100px;
    margin-top: 10px;
}
.chip--required { background: rgba(199, 154, 61, 0.16); color: var(--gold-600); }
.chip--optional { background: rgba(46, 107, 96, 0.14); color: var(--teal-600); }

/* -------------------------------------------------------------------------
   6. HEADER & NAVIGATION
   ---------------------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    /* Note: deliberately NOT using backdrop-filter here — a filter/
       backdrop-filter on this element would make it the CSS containing
       block for any position:fixed descendant (like .main-nav's mobile
       drawer below), breaking full-viewport positioning of the mobile
       menu. Keep this element filter-free. */
    background: rgba(248, 248, 243, 0.96);
    border-bottom: 1px solid var(--stone-line);
}
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--header-h);
}
.brand { display: flex; align-items: center; }
.brand__logo { height: 30px; width: auto; display: block; }
.sunburst-mark { display: block; }

.main-nav ul { display: flex; gap: 34px; }
.main-nav a {
    font-family: var(--font-utility);
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--ink-700);
    position: relative;
    padding: 6px 0;
}
.main-nav a::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
    background: var(--gold-500); transition: width 0.2s ease;
}
.main-nav a:hover, .main-nav a.is-active { color: var(--pine-900); }
.main-nav a:hover::after, .main-nav a.is-active::after { width: 100%; }

.site-header__actions { display: flex; align-items: center; gap: 18px; }
.site-header__actions button { border: none; }
.nav-toggle {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; background: none; border: none; padding: 0;
}
.nav-toggle span { width: 100%; height: 2px; background: var(--pine-900); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   7. HERO
   ---------------------------------------------------------------------- */
.hero {
    position: relative;
    background: linear-gradient(180deg, var(--pine-900) 0%, var(--pine-800) 100%);
    color: var(--sage-50);
    overflow: hidden;
}
.hero--photo { min-height: 680px; display: flex; align-items: center; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero__scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(16,32,26,0.82) 0%, rgba(16,32,26,0.58) 42%, rgba(16,32,26,0.88) 100%);
}
.hero__inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
    padding: 96px 0 76px;
}
.hero__inner--single { grid-template-columns: 1fr; max-width: 760px; padding: 120px 0 100px; }
.sunburst-hero {
    position: absolute; right: -80px; top: -60px; width: 620px; height: 320px;
    color: var(--gold-400); opacity: 0.5; pointer-events: none;
}
.hero__eyebrow-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.hero__badge {
    font-family: var(--font-utility); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--pine-900); background: var(--gold-400); padding: 5px 11px; border-radius: 100px; font-weight: 600;
}
.hero h1 { color: var(--white); margin-bottom: 22px; }
.hero h1 em { font-style: italic; color: var(--gold-400); }
.hero__brand-line {
    display: block; font-family: var(--font-utility); text-transform: uppercase;
    font-size: 0.4em; letter-spacing: 0.07em; font-weight: 600;
    color: var(--gold-400); margin-bottom: 12px;
}
.hero__lede { color: rgba(248,248,243,0.78); font-size: 1.12rem; max-width: 52ch; margin-bottom: 34px; }
.hero__meta-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 18px 28px;
    margin: 22px 0 34px;
}
.hero__location {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 1.08rem; color: rgba(248,248,243,0.9); font-weight: 500;
}
.hero__location svg { color: var(--gold-400); flex-shrink: 0; }
.hero__price {
    font-family: var(--font-utility); font-size: 1.55rem; font-weight: 700;
    color: var(--gold-400); letter-spacing: 0.01em;
}
.hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 44px; }
.hero__quickfacts { display: grid; grid-template-columns: repeat(3, auto); gap: 30px; }
.hero__quickfacts div { border-left: 1px solid rgba(218,182,102,0.4); padding-left: 14px; }
.hero__quickfacts strong { display: block; font-family: var(--font-utility); font-size: 1.5rem; color: var(--gold-400); }
.hero__quickfacts span { font-size: 0.78rem; color: rgba(248,248,243,0.65); }

.hero__media { position: relative; }
.hero__media .placeholder { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* Trust strip beneath hero */
.trust-strip { background: var(--sage-100); border-bottom: 1px solid var(--stone-line); }
.trust-strip__inner {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 18px 34px; padding: 22px 0;
}
.trust-strip__item { display: flex; align-items: center; gap: 10px; font-family: var(--font-utility); font-size: 0.84rem; color: var(--ink-700); }
.trust-strip__item svg { color: var(--teal-600); flex-shrink: 0; }

/* -------------------------------------------------------------------------
   8. SECTIONS
   ---------------------------------------------------------------------- */

/* Overview split */
.overview__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: center; }
.overview__list { margin-top: 26px; }
.overview__list li {
    display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--stone-line); color: var(--ink-700);
    font-size: 0.98rem;
}
.overview__list li:last-child { border-bottom: none; }
.overview__list li svg { flex-shrink: 0; color: var(--gold-600); margin-top: 3px; }

/* Stats */
.stats-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--stone-line);
    border: 1px solid var(--stone-line);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.stats-strip__cell { background: var(--white); padding: 30px 22px; text-align: center; }
.stats-strip__value { font-family: var(--font-utility); font-size: 2.1rem; font-weight: 600; color: var(--pine-800); line-height: 1; }
.stats-strip__unit { font-family: var(--font-utility); font-size: 0.95rem; color: var(--gold-600); margin-left: 3px; }
.stats-strip__label { display: block; margin-top: 8px; font-size: 0.82rem; color: var(--ink-500); }

/* Feature cards */
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 32px; }
.feature-list li {
    display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--stone-line);
}
.feature-list li svg { flex-shrink: 0; color: var(--teal-600); margin-top: 4px; }
.feature-list li span { color: var(--ink-700); font-size: 0.97rem; }

/* Cards (amenities preview / why choose) */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.card {
    background: var(--white); border: 1px solid var(--stone-line); border-radius: var(--radius-md);
    padding: 30px 26px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-400); }
.card__icon {
    width: 46px; height: 46px; border-radius: 12px; background: var(--sage-100);
    display: flex; align-items: center; justify-content: center; color: var(--teal-600); margin-bottom: 18px;
}
.card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.card p { font-size: 0.92rem; margin: 0; }

/* Amenities page groups */
.amenity-group { margin-bottom: 12px; }
.amenity-group__title {
    display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
    font-family: var(--font-display); font-size: 1.4rem; color: var(--pine-900);
}
.amenity-group__title::after { content: ''; flex: 1; height: 1px; background: var(--stone-line); }
.amenity-pills { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.amenity-pill {
    display: flex; align-items: center; gap: 9px;
    background: var(--white); border: 1px solid var(--stone-line); border-radius: 100px;
    padding: 10px 18px 10px 14px; font-size: 0.88rem; color: var(--ink-700);
}
.amenity-pill svg { color: var(--gold-600); flex-shrink: 0; }

/* "View All Amenities" toggle — mobile only (see media query below); on
   desktop the full pill list already shows, so this button stays hidden. */
.amenity-toggle {
    display: none;
    margin: 0 auto 60px; padding: 11px 22px;
    background: var(--white); border: 1px solid var(--stone-line); border-radius: 100px;
    font-family: var(--font-utility); font-size: 0.85rem; font-weight: 600;
    color: var(--pine-800);
}
.amenity-toggle:hover { border-color: var(--gold-400); color: var(--gold-600); }

/* Plot configuration table/cards */
.plot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.plot-card {
    background: var(--white); border: 1px solid var(--stone-line); border-radius: var(--radius-md);
    padding: 26px 16px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.plot-card:hover { border-color: var(--gold-400); box-shadow: var(--shadow-sm); }
.plot-card__value { font-family: var(--font-utility); font-size: 2rem; font-weight: 600; color: var(--pine-800); }
.plot-card__unit { display: block; font-size: 0.75rem; color: var(--ink-500); margin-top: 4px; letter-spacing: 0.04em; text-transform: uppercase; }
.plot-card .btn { width: 100%; }
.plot-note {
    margin-top: 28px; padding: 18px 22px; background: var(--gold-100); border-left: 3px solid var(--gold-500);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 0.92rem; color: var(--ink-700);
}

/* Location */
.location-list { margin-top: 10px; }
.location-list li {
    display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--stone-line);
}
.location-list li span:first-child { color: var(--ink-700); }
.location-list li span:last-child { font-family: var(--font-utility); color: var(--gold-600); font-weight: 600; white-space: nowrap; }
.location-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.location-table th, .location-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--stone-line); font-size: 0.92rem; }
.location-table th { font-family: var(--font-utility); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; color: var(--ink-500); }
.location-table td:last-child, .location-table th:last-child { text-align: right; color: var(--gold-600); font-weight: 600; }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery-grid .placeholder--wide { grid-column: span 2; }

/* Gallery carousel (replaces the static grid — see index.php #gallery) */
.gallery-carousel { position: relative; }
.gallery-carousel__track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 20px; border-radius: var(--radius-lg); scrollbar-width: none;
    -ms-overflow-style: none;
}
.gallery-carousel__track::-webkit-scrollbar { display: none; }
.gallery-carousel__slide {
    flex: 0 0 100%; scroll-snap-align: center; position: relative;
    border-radius: var(--radius-lg); overflow: hidden;
}
.gallery-carousel__slide img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.gallery-carousel__caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 22px 26px; background: linear-gradient(0deg, rgba(16,32,26,0.78) 0%, transparent 100%);
    color: var(--white); font-family: var(--font-utility); font-size: 0.92rem; font-weight: 600;
}
.gallery-carousel__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 50%; border: none;
    background: rgba(248,248,243,0.92); color: var(--pine-900);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm); z-index: 2;
}
.gallery-carousel__nav:hover { background: var(--white); }
.gallery-carousel__nav--prev { left: -8px; }
.gallery-carousel__nav--next { right: -8px; }
.gallery-carousel__dots { display: flex; justify-content: center; gap: 9px; margin-top: 20px; }
.gallery-carousel__dot {
    width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0;
    background: var(--stone-line); transition: background 0.2s ease, transform 0.2s ease;
}
.gallery-carousel__dot.is-active { background: var(--gold-500); transform: scale(1.2); }

/* Mini CTA banners — Download Brochure / Schedule Visit / Download Cost
   Sheet. Deliberately compact and interspersed between larger sections
   (see index.php) rather than grouped together. */
.mini-cta { padding: 44px 0; }
.mini-cta__inner {
    display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.mini-cta__icon {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.mini-cta__copy { flex: 1; min-width: 240px; }
.mini-cta__copy h3 { margin-bottom: 4px; font-size: 1.2rem; }
.mini-cta__copy p { margin: 0; font-size: 0.92rem; }
.mini-cta__action { flex-shrink: 0; }
.mini-cta--light { background: var(--sage-100); border-top: 1px solid var(--stone-line); border-bottom: 1px solid var(--stone-line); }
.mini-cta--light .mini-cta__icon { background: var(--white); color: var(--gold-600); border: 1px solid var(--stone-line); }
.mini-cta--light .mini-cta__copy p { color: var(--ink-700); }
.mini-cta--dark { background: var(--pine-900); }
.mini-cta--dark .mini-cta__icon { background: rgba(218,182,102,0.14); color: var(--gold-400); }
.mini-cta--dark .mini-cta__copy h3 { color: var(--white); }
.mini-cta--dark .mini-cta__copy p { color: rgba(248,248,243,0.68); }

/* Site layout / master plan callout */
.masterplan { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; }
.masterplan__legend { display: flex; gap: 24px; margin-top: 20px; flex-wrap: wrap; }
.masterplan__legend li { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--ink-700); }
.masterplan__swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.masterplan__swatch--plots { background: #E7B98C; }
.masterplan__swatch--parks { background: var(--teal-500); }
.masterplan__swatch--social { background: var(--ink-500); }

/* Sunburst divider */
.sunburst-divider { color: var(--gold-500); width: 100%; max-width: 220px; margin: 0 auto; }
.sunburst-divider--left { margin: 0; }
.section-divider-wrap { display: flex; justify-content: center; padding: 8px 0 48px; }

/* -------------------------------------------------------------------------
   9. IMAGE PLACEHOLDER COMPONENT
   ---------------------------------------------------------------------- */
.placeholder {
    position: relative;
    width: 100%;
    border-radius: var(--radius-md);
    background:
        repeating-linear-gradient(135deg, rgba(46,107,96,0.05) 0px, rgba(46,107,96,0.05) 2px, transparent 2px, transparent 16px),
        linear-gradient(160deg, var(--sage-100) 0%, var(--sage-200) 100%);
    border: 1px dashed var(--stone-line);
    overflow: hidden;
}
.placeholder::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(16,32,26,0.06) 100%);
}
/* aspect ratio boxes */
.ph-hero      { padding-bottom: 44%; }
.ph-square    { padding-bottom: 100%; }
.ph-wide      { padding-bottom: 56.25%; }
.ph-portrait  { padding-bottom: 130%; }
.ph-banner    { padding-bottom: 24%; }
.ph-card      { padding-bottom: 68%; }
.ph-logo      { padding-bottom: 42%; background: var(--white); border-style: solid; }
.ph-map       { padding-bottom: 62%; }

/* Real Google Maps embed — intentionally shorter than the placeholder it
   replaces (client requested a reduced size). */
.location-map {
    width: 100%; height: 380px;
    border-radius: var(--radius-md); overflow: hidden;
    border: 1px solid var(--stone-line); box-shadow: var(--shadow-sm);
}

.placeholder__inner {
    position: absolute; inset: 0; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 20px; color: var(--ink-500);
}
.placeholder__icon { color: var(--gold-600); opacity: 0.7; margin-bottom: 10px; }
.placeholder__label { font-family: var(--font-utility); font-weight: 600; font-size: 0.92rem; color: var(--pine-800); margin: 0; }
.placeholder__dims { font-family: var(--font-utility); font-size: 0.78rem; color: var(--ink-500); margin: 4px 0 0; }
.placeholder__desc { font-size: 0.82rem; color: var(--ink-500); max-width: 34ch; margin: 8px 0 0; }

/* Real photography — companion to the placeholder component above.
   Used once real images are dropped into /assets/images/. */
.photo { width: 100%; display: block; }
.photo--rounded { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.photo--wide { width: 100%; height: auto; }
.gallery-grid img.photo { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }
.gallery-grid img.photo.placeholder--wide { grid-column: span 2; aspect-ratio: 21 / 9; }

/* No-JS fallback status banner (JS users see an inline message inside the
   lead modal instead — see assets/js/main.js) */
.page-alert { padding: 14px 0; font-family: var(--font-utility); font-size: 0.88rem; text-align: center; }
.page-alert--success { background: rgba(46, 107, 96, 0.14); color: var(--teal-600); }
.page-alert--error { background: rgba(173, 62, 44, 0.12); color: #A33B29; }

/* -------------------------------------------------------------------------
   10. FOOTER & STICKY CTA
   ---------------------------------------------------------------------- */
.cta-band { background: var(--pine-900); color: var(--sage-50); position: relative; overflow: hidden; }
.cta-band__inner { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: center; padding: 64px 0; }
.cta-band__mark { width: 60px; height: 40px; color: var(--gold-500); opacity: 0.8; }
.cta-band__copy h2 { color: var(--white); margin-bottom: 10px; }
.cta-band__copy p { color: rgba(248,248,243,0.68); margin: 0; }
.cta-band__actions { display: flex; gap: 14px; flex-wrap: wrap; }

.site-footer { background: var(--pine-800); color: rgba(248,248,243,0.78); padding-top: 72px; }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 56px; }
.site-footer__logo-card {
    display: inline-flex; align-items: center; background: var(--sage-50);
    border-radius: 10px; padding: 12px 18px; margin-bottom: 20px;
}
.site-footer__logo { height: 30px; width: auto; display: block; }
.site-footer__developer-card {
    display: inline-flex; align-items: center; background: var(--sage-50);
    border-radius: 10px; padding: 10px 16px; margin-top: 20px;
}
.site-footer__developer-logo { height: 34px; width: auto; display: block; }
.site-footer__col--brand p { color: rgba(248,248,243,0.6); font-size: 0.92rem; max-width: 34ch; }
.site-footer__col p { color: rgba(248,248,243,0.6); font-size: 0.88rem; margin-bottom: 16px; }
.site-footer__rera { font-family: var(--font-utility); font-size: 0.78rem; color: var(--gold-400); }
.site-footer h3 { color: var(--white); font-size: 0.95rem; font-family: var(--font-utility); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 18px; }
.site-footer ul li { margin-bottom: 11px; font-size: 0.92rem; }
.site-footer a:hover { color: var(--gold-400); }
.site-footer__contact li { color: rgba(248,248,243,0.68); }
.site-footer__legal {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    padding: 22px 0; border-top: 1px solid rgba(248,248,243,0.12); font-size: 0.8rem; color: rgba(248,248,243,0.5);
}
.site-footer__legal a { text-decoration: underline; }

.sticky-cta {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    display: none; grid-template-columns: repeat(2, 1fr);
    background: var(--white); border-top: 1px solid var(--stone-line); box-shadow: 0 -6px 24px rgba(16,32,26,0.1);
}
.sticky-cta__btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 16px 8px; font-family: var(--font-utility); font-size: 0.86rem; font-weight: 600;
    border-right: 1px solid var(--stone-line); border-top: none; border-bottom: none; border-left: none;
    background: none;
}
.sticky-cta__btn:last-child { border-right: none; }
.sticky-cta__btn--call { color: var(--pine-800); }
.sticky-cta__btn--enquire { background: var(--gold-500); color: var(--pine-900); }

/* Desktop-only floating side CTA (independent of the sticky header's CTA) */
.desktop-side-cta {
    position: fixed; top: 50%; right: 22px; transform: translateY(-50%);
    z-index: 95;
    display: flex; align-items: center; gap: 9px;
    background: var(--gold-500); color: var(--pine-900);
    border: none; border-radius: 100px;
    padding: 14px 22px 14px 18px;
    font-family: var(--font-utility); font-size: 0.9rem; font-weight: 600;
    box-shadow: var(--shadow-md);
    transition: background 0.18s ease, transform 0.18s ease;
}
.desktop-side-cta:hover { background: var(--gold-400); transform: translateY(-50%) translateX(-2px); }

/* -------------------------------------------------------------------------
   11. FORMS
   ---------------------------------------------------------------------- */
.form-card { background: var(--white); border: 1px solid var(--stone-line); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-md); }
.form-row { margin-bottom: 20px; }
.form-row label { display: block; font-family: var(--font-utility); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-700); margin-bottom: 8px; }
.form-row input, .form-row select, .form-row textarea {
    width: 100%; padding: 13px 15px; border: 1px solid var(--stone-line); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 0.96rem; background: var(--sage-50); color: var(--ink-900);
    transition: border-color 0.18s ease, background 0.18s ease;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--gold-500); background: var(--white); outline: none; }
.form-row--split { display: flex; gap: 12px; }
.form-row__code { flex: 0 0 92px; }
.form-row__code select { padding-left: 10px; padding-right: 6px; }
.form-row__phone { flex: 1; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-note { font-size: 0.8rem; color: var(--ink-500); margin-top: 14px; }
.form-honeypot {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.form-alert { padding: 16px 18px; border-radius: var(--radius-sm); margin-bottom: 22px; font-size: 0.92rem; }
.form-alert--success { background: rgba(46,107,96,0.12); color: var(--teal-600); border: 1px solid rgba(46,107,96,0.3); }
.form-alert--error { background: rgba(173, 62, 44, 0.1); color: #A33B29; border: 1px solid rgba(173,62,44,0.3); }

/* Contact page split */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.contact-info-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--stone-line); }
.contact-info-item svg { color: var(--gold-600); flex-shrink: 0; margin-top: 3px; }
.contact-info-item h4 { margin: 0 0 4px; font-family: var(--font-utility); font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pine-900); }
.contact-info-item p { margin: 0; font-size: 0.92rem; }

/* -------------------------------------------------------------------------
   LEAD-CAPTURE MODAL
   Every .js-open-lead CTA on the page opens this same Name+Phone+Email
   modal (see assets/js/main.js). Kept deliberately minimal to keep
   friction low for conversion.
   ---------------------------------------------------------------------- */
.lead-modal {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
}
.lead-modal.is-open { opacity: 1; pointer-events: auto; }
.lead-modal__backdrop {
    position: absolute; inset: 0; background: rgba(16, 32, 26, 0.55); backdrop-filter: blur(2px);
}
.lead-modal__dialog {
    position: relative; z-index: 1;
    width: 100%; max-width: min(440px, calc(100vw - 48px));
    background: var(--white); border-radius: var(--radius-lg);
    padding: 40px 36px 34px;
    box-shadow: var(--shadow-lg);
    transform: translateY(14px) scale(0.98);
    transition: transform 0.22s ease;
}
.lead-modal.is-open .lead-modal__dialog { transform: translateY(0) scale(1); }
.lead-modal__close {
    position: absolute; top: 16px; right: 16px;
    width: 34px; height: 34px; border-radius: 50%; border: none;
    background: var(--sage-100); color: var(--ink-700);
    display: flex; align-items: center; justify-content: center;
}
.lead-modal__close:hover { background: var(--sage-200); }
.lead-modal__sub { font-size: 0.92rem; margin-bottom: 24px; }

@media (max-width: 480px) {
    .lead-modal__dialog { padding: 32px 24px 28px; }
}

/* -------------------------------------------------------------------------
   THANK YOU PAGE
   ---------------------------------------------------------------------- */
.thank-you__icon {
    width: 76px; height: 76px; border-radius: 50%;
    background: var(--sage-100); color: var(--teal-600);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 22px;
}
.thank-you__actions {
    display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
    margin-bottom: 28px;
}
.thank-you__phone-note { font-size: 0.94rem; color: var(--ink-500); margin-bottom: 40px; }
.thank-you__phone-note a { color: var(--gold-600); font-weight: 600; }
.thank-you__back { font-family: var(--font-utility); font-size: 0.88rem; color: var(--ink-700); font-weight: 600; }
.thank-you__back:hover { color: var(--gold-600); }

@media (max-width: 560px) {
    .thank-you__actions { flex-direction: column; }
    .thank-you__actions .btn { width: 100%; }
}

/* -------------------------------------------------------------------------
   12. RESPONSIVE
   ---------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .stats-strip { grid-template-columns: repeat(2, 1fr); }
    .card-grid { grid-template-columns: repeat(2, 1fr); }
    .plot-grid { grid-template-columns: repeat(3, 1fr); }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    :root { --header-h: 58px; }

    /* Scoped (not global) horizontal-overflow guard: the off-canvas nav
       drawer below is positioned via `right` so it sits outside the
       viewport when closed, but some browsers still factor an
       out-of-viewport fixed-position element into the page's scrollable
       width. overflow-x:hidden reliably prevents that — but applying it
       globally on <html>/<body> also disables position:sticky on the
       header in some engines, so it's scoped to mobile widths only,
       where the drawer actually exists and where the header's sticky
       behavior matters least (the sticky bottom bar covers quick actions
       here instead). Desktop is completely unaffected. */
    html, body { overflow-x: hidden; }

    .main-nav {
        /* Positioned via `right` (not `transform`) — a transform-based
           slide-in can get included in scrollWidth by some browser
           compositors even though the element is visually off-screen,
           which previously caused a stray horizontal scrollbar site-wide.
           Offsetting via `right` avoids that entirely and is the standard
           pattern for off-canvas menus. */
        position: fixed; top: var(--header-h); right: -100%; bottom: 0;
        width: min(86vw, 380px);
        background: var(--sage-50); transition: right 0.3s ease;
        padding: 34px 28px; overflow-y: auto;
    }
    .main-nav.is-open { right: 0; }
    .main-nav ul { flex-direction: column; gap: 6px; }
    .main-nav a { display: block; padding: 14px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--stone-line); }
    .nav-toggle { display: flex; }
    .site-header__actions .btn--gold.btn--sm { display: none; }
    .desktop-side-cta { display: none; }
    .trust-strip { display: none; } /* Trust strip hidden on mobile — client request */
    .hero__eyebrow-row { display: none; } /* HMDA/RERA badges hidden on mobile — client request */

    .hero__inner { grid-template-columns: 1fr; padding: 56px 0 48px; }
    .hero--photo { min-height: 560px; }
    .hero__inner--single { padding: 64px 0 56px; }
    .hero__quickfacts { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .hero__meta-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .hero__location { font-size: 1.16rem; }
    .hero__price { font-size: 1.7rem; }
    .sunburst-hero { width: 360px; height: 200px; right: -100px; top: -30px; }

    .overview__grid, .masterplan, .contact-grid { grid-template-columns: 1fr; }
    .card-grid { grid-template-columns: 1fr 1fr; }
    .plot-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-list { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid .placeholder--wide { grid-column: span 2; }
    .cta-band__inner { grid-template-columns: 1fr; text-align: center; }
    .cta-band__mark { margin: 0 auto; }
    .cta-band__actions { justify-content: center; }
    .site-footer__grid { grid-template-columns: 1fr; gap: 36px; }
    .form-grid-2 { grid-template-columns: 1fr; }
    .sticky-cta { display: grid; }
    body { padding-bottom: 58px; }

    .mini-cta__inner { text-align: center; justify-content: center; }
    .mini-cta__copy { min-width: 0; width: 100%; }
    .mini-cta__action { width: 100%; }
    .mini-cta__action .btn { width: 100%; }
    .gallery-carousel__nav { width: 38px; height: 38px; }
    .gallery-carousel__nav--prev { left: 6px; }
    .gallery-carousel__nav--next { right: 6px; }

    /* Amenities: cap to the first 10 pills by default to keep the page
       shorter on mobile; "View All Amenities" (JS) reveals the rest by
       adding .is-expanded to the container. */
    .amenity-pills:not(.is-expanded) .amenity-pill:nth-child(n+11) { display: none; }
    .amenity-toggle { display: block; }
}

@media (max-width: 560px) {
    .section { padding: 64px 0; }
    .wrap { padding: 0 20px; }
    .stats-strip { grid-template-columns: repeat(2, 1fr); }
    .card-grid, .plot-grid, .gallery-grid { grid-template-columns: 1fr 1fr; }
    .hero__quickfacts { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .form-card { padding: 26px; }
    .location-table { font-size: 0.82rem; }
    .location-map { height: 280px; }
    .hero__meta-row { gap: 10px; }
}