/* ─── Design tokens ───────────────────────────────────────────── */
:root {
    --clr-primary:   #2563eb;
    --clr-primary-dark: #1d4ed8;
    --clr-accent:    #f59e0b;
    --clr-bg:        #f8fafc;
    --clr-surface:   #ffffff;
    --clr-border:    #e2e8f0;
    --clr-text:      #1e293b;
    --clr-muted:     #64748b;
    --clr-nav:       #0f172a;
    --clr-danger:    #ef4444;
    --clr-success:   #22c55e;
    --radius-card:   14px;
    --shadow-sm:     0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:     0 4px 16px rgba(0,0,0,.08);
    --shadow-lg:     0 8px 32px rgba(0,0,0,.12);
    --transition:    0.18s ease;
}

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

body {
    font-family: 'Inter', system-ui, sans-serif;
    background-color: var(--clr-bg);
    color: var(--clr-text);
    font-size: 15px;
    line-height: 1.6;
}

.fw-700 { font-weight: 700; }

/* ─── Navbar ──────────────────────────────────────────────────── */
.site-nav {
    background: var(--clr-nav);
    padding: 0.75rem 0;
    box-shadow: 0 2px 12px rgba(0,0,0,.18);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-nav .navbar-brand {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.3px;
    text-decoration: none;
    transition: opacity var(--transition);
}
.site-nav .navbar-brand:hover { opacity: .85; }

.nav-logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--clr-primary);
    font-size: 1rem;
    color: #fff;
}

.nav-user-badge {
    color: #94a3b8;
    font-size: .85rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-nav-outline {
    border: 1.5px solid rgba(255,255,255,.25);
    color: #fff;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 500;
    padding: .38rem .9rem;
    transition: background var(--transition), border-color var(--transition);
    text-decoration: none;
}
.btn-nav-outline:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.5);
    color: #fff;
}

.nav-page-link {
    color: #cbd5e1;
    font-size: .86rem;
    font-weight: 600;
    padding: .35rem .15rem;
    text-decoration: none;
    transition: color var(--transition);
}
.nav-page-link:hover,
.nav-page-link.active {
    color: #fff;
}

/* ─── Hero ────────────────────────────────────────────────────── */
.hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 60%, #0ea5e9 100%);
    color: #fff;
    border-radius: var(--radius-card);
    padding: 3.5rem 3rem;
    position: relative;
    overflow: hidden;
}
.hero::after {
    content: '';
    position: absolute;
    right: -80px;
    top: -80px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
}
.hero::before {
    content: '';
    position: absolute;
    right: 60px;
    bottom: -100px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
}
.hero h1 { font-size: 2.4rem; font-weight: 700; line-height: 1.2; }
.hero .lead { opacity: .88; font-size: 1.1rem; }

/* ─── Section headings ────────────────────────────────────────── */
.section-heading {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--clr-text);
    letter-spacing: -.2px;
    margin-bottom: 1.1rem;
}
.section-heading .badge-count {
    font-size: .72rem;
    font-weight: 600;
    padding: .25rem .55rem;
    border-radius: 20px;
    background: var(--clr-primary);
    color: #fff;
    vertical-align: middle;
    margin-left: .5rem;
}

/* ─── Cards ───────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    background: var(--clr-surface);
}
.card:hover { box-shadow: var(--shadow-md); }

/* Property listing card */
.prop-card {
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--clr-border);
    background: var(--clr-surface);
    transition: transform var(--transition), box-shadow var(--transition);
}
.prop-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.prop-card .prop-img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block;
}
.prop-card .prop-img-placeholder {
    width: 100%;
    height: 210px;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 3rem;
}
.prop-card .prop-body {
    padding: 1.1rem 1.2rem 1.3rem;
}
.prop-card .prop-name {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 .25rem;
    color: var(--clr-text);
}
.prop-card .prop-address {
    font-size: .82rem;
    color: var(--clr-muted);
    margin-bottom: .7rem;
}
.prop-card .prop-type-badge {
    font-size: .72rem;
    font-weight: 600;
    padding: .22rem .55rem;
    border-radius: 20px;
    background: #eff6ff;
    color: var(--clr-primary);
    border: 1px solid #bfdbfe;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.prop-card .prop-vacancies {
    font-size: .82rem;
    color: var(--clr-muted);
}
.prop-card .prop-vacancies strong {
    color: var(--clr-success);
    font-weight: 600;
}
.prop-card .prop-vacancies.no-vacancy strong {
    color: var(--clr-muted);
}

/* Image carousel inside card */
.prop-carousel { position: relative; }
.prop-carousel .carousel-control-prev,
.prop-carousel .carousel-control-next {
    width: 32px;
    height: 32px;
    background: rgba(0,0,0,.45);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    opacity: .85;
}
.prop-carousel .carousel-control-prev { left: 8px; }
.prop-carousel .carousel-control-next { right: 8px; }
.prop-carousel .carousel-control-prev-icon,
.prop-carousel .carousel-control-next-icon { width: 14px; height: 14px; }

/* ─── Stat cards ──────────────────────────────────────────────── */
.stat-card {
    border-radius: var(--radius-card);
    border: 1px solid var(--clr-border);
    background: var(--clr-surface);
    padding: 1.2rem 1.3rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}
.stat-card:hover { box-shadow: var(--shadow-md); }
.dashboard-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.dashboard-card-link .stat-card:hover {
    transform: translateY(-2px);
}
.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.stat-icon.blue   { background: #eff6ff; color: var(--clr-primary); }
.stat-icon.green  { background: #f0fdf4; color: #16a34a; }
.stat-icon.amber  { background: #fffbeb; color: #d97706; }
.stat-icon.red    { background: #fef2f2; color: var(--clr-danger); }
.stat-icon.purple { background: #f5f3ff; color: #7c3aed; }
.stat-icon.teal   { background: #f0fdfa; color: #0d9488; }
.stat-label {
    font-size: .78rem;
    font-weight: 500;
    color: var(--clr-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--clr-text);
    margin: .15rem 0 0;
}
.stat-value-money {
    font-size: 1.35rem;
    line-height: 1.15;
}

.portal-nav-card {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    height: 100%;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-card);
    border: 1px solid var(--clr-border);
    background: var(--clr-surface);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: transform var(--transition), box-shadow var(--transition);
}
.portal-nav-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.portal-nav-card i {
    font-size: 1.35rem;
    color: var(--clr-primary);
}
.portal-nav-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: .15rem;
}
.portal-nav-copy {
    font-size: .82rem;
    color: var(--clr-muted);
    line-height: 1.45;
}

/* ─── Tables ──────────────────────────────────────────────────── */
.card-table {
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-sm);
}
.card-table table {
    margin: 0;
    font-size: .875rem;
}
.card-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid var(--clr-border);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--clr-muted);
    padding: .75rem 1rem;
}
.card-table tbody td {
    padding: .8rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: var(--clr-text);
    vertical-align: middle;
}
.card-table tbody tr:last-child td { border-bottom: none; }
.card-table tbody tr:hover { background: #f8fafc; }

/* ─── Status badges ───────────────────────────────────────────── */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .2px;
}
.status-badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .8;
}
.status-badge.succeeded, .status-badge.active  { background:#f0fdf4; color:#16a34a; }
.status-badge.pending                           { background:#fffbeb; color:#d97706; }
.status-badge.processing                        { background:#eff6ff; color:var(--clr-primary); }
.status-badge.failed, .status-badge.delinquent  { background:#fef2f2; color:var(--clr-danger); }
.status-badge.default                           { background:#f1f5f9; color:var(--clr-muted); }

/* Priority coloring for work orders */
.priority-emergency td:first-child { border-left: 3px solid #ef4444; }
.priority-urgent    td:first-child { border-left: 3px solid #f97316; }
.priority-high      td:first-child { border-left: 3px solid #eab308; }

/* ─── Forms ───────────────────────────────────────────────────── */
.form-control, .form-select {
    border-radius: 8px;
    border-color: var(--clr-border);
    font-size: .9rem;
    padding: .55rem .8rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus, .form-select:focus {
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.form-label {
    font-weight: 500;
    font-size: .85rem;
    color: var(--clr-text);
    margin-bottom: .35rem;
}

/* ─── Buttons ─────────────────────────────────────────────────── */
.btn {
    border-radius: 8px;
    font-weight: 500;
    font-size: .875rem;
    padding: .5rem 1.1rem;
    transition: all var(--transition);
}
.btn-primary {
    background: var(--clr-primary);
    border-color: var(--clr-primary);
}
.btn-primary:hover {
    background: var(--clr-primary-dark);
    border-color: var(--clr-primary-dark);
}
.btn-dark { border-radius: 8px; }

/* ─── Login page ──────────────────────────────────────────────── */
.login-wrap {
    min-height: calc(100vh - 130px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-card {
    width: 100%;
    max-width: 430px;
    border-radius: 18px;
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.login-header {
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
    padding: 2rem 2rem 1.5rem;
    text-align: center;
    color: #fff;
}
.login-header .login-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255,255,255,.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: .75rem;
}
.login-body {
    padding: 2rem;
    background: var(--clr-surface);
}

/* ─── Portal page header ──────────────────────────────────────── */
.portal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--clr-border);
}
.portal-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -.3px;
}
.role-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    border-radius: 20px;
    background: #f1f5f9;
    color: var(--clr-muted);
    font-size: .8rem;
    font-weight: 600;
    border: 1px solid var(--clr-border);
}

/* ─── Account balance card ────────────────────────────────────── */
.balance-card {
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
    color: #fff;
    border-radius: var(--radius-card);
    padding: 1.4rem 1.5rem;
    border: none;
    box-shadow: var(--shadow-md);
}
.balance-card .balance-label {
    font-size: .78rem;
    font-weight: 500;
    opacity: .8;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.balance-card .balance-value {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.1;
    margin-top: .25rem;
}

.payment-method-pill {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .7rem .9rem;
    border-radius: 12px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: var(--clr-primary);
    font-weight: 600;
}

.payment-summary-card {
    border: 1px solid var(--clr-border);
    border-radius: 14px;
    background: #f8fafc;
    padding: .85rem .95rem;
}

.payment-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: .9rem;
    color: var(--clr-text);
    padding: .15rem 0;
}

.payment-summary-row.total {
    margin-top: .4rem;
    padding-top: .65rem;
    border-top: 1px solid var(--clr-border);
    font-size: .98rem;
}

.stripe-card-element {
    min-height: 46px;
    padding: .75rem .9rem;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .03);
}

.payment-status-message {
    margin-bottom: 0;
}

.chart-list {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.chart-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
}

.chart-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--clr-muted);
}

.chart-track {
    width: 100%;
    height: 12px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.chart-bar {
    height: 100%;
    border-radius: 999px;
}

.chart-bar-primary {
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.chart-bar-success {
    background: linear-gradient(90deg, #16a34a, #4ade80);
}

.chart-value {
    font-size: .84rem;
    font-weight: 700;
    color: var(--clr-text);
    white-space: nowrap;
}

/* ─── Vacancy table pill cells ────────────────────────────────── */
.rent-cell {
    font-weight: 600;
    color: var(--clr-primary);
}

/* ─── Footer ──────────────────────────────────────────────────── */
.site-footer {
    border-top: 1px solid var(--clr-border);
    background: var(--clr-surface);
}
.footer-link {
    color: var(--clr-muted);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
}
.footer-link:hover { color: var(--clr-primary); }

/* ─── About page ──────────────────────────────────────────────── */
.about-hero {
    min-height: 430px;
    padding: 4.5rem;
    border-radius: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 78% 20%, rgba(255,255,255,.12) 0 3px, transparent 4px),
        radial-gradient(circle at 85% 78%, rgba(255,255,255,.08) 0 2px, transparent 3px),
        linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #2563eb 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    overflow: hidden;
    position: relative;
}
.about-hero::after {
    content: '';
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    position: absolute;
    right: -80px;
    top: -150px;
}
.about-hero-content {
    max-width: 670px;
    position: relative;
    z-index: 1;
}
.about-eyebrow,
.about-section-label {
    display: inline-block;
    color: var(--clr-primary);
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: .8rem;
}
.about-eyebrow { color: #93c5fd; }
.about-hero h1 {
    max-width: 650px;
    font-size: clamp(2.35rem, 5vw, 4rem);
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1.05;
    margin-bottom: 1.25rem;
}
.about-hero-copy {
    max-width: 620px;
    color: #dbeafe;
    font-size: 1.08rem;
    line-height: 1.75;
    margin: 0;
}
.about-hero-outline {
    border: 1px solid rgba(255,255,255,.45);
    color: #fff;
}
.about-hero-outline:hover {
    border-color: #fff;
    background: rgba(255,255,255,.1);
    color: #fff;
}
.about-hero-mark {
    width: 175px;
    height: 175px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font-size: 1.6rem;
    font-weight: 700;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.about-hero-mark i {
    color: #fbbf24;
    font-size: 1.15rem;
    transform: rotate(-35deg);
}
.about-heading {
    color: var(--clr-text);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.15;
    margin-bottom: 1.25rem;
}
.about-copy {
    color: var(--clr-muted);
    font-size: 1rem;
    line-height: 1.8;
}
.about-principles {
    border: 1px solid var(--clr-border);
    border-radius: 20px;
    background: var(--clr-surface);
    box-shadow: var(--shadow-md);
    padding: .5rem 1.5rem;
}
.about-principle {
    display: flex;
    gap: 1rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--clr-border);
}
.about-principle:last-child { border-bottom: none; }
.about-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #eff6ff;
    color: var(--clr-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.about-principle h3 {
    font-size: .98rem;
    font-weight: 700;
    margin: 0 0 .25rem;
}
.about-principle p {
    color: var(--clr-muted);
    font-size: .85rem;
    line-height: 1.55;
    margin: 0;
}
.about-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.about-gallery-item {
    min-height: 240px;
    margin: 0;
    border-radius: 16px;
    background: #e2e8f0;
    overflow: hidden;
    position: relative;
}
.about-gallery-item img {
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.about-gallery-item:hover img { transform: scale(1.025); }
.about-gallery-item figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 2.5rem 1rem .9rem;
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    background: linear-gradient(transparent, rgba(15,23,42,.85));
}
.about-gallery-featured {
    grid-column: span 2;
}
.owner-section {
    border: 1px solid var(--clr-border);
    border-radius: 22px;
    overflow: hidden;
    background: var(--clr-surface);
    box-shadow: var(--shadow-sm);
}
.owner-portrait {
    min-height: 440px;
    height: 100%;
    padding: 2.5rem;
    color: #fff;
    background:
        linear-gradient(rgba(15,23,42,.2), rgba(15,23,42,.2)),
        linear-gradient(145deg, #1d4ed8, #0f172a);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.owner-monogram {
    width: 150px;
    height: 150px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.1);
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 1.5rem;
}
.owner-portrait span {
    color: #bfdbfe;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .8px;
    line-height: 1.7;
    text-transform: uppercase;
}
.owner-copy {
    padding: clamp(2rem, 6vw, 4.5rem);
}
.owner-copy > p {
    color: var(--clr-muted);
    line-height: 1.8;
}
.owner-copy blockquote {
    color: var(--clr-text);
    font-family: Georgia, serif;
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.65;
    margin: 1.5rem 0;
    padding-left: 1.25rem;
    border-left: 3px solid var(--clr-accent);
}
.owner-copy .owner-signoff {
    color: var(--clr-primary);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.owners-hero {
    padding: 4rem;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(130deg, #0f172a, #1e3a8a 70%, #2563eb);
}
.owners-hero h1 {
    font-size: clamp(2.35rem, 5vw, 4rem);
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1.05;
    margin-bottom: 1.25rem;
}
.owners-hero p {
    max-width: 680px;
    color: #dbeafe;
    font-size: 1.05rem;
    line-height: 1.75;
    margin: 0;
}
.owners-primary-photo {
    border-radius: 20px;
    overflow: hidden;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-md);
}
.owners-primary-photo img {
    width: 100%;
    min-height: 460px;
    max-height: 600px;
    object-fit: cover;
    display: block;
}
.owners-primary-photo div {
    padding: .9rem 1rem;
    color: var(--clr-muted);
    font-size: .84rem;
}
.owners-placeholder {
    min-height: 460px;
    border-radius: 20px;
}
.owners-quote {
    margin: 1.75rem 0 0;
    padding: 1.4rem 1.5rem;
    border-left: 4px solid var(--clr-accent);
    border-radius: 0 12px 12px 0;
    background: #fffbeb;
    color: var(--clr-text);
    font-family: Georgia, serif;
    font-size: 1.12rem;
    font-style: italic;
    line-height: 1.7;
}
.about-cta {
    padding: 2rem 2.25rem;
    border: 1px solid #bfdbfe;
    border-radius: 18px;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.about-cta .about-section-label { margin-bottom: .35rem; }
.about-cta h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: .35rem;
}
.about-cta p {
    color: var(--clr-muted);
    font-size: .9rem;
}
.about-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .65rem;
}

@media (max-width: 767px) {
    .about-hero {
        min-height: 0;
        padding: 3rem 1.5rem;
    }
    .about-hero-mark { display: none; }
    .about-hero h1 { letter-spacing: -1px; }
    .owner-portrait { min-height: 300px; }
    .owners-hero { padding: 3rem 1.5rem; }
    .owners-hero h1 { letter-spacing: -1px; }
    .about-gallery { grid-template-columns: 1fr; }
    .about-gallery-featured { grid-column: auto; }
    .owners-primary-photo img { min-height: 340px; }
    .about-cta {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.5rem;
    }
    .about-cta-actions { justify-content: flex-start; }
}

/* ─── Utilities ───────────────────────────────────────────────── */
.text-muted { color: var(--clr-muted) !important; }
.rounded-xl { border-radius: var(--radius-card); }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }

/* ─── Search bar ──────────────────────────────────────────────── */
.search-bar-wrap {
    background: rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    backdrop-filter: blur(4px);
}

.search-bar {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.18);
}

.search-field {
    display: flex;
    flex-direction: column;
    padding: .55rem .9rem;
    flex: 1;
    min-width: 0;
}
.search-field-state { max-width: 210px; border-right: 1px solid #e2e8f0; }
.search-field-location { flex: 2; }

.search-label {
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #64748b;
    margin-bottom: .15rem;
}

.search-select,
.search-input {
    border: none;
    outline: none;
    font-size: .92rem;
    font-weight: 500;
    color: #1e293b;
    background: transparent;
    padding: 0;
    width: 100%;
}
.search-select { cursor: pointer; }

.search-btn {
    background: var(--clr-primary);
    color: #fff;
    border: none;
    font-size: .9rem;
    font-weight: 600;
    padding: 0 1.6rem;
    flex-shrink: 0;
    cursor: pointer;
    transition: background var(--transition);
}
.search-btn:hover { background: var(--clr-primary-dark); }

.search-divider {
    width: 1px;
    background: #e2e8f0;
    margin: .5rem 0;
    flex-shrink: 0;
}

/* Advanced filter chips */
.filter-chip-select {
    border: 1.5px solid rgba(255,255,255,.4);
    border-radius: 20px;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: .82rem;
    font-weight: 500;
    padding: .28rem .75rem;
    cursor: pointer;
    outline: none;
    transition: background var(--transition);
}
.filter-chip-select:focus { background: rgba(255,255,255,.28); }
.filter-chip-select option { color: #1e293b; background: #fff; }

.filter-label {
    color: rgba(255,255,255,.8);
    font-size: .82rem;
    font-weight: 500;
    white-space: nowrap;
}

.filter-rent-input {
    border: 1.5px solid rgba(255,255,255,.4);
    border-radius: 8px;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: .82rem;
    font-weight: 500;
    padding: .28rem .6rem;
    width: 80px;
    outline: none;
}
.filter-rent-input::placeholder { color: rgba(255,255,255,.55); }

.filter-chip-clear {
    color: rgba(255,255,255,.85);
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
    padding: .28rem .7rem;
    border: 1.5px solid rgba(255,255,255,.35);
    border-radius: 20px;
    transition: background var(--transition);
}
.filter-chip-clear:hover { background: rgba(255,255,255,.15); color: #fff; }

/* Responsive search bar */
@media (max-width: 600px) {
    .search-bar { flex-direction: column; border-radius: 10px; }
    .search-field-state { max-width: 100%; border-right: none; border-bottom: 1px solid #e2e8f0; }
    .search-divider { display: none; }
    .search-btn { border-radius: 0 0 10px 10px; padding: .7rem 1rem; }
}

/* Prop card link wrapper */
.prop-card-link { text-decoration: none; color: inherit; }
.prop-card-link:hover .prop-card { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.prop-card-link:hover .prop-name { color: var(--clr-primary); }

/* Clickable unit row */
.unit-row:hover { background: #eff6ff !important; }

/* ─── Property detail page ────────────────────────────────────── */
.detail-hero-img {
    width: 100%;
    max-height: 440px;
    object-fit: cover;
    border-radius: var(--radius-card);
    display: block;
}

.detail-hero-placeholder {
    width: 100%;
    height: 300px;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 3rem;
}

.detail-carousel {
    border-radius: var(--radius-card);
    overflow: hidden;
    position: relative;
}

.carousel-image-count {
    position: absolute;
    bottom: 12px;
    right: 14px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: 20px;
    z-index: 10;
}

.detail-prop-name {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--clr-text);
}

.detail-address {
    font-size: .9rem;
    color: var(--clr-muted);
}

.detail-stats-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    padding: .9rem 1rem;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid var(--clr-border);
}

.detail-stat {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.1rem;
}

.detail-stat-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--clr-muted);
}

.detail-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--clr-text);
}

.detail-contact-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-card);
    padding: 1.3rem 1.4rem;
    box-shadow: var(--shadow-sm);
}

.detail-contact-heading {
    font-size: .95rem;
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: .85rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--clr-border);
}

.detail-contact-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .88rem;
    color: var(--clr-text);
    margin-bottom: .6rem;
}

.detail-info-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-card);
    padding: 1.2rem 1.4rem;
    box-shadow: var(--shadow-sm);
    height: 100%;
}

.detail-info-heading {
    font-size: .95rem;
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: .6rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--clr-border);
}

.detail-policy-row {
    display: flex;
    gap: .6rem;
    font-size: .85rem;
    color: var(--clr-text);
    padding: .4rem 0;
    border-bottom: 1px solid #f1f5f9;
}
.detail-policy-row:last-child { border-bottom: none; }

.detail-policy-label {
    font-weight: 600;
    color: var(--clr-muted);
    white-space: nowrap;
    min-width: 90px;
}

/* Amenity chip */
.amenity-chip {
    font-size: .75rem;
    font-weight: 500;
    padding: .28rem .65rem;
    border-radius: 20px;
    background: #eff6ff;
    color: var(--clr-primary);
    border: 1px solid #bfdbfe;
}

.amenity-chip-teal {
    background: #f0fdfa;
    color: #0d9488;
    border-color: #99f6e4;
}
.amenity-detail-list {
    display: flex;
    flex-direction: column;
}
.amenity-detail-item {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .7rem 0;
    border-bottom: 1px solid #f1f5f9;
}
.amenity-detail-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.amenity-detail-item i {
    color: var(--clr-success);
    margin-top: .15rem;
}
.amenity-detail-item strong {
    display: block;
    color: var(--clr-text);
    font-size: .88rem;
}
.amenity-detail-item span {
    display: block;
    color: var(--clr-muted);
    font-size: .82rem;
    line-height: 1.5;
    margin-top: .1rem;
}

/* Unit listing card */
.unit-listing-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
}
.unit-listing-card[role="link"] {
    cursor: pointer;
}
.unit-listing-card[role="link"]:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .28);
    outline-offset: 2px;
}
.unit-listing-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.unit-listing-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

.unit-listing-img-placeholder {
    width: 100%;
    height: 160px;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 2.2rem;
}

.unit-listing-body {
    padding: .9rem 1rem 1rem;
}

.unit-number {
    font-size: .92rem;
    font-weight: 700;
    color: var(--clr-text);
}

.unit-rent {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--clr-primary);
}

.unit-rent-label {
    font-size: .7rem;
    font-weight: 500;
    color: var(--clr-muted);
    margin-left: .15rem;
}

.unit-meta {
    display: flex;
    gap: .8rem;
    font-size: .8rem;
    color: var(--clr-muted);
    margin-top: .25rem;
    flex-wrap: wrap;
}

.unit-amenity-tag {
    font-size: .68rem;
    font-weight: 500;
    padding: .15rem .45rem;
    border-radius: 4px;
    background: #f1f5f9;
    color: #475569;
}
.unit-amenity-tag.muted { color: #94a3b8; }

.unit-detail-rent-card {
    min-width: 168px;
    padding: .9rem 1rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #bfdbfe;
}

.unit-detail-rent-label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #1d4ed8;
    margin-bottom: .2rem;
}

.unit-detail-rent-value {
    font-size: 1.6rem;
    line-height: 1.1;
    font-weight: 700;
    color: var(--clr-primary);
}

/* ─── Photo management (portal) ───────────────────────────────── */
.btn-xs {
    font-size: .75rem;
    padding: .22rem .55rem;
    border-radius: 6px;
    font-weight: 500;
}

/* Property management block */
.prop-mgmt-block {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.prop-mgmt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--clr-border);
    background: #f8fafc;
}

.prop-mgmt-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--clr-text);
}

/* Photo upload card */
.photo-upload-card {
    background: var(--clr-surface);
    border: 1.5px dashed var(--clr-border);
    border-radius: var(--radius-card);
    padding: 1.5rem 1.75rem;
}

.photo-upload-heading {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--clr-text);
}

.photo-upload-hint {
    font-size: .78rem;
    color: var(--clr-muted);
}

/* Photo card in gallery */
.photo-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}

.photo-card:hover { box-shadow: var(--shadow-md); }

.photo-card-primary {
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 2px rgba(37,99,235,.18);
}

.photo-card-img-wrap {
    position: relative;
}

.photo-card-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

.photo-primary-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--clr-primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: .18rem .5rem;
    border-radius: 20px;
    letter-spacing: .2px;
}

.photo-card-body {
    padding: .65rem .8rem .8rem;
}

.photo-card-alt {
    font-size: .78rem;
    color: var(--clr-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}