/* Residential page - uses the same variables, Inter and Manrope typography as the homepage */

.residential-hero {
    position: relative;
    height: min(650px, 78vh);
    min-height: 510px;
    margin-top: 78px;
    overflow: hidden;
    background: var(--navy);
}
.residential-hero > img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
.residential-hero-overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(5,22,35,.85), rgba(5,22,35,.43), rgba(5,22,35,.10));
}
.residential-hero-content {
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:var(--white);
    padding-top:30px;
}
.residential-hero h1 {
    max-width:760px;
    font-family:"Manrope", sans-serif;
    font-size:clamp(42px,5.5vw,72px);
    line-height:1.06;
    letter-spacing:-2.5px;
    margin-bottom:20px;
}
.residential-hero h1 span { color:var(--orange); }
.residential-hero p {
    max-width:600px;
    color:rgba(255,255,255,.87);
    font-size:16px;
}

.residential-projects { background:var(--bg); }

.residential-project-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}
.residential-card {
    overflow:hidden;
    background:white;
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:0 7px 25px rgba(11,41,66,.05);
    transition:.3s ease;
}
.residential-card:hover {
    transform:translateY(-8px);
    box-shadow:var(--shadow);
    border-color:rgba(247,147,30,.35);
}
.residential-image {
    position:relative;
    height:280px;
    overflow:hidden;
}
.residential-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s ease;
}
.residential-card:hover .residential-image img { transform:scale(1.06); }

.residential-body { padding:22px; }
.residential-body h3 {
    font-family:"Manrope";
    font-size:22px;
    line-height:1.3;
    margin-bottom:4px;
}
.project-location {
    color:var(--muted);
    font-size:12px;
}
.residential-body .project-meta {
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin:15px 0;
}
.residential-body .project-meta span {
    padding:6px 10px;
    border-radius:7px;
    background:var(--blue-light);
    color:var(--blue);
    font-size:10px;
    font-weight:700;
}
.project-description {
    color:var(--muted);
    font-size:13px;
    line-height:1.65;
    min-height:65px;
    margin-bottom:17px;
}
.residential-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-top:15px;
    border-top:1px solid var(--border);
}
.residential-bottom strong { font-size:12px; }
.enquire-btn {
    border:0;
    padding:10px 14px;
    border-radius:9px;
    color:white;
    background:var(--orange);
    font-size:11px;
    font-weight:800;
    cursor:pointer;
    transition:.25s ease;
}
.enquire-btn:hover {
    background:var(--navy);
    transform:translateY(-2px);
}

/* Enquiry popup */
.enquiry-modal {
    position:fixed;
    inset:0;
    z-index:3000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.25s ease;
}
.enquiry-modal.open {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
.enquiry-backdrop {
    position:absolute;
    inset:0;
    background:rgba(5,22,35,.72);
    backdrop-filter:blur(5px);
}
.enquiry-box {
    position:relative;
    z-index:2;
    width:min(520px,100%);
    max-height:90vh;
    overflow:auto;
    padding:32px;
    background:white;
    border-radius:20px;
    box-shadow:0 25px 70px rgba(0,0,0,.25);
    transform:translateY(20px) scale(.98);
    transition:.25s ease;
}
.enquiry-modal.open .enquiry-box {
    transform:translateY(0) scale(1);
}
.enquiry-close {
    position:absolute;
    top:13px;
    right:15px;
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    background:var(--blue-light);
    color:var(--navy);
    font-size:25px;
    line-height:1;
    cursor:pointer;
}
.enquiry-box h2 {
    font-family:"Manrope";
    font-size:34px;
    line-height:1.1;
    margin-bottom:5px;
}
.enquiry-box h2 span { color:var(--orange); }
.enquiry-project {
    color:var(--muted);
    font-size:12px;
    margin-bottom:22px;
}
#residentialEnquiryForm { display:grid; gap:14px; }
.form-group { display:grid; gap:6px; }
.form-group label {
    color:var(--ink);
    font-size:11px;
    font-weight:800;
}
.form-group input,
.form-group textarea {
    width:100%;
    border:1px solid var(--border);
    border-radius:9px;
    padding:12px 13px;
    outline:0;
    color:var(--ink);
    background:#fbfcfd;
    font-family:"Inter",sans-serif;
    font-size:13px;
    transition:.2s ease;
}
.form-group textarea {
    resize:vertical;
    min-height:50px;
}
.form-group input:focus,
.form-group textarea:focus {
    border-color:var(--orange);
    background:white;
    box-shadow:0 0 0 3px rgba(247,147,30,.10);
}
.enquiry-submit {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    border:0;
    border-radius:50px;
    padding:14px 20px;
    margin-top:4px;
    color:white;
    background:var(--orange);
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:.25s ease;
}
.enquiry-submit span { font-size:18px; }
.enquiry-submit:hover {
    background:var(--navy);
    transform:translateY(-2px);
}

body.modal-open { overflow:hidden; }

@media (max-width:820px) {
    .residential-hero {
        margin-top:70px;
        min-height:560px;
        height:75vh;
    }
    .residential-hero-content { padding-inline:28px; }
    .residential-project-grid { grid-template-columns:1fr; }
    .residential-image { height:300px; }
}
@media (max-width:540px) {
    .residential-hero { min-height:530px; }
    .residential-hero h1 { font-size:40px; letter-spacing:-1.5px; }
    .residential-hero p { font-size:13px; }
    .residential-image { height:235px; }
    .residential-body { padding:17px; }
    .residential-body h3 { font-size:18px; }
    .project-description { min-height:auto; }
    .residential-bottom { align-items:flex-start; }
    .enquiry-box { padding:28px 20px 22px; }
}

/* Four projects in one row on desktop */
@media (min-width:1200px) {
    .residential-project-grid {
        grid-template-columns:repeat(4, minmax(0, 1fr));
        gap:18px;
    }
    .residential-image {
        height:220px;
    }
    .residential-body {
        padding:18px;
    }
    .residential-body h3 {
        font-size:18px;
    }
    .project-description {
        font-size:12px;
        min-height:82px;
    }
    .residential-bottom {
        align-items:flex-start;
        flex-direction:column;
    }
    .enquire-btn {
        width:100%;
    }
}

@media (min-width:821px) and (max-width:1199px) {
    .residential-project-grid {
        grid-template-columns:repeat(2,1fr);
    }
}