/* =====================================================
   GLOBAL VARIABLES
===================================================== */

:root {
    --maroon-deep: #570010;
    --maroon: #570010;
    --maroon-soft: #570010;

    --rust: #C1592C;
    --gold: #E0913E;

    --cream: #F4ECDD;
    --parchment: #EFE4CE;

    --ink: #241712;
    --ink-soft: #5c4a3f;

    --line: rgba(224, 145, 62, 0.35);

    --light-bg: #f5f7fa;
    --white: #ffffff;
    --text-dark: #333333;
    --text-muted: #666666;
}


/* =====================================================
   GLOBAL RESET
===================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--light-bg);
    color: var(--text-dark);
    line-height: 1.6;
    font-family: "Poppins", sans-serif;
    overflow-x: hidden;
}

button,
input,
textarea,
select {
    font-family: inherit;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}


/* =====================================================
   FONT UTILITIES
===================================================== */

.mono {
    font-family: "IBM Plex Mono", monospace;
}


/* =====================================================
   GLOBAL HEADINGS
===================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif;
}

p {
    font-family: "Poppins", sans-serif;
}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* =====================================================
   NAVIGATION
===================================================== */

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    z-index: 100;

    background: rgba(42, 10, 16, 0.92);

    backdrop-filter: blur(6px);

    border-bottom: 1px solid var(--line);
}

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px 24px;
}


/* BRAND */

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

    color: var(--cream);
    text-decoration: none;
}

.brand-mark {
    width: 34px;
    height: 34px;

    border: 2px solid var(--gold);

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "Fraunces", serif;
    font-weight: 700;

    color: var(--gold);
    font-size: 18px;
}

.brand-text {
    font-family: "Fraunces", serif;
    font-weight: 600;
    font-size: 18px;

    line-height: 1.1;
}

.brand-text span {
    display: block;

    font-family: "Poppins", sans-serif;

    font-size: 10px;
    letter-spacing: 0.14em;

    color: var(--gold);

    font-weight: 400;

    text-transform: uppercase;

    margin-top: 2px;
}


/* NAV LINKS */

nav ul {
    list-style: none;

    display: flex;
    gap: 28px;
}

nav a {
    color: var(--cream);

    text-decoration: none;

    font-family: "Poppins", sans-serif;

    font-size: 13px;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    font-weight: 500;

    opacity: 0.85;

    transition:
        opacity 0.2s,
        color 0.2s;
}

nav a:hover {
    opacity: 1;
    color: var(--gold);
}


/* MOBILE NAV BUTTON */

.nav-toggle {
    display: none;

    background: none;
    border: none;

    color: var(--cream);

    font-size: 24px;

    cursor: pointer;
}


/* MOBILE NAV */

@media (max-width: 760px) {

    nav ul {
        position: fixed;

        top: 66px;
        right: 0;
        left: 0;

        background: var(--maroon-deep);

        flex-direction: column;

        gap: 0;

        max-height: 0;

        overflow: hidden;

        transition: max-height 0.35s ease;

        border-bottom: 1px solid var(--line);
    }

    nav ul.open {
        max-height: 320px;
    }

    nav ul li {
        border-top: 1px solid var(--line);
    }

    nav a {
        display: block;
        padding: 16px 24px;
    }

    .nav-toggle {
        display: block;
    }
}


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

.hero {
    position: relative;

    min-height: 100vh;

    background:
        radial-gradient(
            ellipse 900px 600px at 85% 15%,
            rgba(224, 145, 62, 0.16),
            transparent 60%
        ),
        linear-gradient(
            160deg,
            var(--maroon-deep) 0%,
            var(--maroon) 55%,
            #4d1420 100%
        );

    color: var(--cream);

    display: flex;
    align-items: center;

    padding: 140px 24px 90px;

    overflow: hidden;
}

.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 118px,
            rgba(224, 145, 62, 0.05) 119px,
            rgba(224, 145, 62, 0.05) 120px
        );

    pointer-events: none;

    z-index: 1;
}


/* =====================================================
   HERO IMAGE SLIDER
===================================================== */

.hero-slider {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;
}

.hero-slide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;

    opacity: 0;

    transform: scale(1.05);

    transition:
        opacity 1.2s ease-in-out,
        transform 6s ease;

    pointer-events: none;
}

.hero-slide.active {
    opacity: 1;

    transform: scale(1);
}


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

.hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(42, 10, 16, 0.88) 0%,
            rgba(42, 10, 16, 0.70) 45%,
            rgba(42, 10, 16, 0.35) 100%
        );

    z-index: 1;
}


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

.hero-inner {
    max-width: 1200px;

    margin: 0 auto;

    width: 100%;

    display: grid;

    grid-template-columns: 1.2fr 0.8fr;

    gap: 40px;

    align-items: end;

    position: relative;

    z-index: 2;
}

.eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-family: "IBM Plex Mono", monospace;

    font-size: 12px;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color: var(--gold);

    margin-bottom: 22px;
}

.eyebrow::before {
    content: "";

    width: 26px;
    height: 1px;

    background: var(--gold);
}

.hero h1 {
    font-family: "Fraunces", serif;

    font-weight: 600;

    font-size: clamp(2.6rem, 6vw, 5rem);

    line-height: 0.98;

    letter-spacing: -0.01em;
}

.hero h1 em {
    font-style: italic;

    color: var(--gold);

    font-weight: 500;
}

.hero-sub {
    margin-top: 24px;

    max-width: 480px;

    font-size: 17px;

    line-height: 1.6;

    color: rgba(244, 236, 221, 0.82);
}

.hero-cta {
    margin-top: 36px;

    display: flex;

    gap: 14px;

    flex-wrap: wrap;
}


/* =====================================================
   HERO SURVEY PIN
===================================================== */

.survey-pin {
    position: absolute;

    right: 6%;
    top: 20%;

    width: 220px;

    opacity: 0.9;

    z-index: 3;

    animation: float 6s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}


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

.hero-stat {
    border-left: 2px solid var(--gold);

    padding-left: 20px;
}

.hero-stat .num {
    font-family: "Fraunces", serif;

    font-size: 2.6rem;

    color: var(--gold);

    line-height: 1;
}

.hero-stat .lbl {
    font-family: "Poppins", sans-serif;

    font-size: 12px;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: rgba(244, 236, 221, 0.7);

    margin-top: 8px;
}


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

.btn {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 14px 26px;

    border-radius: 2px;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 0.03em;

    text-decoration: none;

    transition:
        transform 0.2s,
        background 0.2s;

    border: 1px solid transparent;
}

.btn-solid {
    background: var(--gold);

    color: var(--maroon-deep);
}

.btn-solid:hover {
    transform: translateY(-2px);

    background: #eda757;
}

.btn-ghost {
    border-color: rgba(244, 236, 221, 0.4);

    color: var(--cream);
}

.btn-ghost:hover {
    border-color: var(--gold);

    color: var(--gold);
}


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

.hero-dots {
    position: absolute;

    bottom: 35px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 10px;

    z-index: 5;
}

.hero-dot {
    width: 11px;
    height: 11px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.8);

    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    transition: all 0.3s ease;
}

.hero-dot:hover {
    transform: scale(1.2);
}

.hero-dot.active {
    background: var(--gold);

    border-color: var(--gold);

    width: 28px;

    border-radius: 10px;
}


/* =====================================================
   GENERAL SECTION
===================================================== */

section {
    padding: 100px 24px;
}

.section-inner {
    max-width: 1200px;

    margin: 0 auto;
}

.section-head {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 24px;

    margin-bottom: 56px;

    flex-wrap: wrap;
}

.section-tag {
    font-family: "IBM Plex Mono", monospace;

    font-size: 12px;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color: var(--rust);

    margin-bottom: 14px;

    display: block;
}

.section-title {
    font-family: "Fraunces", serif;

    font-weight: 600;

    font-size: clamp(1.9rem, 3.6vw, 2.8rem);

    max-width: 620px;

    line-height: 1.08;
}

.section-note {
    max-width: 320px;

    font-size: 14px;

    color: var(--ink-soft);

    line-height: 1.6;
}


/* =====================================================
   CONTAINER
===================================================== */

.container {
    width: 90%;

    max-width: 1200px;

    margin: 0 auto;

    padding-top: 80px;
}


/* =====================================================
   LEDGER
===================================================== */

.ledger {
    background: var(--maroon-deep);

    border: 1px solid var(--line);

    position: relative;
}

.ledger-row {
    display: grid;

    grid-template-columns: 70px 1fr auto;

    align-items: center;

    gap: 24px;

    padding: 26px 32px;

    border-bottom: 1px dashed rgba(224, 145, 62, 0.28);

    position: relative;

    transition: background 0.25s;
}

.ledger-row:last-child {
    border-bottom: none;
}

.ledger-row:hover {
    background: rgba(224, 145, 62, 0.06);
}

.ledger-row::before,
.ledger-row::after {
    content: "";

    position: absolute;

    left: -1px;

    width: 14px;
    height: 14px;

    background: var(--cream);

    border-radius: 50%;
}

.plot-no {
    font-family: "Fraunces", serif;

    font-size: 1.3rem;

    color: var(--gold);

    border: 1px solid var(--gold);

    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;
}

.plot-name {
    font-family: "Fraunces", serif;

    font-size: 1.5rem;

    color: var(--cream);

    font-weight: 600;
}

.plot-size {
    font-family: "IBM Plex Mono", monospace;

    font-size: 12px;

    color: rgba(244, 236, 221, 0.6);

    text-transform: uppercase;

    letter-spacing: 0.08em;

    margin-top: 4px;
}

.plot-price {
    font-family: "IBM Plex Mono", monospace;

    font-size: 1.5rem;

    color: var(--rust);

    background: rgba(193, 89, 44, 0.12);

    border: 1px solid rgba(193, 89, 44, 0.4);

    padding: 10px 20px;

    white-space: nowrap;
}

.ledger-foot {
    padding: 22px 32px;

    font-family: "IBM Plex Mono", monospace;

    font-size: 12px;

    color: rgba(244, 236, 221, 0.55);

    letter-spacing: 0.04em;

    border-top: 1px solid var(--line);
}


/* =====================================================
   SERVICES
===================================================== */

.land-banner {
    margin-bottom: 56px;

    border: 1px solid var(--line);

    background: var(--maroon-deep);

    display: flex;

    justify-content: center;
}

.land-banner img {
    width: 100%;

    max-width: 520px;

    height: auto;

    display: block;
}

.services-banner {
    position: relative;
}

.services-banner img {
    width: 100%;

    height: 340px;

    object-fit: cover;

    object-position: center 30%;

    display: block;

    filter: saturate(1.05);
}

.services-banner::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(42, 10, 16, 0.05) 0%,
            rgba(42, 10, 16, 0.55) 100%
        );
}

.services-banner-cap {
    position: absolute;

    left: 28px;

    bottom: 20px;

    z-index: 2;

    font-family: "IBM Plex Mono", monospace;

    font-size: 12px;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: var(--cream);
}

.services-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1px;

    background: var(--line);

    border: 1px solid var(--line);
}

.service-card {
    position: relative;

    overflow: hidden;

    background: var(--parchment);

    padding: 28px;

    min-height: 280px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    transition: background 0.25s;

    background-size: cover;

    background-position: center;
}

.service-card::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(36, 23, 18, 0.15) 0%,
            rgba(36, 23, 18, 0.88) 82%
        );

    transition: background 0.25s;
}

.service-card:hover::before {
    background:
        linear-gradient(
            180deg,
            rgba(36, 23, 18, 0.05) 0%,
            rgba(36, 23, 18, 0.8) 82%
        );
}

.service-card > * {
    position: relative;

    z-index: 2;
}

.service-idx {
    font-family: "IBM Plex Mono", monospace;

    font-size: 12px;

    color: var(--gold);
}

.service-name {
    font-family: "Fraunces", serif;

    font-weight: 600;

    font-size: 1.4rem;

    margin-top: 60px;

    color: var(--cream);
}

.service-desc {
    font-size: 13.5px;

    color: rgba(244, 236, 221, 0.75);

    margin-top: 10px;

    line-height: 1.5;
}




/* =====================================================
   WHY CHOOSE US
===================================================== */

.why-grid {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 28px;
}

.why-item {
    padding-top: 20px;

    border-top: 2px solid var(--rust);
}

.why-item h3 {
    font-family: "Fraunces", serif;

    font-weight: 600;

    font-size: 1.05rem;

    margin-bottom: 8px;

    line-height: 1.25;
}

.why-item p {
    font-size: 13px;

    color: var(--ink-soft);

    line-height: 1.55;
}


/* =====================================================
   EVENT BANNER
===================================================== */

.event {
    position: relative;

    background:
        linear-gradient(
            120deg,
            rgba(42, 10, 16, 0.94) 0%,
            rgba(62, 15, 24, 0.88) 55%,
            rgba(42, 10, 16, 0.96) 100%
        ),
        url("assets/construction-banner.jpeg");

    background-size: cover;

    background-position: center 35%;

    color: var(--cream);
}

.event-inner {
    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px;

    flex-wrap: wrap;
}

.event-title {
    font-family: "Fraunces", serif;

    font-weight: 600;

    font-size: clamp(1.7rem, 3.4vw, 2.4rem);

    max-width: 520px;

    line-height: 1.1;
}

.event-title .accent {
    color: var(--gold);
}

.event-meta {
    display: flex;

    gap: 36px;

    flex-wrap: wrap;
}

.event-meta div {
    text-align: left;
}

.event-meta .k {
    font-family: "IBM Plex Mono", monospace;

    font-size: 11px;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: var(--gold);

    margin-bottom: 6px;
}

.event-meta .v {
    font-size: 15px;

    font-weight: 500;
}


/* =====================================================
   FOUNDATION
===================================================== */

.foundation {
    padding: 80px 0;

    background: var(--light-bg);
}

.foundation h2 {
    text-align: center;

    font-family: "Poppins", sans-serif;

    font-size: 38px;

    margin-bottom: 15px;

    color: var(--maroon-deep);
}

.foundation .subtitle {
    max-width: 750px;

    margin: 0 auto 50px;

    text-align: center;

    font-size: 17px;

    color: var(--text-muted);
}


/* =====================================================
   FOUNDATION CARDS
===================================================== */

.foundation-cards {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin-bottom: 50px;
}

.foundation-card {
    background: var(--white);

    padding: 35px;

    border-radius: 12px;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.08);

    transition: all 0.3s ease;

    border-top: 4px solid var(--maroon-deep);
}

.foundation-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.13);
}

.foundation-card h3 {
    color: var(--maroon-deep);

    font-size: 23px;

    margin-bottom: 15px;
}

.foundation-card p {
    color: #555;

    line-height: 1.8;

    margin-bottom: 0;
}


/* =====================================================
   OBJECTIVES
===================================================== */

.foundation-objectives {
    background: var(--white);

    padding: 40px;

    border-radius: 12px;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.08);

    margin-bottom: 50px;
}

.foundation-objectives h3 {
    font-size: 26px;

    margin-bottom: 25px;
}

.foundation-objectives ul {
    padding-left: 25px;
}

.foundation-objectives li {
    margin-bottom: 12px;

    color: #555;

    line-height: 1.6;
}


/* =====================================================
   CORE VALUES
===================================================== */

.foundation-values {
    margin-top: 20px;

    margin-bottom: 80px;
}

.foundation-values > h3 {
    text-align: center;

    font-size: 30px;

    margin-bottom: 30px;
}

.foundation-value-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}

.foundation-value-box {
    background: var(--white);

    padding: 30px 25px;

    text-align: center;

    border-radius: 12px;

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.08);

    transition: all 0.3s ease;
}

.foundation-value-box:hover {
    transform: translateY(-7px);

    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.12);

    background: var(--maroon-deep);
}

.foundation-value-box h4 {
    font-size: 20px;

    margin-bottom: 12px;

    color: var(--maroon-deep);
}

.foundation-value-box p {
    margin-bottom: 0;

    line-height: 1.7;
}

.foundation-value-box:hover h4,
.foundation-value-box:hover p {
    color: #fff;
}


/* =====================================================
   VALUE BOX WITH IMAGE
===================================================== */

.value-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

    margin-top: 40px;
}

.value-box {
    background: var(--white);

    border: 1px solid #e5ded9;

    border-radius: 12px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    height: 100%;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.value-box:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(42, 10, 16, 0.12);
}

.value-photo {
    width: 100%;

    height: 280px;

    overflow: hidden;

    flex-shrink: 0;

    background: #f1f1f1;
}

.value-photo img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition: transform 0.5s ease;
}

.value-box:hover .value-photo img {
    transform: scale(1.05);
}

.value-content {
    padding: 28px 30px;

    background: var(--white);

    flex: 1;
}

.value-content h4 {
    margin: 0 0 15px;

    color: var(--maroon-deep);

    font-size: 24px;

    line-height: 1.3;
}

.value-content p {
    margin: 0 0 15px;

    color: #625957;

    font-size: 15px;

    line-height: 1.7;
}

.value-content ul {
    margin: 10px 0 20px;

    padding-left: 20px;

    color: #625957;
}

.value-content li {
    margin-bottom: 8px;

    line-height: 1.5;
}


/* =====================================================
   TEAM SECTION
===================================================== */

.team-section {
    background: var(--cream);

    padding: 80px 0;
}

.team-section .container {
    width: 90%;

    max-width: 1200px;

    margin: 0 auto;

    padding-top: 0;
}

.team-section h2 {
    text-align: center;

    font-family: "Fraunces", serif;

    font-weight: 600;

    font-size: 38px;

    color: var(--maroon-deep);

    margin-bottom: 15px;
}

.team-subtitle {
    max-width: 750px;

    margin: 0 auto 50px;

    text-align: center;

    font-family: "Poppins", sans-serif;

    font-size: 16px;

    line-height: 1.7;

    color: var(--ink-soft);
}


/* =====================================================
   TEAM GRID - DESKTOP
===================================================== */

.team-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;
}


/* =====================================================
   TEAM CARD
===================================================== */

.team-card {
    background: #fff;

    border-radius: 14px;

    overflow: hidden;

    border: 1px solid rgba(42, 10, 16, 0.08);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.08);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.team-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.15);
}


/* =====================================================
   TEAM IMAGE
===================================================== */

.team-image {
    width: 100%;

    height: 300px;

    background: var(--parchment);

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;
}

.team-image img {
    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: center;

    display: block;

    transition: transform 0.4s ease;
}

.team-card:hover .team-image img {
    transform: scale(1.02);
}


/* =====================================================
   TEAM INFORMATION
===================================================== */

.team-info {
    padding: 22px 18px;

    text-align: center;

    background: #fff;
}

.team-info h3 {
    font-family: "Fraunces", serif;

    font-weight: 600;

    font-size: 1.2rem;

    line-height: 1.3;

    color: var(--maroon-deep);

    margin-bottom: 7px;
}

.team-info h4 {
    font-family: "Poppins", sans-serif;

    font-size: 13px;

    font-weight: 500;

    color: var(--rust);

    text-transform: uppercase;

    letter-spacing: 0.08em;

    margin-bottom: 0;
}


/* =====================================================
   FAQ PAGE
===================================================== */

.faq-page {
    background: var(--light-bg);

    padding: 80px 0;
}

.faq-header {
    text-align: center;

    max-width: 800px;

    margin: 0 auto 50px;
}

.faq-header h1 {
    font-size: 42px;

    color: var(--maroon-deep);

    margin-bottom: 15px;
}

.faq-header p {
    color: var(--maroon-deep);

    font-size: 17px;

    line-height: 1.7;
}


/* FAQ SEARCH */

.faq-search {
    max-width: 650px;

    margin: 0 auto 50px;

    position: relative;
}

.faq-search input {
    width: 100%;

    padding: 17px 55px 17px 20px;

    border: 1px solid #ddd;

    border-radius: 8px;

    background: var(--white);

    font-size: 16px;

    outline: none;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.06);
}

.faq-search input:focus {
    border-color: var(--maroon-deep);

    box-shadow:
        0 5px 18px rgba(42, 10, 16, 0.12);
}

.faq-search span {
    position: absolute;

    right: 20px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 20px;

    color: var(--maroon-deep);
}


/* FAQ LAYOUT */

.faq-layout {
    display: grid;

    grid-template-columns: 260px 1fr;

    gap: 40px;

    align-items: start;
}


/* FAQ CATEGORIES */

.faq-categories {
    background: var(--white);

    padding: 25px;

    border-radius: 12px;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.07);

    position: sticky;

    top: 100px;
}

.faq-categories h3 {
    font-size: 20px;

    margin-bottom: 20px;
}

.faq-categories ul {
    list-style: none;
}

.faq-categories li {
    margin-bottom: 8px;
}

.faq-categories a {
    display: block;

    padding: 11px 14px;

    border-radius: 6px;

    color: var(--maroon-deep);

    text-decoration: none;

    transition: 0.3s;
}

.faq-categories a:hover,
.faq-categories a.active {
    background: var(--maroon-deep);

    color: #fff;
}


/* FAQ CONTENT */

.faq-section {
    margin-bottom: 40px;
}

.faq-section h2 {
    font-size: 27px;

    color: var(--maroon-deep);

    margin-bottom: 20px;
}


/* FAQ ITEM */

.faq-item {
    background: var(--white);

    border-radius: 10px;

    margin-bottom: 12px;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.06);

    overflow: hidden;

    border: 1px solid #eee;
}

.faq-question {
    width: 100%;

    padding: 20px 55px 20px 20px;

    background: var(--white);

    border: none;

    text-align: left;

    font-size: 16px;

    font-weight: 600;

    color: #333;

    cursor: pointer;

    position: relative;

    transition: 0.3s;
}

.faq-question:hover {
    color: var(--maroon-deep);
}

.faq-question::after {
    content: "+";

    position: absolute;

    right: 20px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 25px;

    color: var(--maroon-deep);

    transition: 0.3s;
}

.faq-item.active .faq-question {
    color: var(--maroon-deep);
}

.faq-item.active .faq-question::after {
    content: "−";
}


/* FAQ ANSWER */

.faq-answer {
    max-height: 0;

    overflow: hidden;

    transition: max-height 0.35s ease;
}

.faq-answer-content {
    padding: 0 20px 20px;
}

.faq-answer p {
    color: #666;

    line-height: 1.8;

    margin-bottom: 0;
}


/* FAQ CONTACT */

.faq-contact {
    margin-top: 60px;

    padding: 45px;

    background: var(--maroon-deep);

    border-radius: 14px;

    text-align: center;
}

.faq-contact h2 {
    color: #fff;

    margin-bottom: 12px;
}

.faq-contact p {
    color: #e8eefc;

    margin-bottom: 25px;
}

.faq-contact .faq-btn {
    display: inline-block;

    background: #fff;

    color: var(--maroon-deep);

    padding: 13px 28px;

    border-radius: 6px;

    text-decoration: none;

    font-weight: 600;

    transition: 0.3s;
}

.faq-contact .faq-btn:hover {
    background: var(--gold);

    color: var(--maroon-deep);
}


/* =====================================================
   CONTACT PAGE
===================================================== */

.contact-page {
    background: var(--light-bg);

    padding: 80px 0;
}

.contact-header {
    text-align: center;

    max-width: 800px;

    margin: 0 auto 50px;
}

.contact-header h1 {
    font-size: 42px;

    color: var(--maroon-deep);

    margin-bottom: 15px;
}

.contact-header p {
    color: #666;

    font-size: 17px;

    line-height: 1.7;
}


/* CONTACT LAYOUT */

.contact-layout {
    display: grid;

    grid-template-columns: 1fr 1.5fr;

    gap: 35px;

    align-items: start;
}


/* CONTACT INFORMATION */

.contact-info {
    background: var(--maroon);

    padding: 40px;

    border-radius: 14px;

    color: #fff;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.12);
}

.contact-info h2 {
    color: #fff;

    font-size: 27px;

    margin-bottom: 12px;
}

.contact-info > p {
    color: #e8eefc;

    margin-bottom: 30px;

    line-height: 1.7;
}

.contact-item {
    display: flex;

    gap: 18px;

    margin-bottom: 25px;

    align-items: flex-start;
}

.contact-icon {
    width: 45px;

    height: 45px;

    min-width: 45px;

    background: rgba(255, 255, 255, 0.15);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;
}

.contact-item h4 {
    color: #fff;

    font-size: 16px;

    margin-bottom: 4px;
}

.contact-item p {
    color: #e8eefc;

    margin: 0;

    line-height: 1.6;
}

.contact-item a {
    color: #fff;

    text-decoration: none;
}

.contact-item a:hover {
    text-decoration: underline;
}


/* SOCIAL */

.contact-social {
    margin-top: 35px;

    padding-top: 25px;

    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-social h4 {
    color: #fff;

    margin-bottom: 15px;
}

.social-links {
    display: flex;

    gap: 10px;
}

.social-links a {
    width: 40px;

    height: 40px;

    background: rgba(255, 255, 255, 0.15);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    text-decoration: none;

    transition: 0.3s;
}

.social-links a:hover {
    background: #fff;

    color: var(--maroon-deep);
}


/* CONTACT FORM */

.contact-form {
    background: var(--white);

    padding: 40px;

    border-radius: 14px;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.08);
}

.contact-form h2 {
    font-size: 27px;

    color: var(--maroon-deep);

    margin-bottom: 25px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;

    font-weight: 600;

    color: #444;

    margin-bottom: 7px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;

    padding: 13px 15px;

    border: 1px solid #ddd;

    border-radius: 7px;

    font-size: 15px;

    color: #333;

    outline: none;

    transition: 0.3s;

    background: #fff;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--maroon-deep);

    box-shadow:
        0 0 0 3px rgba(42, 10, 16, 0.1);
}

.form-group textarea {
    height: 150px;

    resize: vertical;
}

.form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;
}


/* CONTACT BUTTON */

.contact-submit {
    width: 100%;

    padding: 14px 25px;

    background: var(--maroon-deep);

    color: #fff;

    border: none;

    border-radius: 7px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.3s;
}

.contact-submit:hover {
    background: var(--maroon);

    transform: translateY(-2px);
}


/* OFFICE HOURS */

.office-hours {
    margin-top: 35px;

    background: var(--white);

    padding: 30px;

    border-radius: 12px;

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.07);
}

.office-hours h2 {
    color: var(--maroon-deep);

    margin-bottom: 20px;
}

.hours-row {
    display: flex;

    justify-content: space-between;

    padding: 10px 0;

    border-bottom: 1px solid #eee;
}

.hours-row:last-child {
    border-bottom: none;
}

.hours-row span:first-child {
    font-weight: 600;

    color: #444;
}

.hours-row span:last-child {
    color: #666;
}


/* MAP */

.contact-map {
    margin-top: 35px;

    height: 350px;

    background: #ddd;

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.07);
}

.contact-map iframe {
    width: 100%;

    height: 100%;

    border: 0;
}


/* =====================================================
   LAND FOR SALE
===================================================== */

.land-page {
    background: var(--light-bg);

    padding-bottom: 80px;
}

.land-hero {
    min-height: 400px;

    background:
        linear-gradient(
            rgba(42, 10, 16, 0.78),
            rgba(42, 10, 16, 0.78)
        ),
        url("images/land-hero.jpg") center / cover no-repeat;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 80px 20px;
}

.land-hero-content {
    max-width: 850px;
}

.land-hero h1 {
    color: #fff;

    font-size: 48px;

    margin-bottom: 18px;
}

.land-hero p {
    color: #eef3ff;

    font-size: 18px;

    line-height: 1.8;
}


/* FILTER */

.land-filter-wrapper {
    margin-top: -45px;

    position: relative;

    z-index: 10;
}

.land-filter {
    background: #fff;

    padding: 25px;

    border-radius: 12px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.12);

    display: grid;

    grid-template-columns: 1.5fr 1fr 1fr 1fr auto;

    gap: 15px;

    align-items: end;
}

.land-filter-group label {
    display: block;

    font-size: 13px;

    font-weight: 600;

    color: #444;

    margin-bottom: 7px;
}

.land-filter-group input,
.land-filter-group select {
    width: 100%;

    padding: 12px 13px;

    border: 1px solid #ddd;

    border-radius: 6px;

    background: #fff;

    font-size: 14px;

    outline: none;
}

.land-filter-group input:focus,
.land-filter-group select:focus {
    border-color: var(--maroon-deep);
}

.land-search-btn {
    padding: 12px 23px;

    background: var(--maroon-deep);

    color: #fff;

    border: none;

    border-radius: 6px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.3s;
}

.land-search-btn:hover {
    background: var(--maroon);
}


/* LAND INTRO */

.land-intro {
    text-align: center;

    padding: 75px 0 45px;
}

.land-intro h2 {
    color: var(--maroon-deep);

    font-size: 35px;

    margin-bottom: 15px;
}

.land-intro p {
    max-width: 800px;

    margin: auto;

    color: #666;

    font-size: 17px;

    line-height: 1.8;
}


/* LISTING HEADER */

.land-listing-header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;
}

.land-listing-header h2 {
    color: var(--maroon-deep);

    margin: 0;

    font-size: 27px;
}

.land-count {
    color: #777;

    font-size: 14px;
}


/* LAND GRID */

.land-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 28px;
}


/* LAND CARD */

.land-card {
    background: #fff;

    border-radius: 12px;

    overflow: hidden;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.08);

    border: 1px solid #eee;

    transition: all 0.3s ease;
}

.land-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.14);
}


/* LAND IMAGE */

.land-image {
    height: 220px;

    position: relative;

    overflow: hidden;
}

.land-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.4s ease;
}

.land-card:hover .land-image img {
    transform: scale(1.05);
}


/* LAND STATUS */

.land-status {
    position: absolute;

    top: 15px;

    left: 15px;

    background: var(--maroon-deep);

    color: #fff;

    padding: 6px 12px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 600;
}

.land-status.featured {
    background: #198754;
}


/* LAND PRICE */

.land-price {
    position: absolute;

    right: 15px;

    bottom: 15px;

    background: rgba(0, 0, 0, 0.75);

    color: #fff;

    padding: 8px 12px;

    border-radius: 5px;

    font-size: 16px;

    font-weight: 700;
}


/* LAND CONTENT */

.land-content {
    padding: 23px;
}

.land-content h3 {
    color: var(--maroon-deep);

    font-size: 21px;

    margin-bottom: 7px;
}

.land-location {
    color: #777;

    font-size: 14px;

    margin-bottom: 18px;
}

.land-location span {
    color: var(--maroon-deep);
}


/* LAND DETAILS */

.land-details {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid #eee;

    border-bottom: 1px solid #eee;

    padding: 15px 0;

    margin-bottom: 18px;
}

.land-detail {
    text-align: center;

    border-right: 1px solid #eee;
}

.land-detail:last-child {
    border-right: none;
}

.land-detail strong {
    display: block;

    color: var(--maroon-deep);

    font-size: 15px;
}

.land-detail span {
    color: #777;

    font-size: 12px;
}


/* LAND DESCRIPTION */

.land-description {
    color: #666;

    font-size: 14px;

    line-height: 1.7;

    margin-bottom: 20px;
}


/* LAND BUTTONS */

.land-actions {
    display: flex;

    gap: 10px;
}

.land-btn {
    flex: 1;

    text-align: center;

    padding: 11px 10px;

    border-radius: 6px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition: 0.3s;
}

.land-btn-primary {
    background: var(--maroon-deep);

    color: #fff;
}

.land-btn-primary:hover {
    background: var(--maroon);
}

.land-btn-outline {
    border: 1px solid var(--maroon-deep);

    color: var(--maroon-deep);

    background: #fff;
}

.land-btn-outline:hover {
    background: var(--maroon-deep);

    color: #fff;
}


/* LAND BENEFITS */

.land-benefits {
    background: #fff;

    margin-top: 80px;

    padding: 75px 0;
}

.land-benefits-header {
    text-align: center;

    max-width: 750px;

    margin: 0 auto 45px;
}

.land-benefits-header h2 {
    color: var(--maroon-deep);

    font-size: 35px;

    margin-bottom: 15px;
}

.land-benefits-header p {
    color: #666;

    line-height: 1.8;
}

.land-benefits-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;
}

.land-benefit {
    background: var(--light-bg);

    padding: 30px 20px;

    border-radius: 10px;

    text-align: center;

    transition: 0.3s;
}

.land-benefit:hover {
    transform: translateY(-6px);

    background: var(--maroon-deep);
}

.land-benefit-icon {
    font-size: 35px;

    margin-bottom: 15px;
}

.land-benefit h3 {
    color: var(--maroon-deep);

    font-size: 19px;
}

.land-benefit p {
    color: #666;

    font-size: 14px;

    line-height: 1.7;
}

.land-benefit:hover h3,
.land-benefit:hover p {
    color: #fff;
}


/* LAND CTA */

.land-cta {
    background: var(--maroon-deep);

    text-align: center;

    padding: 70px 20px;
}

.land-cta h2 {
    color: #fff;

    font-size: 35px;

    margin-bottom: 15px;
}

.land-cta p {
    max-width: 700px;

    margin: 0 auto 30px;

    color: #e8eefc;

    line-height: 1.8;
}

.land-cta a {
    display: inline-block;

    background: #fff;

    color: var(--maroon-deep);

    padding: 14px 30px;

    border-radius: 7px;

    text-decoration: none;

    font-weight: 600;

    transition: 0.3s;
}

.land-cta a:hover {
    background: var(--gold);

    color: var(--maroon-deep);
}


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

footer {
    background: var(--ink);

    color: var(--parchment);

    padding: 80px 24px 32px;
}

.footer-grid {
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    /*
       FOUR COLUMNS
       First column is slightly wider
    */
    grid-template-columns: 1.4fr 1fr 1fr 1fr;

    gap: 40px;

    align-items: start;
}

footer h2 {
    font-family: "Fraunces", serif;

    font-weight: 600;

    font-size: 2rem;

    margin-bottom: 16px;

    color: var(--cream);
}

footer p {
    font-size: 14px;

    color: rgba(244, 236, 221, 0.6);

    line-height: 1.6;

    max-width: 340px;
}

.footer-col h4 {
    font-family: "IBM Plex Mono", monospace;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.14em;

    color: var(--gold);

    margin-bottom: 18px;
}

.footer-col a,
.footer-col div {
    display: block;

    font-size: 14.5px;

    color: rgba(244, 236, 221, 0.85);

    text-decoration: none;

    margin-bottom: 10px;
}

.footer-col a:hover {
    color: var(--gold);
}

.footer-bottom {
    max-width: 1200px;

    margin: 60px auto 0;

    padding-top: 24px;

    border-top: 1px solid rgba(244, 236, 221, 0.12);

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 12px;

    font-size: 12px;

    color: rgba(244, 236, 221, 0.45);
}


/* =====================================================
   REVEAL ANIMATION
===================================================== */

.reveal {
    opacity: 0;

    transform: translateY(24px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.reveal.in {
    opacity: 1;

    transform: translateY(0);
}


/* =====================================================
   WHATSAPP FLOATING BUTTON
===================================================== */

.whatsapp-btn {
    position: fixed;

    right: 22px;

    bottom: 22px;

    z-index: 200;

    display: flex;

    align-items: center;

    gap: 10px;

    background: #25D366;

    color: #fff;

    text-decoration: none;

    padding: 14px;

    border-radius: 50px;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.35);

    transition:
        transform 0.2s,
        box-shadow 0.2s,
        padding 0.25s;

    overflow: hidden;
}

.whatsapp-btn svg {
    width: 28px;

    height: 28px;

    flex-shrink: 0;
}

.whatsapp-btn .wa-label {
    max-width: 0;

    opacity: 0;

    white-space: nowrap;

    overflow: hidden;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    font-weight: 600;

    transition:
        max-width 0.3s ease,
        opacity 0.25s ease;
}

.whatsapp-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.4);
}

.whatsapp-btn:hover .wa-label {
    max-width: 160px;

    opacity: 1;

    margin-right: 2px;
}


/* =====================================================
   RESPONSIVE - 1000PX
===================================================== */

@media (max-width: 1000px) {

    .foundation-value-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .land-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .land-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =====================================================
   RESPONSIVE - 900PX
===================================================== */

@media (max-width: 900px) {

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .foundation-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .faq-layout {
        grid-template-columns: 1fr;
    }

    .faq-categories {
        position: static;
    }

    .contact-layout {
        grid-template-columns: 1fr;
    }

    .land-filter {
        grid-template-columns: repeat(2, 1fr);
    }

    .land-search-btn {
        width: 100%;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 35px;
    }
}


/* =====================================================
   RESPONSIVE - 800PX
===================================================== */

@media (max-width: 800px) {

    .value-grid {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .value-photo {
        height: 250px;
    }

    .value-content {
        padding: 25px;
    }
}


/* =====================================================
   RESPONSIVE - 768PX
===================================================== */

@media (max-width: 768px) {

    .hero {
        min-height: 650px;
    }

    .hero-inner {
        grid-template-columns: 1fr;
    }

    .survey-pin {
        display: none;
    }

    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(42, 10, 16, 0.88),
                rgba(42, 10, 16, 0.65)
            );
    }

    .foundation {
        padding: 60px 0;
    }

    .foundation h2,
    .team-section h2 {
        font-size: 32px;
    }

    .contact-layout {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   RESPONSIVE - 750PX
===================================================== */

@media (max-width: 750px) {

    .land-hero {
        min-height: 350px;
    }

    .land-hero h1 {
        font-size: 38px;
    }

    .land-filter {
        grid-template-columns: 1fr;
    }

    .land-grid {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   RESPONSIVE - 640PX
===================================================== */

@media (max-width: 640px) {

    .ledger-row {
        grid-template-columns: 50px 1fr;

        row-gap: 10px;
    }

    .plot-price {
        grid-column: 1 / -1;

        width: fit-content;

        justify-self: start;
    }
}


/* =====================================================
   RESPONSIVE - 600PX
===================================================== */

@media (max-width: 600px) {

    section {
        padding: 70px 20px;
    }

    .container {
        width: 92%;

        padding-top: 60px;
    }


    /* FOUNDATION */

    .foundation {
        padding: 50px 0;
    }

    .foundation h2,
    .team-section h2 {
        font-size: 30px;
    }

    .foundation .subtitle,
    .team-subtitle {
        font-size: 15px;
        margin-bottom: 35px;
    }

    .foundation-cards {
        grid-template-columns: 1fr;
    }

    .foundation-card {
        padding: 25px;
    }

    .foundation-objectives {
        padding: 25px;
    }

    .foundation-value-grid {
        grid-template-columns: 1fr;
    }


    /* TEAM */

    .team-section {
        padding: 60px 0;
    }

    .team-section .container {
        width: 100%;
    }

    .team-section h2 {
        font-size: 30px;

        padding: 0 20px;
    }

    .team-subtitle {
        font-size: 15px;

        padding: 0 20px;

        margin-bottom: 35px;
    }

    /*
       Horizontal scrolling team
       ONLY on mobile
    */

    .team-grid {
        display: flex;

        gap: 20px;

        overflow-x: auto;

        overflow-y: hidden;

        padding: 10px 20px 25px;

        scroll-behavior: smooth;

        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: thin;

        scrollbar-color:
            var(--rust)
            rgba(42, 10, 16, 0.08);
    }

    .team-card {
        flex: 0 0 82%;

        width: 82%;

        max-width: 340px;

        scroll-snap-align: start;
    }

    .team-image {
        height: 320px;
    }


    /* FAQ */

    .faq-page {
        padding: 50px 0;
    }

    .faq-header h1 {
        font-size: 32px;
    }

    .faq-header p {
        font-size: 15px;
    }

    .faq-search {
        margin-bottom: 35px;
    }

    .faq-categories {
        padding: 20px;
    }

    .faq-question {
        padding: 17px 45px 17px 17px;

        font-size: 15px;
    }

    .faq-answer-content {
        padding: 0 17px 17px;
    }

    .faq-contact {
        padding: 30px 20px;
    }


    /* CONTACT */

    .contact-page {
        padding: 50px 0;
    }

    .contact-header h1 {
        font-size: 32px;
    }

    .contact-header p {
        font-size: 15px;
    }

    .contact-info,
    .contact-form {
        padding: 25px;
    }

    .contact-map {
        height: 280px;
    }


    /* LAND */

    .land-hero h1 {
        font-size: 32px;
    }

    .land-hero p {
        font-size: 15px;
    }

    .land-intro {
        padding: 55px 0 35px;
    }

    .land-intro h2,
    .land-benefits-header h2 {
        font-size: 29px;
    }

    .land-listing-header {
        flex-direction: column;

        align-items: flex-start;

        gap: 8px;
    }

    .land-image {
        height: 230px;
    }

    .land-benefits-grid {
        grid-template-columns: 1fr;
    }

    .land-cta h2 {
        font-size: 28px;
    }


    /* FOOTER */

    .footer-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    /* WHATSAPP */

    .whatsapp-btn {
        right: 16px;

        bottom: 16px;
    }

    .whatsapp-btn .wa-label {
        display: none;
    }
}


/* =====================================================
   RESPONSIVE - 520PX
===================================================== */

@media (max-width: 520px) {

    .services-grid {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .why-grid {
        grid-template-columns: 1fr;
    }

    .value-photo {
        height: 220px;
    }

    .value-content h4 {
        font-size: 21px;
    }
}


/* =====================================================
   TEAM SCROLLBAR
===================================================== */

.team-grid::-webkit-scrollbar {
    height: 7px;
}

.team-grid::-webkit-scrollbar-track {
    background: rgba(42, 10, 16, 0.08);

    border-radius: 10px;
}

.team-grid::-webkit-scrollbar-thumb {
    background: var(--rust);

    border-radius: 10px;
}

.team-grid::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}
/* =====================================================
   FOOTER SOCIAL MEDIA
===================================================== */

.footer-col .contact-social {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(244, 236, 221, 0.15);
}

.footer-col .contact-social h4 {
    margin-bottom: 14px;
}

/* SOCIAL ICONS HORIZONTAL */
.footer-col .social-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: nowrap;
}

/* INDIVIDUAL SOCIAL ICON */
.footer-col .social-links a {
    width: 40px;
    height: 40px;

    min-width: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, 0.12);
    color: #fff;

    border-radius: 50%;

    text-decoration: none;

    margin: 0;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.footer-col .social-links a:hover {
    background: var(--gold);
    color: var(--maroon-deep);
    transform: translateY(-3px);
}

.footer-col .social-links i {
    font-size: 17px;
    line-height: 1;
}

/* =====================================================
   GALLERY PAGE
===================================================== */

.gallery-page {

    padding: 70px 0;

    background:
        linear-gradient(
            180deg,
            #fff 0%,
            #fff 100%
        );

}


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

.gallery-header {

    max-width: 800px;

    margin: 0 auto 50px;

    text-align: center;

}

.gallery-header h1 {

    margin: 0 0 15px;

    color: #570010;

    font-family: "Fraunces", serif;

    font-size: clamp(
        34px,
        5vw,
        56px
    );

    font-weight: 700;

}

.gallery-header p {

    margin: 0;

    color: #5c4c45;

    font-size: 17px;

    line-height: 1.8;

}


/* =====================================================
   LAYOUT
===================================================== */

.gallery-layout {

    display: grid;

    grid-template-columns: 250px 1fr;

    gap: 45px;

    align-items: start;

}


/* =====================================================
   CATEGORY SIDEBAR
===================================================== */

.gallery-categories {

    position: sticky;

    top: 100px;

    padding: 25px;

    background: rgba(
        255,
        255,
        255,
        0.55
    );

    border: 1px solid rgba(
        87,
        0,
        16,
        0.10
    );

    border-radius: 14px;

    box-shadow:
        0 10px 30px rgba(
            36,
            23,
            18,
            0.06
        );

}

.gallery-categories h3 {

    margin: 0 0 20px;

    color: #570010;

    font-family: "Fraunces", serif;

    font-size: 20px;

}

.gallery-categories ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.gallery-categories li {

    margin-bottom: 6px;

}

.gallery-categories a {

    display: block;

    padding: 12px 14px;

    color: #5c4c45;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    border-radius: 8px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;

}

.gallery-categories a:hover {

    color: #570010;

    background: rgba(
        87,
        0,
        16,
        0.07
    );

    transform: translateX(3px);

}

.gallery-categories a.active {

    color: #fff;

    background: #570010;

    box-shadow:
        0 5px 15px rgba(
            87,
            0,
            16,
            0.20
        );

}


/* =====================================================
   GALLERY GRID
===================================================== */

.gallery-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 22px;

}


/* =====================================================
   GALLERY ITEM
===================================================== */

.gallery-item {

    position: relative;

    overflow: hidden;

    border-radius: 14px;

    background: #fff;

    box-shadow:
        0 10px 30px rgba(
            36,
            23,
            18,
            0.10
        );

    cursor: pointer;

    animation: galleryFade .35s ease;

}

.gallery-item.hidden {

    display: none;

}


/* =====================================================
   IMAGE
===================================================== */

.gallery-image {

    position: relative;

    width: 100%;

    height: 260px;

    overflow: hidden;

}

.gallery-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .5s ease;

}

.gallery-item:hover img {

    transform: scale(1.07);

}


/* =====================================================
   IMAGE OVERLAY
===================================================== */

.gallery-overlay {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    padding: 25px 20px 20px;

    color: #fff;

    background:
        linear-gradient(
            transparent,
            rgba(
                0,
                0,
                0,
                .85
            )
        );

    transform:
        translateY(100%);

    transition:
        transform .35s ease;

}

.gallery-item:hover .gallery-overlay {

    transform:
        translateY(0);

}

.gallery-overlay h3 {

    margin: 0 0 5px;

    font-size: 18px;

}

.gallery-overlay p {

    margin: 0;

    font-size: 13px;

    line-height: 1.5;

    opacity: .9;

}


/* =====================================================
   EMPTY MESSAGE
===================================================== */

.gallery-empty {

    display: none;

    padding: 70px 20px;

    text-align: center;

    color: #6b5a52;

}

.gallery-empty i {

    margin-bottom: 15px;

    font-size: 45px;

    color: #570010;

}

.gallery-empty h3 {

    margin: 0 0 8px;

    color: #570010;

}

.gallery-empty p {

    margin: 0;

}


/* =====================================================
   LIGHTBOX
===================================================== */

.gallery-lightbox {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background:
        rgba(
            20,
            10,
            8,
            .94
        );

}

.gallery-lightbox.active {

    display: flex;

}


/* =====================================================
   LIGHTBOX CONTENT
===================================================== */

.lightbox-content {

    max-width: 1000px;

    max-height: 90vh;

    text-align: center;

}

.lightbox-content img {

    display: block;

    max-width: 100%;

    max-height: 75vh;

    margin: auto;

    object-fit: contain;

    border-radius: 8px;

    box-shadow:
        0 20px 60px rgba(
            0,
            0,
            0,
            .5
        );

}

.lightbox-caption {

    margin-top: 15px;

    color: #fff;

}

.lightbox-caption h3 {

    margin: 0 0 5px;

    font-family: "Fraunces", serif;

    font-size: 22px;

}

.lightbox-caption p {

    margin: 0;

    opacity: .8;

    font-size: 14px;

}


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

.lightbox-close,
.lightbox-prev,
.lightbox-next {

    position: absolute;

    border: 0;

    color: #fff;

    background: rgba(
        255,
        255,
        255,
        .12
    );

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;

}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {

    background: rgba(
        255,
        255,
        255,
        .25
    );

    transform: scale(1.05);

}

.lightbox-close {

    top: 20px;

    right: 25px;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    font-size: 30px;

    line-height: 40px;

}

.lightbox-prev,
.lightbox-next {

    top: 50%;

    width: 50px;

    height: 50px;

    margin-top: -25px;

    border-radius: 50%;

    font-size: 25px;

}

.lightbox-prev {

    left: 25px;

}

.lightbox-next {

    right: 25px;

}


/* =====================================================
   ANIMATION
===================================================== */

@keyframes galleryFade {

    from {

        opacity: 0;

        transform:
            translateY(10px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 992px) {

    .gallery-layout {

        grid-template-columns: 210px 1fr;

        gap: 25px;

    }

    .gallery-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }

}


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

@media (max-width: 768px) {

    .gallery-page {

        padding: 45px 0;

    }

    .gallery-layout {

        display: block;

    }

    .gallery-categories {

        position: static;

        margin-bottom: 30px;

        padding: 15px;

        overflow-x: auto;

    }

    .gallery-categories h3 {

        margin-bottom: 12px;

    }

    .gallery-categories ul {

        display: flex;

        gap: 8px;

        min-width: max-content;

    }

    .gallery-categories li {

        margin: 0;

    }

    .gallery-categories a {

        white-space: nowrap;

        padding: 10px 14px;

    }

    .gallery-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 12px;

    }

    .gallery-image {

        height: 210px;

    }

    .gallery-overlay {

        transform: translateY(0);

        padding: 18px 12px 12px;

    }

    .gallery-overlay h3 {

        font-size: 15px;

    }

    .gallery-overlay p {

        display: none;

    }

    .lightbox-prev {

        left: 10px;

    }

    .lightbox-next {

        right: 10px;

    }

}


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

@media (max-width: 480px) {

    .gallery-grid {

        grid-template-columns: 1fr;

    }

    .gallery-image {

        height: 250px;

    }

    .gallery-header p {

        font-size: 15px;

    }

    .gallery-lightbox {

        padding: 15px;

    }

}