/* ============================================================
   ROOMADDA — HOMEPAGE MASTER CSS  v3
   Clean hierarchy, real imagery, smooth animations.
   ============================================================ */

/* ── 0. RESET & TOKENS ───────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

:root {
    --red: #E53935;
    --red2: #C62828;
    --orange: #FF6B35;
    --grad: linear-gradient(135deg, #E53935 0%, #FF6B35 100%);
    --white: #ffffff;
    --off: #fafafa;
    --border: #e8e8e8;
    --txt: #1a1a1a;
    --muted: #6b7280;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --sh-xs: 0 2px 8px rgba(0, 0, 0, .05);
    --sh-sm: 0 6px 20px rgba(0, 0, 0, .08);
    --sh-md: 0 14px 36px rgba(0, 0, 0, .11);
    --sh-red: 0 8px 24px rgba(229, 57, 53, .26);
}

.av-call-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #E53935, #FF6B35);

    color: #fff;
    border: none;
    border-radius: 12px;

    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;

    text-decoration: none;
    box-shadow: 0 6px 20px rgba(229, 57, 53, .3);
    transition: transform .2s, box-shadow .2s;

    width: fit-content;
    margin-top: 0px;
    margin-bottom: 12px;
}

.av-call-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(229, 57, 53, .42);
    color: #fff;
}

html {
    overflow-x: hidden !important;
}

body {
    /* Step 5 Fix: Flex column layout for sticky footer */
    display: flex !important;
    flex-direction: column;
    min-height: 100vh !important;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
    background: #fff !important;
    color: var(--txt) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    overflow-x: hidden !important;
}

.site-main {
    flex: 1 0 auto;
    width: 100%;
}

/* ── 0.5. GLOBAL SCROLLBAR (Starts below nav) ────────────── */
::-webkit-scrollbar {
    width: 10px;
    background: transparent;
}

::-webkit-scrollbar-track {
    background: #f4f4f4;
    margin-top: 74px;
    /* <--- Starts strictly below the 74px fixed nav bar */
}

::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 10px;
    border: 2px solid #f4f4f4;
    /* Creates padding effect */
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* ── 1. LAYOUT HELPERS ───────────────────────────────────── */
.ra-container {
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 24px;
}

.ra-section {
    padding: 96px 24px;
}

/* ── 2. SCROLL REVEAL ────────────────────────────────────── */
/* Elements START visible — JS adds .ra-hidden at init for animation.
   If JS/IntersectionObserver doesn't fire, content is never hidden. */
.ra-reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .65s ease, transform .65s ease;
}

/* JS sets this class on init before observing */
.ra-reveal.ra-hidden {
    opacity: 0;
    transform: translateY(28px);
}

.ra-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.ra-reveal[data-delay="1"] {
    transition-delay: .00s
}

.ra-reveal[data-delay="2"] {
    transition-delay: .14s
}

.ra-reveal[data-delay="3"] {
    transition-delay: .28s
}

.ra-reveal[data-delay="4"] {
    transition-delay: .42s
}


/* ── 3. HERO ─────────────────────────────────────────────── */
.ra-hero {
    position: relative;
    min-height: 620px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
    /* B5 FIX: was 'hidden' — was clipping descendant content */
}

/* B4 FIX: when nav goes sticky-glass (position:fixed), compensate height */
.av-canvas.nav-stuck {
    padding-top: 74px;
}

.ra-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ra-bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.ra-bg-slide.active {
    opacity: 1;
}

.av-hero-img.active {
    opacity: 1;
}

/* Fix for Hero "10000+ Happy Residents" White-on-White text contrast */
.av-float-card.av-float-bot span {
    color: #1a202c !important;
    font-weight: 600;
}

.ra-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(10, 10, 10, .72) 0%, rgba(10, 10, 10, .45) 60%, rgba(229, 57, 53, .18) 100%);
    z-index: 1;
}

.ra-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1220px;
    margin: 0 auto;
    padding: 80px 24px 60px;
    width: 100%;
}

.ra-hero-eyebrow {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    margin-bottom: 14px;
    animation: fadeUp .5s .1s both;
}

.ra-hero-h1 {
    font-size: 52px !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    color: #fff !important;
    margin-bottom: 14px;
    animation: fadeUp .5s .2s both;
}

.ra-accent {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ra-hero-sub {
    font-size: 17px !important;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 40px;
    animation: fadeUp .5s .35s both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px)
    }

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

/* Search card */
.ra-search-card {
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    padding: 28px 28px 24px;
    max-width: 880px;
    margin-bottom: 32px;
    animation: fadeUp .55s .45s both;
}

.ra-search-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.ra-stab {
    background: none;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--muted);
    cursor: pointer;
    transition: all .2s;
}

.ra-stab.active {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
}

.ra-search-form {
    display: grid;
    grid-template-columns: 2fr 1.3fr 1.2fr auto;
    gap: 14px;
    align-items: end;
}

.ra-sf {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ra-sf label {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--txt);
}

.ra-sf input,
.ra-sf select {
    padding: 13px 16px;
    border: 2px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 14px;
    font-family: inherit;
    background: #f9f9f9;
    color: var(--txt);
    transition: border .2s, box-shadow .2s;
}

.ra-sf input:focus,
.ra-sf select:focus {
    outline: none;
    border-color: var(--red);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(229, 57, 53, .09);
}

.av-field select {
    width: 100%;
    border: none;
    background-color: transparent;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
}

.ra-sbtn {
    background: var(--grad);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    padding: 13px 32px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--sh-red);
    transition: transform .2s, box-shadow .2s;
}

.ra-sbtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(229, 57, 53, .36);
}

/* Stats strip */
.ra-stats-strip {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 14px;
    padding: 18px 32px;
    max-width: 680px;
    animation: fadeUp .5s .55s both;
}

.ra-stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 24px;
}

.ra-stat-item:first-child {
    padding-left: 0;
}

.ra-stat-item strong {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #fff;
    line-height: 1;
}

.ra-stat-item span {
    font-size: 12px !important;
    color: rgba(255, 255, 255, .7);
    font-weight: 500 !important;
}

.ra-stat-sep {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, .25);
    flex-shrink: 0;
}

/* ── 4. FILTER BAR ───────────────────────────────────────── */
.ra-filters-bar {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--sh-xs);
}

.ra-filters-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.ra-filters-scroll::-webkit-scrollbar {
    display: none;
}

.ra-chip {
    flex-shrink: 0;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: var(--txt);
    cursor: pointer;
    transition: all .25s;
    white-space: nowrap;
}

.ra-chip:hover {
    border-color: var(--red);
    color: var(--red);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .07);
}

.ra-chip.active {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--sh-red);
}

/* ── 5. SECTION HEADS ────────────────────────────────────── */
.ra-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 52px;
    flex-wrap: wrap;
    gap: 20px;
}

.ra-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--red);
    margin-bottom: 8px;
}

.ra-section-head h2 {
    font-size: 34px !important;
    font-weight: 700 !important;
    color: var(--txt);
    line-height: 1.2 !important;
    margin-bottom: 8px;
}

.ra-desc {
    font-size: 15px !important;
    color: var(--muted);
}

.ra-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--red);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border: 1.5px solid var(--red);
    border-radius: 999px;
    padding: 9px 20px;
    transition: all .2s;
    white-space: nowrap;
}

.ra-link-btn:hover {
    background: var(--red);
    color: #fff;
}

/* ── 6. PROPERTY CARDS ───────────────────────────────────── */
.ra-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
}

.ra-card {
    background: #fff;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform .3s, box-shadow .3s;
}

.ra-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
}

.ra-card-img-wrap {
    position: relative;
    overflow: hidden;
    height: 220px;
}

.ra-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

.ra-card:hover .ra-card-img-wrap img {
    transform: scale(1.06);
}

.ra-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .35) 0%, transparent 55%);
}

.ra-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--grad);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 6px;
    letter-spacing: .3px;
}

.ra-card-body {
    padding: 18px 20px;
}

.ra-card-body h3 {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--txt);
    margin-bottom: 6px;
    transition: color .2s;
}

.ra-card:hover .ra-card-body h3 {
    color: var(--red);
}

.ra-card-loc {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 12px;
}

.ra-card-loc i {
    color: var(--red);
    margin-right: 4px;
}

.ra-amenities {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.ra-amenities span {
    font-size: 12px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.ra-amenities i {
    color: var(--red);
    font-size: 11px;
}

.ra-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border);
    padding-top: 14px;
}

.ra-price {
    font-size: 20px !important;
    font-weight: 700 !important;
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ra-price small {
    font-size: 12px !important;
    color: var(--muted);
    -webkit-text-fill-color: var(--muted);
    font-weight: 400 !important;
}

.ra-view {
    font-size: 13px;
    font-weight: 600;
    color: var(--red);
    display: flex;
    align-items: center;
    gap: 5px;
    transition: gap .2s;
}

.ra-card:hover .ra-view {
    gap: 9px;
}

/* ── 7. LIFESTYLE BAND ───────────────────────────────────── */
.ra-lifestyle {
    position: relative;
    overflow: hidden;
    padding: 100px 24px;
}

.ra-lifestyle-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    /* fixed caused full-viewport bleed into other sections */
}

.ra-lifestyle-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10, 10, 10, .82) 0%, rgba(180, 28, 25, .55) 100%);
}

.ra-lifestyle-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.ra-lifestyle-text h2 {
    font-size: 38px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 18px;
}

.ra-cta-btn {
    display: inline-block;
    background: var(--grad);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    margin-top: 28px;
    box-shadow: var(--sh-red);
    transition: transform .2s, box-shadow .2s;
    cursor: pointer;
}

.ra-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(229, 57, 53, .38);
    color: #fff;
    text-decoration: none;
}

.ra-features-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ra-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px;
    background: rgba(255, 255, 255, .07);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(6px);
    transition: background .25s, transform .25s;
}

.ra-feature-item:hover {
    background: rgba(255, 255, 255, .13);
    transform: translateX(6px);
}

.ra-fi-icon {
    width: 46px;
    height: 46px;
    background: var(--grad);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: var(--sh-red);
}

.ra-feature-item strong {
    font-size: 15px !important;
    color: #fff;
    display: block;
    margin-bottom: 2px;
}

.ra-feature-item p {
    font-size: 13px !important;
    color: rgba(255, 255, 255, .65);
    margin: 0;
}

/* ── 8. HOW IT WORKS ─────────────────────────────────────── */
.ra-steps {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0;
    align-items: start;
    margin-top: 52px;
}

.ra-step {
    text-align: center;
    padding: 0 16px;
}

.ra-step-img {
    height: 180px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: var(--sh-sm);
}

.ra-step-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s;
}

.ra-step:hover .ra-step-img img {
    transform: scale(1.05);
}

.ra-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--grad);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border-radius: 50%;
    margin-bottom: 14px;
    box-shadow: var(--sh-red);
}

.ra-step h3 {
    font-size: 19px !important;
    font-weight: 600 !important;
    margin-bottom: 8px;
}

.ra-step p {
    font-size: 14px !important;
    color: var(--muted);
}

.ra-step-arrow {
    align-self: center;
    padding-top: 40px;
    font-size: 32px;
    color: var(--border);
}

/* ── 9. AMENITIES GRID ───────────────────────────────────── */
.ra-amenity-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.ra-am-card {
    background: #fff;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-xs);
    border: 1px solid var(--border);
    transition: transform .3s, box-shadow .3s;
}

.ra-am-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-md);
}

.ra-am-card img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
    transition: transform .5s;
}

.ra-am-card:hover img {
    transform: scale(1.06);
}

.ra-am-body {
    padding: 18px;
}

.ra-am-body i {
    font-size: 22px;
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
    display: block;
}

.ra-am-body h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 4px;
}

.ra-am-body p {
    font-size: 13px !important;
    color: var(--muted);
}

/* ── 10. TESTIMONIALS ────────────────────────────────────── */
.ra-testimonials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 48px;
}

.ra-testi {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 28px;
    box-shadow: var(--sh-xs);
    transition: transform .3s, box-shadow .3s;
}

.ra-testi:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-md);
}

.ra-testi-stars {
    color: #f59e0b;
    font-size: 13px;
    margin-bottom: 14px;
}

.ra-testi p {
    font-size: 14px !important;
    color: #444;
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 20px;
}

.ra-testi-user {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ra-testi-user img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    flex-shrink: 0;
}

.ra-testi-user strong {
    font-size: 14px !important;
    font-weight: 600 !important;
    display: block;
}

.ra-testi-user small {
    font-size: 12px !important;
    color: var(--muted);
}

/* ── 11. CTA SECTION ─────────────────────────────────────── */
.ra-cta-section {
    position: relative;
    padding: 100px 24px;
    overflow: hidden;
}

.ra-cta-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    /* fixed caused full-viewport bleed into testimonials */
}

.ra-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(20, 20, 20, .88) 0%, rgba(229, 57, 53, .6) 100%);
}

.ra-cta-inner {
    position: relative;
    z-index: 2;
    text-align: center;
}

.ra-cta-inner h2 {
    font-size: 38px !important;
    font-weight: 700 !important;
    color: #fff;
    margin-bottom: 14px;
}

.ra-cta-inner p {
    font-size: 17px !important;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 36px;
}

.ra-cta-btn-outline {
    display: inline-block;
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 50px;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    margin-left: 16px;
    transition: all .25s;
}

.ra-cta-btn-outline:hover {
    background: rgba(255, 255, 255, .15);
    border-color: #fff;
    color: #fff;
    text-decoration: none;
}

/* ── 12. FOOTER BRIDGE ───────────────────────────────────── */
.ra-footer-bridge {
    height: 70px;
    background: linear-gradient(to bottom, #fafafa, #000);
}

/* ── 13. RESPONSIVE ──────────────────────────────────────── */
@media(max-width:1100px) {
    .ra-amenity-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ra-lifestyle-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media(max-width:900px) {
    .ra-hero-h1 {
        font-size: 36px !important;
    }

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

    .ra-sbtn {
        width: 100%;
    }

    .ra-steps {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ra-step-arrow {
        display: none;
    }

    .ra-testimonials {
        grid-template-columns: 1fr;
    }

    .ra-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media(max-width:600px) {
    .ra-hero {
        min-height: 520px;
    }

    .ra-hero-h1 {
        font-size: 28px !important;
    }

    .ra-stats-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 20px;
    }

    .ra-stat-sep {
        display: none;
    }

    .ra-stat-item {
        padding: 0;
    }

    .ra-amenity-grid {
        grid-template-columns: 1fr;
    }

    .ra-section {
        padding: 64px 16px;
    }

    .ra-section-head h2 {
        font-size: 26px !important;
    }

    .ra-cta-inner h2 {
        font-size: 26px !important;
    }

    .ra-lifestyle {
        background-attachment: scroll;
    }

    .ra-cta-bg {
        background-attachment: scroll;
    }
}

/* ============================================================
   ALMOND VALLEY HERO  (av-*)
   Floating card on soft canvas — homepage only
   ============================================================ */

/* ── Canvas (page background) ─────────────────────────────── */
/* STEP 1 FIX: Removed min-height:100vh (was pushing all sections far down).
   Reduced side padding so hero card fills more of the viewport. */
.av-canvas {
    background: #f0f2f8;
    padding: 14px 12px 0;
    animation: avFadeIn .7s ease both;
}

@keyframes avFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

/* ── Floating hero card ───────────────────────────────────── */
/* STEP 1 FIX: max-width expanded to fill near-full viewport width */
.av-hero-card {
    max-width: 1440px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .10), 0 2px 8px rgba(0, 0, 0, .06);
    overflow: hidden;
}

/* ── Embedded navbar ──────────────────────────────────────── */
.av-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 36px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    z-index: 10;
}

/* Force fixed and add spacer for inner pages */
body.page-inner .av-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

body.page-inner {
    padding-top: 0 !important;
}

.av-logo img {
    height: 46px;
    object-fit: contain;
    display: block;
}

.av-menu {
    flex: 1;
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.av-mlink {
    display: inline-block;
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    color: #444;
    text-decoration: none;
    border-radius: 8px;
    position: relative;
    transition: color .2s, background .2s;
}

.av-mlink::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    background: #C62828;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.av-mlink:hover,
.av-mlink.active {
    color: #C62828;
    background: rgba(198, 40, 40, .06);
    text-decoration: none;
}

.av-mlink:hover::after,
.av-mlink.active::after {
    transform: scaleX(1);
}

.av-nav-cta {
    background: #C62828;
    color: #fff;
    border-radius: 50px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(198, 40, 40, .3);
    transition: transform .2s, box-shadow .2s;
    flex-shrink: 0;
}

.av-nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(198, 40, 40, .4);
    color: #fff;
    text-decoration: none;
}

.av-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.av-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #333;
    border-radius: 2px;
    transition: all .25s;
}

/* ── Hero body: split layout ──────────────────────────────── */
.av-hero-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Removed strict min-height to allow content to grow naturally */
}

/* LEFT side */
.av-left {
    padding: 56px 48px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.av-eyebrow {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: #E53935;
    margin-bottom: 16px;
    animation: avFadeIn .5s .1s both;
}

.av-h1 {
    font-size: 46px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: #111;
    margin-bottom: 14px;
    animation: avFadeIn .5s .2s both;
}

.av-grad-word {
    background: linear-gradient(135deg, #E53935 0%, #FF6B35 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.av-tagline {
    font-size: 15px !important;
    color: #6b7280;
    margin-bottom: 32px;
    animation: avFadeIn .5s .3s both;
}

/* Search glass card */
.av-search-card {
    background: #f8f9fd;
    border: 1.5px solid #e8eaf2;
    border-radius: 18px;
    padding: 22px 22px 20px;
    margin-bottom: 28px;
    animation: avFadeIn .5s .4s both;
    transition: box-shadow .25s;
}

.av-search-card:focus-within {
    box-shadow: 0 8px 32px rgba(229, 57, 53, .10);
    border-color: rgba(229, 57, 53, .25);
}

.av-search-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.av-tab {
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    color: #666;
    cursor: pointer;
    transition: all .2s;
}

.av-tab.active {
    background: linear-gradient(135deg, #E53935, #FF6B35);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 3px 10px rgba(229, 57, 53, .25);
}

.av-form-row {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.av-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.av-field label {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 5px;
}

.av-field label i {
    color: #E53935;
    font-size: 10px;
}

.av-field input,
.av-field select {
    padding: 11px 14px;
    border: 1.5px solid #e0e3ed;
    border-radius: 10px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    background: #fff;
    color: #222;
    transition: border .2s, box-shadow .2s;
}

.av-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C62828' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    padding-right: 36px !important;
    cursor: pointer;
}

.av-field select option {
    padding: 12px 14px;
    background-color: #ffffff;
    color: #1a1a1a;
    font-size: 14px;
}

/* --- CUSTOM FIELD SELECT --- */
.av-custom-select {
    position: relative;
    user-select: none;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    z-index: 10;
}
.av-custom-select.open {
    z-index: 9999;
}
.av-custom-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 14px;
    border: 1.5px solid #e0e3ed;
    border-radius: 10px;
    background: #fff;
    color: #222;
    cursor: pointer;
    transition: border 0.2s, box-shadow 0.2s;
}
.av-custom-select.open .av-custom-trigger {
    border-color: #C62828;
    box-shadow: 0 0 0 3px rgba(198, 40, 40, .1);
}
.av-custom-trigger i {
    color: #C62828;
    font-size: 12px;
    transition: transform 0.2s ease;
}
.av-custom-select.open .av-custom-trigger i {
    transform: rotate(180deg);
}
.av-custom-options {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #e0e3ed;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 1000;
    max-height: 250px;
    overflow-y: auto;
}
/* Custom Scrollbar for dropdown */
.av-custom-options::-webkit-scrollbar {
    width: 6px;
}
.av-custom-options::-webkit-scrollbar-thumb {
    background: #dcdcdc;
    border-radius: 10px;
}
.av-custom-options::-webkit-scrollbar-track {
    background: transparent;
    margin: 6px 0;
}
.av-custom-select.open .av-custom-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.av-custom-option {
    padding: 8px 14px;
    color: #444;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    border-bottom: 1px solid #f6f6f6;
    font-size: 13px;
}
.av-custom-option:last-child {
    border-bottom: none;
}
.av-custom-option:hover {
    background-color: #fff1f1;
    color: #C62828;
}
.av-custom-option.selected {
    background-color: #C62828;
    color: #fff;
    font-weight: 600;
}

/* Fix Parent Z-Index to prevent transparent bleed-through */
.av-search-card {
    position: relative;
    z-index: 100;
}

.av-field input:focus {
    outline: none;
    border-color: #C62828;
    box-shadow: 0 0 0 3px rgba(198, 40, 40, .1);
}

.av-search-btn {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #E53935, #FF6B35);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 6px 20px rgba(229, 57, 53, .3);
    transition: transform .2s, box-shadow .2s;
}

.av-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(229, 57, 53, .42);
}

/* Trust badges */
.av-trust {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    animation: avFadeIn .5s .5s both;
}

.av-trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: #444;
}

.av-trust-item i {
    font-size: 14px;
    color: #E53935;
}

/* RIGHT side: image */
.av-right {
    position: relative;
    overflow: hidden;
    background: #111;
}

.av-img-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.av-img-inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.av-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 8s ease, opacity .6s ease;
    transform: scale(1.05);
    animation: avImgLoad .8s .2s both;
}

@keyframes avImgLoad {
    from {
        transform: scale(1.12);
        opacity: .6;
    }

    to {
        transform: scale(1.05);
        opacity: 1;
    }
}

.av-img-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
            rgba(255, 255, 255, .18) 0%,
            transparent 40%),
        linear-gradient(to top,
            rgba(0, 0, 0, .55) 0%,
            transparent 55%);
}

/* Floating info cards on image */
.av-float-card {
    position: absolute;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #222;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    white-space: nowrap;
    animation: avFloatIn .6s ease both;
}

@keyframes avFloatIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.av-float-top {
    top: 24px;
    left: 24px;
    animation-delay: .7s;
}

.av-float-top i {
    font-size: 16px;
}

.av-float-bot {
    bottom: 72px;
    left: 24px;
    animation-delay: .85s;
    gap: 6px;
}

.av-float-bot img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    margin-right: -8px;
}

.av-float-bot img:last-of-type {
    margin-right: 0;
}

.av-float-bot span {
    font-size: 12px;
    font-weight: 600;
    color: #333;
}

/* Image dots */
.av-img-dots {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.av-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .6);
    background: transparent;
    cursor: pointer;
    transition: all .25s;
    padding: 0;
}

.av-dot.active {
    background: #fff;
    border-color: #fff;
    width: 22px;
    border-radius: 4px;
}

/* ── Sticky glass nav on scroll ───────────────────────────── */
.av-nav.sticky-glass {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(14px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    z-index: 999;
    animation: none;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .av-hero-body {
        grid-template-columns: 1fr;
    }

    .av-right {
        min-height: 340px;
        border-radius: 0;
    }

    .av-left {
        padding: 40px 32px;
    }

    .av-h1 {
        font-size: 36px !important;
    }

    .av-menu {
        display: none;
    }

    .av-menu.is-open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        background: #000;
        padding: 16px 36px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
        z-index: 999;
        border-top: 1px solid #333;
    }

    .av-hamburger {
        display: flex;
    }
}

@media (max-width: 640px) {
    .av-canvas {
        padding: 10px 10px 0;
    }

    .av-hero-card {
        border-radius: 16px;
    }

    .av-nav {
        padding: 14px 20px;
    }

    .av-left {
        padding: 28px 20px;
    }

    .av-h1 {
        font-size: 28px !important;
    }

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

    .av-trust {
        gap: 12px;
    }

    .av-float-bot {
        display: none;
    }
}


/* ============================================================
   SCROLL EXPERIENCE  (sc-*)
   Sections 1–3 below the hero
   ============================================================ */

/* ── SHARED ──────────────────────────────────────────────── */
.sc-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px;
}

.sc-eyebrow {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: #E53935;
    margin-bottom: 10px;
}

.sc-h2 {
    font-size: 36px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: #111;
    margin-bottom: 10px;
}

.sc-sub {
    font-size: 15px !important;
    color: #6b7280;
}

/* STEP 2 FIX: sc-in progressive enhancement — start VISIBLE.
   JS adds .sc-hidden before observing. If observer never fires,
   content is NEVER permanently invisible. (Deduped with Phase 2 block) */
.sc-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .6s ease, transform .6s ease;
}

.sc-in.sc-hidden {
    opacity: 0;
    transform: translateY(24px);
}

.sc-in.sc-visible {
    opacity: 1;
    transform: translateY(0);
}

.sc-in-1 {
    transition-delay: 0s;
}

.sc-in-2 {
    transition-delay: .13s;
}

.sc-in-3 {
    transition-delay: .26s;
}

.sc-in-4 {
    transition-delay: .39s;
}

/* ── SECTION 1: DISCOVERY ────────────────────────────────── */
/* STEP 3 FIX: Clear margin-top ensures section starts exactly below canvas */
.sc-discovery {
    background: #fff;
    padding: 56px 0 32px;
    margin-top: 0;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    z-index: 1;
}

.sc-pills-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    overflow: hidden;
}

.sc-pill-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #aaa;
    white-space: nowrap;
    flex-shrink: 0;
}

.sc-pills {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    /* slide animation initial */
    transform: translateX(0);
}

.sc-pills::-webkit-scrollbar {
    display: none;
}

.sc-pills.sc-pills-sliding {
    animation: pillSlideIn .55s ease both;
}

@keyframes pillSlideIn {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

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

.sc-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: 999px;
    border: 1.5px solid #e5e7eb;
    background: #fafafa;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    color: #444;
    cursor: pointer;
    white-space: nowrap;
    transition: all .22s;
}

.sc-pill i {
    font-size: 11px;
}

.sc-pill:hover {
    border-color: #E53935;
    color: #E53935;
    background: rgba(229, 57, 53, .05);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(229, 57, 53, .12);
}

.sc-pill.active {
    background: linear-gradient(135deg, #E53935, #FF6B35);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 16px rgba(229, 57, 53, .3);
}

/* Stat micro-cards */
.sc-stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding-bottom: 20px;
}

.sc-stat-card {
    background: #fff;
    border-radius: 20px;
    border: 1.5px solid #f0f0f0;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
    cursor: default;
    transition: transform .25s, box-shadow .25s;
}

.sc-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .10);
}

.sc-stat-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    border-radius: 14px;
    background: var(--grad-dark) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    box-shadow: 0 4px 14px rgba(229, 57, 53, .25);
}

.sc-stat-num {
    font-size: 28px !important;
    font-weight: 800 !important;
    background: var(--grad-dark) !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 6px;
}

.sc-stat-lbl {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #6b7280;
}

/* ── SECTION 2: FEATURED CAROUSEL ────────────────────────── */
.sc-featured {
    background: #f8f9fd;
    padding: 80px 0 15px;
}

.sc-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 36px;
    flex-wrap: wrap;
    gap: 20px;
}

.sc-carousel-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sc-nav-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid #e0e0e0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    color: #444;
    transition: all .2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.sc-nav-btn:hover {
    background: linear-gradient(135deg, #E53935, #FF6B35);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(229, 57, 53, .3);
}

.sc-view-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #E53935;
    text-decoration: none;
    border: 1.5px solid rgba(229, 57, 53, .35);
    border-radius: 999px;
    padding: 9px 20px;
    transition: all .2s;
    white-space: nowrap;
}

.sc-view-all:hover {
    background: #E53935;
    color: #fff;
    border-color: transparent;
    text-decoration: none;
}

/* Carousel container */
.sc-carousel-wrap {
    overflow: hidden;
    position: relative;
}

.sc-carousel {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 8px;
    /* no snap on desktop — JS controls */
}

.sc-carousel::-webkit-scrollbar {
    display: none;
}

/* Property card tile */
.sc-card {
    flex-shrink: 0;
    width: 290px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .07);
    border: 1px solid rgba(0, 0, 0, .05);
    transition: transform .3s, box-shadow .3s;
}

.sc-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .13);
}

.sc-card-img {
    position: relative;
    height: 210px;
    overflow: hidden;
}

.sc-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

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

.sc-card-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: linear-gradient(135deg, #E53935, #FF6B35);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 6px;
    letter-spacing: .3px;
    z-index: 2;
}

.sc-card-hover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .60) 0%, transparent 55%);
    display: flex;
    align-items: flex-end;
    padding: 18px;
    opacity: 0;
    transition: opacity .3s;
}

.sc-card:hover .sc-card-hover-overlay {
    opacity: 1;
}

.sc-view-btn {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sc-card-body {
    padding: 18px 20px;
}

.sc-card-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #111;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s;
}

.sc-card:hover .sc-card-title {
    color: #E53935;
}

.sc-card-loc {
    font-size: 12px !important;
    color: #6b7280;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sc-card-loc i {
    color: #E53935;
    font-size: 11px;
}

.sc-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
}

.sc-card-price {
    font-size: 20px !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #E53935, #FF6B35);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.sc-card-price span {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #aaa;
    -webkit-text-fill-color: #aaa;
}

.sc-card-stars {
    font-size: 13px;
    font-weight: 600;
    color: #f59e0b;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Progress bar */
.sc-progress-bar {
    height: 3px;
    background: #e8eaf2;
    border-radius: 99px;
    margin-top: 28px;
    overflow: hidden;
}

.sc-progress-fill {
    height: 100%;
    background: linear-gradient(135deg, #E53935, #FF6B35);
    border-radius: 99px;
    width: 0%;
    transition: width .2s ease;
}

/* ── SECTION 3: HOW IT WORKS ─────────────────────────────── */
.sc-hiw {
    background: #f8f9fd;
    padding: 40px 0 80px;
    overflow: hidden;
}

.sc-hiw-head {
    text-align: center;
    margin-bottom: 52px;
}

/* ── NEW 3-COLUMN STEPPER LAYOUT ──────────────────────── */
.sc-hiw-steps-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
}

.sc-hiw-step2 {
    flex: 1;
    max-width: 320px;
    text-align: center;
    padding: 36px 28px 32px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
    border: 1px solid #f0f0f0;
    transition: transform .35s, box-shadow .35s;
    position: relative;
}

.sc-hiw-step2:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0,0,0,.12);
}

/* Icon circle */
.sc-hiw-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.sc-hiw-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(229,57,53,.1), rgba(255,107,53,.08));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s;
}

.sc-hiw-step2:hover .sc-hiw-icon {
    transform: scale(1.08);
}

.sc-hiw-icon i {
    font-size: 28px;
    color: #E53935;
}

.sc-hiw-icon--orange {
    background: linear-gradient(135deg, rgba(255,152,0,.1), rgba(255,183,77,.08));
}

.sc-hiw-icon--orange i {
    color: #F57C00;
}

.sc-hiw-icon--green {
    background: linear-gradient(135deg, rgba(34,197,94,.1), rgba(22,163,74,.08));
}

.sc-hiw-icon--green i {
    color: #16a34a;
}

/* Step number badge */
.sc-hiw-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E53935, #FF6B35);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(229,57,53,.3);
    font-family: 'Poppins', sans-serif;
}

.sc-hiw-badge--orange {
    background: linear-gradient(135deg, #F57C00, #FFB74D);
    box-shadow: 0 2px 8px rgba(245,124,0,.3);
}

.sc-hiw-badge--green {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 2px 8px rgba(34,197,94,.3);
}

/* Accent line under icon */
.sc-hiw-step2-line {
    width: 40px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #E53935, #FF6B35);
    margin: 0 auto 18px;
}

.sc-hiw-step2-line--orange {
    background: linear-gradient(90deg, #F57C00, #FFB74D);
}

.sc-hiw-step2-line--green {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

/* Horizontal connector between cards */
.sc-hiw-step2-connector {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 0;
    flex-shrink: 0;
    width: 48px;
    align-self: center;
}

.sc-hiw-dash {
    flex: 1;
    height: 2px;
    border-top: 2px dashed #d1d5db;
}

.sc-hiw-step2-connector i {
    font-size: 12px;
    color: #9ca3af;
}

/* Text inside step cards */
.sc-hiw-step2 h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #111;
    margin-bottom: 10px;
}

.sc-hiw-step2 p {
    font-size: 14px !important;
    color: #6b7280;
    line-height: 1.7 !important;
    margin-bottom: 18px;
}

.sc-hiw-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: auto;
}

.sc-hiw-tags span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #E53935;
    background: rgba(229, 57, 53, .07);
    border-radius: 999px;
    padding: 5px 12px;
}

.sc-hiw-tags span i {
    font-size: 10px;
}

.sc-hiw-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #E53935, #FF6B35);
    color: #fff;
    border-radius: 50px;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(229, 57, 53, .3);
    transition: transform .2s, box-shadow .2s;
}

.sc-hiw-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(229, 57, 53, .42);
    color: #fff;
    text-decoration: none;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .sc-stat-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .sc-hiw-steps-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0;
        width: 100% !important;
        max-width: 100% !important;
    }

    .sc-hiw-step2 {
        flex: 1 1 auto !important;
        align-self: stretch !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .sc-hiw-step2-connector {
        padding-top: 0;
        width: auto;
        height: 40px;
        flex-direction: column;
    }

    .sc-hiw-dash {
        height: auto;
        flex: 1;
        width: 2px;
        border-top: none;
        border-left: 2px dashed #d1d5db;
    }

    .sc-hiw-step2-connector i {
        transform: rotate(90deg);
    }
}

@media (max-width: 640px) {
    .sc-container {
        padding: 0 16px;
    }

    .sc-h2 {
        font-size: 26px !important;
    }

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

    .sc-stat-card {
        padding: 20px 14px;
    }

    .sc-stat-num {
        font-size: 22px !important;
    }

    .sc-featured {
        padding: 56px 0 40px;
    }

    .sc-section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .sc-hiw {
        padding: 60px 0;
    }

    .sc-hiw-head {
        margin-bottom: 36px;
    }

    .sc-hiw-step2 {
        padding: 28px 20px 24px;
    }
}


/* ============================================================
   VISUAL DENSITY REFINEMENT PASS  (vr-*)
   Brand: rgb(221,25,0) · Darker gradient · Premium layering
   ============================================================ */

/* ── BRAND COLOR OVERRIDE ────────────────────────────────── */
:root {
    --ra: rgb(221, 25, 0);
    --ra2: rgb(160, 18, 0);
    --grad-dark: linear-gradient(135deg, rgb(221, 25, 0), rgb(160, 18, 0));
    --sh-ra: 0 6px 22px rgba(221, 25, 0, .28);
    --sh-ra-lg: 0 12px 36px rgba(221, 25, 0, .36);
}

/* Override all old red-to-orange with dark red gradient */
.av-nav-cta,
.av-search-btn,
.av-tab.active,
.sc-pill.active,
.sc-nav-btn:hover,
.sc-view-all:hover,
.sc-stat-icon,
.sc-hiw-cta,
.sc-hiw-num,
.sc-card-tag,
.sc-card-price,
.ra-badge,
.ra-sbtn,
.ra-cta-btn,
.ra-link-btn:hover,
.ra-stab.active {
    background: var(--grad-dark) !important;
}

.av-mlink::after,
.av-nav-cta,
.sc-pill.active,
.sc-stat-num,
.sc-card-price,
.ra-price,
.ra-accent,
.av-grad-word,
.ra-am-body i,
.ra-label,
.sc-eyebrow,
.av-eyebrow {
    color: var(--ra) !important;
}

/* gradient text re-apply for elements that need -webkit-text-fill */
.av-grad-word,
.ra-accent,
.sc-stat-num,
.sc-card-price {
    background: var(--grad-dark) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ── PART 1: HERO DENSITY ────────────────────────────────── */

/* Tighten hero left padding, pull content up */
.av-left {
    padding-top: 32px !important;
    padding-bottom: 36px !important;
}

/* Image section: scale up + clip tighter */
.av-right {
    transform: scale(1.0);
    /* CSS doesn't distort layout */
}

.av-img-inner {
    overflow: hidden;
}

.av-main-img {
    transform: scale(1.12) !important;
    /* Closer crop feel */
    object-position: center 30%;
}

/* Search button glow ring */
.av-search-btn {
    background: var(--grad-dark) !important;
    box-shadow: 0 0 0 0 rgba(221, 25, 0, .0), 0 8px 24px rgba(221, 25, 0, .35) !important;
    position: relative;
}

.av-search-btn::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 14px;
    background: var(--grad-dark);
    opacity: .15;
    filter: blur(10px);
    z-index: -1;
    transition: opacity .3s;
}

.av-search-btn:hover::before {
    opacity: .35;
}

/* Avatar social proof row */
.av-avatar-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    animation: avFadeIn .5s .6s both;
}

.av-avatars {
    display: flex;
    align-items: center;
}

.av-avatars img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid #fff;
    margin-right: -9px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    transition: transform .2s;
}

.av-avatars img:hover {
    transform: translateY(-3px);
    z-index: 2;
}

.av-avatar-more {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--grad-dark);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2.5px solid #fff;
    margin-left: 2px;
    box-shadow: 0 2px 6px rgba(221, 25, 0, .3);
}

.av-avatar-text {
    font-size: 12px !important;
    color: #555;
    line-height: 1.4 !important;
    margin: 0;
}

.av-avatar-text strong {
    color: var(--ra);
    font-weight: 700;
}

/* Floating stat badge improvements */
.av-float-top {
    background: rgba(255, 255, 255, .97) !important;
    border: 1px solid rgba(221, 25, 0, .15);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16), 0 0 0 1px rgba(255, 255, 255, .8) !important;
}

.av-float-bot {
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16), 0 0 0 1px rgba(255, 255, 255, .8) !important;
}

/* Hero card tighter border radius */
.av-hero-card {
    border-radius: 28px !important;
}

/* Tagline separator dots bolder */
.av-tagline {
    font-weight: 500 !important;
    letter-spacing: .3px;
}

/* Trust row: add subtle dividers */
.av-trust {
    padding-top: 14px;
    border-top: 1px solid #ededf0;
    margin-top: 4px;
}

.av-trust-item {
    padding: 5px 12px 5px 0;
    border-right: 1px solid #ededf0;
}

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

.av-trust-item i {
    width: 22px;
    height: 22px;
    background: rgba(221, 25, 0, .10);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}

/* ── PART 2: DISCOVERY PILLS GLASS PANEL ─────────────────── */
.sc-discovery {
    background: #fff !important;
    position: relative;
}

.sc-discovery::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, #f0f2f8, transparent);
    pointer-events: none;
}

.sc-pills-wrap {
    background: rgba(248, 249, 253, .92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(221, 25, 0, .08);
    border-radius: 16px;
    padding: 14px 20px;
    margin-bottom: 36px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .05);
}

.sc-pill {
    border-radius: 999px !important;
    font-weight: 600 !important;
    letter-spacing: .1px;
    padding: 10px 22px !important;
}

.sc-pill:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(221, 25, 0, .15) !important;
}

/* Stat cards: layered shadow */
.sc-stat-card {
    border-radius: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06) !important;
    transition: transform .28s, box-shadow .28s;
}

.sc-stat-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .05), 0 16px 36px rgba(221, 25, 0, .12) !important;
}

/* ── PART 3: FEATURED CAROUSEL CARDS ─────────────────────── */

/* "Handpicked for you" sub-eyebrow already in HTML — enhance */
.sc-section-head .sc-eyebrow {
    letter-spacing: 3px;
}

/* Card: rounder, layered shadow */
.sc-card {
    border-radius: 20px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05), 0 8px 28px rgba(0, 0, 0, .07) !important;
}

.sc-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06), 0 20px 48px rgba(0, 0, 0, .14) !important;
}

/* Card image bottom gradient glass overlay */
.sc-card-hover-overlay {
    background: linear-gradient(to top,
            rgba(0, 0, 0, .72) 0%,
            rgba(0, 0, 0, .28) 50%,
            transparent 100%) !important;
}

/* Price badge dark-red gradient text */
.sc-card-price {
    background: var(--grad-dark) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.sc-card-price span {
    -webkit-text-fill-color: #aaa !important;
}

/* Mini feature icons row inside card */
.sc-card-feats {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.sc-card-feats span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    background: #f4f4f8;
    border-radius: 6px;
    padding: 3px 8px;
}

.sc-card-feats span i {
    font-size: 9px;
    color: var(--ra);
}

/* Tag badge dark red */
.sc-card-tag {
    background: var(--grad-dark) !important;
    letter-spacing: .5px;
}

/* Navigation buttons */
.sc-nav-btn {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08), 0 4px 16px rgba(0, 0, 0, .05) !important;
}

/* ── PART 4: AMENITIES SECTION ───────────────────────────── */
/* Subtle tinted background */
section.ra-section:has(.ra-amenity-grid) {
    background: linear-gradient(180deg, #f8f9fd 0%, #f0f2f8 100%) !important;
}

/* Card elevation */
.ra-am-card {
    border-radius: 20px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05), 0 10px 30px rgba(0, 0, 0, .07) !important;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    transition: transform .28s, box-shadow .28s !important;
}

.ra-am-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06), 0 20px 48px rgba(221, 25, 0, .12) !important;
}

/* Icon circle ring */
.ra-am-body i {
    display: inline-flex !important;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(221, 25, 0, .10), rgba(160, 18, 0, .10)) !important;
    font-size: 20px !important;
    margin-bottom: 12px !important;
    transition: transform .25s, box-shadow .25s;
}

.ra-am-card:hover .ra-am-body i {
    transform: scale(1.12) rotate(-6deg);
    box-shadow: 0 0 0 6px rgba(221, 25, 0, .08);
}

.ra-am-body h4 {
    letter-spacing: .3px !important;
}

/* ── PART 5: TESTIMONIALS ────────────────────────────────── */
/* Subtle gradient background */
section.ra-section:has(.ra-testimonials) {
    background: linear-gradient(160deg, #ffffff 0%, #f8f0f0 100%) !important;
}

.ra-testimonials {
    grid-gap: 28px !important;
}

/* Quote watermark behind each card */
.ra-testi {
    position: relative;
    border-radius: 20px !important;
    border: 1px solid rgba(221, 25, 0, .08) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04), 0 8px 28px rgba(0, 0, 0, .07) !important;
    overflow: hidden;
    transition: transform .28s, box-shadow .28s;
}

.ra-testi:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06), 0 22px 48px rgba(221, 25, 0, .10) !important;
}

.ra-testi::before {
    content: '\201C';
    position: absolute;
    top: -12px;
    right: 16px;
    font-size: 120px;
    font-family: Georgia, serif;
    color: rgba(221, 25, 0, .07);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* Star glow */
.ra-testi-stars {
    margin-bottom: 12px !important;
}

.ra-testi-stars i {
    color: #f59e0b;
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, .5));
    font-size: 14px;
}

.ra-testi p {
    font-size: 14px !important;
    line-height: 1.75 !important;
    color: #444;
    font-style: italic;
}

/* ── PART 6: GLOBAL IMPROVEMENTS ────────────────────────── */

/* Heading letter-spacing */
h1,
h2,
h3,
.av-h1,
.sc-h2,
.ra-section-head h2,
.sc-hiw-step2 h3,
.ra-am-body h4 {
    letter-spacing: -.3px !important;
}

/* Section vertical rhythm tightened 20% */
.ra-section {
    padding: 76px 24px !important;
}

.sc-featured {
    padding: 64px 0 48px !important;
}

.sc-hiw {
    padding: 76px 0 !important;
}

.sc-discovery {
    padding: 42px 0 20px !important;
}

/* Layered soft shadows on all floating cards */
.av-search-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .08) !important;
}

/* Consistent 20px radius everywhere */
.ra-card {
    border-radius: 20px !important;
}

.ra-am-card {
    border-radius: 20px !important;
}

.ra-testi {
    border-radius: 20px !important;
}

.sc-card {
    border-radius: 20px !important;
}

.sc-stat-card {
    border-radius: 20px !important;
}

/* Typography micro-polish */
.sc-sub,
.ra-desc {
    font-size: 14px !important;
    letter-spacing: .1px;
    line-height: 1.65 !important;
}

/* Feature icons on property cards in carousel */
.sc-card-body {
    padding: 16px 18px !important;
}

/* Subtle inner border on hero card nav */
.av-nav {
    border-bottom: 1px solid rgba(0, 0, 0, .06) !important;
}

/* Responsive avatar row */
@media (max-width: 640px) {
    .av-avatar-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}


/* ============================================================
   STRUCTURAL FIX PASS  (fix-*)
   Sections 1–7: width, buttons, density, carousel, footer
   ============================================================ */

/* ── S1: HERO FULL-WIDTH ADAPTIVE LAYOUT ─────────────────── */

/* Canvas already goes full viewport width — ensure no clipping */
.av-canvas {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* Hero card stretches wider */
.av-hero-card {
    max-width: 1400px;
    margin: 0 auto;
}

/* Nav inner: match hero width */
.av-nav {
    max-width: 100%;
}

/* Tighten top canvas gap */
.av-canvas {
    padding-top: 12px !important;
}

/* Hero body: full use of card width */
.av-hero-body {
    width: 100%;
}

/* ── S2: BUTTON COLOR BUG FIX ────────────────────────────── */

/* Force white text + dark red on ALL button variants */
.av-nav-cta,
.av-search-btn,
.av-tab.active,
.ra-cta-btn,
.ra-sbtn,
.ra-link-btn,
.sc-hiw-cta,
.sc-nav-btn:hover,
.btn-primary {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: linear-gradient(135deg, rgb(221, 25, 0), rgb(160, 18, 0)) !important;
    border-color: transparent !important;
}

.btn-primary:hover,
.av-search-btn:hover,
.ra-cta-btn:hover {
    background: linear-gradient(135deg, rgb(200, 18, 0), rgb(140, 12, 0)) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Outline variant stays as-is */
.ra-cta-btn-outline {
    background: transparent !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 2px solid rgba(255, 255, 255, .65) !important;
}

.ra-cta-btn-outline:hover {
    background: rgba(255, 255, 255, .15) !important;
    border-color: #fff !important;
}

/* Fix any inherited gradient text bleed onto buttons */
.av-nav-cta *,
.av-search-btn *,
.ra-cta-btn * {
    -webkit-text-fill-color: inherit !important;
    background-clip: initial !important;
    color: inherit !important;
}

/* ── S3: DENSITY — SECTION PADDING ───────────────────────── */

.ra-section {
    padding: 60px 0 !important;
}

.sc-discovery {
    padding: 40px 0 16px !important;
}

.sc-featured {
    padding: 60px 0 44px !important;
}

.sc-hiw {
    padding: 68px 0 !important;
}

.testi-section {
    padding: 60px 0 !important;
}

/* Tighten section-head bottom margin */
.ra-section-head,
.sc-hiw-head {
    margin-bottom: 40px !important;
}

/* Mid sections subtle tint */
.sc-featured {
    background: #f4f6fb !important;
}

/* ── S4: TESTIMONIAL DB CAROUSEL (tc-*) ──────────────────── */

.testi-section {
    background: #ffffff;
    overflow: visible;
    /* cards use rotate — section must not clip them */
}

/* Outer flex: arrows + viewport */
.tc-outer {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    margin-bottom: 20px;
}

/* Viewport clips the track */
.tc-viewport {
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* Track: slides horizontally via transform */
.tc-track {
    display: flex;
    gap: 24px;
    transition: transform .42s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

/* Individual testimonial card */
.tc-card {
    flex: 0 0 calc((100% - 48px) / 3);
    /* 3 per row, gap 24px * 2 */
    min-width: 260px;
    background: #fff;
    border-radius: 20px;
    padding: 28px 26px;
    border: 1px solid rgba(221, 25, 0, .07);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05), 0 8px 28px rgba(0, 0, 0, .07);
    transform: rotate(var(--rot, 0deg));
    transition: transform .28s, box-shadow .28s, rotate .28s;
    position: relative;
    overflow: hidden;
    cursor: default;
}

.tc-card:hover {
    transform: rotate(0deg) translateY(-6px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07), 0 22px 48px rgba(221, 25, 0, .10);
}

/* Quote watermark */
.tc-card::before {
    content: '\201C';
    position: absolute;
    top: -10px;
    right: 14px;
    font-size: 110px;
    font-family: Georgia, serif;
    color: rgba(221, 25, 0, .06);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* Stars */
.tc-stars {
    margin-bottom: 12px;
}

.tc-stars i {
    color: #f59e0b;
    font-size: 13px;
    filter: drop-shadow(0 0 3px rgba(245, 158, 11, .4));
}

/* Quote text */
.tc-msg {
    font-size: 13.5px !important;
    color: #444;
    line-height: 1.75 !important;
    font-style: italic;
    margin-bottom: 20px;
}

/* User row */
.tc-user {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid rgba(0, 0, 0, .06);
    padding-top: 14px;
}

.tc-user img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(221, 25, 0, .2);
    flex-shrink: 0;
}

.tc-initials {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .5px;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, .25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.tc-user strong {
    display: block;
    font-size: 13px !important;
    font-weight: 700;
    color: #111;
}

.tc-user small {
    font-size: 11px !important;
    color: #888;
}

/* Navigation arrows */
.tc-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid #e0e0e0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    color: #555;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
    transition: all .2s;
}

.tc-arrow:hover {
    background: linear-gradient(135deg, rgb(221, 25, 0), rgb(160, 18, 0));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(221, 25, 0, .28);
}

/* Dot pagination */
.tc-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.tc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e0e0e0;
    border: none;
    cursor: pointer;
    transition: all .25s;
    padding: 0;
}

.tc-dot.active {
    background: rgb(221, 25, 0);
    width: 24px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(221, 25, 0, .35);
}

/* Responsive: 2 cards on tablet, 1 on mobile */
@media (max-width: 1023px) {
    .tc-card {
        flex: 0 0 calc((100% - 24px) / 2);
    }
}

@media (max-width: 639px) {
    .tc-card {
        flex: 0 0 100%;
        transform: rotate(0deg) !important;
    }

    .tc-arrow {
        width: 36px;
        height: 36px;
        font-size: 11px;
    }
}

/* ── S5: FOOTER / CTA CLASH FIX ──────────────────────────── */

/* CTA section: zero bottom margin + flush bottom radius */
.ra-cta-section {
    margin-bottom: 0 !important;
    padding-bottom: 80px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Remove bridge div gap */
.ra-footer-bridge {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
}

/* Kill any leftover negative margins above footer */
body>footer,
section+footer,
.ra-cta-section+footer {
    margin-top: 0 !important;
}

/* ── S6: NAVBAR WIDTH CONSISTENCY ────────────────────────── */

/* Nav already in hero card — ensure it spans the full card width */
.av-nav {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
}

/* CTA button in nav doesn't shift right on wider screens */
.av-nav-cta {
    margin-left: auto;
    flex-shrink: 0;
}

/* Hamburger stays aligned */
.av-hamburger {
    margin-left: 12px;
    flex-shrink: 0;
}

/* ── S7: MICRO-UI POLISH ─────────────────────────────────── */

/* Property card hover scale */
.sc-card {
    transition: transform .3s ease, box-shadow .3s ease !important;
}

.sc-card:hover {
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .07), 0 20px 50px rgba(0, 0, 0, .13) !important;
}

/* Search button glow */
.av-search-btn {
    box-shadow: 0 8px 20px rgba(221, 25, 0, .28) !important;
}

.av-search-btn:hover {
    box-shadow: 0 12px 28px rgba(221, 25, 0, .40) !important;
    transform: translateY(-1px);
}

/* Amenity card hover scale */
.ra-am-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
}

/* Consistent elevation on all interactive cards */
.sc-stat-card,
.sc-hiw-card,
.ra-am-card,
.tc-card {
    will-change: transform;
}

/* Remove Bootstrap default button outline on focus */
.av-search-btn:focus,
.ra-cta-btn:focus,
.tc-arrow:focus,
.sc-nav-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(221, 25, 0, .25) !important;
}


/* ================================
   ROOMADDA HOMEPAGE LAYOUT FIX PATCH  v2 (structural repair)
   ================================ */

/* 1️⃣ B2+B3 FIX: Scoped position:relative — only on known RoomAdda sections.
      REMOVED the broad `section, .container { position:relative; z-index:1 }`
      rule because it was breaking position:sticky on .ra-filters-bar
      and creating stacking contexts that clipped content inside them. */
.sc-discovery,
.sc-featured,
.sc-hiw,
.ra-section,
.testi-section,
.ra-cta-section {
    position: relative;
    /* No z-index here — let natural stacking order do the work */
}

/* 2️⃣ CTA: no overlap with footer */
.ra-cta-section {
    margin-bottom: 0 !important;
    transform: none !important;
}

/* 3️⃣ Sections that were previously hidden by class names that may
      have been given position:absolute in older stylesheet versions */
.journey-section,
.testimonial-section,
.residents-section,
.features-section {
    position: relative;
    display: block;
    visibility: visible;
    opacity: 1;
}

/* 4️⃣ Layout clipping — only x-axis hidden (prevents horizontal overflow
      from rotated cards); y-axis must be visible for sticky to work */
body,
main,
.page-wrapper,
.main-wrapper {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* 5️⃣ Footer: natural flow only, no z-index tricks */
footer {
    position: relative !important;
    clear: both !important;
    margin-top: 0 !important;
    /* z-index removed — was causing footer to disappear behind other contexts */
}

/* 6️⃣ Overlay guard: only cap non-hero overlays */
.sc-card-hover-overlay,
.av-img-grad {
    z-index: 2;
}

/* Hero float cards must stay above the image overlay */
.av-float-card {
    z-index: 4;
}

/* 7️⃣ Button white text catch-all */
.btn-primary,
button.red-btn {
    color: #fff !important;
}

/* NOTE: bare `button { color:#fff }` removed — was forcing white text
         on nav hamburger spans and other neutral buttons */

/* 8️⃣ Testimonial section background */
.testi-section {
    background: linear-gradient(160deg, #ffffff 0%, #fdf0f0 100%);
}


/* ============================================================
   PHASE 2 — VISUAL POLISH
   Brand color unification, button fix, micro-animations,
   card elevation, and premium density improvements.
   ============================================================ */

/* ── P1: Brand color token unification ───────────────────── */
:root {
    --ra-red: rgb(221, 25, 0);
    --ra-red-dark: rgb(160, 18, 0);
    --ra-red-glow: rgba(221, 25, 0, .28);
    --ra-grad: linear-gradient(135deg, rgb(221, 25, 0) 0%, rgb(160, 18, 0) 100%);
}

/* Override old #E53935 red tokens everywhere */
.ra-label,
.sc-eyebrow {
    color: var(--ra-red) !important;
}

.ra-filters-bar .ra-chip.active,
.av-tab.active,
.av-nav-cta,
.av-search-btn,
.sc-hiw-cta,
.ra-cta-btn,
.ra-sbtn,
.btn-primary {
    background: var(--ra-grad) !important;
    border-color: transparent !important;
}

/* ── P2: White text on ALL red buttons (definitive) ─────── */
.av-nav-cta,
.av-search-btn,
.av-tab.active,
.ra-cta-btn,
.ra-sbtn,
.sc-hiw-cta,
.sc-nav-btn:hover,
.btn-primary,
.ra-stab.active {
    color: #ffffff !important;
    /* Kill gradient text clip that bleeds onto buttons */
    -webkit-text-fill-color: #ffffff !important;
    background-clip: padding-box !important;
}

/* Children inside buttons must always inherit white */
.av-nav-cta *,
.av-search-btn *,
.ra-cta-btn *,
.sc-hiw-cta * {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* Darker hover state */
.av-nav-cta:hover,
.av-search-btn:hover,
.ra-cta-btn:hover,
.sc-hiw-cta:hover {
    background: linear-gradient(135deg, rgb(200, 18, 0), rgb(130, 10, 0)) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Outline button on CTA keeps white text on transparent */
.ra-cta-btn-outline {
    background: transparent !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 2px solid rgba(255, 255, 255, .6) !important;
}

.ra-cta-btn-outline:hover {
    background: rgba(255, 255, 255, .12) !important;
    border-color: #fff !important;
}

/* ── P3: Search button ambient glow ──────────────────────── */
.av-search-btn {
    box-shadow: 0 8px 24px var(--ra-red-glow) !important;
    transition: transform .22s ease, box-shadow .22s ease !important;
}

.av-search-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 34px rgba(221, 25, 0, .38) !important;
}

/* ── P4: sc-in animation — progressive enhancement (same pattern as ra-reveal) ── */
/* Elements START visible. JS adds .sc-hidden before observing.
   If observer never fires, content is NEVER permanently invisible. */
.sc-in {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}

/* JS adds this class on init before observing */
.sc-in.sc-hidden {
    opacity: 0;
    transform: translateY(22px) scale(.97);
}

.sc-in.sc-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.sc-in-1 {
    transition-delay: .00s;
}

.sc-in-2 {
    transition-delay: .10s;
}

.sc-in-3 {
    transition-delay: .20s;
}

.sc-in-4 {
    transition-delay: .30s;
}


/* ── P5: Property card — deeper shadow + hover scale ─────── */
.sc-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .08);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1),
        box-shadow .3s ease !important;
}

.sc-card:hover {
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08),
        0 24px 54px rgba(0, 0, 0, .14) !important;
}

/* ── P6: Stat cards — lift + accent border on hover ─────── */
.sc-stat-card {
    transition: transform .28s ease, box-shadow .28s ease;
}

.sc-stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 28px rgba(221, 25, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);
    border-top: 3px solid var(--ra-red);
}

/* ── P7: Amenity card — smoother hover ───────────────────── */
.ra-am-card {
    transition: transform .3s ease, box-shadow .3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06), 0 6px 20px rgba(0, 0, 0, .07);
}

.ra-am-card:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .11), 0 2px 8px rgba(0, 0, 0, .05);
}

/* ── P8: Testimonial card rotation + hover reset ─────────── */
.tc-card {
    transition: transform .3s cubic-bezier(.22, 1, .36, 1),
        box-shadow .3s ease !important;
}

.tc-card:hover {
    transform: rotate(0deg) translateY(-7px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08),
        0 24px 48px rgba(221, 25, 0, .09) !important;
}

/* ── P9: HOW-IT-WORKS step number — red glow accent ─────── */
.sc-hiw-num {
    color: var(--ra-red);
    text-shadow: 0 0 20px rgba(221, 25, 0, .22);
}

.sc-hiw-num--accent {
    background: var(--ra-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 2px 8px rgba(221, 25, 0, .3));
}

.sc-hiw-glow {
    background: radial-gradient(circle, rgba(221, 25, 0, .15) 0%, transparent 70%);
}

.sc-hiw-glow--accent {
    background: radial-gradient(circle, rgba(221, 25, 0, .25) 0%, transparent 70%);
}

/* ── P10: Navigation arrows (featured carousel) ─────────── */
.sc-nav-btn:hover {
    background: var(--ra-grad) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 16px var(--ra-red-glow);
}

/* ── P11: Focus rings — brand red ───────────────────────── */
.av-search-btn:focus-visible,
.ra-cta-btn:focus-visible,
.tc-arrow:focus-visible,
.sc-nav-btn:focus-visible {
    outline: 3px solid rgba(221, 25, 0, .4) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

/* ── P12: Avatar pills in hero ──────────────────────────── */
.av-avatars img {
    border: 2px solid rgba(221, 25, 0, .25);
    transition: transform .2s ease;
}

.av-avatars img:hover {
    transform: scale(1.12) translateY(-2px);
    z-index: 5;
    border-color: var(--ra-red);
}

/* ── P13: Discovery pills hover ─────────────────────────── */
.sc-pill:hover {
    border-color: var(--ra-red) !important;
    color: var(--ra-red) !important;
    box-shadow: 0 2px 10px rgba(221, 25, 0, .12);
}

.sc-pill.active {
    background: var(--ra-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 14px var(--ra-red-glow) !important;
}

/* ── P14: General link hover in nav ─────────────────────── */
.av-mlink {
    transition: color .18s ease;
}

.av-mlink:hover,
.av-mlink.active {
    color: var(--ra-red) !important;
}


/* ============================================================
   CTA SECTION + FOOTER  — Complete CSS
   (elegant-footer had NO styles anywhere in the codebase)
   ============================================================ */

/* ── CTA SECTION ─────────────────────────────────────────── */
.ra-cta-section {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

/* Parallax background image */
.ra-cta-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    /* fixed caused full-viewport bleed into testimonials */
    z-index: 0;
}

/* Dark brand-red overlay */
.ra-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(180, 10, 0, .92) 0%,
            rgba(30, 8, 8, .88) 100%);
    z-index: 1;
}

/* Content above overlay */
.ra-cta-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 72px 24px;
    color: #fff;
}

.ra-cta-inner h2 {
    font-size: 38px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 12px;
    line-height: 1.15 !important;
}

.ra-cta-inner p {
    font-size: 16px !important;
    color: rgba(255, 255, 255, .8) !important;
    margin-bottom: 32px;
}

.ra-cta-inner .ra-cta-btn,
.ra-cta-inner .ra-cta-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    margin: 0 8px;
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.ra-cta-inner .ra-cta-btn {
    background: #fff !important;
    color: rgb(180, 10, 0) !important;
    -webkit-text-fill-color: rgb(180, 10, 0) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}

.ra-cta-inner .ra-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .30);
    background: #f5f5f5 !important;
}

.ra-cta-inner .ra-cta-btn-outline {
    background: transparent !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 2px solid rgba(255, 255, 255, .65) !important;
}

.ra-cta-inner .ra-cta-btn-outline:hover {
    background: rgba(255, 255, 255, .14) !important;
    border-color: #fff !important;
    transform: translateY(-2px);
}

/* Bridge div — invisible spacer, hidden */
.ra-footer-bridge {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── ELEGANT FOOTER ──────────────────────────────────────── */
/* Footer styles live in style.css (lines 1434-1570).
   DO NOT redefine .elegant-footer here — it overrides the
   city-skyline footer-bg.jpg background from style.css.     */

/* ── ELEGANT FOOTER ──────────────────────────────────────── */
/* Footer styles are defined in style.css (lines 1434-1570).
   DO NOT add any .elegant-footer, .footer-title, .footer-links,
   .footer-social-icons, .footer-divider, or #whats-chat rules
   here — they will override the city-skyline background.     */

/* ── CTA responsive (mobile) ─────────────────────────────── */
@media (max-width: 768px) {
    .ra-cta-inner h2 {
        font-size: 26px !important;
    }

    .ra-cta-inner .ra-cta-btn,
    .ra-cta-inner .ra-cta-btn-outline {
        display: block;
        margin: 8px auto;
        max-width: 240px;
        text-align: center;
    }
}


/* ============================================================
   STEPS 4-6  — GLOBAL STRUCTURAL FIX  (final authority block)
   Section flow, CTA isolation, footer, container consistency.
   All rules here deliberately placed LAST to win cascade.
   ============================================================ */

/* ── STEP 4: Guarantee every section stacks cleanly ─────── */
/* No section may use position:absolute for vertical layout.
   Each section is a normal block in document flow.           */
.sc-discovery,
.sc-featured,
.sc-hiw,
.ra-section,
.testi-section,
.ra-cta-section {
    display: block;
    position: relative;
    /* IMPORTANT: transform:none removed here — it was creating a new stacking
       context on sc-hiw (overflow:hidden) and suppressing child transforms
       like sc-hiw-glow translate(-50%) and sc-hiw-img scale() hover effects,
       making the sc-hiw cards invisible. Section-level transforms removed. */
}

/* Only suppress transforms on sections that truly need it */
.sc-discovery {
    transform: none;
}

.sc-featured {
    transform: none;
}

/* sc-hiw: leave transforms alone — children need translate/scale */
/* ra-section: leave alone — am-card animations use translateY */
/* testi-section: leave alone — tc-card rotation uses var(--rot) */

/* Explicit margin-top: 0 on all sections — no gaps or overlaps
   caused by collapsing margins or leftover transforms        */
.sc-discovery {
    margin-top: 0 !important;
}

.sc-featured {
    margin-top: 0 !important;
}

.sc-hiw {
    margin-top: 0 !important;
}

.ra-section {
    margin-top: 0 !important;
}

.testi-section {
    margin-top: 0 !important;
}

/* ── STEP 5: CTA isolation ───────────────────────────────── */
/* CTA must start ONLY after testimonials fully ends.
   No negative margins. No absolute positioning for layout.   */
.ra-cta-section {
    position: relative;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
    overflow: hidden;
    transform: none !important;
}

/* Inner positioned children stay inside CTA only */
.ra-cta-bg,
.ra-cta-overlay {
    position: absolute;
    inset: 0;
}

.ra-cta-bg {
    z-index: 0;
}

.ra-cta-overlay {
    z-index: 1;
}

.ra-cta-inner {
    position: relative;
    z-index: 2;
}

/* ── STEP 6: Footer sits directly below CTA ─────────────── */
/* Footer CSS is in style.css — no overrides needed here.     */

/* Bridge spacer hidden — never creates gap */
.ra-footer-bridge {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── STEP 6b: Responsive canvas ─────────────────────────── */
@media (max-width: 768px) {
    .av-canvas {
        padding: 10px 8px 0;
    }

    .av-hero-card {
        border-radius: 14px;
    }

    .sc-hiw {
        overflow: visible;
    }

    /* Stack CTA buttons on mobile */
    .ra-cta-inner .ra-cta-btn,
    .ra-cta-inner .ra-cta-btn-outline {
        display: block;
        margin: 8px auto;
        max-width: 240px;
        text-align: center;
    }
}

/* ── STEP 6c: Container structure consistency ────────────── */
/* All inner content wrappers honour max-width + centring.
   Do NOT mix sc-container and ra-container on the same page
   element — use one per section.                              */
.sc-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 28px;
    padding-right: 28px;
    width: 100%;
}

.ra-container {
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    width: 100%;
}

/* ── STEP 6d: Kill any lingering negative margins ───────── */
/* These were common culprits for section overlaps. Kept as
   documentation — empty selector intentionally removed.       */

/* Specific offenders from earlier patch sessions */
.ready-section,
.cta-section,
.final-cta,
.hero-wrapper {
    position: relative !important;
    margin-top: 0 !important;
    transform: none !important;
}


/* ============================================================
   DEFINITIVE FOOTER + TESTIMONIALS FIX
   Applied last — highest cascade priority.
   ============================================================ */

/* ── FIX 1: Testimonials section ─────────────────────────────
   overflow:hidden (set at line 3014) was CLIPPING the rotated
   tc-card elements. Browser treated the clipped area as having
   zero height → CTA appeared to start immediately on top of
   the testimonials content.
   SOLUTION: switch to overflow:visible so cards paint outside
   the box, and set a min-height so section always takes space.  */
.testi-section {
    overflow: visible !important;
    padding: 80px 0 100px !important;
    /* min-height guarantees the section occupies vertical space
       even if cards are short or DB returns zero rows           */
    min-height: 500px;
    position: relative;
    z-index: 1;
    /* Do NOT add transform:none here — it resets tc-card rotations */
}

/* The inner carousel viewport still clips horizontally only */
.tc-viewport {
    overflow: hidden !important;
    /* clip track horizontally */
    overflow-y: visible !important;
    /* allow rotated cards to overflow top/bottom */
}

/* tc-card must NOT be affected by transform:none from section */
.tc-card {
    transform: rotate(var(--rot, 0deg));
    transition: transform .3s ease, box-shadow .3s ease;
}

.tc-card:hover {
    transform: rotate(0deg) translateY(-6px) scale(1.02) !important;
    box-shadow: 0 12px 36px rgba(221, 25, 0, .14) !important;
    z-index: 10;
}

/* ── FIX 2: CTA section — must be flex container after testi ─
   No transforms, no negative margins, no absolute layout.       */
.ra-cta-section {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 340px;
}

/* ── REMOVED HACKS: Rebuilding CTA correctly on the parent ──── */
.ra-cta-section,
.ra-cta-section.ra-cta-premium {
    position: relative !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    /* Clean linear gradient overlay combined with background image natively */
    background: linear-gradient(135deg, rgba(180, 10, 0, .92) 0%, rgba(30, 8, 8, .92) 100%),
        url('../images/cta-bg.jpg') center/cover scroll no-repeat !important;
    margin: 0 0 140px 0 !important;
    /* Step 4: margin-bottom 140px */
    padding: 80px 24px !important;
    z-index: 1;
    overflow: hidden !important;
    transform: none !important;
}

/* Old absolute layers are now killed completely */
.ra-cta-bg,
.ra-cta-overlay {
    display: none !important;
}

.ra-cta-inner {
    position: relative !important;
    z-index: 2;
    text-align: center;
    color: #fff;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* ── FIX 7: FOOTER — PERFECT SKYLINE RESPONSIVENESS ────
   The skyline image is now a separate HTML element.
   This footer is now purely structural with a solid background. */
footer.elegant-footer,
.elegant-footer {
    position: relative !important;
    display: block !important;
    margin-top: 0 !important;
    z-index: 2 !important;
    clear: both;
    background-color: #080808 !important;
    /* Solid dark background for text */
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

/* Remove any pseudo elements we tried previously */
footer.elegant-footer::before,
.elegant-footer::before {
    display: none !important;
}

/* Responsive Overrides - No longer need massive padding */
@media (max-width: 991px) {

    footer.elegant-footer,
    .elegant-footer {
        padding-top: 40px !important;
    }
}

@media (max-width: 768px) {

    footer.elegant-footer,
    .elegant-footer {
        padding-top: 32px !important;
    }
}


/* Content container sits above the skyline pseudo-element      */
.elegant-footer .container {
    position: relative !important;
    z-index: 3 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ── NEW CLEAN FOOTER GRID ─────────────────────────────────────── */
.footer-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 40px !important;
    align-items: start !important;
}

@media (max-width: 991px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

/* Keep text readable on dark footer background                 */
.elegant-footer p,
.elegant-footer li,
.elegant-footer a,
.elegant-footer div,
.elegant-footer span {
    color: #ccc !important;
}

.elegant-footer .footer-title {
    color: #b72626 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
}

.footer-links a,
.elegant-footer a {
    color: #ccc !important;
    text-decoration: none;
    transition: color .2s;
}

.footer-links a:hover,
.elegant-footer a:hover {
    color: #b72626 !important;
    text-decoration: underline !important;
}

.footer-social-icons a {
    display: inline-block !important;
    color: #c8a87c !important;
    font-size: 18px !important;
    margin-right: 12px !important;
    transition: color .2s;
}

.footer-social-icons a:hover {
    color: #b72626 !important;
}

.footer-divider {
    border-color: rgba(255, 255, 255, .2) !important;
}

/* WhatsApp fixed button */
#whats-chat {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    z-index: 9999 !important;
}

/* ── FIX 4: Responsive scaling ──────────────────────────────  */
@media (min-width: 1200px) {
    .elegant-footer {
        background-size: auto 390px !important;
        padding-top: 260px !important;
    }
}

@media (max-width: 992px) {
    .elegant-footer {
        background-size: auto 320px !important;
        padding-top: 200px !important;
    }

    .testi-section {
        padding: 60px 0 80px !important;
    }
}

@media (max-width: 768px) {
    .elegant-footer {
        background-size: auto 280px !important;
        padding-top: 170px !important;
    }

    .testi-section {
        padding: 48px 0 64px !important;
        min-height: 360px;
    }

    .ra-cta-section {
        min-height: 280px;
    }
}

@media (max-width: 576px) {
    .elegant-footer {
        background-size: auto 220px !important;
        padding-top: 140px !important;
        padding-bottom: 40px !important;
    }

    .testi-section {
        min-height: 300px;
    }
}


/* ============================================================
   SECTION OVERLAP FINAL FIX — sc-hiw + testi-section
   Stop both sections from overlapping their neighbours.
   ============================================================ */

/* ── sc-hiw: "Simply Fast / Your Journey" section ───────────
   overflow:hidden was clipping the alternating .sc-hiw-card
   elements (--left pushes card to left edge, --right to right)
   making them invisible inside the hidden overflow.
   Setting overflow:visible lets cards render fully.
   Horizontal scrollbar guard: body already clips overflow-x.  */
.sc-hiw {
    overflow: visible !important;
    /* sc-hiw-track is a flex-column — cards stack vertically,
       so width overflow isn't an issue for layout flow.        */
}

/* Connect the steps with a clear vertical gap */
.sc-hiw-track {
    gap: 48px !important;
    /* visible breathing room between step cards */
}

/* Step wrapper: must not use position:absolute or negative margin */
.sc-hiw-step {
    position: relative !important;
    transform: none;
    /* safe: no child needs to inherit transform */
    margin-bottom: 0 !important;
}

/* Guard: child glow and images still get their own transforms */
.sc-hiw-glow {
    transform: translate(-50%, -50%) !important;
}

.sc-hiw-card:hover .sc-hiw-img img {
    transform: scale(1.05) !important;
}

/* ── testi-section: "Real Stories / What Residents Say" ──────
   overflow:visible is correct (rotated cards need to paint
   outside box). But min-height:500px was creating extra space
   that pushed the CTA down and overlapped the footer.
   Natural content height is enough — remove the min-height.   */
.testi-section {
    overflow: visible !important;
    min-height: 0 !important;
    padding: 80px 0 100px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* tc-viewport: horizontal clip only, vertical open */
.tc-viewport {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* Restore card rotation — transform:none on section was
   inadvertently resetting var(--rot) on tc-card children     */
.tc-card {
    transform: rotate(var(--rot, 0deg)) !important;
}

.tc-card:hover {
    transform: rotate(0deg) translateY(-6px) scale(1.02) !important;
    z-index: 10 !important;
}

/* ── Amenities section beneath sc-hiw ───────────────────────
   ra-section (amenities) keeps its own padding.
   Ensure it starts flush with no extra top margin.            */
.ra-section {
    margin-top: 0 !important;
    position: relative !important;
}

/* ── Clean responsive overrides ─────────────────────────────  */
@media (max-width: 768px) {
    .sc-hiw-track {
        gap: 32px !important;
    }

    .testi-section {
        padding: 56px 0 72px !important;
    }
}

@media (max-width: 576px) {
    .sc-hiw-track {
        gap: 20px !important;
    }

    .testi-section {
        padding: 40px 0 56px !important;
    }
}


/* ============================================================
   TC-CARD VISIBILITY FIX — HIGHEST PRIORITY
   Root cause: JS at index.php line 671 adds .sc-hidden to
   ALL .sc-in elements including .tc-card (testimonial cards).
   The IntersectionObserver uses threshold:0.05 but NEVER fires
   for cards inside overflow-x:hidden carousel (intersection
   ratio stays 0 from the browser's perspective) → cards stay
   at opacity:0 permanently.
   SOLUTION: Override opacity back to 1 for all tc-card variants.
   The !important + higher specificity beats .sc-in.sc-hidden.
   ============================================================ */

/* Force testimonial cards visible — always */
.testi-section .tc-card,
.testi-section .tc-card.sc-in,
.testi-section .tc-card.sc-in.sc-hidden,
.testi-section .tc-card.sc-in.sc-visible,
.tc-card.sc-in,
.tc-card.sc-in.sc-hidden,
.tc-card.sc-in.sc-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: rotate(var(--rot, 0deg)) !important;
}

/* Hover state still works */
.testi-section .tc-card:hover,
.tc-card.sc-in:hover {
    transform: rotate(0deg) translateY(-6px) scale(1.02) !important;
    opacity: 1 !important;
}

/* Ensure tc-outer has height — fallback in case track collapses */
.tc-outer {
    min-height: 280px !important;
}

.tc-track {
    min-height: 240px !important;
    align-items: stretch;
}

/* tc-card always shows its content */
.tc-card {
    min-height: 200px !important;
    opacity: 1 !important;
}


/* ═══════════════════════════════════════════════════════════════
   STRUCTURAL MASTER FIX  — Final authority block
   Rules here override all previous declarations.
   Principle: every section is a self-contained block.
   No negative margins. No position:absolute on whole sections.
   No overflow:hidden on section wrappers (only on inner clips).
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL SECTION ISOLATION ───────────────────────────── */
.av-canvas,
.sc-discovery,
.sc-featured,
.sc-hiw,
.ra-section,
.testi-section,
.ra-cta-section {
    position: relative !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* No negative margins anywhere */
    clear: both;
}

/* Body/html: only x-axis clipped to hide carousel bleed */
html,
body {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* ── 2. HERO SECTION ────────────────────────────────────────── */
.av-canvas {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 20px 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.av-hero-card {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    overflow: visible !important;
}

/* ── 3. TESTIMONIALS / "REAL STORIES" SECTION ──────────────── */
/* Section itself must NOT clip anything — overflow:visible so
   cards with rotation/hover translate are never cropped        */
.testi-section {
    padding: 100px 0 !important;
    background: linear-gradient(180deg, #fff 0%, #f9f9f9 100%) !important;
    overflow: visible !important;
    /* ← was overflow:hidden — fixed */
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
}

/* Outer flex container: arrows + viewport */
.tc-outer {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    position: relative !important;
    margin-bottom: 20px !important;
    overflow: visible !important;
    /* ← section clips, not this wrapper */
    min-height: unset !important;
    /* remove stale min-height hack */
}

/* Viewport: THIS is the only element that clips horizontally */
.tc-viewport {
    flex: 1 !important;
    overflow: hidden !important;
    /* horizontal clip for carousel */
    position: relative !important;
}

/* Track slides via translateX — no overflow restriction here */
.tc-track {
    display: flex !important;
    gap: 24px !important;
    transition: transform .42s cubic-bezier(.4, 0, .2, 1) !important;
    will-change: transform !important;
    min-height: unset !important;
    align-items: stretch !important;
}

/* Individual card: always fully visible */
.tc-card {
    flex: 0 0 calc((100% - 48px) / 3) !important;
    min-width: 260px !important;
    min-height: unset !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 1023px) {
    .tc-card {
        flex: 0 0 calc((100% - 24px) / 2) !important;
    }
}

@media (max-width: 639px) {
    .tc-card {
        flex: 0 0 100% !important;
        transform: rotate(0deg) !important;
    }
}

/* ── 4. CTA SECTION ─────────────────────────────────────────── */
/* Own section, never overlaps content above / footer below */
.ra-cta-section {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 100px 24px !important;
    overflow: hidden !important;
    /* ok here — only contains abs-pos bg/overlay */
    transform: none !important;
}

/* Parallax BG stays inside */
.ra-cta-bg {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    z-index: 0 !important;
}

/* Dark-red gradient overlay */
.ra-cta-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg,
            rgba(160, 0, 0, 0.90) 0%,
            rgba(221, 25, 0, 0.70) 100%) !important;
    z-index: 1 !important;
}

/* Inner content above the overlay */
.ra-cta-inner {
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
}

/* ── 5. FOOTER BRIDGE (hidden spacer — keep gone) ───────────── */
.ra-footer-bridge {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── 6. FOOTER ─────────────────────────────────────────────── */
/* Footer is the last DOM element — natural flow, no tricks    */
.elegant-footer,
footer.elegant-footer {
    position: relative !important;
    margin: 0 !important;
    /* no negative-margin hacks */
    padding-top: 120px !important;
    /* clear separation from CTA */
    clear: both !important;

    /* Skyline background stays INSIDE footer at the top */
    background-position: center top !important;
}

/* Footer content sits above the skyline background layer */
.elegant-footer .container {
    position: relative !important;
    z-index: 2 !important;
}

/* Kill any Bootstrap row negative margin that could bleed */
.elegant-footer .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Kill leftover margin-top injected by CTA + footer adjacency rules */
body>footer,
section+footer,
.ra-cta-section+footer,
.ra-footer-bridge+footer {
    margin-top: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   MASTER LAYOUT STABILIZER — Rules 1–10
   Single authoritative pass. Supersedes everything above.
   ═══════════════════════════════════════════════════════════════ */

/* ── RULE 4: Z-INDEX HIERARCHY ──────────────────────────────── */
:root {
    --layer-base: 1;
    --layer-card: 2;
    --layer-overlay: 3;
    --layer-navbar: 10;
}

/* ── RULE 1: GLOBAL SECTION FLOW ────────────────────────────── */
/* Every section stacks vertically as a natural block element    */
section,
.home-section,
.page-section,
.sc-discovery,
.sc-featured,
.sc-hiw,
.ra-section,
.testi-section,
.ra-cta-section {
    position: relative !important;
    width: 100% !important;
    display: block !important;
    clear: both !important;
    /* NO negative margins, NO translateY for layout */
}

/* Apply z-index via variable — no random numbers */
.home-section {
    z-index: var(--layer-base);
}

.sc-card,
.tc-card,
.ra-am-card,
.sc-stat-card,
.sc-hiw-card {
    z-index: var(--layer-card);
}

.ra-cta-overlay,
.av-img-grad {
    z-index: var(--layer-overlay);
}

.av-nav {
    z-index: var(--layer-navbar);
}

/* ── RULE 2: CONTAINER WRAPPER ──────────────────────────────── */
/* Standard centered wrapper; use this class on any new section  */
.container-wrapper {
    max-width: 1320px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

/* ra-container already does the same job — align it */
.ra-container,
.sc-container {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* ── RULE 3: SPACING SYSTEM ─────────────────────────────────── */
/* Generic sections: 120px top + bottom                          */
.home-section {
    padding-top: 120px;
    padding-bottom: 120px;
}

/* Hero: tighter top, generous bottom                            */
.av-canvas {
    padding-top: 60px !important;
    padding-bottom: 80px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Existing section classes aligned to system                    */
.sc-discovery {
    padding: 40px 0 20px !important;
}

.sc-featured {
    padding: 60px 0 48px !important;
}

.sc-hiw {
    padding: 68px 0 !important;
}

.ra-section {
    padding: 76px 0 !important;
}

.testi-section {
    padding: 100px 0 !important;
}

/* CTA last section: margin-top 0 (it follows testi naturally),
   but generous bottom for footer skyline clearance              */
.ra-cta-section {
    margin-top: 0 !important;
    padding: 100px 24px !important;
}

/* ── RULE 7: HERO CONTAINER WIDTH ──────────────────────────────*/
/* 92% of viewport up to 1400px — no fixed side padding hack     */
.av-hero-card {
    max-width: 1400px !important;
    width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
}

/* ── RULE 8: BUTTON COLOR CONSISTENCY ──────────────────────── */
/* Belt-and-suspenders: every primary button gets white text     */
.btn-primary,
button.btn-primary,
a.btn-primary,
input[type="submit"].btn-primary {
    background: rgb(221, 25, 0) !important;
    background-image: linear-gradient(135deg, rgb(221, 25, 0), rgb(160, 18, 0)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: transparent !important;
}

.btn-primary:hover,
button.btn-primary:hover {
    background: rgb(185, 14, 0) !important;
    background-image: linear-gradient(135deg, rgb(200, 14, 0), rgb(130, 10, 0)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Kill the specific "red text on red bg" gradient-text bug      */
.btn-primary *,
.ra-cta-btn *,
.av-search-btn *,
.av-nav-cta *,
.sc-hiw-cta * {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
}

/* ── RULE 5: TESTIMONIALS CAROUSEL LOCK ────────────────────── */
/* .testi-section itself is overflow:visible (cards use rotate)  */
/* Only the inner .tc-viewport clips the sliding track           */
.testi-section {
    overflow: visible !important;
}

.tc-outer {
    overflow: visible !important;
    position: relative !important;
}

.tc-viewport {
    overflow: hidden !important;
}

/* ← sole clipping boundary */
.tc-track {
    display: flex !important;
    gap: 24px !important;
}

/* No absolute positioning on slides */
.tc-card {
    position: relative !important;
    /* NOT absolute */
    opacity: 1 !important;
    visibility: visible !important;
}

/* ── RULE 6: FOOTER LOCK ────────────────────────────────────── */
/* Last content section before footer: extra bottom padding so
   skyline background image has room to breathe                  */
.ra-cta-section {
    padding-bottom: 180px !important;
    /* footer skyline clearance */
}

footer,
.elegant-footer {
    position: relative !important;
    margin-top: 0 !important;
    z-index: 0 !important;
    /* footer is lowest layer — nothing appears over it */
    clear: both !important;
}

/* ── RULE 10: SCROLL ANIMATION SAFETY ──────────────────────── */
/* Enforce that no animation keyframe uses layout properties.    */
/* Existing animations must only touch opacity and transform.    */
/* Guard: prevent any inherited animation from shifting layout   */
.ra-reveal,
.ra-hidden,
.sc-in,
.sc-hidden,
.sc-visible,
.fade-left,
.fade-right {
    /* Guarantee these never affect box model */
    top: auto !important;
    margin-top: unset;
    /* don't override explicitly set margins */
    height: auto;
}

/* ── FINAL RULE: NO z-index > 999 ANYWHERE ─────────────────── */
/* Catch-all: anything using extremely high z-index values
   should be scoped to navbar/modal only — enumerated here       */
/* (nothing added — prevents accidental future additions)        */

/* ═══════════════════════════════════════════════════════════════
   END MASTER LAYOUT STABILIZER
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   VISUAL ISOLATION FIX — screenshot bug repair
   ═══════════════════════════════════════════════════════════════ */

/* 1. Testimonial section: solid white background — blocks CTA red
      from bleeding through when testi-section is overflow:visible  */
.testi-section {
    background: #ffffff !important;
    background-image: none !important;
    padding: 72px 0 80px !important;
    /* Isolation context: creates its own stacking layer */
    isolation: isolate;
}

/* 2. Testimonial cards: limit max-height so one long card
      (from rich-text DB content) can't push the carousel out of shape.
      The card is scrollable internally if text overflows.            */
.tc-card {
    max-height: 420px !important;
    overflow-y: auto !important;
    /* Scrollbar only appears when actually needed */
    overflow-x: hidden !important;
}

/* Scrollbar minimally styled so it doesn't look broken */
.tc-card::-webkit-scrollbar {
    width: 3px;
}

.tc-card::-webkit-scrollbar-thumb {
    background: rgba(221, 25, 0, .3);
    border-radius: 4px;
}

.tc-card::-webkit-scrollbar-track {
    background: transparent;
}

/* 3. Testimonial message: cap to 5 lines with ellipsis for cleaner cards */
.tc-msg {
    display: -webkit-box !important;
    -webkit-line-clamp: 5 !important;
    -webkit-box-orient: vertical !important;
    line-clamp: 5 !important;
    overflow: hidden !important;
    max-height: none !important;
    /* let line-clamp control height */
}

/* 4. CTA section: full isolation — background must not bleed upward */
.ra-cta-section {
    position: relative !important;
    isolation: isolate !important;
    margin-top: 0 !important;
    /* Ensure CTA starts fresh flush after testimonials */
}

/* 5. Footer: hard floor — always below everything */
footer.elegant-footer {
    position: relative !important;
    margin-top: 0 !important;
    clear: both !important;
    /* z-index intentionally low so sections never appear behind it */
    z-index: 1 !important;
}

/* 6. Prevent stacking context conflicts between sections */
.sc-hiw,
.ra-section,
.testi-section,
.ra-cta-section {
    /* Create isolated stacking contexts per section */
    isolation: isolate !important;
}

/* ═══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   PREMIUM REDESIGN BLOCK — FINAL AUTHORITY
   Global layout, Testimonials, Section A/B/C/D, Animations
   ══════════════════════════════════════════════════════════════════ */

/* ── GLOBAL SECTION SYSTEM ──────────────────────────────────────── */
.home-section {
    width: 100% !important;
    display: block !important;
    position: relative !important;
    margin: 0 !important;
    clear: both !important;
    /* No negative margins. No translateY for layout. */
}

.container-wrapper {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
    width: 100%;
}

/* ── TESTIMONIALS — Premium glassmorphism on red gradient ────────  */
.testi-section {
    background: linear-gradient(135deg, rgb(221, 25, 0) 0%, #7a0e0e 100%) !important;
    padding: 120px 0 160px !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate !important;
    margin: 0 !important;
}

/* Decorative blobs */
.testi-bg-blob {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.testi-bg-blob-1 {
    width: 520px;
    height: 520px;
    top: -200px;
    left: -120px;
}

.testi-bg-blob-2 {
    width: 420px;
    height: 420px;
    bottom: -160px;
    right: -80px;
}

/* Header text — white on dark bg */
.testi-section .ra-label {
    color: rgba(255, 255, 255, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.testi-section h2 {
    color: #ffffff !important;
}

.testi-section .ra-desc {
    color: rgba(255, 255, 255, 0.7) !important;
}

.testi-section .ra-section-head {
    margin-bottom: 48px !important;
}

/* Arrow buttons — glass style */
.tc-arrow {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background .25s, transform .25s !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.tc-arrow:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    transform: scale(1.1) !important;
}

/* Cards — white glassmorphism */
.tc-card {
    background: rgba(255, 255, 255, 0.97) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border-radius: 20px !important;
    max-height: 380px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.tc-card:hover {
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.25) !important;
    transform: rotate(0deg) translateY(-8px) scale(1.01) !important;
}

.tc-card::-webkit-scrollbar {
    width: 3px;
}

.tc-card::-webkit-scrollbar-thumb {
    background: rgba(221, 25, 0, .25);
    border-radius: 4px;
}

/* Card text */
.tc-msg {
    display: -webkit-box !important;
    -webkit-line-clamp: 5 !important;
    -webkit-box-orient: vertical !important;
    line-clamp: 5 !important;
    overflow: hidden !important;
    font-size: 14px !important;
    color: #444 !important;
    line-height: 1.7 !important;
    font-style: italic !important;
    margin-bottom: 20px !important;
}

.tc-stars {
    color: #f59e0b !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
}

.tc-user {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 16px !important;
}

.tc-user strong {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

.tc-user small {
    font-size: 12px !important;
    color: #888 !important;
}

.tc-initials {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
}

/* Dots */
.tc-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 36px !important;
}

.tc-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.4) !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: background .25s, width .25s !important;
}

.tc-dot.active {
    background: #ffffff !important;
    width: 24px !important;
    border-radius: 4px !important;
}


/* ── SECTION A — Why RoomAdda Works Better ──────────────────────── */
.ra-why-section {
    padding: 120px 0 !important;
    background: #f8f9fb !important;
    position: relative !important;
}

.ra-why-h2 {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin-bottom: 0 !important;
}

.ra-why-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
}

.ra-why-card {
    background: #ffffff !important;
    border-radius: 24px !important;
    padding: 40px 32px !important;
    text-align: center !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #f0eded !important;
    transition: transform .32s cubic-bezier(.22, .61, .36, 1), box-shadow .32s !important;
    /* Reveal animation */
    opacity: 0;
    transform: translateY(40px);
}

.ra-why-card.sc-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.ra-why-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 16px 48px rgba(221, 25, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

.ra-why-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, rgb(221, 25, 0), #9a0e0e);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    margin: 0 auto 28px;
    box-shadow: 0 6px 24px rgba(221, 25, 0, 0.3);
}

.ra-why-card h3 {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 12px !important;
}

.ra-why-card p {
    font-size: 14px !important;
    color: #666 !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

@media (max-width: 900px) {
    .ra-why-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 580px) {
    .ra-why-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ── SECTION B — Explore Bangalore Living ───────────────────────── */
.ra-explore-section {
    padding: 120px 0 !important;
    background: #ffffff !important;
    position: relative !important;
}

.ra-explore-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 72px !important;
    align-items: center !important;
}

.ra-explore-img {
    border-radius: 28px !important;
    overflow: hidden !important;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.14) !important;
    position: relative !important;
}

.ra-explore-img img {
    width: 100% !important;
    height: 520px !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform .7s cubic-bezier(.22, .61, .36, 1) !important;
}

.ra-explore-img:hover img {
    transform: scale(1.04) !important;
}

.ra-explore-img-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(8px);
}

.ra-explore-img-badge span {
    font-weight: 400;
    color: #666;
    font-size: 12px;
}

.ra-explore-h2 {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
}

.ra-explore-sub {
    color: #666 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: 36px !important;
}

.ra-explore-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 18px !important;
    padding: 18px 20px !important;
    border-radius: 16px !important;
    transition: background .25s, transform .25s !important;
    margin-bottom: 10px !important;
    cursor: default !important;
}

.ra-explore-item:hover {
    background: #fff4f2 !important;
    transform: translateX(8px) !important;
}

.ra-explore-item-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgb(221, 25, 0), #9a0e0e);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(221, 25, 0, 0.25);
}

.ra-explore-item-body strong {
    display: block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 3px !important;
}

.ra-explore-item-body p {
    font-size: 13px !important;
    color: #777 !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

.ra-explore-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 28px !important;
    background: linear-gradient(135deg, rgb(221, 25, 0), #9a0e0e) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 14px 32px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    box-shadow: 0 6px 24px rgba(221, 25, 0, 0.3) !important;
    transition: transform .25s, box-shadow .25s !important;
}

.ra-explore-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 36px rgba(221, 25, 0, 0.4) !important;
    color: #fff !important;
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .ra-explore-inner {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .ra-explore-img img {
        height: 280px !important;
    }
}


/* ── SECTION C — Trust Badge Strip ─────────────────────────────── */
.ra-trust-strip {
    padding: 64px 0 !important;
    background: linear-gradient(135deg, #0f0f0f 0%, #1c1c1c 100%) !important;
    position: relative !important;
}

.ra-trust-badges {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
}

.ra-trust-badge {
    text-align: center !important;
    color: #fff !important;
    padding: 0 16px !important;
}

.ra-trust-badge:nth-child(1) {
    animation: ra-float 3.2s ease-in-out infinite;
}

.ra-trust-badge:nth-child(3) {
    animation: ra-float 3.2s ease-in-out infinite .6s;
}

.ra-trust-badge:nth-child(5) {
    animation: ra-float 3.2s ease-in-out infinite 1.2s;
}

.ra-trust-badge:nth-child(7) {
    animation: ra-float 3.2s ease-in-out infinite 1.8s;
}

@keyframes ra-float {

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

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

.ra-trust-divider {
    width: 1px;
    height: 60px;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.ra-trust-stars {
    color: #f59e0b !important;
    font-size: 20px !important;
    margin-bottom: 6px !important;
}

.ra-trust-icon {
    color: rgb(221, 25, 0) !important;
    font-size: 28px !important;
    margin-bottom: 8px !important;
}

.ra-trust-badge strong {
    display: block !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
}

.ra-trust-badge span {
    display: block !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    margin-top: 4px !important;
}

@media (max-width: 640px) {
    .ra-trust-divider {
        display: none !important;
    }

    .ra-trust-badges {
        gap: 32px !important;
    }
}


/* ── SECTION D — Premium Final CTA ─────────────────────────────── */
.ra-cta-premium {
    padding: 100px 0 120px !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 !important;
    isolation: isolate !important;
}

/* Override previous CTA rules for premium redesign */
.ra-cta-premium .ra-cta-bg {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: scroll !important;
    /* NO fixed — prevents bleed */
    z-index: 0 !important;
    opacity: 0.18 !important;
    /* subtle — gradient overlay dominates */
}

.ra-cta-premium .ra-cta-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgb(221, 25, 0) 0%, #5a0800 100%) !important;
    z-index: 1 !important;
}

.ra-cta-premium .ra-cta-inner {
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
    color: #fff !important;
}

.ra-cta-eyebrow {
    display: inline-block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    margin-bottom: 16px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    padding: 5px 16px !important;
    border-radius: 50px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.ra-cta-premium h2 {
    font-size: 48px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.12 !important;
    margin-bottom: 16px !important;
}

.ra-cta-premium p {
    font-size: 17px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 0 !important;
}

.ra-cta-actions {
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin-top: 40px !important;
}

.ra-cta-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    color: rgb(221, 25, 0) !important;
    -webkit-text-fill-color: rgb(221, 25, 0) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 15px 36px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important;
    transition: transform .25s, box-shadow .25s !important;
}

.ra-cta-btn-primary:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.35) !important;
    color: rgb(200, 14, 0) !important;
    -webkit-text-fill-color: rgb(200, 14, 0) !important;
    text-decoration: none !important;
}

.ra-cta-btn-secondary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 14px 36px !important;
    border-radius: 50px !important;
    border: 2px solid rgba(255, 255, 255, 0.55) !important;
    text-decoration: none !important;
    transition: background .25s, border-color .25s, transform .25s !important;
}

.ra-cta-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: #fff !important;
    transform: translateY(-3px) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-decoration: none !important;
}

@media (max-width: 640px) {
    .ra-cta-premium h2 {
        font-size: 30px !important;
    }

    .ra-cta-actions {
        flex-direction: column !important;
        align-items: center !important;
    }
}


/* ── MICRO-ANIMATION: Scroll reveal for new sections ────────────── */
/* ra-why-card uses its own sc-in / sc-visible tied to observer JS */
/* ra-explore-item: staggered slide-in from left */
.ra-explore-item.sc-in {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity .6s, transform .6s;
}

.ra-explore-item.sc-visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.ra-explore-item:nth-child(2) {
    transition-delay: .12s !important;
}

.ra-explore-item:nth-child(3) {
    transition-delay: .24s !important;
}

/* ra-explore-img: fade + rise-in from below */
.ra-explore-img.sc-in {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .7s, transform .7s;
}

.ra-explore-img.sc-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ra-why-card stagger */
.ra-why-card {
    transition-delay: 0s !important;
}

.ra-why-card:nth-child(2) {
    transition-delay: .12s !important;
}

.ra-why-card:nth-child(3) {
    transition-delay: .24s !important;
}

/* ── FOOTER: guaranteed below everything ────────────────────────── */
.elegant-footer,
footer.elegant-footer {
    position: relative !important;
    margin-top: 0 !important;
    z-index: 0 !important;
    clear: both !important;
    padding-top: 120px !important;
    background-position: center top !important;
}

/* ══════════════════════════════════════════════════════════════════
   END PREMIUM REDESIGN BLOCK
   ══════════════════════════════════════════════════════════════════ */


/* ██████████████████████████████████████████████████████████████████
   LAYOUT AUTHORITY BLOCK — v3 (STRUCTURE REPAIR)
   Fixes: hero zoom, journey height, testimonial visibility,
   CTA/footer collision, empty grey blocks, stacking order.
   Appended last → wins cascade. DO NOT add rules below.
   ██████████████████████████████████████████████████████████████████ */


/* ── GLOBAL: Every major section is a normal-flow block ───────────── */
/* NO position:absolute, NO negative margins, NO translateY hacks.   */
.sc-discovery,
.sc-featured,
.sc-hiw,
.ra-section,
.home-section,
.ra-why-section,
.ra-explore-section,
.ra-trust-strip,
.ra-cta-section {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    clear: both !important;
    /* height auto — shrink to content, never giant empty blocks */
    height: auto !important;
}


/* ━━━━━ 1. HERO — zoomed-in floating rounded card ━━━━━━━━━━━━━━━━ */
.av-canvas {
    padding: 40px 40px 0 !important;
    background: #f0f2f8 !important;
}

.av-hero-card {
    max-width: 1400px !important;
    margin: 0 auto !important;
    border-radius: 32px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06) !important;
    background: #fff !important;
}

.av-right {
    min-height: 560px !important;
    position: relative !important;
    overflow: hidden !important;
    background: #111 !important;
}

.av-canvas.nav-stuck {
    padding-top: 74px !important;
}


/* ━━━━━ 2. BROWSE FILTERS + STATS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sc-discovery {
    background: #fff !important;
    padding: 48px 0 24px !important;
    margin-top: 0 !important;
}


/* ━━━━━ 3. FEATURED PROPERTIES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sc-featured {
    background: #f3f4f6 !important;
    padding: 80px 0 !important;
    margin-top: 0 !important;
}


/* ━━━━━ 4. YOUR JOURNEY TO THE PERFECT PG — compact card ━━━━━━━━━ */
.sc-hiw {
    max-width: 1100px !important;
    margin: 80px auto !important;
    padding: 56px 40px !important;
    border-radius: 28px !important;
    background: #fff !important;
    box-shadow: 0 4px 32px rgba(0, 0, 0, .06) !important;
}

.sc-hiw-track {
    gap: 24px !important;
}


/* ━━━━━ 5. EVERYTHING YOU NEED (amenities) ━━━━━━━━━━━━━━━━━━━━━━ */
#amenitiesSection {
    background: #111111 !important;
    padding: 80px 24px !important;
}

#amenitiesSection h2 {
    color: #ffffff !important;
}

#amenitiesSection .ra-desc {
    color: #a0a0a0 !important;
}

#amenitiesSection .ra-am-card {
    background: #1a1a1a !important;
    border-color: #333 !important;
}

#amenitiesSection .ra-am-body h4 {
    color: #ffffff !important;
}

#amenitiesSection .ra-am-body p {
    color: #a0a0a0 !important;
}


/* ━━━━━ 6. TESTIMONIALS — FULLY VISIBLE, RED GRADIENT ━━━━━━━━━━━━ */
/* CRITICAL: overflow MUST be visible so carousel cards render.     */
/* The inner .tc-viewport clips the sliding track, not the section. */
.testi-section {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    background: var(--grad-dark) !important;
    /* premium dark red gradient to blend in */
    border-radius: 0 !important;
    /* full-width, no floating card */
    padding: 48px 48px 52px !important;
    /* was 100px top, 120px bottom */
    overflow: hidden !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    clip: auto !important;
    clip-path: none !important;
}

/* Inner wrapper max-width */
.testi-section .container-wrapper,
.testi-section>.container-wrapper {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* ── Carousel innards: tc-outer → tc-viewport → tc-track → tc-card */
.testi-section .tc-outer {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    overflow: visible !important;
    position: relative !important;
    min-height: 280px !important;
}

.testi-section .tc-viewport {
    flex: 1 !important;
    overflow: hidden !important;
    /* expand clipping border using padding framework */
    padding: 40px 24px !important;
    margin: -40px -24px !important;
    position: relative !important;
}

.testi-section .tc-track {
    display: flex !important;
    align-items: flex-start !important;
    /* ← cards don't stretch to tallest */
    gap: 28px !important;
    transition: transform .42s cubic-bezier(.4, 0, .2, 1) !important;
    will-change: transform !important;
    min-height: unset !important;
    /* let content dictate height */
}

/* Cards: 3 per row, always visible, white rounded */
.testi-section .tc-card,
.testi-section .tc-card.sc-in,
.testi-section .tc-card.sc-in.sc-hidden,
.testi-section .tc-card.sc-in.sc-visible {
    flex: 0 0 calc((100% - 56px) / 3) !important;
    min-width: 300px !important;
    background: rgba(255, 255, 255, .97) !important;
    border-radius: 24px !important;
    padding: 32px 30px 28px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .08) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: rotate(var(--rot, 0deg)) !important;
    position: relative !important;
    overflow: visible !important;
    height: auto !important;
    /* only as tall as content */
    min-height: unset !important;
    max-height: none !important;
}

.testi-section .tc-card:hover {
    transform: rotate(0deg) translateY(-8px) !important;
    /* no scale — prevents clipping */
    box-shadow: 0 20px 56px rgba(0, 0, 0, .25) !important;
}

/* Stars, message, user — force white text context */
.testi-section .tc-stars {
    color: #f59e0b !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
}

.testi-section .tc-msg {
    display: block !important;
    /* unclamped — show full quote */
    -webkit-line-clamp: unset !important;
    font-size: 15px !important;
    /* slightly bigger */
    color: #3a3a3a !important;
    line-height: 1.75 !important;
    font-style: italic !important;
    margin-bottom: 20px !important;
}

/* Arrow buttons */
.testi-section .tc-arrow {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .15) !important;
    border: 1.5px solid rgba(255, 255, 255, .35) !important;
    color: #fff !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    backdrop-filter: blur(8px) !important;
}

/* Dots */
.testi-section .tc-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 36px !important;
}

.testi-section .tc-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .4) !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
}

.testi-section .tc-dot.active {
    background: #fff !important;
    width: 24px !important;
    border-radius: 4px !important;
}

/* Heading text on dark bg */
.testi-section .ra-label {
    color: rgba(255, 255, 255, .75) !important;
}

.testi-section h2 {
    color: #fff !important;
}

.testi-section .ra-desc {
    color: rgba(255, 255, 255, .7) !important;
}

.testi-section .ra-section-head {
    margin-bottom: 48px !important;
}


/* ━━━━━ 7. WHY ROOMADDA WORKS BETTER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ra-why-section {
    padding: 100px 0 !important;
    background: #ffffff !important;
}

.ra-explore-section {
    padding: 100px 0 !important;
    background: #f4f6f9 !important;
    /* Premium subtle cool-grey */
}

/* Revert text colors for the light explore section */
.ra-explore-section h2,
.ra-explore-section strong {
    color: #111111 !important;
}

.ra-explore-section p:not(.ra-label) {
    color: #444444 !important;
}

.ra-explore-section .ra-label {
    color: var(--ra) !important;
}

.ra-explore-item {
    background: #ffffff !important;
    border: 1px solid #e6e9ee !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.ra-explore-item:hover {
    background: #ffffff !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
}


/* ━━━━━ 8. DARK STATS BAR (trust strip) — no overlap ━━━━━━━━━━━━━ */
.ra-trust-strip {
    margin-top: 0 !important;
    padding: 60px 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #0a0a0a 0%, #1c1c1c 100%) !important;
    z-index: 1 !important;
}


/* ━━━━━ 9. CTA — floating rounded card, ABOVE footer ━━━━━━━━━━━━━ */
.ra-cta-section.ra-cta-premium {
    max-width: 1200px !important;
    margin: 120px auto 160px !important;
    padding: 80px 60px !important;
    border-radius: 36px !important;
    overflow: hidden !important;
    position: relative !important;
    isolation: isolate !important;
}

.ra-cta-premium .ra-cta-bg {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: scroll !important;
    z-index: 0 !important;
    opacity: 0.18 !important;
}


/* ━━━━━ 10. FOOTER — hard stabilizer ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
footer,
footer.elegant-footer,
.elegant-footer {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    clear: both !important;
    /* NO absolute, NO negative margins, NO translateY */
}

/* Kill footer bridge entirely */
.ra-footer-bridge {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ━━━━━ RESPONSIVE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
    .av-canvas {
        padding: 16px 16px 0 !important;
    }

    .av-hero-card {
        border-radius: 20px !important;
    }

    .sc-hiw {
        margin: 48px 16px !important;
        padding: 40px 24px !important;
        border-radius: 20px !important;
    }

    .testi-section {
        margin-top: 60px !important;
        margin-bottom: 60px !important;
        border-radius: 20px !important;
        padding: 64px 24px 80px !important;
    }

    .testi-section .tc-card,
    .testi-section .tc-card.sc-in,
    .testi-section .tc-card.sc-in.sc-hidden {
        flex: 0 0 calc((100% - 24px) / 2) !important;
    }

    .ra-cta-section.ra-cta-premium {
        margin: 60px 16px 80px !important;
        padding: 56px 24px !important;
        border-radius: 24px !important;
    }
}

@media (max-width: 640px) {

    .testi-section .tc-card,
    .testi-section .tc-card.sc-in,
    .testi-section .tc-card.sc-in.sc-hidden {
        flex: 0 0 100% !important;
    }
}

@media (max-width: 480px) {
    .av-canvas {
        padding: 10px 10px 0 !important;
    }

    .av-hero-card {
        border-radius: 16px !important;
    }

    .testi-section {
        border-radius: 16px !important;
    }

    .ra-cta-section.ra-cta-premium {
        border-radius: 16px !important;
    }
}

/* ██████████████████████████████████████████████████████████████████
   END LAYOUT AUTHORITY BLOCK v3
   ██████████████████████████████████████████████████████████████████ */


/* ██████████████████████████████████████████████████████████████████
   LAYOUT AUTHORITY BLOCK v4  — FINAL STRUCTURAL FIX
   Goal: stable vertical flow, no clipping, compact sections, clean spacing.
   Rules: no negative margins, no translateY for layout, position:relative
   on sections, height:auto everywhere, spacing via margin-top only.
   ██████████████████████████████████████████████████████████████████ */


/* ── 1. GLOBAL SECTION FLOW ──────────────────────────────────────── */

/* Every section is a normal document block. No transforms, no absolutes. */
.sc-discovery,
.sc-featured,
.sc-hiw,
.ra-section,
.home-section,
.testi-section,
.ra-why-section,
.ra-explore-section,
.ra-trust-strip {
    display: block !important;
    position: relative !important;
    height: auto !important;
    transform: none !important;
}

/* CTA section handled separately in section 6 (needs display:flex) */
.ra-cta-section {
    position: relative !important;
    height: auto !important;
    transform: none !important;
}

/* Uniform top spacing for all sections below the hero canvas */
.sc-discovery {
    margin-top: 0 !important;
}

/* flush under hero     */
.sc-featured {
    margin-top: 48px !important;
}

.sc-hiw {
    margin-top: 48px !important;
}

.ra-section {
    margin-top: 48px !important;
}

.home-section {
    margin-top: 48px !important;
}

/* Prevent double-stacking specificity (why / explore / trust sit inside home-section) */
.ra-why-section,
.ra-explore-section,
.ra-trust-strip {
    margin-top: 0 !important;
}

/* already inside home-section spacing */

/* Zero bottom margin everywhere — spacing only from next section's margin-top */
.sc-discovery,
.sc-featured,
.sc-hiw,
.ra-section,
.home-section {
    margin-bottom: 0 !important;
}


/* ── 2. HERO — FIT SCREEN, ROUNDED CARD ─────────────────────────── */

/* Canvas: slim padding so hero card doesn't look zoomed out */
.av-canvas {
    background: #f0f2f8;
    padding: 14px 16px 0 !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Floating card: constrained, rounded */
.av-hero-card {
    max-width: 1400px !important;
    margin: 0 auto !important;
    border-radius: 28px !important;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .10), 0 2px 8px rgba(0, 0, 0, .06);
}

/* Hero body: auto height — let content define it, no forced tall stretch */
.av-hero-body {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    min-height: auto !important;
    /* natural height from largest side */
}

/* Left pane: balanced compact padding */
.av-left {
    padding: 44px 48px 44px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Heading: readable, no overflow */
.av-h1 {
    font-size: 44px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Right image pane: fills grid cell naturally */
.av-right {
    position: relative !important;
    overflow: hidden;
    min-height: 480px;
    /* image side should be at least this tall */
}

.av-main-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    /* no forced scale — let border-radius and overflow handle the crop */
    transform: scale(1.04) !important;
    object-position: center 30%;
}

/* Responsive: stack on tablet */
@media (max-width: 1024px) {
    .av-hero-body {
        grid-template-columns: 1fr !important;
    }

    .av-right {
        min-height: 320px;
    }

    .av-left {
        padding: 36px 32px !important;
    }

    .av-h1 {
        font-size: 34px !important;
    }
}

@media (max-width: 640px) {
    .av-canvas {
        padding: 10px 10px 0 !important;
    }

    .av-hero-card {
        border-radius: 18px !important;
    }

    .av-left {
        padding: 28px 20px 32px !important;
    }

    .av-h1 {
        font-size: 28px !important;
    }

    .av-right {
        min-height: 240px;
    }
}


/* ── 3. JOURNEY (sc-hiw) — COMPACT, NOT TALL ────────────────────── */

.sc-hiw {
    background: #fff;
    padding: 60px 0 !important;
    overflow: hidden;
}

.sc-hiw-head {
    text-align: center;
    margin-bottom: 48px !important;
}

/* Cards: tighter image and body */
.sc-hiw-img {
    height: 220px !important;
    overflow: hidden;
}

.sc-hiw-body {
    padding: 28px 28px !important;
}

/* Large step numbers: slightly smaller */
.sc-hiw-num {
    font-size: 42px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.sc-hiw-num-wrap {
    margin-bottom: 14px !important;
}

.sc-hiw-glow {
    width: 56px !important;
    height: 56px !important;
}

/* Connector lines between steps */
.sc-hiw-connector {
    padding: 12px 0 !important;
}

.sc-hiw-line {
    height: 32px !important;
}

@media (max-width: 640px) {
    .sc-hiw {
        padding: 44px 0 !important;
    }

    .sc-hiw-head {
        margin-bottom: 32px !important;
    }

    .sc-hiw-img {
        height: 180px !important;
    }

    .sc-hiw-body {
        padding: 20px 16px !important;
    }
}


/* ── 4. TESTIMONIALS — FIX CLIPPING ─────────────────────────────── */

.testi-section {
    background: linear-gradient(160deg, #fff 0%, #fdf0f0 100%);
    padding: 72px 0 88px !important;
    overflow: visible !important;
    /* CRITICAL: rotated cards must not be clipped */
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
    z-index: 1;
}

/* Decorative blobs: no scroll contributions */
.testi-bg-blob {
    pointer-events: none;
    overflow: hidden;
}

/* Container inside testimonials */
.testi-section .container-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px;
}

/* Carousel outer: arrows + viewport row */
.tc-outer {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    position: relative;
    margin-bottom: 24px !important;
    overflow: visible !important;
}

/* Viewport: clip horizontally, allow vertical overflow for rotated cards */
.tc-viewport {
    flex: 1 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    position: relative;
}

/* Track: horizontal flex slide */
.tc-track {
    display: flex !important;
    gap: 24px !important;
    transition: transform .42s cubic-bezier(.4, 0, .2, 1) !important;
    will-change: transform;
    overflow: visible !important;
    /* don't clip rotated children */
}

/* Individual card — preserve rotation, no hidden overflow to avoid clipping */
.tc-card {
    flex: 0 0 calc((100% - 48px) / 3) !important;
    min-width: 240px;
    background: #fff;
    border-radius: 20px !important;
    padding: 26px 24px !important;
    border: 1px solid rgba(221, 25, 0, .07);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05), 0 8px 28px rgba(0, 0, 0, .07);
    transform: rotate(var(--rot, 0deg)) !important;
    transition: transform .3s ease, box-shadow .3s ease !important;
    position: relative;
    overflow: hidden;
    /* only internal overflow hidden (for the quote watermark) */
    cursor: default;
}

.tc-card:hover {
    transform: rotate(0deg) translateY(-6px) scale(1.02) !important;
    box-shadow: 0 10px 32px rgba(221, 25, 0, .13) !important;
    z-index: 10;
}

/* Dots navigation */
.tc-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 28px !important;
    overflow: visible;
}

@media (max-width: 1023px) {
    .tc-card {
        flex: 0 0 calc((100% - 24px) / 2) !important;
    }

    .testi-section {
        padding: 60px 0 72px !important;
    }
}

@media (max-width: 639px) {
    .tc-card {
        flex: 0 0 100% !important;
        transform: rotate(0deg) !important;
        /* no tilt on mobile */
    }

    .testi-section {
        padding: 48px 0 60px !important;
    }
}


/* ── 5. WHY ROOMADDA — CLEAN WHITE SECTION ───────────────────────── */

.ra-why-section {
    background: #fff !important;
    padding: 72px 0 !important;
}

.ra-why-section .container-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px;
}

.ra-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 48px;
}

@media (max-width: 900px) {
    .ra-why-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}


/* ── 6. CTA SECTION — CLEAN, CENTERED, SPACED FROM FOOTER ───────── */

/* The CTA is a full-width section with a background image + overlay.
   We constrain the INNER content width, not the section itself. */
.ra-cta-section,
.ra-cta-section.ra-cta-premium {
    position: relative !important;
    display: flex !important;
    /* flex so absolutely-positioned bg fills correctly */
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 380px !important;
    /* CRITICAL: gives absolute children height to fill */
    padding: 0 !important;
    margin-top: 48px !important;
    margin-bottom: 80px !important;
    /* breathing room before footer */
    overflow: hidden !important;
    transform: none !important;
    border-radius: 0 !important;
    /* Ensure bg image and overlay render */
    background-color: #8B0000;
    /* dark red fallback if image fails */
}

/* CTA background and overlay stay correctly as absolute inset */
.ra-cta-bg {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    z-index: 0;
}

.ra-cta-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(180, 10, 0, .92) 0%, rgba(30, 8, 8, .88) 100%);
    z-index: 1;
}

/* Inner content: controlled width, centered, generous padding */
.ra-cta-inner {
    position: relative !important;
    z-index: 2 !important;
    max-width: 860px !important;
    width: 100%;
    margin: 0 auto !important;
    padding: 80px 32px !important;
    text-align: center;
    flex: 1;
    /* fill flex parent's height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ra-cta-eyebrow {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: rgba(255, 255, 255, .65);
    margin-bottom: 14px;
    display: block;
}

.ra-cta-inner h2 {
    font-size: 42px !important;
    font-weight: 800 !important;
    color: #fff !important;
    line-height: 1.15 !important;
    margin-bottom: 14px;
}

.ra-cta-inner p {
    font-size: 16px !important;
    color: rgba(255, 255, 255, .8) !important;
    margin-bottom: 36px;
}

.ra-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ra-cta-btn-primary,
.ra-cta-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    text-decoration: none !important;
    transition: transform .22s ease, box-shadow .22s ease;
    white-space: nowrap;
}

.ra-cta-btn-primary {
    background: #fff !important;
    color: rgb(180, 10, 0) !important;
    -webkit-text-fill-color: rgb(180, 10, 0) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}

.ra-cta-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .30);
    background: #f5f5f5 !important;
    color: rgb(160, 10, 0) !important;
    -webkit-text-fill-color: rgb(160, 10, 0) !important;
    text-decoration: none !important;
}

.ra-cta-btn-secondary {
    background: transparent !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 2px solid rgba(255, 255, 255, .6) !important;
}

.ra-cta-btn-secondary:hover {
    background: rgba(255, 255, 255, .14) !important;
    border-color: #fff !important;
    transform: translateY(-2px);
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .ra-cta-inner {
        padding: 60px 24px !important;
    }

    .ra-cta-inner h2 {
        font-size: 28px !important;
    }

    .ra-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ra-cta-btn-primary,
    .ra-cta-btn-secondary {
        text-align: center;
        justify-content: center;
    }

    .ra-cta-section,
    .ra-cta-section.ra-cta-premium {
        margin-bottom: 48px !important;
    }
}


/* ── 7. FOOTER BRIDGE — ALWAYS HIDDEN ───────────────────────────── */

.ra-footer-bridge {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ── 8. FOOTER — NATURAL FLOW, NO OVERLAPS ───────────────────────── */

footer,
.elegant-footer {
    position: relative !important;
    display: block !important;
    clear: both !important;
    margin-top: 0 !important;
    transform: none !important;
    /* No z-index — natural stacking order handles it */
}


/* ── 9. DISCOVERY SECTION — FLUSH UNDER HERO ────────────────────── */

.sc-discovery {
    margin-top: 0 !important;
    background: #fff;
    position: relative;
    z-index: 1;
}

/* Gradient fade connecting discovery to hero canvas */
.sc-discovery::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: linear-gradient(to bottom, #f0f2f8, transparent);
    pointer-events: none;
    z-index: 0;
}


/* ── 10. AMENITIES — SOFT TINTED BACKGROUND ─────────────────────── */

section.ra-section:has(.ra-amenity-grid) {
    background: linear-gradient(180deg, #f8f9fd 0%, #f0f2f8 100%) !important;
    border-radius: 0 !important;
}


/* ── 11. CONTAINER WRAPPERS — ALWAYS CENTRED ────────────────────── */

.container-wrapper {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 28px;
    padding-right: 28px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    .container-wrapper {
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* ██████████████████████████████████████████████████████████████████
   END LAYOUT AUTHORITY BLOCK v4
   ██████████████████████████████████████████████████████████████████ */


/* ██████████████████████████████████████████████████████████████████
   LAYOUT AUTHORITY BLOCK v5  — COMPACT SPACING + POLISH
   Goal: Reduce excess padding, tighten vertical rhythm, fix compactness.
   Strategy: Override v4 paddings where sections were still too tall.
   NO layout order changes. NO new wrappers. NO hacks.
   ██████████████████████████████████████████████████████████████████ */


/* ── 1. GLOBAL COMPACT VERTICAL RHYTHM ───────────────────────────── */

/* Reduce uniform spacing from 48px → 70px is FINE. But actual section
   PADDING was still 60-96px causing excess height. Tighten them all.  */

/* All mid-page sections: uniform top gap */
.sc-featured,
.sc-hiw,
.ra-section,
.home-section {
    margin-top: 70px !important;
}

/* First section: always flush under hero canvas */
.sc-discovery {
    margin-top: 0 !important;
}

/* CTA and footer handled individually below */

/* Kill all large explicit section paddings that create empty grey blocks */
.sc-discovery {
    padding: 44px 0 24px !important;
}

.sc-featured {
    padding: 52px 0 44px !important;
}

.sc-hiw {
    padding: 0 0 !important;
}

/* Journey uses card padding */
.ra-section {
    padding: 56px 0 !important;
}

.testi-section {
    padding: 70px 0 80px !important;
}

.ra-why-section {
    padding: 60px 0 !important;
}

.ra-explore-section {
    padding: 0 !important;
}

.ra-trust-strip {
    padding: 0 !important;
}

/* h2 tighter */
.sc-h2,
.ra-section-head h2,
.ra-why-h2,
.ra-explore-h2 {
    margin-bottom: 16px !important;
}


/* ── 2. HERO — COMPACT ROUNDED CARD ─────────────────────────────── */

/* Canvas: tight top padding — card should feel "parked" at top */
.av-canvas {
    padding: 16px 16px 0 !important;
}

/* Card: stays at 1400px, rounded 28px, no height forcing */
.av-hero-card {
    max-width: 1400px !important;
    margin: 0 auto !important;
    border-radius: 28px !important;
    overflow: hidden;
}

/* Hero body: auto height, equal two-column */
.av-hero-body {
    min-height: auto !important;
    grid-template-columns: 1fr 1fr !important;
}

/* Left pane: reduce padding to 40px */
.av-left {
    padding: 40px 44px 40px !important;
}

/* Heading: compact */
.av-h1 {
    font-size: 42px !important;
    line-height: 1.1 !important;
    margin-bottom: 12px !important;
}

.av-tagline {
    margin-bottom: 22px !important;
}

/* Search card: tighter padding inside */
.av-search-card {
    padding: 18px 18px 16px !important;
    margin-bottom: 22px !important;
    border-radius: 16px !important;
}

/* Search form: slightly more compact */
.av-form-row {
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.av-field input,
.av-field select {
    padding: 10px 12px !important;
    font-size: 13px !important;
}

/* Trust row: less top spacing */
.av-trust {
    padding-top: 10px !important;
    margin-top: 2px !important;
}

.av-avatar-row {
    margin-top: 14px !important;
}

/* Right image: min-height reduced but still looks full */
.av-right {
    min-height: 440px !important;
}

@media (max-width: 1024px) {
    .av-left {
        padding: 32px 28px !important;
    }

    .av-h1 {
        font-size: 32px !important;
    }

    .av-right {
        min-height: 300px !important;
    }
}

@media (max-width: 640px) {
    .av-canvas {
        padding: 10px 10px 0 !important;
    }

    .av-left {
        padding: 24px 18px 28px !important;
    }

    .av-h1 {
        font-size: 26px !important;
    }

    .av-right {
        min-height: 220px !important;
    }
}


/* ── 3. JOURNEY — COMPACT HORIZONTAL STEPS ───────────────────────── */

/* Wrap the journey steps in a visually distinct card area */
.sc-hiw {
    background: transparent !important;
    /* canvas bg shows */
}

/* Use a scoped max-width wrapper on the container inside */
.sc-hiw .sc-container {
    max-width: 1100px !important;
}

/* Journey section head stays centered */
.sc-hiw-head {
    margin-bottom: 36px !important;
    padding: 0 !important;
}

/* Steps: each step card stays card-like but tighter */
.sc-hiw-card {
    grid-template-columns: 280px 1fr !important;
    max-width: 720px !important;
    border-radius: 20px !important;
}

.sc-hiw-img {
    height: 200px !important;
}

.sc-hiw-body {
    padding: 24px 24px !important;
}

.sc-hiw-body h3 {
    font-size: 20px !important;
    margin-bottom: 8px !important;
}

.sc-hiw-body p {
    font-size: 13px !important;
    margin-bottom: 14px !important;
}

.sc-hiw-num {
    font-size: 38px !important;
}

.sc-hiw-num-wrap {
    margin-bottom: 10px !important;
}

.sc-hiw-glow {
    width: 50px !important;
    height: 50px !important;
}

/* Connector between steps: even tighter */
.sc-hiw-connector {
    padding: 8px 0 !important;
}

.sc-hiw-line {
    height: 28px !important;
}

/* Wrap the entire track in a light card look */
.sc-hiw-track {
    background: #f8f9fd;
    border-radius: 28px;
    padding: 40px 36px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}

@media (max-width: 900px) {
    .sc-hiw-card {
        grid-template-columns: 1fr !important;
        max-width: 480px !important;
    }

    .sc-hiw-track {
        padding: 28px 20px !important;
        border-radius: 20px;
    }
}

@media (max-width: 640px) {
    .sc-hiw-track {
        padding: 20px 14px !important;
        border-radius: 16px;
    }

    .sc-hiw-card {
        max-width: 100% !important;
    }

    .sc-hiw-body {
        padding: 18px 16px !important;
    }
}


/* ── 4. TESTIMONIALS — STABLE AND CORRECT ───────────────────────── */

.testi-section {
    margin-top: 90px !important;
    padding: 70px 0 80px !important;
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
}

.tc-viewport {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

.tc-track {
    overflow: visible !important;
}

.tc-card {
    border-radius: 18px !important;
    padding: 24px 22px !important;
}

.tc-dots {
    margin-top: 24px !important;
}

@media (max-width: 1023px) {
    .testi-section {
        padding: 56px 0 68px !important;
    }
}

@media (max-width: 639px) {
    .testi-section {
        margin-top: 60px !important;
        padding: 44px 0 56px !important;
    }
}


/* ── 5. CTA SECTION — FULL WIDTH, SEAMLESSLY ADJOINED ───────────────── */

/* The CTA section is full-bleed with a bg image + overlay.
   Removed margins and border-radius to seamlessly connect to footer. */
.ra-cta-section,
.ra-cta-section.ra-cta-premium {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    margin-top: 0 !important;
    /* Touch the section above */
    margin-bottom: 0 !important;
    /* Touch the footer below */
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    /* Full width */
    border-radius: 0 !important;
    /* Seamless edges */
    overflow: hidden !important;
    min-height: 380px !important;
    padding: 0 !important;
    transform: none !important;
    background-color: #8B0000 !important;
    /* fallback */
}

/* Inner content: compact padding */
.ra-cta-inner {
    position: relative !important;
    z-index: 2 !important;
    max-width: 800px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 80px 32px !important;
    text-align: center;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.ra-cta-eyebrow {
    font-size: 11px !important;
    letter-spacing: 2.5px;
    margin-bottom: 16px !important;
    text-transform: uppercase;
}

.ra-cta-inner h2 {
    font-size: 42px !important;
    margin-bottom: 16px !important;
    line-height: 1.15 !important;
}

.ra-cta-inner>p {
    font-size: 16px !important;
    margin-bottom: 36px !important;
    color: rgba(255, 255, 255, .8) !important;
}

/* Removed duplicate absolute layers for CTA */

@media (max-width: 768px) {

    .ra-cta-section,
    .ra-cta-section.ra-cta-premium {
        min-height: auto !important;
    }

    .ra-cta-inner {
        padding: 60px 24px !important;
    }

    .ra-cta-inner h2 {
        font-size: 32px !important;
    }
}



/* ── 6. FOOTER — ABSOLUTE LOCK ───────────────────────────────────── */

footer,
.elegant-footer {
    position: relative !important;
    display: block !important;
    clear: both !important;
    margin-top: 0 !important;
    transform: none !important;
    z-index: 1 !important;
}

/* Bridge: permanently gone */
.ra-footer-bridge {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ── 7. DISCOVERY PILLS — COMPACT ───────────────────────────────── */

.sc-pills-wrap {
    margin-bottom: 28px !important;
}

.sc-stat-row {
    padding-bottom: 8px !important;
}

.sc-stat-card {
    padding: 22px 18px !important;
}

.sc-stat-num {
    font-size: 24px !important;
}


/* ── 8. FEATURED CAROUSEL — TIGHTER ────────────────────────────── */

.sc-section-head {
    margin-bottom: 28px !important;
}

.sc-card {
    width: 270px !important;
}

.sc-card-img {
    height: 190px !important;
}

.sc-card-body {
    padding: 14px 16px !important;
}


/* ── 9. AMENITIES — COMPACT ─────────────────────────────────────── */

.ra-amenity-grid {
    margin-top: 36px !important;
    gap: 20px !important;
}

.ra-am-card img {
    height: 150px !important;
}

.ra-am-body {
    padding: 14px !important;
}

.ra-section-head {
    margin-bottom: 36px !important;
}


/* ── 10. WHY + EXPLORE — COMPACT ────────────────────────────────── */

.ra-why-grid {
    margin-top: 36px !important;
    gap: 22px !important;
}

.ra-why-card {
    padding: 28px 24px !important;
}

.ra-explore-inner {
    gap: 48px !important;
}


/* ── 11. TRUST STRIP — SLIM ─────────────────────────────────────── */

.ra-trust-badges {
    padding: 28px 0 !important;
}


/* ── 12. RESPONSIVE GLOBAL ──────────────────────────────────────── */

@media (max-width: 768px) {

    .sc-featured,
    .sc-hiw,
    .ra-section,
    .home-section {
        margin-top: 48px !important;
    }

    .testi-section {
        margin-top: 60px !important;
    }

    .sc-discovery {
        padding: 32px 0 16px !important;
    }
}

@media (max-width: 480px) {

    .sc-featured,
    .sc-hiw,
    .ra-section,
    .home-section {
        margin-top: 36px !important;
    }
}


/* ██████████████████████████████████████████████████████████████████
   END LAYOUT AUTHORITY BLOCK v5
   ██████████████████████████████████████████████████████████████████ */


/* ██████████████████████████████████████████████████████████████████
   FIT-SCREEN FIX — Hero fills full viewport width
   Remove grey canvas padding so hero card is edge-to-edge.
   ██████████████████████████████████████████████████████████████████ */

/* Canvas: flush sides, keep 16px top gap so hero card breathes below the fixed nav */
.av-canvas {
    padding: 16px 0 0 0 !important;
    background: #f0f2f8 !important;
}

/* Hero card: full width, no margin, keep border-radius only on bottom */
.av-hero-card {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 0 24px 24px !important;
    /* round only bottom corners */
    box-shadow: 0 4px 24px rgba(0, 0, 0, .08) !important;
}

/* Hero body: min-height from content, grid stays two-column */
.av-hero-body {
    min-height: auto !important;
    grid-template-columns: 1fr 1fr !important;
}

/* Left pane: comfortable padding */
.av-left {
    padding: 48px 52px 48px !important;
}

/* Right image pane: fill full card height */
.av-right {
    min-height: 500px !important;
}

/* Mobile: stack, restore slight side inset */
@media (max-width: 1024px) {
    .av-hero-body {
        grid-template-columns: 1fr !important;
    }

    .av-right {
        min-height: 300px !important;
    }

    .av-left {
        padding: 36px 28px !important;
    }
}

@media (max-width: 640px) {
    .av-hero-card {
        border-radius: 0 !important;
    }

    .av-left {
        padding: 28px 18px 32px !important;
    }

    .av-right {
        min-height: 220px !important;
    }
}

/* ██████████████████████████████████████████████████████████████████
   END FIT-SCREEN FIX
   ██████████████████████████████████████████████████████████████████ */


/* ██████████████████████████████████████████████████████████████████
   FIXED NAV — header always visible on scroll
   (position:sticky doesn't work inside overflow:hidden parent)
   ██████████████████████████████████████████████████████████████████ */

.av-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;

    /* Glass effect */
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08) !important;
}


/* ══════════════════════════════════════════════════════════════════
   TESTIMONIALS — FINAL DEFINITIVE FIX (card clipping + shadows)
   Placed last for highest CSS specificity / cascade priority.
   ══════════════════════════════════════════════════════════════════ */

/* Section: red gradient background, NO overflow hidden on section
   so that card shadows and hovers are never clipped at edges       */
section.testi-section,
section.testi-section.home-section,
section.testi-section.ra-section {
    background: linear-gradient(135deg, rgb(221, 25, 0) 0%, rgb(160, 18, 0) 100%) !important;
    overflow: visible !important;
    padding: 72px 0 80px !important;
    position: relative !important;
    isolation: isolate !important;
}

/* Outer wrapper: visible overflow so arrows + card shadows show    */
section.testi-section .tc-outer {
    overflow: visible !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}

/* Viewport: the ONLY element that clips the horizontal slide.
   Vertical padding gives room for card tilt/hover-lift without
   any horizontal padding that would break the card width calc.     */
section.testi-section .tc-viewport {
    flex: 1 !important;
    overflow: hidden !important;
    position: relative !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    margin-top: -20px !important;
    margin-bottom: -20px !important;
}

/* Track: horizontal flex, slides via JS translateX                 */
section.testi-section .tc-track {
    display: flex !important;
    gap: 28px !important;
    align-items: stretch !important;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1) !important;
    will-change: transform !important;
}

/* Cards: subtle tilt for a fun feel, equal height via flex column  */
section.testi-section .tc-card {
    flex: 0 0 calc((100% - 56px) / 3) !important;
    min-width: 260px !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 18px !important;
    padding: 30px 28px 24px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .14), 0 1px 4px rgba(0, 0, 0, .07) !important;
    transform: rotate(var(--rot, 0deg)) !important;
    transition: transform .3s ease, box-shadow .3s ease !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
}

section.testi-section .tc-card:hover {
    transform: rotate(0deg) translateY(-8px) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .22), 0 4px 12px rgba(0, 0, 0, .08) !important;
}

/* Quote watermark — subtle */
section.testi-section .tc-card::before {
    content: '\201C' !important;
    position: absolute !important;
    top: -8px !important;
    right: 16px !important;
    font-size: 100px !important;
    font-family: Georgia, serif !important;
    color: rgba(221, 25, 0, .06) !important;
    line-height: 1 !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* Stars */
section.testi-section .tc-stars {
    margin-bottom: 14px !important;
}

section.testi-section .tc-stars i {
    color: #f59e0b !important;
    font-size: 14px !important;
    filter: drop-shadow(0 0 2px rgba(245, 158, 11, .3)) !important;
}

/* Message text — allow full display, no clamp, auto-expanding card */
section.testi-section .tc-msg {
    font-size: 14px !important;
    color: #444 !important;
    line-height: 1.75 !important;
    font-style: italic !important;
    margin-bottom: 20px !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    overflow: visible !important;
    flex: 1 !important;
}

/* User row pinned to bottom */
section.testi-section .tc-user {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border-top: 1px solid rgba(0, 0, 0, .06) !important;
    padding-top: 16px !important;
    margin-top: auto !important;
}

section.testi-section .tc-user strong {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111 !important;
}

section.testi-section .tc-user small {
    display: block !important;
    font-size: 12px !important;
    color: #888 !important;
}

section.testi-section .tc-initials {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    border: 2px solid rgba(255, 255, 255, .3) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15) !important;
}

/* Arrows — glass on red bg */
section.testi-section .tc-arrow {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .15) !important;
    border: 1.5px solid rgba(255, 255, 255, .35) !important;
    color: #fff !important;
    font-size: 15px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background .25s, transform .25s !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

section.testi-section .tc-arrow:hover {
    background: rgba(255, 255, 255, .3) !important;
    transform: scale(1.1) !important;
    border-color: rgba(255, 255, 255, .5) !important;
}

/* Dots — white-on-red */
section.testi-section .tc-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 36px !important;
}

section.testi-section .tc-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .35) !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: background .25s, width .25s !important;
}

section.testi-section .tc-dot.active {
    background: #fff !important;
    width: 24px !important;
    border-radius: 4px !important;
}

/* Section header on dark bg */
section.testi-section .ra-label {
    color: rgba(255, 255, 255, .7) !important;
}

section.testi-section h2 {
    color: #fff !important;
}

section.testi-section .ra-desc {
    color: rgba(255, 255, 255, .65) !important;
}

/* Decorative blobs — keep subtle */
section.testi-section .testi-bg-blob {
    position: absolute !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .04) !important;
    pointer-events: none !important;
}

/* Responsive: 2 cards tablet, 1 card mobile */
@media (max-width: 1023px) {
    section.testi-section .tc-card {
        flex: 0 0 calc((100% - 28px) / 2) !important;
    }
}

@media (max-width: 639px) {
    section.testi-section {
        padding: 56px 0 48px !important;
    }

    section.testi-section .container-wrapper {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    section.testi-section .ra-section-head {
        margin-bottom: 24px !important;
    }

    section.testi-section .tc-outer {
        gap: 8px !important;
    }

    section.testi-section .tc-viewport {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        margin-top: -14px !important;
        margin-bottom: -14px !important;
    }

    section.testi-section .tc-card {
        flex: 0 0 100% !important;
        transform: rotate(0deg) !important;
        /* single card per row on mobile — no tilt needed */
        border-radius: 16px !important;
        padding: 20px 16px 16px !important;
    }

    section.testi-section .tc-msg {
        font-size: 13.5px !important;
        line-height: 1.65 !important;
    }

    section.testi-section .tc-user {
        gap: 10px !important;
        padding-top: 12px !important;
    }

    section.testi-section .tc-initials {
        width: 36px !important;
        height: 36px !important;
        font-size: 12px !important;
    }

    section.testi-section .tc-arrow {
        width: 34px !important;
        height: 34px !important;
        font-size: 11px !important;
        border-width: 1px !important;
    }

    section.testi-section .tc-dots {
        margin-top: 22px !important;
    }
}

/* Nav overlap handled by JS body padding-top. */

/* ██████████████████████████████████████████████████████████████████
   END FIXED NAV
   ██████████████████████████████████████████████████████████████████ */


/* ── FILTER PILLS — FIX HOVER CLIP ─────────────────────────────── */
/* The wrapper had overflow:hidden which clipped the translateY(-2px) lift.
   Allow vertical overflow so the upward hover motion is fully visible.    */

.sc-pills-wrap {
    overflow: visible !important;
    /* let hovered pills lift freely   */
    padding-top: 8px !important;
    /* absorb the 2px lift without cut */
    padding-bottom: 8px !important;
}

/* The pill scroll strip still clips horizontally (scrollable row) */
.sc-pills {
    overflow-x: auto !important;
    overflow-y: visible !important;
    /* don't clip the lift             */
    padding-top: 4px !important;
    /* room so box-shadow isn't cut    */
    padding-bottom: 8px !important;
}

/* Each pill: smooth lift, no clipping */
.sc-pill {
    transition: transform .22s ease, box-shadow .22s ease,
        border-color .22s, color .22s, background .22s !important;
}

.sc-pill:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 18px rgba(221, 25, 0, .15) !important;
}

/* sc-discovery row must also not/* sc-discovery overflow fix */
.sc-discovery {
    overflow: visible !important;
}

/* ── PILLS: expand to full width, no scrolling ───────────────────── */
.sc-pills-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    /* allow multi-line if needed */
    align-items: center !important;
    gap: 10px !important;
    overflow: visible !important;
    padding: 10px 12px !important;
}

/* sc-pill-label stays inline at front */
.sc-pill-label {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* Pills container: wrap, no scroll */
.sc-pills,
.sc-pills.sc-pills-nowrap {
    display: flex !important;
    flex-wrap: wrap !important;
    /* ← wrap instead of scroll */
    gap: 10px !important;
    overflow: visible !important;
    /* no clipping */
    flex: 1 !important;
}

/* Individual pill: never shrink below content width */
.sc-pill {
    flex-shrink: 0 !important;
}

/* ── PILLS SINGLE-LINE FIX ───────────────────────────────────────── */
/* Reduce pill size so all 8 fit on one row */
.sc-pill {
    padding: 7px 14px !important;
    font-size: 12px !important;
    gap: 5px !important;
}

.sc-pill i {
    font-size: 10px !important;
}

/* Keep pills on one line — no wrapping */
.sc-pills,
.sc-pills.sc-pills-nowrap {
    flex-wrap: nowrap !important;
    /* single line */
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
}

/* Pills wrap row: also single line */
.sc-pills-wrap {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    /* center the whole bar */
    gap: 8px !important;
}

/* Widen the discovery container edge-to-edge */
.sc-discovery .sc-container {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* ── COMPACT SPACING + BIGGER FEATURED CARDS ─────────────────────── */

/* Remove the huge grey gap above Featured Properties */
.sc-featured {
    margin-top: 0 !important;
    padding-top: 40px !important;
    padding-bottom: 48px !important;
}

/* Compact discovery section bottom */
.sc-discovery {
    padding-bottom: 12px !important;
}

/* Bigger property cards */
.sc-card {
    width: 340px !important;
    /* wider card                     */
}

.sc-card-img {
    height: 240px !important;
    /* taller image                   */
}

/* Slightly larger title + price */
.sc-card-title {
    font-size: 17px !important;
}

.sc-card-price {
    font-size: 22px !important;
}

/* More gap between cards */
.sc-carousel {
    gap: 24px !important;
    padding-bottom: 12px !important;
}

/* ── FEATURED SECTION: EDGE-TO-EDGE + HOVER FIX ─────────────────── */

/* Remove side padding so carousel fills full width */
.sc-featured .sc-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Section head still has readable side inset */
.sc-featured .sc-section-head {
    padding-left: 28px !important;
    padding-right: 28px !important;
}

/* Progress bar inset */
.sc-featured .sc-progress-bar {
    margin-left: 28px !important;
    margin-right: 28px !important;
}

/* Carousel: let cards start from the left edge with a small indent */
.sc-carousel {
    padding-left: 28px !important;
    padding-right: 28px !important;
}

/* HOVER FIX: remove scale() — it causes overflow/clipping inside the
   carousel. Keep only the clean vertical lift. */
.sc-card:hover {
    transform: translateY(-8px) !important;
    /* no scale */
    box-shadow: 0 16px 40px rgba(0, 0, 0, .15) !important;
}

/* ── CAROUSEL HOVER CUTOFF FIX ──────────────────────────────────── */
/* sc-carousel-wrap had overflow:hidden which clips the card's upward
   lift. Allow vertical overflow, keep only horizontal clip.          */
.sc-carousel-wrap {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    /* ← let cards lift freely        */
}

/* Give the carousel top breathing room so the box-shadow/lift
   never gets trimmed at the top edge                                 */
.sc-carousel {
    padding-top: 14px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* ── JOURNEY SECTION COMPACT FIX ────────────────────────────────── */
.sc-hiw {
    margin-top: 16px !important;
    padding-top: 36px !important;
    padding-bottom: 36px !important;
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, .06) !important;
    overflow: visible !important;
}

.sc-hiw-head {
    margin-bottom: 24px !important;
}

.sc-hiw-head .sc-h2 {
    font-size: 26px !important;
}

.sc-hiw-track {
    gap: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.sc-hiw-card {
    grid-template-columns: 200px 1fr !important;
    max-width: 620px !important;
}

.sc-hiw-img {
    height: 150px !important;
}

.sc-hiw-body {
    padding: 16px 20px !important;
}

.sc-hiw-num {
    font-size: 32px !important;
}

.sc-hiw-num-wrap {
    margin-bottom: 6px !important;
}

.sc-hiw-body h3 {
    font-size: 17px !important;
    margin-bottom: 5px !important;
}

.sc-hiw-body p {
    font-size: 13px !important;
    margin-bottom: 10px !important;
}

.sc-hiw-connector {
    padding: 4px 0 !important;
}

.sc-hiw-line {
    height: 16px !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  COMPREHENSIVE DESIGN PASS — fit + polish                  ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── 1. PAGE BACKGROUND: subtle dot grid for depth ─────────────── */
body {
    background-color: #f0f2f8 !important;
    background-image: radial-gradient(circle, rgba(229, 57, 53, .12) 1px, transparent 1px) !important;
    background-size: 28px 28px !important;
}

/* ── 2. HERO: tighter bottom, left pane warm gradient ──────────── */
.av-hero-body {
    min-height: auto !important;
}

.av-left {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 60%, rgba(255, 235, 230, .55) 100%) !important;
}

/* ── 3. STAT CARDS: always 4 columns, full width ───────────────── */
.sc-stat-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}

.sc-stat-card {
    min-width: 0 !important;
    /* prevent overflow */
}

/* ── 4. DISCOVERY → FEATURED gap ───────────────────────────────── */
.sc-discovery {
    padding-top: 28px !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
}

/* ── 5. FEATURED: remove gap between header and carousel ────────── */
.sc-featured {
    padding-top: 32px !important;
    padding-bottom: 40px !important;
    margin-top: 8px !important;
}

.sc-featured .sc-section-head {
    margin-bottom: 24px !important;
    padding-bottom: 0 !important;
}

/* Red accent underline under section titles */
.sc-featured .sc-h2::after,
.sc-hiw-head .sc-h2::after,
.sc-amenities .sc-h2::after {
    content: '' !important;
    display: block !important;
    width: 48px !important;
    height: 3px !important;
    background: linear-gradient(90deg, #E53935, #FF6B35) !important;
    border-radius: 2px !important;
    margin: 10px auto 0 !important;
}

/* ── 6. JOURNEY: full width, better design ─────────────────────── */
.sc-hiw {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    border-top: 1px solid rgba(229, 57, 53, .1) !important;
    border-bottom: 1px solid rgba(229, 57, 53, .1) !important;
    box-shadow: none !important;
    background: #fff !important;
    padding: 48px 60px !important;
    margin-top: 8px !important;
}

/* Center the steps track */
.sc-hiw-track {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.sc-hiw-card {
    max-width: 800px !important;
    width: 100% !important;
    grid-template-columns: 220px 1fr !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .07) !important;
    border: 1px solid rgba(0, 0, 0, .06) !important;
}

/* ── 7. AMENITIES: tighter, better icon design ──────────────────── */
.sc-amenities {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    margin-top: 8px !important;
}

/* Replace flat pink icon bg with red gradient */
.sc-am-icon {
    background: linear-gradient(135deg, #E53935, #FF6B35) !important;
    color: #fff !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 14px !important;
    font-size: 22px !important;
    box-shadow: 0 4px 14px rgba(229, 57, 53, .25) !important;
}

.sc-am-icon i {
    color: #fff !important;
}

/* Amenity cards full white with hover lift */
.sc-am-card {
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06) !important;
    border: 1px solid rgba(0, 0, 0, .05) !important;
    transition: transform .22s ease, box-shadow .22s ease !important;
    overflow: visible !important;
}

.sc-am-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(229, 57, 53, .12) !important;
}

/* Amenity image */
.sc-am-img {
    height: 180px !important;
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden !important;
}

/* ── 8. TESTIMONIALS: tighten top gap ──────────────────────────── */
.sc-testimonials {
    margin-top: 8px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

/* ── 9. WHY IT WORKS: tighten ──────────────────────────────────── */
.sc-why {
    margin-top: 8px !important;
    padding-top: 36px !important;
    padding-bottom: 36px !important;
}

/* ── 10. CTA: tighten ──────────────────────────────────────────── */
.sc-cta {
    margin-top: 8px !important;
}

/* ── 11. Stat card icon gradient ───────────────────────────────── */
.sc-stat-icon {
    background: var(--grad-dark) !important;
    box-shadow: 0 4px 14px rgba(229, 57, 53, .3) !important;
}

/* ── 12. CORRECT CLASS FIXES (actual HTML uses ra-* not sc-am-*) ── */

/* Reduce ra-section top padding — these are the big sections */
.ra-section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
    margin-top: 0 !important;
}

/* Amenity cards — correct classes */
.ra-am-card {
    background: #fff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .06) !important;
    border: 1px solid rgba(0, 0, 0, .05) !important;
    transition: transform .22s ease, box-shadow .22s ease !important;
}

.ra-am-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 28px rgba(229, 57, 53, .13) !important;
}

/* Amenity icon — replace soft pink circle with solid brand red pill */
.ra-am-body i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    background: #b72626 !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 20px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 14px rgba(183, 38, 38, .28) !important;
}

/* Section headings red accent underline — correct ra-* selectors */
.ra-section h2 {
    position: relative !important;
}

.ra-section h2::after {
    content: '' !important;
    display: block !important;
    width: 44px !important;
    height: 3px !important;
    background: #b72626 !important;
    border-radius: 2px !important;
    margin: 10px auto 0 !important;
}

/* Amenity image height */
.ra-am-card img {
    width: 100% !important;
    height: 190px !important;
    object-fit: cover !important;
}

/* ── TESTIMONIALS: compact + bigger cards + hover fix ────────────── */

/* Tighter section padding */
.testi-section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
}

/* Make the outer carousel taller to accommodate bigger cards */
.tc-outer {
    position: relative !important;
    padding: 10px 60px !important;
    /* side room for arrows */
}

/* Viewport: expand clipping box to prevent side cut-offs on rotated cards */
.tc-viewport {
    overflow: hidden !important;
    padding: 40px 24px !important;
    margin: -40px -24px !important;
}

/* Track: also visible overflow */
.tc-track {
    overflow: visible !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Bigger, better cards */
.tc-card {
    transform: rotate(var(--rot, 0deg)) !important;
    transition: transform .22s ease, box-shadow .22s ease !important;
    min-width: 340px !important;
    /* wider */
    max-width: 360px !important;
    padding: 28px 28px 22px !important;
    /* more breathing room */
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    /* deeply tinted, very soft shadow to blend seamlessly into the rich red background */
    box-shadow: 0 15px 45px rgba(60, 5, 0, 0.35) !important;
}

/* Hover: lift without rotation to unify feel */
.tc-card:hover {
    transform: rotate(0deg) translateY(-6px) !important;
    box-shadow: 0 25px 60px rgba(50, 0, 0, 0.5) !important;
}

/* Stars row */
.tc-stars {
    margin-bottom: 14px !important;
    font-size: 15px !important;
}

/* Quote text — slightly bigger */
.tc-msg {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    margin-bottom: 18px !important;
}

/* User row */
.tc-user {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: auto !important;
}

.tc-initials {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    flex-shrink: 0 !important;
}

/* ── TESTIMONIALS: BIGGER CARDS + REMOVE DARK BOTTOM ────────────── */

/* Remove ALL pseudo-element overlays from testi-section that create
   the darker band at the bottom                                      */
.testi-section::before,
.testi-section::after {
    display: none !important;
    background: none !important;
    content: none !important;
}

/* Ensure testi-section is one uniform colour — no gradient fade */
.testi-section {
    background: var(--grad-dark) !important;
    /* premium gradient    */
    padding-top: 44px !important;
    padding-bottom: 44px !important;
}

/* Remove dark tint from background blobs too */
.testi-bg-blob {
    opacity: 0.18 !important;
}

/* Bigger cards — width controlled by JS, just visual tweaks */
.tc-card {
    min-width: 0 !important;
    max-width: none !important;
    padding: 32px 32px 26px !important;
    border-radius: 22px !important;
    font-size: 15px !important;
}


/* Bigger quote text */
.tc-msg {
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  REVAMPED TESTIMONIALS SECTION                             ║
   ╚══════════════════════════════════════════════════════════════╝ */

.testi-section {
    position: relative;
    background: var(--grad-dark) !important;
    padding: 52px 0 48px;
    overflow: visible !important;
    margin: 8px 0;
}

/* Background blobs */
.testi-bg-blob {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    pointer-events: none;
}

.testi-bg-blob-1 {
    width: 400px;
    height: 400px;
    top: -120px;
    left: -80px;
}

.testi-bg-blob-2 {
    width: 300px;
    height: 300px;
    bottom: -60px;
    right: -60px;
}

/* Inner wrapper */
.testi-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
}

/* Header */
.testi-head {
    text-align: center;
    margin-bottom: 36px;
}

.testi-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: rgba(255, 255, 255, .7);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.testi-title {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
}

.testi-sub {
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
    margin: 0;
}

/* Track wrapper (holds arrows + viewport) */
.testi-track-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    /* clip horizontally only */
    padding: 12px 0;
    /* room for hover lift */
}

/* Carousel track */
.testi-track {
    display: flex;
    align-items: flex-start;
    /* cards only as tall as content */
    gap: 24px;
    flex: 1;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

/* Individual card */
.testi-card {
    flex: 0 0 calc((100% - 48px) / 3);
    min-width: 260px;
    background: #fff;
    border-radius: 20px;
    padding: 28px 26px 22px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    position: relative;
    transition: transform .22s ease, box-shadow .22s ease;
}

.testi-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

/* Big decorative quote mark */
.testi-card__quote {
    font-size: 60px;
    line-height: 1;
    color: #FFCDD2;
    font-family: Georgia, serif;
    position: absolute;
    top: 12px;
    right: 20px;
    pointer-events: none;
    user-select: none;
}

/* Stars */
.testi-card__stars {
    color: #F59E0B;
    font-size: 15px;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

/* Quote text */
.testi-card__msg {
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    font-style: italic;
    margin: 0 0 20px;
}

/* User row */
.testi-card__user {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #f0f0f0;
    padding-top: 14px;
}

.testi-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.testi-card__name {
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.testi-card__role {
    font-size: 12px;
    color: #888;
    margin-top: 1px;
}

/* Arrow buttons */
.testi-btn {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background .2s, border-color .2s;
}

.testi-btn:hover {
    background: rgba(255, 255, 255, .28);
    border-color: #fff;
}

/* Dots */
.testi-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.testi-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .35);
    cursor: pointer;
    padding: 0;
    transition: background .2s, transform .2s;
}

.testi-dot.active {
    background: #fff;
    transform: scale(1.3);
}

/* Responsive */
@media (max-width: 1023px) {
    .testi-card {
        flex: 0 0 calc((100% - 24px) / 2);
    }
}

@media (max-width: 639px) {
    .testi-card {
        flex: 0 0 100%;
    }

    .testi-inner {
        padding: 0 20px;
    }
}

/* ── TC-CARD BIGGER (final authority) ───────────────────────── */
.testi-section .tc-card,
.testi-section .tc-card.sc-in,
.testi-section .tc-card.sc-in.sc-hidden,
.testi-section .tc-card.sc-in.sc-visible {
    padding: 36px 32px 28px !important;
    font-size: 15px !important;
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    overflow: visible !important;
}

.testi-section .tc-msg {
    font-size: 15px !important;
    line-height: 1.75 !important;
}

/* ── TESTI: full-width carousel, no container cap ─────────── */
.testi-section .container-wrapper {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

.testi-section .ra-section-head {
    padding-left: 48px !important;
    padding-right: 48px !important;
}

.testi-section .tc-outer {
    padding: 12px 20px !important;
    gap: 20px !important;
    overflow: visible !important;
}

.testi-section .tc-viewport {
    flex: 1 !important;
    overflow: hidden !important;
    padding: 60px 0 !important;
    margin: -60px 0 !important;
    box-sizing: border-box !important;
}

.testi-section .tc-track {
    overflow: visible !important;
    align-items: stretch !important;
    /* ensure equal heights */
}

/* Let Javascript dictate exact container widths to ensure 3 uniform cards exactly fit */
.testi-section .tc-card,
.testi-section .tc-card.sc-in,
.testi-section .tc-card.sc-in.sc-hidden,
.testi-section .tc-card.sc-in.sc-visible {
    padding: 36px 32px 28px !important;
    min-height: 220px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
}

/* ── SIMPLE 3-CARD GRID ─────────────────────────────────────── */
.testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    padding: 12px 28px 8px;
    overflow: visible;
}

.testi-grid .tc-card {
    transform: rotate(var(--rot, 0deg));
    transition: transform .22s ease, box-shadow .22s ease;
    min-height: 220px;
    flex: none !important;
    width: auto !important;
}

.testi-grid .tc-card:hover {
    transform: rotate(0deg) translateY(-6px);
    box-shadow: 0 25px 60px rgba(50, 0, 0, 0.5) !important;
}

/* ── CAROUSEL: 3 cards = exactly 1 page width ───────────────── */
/* Container & viewport */
.testi-section .container-wrapper {
    max-width: 100% !important;
    padding: 0 !important;
    width: 100% !important;
}

.testi-section .ra-section-head {
    padding: 0 48px !important;
}

.testi-section .tc-outer {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    padding: 12px 28px !important;
    overflow: visible !important;
}

.testi-section .tc-viewport {
    flex: 1 !important;
    overflow: hidden !important;
    padding: 60px 0 !important;
    margin: -60px 0 !important;
    box-sizing: border-box !important;
}

/* Track: flex row, cards take up space inside the padded viewport */
.testi-section .tc-track {
    display: flex !important;
    gap: 24px !important;
    align-items: flex-start !important;
    overflow: visible !important;
    transition: transform .42s cubic-bezier(.4, 0, .2, 1) !important;
    will-change: transform !important;
}

/* Card widths are set by CSS calc, not JS override */
.testi-section .tc-card,
.testi-section .tc-card.sc-in,
.testi-section .tc-card.sc-in.sc-hidden,
.testi-section .tc-card.sc-in.sc-visible {
    padding: 32px 28px 26px !important;
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    overflow: visible !important;
    font-size: 14.5px !important;
}

/* Fix arrow positions */
.testi-section .tc-arrow {
    position: relative !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.testi-section .tc-arrow:hover {
    background: #fff !important;
    color: var(--ra) !important;
    border-color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION SPACING — tighter, more cohesive
══════════════════════════════════════════════════════════════ */
.ra-why-section {
    padding: 72px 0 !important;
}

.ra-explore-section {
    padding: 72px 0 !important;
}

.ra-trust-strip {
    padding: 48px 0 !important;
}

.home-section {
    margin: 0 !important;
}

/* reduce gap above/below the red testi section */
.testi-section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
══════════════════════════════════════════════════════════════ */

/* Base hidden state */
[data-reveal] {
    opacity: 0;
    transition: opacity .65s cubic-bezier(.4, 0, .2, 1),
        transform .65s cubic-bezier(.4, 0, .2, 1);
    will-change: opacity, transform;
}

/* Directions */
[data-reveal="up"] {
    transform: translateY(40px);
}

[data-reveal="down"] {
    transform: translateY(-30px);
}

[data-reveal="left"] {
    transform: translateX(-50px);
}

[data-reveal="right"] {
    transform: translateX(50px);
}

[data-reveal="scale"] {
    transform: scale(.9);
}

[data-reveal="fade"] {
    transform: none;
}

/* Visible state — added by JS */
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Stagger delays for sibling groups */
[data-reveal-group]>* {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .55s cubic-bezier(.4, 0, .2, 1),
        transform .55s cubic-bezier(.4, 0, .2, 1);
}

[data-reveal-group]>*.is-visible {
    opacity: 1;
    transform: none;
}

[data-reveal-group]>*:nth-child(1) {
    transition-delay: .0s;
}

[data-reveal-group]>*:nth-child(2) {
    transition-delay: .12s;
}

[data-reveal-group]>*:nth-child(3) {
    transition-delay: .24s;
}

[data-reveal-group]>*:nth-child(4) {
    transition-delay: .36s;
}

[data-reveal-group]>*:nth-child(5) {
    transition-delay: .48s;
}

[data-reveal-group]>*:nth-child(6) {
    transition-delay: .60s;
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {

    [data-reveal],
    [data-reveal-group]>* {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ── FIX 8: NAVBAR COLOR ───────────────────────────────────────
   Force the top navigation bar to solid black as requested.    */
.navbar,
.navbar.bg-dark,
.navbar.fixed-top,
.av-nav,
.av-nav.sticky-glass {
    background: #080808 !important;
    background-color: #080808 !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Ensure navbar text is legible on black background */
.navbar-nav .nav-link,
.navbar-brand,
.av-nav .av-mlink,
.av-float-bot span {
    color: rgba(255, 255, 255, 0.9) !important;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover,
.av-nav .av-mlink:hover,
.av-nav .av-mlink.active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ── FIX 9: STATS CARDS LAYOUT ─────────────────────────────────
   Override the global 4-column constraint on smaller screens */
@media (max-width: 768px) {
    .sc-stat-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .sc-stat-card {
        padding: 16px 12px !important;
    }
}

@media (max-width: 480px) {
    .sc-stat-row {
        gap: 8px !important;
    }

    .sc-stat-card {
        padding: 12px 8px !important;
    }

    .sc-stat-num {
        font-size: 18px !important;
    }

    .sc-stat-card .sc-stat-lbl {
        font-size: 11px !important;
    }

    /* ── FIX 10: HOW IT WORKS MOBILE LAYOUT ──────────────────── */
    .sc-hiw-card {
        grid-template-columns: 1fr !important;
    }

    .sc-hiw-img {
        height: 200px !important;
    }

    .sc-hiw-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .sc-hiw-tags span {
        white-space: normal !important;
        text-align: left;
    }

    /* ── FIX 11: TESTIMONIALS CAROUSEL MOBILE LAYOUT ──────── */
    .testi-section .container-wrapper {
        padding: 0 16px !important;
    }

    .testi-section .tc-outer {
        gap: 0 !important;
        position: relative !important;
        display: block !important;
    }

    .testi-section .tc-viewport {
        padding: 24px 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    .testi-section .tc-track {
        gap: 24px !important;
    }

    .testi-section .tc-card,
    .testi-section .tc-card.sc-in,
    .testi-section .tc-card.sc-in.sc-hidden,
    .testi-section .tc-card.sc-in.sc-visible {
        flex: 0 0 100% !important;
        min-width: 0 !important;
        padding: 24px 20px !important;
    }

    .testi-section .tc-msg {
        font-size: 14px !important;
        margin-bottom: 16px !important;
    }

    .testi-section .tc-arrow {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
        z-index: 10 !important;
    }

    .testi-section .tc-prev {
        left: -8px !important;
    }

    .testi-section .tc-next {
        right: -8px !important;
    }

    /* ── FIX 12: PROPERTIES BROWSE BY LABEL MOBILE LAYOUT ── */
    .sc-pills-wrap {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding-left: 16px !important;
    }

    .sc-pill-label {
        background: transparent !important;
        box-shadow: none !important;
        padding-right: 0 !important;
        margin-bottom: 0 !important;
    }

    .sc-pills {
        padding-left: 0 !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
        width: 100% !important;
    }
}

/* ============================================================
   FINAL AUTHORITY — HOW IT WORKS CARD WIDTH ON MOBILE
   This block is intentionally placed LAST in the file so it
   wins the CSS cascade over all earlier rules.
   Desktop (≥1025px) is NOT affected — no rules here for it.
   ============================================================ */
@media (max-width: 1024px) {
    .sc-hiw > .sc-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .sc-hiw-steps-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        gap: 0 !important;
        box-sizing: border-box !important;
    }

    .sc-hiw-step2 {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: none !important;
        align-self: auto !important;
        box-sizing: border-box !important;
    }
}