html, body, button, input, textarea, select, .site, .page, main, section, header, footer, nav, h1, h2, h3, h4, h5, h6, p, a, span, li, label, strong, small, div {
    font-family: "Inter Tight", sans-serif;
}

/* =========================================================
   SUMAYA G2 — FULL SITE STYLESHEET
   Palette: navy / white / slate — single font family (Inter Tight)
   ========================================================= */

:root {
    font-family: "Inter Tight", sans-serif;
    --navy-900: #14173F;
    --navy-800: #191D52;
    --navy-700: #262B6B;
    --navy-hero: #2E3378;
    --navy-card: #2A2F70;
    --ink: #14162B;
    --text-muted: #6B7086;
    --line: rgba(20, 22, 60, 0.09);
    --bg-alt: #F5F6FB;
    --white: #FFFFFF;
    --max-width: 1320px;
    --radius: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    min-width: 320px;
    background: var(--white);
    color: var(--ink);
    font-family: "Inter Tight", Arial, sans-serif;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }

.section-inner {
    width: min(calc(100% - 48px), var(--max-width));
    margin: 0 auto;
}


/* =========================================================
   SHARED TYPOGRAPHY
   ========================================================= */

.section-eyebrow {
    display: block;
    margin-bottom: 12px;
    color: var(--navy-hero);
    font-family: "Inter Tight", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.section-eyebrow--center { text-align: center; }
.section-eyebrow--light { color: #AEB4F2; }

.section-heading {
    color: var(--ink);
    font-family: "Inter Tight", sans-serif;
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.section-heading--center { text-align: center; max-width: 640px; margin: 0 auto; }
.section-heading--light { color: #ffffff; }

.section-text {
    max-width: 620px;
    margin-top: 16px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.6;
}

.section-text--center { max-width: 620px; margin-left: auto; margin-right: auto; text-align: center; }
.section-text--light { color: rgba(255, 255, 255, 0.68); }


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 26px;
    border-radius: 999px;
    font-family: "Inter Tight", sans-serif;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn--white { background: #ffffff; color: var(--navy-900); }
.btn--white:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }

.btn--outline-light { background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.5); }
.btn--outline-light:hover { background: rgba(255, 255, 255, 0.1); border-color: #ffffff; }

.btn--dark { background: var(--navy-900); color: #ffffff; }
.btn--dark:hover { background: var(--navy-700); transform: translateY(-2px); }

.btn--block { width: 100%; margin-top: 16px; }
.btn--sm { min-height: 44px; padding: 0 20px; margin-top: 20px; font-size: 12px; }


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    background: transparent;
    border-bottom: none;
}

.header-inner {
    width: min(calc(100% - 48px), var(--max-width));
    min-height: 92px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; }

.brand-logo {
    display: block;
    width: 188px;
    height: 71px;
    max-width: 188px;
    max-height: 71px;
    object-fit: contain;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 36px;
    margin-left: auto;
}

.main-nav a {
    position: relative;
    color: rgba(255,255,255,0.82);
    font-family: "Inter Tight", sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    padding-bottom: 7px;
    transition: color 0.2s ease;
}

.main-nav a:hover,
.main-nav a.active { color: #ffffff; }

.main-nav a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #ffffff;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 14px;
}

.header-cta {
    min-height: 50px;
    padding: 0 25px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(12, 32, 58, 0.32);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.78);
    border-radius: 999px;
    font-family: "Inter Tight", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.header-cta span { font-size: 18px; line-height: 1; }

.header-cta:hover {
    background: rgba(12, 32, 58, 0.55);
    border-color: #ffffff;
}

.header-icon-btn { display: none !important; }


/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;
    min-height: 900px;
    height: 100vh;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(8, 28, 54, 0.82) 0%,
            rgba(8, 28, 54, 0.62) 28%,
            rgba(8, 28, 54, 0.20) 58%,
            rgba(8, 28, 54, 0.02) 82%,
            rgba(8, 28, 54, 0) 100%
        ),
        url("ChatGPT\ Image\ Sep\ 22\,\ 2026\,\ 06_20_27\ PM.png") center center / cover no-repeat;
}

.hero-grid { display: none; }

.hero-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: 900px;
    padding-top: 174px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hero-copy {
    width: min(520px, 48%);
}

.hero-rule {
    display: block;
    width: 48px;
    height: 3px;
    margin-bottom: 18px;
    background: rgba(255,255,255,0.85);
}

.hero h1 {
    margin: 0;
    color: #ffffff;
    font-family: "Inter Tight", sans-serif;
    font-size: clamp(66px, 6vw, 92px);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.045em;
    white-space: nowrap;
}

.hero h1 span {
    color: #D5B36A;
}

.hero-copy h2 {
    margin-top: 18px;
    color: #ffffff;
    font-family: "Inter Tight", sans-serif;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.06em;
}

.hero-description {
    max-width: 510px;
    margin-top: 20px;
    color: rgba(255,255,255,0.82);
    font-family: "Inter Tight", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

.hero-meta {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.hero-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-meta-item > span {
    color: rgba(255,255,255,0.82);
    font-family: "Inter Tight", sans-serif;
    font-size: 13px;
    font-weight: 400;
}

.hero-meta-item strong {
    color: #ffffff;
    font-family: "Inter Tight", sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
}

.hero-meta-item small {
    font-size: 17px;
    font-weight: 500;
}

.hero-meta-divider {
    width: 1px;
    height: 48px;
    margin: 0 20px;
    background: rgba(255,255,255,0.65);
}

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.hero-buttons .btn {
    min-height: 56px;
    padding: 0 34px;
    border-radius: 999px;
    font-family: "Inter Tight", sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.hero-primary-btn {
    gap: 14px;
    background: var(--navy-900);
    color: #ffffff;
    border: 1px solid #ffffff;
}

.hero-primary-btn:hover {
    background: var(--navy-700);
    transform: translateY(-2px);
}

.hero-primary-btn span {
    font-size: 22px;
    line-height: 1;
}

.hero-secondary-btn {
    background: var(--navy-900);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.8);
}

.hero-secondary-btn:hover {
    background: var(--navy-700);
}

/* Full-width blue feature strip — bleeds edge-to-edge, inner content stays aligned */
.hero-feature-strip {
    position: relative;
    z-index: 3;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    transform: none;
    background: rgba(8, 28, 54, 0.93);
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-top: 30px;
    padding-bottom: 32px;
    padding-left: max(24px, calc((100vw - 1320px) / 2));
    padding-right: max(24px, calc((100vw - 1320px) / 2));
}

.hero-feature-strip .stat-cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    padding: 0 36px;
    border-left: 1px solid rgba(255,255,255,0.18);
}

.hero-feature-strip .stat-cell:first-child { border-left: none; }

.hero-feature-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: brightness(0) invert(1);
}

.hero-feature-icon--building {
    background-image: url("apartment_24dp_FFFFFF_FILL0_wght400_GRAD0_opsz24.svg");
}

.hero-feature-icon--goods {
    background-image: url("package_2_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg");
}

.hero-feature-icon--water {
    background-image: url("humidity_high_20dp_000000_FILL0_wght400_GRAD0_opsz20.svg");
}

.hero-feature-icon--fire {
    background-image: url("fire_extinguisher_20dp_000000_FILL0_wght400_GRAD0_opsz20.svg");
}

.hero-feature-strip .stat-value {
    display: block;
    color: #ffffff;
    font-family: "Inter Tight", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
}

.hero-feature-strip .stat-value small {
    display: inline;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
}

.hero-feature-strip .stat-desc {
    display: block;
    margin-top: 7px;
    color: rgba(255,255,255,0.66);
    font-family: "Inter Tight", sans-serif;
    font-size: 13px;
    line-height: 1.35;
}

/* =========================================================
   OVERVIEW SECTION — heading left, copy + badges right
   ========================================================= */

.overview-section {
    padding-top: 140px;
    padding-bottom: 100px;
}

.overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    margin-bottom: 40px;
}

.overview-heading .section-heading { margin-top: 4px; max-width: 560px; }

.overview-copy .section-text { max-width: 100%; margin-top: 0; }

.tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.tag {
    padding: 8px 14px;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--navy-900);
}

.overview-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--navy-900);
    aspect-ratio: 16 / 7.5;
    background: var(--bg-alt);
}

.overview-image img { width: 100%; height: 100%; object-fit: cover; }

.overview-bar {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--navy-900);
    border-radius: 12px;
    overflow: hidden;
}

.overview-bar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-left: 1px solid var(--line);
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}

.overview-bar-item:first-child { border-left: none; }
.overview-bar-icon { font-size: 14px; color: var(--navy-900); }
.overview-bar-item small { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 2px; }


/* =========================================================
   USPS SECTION (bento grid)
   ========================================================= */

.usps-section { padding: 110px 0; background: var(--bg-alt); }
.usps-heading { margin-bottom: 50px; }

.usps-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.usp-card {
    grid-column: span 2;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.usp-card--wide { grid-column: span 3; }

.usp-card:hover { transform: translateY(-4px); box-shadow: 0 20px 34px rgba(20, 22, 60, 0.08); }

.usp-card--dark { background: var(--navy-900); border-color: var(--navy-900); }
.usp-card--dark h3, .usp-card--dark .usp-tag { color: #ffffff; }
.usp-card--dark p { color: rgba(255, 255, 255, 0.65); }

.usp-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-alt);
    color: var(--navy-900);
    border-radius: 10px;
    font-size: 17px;
    margin-bottom: 40px;
}

.usp-icon--light { background: rgba(255, 255, 255, 0.12); color: #ffffff; }

.usp-tag {
    display: block;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.usp-card h3 { font-family: "Inter Tight", sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.usp-card p { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; }


/* =========================================================
   CONFIGURATIONS SECTION
   ========================================================= */

.config-section { padding: 110px 0; background: var(--white); }

.config-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.config-heading .section-heading { max-width: 480px; }

.config-legend {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 10px 22px;
    background: var(--bg-alt);
    border-radius: 999px;
    border: 1px solid var(--line);
}

.config-legend-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy-900);
    color: #ffffff;
    border-radius: 50%;
    font-size: 13px;
}

.config-legend-item { display: flex; flex-direction: column; font-size: 12px; font-weight: 700; color: var(--ink); }
.config-legend-item small { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; }

.config-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.config-table { width: 100%; border-collapse: collapse; min-width: 780px; }

.config-table thead { background: var(--bg-alt); }

.config-table th {
    text-align: left;
    padding: 16px 20px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.config-table td {
    padding: 18px 20px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    color: var(--ink);
    vertical-align: middle;
}

.config-table td small { display: block; color: var(--text-muted); font-size: 11px; font-weight: 500; margin-top: 2px; }
.config-table td div { display: inline-flex; flex-direction: column; }

.type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 12px;
    background: var(--bg-alt);
    color: var(--navy-900);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
}

tr.is-highlighted { background: var(--navy-900); }
tr.is-highlighted td { color: #ffffff; border-top-color: rgba(255, 255, 255, 0.12); }
tr.is-highlighted .type-badge { background: rgba(255, 255, 255, 0.15); color: #ffffff; }
tr.is-highlighted small { color: rgba(255, 255, 255, 0.6) !important; }

.table-link {
    display: inline-flex;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.table-link--dark { background: #ffffff; color: var(--navy-900); border-color: #ffffff; }

.config-footnote {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding: 16px 20px;
    background: var(--bg-alt);
    border-radius: 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.config-footnote-link { color: var(--navy-900); font-weight: 700; }


/* =========================================================
   AMENITIES SECTION
   ========================================================= */

.amenities-section { padding: 110px 0; background: var(--navy-900); }
.amenities-section .section-heading { margin-top: 2px; max-width: 620px; }
.amenities-section .section-text { margin-bottom: 46px; }

.amenities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.amenity-card {
    background: var(--navy-card);
    border-radius: 14px;
    padding: 24px;
}

.amenity-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: var(--navy-900);
    border-radius: 9px;
    font-size: 15px;
    margin-bottom: 14px;
}

.amenity-card h3 { color: #ffffff; font-family: "Inter Tight", sans-serif; font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.amenity-card p { font-size: 12.5px; color: rgba(255, 255, 255, 0.6); line-height: 1.5; }


/* =========================================================
   GALLERY SECTION
   ========================================================= */

.gallery-section { padding: 110px 0; background: var(--white); }

.gallery-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    margin-bottom: 34px;
}

.gallery-heading .section-text { margin-top: 0; }

.gallery-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 18px;
    height: 560px;
}

.gallery-item {
    position: relative;
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    background: linear-gradient(200deg, #c7cadb 0%, var(--navy-900) 100%);
}

.gallery-item--large { grid-row: span 2; }

.gallery-item img { width: 100%; height: 100%; object-fit: cover; opacity: 0.001; }

.gallery-caption {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gallery-tag {
    align-self: flex-start;
    padding: 5px 12px;
    background: #ffffff;
    color: var(--navy-900);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.gallery-caption strong { color: #ffffff; font-family: "Inter Tight", sans-serif; font-size: 18px; font-weight: 700; }
.gallery-caption small { color: rgba(255, 255, 255, 0.75); font-size: 12px; max-width: 380px; }


/* =========================================================
   LOCATION SECTION
   ========================================================= */

.location-section { padding: 110px 0; background: var(--bg-alt); }
.location-section .section-heading { max-width: 620px; }

.location-subheading {
    margin-top: 14px;
    color: var(--navy-900);
    font-family: "Inter Tight", sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.location-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin-top: 40px;
    align-items: start;
}

.location-left { display: flex; flex-direction: column; gap: 20px; }

.location-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
}

.location-card-head {
    display: flex;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.location-card-title {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 16px;
}

.location-list li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13.5px;
}

.location-list li:last-child { border-bottom: none; }
.location-list li span:first-child { color: var(--ink); font-weight: 600; }
.location-list li span:last-child { color: var(--navy-900); font-weight: 700; }

.corridor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }

.corridor-pill {
    padding: 12px 14px;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
}

.location-right { display: flex; flex-direction: column; gap: 18px; }

.map-illustration {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    aspect-ratio: 16 / 13;
}

.map-illustration svg { width: 100%; height: 100%; display: block; }

.map-pin {
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -120%);
    background: var(--navy-900);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
}

.map-callout {
    display: flex;
    gap: 14px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
}

.map-callout-icon { font-size: 20px; }
.map-callout small { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; }
.map-callout strong { display: block; font-family: "Inter Tight", sans-serif; font-size: 15px; margin-bottom: 6px; }
.map-callout p { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer { background: var(--navy-900); color: rgba(255, 255, 255, 0.7); padding-top: 90px; scroll-margin-top: 100px; }

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1.2fr;
    gap: 50px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand .brand-text strong { color: #ffffff; }
.footer-brand .brand-text small { color: rgba(255, 255, 255, 0.5); }

.footer-tagline { margin-top: 18px; font-size: 13px; line-height: 1.65; color: rgba(255, 255, 255, 0.55); max-width: 320px; }

.footer-badge {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.75);
}

.footer-partner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.footer-partner span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.footer-partner-logo {
    height: 18px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.footer-col h4 { color: #ffffff; font-family: "Inter Tight", sans-serif; font-size: 13px; font-weight: 700; margin-bottom: 18px; letter-spacing: 0.03em; }
.footer-col li { margin-bottom: 12px; font-size: 13px; line-height: 1.6; }
.footer-col a:hover { color: #ffffff; }
.footer-contact li { display: flex; gap: 8px; align-items: flex-start; }

.footer-bottom { padding: 26px 0; }

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

.footer-bottom-inner .footer-legal {
    margin-left: auto;
}

.footer-legal { display: flex; gap: 20px; }
.footer-legal a:hover { color: #ffffff; }


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }


/* =========================================================
   HERO REFERENCE RESPONSIVE OVERRIDES
   ========================================================= */
@media (max-width: 1050px) {
    .hero { min-height: 820px; height: auto; }
    .hero-inner { min-height: 820px; padding-top: 150px; }
    .hero-copy { width: min(620px, 70%); }
    .hero h1 { font-size: clamp(58px, 8vw, 78px); }
    .hero-feature-strip { grid-template-columns: repeat(2, 1fr); }
    .hero-feature-strip .stat-cell:nth-child(3) { border-left: none; }
}

@media (max-width: 700px) {
    .overview-grid { grid-template-columns: 1fr; gap: 30px; }
    .overview-section { padding-top: 60px; }
    .site-header { position: absolute; }
    .header-inner { min-height: 76px; }
    .brand-logo { width: 150px; height: auto; }
    .header-actions { margin-left: auto; }
    .header-cta { min-height: 44px; padding: 0 16px; font-size: 11px; }
    .hero { min-height: 780px; height: auto; }
    .hero-inner { min-height: 780px; padding-top: 130px; }
    .hero-copy { width: 100%; }
    .hero h1 { font-size: clamp(52px, 16vw, 70px); white-space: normal; }
    .hero-copy h2 { font-size: 17px; letter-spacing: 0.045em; }
    .hero-description { font-size: 14px; }
    .hero-desktop-break { display: none; }
    .hero-meta-item strong { font-size: 24px; }
    .hero-meta-item small { font-size: 14px; }
    .hero-meta-divider { margin: 0 14px; }
    .hero-buttons .btn { min-height: 50px; padding: 0 22px; }
    .hero-feature-strip { padding-left: 16px; padding-right: 16px; grid-template-columns: 1fr; padding-top: 8px; padding-bottom: 8px; }
    .hero-feature-strip .stat-cell,
    .hero-feature-strip .stat-cell:nth-child(3) { border-left: none; border-top: 1px solid rgba(255,255,255,0.15); padding: 18px 8px; }
    .hero-feature-strip .stat-cell:first-child { border-top: none; }
    .hero-feature-icon { width: 44px; height: 44px; flex-basis: 44px; }
    .hero-feature-strip .stat-value,
    .hero-feature-strip .stat-value small { font-size: 16px; }
    .hero-feature-strip .stat-desc { font-size: 12px; }
}

@media (max-width: 1050px) {
    .main-nav { display: none; }
    .header-inner { justify-content: space-between; }
    .usps-grid { grid-template-columns: repeat(2, 1fr); }
    .usp-card, .usp-card--wide { grid-column: span 1; }
    .amenities-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
    .gallery-item { aspect-ratio: 4 / 3; }
    .gallery-item--large { grid-row: auto; aspect-ratio: 16/10; }
    .location-grid { grid-template-columns: 1fr; }
    .stat-card { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
    .stat-cell:nth-child(3) { border-left: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {
    .section-inner { width: calc(100% - 32px); }

    .header-inner { min-height: 68px; }
    .header-cta { display: none; }

    .hero-inner { padding-top: 40px; }
    .hero h1 { font-size: clamp(32px, 10vw, 46px); }
    .hero-description { font-size: 15px; }

    .stat-card { grid-template-columns: 1fr; padding: 10px 22px; transform: translateY(30%); }
    .stat-cell { border-left: none !important; border-top: 1px solid var(--line); padding: 18px 0; }
    .stat-cell:first-child { border-top: none; }

    .usps-section, .config-section, .amenities-section, .gallery-section, .location-section { padding: 70px 0; }

    .usps-grid, .amenities-grid { grid-template-columns: 1fr; }
    .config-heading { flex-direction: column; align-items: flex-start; }
    .config-legend { flex-wrap: wrap; }
    .corridor-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
}


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




/* Paragraph text color */
p {
    color: #000000;
}

.hero-description {
    color: #ffffff;
}


/* Show the sharp HD overview image (previously hidden in favor of a blurry background) */
.overview-image img { opacity: 1; }


/* =========================================================
   GALLERY IMAGES
   01 — GALA INTERIOR · MEZZANINE
   02 — DUAL-SIDE DOCKS
   03 — FACADE MODULES
   ========================================================= */

.gallery-item:nth-child(1) {
    background: url("1.png") center center / cover no-repeat;
}

.gallery-item:nth-child(2) {
    background: url("2.png") center center / cover no-repeat;
}

.gallery-item:nth-child(3) {
    background: url("3.png") center center / cover no-repeat;
}

/* Hide placeholder/empty image elements so the CSS images remain visible */
.gallery-item:nth-child(1) img,
.gallery-item:nth-child(2) img,
.gallery-item:nth-child(3) img {
    opacity: 0;
}


/* Black overlay on gallery images */
.gallery-item:nth-child(1)::before,
.gallery-item:nth-child(2)::before,
.gallery-item:nth-child(3)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
    pointer-events: none;
}

.gallery-item:nth-child(1) .gallery-caption,
.gallery-item:nth-child(2) .gallery-caption,
.gallery-item:nth-child(3) .gallery-caption {
    z-index: 2;
}

/* White text for the first gallery description */
.gallery-item:nth-child(1) .gallery-caption small {
    color: #ffffff;
}

/* Dedicated Entry — door SVG icon */
.usp-card:first-child .usp-icon {
    font-size: 0;
}

.usp-card:first-child .usp-icon::before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background: url("door_back_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg") center / contain no-repeat;
}

/* 2nd USP card — elevator SVG icon */
.usp-card:nth-child(2) .usp-icon {
    font-size: 0;
}

.usp-card:nth-child(2) .usp-icon::before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background: url("elevator_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg") center / contain no-repeat;
}

/* 3rd USP card — package SVG icon */
.usp-card:nth-child(3) .usp-icon {
    font-size: 0;
}

.usp-card:nth-child(3) .usp-icon::before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background: url("package_2_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg") center / contain no-repeat;
}

/* 4th USP card — compare arrows SVG icon */
.usp-card:nth-child(4) .usp-icon {
    font-size: 0;
}

.usp-card:nth-child(4) .usp-icon::before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background: url("compare_arrows_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg") center / contain no-repeat;
}

/* 5th USP card — detector SVG icon */
.usp-card:nth-child(5) .usp-icon {
    font-size: 0;
}

.usp-card:nth-child(5) .usp-icon::before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background: url("detector_co_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg") center / contain no-repeat;
}

/* 6th USP card — assignment turned in SVG icon */
.usp-card:nth-child(6) .usp-icon {
    font-size: 0;
}

.usp-card:nth-child(6) .usp-icon::before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background: url("assignment_turned_in_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg") center / contain no-repeat;
}

/* 7th USP card — apartment SVG icon */
.usp-card:nth-child(7) .usp-icon {
    font-size: 0;
}

.usp-card:nth-child(7) .usp-icon::before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background: url("apartment_24dp_FFFFFF_FILL0_wght400_GRAD0_opsz24.svg") center / contain no-repeat;
}


/* Remove the leading dash from the overview eyebrow */
.overview-heading .section-eyebrow {
    font-size: 0;
}

.overview-heading .section-eyebrow::after {
    content: "BUILT FOR BOLD AMBITIONS";
    font-size: 11px;
}

/* User icon for the last overview badge */
.tag-row .tag:last-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tag-row .tag:last-child::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    background: url("account_circle_18dp_141740_FILL0_wght400_GRAD0_opsz20.svg") center / contain no-repeat;
}

/* Remove the original leading icon from the last badge */
.tag-row .tag:last-child {
    font-size: 0;
}

.tag-row .tag:last-child::before {
    font-size: 14px;
    margin: 0;
}

.tag-row .tag:last-child::after {
    content: "Dedicated Goods & Staff Access";
    font-size: 12px;
    font-weight: 600;
}

/* Check icon for the first overview badge — Dual-Side Openings */
.tag-row .tag:first-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0;
}

.tag-row .tag:first-child::before {
    content: "";
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background: url("check_small_18dp_141740_FILL0_wght400_GRAD0_opsz20.svg") center / contain no-repeat;
}

.tag-row .tag:first-child::after {
    content: "Dual-Side Openings";
    font-size: 12px;
    font-weight: 600;
}

/* House/shield icon for the second overview badge — Built-to-Suit Flexibility */
.tag-row .tag:nth-child(2) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0;
}

.tag-row .tag:nth-child(2)::before {
    content: "";
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background: url("house_with_shield_18dp_141740_FILL0_wght400_GRAD0_opsz20.svg") center / contain no-repeat;
}

.tag-row .tag:nth-child(2)::after {
    content: "Built-to-Suit Flexibility";
    font-size: 12px;
    font-weight: 600;
}

/* Keep only the supplied road SVG in the four arterial corridor pills */
.corridor-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0;
}

.corridor-pill::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background: url("road_18dp_141740_FILL0_wght400_GRAD0_opsz20.svg") center / contain no-repeat;
}

.corridor-pill::after {
    font-size: 12px;
    font-weight: 600;
}

.corridor-pill:nth-child(1)::after { content: "Mumbai–Delhi Expressway"; }
.corridor-pill:nth-child(2)::after { content: "Samruddhi Expressway"; }
.corridor-pill:nth-child(3)::after { content: "Mumbai–Pune Expressway"; }
.corridor-pill:nth-child(4)::after { content: "Nagpur–Mumbai Expressway"; }




/* Footer address — use the supplied white location SVG and remove the original emoji icon */
.footer-contact li:first-child {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0;
}

.footer-contact li:first-child::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background: url("location_on_20dp_FFFFFF_FILL0_wght400_GRAD0_opsz20.svg") center / contain no-repeat;
}

.footer-contact li:first-child::after {
    content: "MIDC, Additional Kalyan Bhiwandi Industrial Area, Village Kon, Taluka Bhiwandi, District Thane – 421311";
    display: block;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

/* View Location on Map button — use the supplied white location SVG */
.location-card .btn--block {
    gap: 8px;
    font-size: 0;
}

.location-card .btn--block::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background: url("location_on_20dp_FFFFFF_FILL0_wght400_GRAD0_opsz20.svg") center / contain no-repeat;
}

.location-card .btn--block::after {
    content: "View Location on Map";
    font-size: 13px;
    font-weight: 700;
}

/* Footer phone — use the supplied white phone SVG and remove the original emoji */
.footer-contact li:nth-child(2) {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0;
}

.footer-contact li:nth-child(2)::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background: url("phone_in_talk_20dp_FFFFFF_FILL0_wght400_GRAD0_opsz20.svg") center / contain no-repeat;
}

.footer-contact li:nth-child(2) a {
    font-size: 13px;
    line-height: 1.6;
}

/* Footer email — use the supplied white mail SVG and remove the original emoji */
.footer-contact li:nth-child(3) {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0;
}

.footer-contact li:nth-child(3)::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background: url("mail_20dp_FFFFFF_FILL0_wght400_GRAD0_opsz20.svg") center / contain no-repeat;
}

.footer-contact li:nth-child(3) a {
    font-size: 13px;
    line-height: 1.6;
}

/* Remove the phone/call icon from the header */
.header-icon-btn {
    display: none !important;
}






/* =========================================================
   FLOATING ENQUIRE BUTTON + POPUP FORM
   Themed to match the site's navy palette
   ========================================================= */

.floating-enquire-btn {
    position: fixed;
    right: 24px;
    bottom: 75px;
    z-index: 400;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    padding: 0 22px 0 18px;
    background: var(--navy-900);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-family: "Inter Tight", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(20, 23, 63, 0.35);
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.floating-enquire-btn:hover {
    background: var(--navy-700);
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(20, 23, 63, 0.42);
}

.floating-enquire-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    font-size: 13px;
}

.floating-enquire-text { white-space: nowrap; }

.enquiry-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(20, 23, 63, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.enquiry-overlay.is-open { opacity: 1; pointer-events: auto; }

.enquiry-modal {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 501;
    width: min(380px, calc(100% - 32px));
    background: #ffffff;
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(20, 23, 63, 0.35);
    padding: 28px;
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.enquiry-modal.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.enquiry-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-alt);
    border: none;
    border-radius: 50%;
    color: var(--navy-900);
    font-size: 13px;
    cursor: pointer;
}

.enquiry-modal-close:hover { background: var(--line); }

.enquiry-modal h3 {
    font-family: "Inter Tight", sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--navy-900);
    margin-bottom: 20px;
}

.enquiry-form { display: flex; flex-direction: column; }

.enquiry-form label {
    margin-top: 12px;
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.enquiry-form label span { color: #C0392B; }

.enquiry-form input,
.enquiry-form select {
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-family: "Inter Tight", sans-serif;
    font-size: 13.5px;
    color: var(--ink);
    background: #ffffff;
}

.enquiry-form input:focus,
.enquiry-form select:focus {
    outline: none;
    border-color: var(--navy-900);
}

.enquiry-form .btn--block { margin-top: 22px; }

.enquiry-form-note {
    margin-top: 14px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 480px) {
    .floating-enquire-text { display: none; }
    .floating-enquire-btn { padding: 0; width: 54px; justify-content: center; }
    .enquiry-modal { right: 16px; bottom: 16px; left: 16px; width: auto; }
}
/* Passenger Lifts amenity card — use the supplied elevator SVG */
.amenity-card:first-child .amenity-icon {
    font-size: 0;
}

.amenity-card:first-child .amenity-icon::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: url("elevator_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg") center / contain no-repeat;
}
/* Goods Lifts amenity card — use the supplied package SVG */
.amenity-card:nth-child(2) .amenity-icon {
    font-size: 0;
}

.amenity-card:nth-child(2) .amenity-icon::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: url("package_2_24dp_000000_FILL0_wght400_GRAD0_opsz24.svg") center / contain no-repeat;
}
/* Loading & Unloading amenity card — use the supplied truck SVG */
.amenity-card:nth-child(3) .amenity-icon {
    font-size: 0;
}

.amenity-card:nth-child(3) .amenity-icon::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: url("delivery_truck_bolt_20dp_000000_FILL0_wght400_GRAD0_opsz20.svg") center / contain no-repeat;
}
/* Large Rolling Shutters amenity card — use the supplied warehouse SVG */
.amenity-card:nth-child(4) .amenity-icon {
    font-size: 0;
}

.amenity-card:nth-child(4) .amenity-icon::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: url("warehouse_20dp_000000_FILL0_wght400_GRAD0_opsz20.svg") center / contain no-repeat;
}
/* Ventilation amenity card — use the supplied fan SVG */
.amenity-card:nth-child(5) .amenity-icon {
    font-size: 0;
}

.amenity-card:nth-child(5) .amenity-icon::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: url("fan_indirect_20dp_000000_FILL0_wght400_GRAD0_opsz20.svg") center / contain no-repeat;
}
/* Fire Safety amenity card — use the supplied fire extinguisher SVG */
.amenity-card:nth-child(6) .amenity-icon {
    font-size: 0;
}

.amenity-card:nth-child(6) .amenity-icon::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: url("fire_extinguisher_20dp_000000_FILL0_wght400_GRAD0_opsz20.svg") center / contain no-repeat;
}
/* Electrical Infrastructure amenity card — use the supplied bolt SVG */
.amenity-card:nth-child(7) .amenity-icon {
    font-size: 0;
}

.amenity-card:nth-child(7) .amenity-icon::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: url("bolt_20dp_000000_FILL0_wght400_GRAD0_opsz20.svg") center / contain no-repeat;
}
/* 24-Hour Water amenity card — use the supplied humidity/water SVG */
.amenity-card:nth-child(8) .amenity-icon {
    font-size: 0;
}

.amenity-card:nth-child(8) .amenity-icon::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: url("humidity_high_20dp_000000_FILL0_wght400_GRAD0_opsz20.svg") center / contain no-repeat;
}



/* =========================================================
   FINAL HERO REFERENCE OVERRIDES
   ========================================================= */
@media (min-width: 1051px) {
    .site-header { position: absolute; background: transparent; border-bottom: none; }
    .hero { min-height: 900px; height: 100vh; }
    .hero-inner { min-height: 900px; padding-top: 174px; }
    .hero-copy { width: min(520px, 48%); }
    .hero h1 { font-size: clamp(66px, 6vw, 92px); }
    .hero-feature-strip { grid-template-columns: repeat(4, 1fr); transform: none; }
}
@media (max-width: 1050px) {
    .site-header { position: absolute; background: transparent; border-bottom: none; }
    .hero { min-height: 820px; height: auto; }
    .hero-inner { min-height: 820px; padding-top: 150px; }
    .hero-copy { width: min(620px, 70%); }
    .hero-feature-strip { grid-template-columns: repeat(2, 1fr); transform: none; }
    .hero-feature-strip .stat-cell:nth-child(3) { border-left: none; }
}
@media (max-width: 700px) {
    .hero { min-height: 780px; height: auto; }
    .hero-inner { min-height: 780px; padding-top: 130px; }
    .hero-copy { width: 100%; }
    .hero h1 { font-size: clamp(52px, 16vw, 70px); white-space: normal; }
    .hero-copy h2 { font-size: 17px; }
    .hero-desktop-break { display: none; }
    .hero-feature-strip { grid-template-columns: 1fr; transform: none; }
    .hero-feature-strip .stat-cell,
    .hero-feature-strip .stat-cell:nth-child(3) { border-left: none; border-top: 1px solid rgba(255,255,255,0.15); }
    .hero-feature-strip .stat-cell:first-child { border-top: none; }
}

/* =========================================================
   HEADER ALIGNMENT + STICKY HEADER
   Keep header content aligned with .section-inner on every viewport.
   ========================================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
}

.header-inner {
    width: min(calc(100% - 48px), var(--max-width));
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 700px) {
    .header-inner {
        width: calc(100% - 32px);
        margin-left: auto;
        margin-right: auto;
    }
}


/* =========================================================
   FINAL STICKY HEADER — DARK BLUE ONLY AFTER SCROLL
   ========================================================= */

.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    background: transparent !important;
    border-bottom: 1px solid transparent !important;
    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.site-header.is-scrolled {
    background: #14173F !important;
    background-color: #14173F !important;
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 6px 24px rgba(20, 23, 63, 0.22) !important;
}

.site-header.is-scrolled .main-nav a {
    color: #ffffff !important;
}

.site-header.is-scrolled .main-nav a:hover,
.site-header.is-scrolled .main-nav a.active {
    color: #ffffff !important;
}

.site-header.is-scrolled .header-cta {
    background: #ffffff !important;
    color: #14173F !important;
    border-color: #ffffff !important;
}

.site-header.is-scrolled .header-cta:hover {
    background: #ffffff !important;
    color: #14173F !important;
}


/* =========================================================
   TELECOM & DATA — SUPPLIED SETTINGS ETHERNET ICON
   ========================================================= */

.amenity-card:nth-child(9) .amenity-icon {
    font-size: 0;
}

.amenity-card:nth-child(9) .amenity-icon::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background: url("settings_ethernet_20dp_000000_FILL0_wght400_GRAD0_opsz20.svg") center / contain no-repeat;
}


/* =========================================================
   PARKING & OPEN SPACES — SUPPLIED PARKING SIGN ICON
   ========================================================= */

.amenity-card:nth-child(10) .amenity-icon {
    font-size: 0;
}

.amenity-card:nth-child(10) .amenity-icon::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background: url("parking_sign_20dp_000000_FILL0_wght400_GRAD0_opsz20.svg") center / contain no-repeat;
}


/* =========================================================
   24×7 SECURITY — SUPPLIED CAMERA INDOOR ICON
   ========================================================= */

.amenity-card:nth-child(11) .amenity-icon {
    font-size: 0;
}

.amenity-card:nth-child(11) .amenity-icon::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background: url("camera_indoor_20dp_000000_FILL0_wght400_GRAD0_opsz20.svg") center / contain no-repeat;
}


/* =========================================================
   FOOTER LOGO — INCREASED SIZE
   ========================================================= */

.footer-brand .brand-logo {
    width: 200px;
    height: auto;
    max-width: 200px;
    max-height: none;
    object-fit: contain;
}


/* =========================================================
   DIGITAL PARTNER / ABSTRACT LOGO — KEEP VISIBLE IN FOOTER
   ========================================================= */

.footer-partner {
    display: flex !important;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 5;
}

.footer-partner-logo {
    display: block !important;
    visibility: visible !important;
    width: auto !important;
    height: 24px !important;
    max-width: 120px !important;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 1 !important;
}


/* =========================================================
   HERO — BOOK A SITE VISIT ARROW
   Supplied white outward arrow
   ========================================================= */

.hero .hero-buttons .btn--white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.hero .hero-buttons .btn--white::after {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    background: url("arrow_outward_22dp_FFFFFF_FILL0_wght400_GRAD0_opsz24.svg") center / contain no-repeat;
}


/* =========================================================
   BOOK A SITE VISIT — FORCE SUPPLIED WHITE ARROW
   Works with the current hero-primary-btn markup
   ========================================================= */

.hero .hero-buttons .hero-primary-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.hero .hero-buttons .hero-primary-btn span:last-child {
    font-size: 0 !important;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-block;
}

.hero .hero-buttons .hero-primary-btn span:last-child::after {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background: url("arrow_outward_22dp_FFFFFF_FILL0_wght400_GRAD0_opsz24.svg") center / contain no-repeat;
}


/* =========================================================
   HEADER — ENQUIRE NOW BUTTON
   SAME SUPPLIED WHITE OUTWARD ARROW
   ========================================================= */

.header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.header-cta::after {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    background: url("arrow_outward_22dp_FFFFFF_FILL0_wght400_GRAD0_opsz24.svg") center / contain no-repeat;
}


/* Remove the original/default arrow from the header Enquire Now button */
.header-cta .arrow,
.header-cta > span:last-child,
.header-cta::before {
    display: none !important;
    content: none !important;
}


/* Header Enquire Now arrow — white in the hero/top state */
.header-cta::after {
    filter: none !important;
}

/* Header Enquire Now arrow — dark only when the sticky header is scrolled */
.site-header.is-scrolled .header-cta::after {
    filter: brightness(0) saturate(100%) invert(9%) sepia(20%) saturate(3000%) hue-rotate(205deg) brightness(86%) contrast(95%) !important;
}


/* Remove the Downloadable Unit-by-Unit Floorplate PDF text */
.config-footnote-link {
    display: none !important;
}


/* =========================================================
   HERO — G+7 STRUCTURE ICON
   Replace the existing building icon with supplied 22dp icon
   ========================================================= */

.hero-feature-icon--building {
    background-image: url("apartment_22dp_FFFFFF_FILL0_wght200_GRAD0_opsz24.svg") !important;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


/* =========================================================
   HERO — 2.5 TONNE GOODS LIFTS ICON
   Replace with supplied 22dp white goods/package icon
   ========================================================= */

.hero-feature-icon--goods {
    background-image: url("package_2_22dp_FFFFFF_FILL0_wght200_GRAD0_opsz24.svg") !important;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


/* =========================================================
   HERO — 24-HOUR WATER SUPPLY ICON
   Supplied water drops icon
   ========================================================= */

.hero-feature-icon--water {
    background-image: url("water_drops_22dp_FFFFFF_FILL0_wght200_GRAD0_opsz24.svg") !important;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


/* =========================================================
   HERO — COMPLETE FIRE SAFETY ICON
   Supplied smoke detector icon
   ========================================================= */

.hero-feature-icon--fire {
    background-image: url("detector_smoke_22dp_FFFFFF_FILL0_wght200_GRAD0_opsz24.svg") !important;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


/* =========================================================
   SUMAYA G2 — GOOGLE SANS TYPOGRAPHY
   Headings + paragraphs
   ========================================================= */

h1, h2, h3, h4, h5, h6,
.section-heading,
.hero h1,
.hero h2,
.hero h3 {
    font-family: "Google Sans", "Google Sans Placeholder", sans-serif !important;
}

p,
.section-text,
.hero-description,
.section-eyebrow,
.eyebrow {
    font-family: "Google Sans", "Google Sans Placeholder", sans-serif !important;
}


/* =========================================================
   SUMAYA G2 — PARAGRAPHS: MONTSERRAT
   Based on the inspected reference font stack
   ========================================================= */

p,
.section-text,
.hero-description,
.location-subheading,
.footer-tagline,
.gallery-caption small,
.usp-card p,
.amenity-card p {
    font-family: "Montserrat", "Montserrat Placeholder", sans-serif !important;
}


/* =========================================================
   SUMAYA G2 — HEADINGS: MONTSERRAT
   Based on the inspected reference font stack
   ========================================================= */

h1, h2, h3, h4, h5, h6,
.section-heading,
.hero h1,
.hero h2,
.hero h3 {
    font-family: "Montserrat", "Montserrat Placeholder", sans-serif !important;
}


/* Heading font weight */
h1, h2, h3, h4, h5, h6,
.section-heading,
.hero h1,
.hero h2,
.hero h3 {
    font-weight: 600 !important;
}


/* =========================================================
   MOBILE OPTIMIZATION — PHONE VIEW
   ========================================================= */
@media (max-width: 700px) {

    /* ---------- HERO ---------- */
    .hero {
        min-height: 720px !important;
        height: auto !important;
        background-position: 62% center;
    }

    .hero-inner {
        min-height: 720px !important;
        padding-top: 92px !important;
        padding-bottom: 0 !important;
        justify-content: space-between;
    }

    .hero-copy {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-rule {
        width: 40px;
        height: 2px;
        margin-bottom: 12px;
    }

    .hero h1 {
        font-size: 42px !important;
        line-height: 1 !important;
        letter-spacing: -0.04em;
        white-space: normal !important;
    }

    .hero-copy h2 {
        margin-top: 12px;
        font-size: 18px !important;
        line-height: 1.25;
        letter-spacing: 0.02em;
    }

    .hero-description {
        max-width: 100%;
        margin-top: 14px;
        font-size: 15px !important;
        line-height: 1.55;
    }

    .hero-meta {
        margin-top: 16px;
    }

    .hero-meta-item > span {
        font-size: 12px;
    }

    .hero-meta-item strong {
        font-size: 22px !important;
    }

    .hero-meta-item small {
        font-size: 14px !important;
    }

    .hero-meta-divider {
        height: 40px;
        margin: 0 12px;
    }

    .hero-buttons {
        gap: 10px;
        margin-top: 20px;
        flex-wrap: nowrap;
    }

    .hero-buttons .btn {
        min-height: 48px !important;
        padding: 0 18px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }

    .hero .hero-buttons .hero-primary-btn {
        gap: 7px;
    }

    .hero .hero-buttons .hero-primary-btn span:last-child,
    .hero .hero-buttons .hero-primary-btn span:last-child::after {
        width: 19px;
        height: 19px;
        flex-basis: 19px;
    }

    /* Keep the hero feature strip compact on phones */
    .hero-feature-strip {
        grid-template-columns: 1fr 1fr !important;
        padding: 10px 14px !important;
        gap: 0 !important;
    }

    .hero-feature-strip .stat-cell,
    .hero-feature-strip .stat-cell:nth-child(3) {
        border-left: none !important;
        border-top: 1px solid rgba(255,255,255,0.15);
        padding: 14px 8px !important;
        gap: 10px;
        min-width: 0;
    }

    .hero-feature-strip .stat-cell:nth-child(-n+2) {
        border-top: none !important;
    }

    .hero-feature-icon {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
    }

    .hero-feature-strip .stat-value,
    .hero-feature-strip .stat-value small {
        font-size: 14px !important;
        line-height: 1.2;
    }

    .hero-feature-strip .stat-desc {
        margin-top: 4px;
        font-size: 10px !important;
        line-height: 1.3;
    }

    /* ---------- BUILT FOR BOLD AMBITIONS / OVERVIEW IMAGE ---------- */
    .overview-section {
        padding: 55px 0 60px !important;
    }

    .overview-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        margin-bottom: 24px !important;
    }

    .overview-image {
        aspect-ratio: 16 / 10 !important;
        border-radius: 16px !important;
    }

    .overview-bar {
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        min-width: 0 !important;
    }

    .overview-bar-item {
        min-width: 0 !important;
        padding: 9px 6px !important;
        gap: 5px !important;
        font-size: 9px !important;
        line-height: 1.2;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .overview-bar-item small {
        font-size: 7px !important;
        line-height: 1.1;
    }

    .overview-bar-icon {
        font-size: 11px !important;
        flex: 0 0 auto;
    }

    /* ---------- CONFIGURATIONS ---------- */
    .config-section {
        padding: 55px 0 60px !important;
    }

    .config-heading {
        gap: 18px !important;
        margin-bottom: 24px !important;
    }

    .config-heading .section-heading {
        max-width: 100% !important;
    }

    .config-legend {
        width: 100%;
        justify-content: space-between;
        gap: 8px !important;
        padding: 9px 12px !important;
        border-radius: 28px;
    }

    .config-legend-icon {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
    }

    .config-legend-item {
        min-width: 0;
        font-size: 11px !important;
        line-height: 1.2;
    }

    .config-legend-item small {
        font-size: 8px !important;
    }

    /* Convert the wide desktop table into readable mobile cards */
    .config-table-wrap {
        overflow: visible !important;
        border: none !important;
        border-radius: 0 !important;
    }

    .config-table,
    .config-table thead,
    .config-table tbody,
    .config-table tr,
    .config-table td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .config-table {
        border-collapse: separate !important;
    }

    .config-table thead {
        display: none !important;
    }

    .config-table tr {
        margin-bottom: 14px;
        padding: 14px !important;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #ffffff;
        overflow: hidden;
    }

    .config-table tr.is-highlighted {
        background: var(--navy-900);
    }

    .config-table td {
        display: grid !important;
        grid-template-columns: 38% 62%;
        align-items: start;
        gap: 8px;
        padding: 9px 0 !important;
        border-top: 1px solid var(--line) !important;
        font-size: 14px !important;
        line-height: 1.35;
    }

    .config-table td:first-child {
        display: flex !important;
        align-items: center;
        padding-top: 0 !important;
        border-top: none !important;
    }

    .config-table td::before {
        color: var(--text-muted);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .config-table td:nth-child(2)::before { content: "Carpet Area"; }
    .config-table td:nth-child(3)::before { content: "Mezzanine"; }
    .config-table td:nth-child(4)::before { content: "Floor Loading"; }
    .config-table td:nth-child(5)::before { content: "Enquiry"; }

    .config-table td small {
        font-size: 10px !important;
    }

    .config-table td div {
        min-width: 0;
    }

    .config-table .type-badge {
        flex: 0 0 30px;
    }

    .config-table .table-link {
        justify-self: start;
        padding: 7px 13px;
        font-size: 11px !important;
    }

    .config-table tr.is-highlighted td {
        border-top-color: rgba(255,255,255,0.12) !important;
    }

    .config-table tr.is-highlighted td::before {
        color: rgba(255,255,255,0.65);
    }

    /* ---------- FOOTER / DIGITAL PARTNER ---------- */
    .footer-bottom-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 18px;
    }

    .footer-partner {
        width: 100%;
        justify-content: flex-end !important;
        align-self: flex-end !important;
        margin-left: auto !important;
    }

    .footer-partner-logo {
        height: 24px !important;
        max-width: 120px !important;
    }

    /* Prevent floating enquire button from covering footer content */
    .floating-enquire-btn {
        right: 14px;
        bottom: 14px;
    }
}

@media (max-width: 380px) {
    .hero h1 {
        font-size: 38px !important;
    }

    .hero-buttons .btn {
        padding-left: 13px !important;
        padding-right: 13px !important;
        font-size: 12px !important;
    }

    .hero-feature-strip {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .hero-feature-strip .stat-cell {
        gap: 7px;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .config-table td {
        grid-template-columns: 34% 66%;
        font-size: 13px !important;
    }
}


/* =========================================================
   MOBILE FOOTER — CENTER DIGITAL PARTNER
   ========================================================= */

@media (max-width: 700px) {
    .footer-bottom-inner {
        align-items: center !important;
        text-align: center !important;
    }

    .footer-partner {
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .footer-partner-logo {
        margin: 0 !important;
    }
}


/* =========================================================
   MOBILE HEADER — WORKING MENU
   ========================================================= */

@media (max-width: 700px) {
    .site-header .header-cta {
        display: none !important;
    }

    .site-header .header-icon-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
        margin-left: auto !important;
        border: 1px solid rgba(255, 255, 255, 0.55) !important;
        border-radius: 50% !important;
        color: #ffffff !important;
        background: transparent !important;
        font-size: 0 !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    .site-header .header-icon-btn span {
        display: block !important;
        font-size: 22px !important;
        line-height: 1 !important;
        color: #ffffff !important;
    }

    .site-header .main-nav {
        display: none !important;
    }

    .site-header .main-nav.mobile-menu-open {
        display: flex !important;
        position: absolute !important;
        top: 100% !important;
        left: 12px !important;
        right: 12px !important;
        z-index: 9999 !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 10px !important;
        background: #14173F !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 12px !important;
        box-shadow: 0 14px 35px rgba(0, 0, 0, 0.25) !important;
    }

    .site-header .main-nav.mobile-menu-open a {
        display: block !important;
        width: 100% !important;
        padding: 13px 12px !important;
        color: #ffffff !important;
        font-size: 16px !important;
        line-height: 1.2 !important;
        text-decoration: none !important;
    }

    .site-header .main-nav.mobile-menu-open a.active {
        color: #ffffff !important;
    }
}


/* =========================================================
   MOBILE HERO — GRADIENT POSITION ONLY
   ========================================================= */
@media (max-width: 12000px) {
    .hero {
        background-image:
            linear-gradient(
                150deg,
                rgba(8, 28, 54, 0.82) 0%,
                rgba(8, 28, 54, 0.62) 38%,
                rgba(8, 28, 54, 0.20) 68%,
                rgba(8, 28, 54, 0.02) 90%,
                rgba(8, 28, 54, 0) 100%
            ),
            url("ChatGPT\ Image\ Sep\ 22\,\ 2026\,\ 06_20_27\ PM.png");
    }
}