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


.search-card .control {
    position: relative;
}

.search-card .control input {
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    color: inherit;
    width: 100%;
}

.search-card .control-value {
    display: block;
}

.search-card .control-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    min-width: 200px;

    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 14px 32px rgba(17, 27, 69, 0.13);
    padding: 6px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);

    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;

    z-index: 1000;
}

.search-card .control-dropdown.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.search-card .control-dropdown button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: #3e475d;
}

.search-card .control-dropdown button:hover {
    background: #f0f3ff;
    color: var(--blue);
}

.hero {
    min-height: 590px !important;
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(90deg,
            rgb(248, 250, 255) 0%,
            rgba(248, 250, 255, 0) 34%,
            rgba(248, 250, 255, 0) 70%,
            rgba(248, 250, 255, 0.03) 100%),
        url("https://images.unsplash.com/photo-1596176530529-78163a4f7af2?auto=format&fit=crop&w=1800&q=85") center / cover no-repeat;
}


/* =========================================================
   HERO BOTTOM FADE
   ========================================================= */

.hero::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 85px;

    background: linear-gradient(to bottom,
            transparent,
            #ffffff);

    pointer-events: none;
}


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

.hero-inner {
    position: relative;
    z-index: 2;

    min-height: 300px;

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

    padding: 28px 0 50px;

    gap: 40px;
}


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

.hero-copy {
    width: 50%;
    padding-top: 6px;
    /* margin-bottom: 12px; */
}

.eyebrow {
    margin-bottom: 12px;

    font-size: 15px;
    font-weight: 900;

    color: var(--blue);

    letter-spacing: 0.4px;
}

.hero h1 {
    margin: 0;

    font-size: 34px;
    line-height: 1.05;

    letter-spacing: -1.6px;

    color: #111d49;

    font-weight: 700;
}

.hero h1 strong {
    color: var(--blue);
}

.hero p {
    max-width: 310px;

    margin: 12px 0 0;

    font-size: 12px;
    line-height: 1.5;

    color: #20294c;
}


/* =========================================================
   SEARCH CARD
   ========================================================= */

.search-card {
    width: 450px;

    flex-shrink: 0;

    padding: 20px;

    background: rgb(255, 255, 255);

    border: 1px solid #e8ebf2;

    border-radius: 10px;

    box-shadow:
        0 8px 25px rgb(26, 39, 80);
}


/* =========================================================
   SEARCH TABS
   ========================================================= */

.search-tabs {
    display: flex;

    gap: 12px;

    margin-bottom: 14px;
}

.tab {
    height: 31px;

    padding: 0 27px;

    border: 1px solid #e1e5ee;

    border-radius: 5px;

    background: #ffffff;

    color: #222a43;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.tab:hover {
    border-color: var(--blue);

    transform: translateY(-1px);
}

.tab.active {
    background: var(--blue);

    color: #ffffff;

    border-color: var(--blue);
}


/* =========================================================
   FORM GRID
   ========================================================= */

.form-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px 11px;
}


/* =========================================================
   FORM FIELD
   ========================================================= */

.field {
    min-width: 0;
}

.field label {
    display: block;

    margin-bottom: 6px;

    color: #202944;

    font-size: 10px;
    font-weight: 700;
}


/* =========================================================
   FORM CONTROL
   ========================================================= */

.control {
    width: 100%;
    height: 31px;

    padding: 0 9px;

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

    gap: 8px;

    border: 1px solid #dfe3eb;

    border-radius: 5px;

    background: #ffffff;

    color: #6d7488;

    font-size: 10px;

    cursor: pointer;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.control:hover {
    border-color: var(--blue);

    box-shadow:
        0 3px 10px rgba(16, 25, 167, 0.08);
}

.control>span:first-child {
    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.control-icon {
    flex-shrink: 0;

    color: var(--blue);

    font-size: 10px;
}


/* =========================================================
   FULL WIDTH FIELD
   ========================================================= */

.field.full {
    grid-column: 1 / -1;
}


/* =========================================================
   SEARCH BUTTON
   ========================================================= */

.search-btn {
    width: 100%;
    height: 32px;

    margin-top: 14px;

    border: 0;

    border-radius: 4px;

    background: var(--blue);

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    /* position: relative; */

    overflow: hidden;

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.search-btn:hover {
    background: var(--blue2);

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px rgba(16, 25, 167, 0.22);
}

.search-btn:active {
    transform: translateY(0);
}





/* =========================================================
   TRUST STRIP
   ========================================================= */

.trust {
    position: relative;
    z-index: 4;

    margin-top: -27px;

    min-height: 68px;

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

    background: linear-gradient(135deg, #0B0F5C 0%, #13207F 25%, #1E3AAB 50%, #2F54D5 75%, #4B6EFF 100%);
    color: #ffffff;

    border-radius: 7px;

    box-shadow:
        0 5px 18px rgba(16, 24, 168, 0.18);

    overflow: hidden;
}


/* =========================================================
   TRUST ITEM
   ========================================================= */

.trust-item {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 12px 20px;

    border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.trust-item:last-child {
    border-right: 0;
}


/* =========================================================
   TRUST ICON
   ========================================================= */

.trust-icon {
    width: 32px;
    height: 32px;

    flex-shrink: 0;

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

    font-size: 22px;
    font-weight: 700;

    color: #ffffff;
}


/* =========================================================
   TRUST CONTENT
   ========================================================= */

.trust-content {
    min-width: 0;
}


/* =========================================================
   TRUST TITLE
   ========================================================= */

.trust-title {
    margin-bottom: 4px;

    font-size: 15px;

    line-height: 1.2;

    font-weight: 800;

    color: #ffffff;

    white-space: nowrap;
}


/* =========================================================
   TRUST SUBTITLE
   ========================================================= */

.trust-sub {
    font-size: 11px;

    line-height: 1.3;

    font-weight: 400;

    color: rgba(255, 255, 255, 0.88);

    white-space: nowrap;
}



/* =========================================================
   SECTIONS
   ========================================================= */

section {
    padding-top: 34px;
}


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

.section-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 18px;
}

.section-head h2 {
    margin: 0;

    color: var(--text);

    font-size: 20px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -0.5px;
}

.view {
    color: var(--blue);

    font-size: 10px;

    font-weight: 700;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.view:hover {
    color: var(--blue2);

    transform: translateX(3px);
}


/* =========================================================
   LOCALITY GRID
   ========================================================= */

.locality-grid {
    display: grid;

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

    gap: 16px;
}


/* =========================================================
   LOCALITY CARD
   ========================================================= */

.locality {
    display: block;

    min-width: 0;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e4e8f0;

    border-radius: 9px;

    text-align: center;

    box-shadow:
        0 2px 6px rgba(25, 34, 65, 0.05);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.locality:hover {
    transform: translateY(-4px);

    border-color: #d5daf0;

    box-shadow:
        0 8px 20px rgba(25, 34, 65, 0.10);
}


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

.locality img {
    width: 100%;

    height: 78px;

    display: block;

    object-fit: cover;

    transition:
        transform 0.4s ease;
}

.locality:hover img {
    transform: scale(1.05);
}


/* =========================================================
   LOCALITY NAME
   ========================================================= */

.locality .name {
    margin-top: 9px;

    padding: 0 5px;

    color: var(--text);

    font-size: 15px;

    line-height: 1.25;

    font-weight: 800;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   PROPERTY COUNT
   ========================================================= */

.locality .count {
    padding: 5px 4px 11px;

    color: #6f7688;

    font-size: 11px;

    line-height: 1.3;

    font-weight: 500;

    white-space: nowrap;
}


/* =========================================================
   STAGGER ANIMATION SUPPORT
   ========================================================= */

.locality-grid.stagger>.locality {
    opacity: 0;
    transform: translateY(20px);
}

.locality-grid.stagger.visible>.locality {
    animation:
        localityCardIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.locality-grid.stagger.visible>.locality:nth-child(1) {
    animation-delay: 0.04s;
}

.locality-grid.stagger.visible>.locality:nth-child(2) {
    animation-delay: 0.10s;
}

.locality-grid.stagger.visible>.locality:nth-child(3) {
    animation-delay: 0.16s;
}

.locality-grid.stagger.visible>.locality:nth-child(4) {
    animation-delay: 0.22s;
}

.locality-grid.stagger.visible>.locality:nth-child(5) {
    animation-delay: 0.28s;
}

.locality-grid.stagger.visible>.locality:nth-child(6) {
    animation-delay: 0.34s;
}

.locality-grid.stagger.visible>.locality:nth-child(7) {
    animation-delay: 0.40s;
}

.locality-grid.stagger.visible>.locality:nth-child(8) {
    animation-delay: 0.46s;
}

@keyframes localityCardIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* =========================================================
   FEATURED PROPERTIES
   ========================================================= */

.property-grid {
    display: grid;

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

    gap: 18px;
}


/* =========================================================
   PROPERTY CARD
   ========================================================= */

.card {
    position: relative;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e0e4ec;

    border-radius: 10px;

    box-shadow:
        0 3px 10px rgba(21, 31, 67, 0.06);

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

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

    border-color: #d6dbeb;

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


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

.card-image {
    height: 165px;

    position: relative;

    overflow: hidden;

    background: #eef1f6;
}

.card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.45s ease;
}

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


/* =========================================================
   FEATURE BADGE
   ========================================================= */

.badge {
    position: absolute;

    top: 10px;
    left: 10px;

    padding: 5px 8px;

    border-radius: 5px;

    background: var(--blue);

    color: #ffffff;

    font-size: 8px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 0.3px;
}

.badge.new {
    background: #20a66a;
}


/* =========================================================
   HEART
   ========================================================= */

.heart {
    position: absolute;

    top: 9px;
    right: 9px;

    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border: 1px solid #dfe3eb;

    border-radius: 50%;

    background: #ffffff;

    color: #677089;

    font-size: 18px;

    line-height: 1;

    cursor: pointer;

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

.heart:hover {
    color: #e52e5f;

    transform: scale(1.08);

    background: #fff;
}


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

.location {
    /* position: absolute; */

    left: 10px;
    bottom: 9px;

    color: #ffffff;

    font-size: 9px;

    font-weight: 600;

    /* text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.8); */
}


/* =========================================================
   CARD BODY
   ========================================================= */

.card-body {
    padding: 13px 13px 14px;
}


/* =========================================================
   PRICE
   ========================================================= */

.price {
    color: #1c2344;

    font-size: 17px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -0.3px;
}

.price span {
    color: #7a8090;

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 0;
}


/* =========================================================
   PROPERTY TITLE
   ========================================================= */

.title {
    margin-top: 8px;

    color: var(--text);

    font-size: 14px;

    line-height: 1.3;

    font-weight: 700;
}


/* =========================================================
   PROPERTY LOCATION
   ========================================================= */

.place {
    margin-top: 5px;

    color: #656c7d;

    font-size: 12px;

    line-height: 1.3;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   PROPERTY META
   ========================================================= */

.meta {
    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 11px;

    color: #6d7482;

    font-size: 9px;

    line-height: 1.2;
}

.meta span {
    white-space: nowrap;
}


/* =========================================================
   PROPERTY TAG
   ========================================================= */

.tag {
    display: inline-block;

    margin-top: 10px;

    padding: 5px 8px;

    border-radius: 4px;

    background: #f5f5f7;

    color: #656b79;

    font-size: 11px;

    line-height: 1;

    font-weight: 600;
}


/* =========================================================
   BROKER
   ========================================================= */

.broker {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 11px;

    padding-top: 10px;

    border-top: 1px solid #edf0f4;
}


/* =========================================================
   BROKER AVATAR
   ========================================================= */

.avatar {
    width: 32px;
    height: 32px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #001783;

    color: #ffffff;

    font-size: 8px;

    font-weight: 800;
}


/* =========================================================
   BROKER INFO
   ========================================================= */

.broker-info {
    min-width: 0;
}

.broker-name {
    color: var(--text);

    font-size: 9px;

    line-height: 1.2;

    font-weight: 800;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.verified {
    margin-top: 3px;

    color: #20a66a;

    font-size: 8px;

    line-height: 1.2;

    font-weight: 600;
}


/* =========================================================
   PROPERTY CARD STAGGER ANIMATION
   ========================================================= */

.property-grid.stagger>.card {
    opacity: 0;

    transform: translateY(20px);
}

.property-grid.stagger.visible>.card {
    animation:
        propertyCardIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.property-grid.stagger.visible>.card:nth-child(1) {
    animation-delay: 0.04s;
}

.property-grid.stagger.visible>.card:nth-child(2) {
    animation-delay: 0.10s;
}

.property-grid.stagger.visible>.card:nth-child(3) {
    animation-delay: 0.16s;
}

.property-grid.stagger.visible>.card:nth-child(4) {
    animation-delay: 0.22s;
}

@keyframes propertyCardIn {
    to {
        opacity: 1;

        transform: translateY(0);
    }
}



/* =========================================================
   PROPERTY TYPES
   ========================================================= */

.type-grid {
    display: grid;

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

    gap: 17px;
}


/* =========================================================
   TYPE CARD
   ========================================================= */

.type {
    height: 125px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 15px 10px;

    background: #ffffff;

    border: 1px solid #e1e5ee;

    border-radius: 10px;

    color: var(--text);

    text-align: center;

    box-shadow:
        0 3px 10px rgba(25, 34, 65, 0.05);

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


/* =========================================================
   TYPE CARD HOVER
   ========================================================= */

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

    border-color: rgba(16, 25, 167, 0.25);

    background: #ffffff;

    box-shadow:
        0 10px 24px rgba(25, 34, 65, 0.11);
}


/* =========================================================
   TYPE ICON
   ========================================================= */

.type-icon {
    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 10px;

    border-radius: 10px;

    background: #eef0ff;

    color: var(--blue);

    font-size: 28px;

    line-height: 1;

    font-weight: 700;

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

.type:hover .type-icon {
    transform: scale(1.08);

    background: var(--blue);

    color: #ffffff;
}


/* =========================================================
   TYPE NAME
   ========================================================= */

.type-name {
    max-width: 100%;

    color: var(--text);

    font-size: 15px;

    line-height: 1.25;

    font-weight: 800;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   TYPE COUNT
   ========================================================= */

.type-count {
    margin-top: 5px;

    color: #73798a;

    font-size: 11px;

    line-height: 1.3;

    font-weight: 500;
}


/* =========================================================
   TYPE STAGGER ANIMATION
   ========================================================= */

.type-grid.stagger>.type {
    opacity: 0;

    transform: translateY(20px);
}

.type-grid.stagger.visible>.type {
    animation:
        typeCardIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.type-grid.stagger.visible>.type:nth-child(1) {
    animation-delay: 0.04s;
}

.type-grid.stagger.visible>.type:nth-child(2) {
    animation-delay: 0.10s;
}

.type-grid.stagger.visible>.type:nth-child(3) {
    animation-delay: 0.16s;
}

.type-grid.stagger.visible>.type:nth-child(4) {
    animation-delay: 0.22s;
}

.type-grid.stagger.visible>.type:nth-child(5) {
    animation-delay: 0.28s;
}

.type-grid.stagger.visible>.type:nth-child(6) {
    animation-delay: 0.34s;
}

@keyframes typeCardIn {
    to {
        opacity: 1;

        transform: translateY(0);
    }
}



/* =========================================================
   WHY CHOOSE KEYS PLEASE VENTURE
   ========================================================= */

.why-grid {
    display: grid;

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

    gap: 17px;
}


/* =========================================================
   WHY CARD
   ========================================================= */

.why {
    min-height: 145px;

    padding: 20px 14px 18px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    background: #ffffff;

    border: 1px solid #e1e5ee;

    border-radius: 10px;

    text-align: center;

    box-shadow:
        0 3px 10px rgba(25, 34, 65, 0.05);

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


/* =========================================================
   WHY CARD HOVER
   ========================================================= */

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

    border-color: rgba(16, 25, 167, 0.25);

    box-shadow:
        0 10px 25px rgba(25, 34, 65, 0.11);
}


/* =========================================================
   WHY ICON
   ========================================================= */

.why-icon {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

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

    margin-bottom: 13px;

    border-radius: 14px;

    background: #eef0ff;

    color: var(--blue);

    font-size: 25px;

    font-weight: 700;

    line-height: 1;

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


/* Icon hover */

.why:hover .why-icon {
    background: var(--blue);

    color: #ffffff;

    transform: translateY(-2px) scale(1.06);
}


/* =========================================================
   WHY HEADING
   ========================================================= */

.why h3 {
    margin: 0 0 7px;

    color: var(--text);

    font-size: 15px;

    line-height: 1.3;

    font-weight: 800;
}


/* =========================================================
   WHY DESCRIPTION
   ========================================================= */

.why p {
    max-width: 180px;

    margin: 0;

    color: #6b7181;

    font-size: 11px;

    line-height: 1.5;

    font-weight: 400;
}


/* =========================================================
   WHY STAGGER ANIMATION
   ========================================================= */

.why-grid.stagger>.why {
    opacity: 0;

    transform: translateY(20px);
}

.why-grid.stagger.visible>.why {
    animation:
        whyCardIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.why-grid.stagger.visible>.why:nth-child(1) {
    animation-delay: 0.04s;
}

.why-grid.stagger.visible>.why:nth-child(2) {
    animation-delay: 0.10s;
}

.why-grid.stagger.visible>.why:nth-child(3) {
    animation-delay: 0.16s;
}

.why-grid.stagger.visible>.why:nth-child(4) {
    animation-delay: 0.22s;
}

.why-grid.stagger.visible>.why:nth-child(5) {
    animation-delay: 0.28s;
}


@keyframes whyCardIn {
    to {
        opacity: 1;

        transform: translateY(0);
    }
}



/* =========================================================
   CTA ROW
   ========================================================= */

.cta-row {
    display: grid;

    grid-template-columns: 280px 1fr;

    gap: 18px;

    margin-top: 32px;

    margin-bottom: 20px;
}


/* =========================================================
   BROKERAGE POLICY CARD
   ========================================================= */

.policy {
    min-height: 155px;

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 22px 20px;

    background: #f7f8fd;

    border: 1px solid #e3e7ef;

    border-radius: 10px;

    box-shadow:
        0 3px 10px rgba(25, 34, 65, 0.04);

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

.policy:hover {
    transform: translateY(-4px);

    border-color: #d8dcef;

    box-shadow:
        0 9px 22px rgba(25, 34, 65, 0.08);
}


/* =========================================================
   POLICY ICON
   ========================================================= */

.policy-icon {
    width: 52px;

    height: 52px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: #e9ebff;

    color: var(--blue);

    font-size: 27px;

    font-weight: 800;

    line-height: 1;

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

.policy:hover .policy-icon {
    background: var(--blue);

    color: #ffffff;

    transform: scale(1.06);
}


/* =========================================================
   POLICY CONTENT
   ========================================================= */

.policy-content {
    min-width: 0;
}

.policy h3 {
    margin: 0 0 8px;

    color: var(--text);

    font-size: 15px;

    line-height: 1.25;

    font-weight: 800;
}

.policy p {
    margin: 0;

    color: #60677a;

    font-size: 11px;

    line-height: 1.55;
}


/* =========================================================
   MAIN CTA
   ========================================================= */

.cta {
    min-height: 155px;

    position: relative;

    overflow: hidden;

    padding: 24px 25px;

    display: flex;

    align-items: center;

    border-radius: 10px;

    color: #ffffff;

    background:
        linear-gradient(135deg, #0B0F5C 0%, #13207F 25%, #1e3aab91 50%, #2f53d528 75%, #4b6fff10 100%),
        url("https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1000&q=80") right center / 45% auto no-repeat;

    box-shadow:
        0 5px 18px rgba(16, 25, 167, 0.15);

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

.cta:hover {
    transform: translateY(-4px);

    box-shadow:
        0 10px 25px rgba(16, 25, 167, 0.22);
}


/* =========================================================
   CTA CONTENT
   ========================================================= */

.cta-content {
    position: relative;

    z-index: 2;

    max-width: 520px;
}


/* =========================================================
   CTA HEADING
   ========================================================= */

.cta h2 {
    margin: 0 0 9px;

    color: #ffffff;

    font-size: 20px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -0.4px;
}


/* =========================================================
   CTA DESCRIPTION
   ========================================================= */

.cta p {
    max-width: 420px;

    margin: 0 0 16px;

    color: rgba(255, 255, 255, 0.92);

    font-size: 11px;

    line-height: 1.55;
}


/* =========================================================
   CTA BUTTON
   ========================================================= */

.cta button {
    height: 38px;

    padding: 0 18px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border: 0;

    border-radius: 5px;

    background: #ffffff;

    color: var(--blue);

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;

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

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.cta button:hover {
    transform: translateY(-2px);

    background: #f7f8ff;

    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.15);
}

.cta button span {
    font-size: 15px;

    line-height: 1;

    transition:
        transform 0.25s ease;
}

.cta button:hover span {
    transform: translateX(4px);
}



/* =========================================================
   NEWSLETTER
   ========================================================= */

.newsletter {
    margin-top: 32px;

    background: linear-gradient(135deg, #0B0F5C 0%, #13207F 25%, #1E3AAB 50%, #2F54D5 75%, #4B6EFF 100%);

    color: #ffffff;

    box-shadow:
        0 -2px 10px rgba(16, 25, 167, 0.05);
}


/* =========================================================
   NEWSLETTER INNER
   ========================================================= */

.news-inner {
    min-height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


/* =========================================================
   NEWSLETTER CONTENT
   ========================================================= */

.news-content {
    min-width: 0;
}

.news-title {
    margin: 0;

    color: #ffffff;

    font-size: 20px;

    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -0.2px;
}

.news-sub {
    margin-top: 6px;

    color: rgba(255, 255, 255, 0.9);

    font-size: 11px;

    line-height: 1.4;

    font-weight: 400;
}


/* =========================================================
   SUBSCRIBE FORM
   ========================================================= */

.subscribe {
    width: 400px;

    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    padding: 4px;

    background: #ffffff;

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

    border-radius: 6px;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08);

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

.subscribe:focus-within {
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   EMAIL INPUT
   ========================================================= */

.subscribe input {
    flex: 1;

    width: 100%;

    height: 100%;

    padding: 0 12px;

    border: 0;

    outline: 0;

    background: transparent;

    color: #202944;

    font-size: 10px;

    font-family: 'Poppins', sans-serif;
}

.subscribe input::placeholder {
    color: #8a91a2;

    opacity: 1;
}


/* =========================================================
   SUBSCRIBE BUTTON
   ========================================================= */

.subscribe button {
    width: 95px;

    height: 32px;

    flex-shrink: 0;

    border: 0;

    border-radius: 4px;

    background: linear-gradient(135deg, #0B0F5C 0%, #13207F 25%, #1E3AAB 50%, #2F54D5 75%, #4B6EFF 100%);

    color: #ffffff;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.subscribe button:hover {
    background: var(--blue2);

    transform: translateY(-1px);

    box-shadow:
        0 5px 12px rgba(16, 25, 167, 0.25);
}

.subscribe button:active {
    transform: translateY(0);
}




/* =========================================================
   RESPONSIVE DESIGN + SITE ANIMATIONS
   Add this at the END of website.css
   ========================================================= */


/* =========================================================
   GLOBAL ANIMATION SETTINGS
   ========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}


/* =========================================================
   PAGE LOAD ANIMATION
   ========================================================= */

/* body {
    animation: pageFadeIn 0.7s ease-out both;
} */

@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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

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

header.scrolled {
    background: rgba(255, 255, 255, 0.96);

    box-shadow:
        0 8px 25px rgba(18, 28, 70, 0.12);

    backdrop-filter: blur(12px);
}


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

.logo {
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.logo:hover {
    transform: translateY(-3px) scale(1.02);

    box-shadow:
        0 10px 25px rgba(16, 25, 167, 0.28);
}


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

.menu a {
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.menu a:hover {
    color: var(--blue);

    transform: translateY(-1px);
}

.nav-btn,
.city {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.nav-btn:hover,
.city:hover {
    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(16, 25, 167, 0.12);
}

.nav-btn.primary:hover {
    box-shadow:
        0 9px 22px rgba(16, 25, 167, 0.28);
}


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

.hero-copy {
    animation:
        heroContentIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.search-card {
    animation:
        searchCardIn 0.8s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes heroContentIn {
    from {
        opacity: 0;
        transform: translateX(-35px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes searchCardIn {
    from {
        opacity: 0;
        transform: translateX(35px) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}


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

.hero {
    animation: heroImageIn 1.1s ease-out both;
}

@keyframes heroImageIn {
    from {
        background-position: 54% center;
    }

    to {
        background-position: center center;
    }
}


/* =========================================================
   SEARCH CARD
   ========================================================= */

.search-card {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.search-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 14px 32px rgba(26, 39, 80, 0.16);
}


/* =========================================================
   SEARCH TABS
   ========================================================= */

.tab {
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.tab:hover {
    transform: translateY(-2px);
}

.tab.active {
    box-shadow:
        0 4px 10px rgba(16, 25, 167, 0.18);
}


/* =========================================================
   FORM CONTROLS
   ========================================================= */

.control {
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.control:hover {
    transform: translateY(-1px);

    border-color: var(--blue);

    box-shadow:
        0 4px 12px rgba(16, 25, 167, 0.08);
}


/* =========================================================
   SEARCH BUTTON
   ========================================================= */

.search-btn {
    /* position: relative; */

    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

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

    box-shadow:
        0 8px 20px rgba(16, 25, 167, 0.25);
}

.search-btn:active {
    transform: scale(0.98);
}


/* =========================================================
   TRUST STRIP
   ========================================================= */

.trust {
    animation:
        trustSlideUp 0.7s 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes trustSlideUp {
    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

.trust-item {
    transition:
        background 0.25s ease;
}

.trust-item:hover {
    background:
        rgba(255, 255, 255, 0.08);
}

.trust-icon {
    transition:
        transform 0.3s ease;
}

.trust-item:hover .trust-icon {
    transform:
        scale(1.12) rotate(-4deg);
}


/* =========================================================
   SECTION REVEAL
   ========================================================= */

.reveal {
    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   LEFT REVEAL
   ========================================================= */

.reveal-left {
    opacity: 0;

    transform:
        translateX(-35px);

    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal-left.visible {
    opacity: 1;

    transform:
        translateX(0);
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.section-head h2 {
    position: relative;
}

.section-head h2::after {
    content: "";

    display: block;

    width: 0;

    height: 2px;

    margin-top: 7px;

    border-radius: 5px;

    background: var(--blue);

    transition:
        width 0.5s ease;
}

.reveal.visible .section-head h2::after {
    width: 42px;
}


/* =========================================================
   VIEW ALL LINK
   ========================================================= */

.view {
    display: inline-flex;

    align-items: center;

    gap: 4px;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.view:hover {
    transform:
        translateX(4px);
}


/* =========================================================
   LOCALITY CARD
   ========================================================= */

.locality {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

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

    box-shadow:
        0 12px 26px rgba(25, 34, 65, 0.12);
}

.locality img {
    transition:
        transform 0.5s ease;
}

.locality:hover img {
    transform:
        scale(1.07);
}


/* =========================================================
   PROPERTY CARD
   ========================================================= */

.card {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

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

    box-shadow:
        0 14px 30px rgba(21, 31, 67, 0.14);
}

.card-image {
    overflow: hidden;
}

.card-image img {
    transition:
        transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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


/* =========================================================
   PROPERTY HEART
   ========================================================= */

.heart {
    transition:
        transform 0.25s ease,
        color 0.25s ease,
        background 0.25s ease;
}

.heart:hover {
    transform:
        scale(1.12);

    color:
        #e52e5f;

    background:
        #fff4f7;
}


/* =========================================================
   PROPERTY BADGE
   ========================================================= */

.badge {
    transition:
        transform 0.25s ease;
}

.card:hover .badge {
    transform:
        translateY(-2px);
}


/* =========================================================
   PROPERTY TYPE CARDS
   ========================================================= */

.type {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

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

    box-shadow:
        0 12px 26px rgba(25, 34, 65, 0.12);
}

.type-icon {
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}

.type:hover .type-icon {
    transform:
        scale(1.08) rotate(-3deg);

    background:
        var(--blue);

    color:
        #ffffff;
}


/* =========================================================
   WHY CARDS
   ========================================================= */

.why {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

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

    box-shadow:
        0 12px 28px rgba(25, 34, 65, 0.12);
}

.why-icon {
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}

.why:hover .why-icon {
    transform:
        scale(1.08) rotate(-4deg);

    background:
        var(--blue);

    color:
        #ffffff;
}


/* =========================================================
   POLICY CARD
   ========================================================= */

.policy {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

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

    box-shadow:
        0 12px 25px rgba(25, 34, 65, 0.10);
}

.policy-icon {
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}

.policy:hover .policy-icon {
    transform:
        scale(1.08) rotate(-4deg);

    background:
        var(--blue);

    color:
        #ffffff;
}


/* =========================================================
   CTA
   ========================================================= */

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

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

    box-shadow:
        0 14px 30px rgba(16, 25, 167, 0.22);
}

.cta button {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.cta button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 7px 15px rgba(0, 0, 0, 0.16);
}

.cta button span {
    display: inline-block;

    transition:
        transform 0.25s ease;
}

.cta button:hover span {
    transform:
        translateX(5px);
}


/* =========================================================
   NEWSLETTER
   ========================================================= */

.newsletter {
    animation:
        newsletterFade 0.8s ease both;
}

@keyframes newsletterFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

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

.subscribe input {
    transition:
        background 0.25s ease;
}

.subscribe input:focus {
    background:
        #fafbff;
}

.subscribe button {
    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.subscribe button:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 6px 14px rgba(16, 25, 167, 0.25);
}


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

.footer-col a {
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

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

    transform:
        translateX(4px);
}

.social span {
    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.social span:hover {
    transform:
        translateY(-4px) scale(1.05);

    background:
        #eef0ff;
}


/* =========================================================
   BACK TO TOP
   ========================================================= */

.back-top {
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.back-top:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 10px 25px rgba(16, 24, 168, 0.35);
}


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

.stagger>* {
    opacity: 0;

    transform:
        translateY(25px);
}

.stagger.visible>* {
    animation:
        staggerItemIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.stagger.visible>*:nth-child(1) {
    animation-delay: 0.05s;
}

.stagger.visible>*:nth-child(2) {
    animation-delay: 0.10s;
}

.stagger.visible>*:nth-child(3) {
    animation-delay: 0.15s;
}

.stagger.visible>*:nth-child(4) {
    animation-delay: 0.20s;
}

.stagger.visible>*:nth-child(5) {
    animation-delay: 0.25s;
}

.stagger.visible>*:nth-child(6) {
    animation-delay: 0.30s;
}

.stagger.visible>*:nth-child(7) {
    animation-delay: 0.35s;
}

.stagger.visible>*:nth-child(8) {
    animation-delay: 0.40s;
}

@keyframes staggerItemIn {
    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   DESKTOP
   1200px AND ABOVE
   ========================================================= */

@media (min-width: 1200px) {

    .container {
        width:
            calc(100% - 80px);

        max-width:
            1440px;
    }

    .hero {
        min-height:
            500px;
    }

    .hero-inner {
        min-height:
            390px;

        gap:
            60px;
    }

    .hero-copy {
        width:
            50%;
    }

    .hero h1 {
        font-size:
            46px;
    }

    .hero p {
        max-width:
            440px;

        font-size:
            14px;
    }

    .search-card {
        width:
            480px;

        padding:
            24px;
    }

    .trust {
        min-height:
            76px;
    }

    .locality img {
        height:
            105px;
    }

    .card-image {
        height:
            205px;
    }

    .type {
        height:
            140px;
    }

    .why {
        min-height:
            160px;
    }

    .cta {
        min-height:
            175px;
    }

    .policy {
        min-height:
            175px;
    }

    .news-inner {
        min-height:
            90px;
    }
}


/* =========================================================
   LAPTOP
   992px - 1199px
   ========================================================= */

@media (min-width: 992px) and (max-width: 1199px) {

    .container {
        width:
            calc(100% - 50px);
    }

    .nav {
        gap:
            15px;
    }

    .logo {
        width:
            125px;
    }

    .city {
        width:
            135px;

        margin-left:
            12px;
    }

    .menu {
        gap:
            20px;

        margin-left:
            20px;

        font-size:
            13px;
    }

    .nav-actions {
        gap:
            8px;
    }

    .nav-btn {
        padding:
            0 12px;

        font-size:
            11px;
    }

    .nav-btn.primary {
        min-width:
            135px;
    }

    .hero {
        min-height:
            430px;
    }

    .hero-inner {
        min-height:
            380px;

        gap:
            30px;
    }

    .hero-copy {
        width:
            48%;
    }

    .hero h1 {
        font-size:
            40px;
    }

    .hero p {
        font-size:
            13px;
    }

    .search-card {
        width:
            420px;

        padding:
            20px;
    }

    .locality-grid {
        grid-template-columns:
            repeat(4, 1fr);
    }

    .locality img {
        height:
            100px;
    }

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

        gap:
            14px;
    }

    .card-image {
        height:
            175px;
    }

    .type-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

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

    .cta-row {
        grid-template-columns:
            250px 1fr;
    }
}


/* =========================================================
   TABLET
   768px - 991px
   ========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .container {
        width:
            calc(100% - 40px);
    }

    header {
        height:
            auto;

        min-height:
            76px;
    }

    .nav {
        min-height:
            76px;

        height:
            auto;

        flex-wrap:
            wrap;

        padding:
            0 0 10px;
    }

    .logo {
        width:
            115px;

        height:
            76px;
    }

    .city {
        width:
            130px;

        margin-left:
            12px;
    }

    .menu {
        order:
            3;

        width:
            100%;

        margin:
            8px 0 0;

        padding:
            10px 0;

        gap:
            25px;

        justify-content:
            center;

        overflow-x:
            auto;

        white-space:
            nowrap;
    }

    .nav-actions {
        margin-left:
            auto;

        gap:
            7px;
    }

    .nav-btn {
        padding:
            0 10px;

        font-size:
            10px;
    }

    .nav-btn.primary {
        min-width:
            125px;
    }

    .hero {
        min-height:
            600px;

        background-position:
            center;
    }

    .hero-inner {
        min-height:
            600px;

        flex-direction:
            column;

        align-items:
            stretch;

        justify-content:
            center;

        padding:
            50px 0 70px;

        gap:
            30px;
    }

    .hero-copy {
        width:
            100%;

        text-align:
            center;
    }

    .hero h1 {
        font-size:
            42px;
    }

    .hero p {
        max-width:
            500px;

        margin:
            14px auto 0;

        font-size:
            13px;
    }

    .search-card {
        width:
            100%;

        max-width:
            600px;

        margin:
            0 auto;
    }

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

        margin-top:
            -25px;
    }

    .trust-item:nth-child(2) {
        border-right:
            0;
    }

    .trust-item:nth-child(1),
    .trust-item:nth-child(2) {
        border-bottom:
            1px solid rgba(255, 255, 255, 0.18);
    }

    section {
        padding-top:
            40px;
    }

    .section-head h2 {
        font-size:
            19px;
    }

    .locality-grid {
        grid-template-columns:
            repeat(4, 1fr);
    }

    .locality img {
        height:
            110px;
    }

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

        gap:
            18px;
    }

    .card-image {
        height:
            210px;
    }

    .type-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .type {
        height:
            135px;
    }

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

    .why {
        min-height:
            150px;
    }

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

    .policy {
        min-height:
            125px;
    }

    .cta {
        min-height:
            170px;
    }

    .news-inner {
        min-height:
            100px;

        gap:
            20px;
    }

    .subscribe {
        width:
            330px;
    }

    .footer-main {
        grid-template-columns:
            repeat(3, 1fr);
    }
}


/* =========================================================
   MOBILE
   480px - 767px
   ========================================================= */

@media (min-width: 480px) and (max-width: 767px) {

    .container {
        width:
            calc(100% - 30px);
    }

    header {
        height:
            auto;
    }

    .nav {
        height:
            auto;

        min-height:
            70px;

        flex-wrap:
            wrap;

        padding-bottom:
            10px;
    }

    .logo {
        width:
            105px;

        height:
            70px;
    }

    .logo .top {
        font-size:
            8px;
    }

    .logo .mark {
        font-size:
            23px;
    }

    .logo .name {
        font-size:
            10px;
    }

    .city {
        width:
            125px;

        height:
            38px;

        margin-left:
            10px;

        font-size:
            12px;
    }

    .nav-actions {
        display:
            none;
    }

    .menu {
        order:
            3;

        width:
            100%;

        margin:
            8px 0 0;

        padding:
            10px 0;

        gap:
            22px;

        overflow-x:
            auto;

        white-space:
            nowrap;

        justify-content:
            flex-start;

        scrollbar-width:
            none;
    }

    .menu::-webkit-scrollbar {
        display:
            none;
    }

    .menu a {
        flex-shrink:
            0;

        font-size:
            12px;
    }

    .hero {
        min-height:
            650px;

        background-position:
            center;
    }

    .hero-inner {
        min-height:
            650px;

        flex-direction:
            column;

        justify-content:
            center;

        align-items:
            stretch;

        padding:
            45px 0 65px;

        gap:
            30px;
    }

    .hero-copy {
        width:
            100%;

        text-align:
            center;
    }

    .eyebrow {
        font-size:
            11px;

        margin-bottom:
            12px;
    }

    .hero h1 {
        font-size:
            35px;

        line-height:
            1.08;
    }

    .hero p {
        max-width:
            430px;

        margin:
            14px auto 0;

        font-size:
            11px;
    }

    .search-card {
        width:
            100%;

        padding:
            18px;

        margin:
            0 auto;
    }

    .search-tabs {
        gap:
            8px;
    }

    .tab {
        flex:
            1;

        padding:
            0 10px;

        font-size:
            11px;
    }

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

        gap:
            12px;
    }

    .control {
        height:
            38px;

        font-size:
            10px;
    }

    .field label {
        font-size:
            10px;
    }

    .search-btn {
        height:
            40px;

        font-size:
            11px;
    }

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

        margin-top:
            -22px;
    }

    .trust-item {
        padding:
            13px 12px;

        gap:
            9px;
    }

    .trust-icon {
        width:
            28px;

        height:
            28px;

        font-size:
            18px;
    }

    .trust-title {
        font-size:
            9px;
    }

    .trust-sub {
        font-size:
            7px;

        white-space:
            normal;
    }

    section {
        padding-top:
            35px;
    }

    .section-head {
        margin-bottom:
            16px;

        gap:
            12px;
    }

    .section-head h2 {
        font-size:
            17px;
    }

    .view {
        font-size:
            9px;

        white-space:
            nowrap;
    }

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

        gap:
            14px;
    }

    .locality img {
        height:
            105px;
    }

    .locality .name {
        font-size:
            11px;
    }

    .locality .count {
        font-size:
            8px;
    }

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

        gap:
            14px;
    }

    .card-image {
        height:
            175px;
    }

    .card-body {
        padding:
            12px;
    }

    .price {
        font-size:
            15px;
    }

    .title {
        font-size:
            10px;
    }

    .place {
        font-size:
            8px;
    }

    .meta {
        gap:
            8px;

        font-size:
            8px;
    }

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

        gap:
            14px;
    }

    .type {
        height:
            130px;
    }

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

        gap:
            14px;
    }

    .why {
        min-height:
            150px;

        padding:
            18px 12px;
    }

    .why-icon {
        width:
            48px;

        height:
            48px;
    }

    .cta-row {
        grid-template-columns:
            1fr;

        gap:
            14px;
    }

    .policy {
        min-height:
            125px;

        padding:
            18px;
    }

    .cta {
        min-height:
            180px;

        padding:
            22px;
    }

    .cta h2 {
        font-size:
            18px;
    }

    .cta p {
        font-size:
            9px;
    }

    .newsletter {
        margin-top:
            28px;
    }

    .news-inner {
        min-height:
            auto;

        padding:
            20px 0;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            15px;
    }

    .news-title {
        font-size:
            16px;
    }

    .news-sub {
        font-size:
            9px;
    }

    .subscribe {
        width:
            100%;

        height:
            42px;
    }

    .subscribe button {
        width:
            95px;
    }

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

        gap:
            25px 18px;
    }

    .footer-copy {
        max-width:
            190px;
    }

    .copyright {
        flex-direction:
            column;

        gap:
            7px;

        text-align:
            center;
    }
}


/* =========================================================
   SMALL MOBILE
   0px - 479px
   ========================================================= */

@media (max-width: 479px) {

    .container {
        width:
            calc(100% - 24px);
    }

    header {
        height:
            auto;
    }

    .nav {
        height:
            auto;

        min-height:
            65px;

        flex-wrap:
            wrap;

        padding-bottom:
            8px;
    }

    .logo {
        width:
            95px;

        height:
            65px;

        border-radius:
            0 0 9px 9px;
    }

    .logo .top {
        font-size:
            7px;

        letter-spacing:
            0.8px;
    }

    .logo .mark {
        font-size:
            20px;
    }

    .logo .name {
        font-size:
            9px;

        letter-spacing:
            1.4px;
    }

    .city {
        width:
            110px;

        height:
            35px;

        margin-left:
            8px;

        padding:
            0 10px;

        gap:
            6px;

        font-size:
            11px;
    }

    .nav-actions {
        display:
            none;
    }

    .menu {
        order:
            3;

        width:
            100%;

        margin:
            7px 0 0;

        padding:
            8px 0;

        gap:
            18px;

        overflow-x:
            auto;

        white-space:
            nowrap;

        scrollbar-width:
            none;
    }

    .menu::-webkit-scrollbar {
        display:
            none;
    }

    .menu a {
        flex-shrink:
            0;

        font-size:
            11px;
    }

    .hero {
        min-height:
            670px;

        background-position:
            center;
    }

    .hero-inner {
        min-height:
            670px;

        flex-direction:
            column;

        justify-content:
            center;

        align-items:
            stretch;

        padding:
            40px 0 60px;

        gap:
            26px;
    }

    .hero-copy {
        width:
            100%;

        text-align:
            center;
    }

    .eyebrow {
        font-size:
            9px;

        margin-bottom:
            10px;

        letter-spacing:
            0.3px;
    }

    .hero h1 {
        font-size:
            29px;

        line-height:
            1.08;

        letter-spacing:
            -0.8px;
    }

    .hero p {
        max-width:
            330px;

        margin:
            12px auto 0;

        font-size:
            10px;

        line-height:
            1.55;
    }

    .search-card {
        width:
            100%;

        padding:
            14px;

        border-radius:
            9px;
    }

    .search-tabs {
        gap:
            7px;

        margin-bottom:
            12px;
    }

    .tab {
        flex:
            1;

        height:
            34px;

        padding:
            0 7px;

        font-size:
            10px;
    }

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

        gap:
            10px;
    }

    .field label {
        margin-bottom:
            5px;

        font-size:
            9px;
    }

    .control {
        height:
            36px;

        padding:
            0 8px;

        font-size:
            9px;
    }

    .search-btn {
        height:
            39px;

        margin-top:
            12px;

        font-size:
            10px;
    }

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

        margin-top:
            -20px;

        border-radius:
            7px;
    }

    .trust-item {
        min-height:
            60px;

        padding:
            10px 14px;

        border-right:
            0;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.18);
    }

    .trust-item:last-child {
        border-bottom:
            0;
    }

    .trust-icon {
        width:
            30px;

        height:
            30px;

        font-size:
            19px;
    }

    .trust-title {
        font-size:
            10px;
    }

    .trust-sub {
        font-size:
            8px;

        white-space:
            normal;
    }

    section {
        padding-top:
            30px;
    }

    .section-head {
        flex-direction:
            column;

        align-items:
            flex-start;

        margin-bottom:
            14px;

        gap:
            5px;
    }

    .section-head h2 {
        font-size:
            17px;

        line-height:
            1.25;

            margin-right: 30px;
    }

    .view {
        font-size:
            9px;
    }

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

        gap:
            10px;
    }

    .locality img {
        height:
            90px;
    }

    .locality .name {
        font-size:
            10px;
    }

    .locality .count {
        padding:
            4px 3px 9px;

        font-size:
            7px;
    }

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

        gap:
            16px;
    }

    .card-image {
        height:
            200px;
    }

    .card-body {
        padding:
            13px;
    }

    .price {
        font-size:
            17px;
    }

    .price span {
        font-size:
            9px;
    }

    .title {
        font-size:
            11px;
    }

    .place {
        font-size:
            9px;
    }

    .meta {
        gap:
            15px;

        font-size:
            9px;
    }

    .tag {
        font-size:
            8px;
    }

    .avatar {
        width:
            32px;

        height:
            32px;
    }

    .broker-name {
        font-size:
            9px;
    }

    .verified {
        font-size:
            8px;
    }

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

        gap:
            10px;
    }

    .type {
        height:
            125px;

        padding:
            12px 7px;
    }

    .type-icon {
        width:
            44px;

        height:
            44px;

        font-size:
            25px;

        margin-bottom:
            8px;
    }

    .type-name {
        font-size:
            10px;
    }

    .type-count {
        font-size:
            8px;
    }

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

        gap:
            12px;
    }

    .why {
        min-height:
            135px;

        padding:
            18px 15px;
    }

    .why-icon {
        width:
            48px;

        height:
            48px;

        margin-bottom:
            10px;
    }

    .why h3 {
        font-size:
            11px;
    }

    .why p {
        max-width:
            250px;

        font-size:
            9px;
    }

    .cta-row {
        grid-template-columns:
            1fr;

        gap:
            12px;

        margin-top:
            25px;
    }

    .policy {
        min-height:
            125px;

        padding:
            18px 15px;

        gap:
            12px;
    }

    .policy-icon {
        width:
            46px;

        height:
            46px;

        font-size:
            23px;
    }

    .policy h3 {
        font-size:
            11px;
    }

    .policy p {
        font-size:
            8px;
    }

    .cta {
        min-height:
            190px;

        padding:
            22px 18px;

        background:
            linear-gradient(90deg,
                #1119a5 0%,
                #1724c9 100%);
    }

    .cta h2 {
        font-size:
            18px;
    }

    .cta p {
        font-size:
            9px;

        max-width:
            300px;
    }

    .cta button {
        height:
            38px;

        padding:
            0 14px;

        font-size:
            9px;
    }

    .newsletter {
        margin-top:
            25px;
    }

    .news-inner {
        min-height:
            auto;

        padding:
            20px 0;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            13px;
    }

    .news-title {
        font-size:
            15px;
    }

    .news-sub {
        font-size:
            8px;

        line-height:
            1.5;
    }

    .subscribe {
        width:
            100%;

        height:
            40px;
    }

    .subscribe input {
        padding:
            0 9px;

        font-size:
            9px;
    }

    .subscribe button {
        width:
            88px;

        height:
            32px;

        font-size:
            9px;
    }

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

        gap:
            22px 14px;
    }

    .footer-logo {
        font-size:
            11px;
    }

    .footer-copy {
        max-width:
            150px;

        font-size:
            11px;
    }

    .footer-col h4 {
        font-size:
            15px;
    }

    .footer-col a {
        font-size:
            11px;
    }

    .copyright {
        flex-direction:
            column;

        gap:
            6px;

        text-align:
            center;

        font-size:
            11px;
    }

    .back-top {
        right:
            14px;

        bottom:
            14px;

        width:
            35px;

        height:
            35px;
    }
}


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

@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;
    }

    .reveal,
    .reveal-left,
    .stagger>* {
        opacity:
            1 !important;

        transform:
            none !important;
    }
}




        :root {
            --rpf-blue: #3a2fd8;
            --rpf-blue-dark: #2e24b8;
            --rpf-text: #1a1a2e;
            --rpf-muted: #6b7280;
            --rpf-border: #e5e7eb;
            --rpf-bg: #f5f6fa;
        }



        /* ---- Card ---- */
        .rpf-search-card {
            width: 100%;
            max-width: 640px;
            background: #ffffff;
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 10px 30px rgba(20, 20, 50, 0.08);
        }

        /* ---- Tabs ---- */
        .rpf-tabs {
            display: flex;
            gap: 12px;
            margin-bottom: 24px;
        }

        .rpf-tab {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border: none;
            background: var(--rpf-bg);
            color: #00068a;
            font-weight: 600;
            font-size: 15px;
            padding: 12px 22px;
            border-radius: 10px;
            cursor: pointer;
            transition: background .15s ease, color .15s ease;
        }

        .rpf-tab i {
            font-size: 14px;
        }

        .rpf-tab.rpf-tab-active {
            background: linear-gradient(135deg, #0B0F5C 0%, #13207F 25%, #1E3AAB 50%, #2F54D5 75%, #4B6EFF 100%);
            color: #ffffff;
        }

        /* ---- Form grid ---- */
        .rpf-form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px 20px;
            margin-bottom: 22px;
        }

        .rpf-field label {
            display: block;
            font-size: 14px;
            font-weight: 700;
            color: #000;
            margin-bottom: 8px;
        }

        .rpf-control {
            position: relative;
            display: flex;
            align-items: center;
            gap: 10px;
            border: 1.5px solid var(--rpf-border);
            border-radius: 10px;
            padding: 12px 14px;
            background: #ffffff;
            cursor: pointer;
            transition: border-color .15s ease;
        }

        .rpf-control:hover,
        .rpf-control.rpf-control-open {
            border-color: #00068a;
        }

        .rpf-control>i {
            color: #00068a;
            font-size: 15px;
            flex-shrink: 0;
        }

        .rpf-control input {
            border: none;
            outline: none;
            font-size: 15px;
            width: 100%;
            color: #00068a;
            background: transparent;
        }

        .rpf-control input::placeholder {
            color: #9ca3af;
        }

        .rpf-control-value {
            flex: 1;
            font-size: 15px;
            color: #000;
            font-weight: 600;
        }

        .rpf-control-icon {
            color: #9ca3af;
            font-size: 12px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
        }

        .rpf-control-icon i {
            color: inherit;
        }

        .rpf-control-icon.rpf-clear-icon {
            color: #00068a;
            cursor: pointer;
        }

        /* ---- Dropdown ---- */
        .rpf-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            right: 0;
            background: #ffffff;
            border: 1px solid var(--rpf-border);
            border-radius: 10px;
            box-shadow: 0 12px 28px rgba(20, 20, 50, 0.12);
            padding: 6px;
            z-index: 20;
            display: none;
            max-height: 220px;
            overflow-y: auto;
        }

        .rpf-dropdown.rpf-dropdown-open {
            display: block;
        }

        .rpf-dropdown button {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            text-align: left;
            background: none;
            border: none;
            padding: 10px 12px;
            font-size: 14px;
            /* color: #00068a; */
            border-radius: 8px;
            cursor: pointer;
        }

        .rpf-dropdown button:hover {
            background:#0000005d;
        }

        .rpf-dropdown button i {
            color: #00068a;
            font-size: 13px;
        }

        /* ---- Search button ---- */
        .rpf-search-btn {
            width: 100%;
            border: none;
            background: linear-gradient(135deg, #0B0F5C 0%, #13207F 25%, #1E3AAB 50%, #2F54D5 75%, #4B6EFF 100%);
            color: #ffffff;
            font-size: 16px;
            font-weight: 700;
            padding: 16px;
            border-radius: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: background .15s ease;
        }

        .rpf-search-btn:hover {
            background: var(--rpf-blue-dark);
        }

        @media (max-width:480px) {
            .rpf-form-grid {
                grid-template-columns: 1fr;
            }
        }


/* =========================================================
   FINAL RESPONSIVE PATCH
   Desktop / Laptop / Tablet / Mobile
   Append this block AFTER all existing CSS.
   ========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

/* -------------------------
   DESKTOP 1400px+
   ------------------------- */
@media (min-width: 1400px) {
    .container {
        width: min(100% - 64px, 1600px);
        margin-inline: auto;
    }

    .hero-inner {
        min-height: 430px;
        gap: 56px;
    }

    .hero-copy {
        width: min(52%, 650px);
    }

    .hero h1 {
        font-size: clamp(34px, 3vw, 46px);
    }

    .search-card {
        width: min(450px, 42vw);
    }

    .locality-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .property-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .type-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

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

/* -------------------------
   LAPTOP 1025px–1399px
   ------------------------- */
@media (min-width: 1025px) and (max-width: 1399px) {
    .container {
        width: calc(100% - 40px);
        max-width: 1320px;
        margin-inline: auto;
    }

    .hero-inner {
        gap: 32px;
    }

    .hero-copy {
        width: 50%;
    }

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

    .search-card {
        width: min(430px, 46%);
    }

    .locality-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .property-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .type-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .cta-row {
        grid-template-columns: 250px minmax(0, 1fr);
    }

    .subscribe {
        width: min(400px, 40vw);
    }
}

/* -------------------------
   TABLET 769px–1024px
   ------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
    body {
        font-size: 14px;
    }

    .container {
        width: calc(100% - 32px);
        max-width: 960px;
        margin-inline: auto;
    }

    .hero {
        min-height: auto;
    }

    .hero-inner {
        min-height: 0;
        padding: 40px 0 55px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(340px, 450px);
        gap: 28px;
        align-items: center;
    }

    .hero-copy {
        width: auto;
    }

    .hero h1 {
        font-size: clamp(32px, 4vw, 42px);
    }

    .hero p {
        max-width: 430px;
        font-size: 14px;
    }

    .eyebrow {
        font-size: 15px;
    }

    .search-card {
        width: 100%;
        padding: 20px;
    }

    .search-tabs {
        gap: 10px;
    }

    .tab {
        min-height: 38px;
        height: auto;
        padding: 8px 18px;
        font-size: 14px;
    }

    .field label,
    .control {
        font-size: 13px;
    }

    .control {
        min-height: 44px;
        height: 44px;
    }

    .search-btn {
        min-height: 46px;
        height: 46px;
        font-size: 14px;
    }

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

    .trust-item {
        min-height: 70px;
        padding: 13px 18px;
    }

    .trust-title {
        font-size: 14px;
    }

    .trust-sub {
        font-size: 12px;
    }

    section {
        padding-top: 38px;
    }

    .section-head h2 {
        font-size: 22px;
    }

    .view {
        font-size: 13px;
    }

    .locality-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .locality img {
        height: 105px;
    }

    .locality .name {
        font-size: 14px;
    }

    .locality .count {
        font-size: 12px;
    }

    .property-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .card-image {
        height: 210px;
    }

    .price {
        font-size: 19px;
    }

    .title {
        font-size: 15px;
    }

    .place {
        font-size: 13px;
    }

    .meta {
        font-size: 11px;
    }

    .type-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .type {
        height: 145px;
    }

    .type-name {
        font-size: 15px;
    }

    .type-count {
        font-size: 12px;
    }

    .why-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .why {
        min-height: 165px;
    }

    .why h3 {
        font-size: 15px;
    }

    .why p {
        max-width: 230px;
        font-size: 12px;
    }

    .cta-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .policy,
    .cta {
        min-height: 170px;
    }

    .cta h2 {
        font-size: 22px;
    }

    .cta p,
    .policy p {
        font-size: 13px;
    }

    .news-inner {
        min-height: auto;
        padding: 24px 0;
        flex-direction: column;
        align-items: stretch;
    }

    .subscribe {
        width: 100%;
        max-width: 520px;
    }
}

/* -------------------------
   MOBILE 481px–768px
   ------------------------- */
@media (min-width: 481px) and (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .container {
        width: calc(100% - 24px);
        margin-inline: auto;
    }

    .hero {
        min-height: auto;
    }

    .hero-inner {
        min-height: 0;
        padding: 32px 0 48px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .hero-copy {
        width: 100%;
        padding-top: 0;
        text-align: center;
    }

    .hero h1 {
        font-size: clamp(30px, 7vw, 38px);
        line-height: 1.12;
        letter-spacing: -1px;
    }

    .hero p {
        max-width: 560px;
        margin: 12px auto 0;
        font-size: 14px;
        line-height: 1.6;
    }

    .eyebrow {
        font-size: 14px;
    }

    .search-card {
        width: 100%;
        padding: 18px;
    }

    .search-tabs {
        gap: 8px;
        flex-wrap: wrap;
    }

    .tab {
        flex: 1 1 0;
        min-height: 40px;
        height: auto;
        padding: 8px 12px;
        font-size: 14px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .field.full {
        grid-column: auto;
    }

    .field label {
        font-size: 13px;
    }

    .control {
        height: 46px;
        min-height: 46px;
        font-size: 14px;
        padding-inline: 12px;
    }

    .search-btn {
        height: 48px;
        min-height: 48px;
        font-size: 14px;
    }

    .trust {
        grid-template-columns: 1fr 1fr;
        margin-top: -20px;
    }

    .trust-item {
        min-height: 76px;
        padding: 12px 14px;
        gap: 10px;
    }

    .trust-icon {
        width: 30px;
        height: 30px;
        font-size: 20px;
    }

    .trust-title {
        font-size: 13px;
        white-space: normal;
    }

    .trust-sub {
        font-size: 11px;
        white-space: normal;
    }

    section {
        padding-top: 34px;
    }

    .section-head {
        margin-bottom: 15px;
    }

    .section-head h2 {
        font-size: 21px;
    }

    .view {
        font-size: 13px;
    }

    .locality-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .locality img {
        height: 100px;
    }

    .locality .name {
        font-size: 13px;
    }

    .locality .count {
        font-size: 11px;
    }

    .property-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .card-image {
        height: 180px;
    }

    .card-body {
        padding: 12px;
    }

    .price {
        font-size: 18px;
    }

    .title {
        font-size: 14px;
    }

    .place {
        font-size: 12px;
    }

    .meta {
        gap: 10px;
        font-size: 10px;
    }

    .type-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .type {
        height: 135px;
        padding: 13px 8px;
    }

    .type-icon {
        width: 44px;
        height: 44px;
        font-size: 24px;
        margin-bottom: 8px;
    }

    .type-name {
        font-size: 14px;
    }

    .type-count {
        font-size: 11px;
    }

    .why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .why {
        min-height: 155px;
        padding: 17px 12px;
    }

    .why-icon {
        width: 48px;
        height: 48px;
        font-size: 23px;
    }

    .why h3 {
        font-size: 14px;
    }

    .why p {
        max-width: 250px;
        font-size: 11px;
    }

    .cta-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .policy,
    .cta {
        min-height: 165px;
    }

    .policy h3,
    .cta h2 {
        font-size: 19px;
    }

    .policy p,
    .cta p {
        font-size: 12px;
    }

    .news-inner {
        padding: 22px 0;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .news-title {
        font-size: 20px;
    }

    .news-sub {
        font-size: 12px;
    }

    .subscribe {
        width: 100%;
        height: 46px;
    }

    .subscribe input {
        font-size: 13px;
    }

    .subscribe button {
        width: 100px;
        height: 36px;
        font-size: 12px;
    }
}

/* -------------------------
   SMALL MOBILE 320px–480px
   ------------------------- */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    .container {
        width: calc(100% - 20px);
        margin-inline: auto;
    }

    .hero {
        min-height: auto;
    }

    .hero-inner {
        min-height: 0;
        padding: 26px 0 42px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .hero-copy {
        width: 100%;
        padding-top: 0;
        text-align: center;
    }

    .eyebrow {
        margin-bottom: 9px;
        font-size: 13px;
    }

    .hero h1 {
        font-size: clamp(27px, 8vw, 34px);
        line-height: 1.13;
        letter-spacing: -0.8px;
    }

    .hero p {
        max-width: 100%;
        margin-top: 11px;
        font-size: 14px;
        line-height: 1.6;
    }

    .search-card {
        width: 100%;
        padding: 15px;
        border-radius: 10px;
    }

    .search-tabs {
        gap: 7px;
        flex-wrap: wrap;
    }

    .tab {
        flex: 1 1 calc(50% - 4px);
        min-height: 40px;
        height: auto;
        padding: 8px 9px;
        font-size: 13px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .field.full {
        grid-column: auto;
    }

    .field label {
        margin-bottom: 5px;
        font-size: 13px;
    }

    .control {
        height: 46px;
        min-height: 46px;
        padding: 0 11px;
        font-size: 13px;
    }

    .control-icon {
        font-size: 12px;
    }

    .search-btn {
        height: 48px;
        min-height: 48px;
        margin-top: 12px;
        font-size: 14px;
    }

    .trust {
        grid-template-columns: 1fr;
        margin-top: -15px;
        border-radius: 8px;
    }

    .trust-item {
        min-height: 64px;
        padding: 11px 14px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.18);
    }

    .trust-item:last-child {
        border-bottom: 0;
    }

    .trust-icon {
        width: 30px;
        height: 30px;
        font-size: 20px;
    }

    .trust-title {
        font-size: 13px;
        white-space: normal;
    }

    .trust-sub {
        font-size: 11px;
        white-space: normal;
    }

    section {
        padding-top: 30px;
    }

    .section-head {
        align-items: flex-end;
        gap: 12px;
        margin-bottom: 13px;
    }

    .section-head h2 {
        font-size: 20px;
        margin-right: 30px;
    }

    .view {
        flex-shrink: 0;
        font-size: 12px;
    }

    .locality-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .locality img {
        height: 105px;
    }

    .locality .name {
        margin-top: 8px;
        font-size: 13px;
    }

    .locality .count {
        padding-bottom: 9px;
        font-size: 11px;
    }

    .property-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .card-image {
        height: 210px;
    }

    .card-body {
        padding: 13px;
    }

    .price {
        font-size: 20px;
    }

    .price span {
        font-size: 10px;
    }

    .title {
        font-size: 15px;
    }

    .place {
        font-size: 13px;
    }

    .meta {
        flex-wrap: wrap;
        gap: 9px 13px;
        font-size: 11px;
    }

    .tag {
        font-size: 11px;
    }

    .broker-name {
        font-size: 11px;
    }

    .verified {
        font-size: 10px;
    }

    .type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .type {
        height: 135px;
        padding: 12px 8px;
    }

    .type-icon {
        width: 44px;
        height: 44px;
        font-size: 24px;
        margin-bottom: 8px;
    }

    .type-name {
        font-size: 14px;
    }

    .type-count {
        font-size: 11px;
    }

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

    .why {
        min-height: 145px;
        padding: 18px 14px;
    }

    .why-icon {
        width: 48px;
        height: 48px;
        font-size: 23px;
        margin-bottom: 11px;
    }

    .why h3 {
        font-size: 15px;
    }

    .why p {
        max-width: 290px;
        font-size: 12px;
    }

    .cta-row {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 25px;
    }

    .policy,
    .cta {
        min-height: auto;
        padding: 20px 16px;
    }

    .policy {
        align-items: flex-start;
    }

    .policy-icon {
        width: 46px;
        height: 46px;
        font-size: 23px;
    }

    .policy h3,
    .cta h2 {
        font-size: 19px;
    }

    .policy p,
    .cta p {
        font-size: 12px;
        line-height: 1.55;
    }

    .cta {
        background-position: right center;
        background-size: cover;
    }

    .cta button {
        min-height: 42px;
        height: 42px;
        font-size: 12px;
    }

    .news-inner {
        padding: 22px 0;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .news-title {
        font-size: 19px;
    }

    .news-sub {
        font-size: 12px;
        line-height: 1.5;
    }

    .subscribe {
        width: 100%;
        height: 46px;
    }

    .subscribe input {
        min-width: 0;
        font-size: 13px;
    }

    .subscribe button {
        width: 94px;
        height: 36px;
        font-size: 11px;
    }
}

/* -------------------------
   VERY SMALL PHONES <320px
   ------------------------- */
@media (max-width: 319px) {
    .container {
        width: calc(100% - 14px);
    }

    .hero h1 {
        font-size: 26px;
    }

    .search-card {
        padding: 12px;
    }

    .tab {
        font-size: 12px;
        padding-inline: 7px;
    }

    .control {
        font-size: 12px;
    }

    .locality-grid,
    .type-grid {
        gap: 8px;
    }

    .card-image {
        height: 185px;
    }

    .section-head h2 {
        font-size: 18px;
    }
}

/* -------------------------
   TOUCH DEVICES
   Avoid hover-only interaction problems
   ------------------------- */
@media (hover: none) and (pointer: coarse) {
    .locality:hover,
    .card:hover,
    .type:hover,
    .why:hover,
    .policy:hover,
    .cta:hover,
    .search-card:hover {
        transform: none;
    }

    .locality:hover img,
    .card:hover .card-image img,
    .type:hover .type-icon,
    .why:hover .why-icon {
        transform: none;
    }

    .heart,
    .tab,
    .control,
    .search-btn,
    .cta button {
        -webkit-tap-highlight-color: transparent;
    }
}

/* -------------------------
   ACCESSIBILITY
   ------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   HOME PAGE — PREMIUM / RICH ANIMATION LAYER
   Add AFTER the existing home-page CSS.
   Existing HTML/classes are preserved.
========================================================= */

/* ---------- HERO: cinematic entrance ---------- */

.hero {
    isolation: isolate;
    background-position: center center;
    animation: hpHeroImageReveal 1.35s cubic-bezier(.16,1,.3,1) both;
}

.hero::before {
    content: "";
    position: absolute;
    inset: -8%;
    z-index: 0;
    pointer-events: none;

    background:
        radial-gradient(circle at 18% 50%, rgba(255,255,255,.72), transparent 32%),
        radial-gradient(circle at 80% 25%, rgba(68,83,220,.10), transparent 30%);

    animation: hpHeroGlow 7s ease-in-out infinite alternate;
}

.hero::after {
    z-index: 3;
}

@keyframes hpHeroImageReveal {
    from {
        opacity: .82;
        background-position: 53% center;
        transform: scale(1.025);
    }
    to {
        opacity: 1;
        background-position: center center;
        transform: scale(1);
    }
}

@keyframes hpHeroGlow {
    from {
        transform: translate3d(-1%, 0, 0) scale(.96);
        opacity: .55;
    }
    to {
        transform: translate3d(2%, -1%, 0) scale(1.05);
        opacity: .9;
    }
}

/* ---------- HERO COPY ---------- */

.hero-copy {
    position: relative;
    z-index: 2;
    animation: hpHeroCopyIn .9s cubic-bezier(.16,1,.3,1) .12s both;
}

.eyebrow {
    opacity: 0;
    animation: hpFadeUp .65s cubic-bezier(.16,1,.3,1) .22s forwards;
}

.hero h1 {
    opacity: 0;
    animation: hpHeroTitle .9s cubic-bezier(.16,1,.3,1) .32s forwards;
}

.hero h1 strong {
    display: inline-block;
    position: relative;
    animation: hpTitleGlow 4s ease-in-out 1.3s infinite;
}

.hero p {
    opacity: 0;
    animation: hpFadeUp .75s cubic-bezier(.16,1,.3,1) .52s forwards;
}

@keyframes hpHeroCopyIn {
    from {
        opacity: 0;
        transform: translateX(-45px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes hpHeroTitle {
    from {
        opacity: 0;
        transform: translateY(25px) scale(.97);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes hpFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hpTitleGlow {
    0%, 100% {
        text-shadow: 0 0 0 rgba(23,36,201,0);
    }
    50% {
        text-shadow: 0 4px 22px rgba(23,36,201,.16);
    }
}

/* ---------- SEARCH CARD: premium floating glass ---------- */

.search-card {
    position: relative;
    z-index: 5;

    animation:
        hpSearchIn .95s cubic-bezier(.16,1,.3,1) .28s both,
        hpSearchFloat 6s ease-in-out 1.5s infinite;

    box-shadow:
        0 18px 55px rgba(20,31,75,.18),
        0 3px 12px rgba(20,31,75,.08);
}

.search-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            transparent 15%,
            rgba(255,255,255,.9) 50%,
            transparent 85%
        );

    background-size: 220% 100%;
    opacity: 0;
    animation: hpCardShine 5.5s ease-in-out 2s infinite;
}

.search-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 0 0 1px rgba(255,255,255,.35);
}

@keyframes hpSearchIn {
    from {
        opacity: 0;
        transform: translateX(45px) translateY(18px) scale(.97);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes hpSearchFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes hpCardShine {
    0%, 55% {
        opacity: 0;
        background-position: -120% 0;
    }
    68% {
        opacity: .75;
    }
    82%, 100% {
        opacity: 0;
        background-position: 120% 0;
    }
}

/* ---------- SEARCH TABS ---------- */

.search-tabs {
    position: relative;
    z-index: 2;
}

.tab {
    position: relative;
    overflow: hidden;

    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;
}

.tab::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255,255,255,.45) 50%,
            transparent 80%
        );

    transform: translateX(-130%);
    transition: transform .65s ease;
}

.tab:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(16,25,167,.10);
}

.tab:hover::before {
    transform: translateX(130%);
}

.tab.active {
    box-shadow:
        0 7px 18px rgba(16,25,167,.22),
        0 0 0 3px rgba(23,36,201,.06);
}

/* ---------- SEARCH CONTROLS ---------- */

.field {
    animation: hpFieldIn .55s cubic-bezier(.16,1,.3,1) both;
}

.form-grid .field:nth-child(1) { animation-delay: .62s; }
.form-grid .field:nth-child(2) { animation-delay: .68s; }
.form-grid .field:nth-child(3) { animation-delay: .74s; }
.form-grid .field:nth-child(4) { animation-delay: .80s; }
.form-grid .field:nth-child(5) { animation-delay: .86s; }

.control {
    position: relative;
    overflow: hidden;

    transition:
        transform .3s cubic-bezier(.16,1,.3,1),
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.control::after {
    content: "";
    position: absolute;
    left: -80%;
    top: 0;

    width: 45%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.7),
        transparent
    );

    transform: skewX(-18deg);
    pointer-events: none;
}

.control:hover {
    transform: translateY(-2px);
    border-color: rgba(23,36,201,.5);
    box-shadow:
        0 7px 18px rgba(16,25,167,.10),
        0 0 0 3px rgba(23,36,201,.035);
}

.control:hover::after {
    animation: hpControlShine .65s ease forwards;
}

@keyframes hpFieldIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hpControlShine {
    to {
        left: 135%;
    }
}

/* ---------- SEARCH BUTTON ---------- */

.search-btn {
    position: relative;
    isolation: isolate;

    background:
        linear-gradient(
            110deg,
            var(--blue),
            #2c3bd7,
            #1724c9,
            #4a59e5,
            var(--blue)
        );

    background-size: 260% 100%;

    box-shadow:
        0 8px 22px rgba(16,25,167,.20);

    animation:
        hpSearchButtonIn .7s cubic-bezier(.16,1,.3,1) .92s both,
        hpButtonGradient 6s ease-in-out 2s infinite;
}

.search-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(
            105deg,
            transparent 25%,
            rgba(255,255,255,.32) 50%,
            transparent 75%
        );

    transform: translateX(-130%);
}

.search-btn:hover::before {
    animation: hpButtonShine .7s ease forwards;
}

.search-btn:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow:
        0 14px 30px rgba(16,25,167,.30),
        0 0 25px rgba(23,36,201,.12);
}

@keyframes hpSearchButtonIn {
    from {
        opacity: 0;
        transform: translateY(15px) scale(.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes hpButtonGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes hpButtonShine {
    to {
        transform: translateX(130%);
    }
}

/* ---------- TRUST STRIP ---------- */

.trust {
    position: relative;
    overflow: hidden;

    animation:
        hpTrustIn .8s cubic-bezier(.16,1,.3,1) .65s both;

    box-shadow:
        0 10px 30px rgba(16,24,168,.20),
        0 2px 7px rgba(16,24,168,.10);
}

.trust::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            105deg,
            transparent 15%,
            rgba(255,255,255,.13) 48%,
            transparent 72%
        );

    background-size: 220% 100%;
    animation: hpTrustShine 7s ease-in-out 2s infinite;
    pointer-events: none;
}

.trust-item {
    position: relative;

    transition:
        background .35s ease,
        transform .35s cubic-bezier(.16,1,.3,1);
}

.trust-item:hover {
    background: rgba(255,255,255,.10);
    transform: translateY(-2px);
}

.trust-icon {
    animation: hpTrustIcon 4s ease-in-out infinite;
}

.trust-item:nth-child(2) .trust-icon { animation-delay: .4s; }
.trust-item:nth-child(3) .trust-icon { animation-delay: .8s; }
.trust-item:nth-child(4) .trust-icon { animation-delay: 1.2s; }

@keyframes hpTrustIn {
    from {
        opacity: 0;
        transform: translateY(28px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes hpTrustShine {
    0%, 50% {
        background-position: -120% 0;
    }
    75%, 100% {
        background-position: 120% 0;
    }
}

@keyframes hpTrustIcon {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-2px) scale(1.07);
    }
}

/* =========================================================
   SCROLL-REVEAL SECTIONS
========================================================= */

section {
    position: relative;
}

section.reveal,
section.reveal-left {
    will-change: opacity, transform;
}

/* Existing .stagger classes become richer */

.locality-grid.stagger > .locality,
.property-grid.stagger > .card,
.type-grid.stagger > .type,
.why-grid.stagger > .why {
    will-change: transform, opacity;
}

/* ---------- LOCALITY ---------- */

.locality {
    position: relative;
    overflow: hidden;

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        box-shadow .45s ease,
        border-color .35s ease;
}

.locality::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgba(255,255,255,.5) 50%,
            transparent 80%
        );

    transform: translateX(-130%);
}

.locality:hover {
    transform: translateY(-8px) scale(1.015);
    border-color: rgba(23,36,201,.22);

    box-shadow:
        0 16px 34px rgba(25,34,65,.14),
        0 0 0 4px rgba(23,36,201,.025);
}

.locality:hover::after {
    animation: hpCardShineSweep .75s ease forwards;
}

.locality img {
    transition:
        transform .75s cubic-bezier(.16,1,.3,1),
        filter .5s ease;
}

.locality:hover img {
    transform: scale(1.09);
    filter: saturate(1.06);
}

@keyframes hpCardShineSweep {
    to {
        transform: translateX(130%);
    }
}

/* ---------- PROPERTY CARDS ---------- */

.card {
    position: relative;
    overflow: hidden;

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        box-shadow .45s ease,
        border-color .35s ease;
}

.card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;

    background:
        linear-gradient(
            125deg,
            transparent 22%,
            rgba(255,255,255,.30) 50%,
            transparent 78%
        );

    transform: translateX(-130%);
}

.card:hover {
    transform: translateY(-9px) scale(1.012);
    border-color: rgba(23,36,201,.22);

    box-shadow:
        0 18px 38px rgba(21,31,67,.16),
        0 0 0 4px rgba(23,36,201,.025);
}

.card:hover::before {
    animation: hpCardShineSweep .8s ease forwards;
}

.card-image img {
    transition:
        transform .8s cubic-bezier(.16,1,.3,1),
        filter .5s ease;
}

.card:hover .card-image img {
    transform: scale(1.085);
    filter: saturate(1.07) contrast(1.02);
}

/* ---------- BADGE ---------- */

.badge {
    transform-origin: left top;
    animation: hpBadgeIn .65s cubic-bezier(.16,1,.3,1) both;
}

.card:nth-child(2) .badge { animation-delay: .08s; }
.card:nth-child(3) .badge { animation-delay: .16s; }
.card:nth-child(4) .badge { animation-delay: .24s; }

@keyframes hpBadgeIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.85);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ---------- HEART ---------- */

.heart {
    position: absolute;
    z-index: 5;

    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.heart:hover {
    transform: scale(1.16) rotate(-6deg);
    color: #e52e5f;
    background: #fff5f8;

    box-shadow:
        0 8px 20px rgba(229,46,95,.16);
}

.heart:active {
    transform: scale(.88);
}

/* ---------- PROPERTY META ---------- */

.price {
    transition:
        color .3s ease,
        transform .3s cubic-bezier(.16,1,.3,1);
}

.card:hover .price {
    color: var(--blue);
    transform: translateX(2px);
}

.title {
    transition: color .3s ease;
}

.card:hover .title {
    color: var(--blue);
}

/* =========================================================
   PROPERTY TYPE CARDS
========================================================= */

.type {
    position: relative;
    overflow: hidden;

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        box-shadow .45s ease,
        border-color .35s ease;
}

.type::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(23,36,201,.10),
            transparent 55%
        );

    opacity: 0;
    transform: scale(.7);
    transition:
        opacity .45s ease,
        transform .55s cubic-bezier(.16,1,.3,1);
}

.type:hover {
    transform: translateY(-8px) scale(1.018);
    border-color: rgba(23,36,201,.28);

    box-shadow:
        0 16px 34px rgba(25,34,65,.14),
        0 0 0 4px rgba(23,36,201,.025);
}

.type:hover::before {
    opacity: 1;
    transform: scale(1);
}

.type-icon {
    position: relative;
    z-index: 1;

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;
}

.type:hover .type-icon {
    transform: translateY(-4px) scale(1.11) rotate(-4deg);
    background: var(--blue);
    color: #fff;

    box-shadow:
        0 10px 22px rgba(23,36,201,.22);
}

.type-name,
.type-count {
    position: relative;
    z-index: 1;
}

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

.why {
    position: relative;
    overflow: hidden;

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        box-shadow .45s ease,
        border-color .35s ease;
}

.why::after {
    content: "";
    position: absolute;
    left: -120%;
    top: 0;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(255,255,255,.65),
            transparent
        );

    transform: skewX(-16deg);
    pointer-events: none;
}

.why:hover {
    transform: translateY(-8px);
    border-color: rgba(23,36,201,.24);

    box-shadow:
        0 16px 34px rgba(25,34,65,.14),
        0 0 0 4px rgba(23,36,201,.025);
}

.why:hover::after {
    animation: hpWhyShine .75s ease forwards;
}

.why-icon {
    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;
}

.why:hover .why-icon {
    transform: translateY(-5px) scale(1.10) rotate(-5deg);
    background: var(--blue);
    color: #fff;

    box-shadow:
        0 10px 22px rgba(23,36,201,.22);
}

@keyframes hpWhyShine {
    to {
        left: 135%;
    }
}

/* =========================================================
   POLICY + CTA
========================================================= */

.policy {
    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        box-shadow .45s ease,
        border-color .35s ease;
}

.policy:hover {
    transform: translateY(-7px);
    border-color: rgba(23,36,201,.22);

    box-shadow:
        0 16px 34px rgba(25,34,65,.12);
}

.policy-icon {
    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;
}

.policy:hover .policy-icon {
    transform: scale(1.10) rotate(-5deg);
    background: var(--blue);
    color: #fff;
    box-shadow: 0 10px 22px rgba(23,36,201,.20);
}

/* ---------- CTA banner ---------- */

.cta {
    isolation: isolate;

    background-size: 105% auto, 48% auto;

    transition:
        transform .5s cubic-bezier(.16,1,.3,1),
        box-shadow .5s ease,
        background-size .8s cubic-bezier(.16,1,.3,1);
}

.cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            105deg,
            transparent 20%,
            rgba(255,255,255,.10) 50%,
            transparent 75%
        );

    background-size: 220% 100%;
    animation: hpCtaSweep 8s ease-in-out 2s infinite;
    pointer-events: none;
}

.cta:hover {
    transform: translateY(-7px);
    background-size: 110% auto, 51% auto;

    box-shadow:
        0 18px 38px rgba(16,25,167,.25);
}

.cta-content {
    position: relative;
    z-index: 2;
}

.cta h2 {
    animation: hpCtaTextIn .75s cubic-bezier(.16,1,.3,1) both;
}

.cta button {
    position: relative;
    overflow: hidden;

    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        box-shadow .35s ease,
        background .35s ease;
}

.cta button::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -40%;

    width: 35%;
    height: 300%;

    transform: rotate(24deg);
    background: rgba(255,255,255,.5);
}

.cta button:hover {
    transform: translateY(-3px) scale(1.025);
    box-shadow:
        0 10px 24px rgba(0,0,0,.18);
}

.cta button:hover::before {
    animation: hpButtonShine .65s ease forwards;
}

@keyframes hpCtaSweep {
    0%, 50% {
        background-position: -120% 0;
    }
    75%, 100% {
        background-position: 120% 0;
    }
}

@keyframes hpCtaTextIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   NEWSLETTER
========================================================= */

.newsletter {
    position: relative;
    overflow: hidden;
}

.newsletter::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(255,255,255,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 50%,
            rgba(255,255,255,.08),
            transparent 28%
        );

    animation: hpNewsletterGlow 6s ease-in-out infinite alternate;
    pointer-events: none;
}

.news-inner {
    position: relative;
    z-index: 1;
}

.news-title {
    animation: hpFadeUp .7s cubic-bezier(.16,1,.3,1) both;
}

.news-sub {
    animation: hpFadeUp .7s cubic-bezier(.16,1,.3,1) .12s both;
}

.subscribe {
    transition:
        transform .4s cubic-bezier(.16,1,.3,1),
        box-shadow .4s ease;
}

.subscribe:focus-within {
    transform: translateY(-3px) scale(1.01);
    box-shadow:
        0 12px 28px rgba(0,0,0,.16),
        0 0 0 4px rgba(255,255,255,.12);
}

.subscribe button {
    position: relative;
    overflow: hidden;

    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        box-shadow .35s ease,
        background .35s ease;
}

.subscribe button:hover {
    transform: translateY(-2px) scale(1.025);
    box-shadow: 0 8px 18px rgba(16,25,167,.28);
}

@keyframes hpNewsletterGlow {
    from {
        transform: scale(.95);
        opacity: .65;
    }
    to {
        transform: scale(1.08);
        opacity: 1;
    }
}

/* =========================================================
   EXISTING SCROLL REVEALS — ENHANCED
========================================================= */

.reveal {
    transition:
        opacity .85s ease,
        transform .85s cubic-bezier(.16,1,.3,1);
}

.reveal-left {
    transition:
        opacity .85s ease,
        transform .85s cubic-bezier(.16,1,.3,1);
}

.reveal.visible .section-head h2::after {
    animation: hpSectionLine .6s cubic-bezier(.16,1,.3,1) .15s both;
}

@keyframes hpSectionLine {
    from {
        width: 0;
        opacity: .2;
    }
    to {
        width: 42px;
        opacity: 1;
    }
}

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

@media (max-width: 768px) {

    .hero {
        animation-duration: 1s;
    }

    .search-card {
        animation:
            hpSearchIn .75s cubic-bezier(.16,1,.3,1) .2s both;
    }

    .search-card:hover {
        transform: none;
    }

    .locality:hover,
    .card:hover,
    .type:hover,
    .why:hover,
    .policy:hover,
    .cta:hover {
        transform: translateY(-3px);
    }

    .card:hover .card-image img,
    .locality:hover img {
        transform: scale(1.04);
    }

    .cta {
        background-size: cover !important;
    }
}

/* =========================================================
   TOUCH + ACCESSIBILITY
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .locality:hover,
    .card:hover,
    .type:hover,
    .why:hover,
    .policy:hover,
    .cta:hover {
        transform: none;
    }

    .locality:hover::after,
    .card:hover::before,
    .why:hover::after,
    .search-btn:hover::before {
        animation: none;
    }
}

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

    .hero,
    .hero::before,
    .hero-copy,
    .eyebrow,
    .hero h1,
    .hero h1 strong,
    .hero p,
    .search-card,
    .search-card::before,
    .field,
    .search-btn,
    .trust,
    .trust::before,
    .trust-icon,
    .badge,
    .cta::before,
    .cta h2,
    .newsletter::before {
        animation: none !important;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}


/* =========================================================
   RPF DROPDOWN — FINAL RESPONSIVE / STACKING FIX
   Scoped to the rental-property-filter component only.
   Does not alter JS, routes, API or business logic.
========================================================= */

.rpf-search-card {
    position: relative;
    z-index: 50;
    overflow: visible;
    isolation: isolate;
}

.rpf-form-grid {
    position: relative;
    z-index: 2;
    overflow: visible;
}

.rpf-field {
    position: relative;
    min-width: 0;
    overflow: visible;
}

/* The open field must sit above neighboring fields */
.rpf-field:has(.rpf-control.rpf-control-open) {
    z-index: 100;
}

.rpf-control {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: visible;
}

.rpf-control.rpf-control-open {
    z-index: 101;
}

.rpf-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    max-width: min(100%, 360px);
    max-height: min(240px, 42vh);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 9999;

    box-sizing: border-box;
    background: #fff;
    isolation: isolate;
}

.rpf-dropdown.rpf-dropdown-open {
    display: block;
    z-index: 9999;
}

/* Never allow a neighboring form column to cover an open dropdown */
.rpf-field:has(.rpf-dropdown.rpf-dropdown-open) {
    z-index: 1000;
}

/* Dropdown buttons remain inside the viewport */
.rpf-dropdown button {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
}

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

@media (min-width: 481px) and (max-width: 768px) {

    .rpf-search-card {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .rpf-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rpf-field,
    .rpf-control {
        min-width: 0;
    }

    .rpf-dropdown {
        max-width: 100%;
        max-height: 230px;
    }
}

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

@media (min-width: 320px) and (max-width: 480px) {

    .rpf-search-card {
        width: 100%;
        max-width: 100%;
        padding: 14px;
        overflow: visible;
    }

    .rpf-form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        overflow: visible;
    }

    .rpf-field {
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .rpf-control {
        width: 100%;
        max-width: 100%;
        min-height: 44px;
        padding: 11px 12px;
    }

    .rpf-dropdown,
    .rpf-dropdown.rpf-dropdown-open {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        max-height: 220px;
        z-index: 9999;
    }

    .rpf-dropdown button {
        min-height: 40px;
        padding: 10px 11px;
        font-size: 13px;
    }

    .rpf-control input,
    .rpf-control-value {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* =========================================================
   EXTRA SMALL SAFETY
========================================================= */

@media (max-width: 319px) {

    .rpf-search-card {
        width: 100%;
        max-width: 100%;
        padding: 11px;
        overflow: visible;
    }

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

    .rpf-dropdown {
        max-width: 100%;
        max-height: 200px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .rpf-dropdown {
        transition: none !important;
    }
}

/* =========================================================
   RPF DROPDOWN — TABLET + MOBILE ONLY
   320px–768px
   Desktop/laptop 769px+ remain completely unchanged.
========================================================= */

@media (min-width: 320px) and (max-width: 768px) {

    /* Allow the dropdown to extend outside the search card */
    .hero,
    .hero-inner,
    .rpf-search-card,
    .rpf-form-grid,
    .rpf-field,
    .rpf-control {
        overflow: visible;
    }

    /* Put the search section above the trust strip */
    .hero:has(.rpf-dropdown.rpf-dropdown-open) {
        position: relative;
        z-index: 10;
        overflow: visible;
    }

    .hero:has(.rpf-dropdown.rpf-dropdown-open) .hero-inner {
        position: relative;
        z-index: 20;
        overflow: visible;
    }

    /* Open field gets priority over neighboring fields */
    .rpf-field {
        position: relative;
        z-index: 1;
    }

    .rpf-field:has(.rpf-dropdown.rpf-dropdown-open) {
        z-index: 1000;
    }

    .rpf-control {
        position: relative;
        z-index: 1;
    }

    .rpf-control.rpf-control-open {
        z-index: 1001;
    }

    /* Dropdown */
    .rpf-dropdown,
    .rpf-dropdown.rpf-dropdown-open {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        max-height: 220px;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 1002;
        box-sizing: border-box;
    }

    /* Keep the decorative hero fade behind the dropdown */
    .hero:has(.rpf-dropdown.rpf-dropdown-open)::after {
        z-index: 0;
        pointer-events: none;
    }

    /* Trust strip stays below the open dropdown */
    .trust {
        position: relative;
        z-index: 4;
    }
}

/* -------------------------
   MOBILE 320px–480px
------------------------- */

@media (min-width: 320px) and (max-width: 480px) {

    .rpf-search-card {
        width: 100%;
        max-width: 100%;
    }

    .rpf-form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .rpf-field,
    .rpf-control {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .rpf-control {
        min-height: 44px;
    }

    .rpf-dropdown,
    .rpf-dropdown.rpf-dropdown-open {
        width: 100%;
        max-width: 100%;
        max-height: 220px;
    }

    .rpf-dropdown button {
        width: 100%;
        min-height: 40px;
        box-sizing: border-box;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* -------------------------
   TABLET 481px–768px
------------------------- */

@media (min-width: 481px) and (max-width: 768px) {

    .rpf-search-card {
        width: 100%;
        max-width: 640px;
    }

    .rpf-dropdown,
    .rpf-dropdown.rpf-dropdown-open {
        max-width: 100%;
    }
}