/* ============================================================================
   BuyHome.lk — Homepage
   Layout & rhythm modelled on the "Finder" real-estate theme, recoloured to the
   BuyHome green. Hand-written, framework-free: every rule is namespaced `fnd-`
   so nothing here can collide with Bootstrap 4, main.css or new-home.css.
   ========================================================================== */

:root {
    /* ── Brand palette (from the BuyHome logo) ──────────────────────────
       primary  navy   #05426f  — buttons, emphasis, structure
       accent   teal   #00b5bd  — icons, small highlights, hovers
       warm     orange #faa05c  — featured badge, the rare pop
       ------------------------------------------------------------------ */
    --fnd-primary: #05426f;
    --fnd-primary-dark: #03395f;
    --fnd-primary-deep: #022c4a;
    --fnd-primary-tint: #eaf1f6;
    --fnd-primary-border: #cfe0ec;

    --fnd-teal: #00b5bd;
    --fnd-teal-dark: #06949b;
    --fnd-teal-tint: #e2f6f7;

    --fnd-orange: #faa05c;
    --fnd-orange-dark: #f2833a;
    --fnd-orange-tint: #fef1e6;

    /* Legacy aliases — everything structural (buttons, borders, tints,
       tab fills) resolves to navy through these. */
    --fnd-green: var(--fnd-primary);
    --fnd-green-dark: var(--fnd-primary-dark);
    --fnd-green-tint: var(--fnd-primary-tint);
    --fnd-green-border: var(--fnd-primary-border);

    --fnd-ink: #0f172a;
    --fnd-body: #475569;
    --fnd-muted: #64748b;
    --fnd-line: #e2e8f0;
    --fnd-surface: #ffffff;
    --fnd-surface-alt: #f5f8fa;

    --fnd-radius: 0.75rem;
    --fnd-radius-lg: 1rem;
    --fnd-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    --fnd-shadow-lift: 0 12px 32px rgba(15, 23, 42, .10);
}

/* ---------------------------------------------------------------- scaffold */

body.homepage {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--fnd-body);
    background: var(--fnd-surface);
    -webkit-font-smoothing: antialiased;
}

.fnd-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.fnd-section {
    padding: 3rem 0;
}

/* section that follows another directly — no doubled-up vertical padding */
.fnd-section-tight {
    padding-top: 0;
}

.fnd-rail-nav {
    display: flex;
    flex-shrink: 0;
    gap: 0.5rem;
}

.fnd-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}

.fnd-section-head h2 {
    font-size: clamp(1.65rem, 3.2vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--fnd-ink);
    margin: 0;
}

.fnd-section-head p {
    margin: 0.5rem 0 0;
    font-size: 0.975rem;
    color: var(--fnd-muted);
    max-width: 46rem;
}

.fnd-viewall {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--fnd-green-dark);
    text-decoration: none;
    white-space: nowrap;
}

.fnd-viewall:hover {
    color: var(--fnd-green-dark);
    text-decoration: none;
}

.fnd-viewall span {
    border-bottom: 1px solid transparent;
    transition: border-color .2s;
}

.fnd-viewall:hover span {
    border-bottom-color: currentColor;
}

/* ------------------------------------------------------------------ buttons */

.fnd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1.6rem;
    border: 1px solid transparent;
    border-radius: var(--fnd-radius);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}

.fnd-btn-primary {
    background: var(--fnd-green);
    color: #fff;
    box-shadow: 0 4px 14px rgba(5, 66, 111, .28);
}

.fnd-btn-primary:hover {
    background: var(--fnd-green-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(5, 66, 111, .34);
}

.fnd-btn-outline {
    background: #fff;
    border-color: var(--fnd-line);
    color: var(--fnd-ink);
}

.fnd-btn-outline:hover {
    border-color: var(--fnd-green);
    background: var(--fnd-green-tint);
    color: var(--fnd-green-dark);
    text-decoration: none;
}

.fnd-icon-btn {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--fnd-line);
    color: var(--fnd-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
}

.fnd-icon-btn:hover:not(:disabled) {
    border-color: var(--fnd-green);
    background: var(--fnd-green-tint);
    color: var(--fnd-green-dark);
}

.fnd-icon-btn:disabled {
    opacity: .4;
    cursor: default;
}

/* ========================================================================= */
/*  1. HERO — headline, staggered image collage, floating search card         */
/* ========================================================================= */

.fnd-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 92vh;
    padding: 132px 0 68px;
    overflow: hidden;
    isolation: isolate;
}

/* Full-bleed background photo */
.fnd-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.fnd-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.04);
}

/* Navy-tinted overlay — darker at the very top (so the transparent header
   stays legible) and at the bottom, lighter through the middle. */
.fnd-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 28, 48, .80) 0%, rgb(2 28 48 / 8%) 30%, rgb(2 28 48 / 0%) 58%, rgb(2 28 48 / 17%) 100%), linear-gradient(90deg, rgb(2 28 48 / 60%) 0%, rgba(2, 28, 48, 0) 72%);
}

.fnd-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.fnd-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.95rem;
    margin-bottom: 1.35rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.fnd-hero-eyebrow i {
    color: var(--fnd-orange);
}

.fnd-hero-copy {
    max-width: 46rem;
    padding-bottom: 2.25rem;
}

.fnd-hero-copy h1 {
    font-size: clamp(2.3rem, 5.4vw, 4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0 0 1.1rem;
    text-shadow: 0 2px 30px rgba(2, 28, 48, .35);
}

.fnd-hero-copy h1 .fnd-accent {
    color: var(--fnd-orange);
}

.fnd-hero-copy p {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .9);
    margin: 0;
    max-width: 34rem;
}

/* Search card */
.fnd-searchcard {
    position: relative;
    z-index: 4;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--fnd-radius-lg);
    padding: 0.5rem;
    box-shadow: 0 24px 60px rgba(2, 28, 48, .34);
    max-width: 62rem;
}

.fnd-search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0;
}

.fnd-search-field {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 0.35rem 0.5rem;
}

.fnd-search-field + .fnd-search-field {
    border-left: 1px solid var(--fnd-line);
}

.fnd-search-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--fnd-muted);
    padding: 0 0.65rem;
    margin-bottom: 0.1rem;
}

.fnd-search-field select,
.fnd-search-field input {
    width: 100%;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--fnd-ink);
    padding: 0 0.65rem 0.35rem;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.fnd-search-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    padding-right: 1.75rem;
}

.fnd-search-field input {
    cursor: text;
}

.fnd-search-field input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.fnd-search-submit {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0.35rem;
}

.fnd-search-submit .fnd-btn {
    height: 100%;
    padding: 0.9rem 2rem;
}

/* price pair sits in one field */
.fnd-price-pair {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.fnd-price-pair span {
    color: #cbd5e1;
}

/* Trust strip under the hero (over the photo → white text) */
.fnd-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2.75rem;
    padding: 2.25rem 0 0;
}

.fnd-hero-stat {
    position: relative;
    padding-left: 1.25rem;
}

.fnd-hero-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.15rem;
    bottom: 0.15rem;
    width: 3px;
    border-radius: 3px;
    background: var(--fnd-orange);
}

.fnd-hero-stat strong {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.fnd-hero-stat span {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, .78);
}

/* ========================================================================= */
/*  2. CATEGORY STRIP — bordered row with offer counts                        */
/* ========================================================================= */

.fnd-catstrip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: 1px solid var(--fnd-line);
    border-radius: var(--fnd-radius);
    overflow: hidden;
    background: #fff;
}

.fnd-catstrip-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-align: center;
    padding: 1.5rem 1rem;
    text-decoration: none;
    border-right: 1px solid var(--fnd-line);
    border-bottom: 1px solid var(--fnd-line);
    transition: background-color .2s;
}

.fnd-catstrip-item:hover {
    background: var(--fnd-green-tint);
    text-decoration: none;
}

.fnd-catstrip-item img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    margin-bottom: 0.15rem;
}

.fnd-catstrip-item h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fnd-ink);
    margin: 0;
    line-height: 1.3;
}

.fnd-catstrip-item:hover h3 {
    color: var(--fnd-green-dark);
}

.fnd-catstrip-count {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.825rem;
    color: var(--fnd-muted);
}

.fnd-catstrip-count i {
    color: var(--fnd-teal-dark);
}

/* ========================================================================= */
/*  3. ACTION CARDS — Buy / Sell / Rent                                       */
/* ========================================================================= */

.fnd-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.fnd-action {
    position: relative;
    display: block;
    border-radius: var(--fnd-radius-lg);
    overflow: hidden;
    min-height: 15rem;
    text-decoration: none;
    background: var(--fnd-surface-alt);
    border: 0;
    width: 100%;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.fnd-action img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.fnd-action:hover img {
    transform: scale(1.05);
}

.fnd-action::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, .12) 0%, rgba(15, 23, 42, .72) 100%);
}

.fnd-action-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-height: 15rem;
    padding: 1.5rem;
    color: #fff;
}

.fnd-action-body h3 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    color: #fff;
}

.fnd-action-body p {
    font-size: 0.9rem;
    margin: 0 0 0.85rem;
    color: rgba(255, 255, 255, .82);
}

.fnd-action-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

.fnd-action:hover .fnd-action-link {
    gap: 0.7rem;
}

.fnd-action-link i {
    transition: transform .2s;
}

/* ========================================================================= */
/*  4. LISTING CARD                                                           */
/* ========================================================================= */

.fnd-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--fnd-line);
    border-radius: var(--fnd-radius);
    overflow: hidden;
    transition: box-shadow .25s, border-color .25s, transform .25s;
}

.fnd-card:hover {
    border-color: transparent;
    box-shadow: var(--fnd-shadow-lift);
    transform: translateY(-3px);
}

.fnd-card-media {
    position: relative;
    display: block;
    aspect-ratio: 362 / 248;
    background: var(--fnd-surface-alt);
    overflow: hidden;
}

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

.fnd-card:hover .fnd-card-media img {
    transform: scale(1.04);
}

.fnd-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .18) 100%);
}

.fnd-badges {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.fnd-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    border-radius: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.4;
}

.fnd-badge-featured {
    background: var(--fnd-orange);
    color: var(--fnd-primary-deep);
}

.fnd-badge-member {
    background: rgba(255, 255, 255, .94);
    color: #b45309;
}

.fnd-badge-time {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 2;
    background: rgba(15, 23, 42, .62);
    color: #fff;
    backdrop-filter: blur(4px);
    font-weight: 500;
}

.fnd-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0.9rem 1rem 1rem;
}

.fnd-card-tag {
    display: inline-block;
    align-self: flex-start;
    padding: 0.2rem 0.5rem;
    margin-bottom: 0.6rem;
    border-radius: 0.35rem;
    background: var(--fnd-surface-alt);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--fnd-body);
}

.fnd-card-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--fnd-ink);
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.fnd-card-price sup {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fnd-muted);
    top: -0.35em;
}

.fnd-card-price small {
    font-size: 0.775rem;
    font-weight: 500;
    color: var(--fnd-muted);
}

.fnd-negotiable {
    font-size: 0.675rem;
    font-weight: 600;
    color: var(--fnd-green-dark);
    background: var(--fnd-green-tint);
    border-radius: 0.25rem;
    padding: 0.15rem 0.4rem;
}

.fnd-card-title {
    font-size: 0.925rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--fnd-body);
    margin: 0 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fnd-card-title a {
    color: inherit;
    text-decoration: none;
}

.fnd-card-title a::after {
    /* stretched link — whole card is clickable */
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.fnd-card:hover .fnd-card-title a {
    color: var(--fnd-green-dark);
}

.fnd-card-location {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--fnd-muted);
    margin-bottom: 0.65rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fnd-card-location i {
    color: var(--fnd-teal-dark);
    flex-shrink: 0;
}

.fnd-card-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.65rem;
    border-top: 1px solid var(--fnd-line);
}

.fnd-spec {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--fnd-body);
}

.fnd-spec i {
    font-size: 0.7rem;
    color: var(--fnd-teal-dark);
}

/* ========================================================================= */
/*  5. RAIL — scroll-snap carousel driven by the prev/next buttons            */
/* ========================================================================= */

.fnd-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% - 1.5rem);
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.fnd-rail::-webkit-scrollbar {
    display: none;
}

.fnd-rail > * {
    scroll-snap-align: start;
}

/* Static grid variant */
.fnd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 1.5rem;
}

/* ========================================================================= */
/*  6. TABS                                                                   */
/* ========================================================================= */

.fnd-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}

.fnd-tab {
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--fnd-line);
    border-radius: 2rem;
    background: #fff;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fnd-body);
    cursor: pointer;
    transition: all .2s;
}

.fnd-tab:hover {
    border-color: var(--fnd-green);
    color: var(--fnd-green-dark);
}

.fnd-tab.is-active {
    background: var(--fnd-green);
    border-color: var(--fnd-green);
    color: #fff;
}

.fnd-tabpanel[hidden] {
    display: none;
}

.fnd-empty {
    grid-column: 1 / -1;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--fnd-muted);
    font-size: 0.925rem;
    border: 1px dashed var(--fnd-line);
    border-radius: var(--fnd-radius);
}

/* ========================================================================= */
/*  7. CTA BAND                                                               */
/* ========================================================================= */

.fnd-cta {
    position: relative;
    padding: clamp(4rem, 9vw, 7rem) 0;
    isolation: isolate;
    overflow: hidden;
    /* Parallax: a fixed background photo (set per-page via --cta-bg) under a
       navy brand overlay. The overlay keeps the white text readable. */
       background-image: linear-gradient(120deg, rgb(4 38 63 / 58%) 0%, rgb(5 66 111 / 68%) 52%, rgb(4 38 63 / 49%) 100%), var(--cta-bg, none);
    background-color: var(--fnd-primary-deep);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
}

/* soft orange glow accent, top-right */
.fnd-cta::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 42%;
    height: 120%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(250, 160, 92, .22), transparent);
    pointer-events: none;
}

.fnd-cta-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 46rem;
    margin: 0 auto;
}

.fnd-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.95rem;
    margin-bottom: 1.35rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.fnd-cta-eyebrow i {
    color: var(--fnd-orange);
}

.fnd-cta h2 {
    font-size: clamp(1.8rem, 3.6vw, 2.85rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.12;
    color: #fff;
    margin: 0 0 0.9rem;
    text-shadow: 0 2px 24px rgba(2, 28, 48, .4);
}

.fnd-cta p {
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
    margin: 0 0 2rem;
    max-width: 36rem;
}

.fnd-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
}

/* orange primary + white ghost, sized for the band */
.fnd-cta-btn-primary {
    background: var(--fnd-orange);
    color: var(--fnd-primary-deep);
    box-shadow: 0 10px 26px rgba(250, 160, 92, .30);
}

.fnd-cta-btn-primary:hover {
    background: var(--fnd-orange-dark);
    color: var(--fnd-primary-deep);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(250, 160, 92, .38);
}

.fnd-cta-btn-ghost {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

.fnd-cta-btn-ghost:hover {
    background: #fff;
    border-color: #fff;
    color: var(--fnd-primary);
    text-decoration: none;
    transform: translateY(-2px);
}

/* ========================================================================= */
/*  8. CITY GRID                                                              */
/* ========================================================================= */

.fnd-cities {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.fnd-city {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--fnd-line);
    border-radius: var(--fnd-radius);
    text-decoration: none;
    background: #fff;
    transition: all .2s;
}

.fnd-city:hover {
    border-color: var(--fnd-green);
    background: var(--fnd-green-tint);
    text-decoration: none;
    transform: translateY(-2px);
}

.fnd-city-name {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--fnd-ink);
    margin: 0 0 0.15rem;
}

.fnd-city-count {
    font-size: 0.8rem;
    color: var(--fnd-muted);
}

.fnd-city i {
    color: var(--fnd-teal-dark);
    flex-shrink: 0;
}

/* ========================================================================= */
/*  Responsive                                                                */
/* ========================================================================= */

@media (min-width: 576px) {
    .fnd-catstrip {
        grid-template-columns: repeat(3, 1fr);
    }

    .fnd-rail {
        grid-auto-columns: calc(50% - 0.75rem);
    }
}

@media (min-width: 768px) {
    .fnd-section {
        padding: 4rem 0;
    }

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

    .fnd-rail {
        grid-auto-columns: calc(33.333% - 1rem);
    }

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

/* background-attachment:fixed is janky / unsupported on most touch devices —
   fall back to a normal scrolling background there. */
@media (max-width: 991px),
(prefers-reduced-motion: reduce) {
    .fnd-cta {
        background-attachment: scroll, scroll;
    }
}

@media (min-width: 992px) {
    .fnd-catstrip {
        grid-template-columns: repeat(4, 1fr);
    }

    .fnd-rail {
        grid-auto-columns: calc(25% - 1.125rem);
    }

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

@media (min-width: 1200px) {
    .fnd-section {
        padding: 4.5rem 0;
    }
}

/* Search card stacks on small screens */
@media (max-width: 767.98px) {
    .fnd-hero {
        min-height: auto;
        padding: 104px 0 52px;
    }

    .fnd-search-form {
        flex-direction: column;
    }

    .fnd-search-field {
        flex: 1 1 auto;
        width: 100%;
    }

    .fnd-search-field + .fnd-search-field {
        border-left: 0;
        border-top: 1px solid var(--fnd-line);
    }

    .fnd-search-submit {
        width: 100%;
        padding-top: 0.6rem;
    }

    .fnd-search-submit .fnd-btn {
        width: 100%;
    }

    .fnd-hero-stats {
        gap: 1.5rem 2rem;
    }

    .fnd-hero-stat strong {
        font-size: 1.25rem;
    }

    .fnd-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* the rail buttons are pointless on touch — the rail scrolls natively */
@media (max-width: 575.98px) {
    .fnd-rail-nav {
        display: none;
    }

    .fnd-container {
        padding: 0 1rem;
    }
}

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

    .fnd-card,
    .fnd-card-media img,
    .fnd-action img,
    .fnd-btn,
    .fnd-city {
        transition: none;
    }

    .fnd-rail {
        scroll-behavior: auto;
    }
}

/* ========================================================================= */
/*  HOMEPAGE HEADER — transparent, floating over the hero; solid on scroll     */
/*  Scoped to body.homepage. This stylesheet loads only on the homepage, so    */
/*  every other page keeps the standard solid header untouched.                */
/* ========================================================================= */

body.homepage .modern-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
    box-shadow: none !important;
    transform: none !important;
    /* stay put — override the shared hide-on-scroll handler */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease;
}

/* smooth the colour hand-off on the controls */
body.homepage .modern-header .nav-link,
body.homepage .modern-header .header-contact,
body.homepage .modern-header .header-login-btn,
body.homepage .modern-header .user-profile,
body.homepage .modern-header .header-post-btn,
body.homepage .modern-header .search-icon-btn,
body.homepage .modern-header .mobile-menu-toggle span {
    transition: color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* ── Transparent state (over the hero) — white-out the controls ── */
body.homepage .modern-header:not(.is-solid) .nav-link,
body.homepage .modern-header:not(.is-solid) .nav-link span,
body.homepage .modern-header:not(.is-solid) .nav-link i,
body.homepage .modern-header:not(.is-solid) .header-contact,
body.homepage .modern-header:not(.is-solid) .header-contact span,
body.homepage .modern-header:not(.is-solid) .header-contact i,
body.homepage .modern-header:not(.is-solid) .header-login-btn,
body.homepage .modern-header:not(.is-solid) .header-login-btn i,
body.homepage .modern-header:not(.is-solid) .user-profile,
body.homepage .modern-header:not(.is-solid) .user-name,
body.homepage .modern-header:not(.is-solid) .search-icon-btn {
    color: #fff;
}

body.homepage .modern-header:not(.is-solid) .nav-link:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .30);
    color: #fff;
    transform: none;
}

body.homepage .modern-header:not(.is-solid) .header-contact {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .24);
}

body.homepage .modern-header:not(.is-solid) .header-login-btn,
body.homepage .modern-header:not(.is-solid) .user-profile {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .32);
}

body.homepage .modern-header:not(.is-solid) .header-login-btn:hover,
body.homepage .modern-header:not(.is-solid) .user-profile:hover {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

body.homepage .modern-header:not(.is-solid) .user-avatar {
    border-color: rgba(255, 255, 255, .8);
}

/* Hide the redundant centre search while transparent (the hero owns search).
   visibility keeps its space so the bar doesn't reflow when it turns solid. */
body.homepage .modern-header:not(.is-solid) .header-top .header-search-wrap {
    visibility: hidden;
}

body.homepage .modern-header:not(.is-solid) .header-search-row {
    display: none;
}

/* Logo swap — white mark over the photo, standard mark once solid */
body.homepage .modern-header:not(.is-solid) .logo-solid {
    display: none;
}

body.homepage .modern-header:not(.is-solid) .logo-light {
    display: block;
}

/* POST AD button → warm orange pop over the dark hero */
body.homepage .modern-header:not(.is-solid) .header-post-btn {
    background: var(--fnd-orange);
    color: var(--fnd-primary-deep);
    box-shadow: 0 6px 20px rgba(2, 28, 48, .35);
}

body.homepage .modern-header:not(.is-solid) .header-post-btn:hover {
    background: var(--fnd-orange-dark);
    color: var(--fnd-primary-deep);
}

body.homepage .modern-header:not(.is-solid) .mobile-menu-toggle span {
    background: #fff;
}

/* ── Solid state (scrolled past the hero) — restore the standard bar ── */
body.homepage .modern-header.is-solid {
    background: #fff !important;
    border-bottom: 2px solid var(--fnd-primary-border) !important;
    box-shadow: 0 4px 20px rgba(5, 66, 111, .10) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
}