/* =============================================================
   Property Vista — front-end stylesheet
   Developed by Digital Webars (https://www.digitalwebars.com/)
   ============================================================= */

:root {
    --green-900: #0a2d1e;
    --green-800: #0f4430;
    --green-700: #14563c;
    --green-600: #1c6b4b;
    --gold-700: #9a7327;
    --gold-600: #b3872f;
    --gold-500: #c39a45;
    --gold-200: #e8d9b6;
    --gold-100: #f4ead6;

    --cream-50: #fdfbf7;
    --cream-100: #faf6ef;
    --cream-200: #f6f0e4;
    --cream-300: #efe6d5;

    --ink: #191919;
    --ink-2: #3d3a35;
    --muted: #6e6a63;
    --muted-2: #918c84;
    --line: #e9e2d6;
    --line-2: #f0ebe1;
    --white: #ffffff;

    --danger: #b3261e;
    --success: #176b45;
    --info: #1c5d86;
    --warn: #9a6b12;

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(25, 25, 25, .05);
    --shadow-sm: 0 2px 8px rgba(25, 25, 25, .06);
    --shadow: 0 6px 24px rgba(25, 25, 25, .08);
    --shadow-lg: 0 18px 50px rgba(25, 25, 25, .12);

    --font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    --container: 1200px;
    --header-h: 68px;
    --gutter: 24px;
}

/* ---------- reset ---------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* `clip` (not `hidden`) so sticky headers and sidebars keep working. */
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    overflow-wrap: break-word;
}

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

iframe, embed, object { max-width: 100%; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: 0; padding: 0; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; line-height: 1.25; }

p { margin: 0 0 1em; }

ul, ol { margin: 0; padding: 0; list-style: none; }

table { border-collapse: collapse; width: 100%; }

hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }

:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 2px; }

/* The header is sticky, so an in-page anchor would otherwise land underneath it. */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ---------- layout ---------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.container-narrow { max-width: 860px; }

/* padding-block, not the shorthand: these classes are used on the same element
   as .container (<div class="container section">), and a shorthand would reset
   the container gutter to zero and push the content into the screen edge. */
.section { padding-block: 56px; }
.section-sm { padding-block: 36px; }
.section-lg { padding-block: 76px; }

.bg-cream { background: var(--cream-100); }
.bg-cream-2 { background: var(--cream-200); }
.bg-white { background: var(--white); }

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.wrap { flex-wrap: wrap; }
.ml-auto { margin-left: auto; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.w-full { width: 100%; }

/* ---------- typography ---------- */

.display { font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em; }

.h1 { font-family: var(--font-display); font-size: 46px; font-weight: 500; line-height: 1.14; }
.h2 { font-family: var(--font-display); font-size: 30px; font-weight: 500; line-height: 1.2; }
.h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; }
.h4 { font-size: 17px; font-weight: 600; }

.lead { font-size: 16px; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.strong { font-weight: 600; }
.gold { color: var(--gold-600); }
.green { color: var(--green-800); }
.uppercase { text-transform: uppercase; letter-spacing: .08em; }

.prose { color: var(--ink-2); font-size: 15.5px; line-height: 1.8; }
.prose h2 { font-family: var(--font-display); font-size: 24px; margin: 32px 0 12px; color: var(--ink); }
.prose h3 { font-size: 18px; margin: 26px 0 10px; }
.prose p { margin: 0 0 16px; }
.prose ul { list-style: disc; padding-left: 20px; margin: 0 0 16px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--gold-700); text-decoration: underline; }

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
    white-space: nowrap;
}

.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--green-800); color: #fff; }
.btn-primary:hover { background: var(--green-700); }

.btn-gold { background: var(--gold-600); color: #fff; }
.btn-gold:hover { background: var(--gold-700); }

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

.btn-ghost { color: var(--ink); }
.btn-ghost:hover { color: var(--green-800); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #8f1e17; }

.btn-light { background: #fff; color: var(--green-800); }
.btn-light:hover { background: var(--cream-200); }

.btn-sm { padding: 7px 13px; font-size: 13px; }
.btn-lg { padding: 14px 26px; font-size: 15px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; pointer-events: none; }

.btn-icon {
    width: 38px; height: 38px; padding: 0;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon:hover { border-color: var(--green-800); color: var(--green-800); }

.link-more {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--gold-700); font-size: 13.5px; font-weight: 600;
}
.link-more:hover { color: var(--gold-600); }

/* ---------- header ---------- */

.site-header {
    background: #fff;
    border-bottom: 1px solid var(--line-2);
    position: sticky;
    top: 0;
    z-index: 60;
}

.header-inner {
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 28px;
}

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand svg { width: 34px; height: 34px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text .b1 {
    font-family: var(--font-display);
    font-size: 15px; font-weight: 700; letter-spacing: .04em;
    color: var(--green-800); text-transform: uppercase;
}
.brand-text .b2 {
    font-family: var(--font-display);
    font-size: 15px; font-weight: 700; letter-spacing: .16em;
    color: var(--gold-600); text-transform: uppercase;
}

.main-nav { display: flex; align-items: center; gap: 26px; margin: 0 auto; }
.main-nav a {
    font-size: 14px; font-weight: 500; color: var(--ink-2);
    padding: 6px 0; position: relative;
}
.main-nav a:hover { color: var(--green-800); }
.main-nav a.is-active { color: var(--green-800); font-weight: 600; }
.main-nav a.is-active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
    height: 2px; background: var(--gold-600); border-radius: 2px;
}

.header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.header-actions .signin {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 14px; font-weight: 500; color: var(--ink-2);
}
.header-actions .signin:hover { color: var(--green-800); }

.nav-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; }

.mobile-nav {
    display: none;
    border-top: 1px solid var(--line-2);
    background: #fff;
    padding: 12px 0 18px;
    max-height: calc(100vh - var(--header-h));
    /* Phone browsers shrink the visible area as their toolbars slide in; dvh
       tracks that, vh does not. Ignored by browsers that lack dvh. */
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; padding: 11px 0; font-size: 15px; border-bottom: 1px solid var(--line-2); }
.mobile-nav .btn { margin-top: 14px; }

/* ---------- hero ---------- */

.hero { position: relative; }

.hero-media { position: relative; min-height: 500px; aspect-ratio: 1800 / 680; display: flex; align-items: center; }
.hero-media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(253, 250, 244, .96) 0%, rgba(253, 250, 244, .82) 30%, rgba(253, 250, 244, .18) 56%, rgba(0, 0, 0, .05) 100%);
}
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.hero-content { position: relative; z-index: 2; padding: 54px 0 110px; max-width: 560px; }
.hero-title { font-family: var(--font-display); font-size: 52px; font-weight: 500; line-height: 1.1; color: var(--green-900); }
.hero-title .accent { color: var(--gold-600); display: block; }
.hero-sub { margin-top: 18px; font-size: 15px; color: var(--ink-2); max-width: 420px; white-space: pre-line; }

/* search panel that overlaps the hero */

.search-wrap { position: relative; z-index: 3; margin-top: -74px; }

.search-tabs { display: flex; gap: 0; }
.search-tabs button {
    padding: 11px 26px;
    font-size: 14px; font-weight: 600;
    background: rgba(255, 255, 255, .85);
    color: var(--ink-2);
    border-radius: 8px 8px 0 0;
}
.search-tabs button.is-active { background: var(--green-800); color: #fff; }

.search-panel {
    background: #fff;
    border-radius: 0 12px 12px 12px;
    box-shadow: var(--shadow);
    padding: 12px;
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr .85fr auto;
    align-items: stretch;
    gap: 0;
}

.search-field {
    display: flex; align-items: center; gap: 11px;
    padding: 8px 16px;
    border-right: 1px solid var(--line-2);
    min-width: 0;
}
.search-field:last-of-type { border-right: 0; }
.search-field .fi {
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: var(--radius-sm);
    background: var(--cream-200);
    display: flex; align-items: center; justify-content: center;
    color: var(--green-800);
}
.search-field .fb { min-width: 0; flex: 1; }
.search-field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 1px; }
.search-field input, .search-field select {
    width: 100%; border: 0; padding: 0; background: transparent;
    font-size: 13px; color: var(--muted); outline: none;
}
.search-field select { cursor: pointer; }
.search-range { display: flex; align-items: center; gap: 6px; }
.search-range input { width: 100%; }
.search-range span { color: var(--muted-2); font-size: 13px; }
.search-panel .btn { margin-left: 10px; align-self: center; }

/* Keep the desktop search card inside the hero artwork, as in the homepage
   composition. The home-specific class prevents embedded search forms on
   listing pages from inheriting this positioning. */
@media (min-width: 1101px) {
    .home-hero .hero-media {
        height: 482px;
        min-height: 482px;
        aspect-ratio: auto;
    }

    .home-hero .hero-media > .container,
    .home-hero > .container { max-width: 1100px; }

    .home-hero .hero-content { transform: translateY(-25px); }

    .home-hero > .container {
        position: absolute;
        z-index: 3;
        right: 0;
        bottom: 15px;
        left: 0;
    }

    .home-hero .search-wrap { margin-top: 0; }
}

/* ---------- feature strip ---------- */

.feature-strip { padding: 34px 0 6px; }
.feature-item { display: flex; align-items: flex-start; gap: 14px; }
.feature-icon {
    width: 46px; height: 46px; flex: 0 0 46px;
    border-radius: var(--radius-pill);
    background: var(--cream-200);
    border: 1px solid var(--gold-200);
    display: flex; align-items: center; justify-content: center;
    color: var(--green-800);
}
.feature-item h4 { font-size: 14.5px; font-weight: 600; margin-bottom: 3px; }
.feature-item p { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.5; }

/* ---------- section head ---------- */

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.section-head h2 { font-family: var(--font-display); font-size: 29px; font-weight: 500; }
.section-head p { margin: 5px 0 0; font-size: 14px; color: var(--muted); }

/* ---------- property card ---------- */

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    display: flex; flex-direction: column;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--line); }

.card-media { position: relative; aspect-ratio: 16 / 10.5; overflow: hidden; background: var(--cream-200); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.card:hover .card-media img { transform: scale(1.04); }

.card-badge {
    position: absolute; top: 12px; left: 12px;
    background: #fff; color: var(--ink);
    font-size: 11.5px; font-weight: 600;
    padding: 5px 11px; border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
}
.card-badge.green { background: var(--green-800); color: #fff; }
.card-badge.gold { background: var(--gold-600); color: #fff; }

.card-fav {
    position: absolute; top: 11px; right: 11px;
    width: 32px; height: 32px; border-radius: var(--radius-pill);
    background: #fff; box-shadow: var(--shadow-xs);
    display: flex; align-items: center; justify-content: center;
    color: var(--muted);
}
.card-fav:hover { color: var(--danger); }
.card-fav.is-saved { color: var(--danger); }
.card-fav.is-saved svg { fill: currentColor; }

.card-body { padding: 14px 15px 16px; display: flex; flex-direction: column; flex: 1; }
.card-title { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.card-title:hover { color: var(--green-800); }

.card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 7px; }
.card-loc { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.card-loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-price { font-size: 14.5px; font-weight: 700; color: var(--green-800); white-space: nowrap; }

.card-meta {
    margin-top: 11px; padding-top: 11px;
    border-top: 1px solid var(--line-2);
    display: flex; align-items: center; gap: 10px;
    font-size: 12.5px; color: var(--muted);
}
.card-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); }

/* ---------- area card ---------- */

.area-card {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
.area-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.area-media { aspect-ratio: 4 / 3; background: var(--cream-200); }
.area-media img { width: 100%; height: 100%; object-fit: cover; }
.area-body { padding: 10px 12px 12px; display: flex; align-items: center; gap: 9px; }
.area-ico { color: var(--gold-600); flex: 0 0 auto; }
.area-body h4 { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.area-body p { margin: 1px 0 0; font-size: 11.5px; color: var(--muted); }

/* ---------- loan strip ---------- */

.loan-strip {
    background: var(--cream-100);
    border: 1px solid var(--gold-200);
    border-radius: var(--radius-lg);
    padding: 26px 30px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
}
.loan-badge {
    width: 74px; height: 74px; border-radius: var(--radius-pill);
    background: var(--gold-100); border: 1px solid var(--gold-200);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold-700);
}
.loan-copy h2 { font-family: var(--font-display); font-size: 25px; font-weight: 500; }
.loan-copy p { margin: 6px 0 14px; font-size: 13.5px; color: var(--muted); max-width: 330px; }
/* Copy on the left, stats on the right — used on the about/blog/faq pages.
   A class rather than an inline style so the breakpoints below can win. */
.loan-strip.is-split { grid-template-columns: 1fr auto; }

.loan-stats { display: flex; align-items: stretch; }
.loan-stat { padding: 0 30px; border-left: 1px solid var(--gold-200); text-align: center; }
.loan-stat:first-child { border-left: 0; }
.loan-stat .k { font-size: 11.5px; color: var(--muted); }
.loan-stat .v { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--green-800); margin: 2px 0; }
.loan-stat .s { font-size: 11.5px; color: var(--muted); }

/* ---------- project card ---------- */

.project-card { position: relative; }
.project-card .card-media { aspect-ratio: 16 / 11; }
.project-card .card-body { padding: 13px 14px 15px; }
.project-units { margin-top: 8px; font-size: 12.5px; color: var(--muted); }

.carousel { position: relative; }
.carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * 22px) / 4);
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; }

/* Three-up variant (testimonials). */
.carousel-track.cols-3 { grid-auto-columns: calc((100% - 2 * 22px) / 3); }
.carousel-btn {
    position: absolute; top: 38%; right: -14px;
    width: 34px; height: 34px; border-radius: var(--radius-pill);
    background: var(--gold-600); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm); z-index: 2;
}
.carousel-btn:hover { background: var(--gold-700); }
.carousel-btn.prev { left: -14px; right: auto; }
/* display:flex above outranks the UA rule for [hidden], so say it explicitly —
   app.js hides the arrows when the track has nothing left to scroll. */
.carousel-btn[hidden] { display: none; }

/* ---------- testimonials ---------- */

.quote-card {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); padding: 20px 22px 18px;
    display: flex; flex-direction: column; gap: 12px; height: 100%;
}
.quote-mark { color: var(--gold-500); font-family: var(--font-display); font-size: 34px; line-height: .7; }
.stars { display: inline-flex; gap: 2px; color: var(--gold-500); }
.quote-text { font-size: 13.5px; color: var(--ink-2); line-height: 1.65; flex: 1; margin: 0; }
.quote-person { display: flex; align-items: center; gap: 11px; }
.quote-person img { width: 38px; height: 38px; border-radius: var(--radius-pill); object-fit: cover; }
.quote-person .n { font-size: 13.5px; font-weight: 600; }
.quote-person .r { font-size: 11.5px; color: var(--muted); }

/* On phones the dots are the only sign the row swipes, so each one gets a box
   far bigger than the mark it draws — a 7px target is not tappable. */
.dots { display: flex; justify-content: center; gap: 0; margin-top: 26px; }
.dots[hidden] { display: none; }
.dots > * {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 26px;
}
.dots > *::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--line); transition: width .2s ease, background .2s ease;
}
.dots > *.is-active::before { background: var(--gold-600); width: 18px; border-radius: 4px; }

/* ---------- app promo ---------- */

/* The showcase PNG ships with a flat grey studio backdrop, so it cannot sit on
   the green panel as a plain floating image. It bleeds to the panel edges
   instead and is masked + tinted into the green, which reads as one object. */
.app-panel {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(115% 130% at 88% 8%, rgba(195, 154, 69, .26), transparent 58%),
        linear-gradient(135deg, var(--green-700) 0%, var(--green-800) 42%, var(--green-900) 100%);
    border: 1px solid rgba(232, 217, 182, .16);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    color: #fff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    align-items: stretch;
    overflow: hidden;
}

/* Fine gold hairline along the top edge, the same accent used on cards. */
.app-panel::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 217, 182, .5), transparent);
    z-index: 2;
}

.app-media {
    position: relative;
    min-height: 320px;
    align-self: stretch;
}
.app-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
    /* Fade the studio backdrop out towards the copy instead of ending on a
       hard grey rectangle. */
    -webkit-mask-image: linear-gradient(100deg, #000 42%, rgba(0, 0, 0, .55) 72%, transparent 97%);
    mask-image: linear-gradient(100deg, #000 42%, rgba(0, 0, 0, .55) 72%, transparent 97%);
}
/* Green wash pulls the neutral grey of the photo into the panel palette. It
   carries the same mask as the image, so the two fade out together and the
   column edge never shows as a seam against the panel gradient. */
.app-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(10, 45, 30, .12) 0%, rgba(15, 68, 48, .3) 52%, rgba(15, 68, 48, .82) 88%);
    -webkit-mask-image: linear-gradient(100deg, #000 42%, rgba(0, 0, 0, .55) 72%, transparent 97%);
    mask-image: linear-gradient(100deg, #000 42%, rgba(0, 0, 0, .55) 72%, transparent 97%);
    pointer-events: none;
}

.app-content {
    position: relative;
    z-index: 1;
    padding: 46px 46px 46px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.app-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border: 1px solid rgba(232, 217, 182, .3);
    border-radius: var(--radius-pill);
    background: rgba(232, 217, 182, .1);
    color: var(--gold-200);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.app-content h2 {
    margin: 16px 0 0;
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -.01em;
}
.app-content > p {
    margin: 12px 0 0;
    max-width: 42ch;
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .8);
    white-space: pre-line;
}

.store-badges {
    display: flex;
    flex-wrap: wrap;
    /* Without this a wrapped, stretched flex line would blow the badges up to
       fill whatever height the copy column happens to have. */
    align-content: flex-start;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
}
.store-badge {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 168px;
    padding: 9px 18px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, .55);
    color: #fff;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.store-badge:hover,
.store-badge:focus-visible {
    background: #000;
    border-color: rgba(232, 217, 182, .55);
    transform: translateY(-2px);
}
/* Both label lines stay nowrap at every width — a wrapped "App / Store" is the
   one thing that makes a store badge stop reading as a store badge. */
.store-badge .t1 { display: block; font-size: 9.5px; line-height: 1.15; opacity: .78; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.store-badge .t2 { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; white-space: nowrap; }

.app-qr {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    width: 100%;
}
.app-qr-code {
    flex: 0 0 auto;
    display: block;
    padding: 7px;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.app-qr-code img { width: 74px; height: 74px; }
.app-qr-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.app-qr-text strong { font-size: 13.5px; font-weight: 600; }
.app-qr-text small { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .68); }

/* ---------- footer ---------- */

.site-footer { background: var(--cream-200); margin-top: 12px; }
.footer-main { padding: 44px 0 34px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.45fr; gap: 32px; }
.footer-about p { margin: 14px 0 16px; font-size: 12.5px; color: var(--muted); line-height: 1.65; max-width: 260px; }
.footer-social { display: flex; gap: 9px; }
.footer-social a {
    width: 30px; height: 30px; border-radius: var(--radius-pill);
    background: var(--green-800); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.footer-social a:hover { background: var(--gold-600); }

.footer-col h5 { font-size: 14px; font-weight: 600; margin-bottom: 14px; color: var(--ink); }
.footer-col li { margin-bottom: 9px; }
.footer-col a { font-size: 12.5px; color: var(--muted); }
.footer-col a:hover { color: var(--green-800); }

.footer-contact li { display: flex; gap: 9px; margin-bottom: 11px; font-size: 12.5px; color: var(--muted); }
.footer-contact [data-react-icon] { flex: 0 0 auto; margin-top: 2px; color: var(--gold-600); }
/* Transparent above the phone breakpoint, where it becomes an icon chip. */
.footer-contact-ico { display: contents; }

.footer-bottom {
    border-top: 1px solid var(--gold-200);
    padding: 15px 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    font-size: 12px; color: var(--muted);
}
.footer-bottom a:hover { color: var(--green-800); }
.footer-copyright { justify-self: start; }
.footer-legal-links {
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    white-space: nowrap;
}
.footer-credit { color: var(--muted); justify-self: center; white-space: nowrap; }
.footer-credit a { color: var(--gold-700); font-weight: 600; }
.footer-credit a:hover { text-decoration: underline; }

/* ---------- page header ---------- */

.page-head { background: var(--cream-100); border-bottom: 1px solid var(--line); padding: 34px 0; }
.page-head h1 { font-family: var(--font-display); font-size: 34px; font-weight: 500; }
.page-head p { margin: 7px 0 0; font-size: 14px; color: var(--muted); }

.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-bottom: 10px; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--green-800); }
.breadcrumb .sep { color: var(--muted-2); }

/* ---------- forms ---------- */

.field { margin-bottom: 16px; }
.field > label, .form-label {
    display: block; font-size: 13px; font-weight: 600;
    margin-bottom: 6px; color: var(--ink);
}
.field .hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
.field .err { font-size: 12px; color: var(--danger); margin-top: 5px; }

.input, .select, .textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 14px;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--green-800);
    box-shadow: 0 0 0 3px rgba(15, 68, 48, .09);
}
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--danger); }
.textarea { resize: vertical; min-height: 110px; }
.select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%236e6a63' d='M6 8.4 1.8 4.2l.9-.9L6 6.6l3.3-3.3.9.9z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; padding-right: 32px; }

.check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--green-800); width: 15px; height: 15px; flex: 0 0 auto; }

.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 18px; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }

/* ---------- alerts ---------- */

.alert {
    padding: 12px 16px; border-radius: var(--radius-sm);
    font-size: 13.5px; margin-bottom: 18px;
    border: 1px solid transparent;
    display: flex; gap: 10px; align-items: flex-start;
}
.alert-success { background: #eaf5ef; border-color: #bfe0cd; color: #145536; }
.alert-danger { background: #fdeeed; border-color: #f2c8c5; color: #8f1e17; }
.alert-info { background: #eaf2f8; border-color: #c5dcec; color: #16506f; }
.alert-warn { background: #fdf5e6; border-color: #eeddb5; color: #7a5510; }
.alert ul { margin: 4px 0 0; padding-left: 16px; list-style: disc; }

/* ---------- badges & pills ---------- */

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: var(--radius-pill);
    font-size: 11.5px; font-weight: 600;
    background: var(--cream-200); color: var(--ink-2);
}
.badge-green { background: #e6f1ec; color: var(--green-800); }
.badge-gold { background: var(--gold-100); color: var(--gold-700); }
.badge-red { background: #fdeeed; color: #8f1e17; }
.badge-blue { background: #eaf2f8; color: #16506f; }
.badge-grey { background: #f0f0ee; color: var(--muted); }

.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px; border-radius: var(--radius-pill);
    border: 1px solid var(--line); background: #fff;
    font-size: 13px; color: var(--ink-2);
}
.chip:hover, .chip.is-active { border-color: var(--green-800); background: var(--green-800); color: #fff; }

/* ---------- listing layout ---------- */

.listing-layout { display: grid; grid-template-columns: 268px 1fr; gap: 28px; align-items: start; }
/* A grid item defaults to min-width:auto, so one wide child (a scrolling table,
   a long word) can push the whole column past the viewport on a phone. */
.listing-layout > *, .detail-layout > *, .account-layout > *, .grid > * { min-width: 0; }

.filter-panel {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); padding: 18px;
    position: sticky; top: calc(var(--header-h) + 16px);
}
.filter-panel h3 { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.filter-group { border-top: 1px solid var(--line-2); padding: 14px 0; }
.filter-group:first-of-type { border-top: 0; padding-top: 0; }
.filter-group > label { font-size: 12.5px; font-weight: 600; display: block; margin-bottom: 8px; }
.filter-scroll { max-height: 170px; overflow-y: auto; padding-right: 4px; }
.filter-scroll .check { margin-bottom: 7px; font-size: 12.5px; }

/* Shown only once the sidebar collapses (see breakpoints). */
.filter-toggle { display: none; }

/* Filter row that sits above a listing grid (projects, agents). */
.inline-filters { display: flex; flex-wrap: wrap; gap: 12px; }
.inline-filters .input, .inline-filters .select { flex: 1 1 180px; }

.listing-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.listing-count { font-size: 13.5px; color: var(--muted); }
.listing-count strong { color: var(--ink); }

/* ---------- property detail ---------- */

.detail-layout { display: grid; grid-template-columns: 1fr 330px; gap: 30px; align-items: start; }

.gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; border-radius: var(--radius); overflow: hidden; }
.gallery-main { aspect-ratio: 16 / 11; background: var(--cream-200); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-side { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; }
.gallery-side > div { background: var(--cream-200); overflow: hidden; }
.gallery-side img { width: 100%; height: 100%; object-fit: cover; }

.fact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fact-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fact {
    background: var(--cream-100); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 13px 14px;
}
.fact .k { font-size: 11.5px; color: var(--muted); }
.fact .v { font-size: 15px; font-weight: 600; margin-top: 3px; }

.spec-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; }
.spec-list.cols-1 { grid-template-columns: 1fr; }
.spec-list li {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px;
}
.spec-list .k { color: var(--muted); }
.spec-list .v { font-weight: 600; }

.amenity-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; }
.amenity-list.cols-1 { grid-template-columns: 1fr; }
.amenity-list li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.amenity-list [data-react-icon] { color: var(--green-600); flex: 0 0 auto; }

.sidebar-card {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); padding: 20px;
    margin-bottom: 20px;
}
.sidebar-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.sidebar-sticky { position: sticky; top: calc(var(--header-h) + 16px); }

.agent-box { display: flex; gap: 13px; align-items: center; margin-bottom: 16px; }
.agent-box img { width: 54px; height: 54px; border-radius: var(--radius-pill); object-fit: cover; }
.agent-box .n { font-size: 15px; font-weight: 600; }
.agent-box .d { font-size: 12.5px; color: var(--muted); }

.price-block { padding-bottom: 16px; border-bottom: 1px solid var(--line-2); margin-bottom: 16px; }
.price-block .p { font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--green-800); }
.price-block .s { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

/* ---------- agent / blog cards ---------- */

.agent-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-align: center; padding: 22px 18px; }
.agent-card:hover { box-shadow: var(--shadow-sm); }
.agent-card img { width: 84px; height: 84px; border-radius: var(--radius-pill); object-fit: cover; margin: 0 auto 13px; }
.agent-card h4 { font-size: 15.5px; font-weight: 600; }
.agent-card .role { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.agent-card .stats { display: flex; justify-content: center; gap: 14px; margin-top: 11px; font-size: 12px; color: var(--muted); }

.post-card .card-media { aspect-ratio: 16 / 9.5; }
.post-card .card-body { gap: 6px; }
.post-meta { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--muted); }

/* ---------- misc ---------- */

.empty-state { text-align: center; padding: 54px 20px; color: var(--muted); }
.empty-state [data-react-icon] { color: var(--line); margin: 0 auto 14px; }
.empty-state h3 { font-family: var(--font-display); font-size: 21px; font-weight: 500; color: var(--ink); margin-bottom: 7px; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 34px; flex-wrap: wrap; }
.pagination a, .pagination span {
    min-width: 36px; height: 36px; padding: 0 11px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-size: 13.5px; background: #fff; color: var(--ink-2);
}
.pagination a:hover { border-color: var(--green-800); color: var(--green-800); }
.pagination .is-active { background: var(--green-800); border-color: var(--green-800); color: #fff; font-weight: 600; }
.pagination .is-disabled { opacity: .45; pointer-events: none; }

.accordion-item { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 10px; background: #fff; }
.accordion-item summary {
    padding: 14px 18px; font-size: 14.5px; font-weight: 600;
    cursor: pointer; list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary::after { content: '+'; font-size: 19px; color: var(--gold-600); line-height: 1; }
.accordion-item[open] summary::after { content: '−'; }
.accordion-item .acc-body { padding: 0 18px 16px; font-size: 13.5px; color: var(--muted); line-height: 1.7; }

/* ---------- stat tiles ----------
   Two shapes from one component: `.stat-tiles` welds them into a single
   bordered band (the 1px grid gap shows through as the divider), while a
   lone `.stat-tile` dropped into any grid stays a self-contained card. */

.stat-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.stat-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.stat-tiles > .stat-tile {
    border: 0;
    border-radius: 0;
    background: linear-gradient(180deg, #fff 0%, var(--cream-50) 100%);
}

/* A gold hairline wipes in on hover — the only motion the tile needs. */
.stat-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-200), var(--gold-500), var(--gold-200));
    transform: scaleX(0);
    transition: transform .35s ease;
}
.stat-tile:hover::before { transform: scaleX(1); }
.stat-tiles > .stat-tile:hover { background: #fff; }
.grid > .stat-tile:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }

.stat-tile .ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--radius-pill);
    background: var(--gold-100);
    border: 1px solid var(--gold-200);
    color: var(--gold-700);
    flex: 0 0 auto;
}

.stat-tile .v {
    font-family: var(--font-display);
    font-size: clamp(23px, 5vw, 31px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--green-800);
}

.stat-tile .k {
    max-width: 16ch;
    margin: 0 auto;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.map-frame { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; height: 300px; background: var(--cream-200); }
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* Wrapper that lets a wide table scroll sideways instead of being clipped. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table { min-width: 480px; }

/* ---------- auth ---------- */

.auth-wrap { min-height: calc(100vh - var(--header-h)); min-height: calc(100dvh - var(--header-h)); display: grid; grid-template-columns: 1fr 1fr; }
.auth-side { position: relative; background: var(--green-800); display: flex; align-items: center; overflow: hidden; }
.auth-side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.auth-side .inner { position: relative; z-index: 2; padding: 56px; color: #fff; max-width: 460px; }
.auth-side h2 { font-family: var(--font-display); font-size: 33px; font-weight: 500; line-height: 1.2; }
.auth-side p { margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, .82); }
.auth-side ul { margin-top: 24px; display: grid; gap: 12px; }
.auth-side li { display: flex; gap: 10px; font-size: 13.5px; color: rgba(255, 255, 255, .9); }

.auth-form { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.auth-form .inner { width: 100%; max-width: 400px; }
.auth-form h1 { font-family: var(--font-display); font-size: 29px; font-weight: 500; margin-bottom: 6px; }
.auth-form .sub { font-size: 13.5px; color: var(--muted); margin-bottom: 26px; }

/* ---------- account ---------- */

.account-layout { display: grid; grid-template-columns: 236px 1fr; gap: 28px; align-items: start; }
.account-nav { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.account-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: var(--radius-sm);
    font-size: 13.5px; color: var(--ink-2);
}
.account-nav a:hover { background: var(--cream-100); }
.account-nav a.is-active { background: var(--green-800); color: #fff; font-weight: 600; }

/* =============================================================
   responsive
   -------------------------------------------------------------
   1280  small laptops        980  tablet portrait
   1100  large tablets        760  large phones / small tablets
                              560  phones
                              400  small phones
   ============================================================= */

/* ---------- small laptops ---------- */

@media (max-width: 1280px) {
    :root { --gutter: 20px; }
}

/* ---------- large tablets (landscape) ---------- */

@media (max-width: 1100px) {
    /* Five tracks do not survive a tablet: the intro becomes a full-width
       masthead, the three link lists share the row below it, and the contact
       details run the full width as a 2 x 2 block. */
    .footer-main { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 26px; }
    .footer-about { grid-column: 1 / -1; padding-bottom: 26px; border-bottom: 1px solid var(--gold-200); }
    .footer-about p { max-width: 64ch; }
    .footer-contact-col { grid-column: 1 / -1; }
    .footer-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 26px; }
    /* Copyright, credit and legal links stop fitting one line here; centred
       rows read better than three cramped columns. */
    .footer-bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; }
    .footer-copyright, .footer-credit, .footer-legal-links { justify-self: center; }
    .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .carousel-track { grid-auto-columns: calc((100% - 2 * 22px) / 3); }
    .detail-layout { grid-template-columns: 1fr; }
    .sidebar-sticky { position: static; }
    .app-panel { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); }
    .app-content { padding: 38px 34px 38px 6px; }
    .app-content h2 { font-size: 30px; }

    .hero-title { font-size: 44px; }
    /* aspect-ratio plus min-height transfers a *minimum width* through the ratio
       (440px x 1800/680 = 1165px), which pushed the photo off the right edge on
       every tablet and every phone held sideways. The height is what matters here. */
    .hero-media { min-height: 440px; aspect-ratio: auto; }
    .header-inner { gap: 18px; }
    .main-nav { gap: 18px; }
    .search-panel { grid-template-columns: 1.2fr 1fr 1fr .8fr; }
    .search-panel .btn { grid-column: span 4; margin: 8px 0 0; width: 100%; }
}

/* ---------- tablet portrait ---------- */

@media (max-width: 980px) {
    /* Below this width the copy column can no longer hold a 34px display
       heading beside the photo, so the panel stacks: photo becomes a banner
       and the mask flips from a side fade to a bottom fade. */
    .app-panel { grid-template-columns: minmax(0, 1fr); }
    .app-media { min-height: 0; height: 250px; }
    /* Anchored near the top of the frame so the handsets read as peeking into
       the panel rather than as a slice taken out of their middles. */
    .app-media img {
        object-position: 50% 6%;
        -webkit-mask-image: linear-gradient(180deg, #000 46%, rgba(0, 0, 0, .55) 78%, transparent 99%);
        mask-image: linear-gradient(180deg, #000 46%, rgba(0, 0, 0, .55) 78%, transparent 99%);
    }
    /* Stacked, the photo shows its grey backdrop on both sides too, so the
       wash gains a side vignette on top of the bottom fade. */
    .app-media::after {
        background:
            linear-gradient(90deg, rgba(15, 68, 48, .92) 0%, rgba(15, 68, 48, 0) 20%, rgba(15, 68, 48, 0) 80%, rgba(15, 68, 48, .92) 100%),
            linear-gradient(180deg, rgba(10, 45, 30, .2) 0%, rgba(15, 68, 48, .5) 58%, rgba(15, 68, 48, .92) 94%);
        -webkit-mask-image: linear-gradient(180deg, #000 46%, rgba(0, 0, 0, .55) 78%, transparent 99%);
        mask-image: linear-gradient(180deg, #000 46%, rgba(0, 0, 0, .55) 78%, transparent 99%);
    }
    .app-content { padding: 4px 34px 38px; }

    .main-nav, .header-actions .signin { display: none; }
    .nav-toggle { display: flex; }
    .header-inner { gap: 14px; }

    /* .main-nav doubles as the auto-margin spacer that pushes the actions to
       the right edge; once it is hidden the actions need a margin of their own
       or they bunch up against the brand. */
    .header-actions { margin-left: auto; }

    .search-panel { grid-template-columns: 1fr 1fr; }
    .search-field { border-right: 0; border-bottom: 1px solid var(--line-2); }
    .search-panel .btn { grid-column: span 2; margin: 8px 0 0; width: 100%; }

    .listing-layout { grid-template-columns: 1fr; }
    .filter-panel { position: static; }
    .account-layout { grid-template-columns: 1fr; }
    .loan-strip, .loan-strip.is-split { grid-template-columns: auto 1fr; }
    .loan-stats { grid-column: span 2; justify-content: space-between; }
    .loan-stat { padding: 0 14px; }
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-side { display: none; }
    .fact-grid, .fact-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .amenity-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-tile { padding: 22px 14px; }
    .carousel-track.cols-3 { grid-auto-columns: calc((100% - 22px) / 2); }

    /* Filters collapse behind a button so results are not pushed off-screen. */
    .filter-toggle { display: inline-flex; margin-bottom: 16px; }
    .listing-filters .filter-panel { display: none; }
    .listing-filters.is-open .filter-panel { display: block; }
    .filter-scroll { max-height: none; }

    /* A narrow form column reads worse than a stacked one on a tablet. */
    .col-3, .col-4 { grid-column: span 6; }
}

/* ---------- large phones / small tablets ---------- */

@media (max-width: 760px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .carousel-track { grid-auto-columns: calc((100% - 22px) / 2); }
    .hero-title { font-size: 38px; }
    .hero-media { min-height: 400px; aspect-ratio: auto; }
    .h1 { font-size: 34px; }
    .h2, .section-head h2 { font-size: 24px; }
    /* Two link columns, with the intro promoted to a full-width masthead so
       the brand is not squeezed into half a screen. */
    .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; padding: 38px 0 28px; }
    .footer-about { grid-column: 1 / -1; padding-bottom: 24px; border-bottom: 1px solid var(--gold-200); }
    .footer-about p { max-width: 62ch; font-size: 13px; }
    .footer-contact-col { grid-column: auto; }
    .footer-contact { display: block; }
    .footer-bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 9px; }
    .footer-copyright, .footer-credit, .footer-legal-links { justify-self: center; }
    .gallery { grid-template-columns: 1fr; }
    .gallery-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
    .spec-list { grid-template-columns: 1fr; }
    .app-media { height: 216px; }
    .app-content { padding: 2px 24px 30px; }
    .app-content h2 { font-size: 26px; }
    .app-content > p { max-width: none; font-size: 14px; }
    .store-badges { width: 100%; margin-top: 22px; }
    .store-badge { flex: 1 1 190px; min-width: 0; }
    .app-qr { margin-top: 22px; padding-top: 20px; }

    .section-head { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 18px; }
    .section-head p { font-size: 13px; }

    /* Trust strip: four full-width rows swallow the whole screen below the
       search card. Boxed two-up items carry the same content at half the
       height, and the border stops them reading as loose page text. */
    .feature-strip { padding: 26px 0 2px; }
    .feature-strip .grid { gap: 10px; }
    .feature-item {
        align-items: center;
        gap: 11px;
        padding: 12px 13px;
        background: var(--cream-50);
        border: 1px solid var(--line-2);
        border-radius: var(--radius);
    }
    .feature-icon { width: 38px; height: 38px; flex: 0 0 38px; }
    .feature-item h4 { font-size: 13.5px; }
    .feature-item p { font-size: 11.5px; }

    /* iOS zooms the page in when a focused control is under 16px. */
    .input, .select, .textarea,
    .search-field input, .search-field select { font-size: 16px; }

    /* The hero gradient is angled for a wide viewport; even it out here so the
       headline stays legible over the photo. */
    .hero-media::after {
        background: linear-gradient(175deg, rgba(253, 250, 244, .95) 0%, rgba(253, 250, 244, .88) 45%, rgba(253, 250, 244, .62) 100%);
    }
    .hero-content { max-width: none; padding: 44px 0 96px; }
    .hero-sub { max-width: none; }

    .page-head { padding: 26px 0; }
    .page-head h1 { font-size: 28px; }
    .section { padding-block: 40px; }
    .section-lg { padding-block: 52px; }

    /* Comfortable tap targets — a finger needs about 40px, a mouse does not. */
    .mobile-nav a { min-height: 44px; display: flex; align-items: center; }
    .btn, .btn-sm { min-height: 40px; }
    .btn-icon { width: 40px; height: 40px; }
    .card-fav { width: 40px; height: 40px; }
    .pagination a, .pagination span { min-width: 40px; height: 40px; }
    .accordion-item summary { min-height: 44px; }
    .footer-social a { width: 38px; height: 38px; }
    .brand { padding-block: 6px; }
    .account-nav a { min-height: 40px; }
    .filter-panel .check { min-height: 36px; align-items: center; }

    /* The arrows sat half outside the track, which put them under the screen
       edge once the gutter shrank. Swiping still works either way. */
    .carousel-btn { width: 40px; height: 40px; right: 2px; }
    .carousel-btn.prev { left: 2px; right: auto; }
}

/* ---------- phones ---------- */

@media (max-width: 560px) {
    :root { --gutter: 16px; }

    .grid { gap: 16px; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .carousel-track, .carousel-track.cols-3 { grid-auto-columns: 86%; }

    /* A project card takes the arrow on its photo; a review card would take it
       across the middle of the quote. The dots below say the same thing. */
    .carousel.quotes .carousel-btn { display: none; }

    .section { padding-block: 34px; }
    .section-sm { padding-block: 24px; }
    .dots { margin-top: 18px; }

    /* Trust strip stays two-up: the supporting sentence does not survive a
       150px column, so the phone layout keeps the label on its own. */
    .feature-strip .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feature-item { flex-direction: column; align-items: flex-start; gap: 9px; padding: 13px 12px; }
    .feature-icon { width: 34px; height: 34px; flex: 0 0 34px; }
    .feature-item h4 { font-size: 13px; line-height: 1.35; }
    .feature-item p { display: none; }

    /* One card per row turns every listing into a hero-sized tile — give the
       title, price and specs the weight that width deserves. */
    .card-media { aspect-ratio: 16 / 10; }
    .card-title { font-size: 16px; }
    .card-price { font-size: 15.5px; }
    .card-loc, .card-meta { font-size: 13px; }
    /* Search widget on a phone: every control already spans the full row, so
       self-contained boxed fields read better than divider-separated ones. */
    .search-tabs button {
        flex: 1;
        padding: 11px 8px;
        font-size: 13px;
        border-radius: 0;
    }
    .search-tabs button:first-child { border-radius: 10px 0 0 0; }
    .search-tabs button:last-child { border-radius: 0 10px 0 0; }

    .search-panel {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
        border-radius: 0 0 12px 12px;
    }
    .search-field {
        gap: 10px;
        padding: 7px 12px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--cream-50);
    }
    /* The desktop rule drops the divider on the last field; here it is a box. */
    .search-field:last-of-type { border-right: 1px solid var(--line); }
    .search-field .fi {
        width: 30px; height: 30px; flex: 0 0 30px;
        background: #fff;
        border: 1px solid var(--gold-200);
    }
    .search-field label {
        font-size: 11px; font-weight: 600; letter-spacing: .2px;
        color: var(--muted); margin-bottom: 0;
    }
    .search-field input, .search-field select {
        font-size: 16px; line-height: 1.3; color: var(--ink);
    }
    .search-field input::placeholder { color: var(--muted-2); opacity: 1; }
    .search-range span { font-size: 14px; }

    .search-panel .btn {
        grid-column: span 1;
        width: 100%;
        margin: 2px 0 0;
        padding-block: 13px;
    }

    .hero-title { font-size: 30px; }
    .hero-media { min-height: 340px; aspect-ratio: auto; }
    .hero-content { padding: 34px 0 88px; }
    .search-wrap { margin-top: -66px; }

    /* Homepage phone composition: a shorter image keeps the complete search
       card and the first trust items visible without changing other pages. */
    .home-hero .hero-media {
        height: 315px;
        min-height: 315px;
        aspect-ratio: auto;
    }
    .home-hero .hero-content { padding: 41px 0 81px; }
    .home-hero .search-wrap {
        width: 100%;
        min-width: 0;
        margin-top: -61px;
    }
    .home-hero .search-tabs button { padding-block: 10px; }
    .home-hero .search-panel {
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
    }
    .home-hero .search-field { padding-block: 6px; }
    .home-hero .search-range,
    .home-hero .search-range input { min-width: 0; }

    /* On phones the strip becomes a compact card: the copy is left-aligned
       behind a smaller badge, and each stat collapses from a three-line stack
       into a single label/value row, which roughly halves the section height. */
    .loan-strip, .loan-strip.is-split {
        grid-template-columns: minmax(0, 1fr);
        text-align: left;
        gap: 14px;
        padding: 20px 16px;
    }
    .loan-badge { width: 48px; height: 48px; margin: 0; }
    /* The icon span carries an inline pixel size from <x-icon>, so shrinking it
       for the smaller badge needs !important; the svg follows on its own. */
    .loan-badge > span { width: 26px !important; height: 26px !important; }
    .loan-badge svg { width: 26px; height: 26px; }
    .loan-copy h2 { font-size: 21px; }
    .loan-copy p { margin: 5px 0 14px; margin-inline: 0; font-size: 12.5px; max-width: none; }
    .loan-copy .btn { width: 100%; justify-content: center; }

    .loan-stats {
        grid-column: auto;
        display: block;
        background: #fff;
        border: 1px solid var(--gold-200);
        border-radius: var(--radius);
        padding: 2px 14px;
    }
    .loan-stat {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 12px;
        text-align: left;
        border-left: 0; border-top: 1px solid var(--gold-200);
        padding: 11px 0;
    }
    .loan-stat:first-child { border-top: 0; }
    .loan-stat .k { grid-column: 1; grid-row: 1; font-size: 11px; }
    .loan-stat .s { grid-column: 1; grid-row: 2; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
    .loan-stat .v { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 16px; white-space: nowrap; }

    .amenity-list { grid-template-columns: 1fr; }
    /* Explore / Company / Resources are short link lists — stacking them makes
       the footer four screens tall, so they stay three-up and only the intro
       and the contact block run full width. */
    .site-footer { margin-top: 18px; border-top: 1px solid var(--gold-200); }
    .footer-main { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; padding: 30px 0 22px; }

    /* Centred masthead: on a single narrow column the brand, the sentence and
       the social row read as one deliberate block rather than a ragged edge. */
    .footer-about { grid-column: 1 / -1; text-align: center; padding-bottom: 22px; }
    .footer-about .brand { justify-content: center; }
    .footer-about p { max-width: 38ch; margin: 12px auto 16px; }
    .footer-social { justify-content: center; gap: 12px; }
    .footer-social a { width: 40px; height: 40px; box-shadow: var(--shadow-xs); }

    .footer-col h5 {
        font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
        color: var(--green-800); margin-bottom: 6px;
    }
    .footer-col li { margin-bottom: 0; }
    /* Padding, not margin: each row grows into a tap target without opening
       gaps between the links. */
    .footer-col a { display: block; padding: 6px 0; font-size: 12px; line-height: 1.35; }

    /* Address, phone, mail and hours are what a phone visitor actually acts
       on, so they get a card, icon chips and rows big enough to tap. */
    .footer-contact-col {
        grid-column: 1 / -1;
        margin-top: 4px;
        padding: 14px 14px 5px;
        background: var(--cream-50);
        border: 1px solid var(--line-2);
        border-radius: var(--radius-lg);
    }
    .footer-contact-col h5 { margin-bottom: 2px; }
    .footer-contact li {
        align-items: center; gap: 11px; margin: 0;
        padding: 9px 0; font-size: 12.5px;
        border-top: 1px solid var(--line-2);
    }
    .footer-contact li:first-child { border-top: 0; }
    /* The link rules above are for the list columns; a phone number sits
       inside its own row and keeps the row's type. */
    .footer-contact a { display: inline; padding: 0; font-size: inherit; }
    .footer-contact-ico {
        display: inline-flex; align-items: center; justify-content: center;
        flex: 0 0 30px; width: 30px; height: 30px;
        border-radius: var(--radius-pill);
        background: var(--gold-100); color: var(--gold-700);
    }
    .footer-contact [data-react-icon] { margin-top: 0; color: inherit; }

    .footer-bottom { justify-content: center; text-align: center; gap: 7px; padding: 14px 0 16px; }
    .footer-bottom nav { justify-content: center; gap: 14px; }
    .col-3, .col-4, .col-6, .col-8, .col-9 { grid-column: span 12; }

    .app-panel { border-radius: var(--radius-lg); }
    .app-media { height: 178px; }
    .app-content { padding: 2px 18px 24px; }
    .app-content h2 { font-size: 23px; }
    .app-eyebrow { font-size: 10px; padding: 4px 10px 4px 9px; }
    /* Side by side, the two badges are each ~150px wide here, which folds
       "Download on the / App Store" into ragged two-line labels. Stacked
       full-width rows keep every label on one line and give each button a
       comfortable thumb target. */
    .store-badges { flex-direction: column; gap: 10px; width: 100%; margin-top: 20px; }
    .store-badge {
        /* The 190px flex-basis inherited from 760px is a *height* once the
           container turns into a column — reset it before it stretches. */
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        gap: 13px;
        padding: 11px 18px;
    }
    /* The QR code asks the reader to scan it with the device they are already
       holding; the store buttons are the only useful control here. */
    .app-qr { display: none; }

    .sidebar-card { padding: 16px; }
    .h1 { font-size: 29px; }
    .page-head h1 { font-size: 25px; }
    .price-block .p { font-size: 25px; }
    .quote-card { padding: 18px 18px 16px; }

    /* When the title/price row wraps, a right-aligned price looks detached. */
    .page-head .text-right { text-align: left; }

    /* Ragged half-width controls read badly; give each one the full row. */
    .inline-filters .input,
    .inline-filters .select { flex: 1 1 100%; max-width: none; }
    .inline-filters .btn { flex: 1 1 auto; }

    .listing-toolbar { gap: 10px; }
    .listing-toolbar form { width: 100%; }
    .listing-toolbar .select { flex: 1; width: auto; }

    .breadcrumb { font-size: 12px; }
    .accordion-item summary { padding: 12px 14px; font-size: 13.5px; }
    .accordion-item .acc-body { padding: 0 14px 14px; }
    .empty-state { padding: 40px 14px; }

    /* The band stays two-up on phones — four full-width rows would push the
       listings below the fold for no gain in legibility. */
    .stat-tile { padding: 18px 10px; gap: 6px; }
    .stat-tile .ico { width: 34px; height: 34px; }
    .stat-tile .k { font-size: 10px; letter-spacing: .06em; }

    /* A lone tile is full width here, so it reads better lying down: badge on
       the left, value stacked over its label on the right. */
    .grid > .stat-tile {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas: 'ico v' 'ico k';
        align-items: center;
        gap: 0 14px;
        padding: 16px;
        text-align: left;
    }
    .grid > .stat-tile .ico { grid-area: ico; width: 42px; height: 42px; }
    .grid > .stat-tile .v { grid-area: v; }
    .grid > .stat-tile .k { grid-area: k; margin: 0; max-width: none; }
}

/* ---------- small phones ---------- */

@media (max-width: 400px) {
    .header-inner { gap: 10px; }
    .header-actions { gap: 8px; }
    .brand svg { width: 30px; height: 30px; }
    .brand-text .b1, .brand-text .b2 { font-size: 13.5px; }

    /* .grid-6 deliberately stays two-up: a full-width area card is almost all
       photo, and the row stops being scannable. */
    .carousel-track, .carousel-track.cols-3 { grid-auto-columns: 92%; }
    /* .stat-tiles deliberately stays two-up here too — the numbers are short
       and a 1-column stack turns four facts into a scroll. */
    .fact-grid, .fact-grid.cols-3 { grid-template-columns: 1fr; }
    .stat-tile { padding: 15px 8px; }
    .stat-tile .ico { width: 30px; height: 30px; }
    .stat-tile .k { font-size: 9.5px; letter-spacing: .05em; }
    .gallery-side { grid-template-columns: 1fr 1fr; }

    /* Keep the three link columns side by side on the narrowest phones. */
    .footer-main { gap: 20px 8px; }
    .footer-col a { font-size: 11.5px; padding: 5px 0; }
    .footer-contact-col { padding: 12px 12px 4px; }
    .footer-contact li { gap: 9px; font-size: 12px; }
    .footer-contact-ico { flex: 0 0 27px; width: 27px; height: 27px; }

    .hero-title { font-size: 26px; }
    .home-hero .hero-title { font-size: 30px; }
    .h1 { font-size: 25px; }
    .h2, .section-head h2 { font-size: 21px; }
    .page-head h1 { font-size: 22px; }

    /* Keep "Within 24-48 Hrs" on one line beside its label on 320px screens. */
    .loan-strip, .loan-strip.is-split { padding: 18px 14px; }
    .loan-stats { padding: 2px 12px; }
    .loan-stat .v { font-size: 14.5px; }
    /* Stacking is already handled at 560px; only the inset needs to shrink so
       the badge labels keep clearance on a 320px screen. */
    .store-badge { padding: 11px 14px; gap: 11px; }
    .app-media { height: 152px; }
    .app-content { padding: 2px 14px 22px; }
    .app-content h2 { font-size: 21px; }

    /* Copyright, credit and three legal links cannot share one nowrap line
       on a 320px screen — let them wrap into centred rows instead. */
    .footer-legal-links, .footer-credit { white-space: normal; }
    .footer-legal-links { flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
    .breadcrumb { row-gap: 4px; }
}

/* ---------- phones held sideways ---------- */

@media (max-height: 520px) and (orientation: landscape) {
    .hero-media { min-height: 320px; aspect-ratio: auto; }
    .hero-content { padding: 28px 0 84px; }
    .auth-wrap { min-height: 0; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .carousel-track { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
    .site-header, .site-footer, .btn, .filter-panel { display: none !important; }
}

/* =============================================================
   Property detail
   Everything here is scoped to the property page — either to a
   page-only class or to `.property-detail` — so the shared
   `.fact-grid` / `.spec-list` / `.amenity-list` / `.map-frame`
   blocks on the project, agent, sell and contact pages are
   untouched. Placed after the breakpoint block above so the
   scoped rules win at every width.
   ============================================================= */

/* ---------- page head ---------- */

/* A warm two-stop wash plus a hairline of gold: it lifts the hero off the
   plain white body without introducing a second background colour. */
.detail-head {
    position: relative;
    background: linear-gradient(168deg, var(--cream-200) 0%, var(--cream-100) 46%, var(--cream-50) 100%);
    padding: 30px 0 34px;
    overflow: hidden;
}
.detail-head::before {
    content: '';
    position: absolute; inset: 0 auto auto 0;
    width: 420px; height: 420px;
    transform: translate(-38%, -46%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(195, 154, 69, .16) 0%, rgba(195, 154, 69, 0) 68%);
    pointer-events: none;
}
.detail-head::after {
    content: '';
    position: absolute; inset: auto 0 0 0; height: 2px;
    background: linear-gradient(90deg, var(--green-800) 0%, var(--gold-500) 42%, transparent 88%);
}
.detail-head > .container { position: relative; z-index: 1; }

.detail-head .breadcrumb { margin-bottom: 14px; }

.detail-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px 28px;
    flex-wrap: wrap;
}
.detail-head-main { flex: 1 1 320px; min-width: 0; }

/* Fluid rather than stepped: this rule out-specifies the shared
   `.page-head h1` breakpoints, so it has to cover every width itself. */
.detail-head .detail-head-main h1 {
    font-size: clamp(24px, 3.4vw, 36px);
    letter-spacing: -.015em;
    line-height: 1.16;
}

/* The price sits in its own pale panel so the eye finds it in one pass. */
.detail-head-price {
    flex: 0 0 auto;
    text-align: right;
    padding: 14px 20px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-xs);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.detail-head-price .h2 { letter-spacing: -.01em; }

.detail-ref {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 7px; padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--cream-200);
    font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted);
}
.detail-ref [data-react-icon] { color: var(--gold-600); }

.detail-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.detail-tags .badge { padding: 5px 12px; letter-spacing: .02em; }

.page-head .detail-address {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 10px 0 0; font-size: 14.5px; color: var(--ink-2);
}
.detail-address [data-react-icon] { margin-top: 3px; color: var(--green-700); flex: 0 0 auto; }

/* A long listing title should not turn the breadcrumb into four lines. */
.crumb-current {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- gallery ---------- */

.gallery-wrap { position: relative; }
.gallery-wrap .gallery {
    gap: 12px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.gallery-wrap .gallery-main { position: relative; overflow: hidden; }

/* A soft scrim at the foot of the photo keeps the counter readable on a
   bright interior shot without dimming the image itself. */
.gallery-wrap .gallery-main::after {
    content: '';
    position: absolute; inset: auto 0 0 0; height: 34%;
    background: linear-gradient(180deg, transparent, rgba(10, 45, 30, .34));
    pointer-events: none; z-index: 1;
}

.gallery-wrap .gallery-main img,
.gallery-wrap .gallery-side img {
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.gallery-wrap .gallery-side > div { cursor: pointer; position: relative; }
.gallery-wrap .gallery-side > div:hover img { transform: scale(1.05); }

.gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: var(--radius-pill);
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .94); color: var(--green-800);
    box-shadow: 0 4px 16px rgba(10, 45, 30, .22); z-index: 3;
    transition: background-color .18s ease, color .18s ease, transform .18s ease, opacity .2s ease;
}
.gallery-nav:hover {
    background: var(--green-800); color: #fff;
    transform: translateY(-50%) scale(1.06);
}
.gallery-nav.prev { left: 14px; }
.gallery-nav.next { right: 14px; }

/* On a mouse the arrows fade in over the photo; touch devices keep them
   permanently visible because there is no hover to reveal them. */
@media (hover: hover) and (pointer: fine) {
    .gallery-nav { opacity: 0; }
    .gallery-wrap:hover .gallery-nav,
    .gallery-nav:focus-visible { opacity: 1; }
}

.gallery-count {
    position: absolute; right: 14px; bottom: 14px; z-index: 3;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: var(--radius-pill);
    background: rgba(10, 45, 30, .58); color: #fff;
    font-size: 12px; font-weight: 600; line-height: 1;
    border: 1px solid rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* One scrolling rail instead of a wrapping block: on a phone the previous
   version grew into five or six rows of thumbnails below the photo. */
.gallery-rail {
    display: flex; gap: 9px; margin-top: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 3px;
}
.gallery-rail::-webkit-scrollbar { height: 4px; }
.gallery-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.gallery-thumb {
    flex: 0 0 92px; width: 92px; height: 64px;
    border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--line); background: var(--cream-200);
    padding: 0; opacity: .62; scroll-snap-align: start;
    transition: opacity .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover { opacity: 1; transform: translateY(-2px); }
.gallery-thumb.is-active {
    opacity: 1;
    border-color: var(--green-800);
    box-shadow: 0 0 0 2px var(--green-800), var(--shadow-xs);
}

/* ---------- key facts (icon variant, this page only) ---------- */

.property-detail .fact-grid { gap: 14px; }
.property-detail .fact {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 15px 16px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.property-detail .fact:hover {
    border-color: var(--gold-200);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}
.property-detail .fact .k {
    font-size: 11px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted-2);
}
.property-detail .fact .v { font-size: 16px; margin-top: 2px; color: var(--ink); }

.fact-ico { display: flex; align-items: center; gap: 12px; }
.fact-ico > [data-react-icon] { color: var(--green-700); }
.fact-ico > div { min-width: 0; }

.fact-badge {
    flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: var(--radius);
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, #e9f2ed, #dfeae4);
    color: var(--green-700);
    transition: background .18s ease, color .18s ease;
}
.property-detail .fact:hover .fact-badge {
    background: linear-gradient(160deg, var(--green-800), var(--green-600));
    color: #fff;
}

/* ---------- content blocks ---------- */

/* Each block becomes a panel: the hairline card gives the long page a rhythm
   and stops the specification list from bleeding into the amenities. */
.property-detail .detail-block {
    margin-top: 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
    box-shadow: var(--shadow-xs);
}
.property-detail .detail-block > .h3,
.property-detail .detail-block-head .h3 {
    position: relative;
    padding-left: 14px;
    font-size: 21px;
    color: var(--green-900);
}
/* Gold tick beside every section title — the one repeated brand accent. */
.property-detail .detail-block > .h3::before,
.property-detail .detail-block-head .h3::before {
    content: '';
    position: absolute; left: 0; top: 4px; bottom: 4px;
    width: 3px; border-radius: 3px;
    background: linear-gradient(180deg, var(--gold-500), var(--green-700));
}
.property-detail .detail-block > .h3 { margin-bottom: 16px; }

.detail-block-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.detail-block-head .h3 { margin-bottom: 0; }
.detail-block-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--cream-50);
    font-size: 12.5px; font-weight: 600; color: var(--gold-700);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.detail-block-link:hover {
    text-decoration: none;
    background: var(--green-800); border-color: var(--green-800); color: #fff;
}

.property-detail .prose { font-size: 15px; line-height: 1.85; }
.property-detail .prose p:last-child { margin-bottom: 0; }

/* Long descriptions are clamped on small screens (see the phone block). */
.prose-collapse { position: relative; }
.collapse-toggle {
    display: none; align-items: center; gap: 6px;
    margin-top: 10px; padding: 8px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--cream-50);
    font-size: 13px; font-weight: 600;
    color: var(--green-800);
}
.collapse-toggle [data-react-icon] { transition: transform .18s ease; }
.prose-collapse.is-open + .collapse-toggle [data-react-icon] { transform: rotate(180deg); }

/* ---------- specification / amenities / map ---------- */

.property-detail .spec-list { gap: 0 34px; }
.property-detail .spec-list li {
    align-items: baseline; gap: 16px;
    padding: 12px 10px; margin-inline: -10px;
    border-radius: var(--radius-sm);
    border-bottom: 1px dashed var(--line);
    font-size: 14px;
    transition: background-color .15s ease;
}
.property-detail .spec-list li:hover { background: var(--cream-50); }
.property-detail .spec-list .k { flex: 0 1 auto; color: var(--muted); }
.property-detail .spec-list .v { text-align: right; min-width: 0; color: var(--ink); }

.property-detail .amenity-list { gap: 10px; }
.property-detail .amenity-list li {
    background: var(--cream-50);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    padding: 11px 14px;
    font-size: 13.5px;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.property-detail .amenity-list li:hover {
    background: #fff;
    border-color: var(--green-600);
    transform: translateY(-1px);
}
.property-detail .amenity-list li > span { min-width: 0; }

.property-detail .map-frame {
    height: 360px;
    border-radius: var(--radius);
    border-color: var(--line);
}

/* ---------- sidebar ---------- */

.property-detail .sidebar-card {
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-sm);
}

/* The enquiry card is the page's single conversion point, so it gets the
   green cap and a slightly heavier lift than the loan card below it. */
.property-detail .enquiry-card {
    position: relative;
    padding-top: 26px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.property-detail .enquiry-card::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--green-800), var(--gold-500));
}

.property-detail .price-block {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line-2);
    margin-bottom: 18px;
}
.property-detail .price-block .p { font-size: 31px; letter-spacing: -.01em; line-height: 1.1; }
.property-detail .price-block .s {
    display: inline-block; margin-top: 8px;
    padding: 3px 10px; border-radius: var(--radius-pill);
    background: var(--cream-200); color: var(--muted);
    font-size: 12px; font-weight: 600;
}

.property-detail .agent-box {
    align-items: center; gap: 13px;
    margin-bottom: 18px; padding: 12px;
    border-radius: var(--radius);
    background: var(--cream-50);
    border: 1px solid var(--line-2);
}
.property-detail .agent-box img {
    width: 50px; height: 50px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--gold-200);
}
.property-detail .agent-box .d { color: var(--gold-700); font-weight: 600; }

.property-detail .sidebar-card .field { margin-bottom: 13px; }
.property-detail .sidebar-card .field > label { font-size: 12.5px; color: var(--ink-2); }
.property-detail .sidebar-card .input,
.property-detail .sidebar-card .textarea {
    border-radius: var(--radius);
    background: var(--cream-50);
    padding: 11px 13px;
}
.property-detail .sidebar-card .input:focus,
.property-detail .sidebar-card .textarea:focus { background: #fff; }
.property-detail .sidebar-card .textarea { min-height: 86px; }

.property-detail .sidebar-card .btn { border-radius: var(--radius); }
.property-detail .sidebar-card .btn-primary {
    padding: 13px 20px;
    box-shadow: 0 6px 18px rgba(15, 68, 48, .22);
}
.property-detail .sidebar-card .btn-primary:hover { box-shadow: 0 8px 22px rgba(15, 68, 48, .28); }
.property-detail .sidebar-card .btn-ghost { color: var(--muted); }
.property-detail .sidebar-card .btn-ghost:hover { color: var(--green-800); background: var(--cream-100); }
.property-detail .sidebar-card .btn-ghost.is-saved { color: var(--gold-700); }

.property-detail .loan-card {
    background: linear-gradient(160deg, var(--cream-100), var(--cream-50));
    border-color: var(--gold-200);
}
.property-detail .loan-card h3 { color: var(--green-900); margin-bottom: 8px; }
.property-detail .loan-card p { margin-bottom: 14px; line-height: 1.65; }
.property-detail .loan-card .btn-outline { border-color: var(--gold-500); color: var(--gold-700); }
.property-detail .loan-card .btn-outline:hover {
    background: var(--gold-600); border-color: var(--gold-600); color: #fff;
}

/* ---------- mobile action bar ---------- */

.detail-cta-bar { display: none; }

/* =============================================================
   Property detail — breakpoints
   ============================================================= */

/* ---------- below the sidebar breakpoint: pin the primary actions ---------- */

@media (max-width: 1100px) {
    /* Sticky rather than fixed: the bar keeps its place in the flow, so it can
       never cover the footer and needs no spacer to compensate. */
    .detail-cta-bar {
        display: flex; align-items: center; gap: 12px;
        position: sticky; bottom: 0; z-index: 50;
        padding: 10px var(--gutter);
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--line);
        box-shadow: 0 -6px 24px rgba(25, 25, 25, .10);
    }

    .cta-price { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
    .cta-price .v {
        font-family: var(--font-display); font-size: 19px; font-weight: 600;
        color: var(--green-800); white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis;
    }
    .cta-price .s {
        font-size: 11.5px; color: var(--muted);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    .cta-actions { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
    .cta-call { width: 46px; height: 46px; padding: 0; flex: 0 0 46px; border-radius: var(--radius); }
    .cta-enquire { padding: 13px 18px; border-radius: var(--radius); }

    /* The sticky header must not cover the form the bar links to. */
    .property-detail .sidebar-sticky { scroll-margin-top: calc(var(--header-h) + 14px); }

    .property-detail { gap: 26px; }
}

/* ---------- large phones ---------- */

@media (max-width: 760px) {
    .detail-head { padding: 22px 0 26px; }
    .detail-head::before { width: 260px; height: 260px; }
    .detail-head-row { align-items: flex-start; gap: 14px; }
    .detail-head-main { flex: 1 1 100%; }

    /* The price moves under the title, left aligned with it. */
    .detail-head-price {
        flex: 1 1 100%; text-align: left;
        padding: 12px 16px;
    }
    .detail-head-price .h2 { font-size: 26px; }

    .gallery-wrap .gallery { gap: 8px; }
    .gallery-wrap .gallery-main { aspect-ratio: 4 / 3; }
    .gallery-wrap .gallery-side { gap: 8px; }
    .gallery-nav { width: 38px; height: 38px; }
    .gallery-nav.prev { left: 8px; }
    .gallery-nav.next { right: 8px; }

    .property-detail .detail-block { margin-top: 18px; padding: 20px 18px; }
    .property-detail .detail-block > .h3,
    .property-detail .detail-block-head .h3 { font-size: 19px; }
    .property-detail .detail-block > .h3 { margin-bottom: 13px; }
    .detail-block-head { margin-bottom: 13px; }

    /* Two columns keep the amenities from becoming a very long ladder. */
    .property-detail .amenity-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .property-detail .amenity-list li { font-size: 13px; padding: 9px 11px; }

    .property-detail .spec-list li { padding: 11px 8px; }

    .property-detail .map-frame { height: 260px; }

    /* Clamp a long description behind a Read more toggle. */
    .prose-collapse.is-clamped:not(.is-open) {
        max-height: 216px;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
    }
    .collapse-toggle:not([hidden]) { display: inline-flex; }
}

/* ---------- phones ---------- */

@media (max-width: 560px) {
    /* Two facts per row stay readable and halve the scroll length. */
    .property-detail .fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .property-detail .fact { padding: 12px; border-radius: var(--radius); }
    .fact-ico { gap: 10px; }
    .fact-badge { width: 34px; height: 34px; border-radius: var(--radius-sm); }
    .property-detail .fact .k { font-size: 10px; letter-spacing: .05em; }
    .property-detail .fact .v { font-size: 14px; }

    .gallery-thumb { flex: 0 0 78px; width: 78px; height: 56px; }

    .detail-head-price .h2 { font-size: 24px; }
    .detail-tags .badge { font-size: 11px; padding: 4px 10px; }

    /* Full-bleed photos: they earn the extra 32px on a phone. The negative
       margin exactly cancels the container gutter, so nothing overflows. */
    .gallery-wrap .gallery {
        border-radius: 0; box-shadow: none;
        margin-inline: calc(var(--gutter) * -1);
    }
    .gallery-rail { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }

    .property-detail .spec-list li { font-size: 13px; }
    .property-detail .map-frame { height: 230px; }
}

/* ---------- small phones ---------- */

@media (max-width: 400px) {
    /* Overrides the global 400px rule, which stacks the facts one per row. */
    .property-detail .fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .property-detail .amenity-list { grid-template-columns: 1fr; }

    .property-detail .detail-block { padding: 18px 15px; }
    .property-detail .sidebar-card { padding: 18px; }

    .cta-price .v { font-size: 17px; }
    .cta-enquire { padding: 12px 14px; font-size: 13.5px; }
    .cta-call { width: 44px; height: 44px; flex: 0 0 44px; }
}

/* ---------- phones held sideways ---------- */

@media (max-height: 520px) and (orientation: landscape) {
    .gallery-wrap .gallery-main { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
    .property-detail .fact:hover,
    .gallery-thumb:hover,
    .property-detail .amenity-list li:hover { transform: none; }
    .gallery-wrap .gallery-side > div:hover img { transform: none; }
    .gallery-nav { opacity: 1 !important; }
}

@media print {
    .detail-cta-bar, .gallery-nav, .gallery-rail, .collapse-toggle { display: none !important; }
    .prose-collapse.is-clamped:not(.is-open) { max-height: none; -webkit-mask-image: none; mask-image: none; }
    .detail-head { background: none; }
    .detail-head::before, .detail-head::after { display: none; }
    .property-detail .detail-block { box-shadow: none; break-inside: avoid; }
}

/* =============================================================
   Area page
   Scoped to `.area-page` / `.area-*` so the shared `.stat-tiles`,
   `.map-frame`, `.section-head` and `.loan-strip` blocks used by
   every other template keep their existing look. Appended after
   the breakpoint blocks above so these rules win at every width.
   ============================================================= */

/* ---------- hero ---------- */

/* The area photo carries the page instead of a flat cream band. A double
   scrim (diagonal + bottom lift) keeps white text readable over both a real
   photograph and the pale placeholder SVG. */
.area-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 350px;
    padding: 44px 0 96px;
    background: var(--green-900);
    overflow: hidden;
}
.area-hero-bg {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover;
}
.area-hero::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(102deg, rgba(10, 45, 30, .95) 0%, rgba(10, 45, 30, .8) 44%, rgba(10, 45, 30, .34) 100%),
        linear-gradient(0deg, rgba(10, 45, 30, .6) 0%, rgba(10, 45, 30, 0) 58%);
}
.area-hero::after {
    content: '';
    position: absolute; inset: auto 0 0 0; height: 2px;
    background: linear-gradient(90deg, var(--gold-500) 0%, var(--gold-200) 36%, transparent 84%);
}

.area-hero-inner { position: relative; z-index: 1; max-width: 660px; }

.area-hero .breadcrumb { margin-bottom: 15px; color: rgba(255, 255, 255, .6); }
.area-hero .breadcrumb a:hover { color: var(--gold-200); }
.area-hero .breadcrumb .sep { color: rgba(255, 255, 255, .32); }
.area-hero .breadcrumb .crumb-current { color: #fff; }

.area-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(232, 217, 182, .34);
    color: var(--gold-200);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.area-hero h1 {
    margin-top: 15px;
    font-family: var(--font-display);
    font-size: clamp(30px, 4.4vw, 46px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.01em;
    color: #fff;
}
.area-hero p {
    margin: 12px 0 0;
    max-width: 52ch;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .78);
}

.area-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Glass button that only exists over the hero scrim. */
.btn-hero {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
}
.btn-hero:hover { background: #fff; border-color: #fff; color: var(--green-900); }

/* ---------- stat band ---------- */

/* Lifted over the hero's bottom edge so the numbers read as part of the
   header rather than as the first row of the body. */
.area-stats { position: relative; z-index: 2; margin-top: -52px; }
.area-stats .stat-tiles {
    border-color: var(--gold-200);
    box-shadow: var(--shadow);
}
/* These four labels are short; the shared 16ch cap wrapped "Listings
   available" alone and knocked its number off the row's baseline. */
.area-stats .stat-tile .k { max-width: 22ch; }

/* The band already supplies the breathing room the section padding would. */
.area-page .section { padding-top: 46px; }

/* ---------- map ---------- */

/* Keeps "Open in Google Maps" on the heading's baseline without teaching the
   shared section-head component about link targets. */
.area-map-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.area-map-head > .section-head { flex: 1 1 320px; margin-bottom: 26px; }
.area-map-link { flex: 0 0 auto; margin-bottom: 30px; }
.area-map { height: 380px; }

/* ---------- breakpoints ---------- */

@media (max-width: 980px) {
    .area-hero { min-height: 300px; padding: 36px 0 86px; }
    .area-map { height: 320px; }
}

@media (max-width: 760px) {
    .area-hero { min-height: 0; padding: 30px 0 76px; }
    /* The band now spans almost the full width, so the hairline survives only
       as two stubs in the gutters — cleaner to drop it. */
    .area-hero::after { display: none; }
    .area-hero p { font-size: 14px; }
    .area-hero-actions { margin-top: 22px; gap: 10px; }
    .area-stats { margin-top: -44px; }
    .area-page .section { padding-top: 36px; }
    .area-map-head > .section-head { margin-bottom: 14px; }
    .area-map-link { margin-bottom: 20px; }
    .area-map { height: 260px; }
}

@media (max-width: 560px) {
    .area-hero { padding: 24px 0 66px; }
    .area-hero .breadcrumb { margin-bottom: 12px; }
    .area-hero h1 { margin-top: 12px; }
    /* Two equal taps rather than one wide button and one stub. */
    .area-hero-actions .btn { flex: 1 1 calc(50% - 5px); }
    .area-stats { margin-top: -38px; }
}

@media (max-width: 400px) {
    .area-hero-actions .btn { flex: 1 1 100%; }
    .area-stats { margin-top: -32px; }
}

@media (prefers-reduced-motion: reduce) {
    .area-page .stat-tile::before { transition: none; }
}

@media print {
    .area-hero { min-height: 0; padding: 18px 0; background: none; }
    .area-hero-bg, .area-hero::before, .area-hero::after { display: none; }
    .area-hero h1, .area-hero p, .area-hero .breadcrumb { color: var(--ink); }
    .area-hero-actions, .area-map { display: none; }
    .area-stats { margin-top: 18px; }
}

/* =============================================================
   About page
   Scoped to `.about-page` / `.about-*` so the shared `.stat-tiles`,
   `.map-frame` and `.loan-strip` blocks used by every other template
   keep their existing look. Appended after the breakpoint blocks
   above so these rules win at every width.
   ============================================================= */

/* ---------- stat band ---------- */

/* Sits under the shared cream `.page-head` like the tiles on every other
   template, so the page opens the same way the rest of the site does. */
.about-stats { padding-top: 40px; }

/* ---------- shared kicker ---------- */

.about-kicker {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-700);
}
.about-kicker::after {
    content: '';
    display: block;
    width: 34px; height: 2px;
    margin: 9px 0 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gold-500), var(--gold-200));
}

/* ---------- lead ---------- */

/* Opening statement on the left, the rest of the story on the right — long
   copy stays readable instead of running centred across the page. A lead of
   one paragraph has nothing to sit beside, so it centres instead. */
.about-lead { display: grid; grid-template-columns: 1.02fr 1fr; gap: 22px 52px; align-items: start; }
.about-lead.is-solo { display: block; max-width: 760px; margin: 0 auto; text-align: center; }
.about-lead.is-solo .about-kicker::after { margin-inline: auto; }

.about-lead-text {
    margin: 18px 0 0;
    font-family: var(--font-display);
    font-size: clamp(19px, 2.2vw, 25px);
    font-weight: 500;
    line-height: 1.52;
    letter-spacing: -.005em;
    color: var(--ink);
}
.about-lead-text strong { font-weight: 600; }

.about-lead-body { padding-top: 8px; }
.about-lead-body p { margin: 0 0 15px; font-size: 15px; line-height: 1.85; color: var(--muted); }
.about-lead-body p:last-child { margin-bottom: 0; }
.about-lead-body strong { font-weight: 600; color: var(--ink); }

/* ---------- pledge band ---------- */

/* The closing promise gets the dark treatment so it reads as a statement
   rather than one more paragraph of body copy. The copy sits inside a
   hairline gold frame, so the band reads as a plaque the story ends on
   instead of a flat swatch of colour. */
.about-pledge {
    position: relative;
    isolation: isolate;
    padding: 68px 0;
    background: var(--green-900);
    border-top: 1px solid rgba(232, 217, 182, .16);
    border-bottom: 1px solid rgba(232, 217, 182, .16);
    text-align: center;
    overflow: hidden;
}

/* A warm bloom off the top edge over a green that lifts again at the foot —
   the flat fill on its own has no depth for the frame to sit in. */
.about-pledge::before {
    content: '';
    position: absolute; inset: 0; z-index: -2;
    background:
        radial-gradient(76% 106% at 50% -14%, rgba(195, 154, 69, .30) 0%, rgba(195, 154, 69, 0) 60%),
        radial-gradient(62% 82% at 50% 118%, rgba(28, 107, 75, .48) 0%, rgba(28, 107, 75, 0) 72%),
        linear-gradient(168deg, #0b3222 0%, #0a2d1e 46%, #0d3f2a 100%);
}

/* Faint diagonal weave, masked away towards the edges: texture up close,
   still solid colour from a distance. */
.about-pledge::after {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(232, 217, 182, .055) 0 1px,
        rgba(232, 217, 182, 0) 1px 12px
    );
    -webkit-mask-image: radial-gradient(66% 76% at 50% 46%, #000 0%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(66% 76% at 50% 46%, #000 0%, rgba(0, 0, 0, 0) 100%);
}

/* The frame is drawn on the container itself, so it lines up with the copy
   at every width without another wrapper in the template. */
.about-pledge > .container {
    position: relative;
    max-width: 920px;
    padding-block: 52px;
}
.about-pledge > .container::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    border: 1px solid rgba(232, 217, 182, .2);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 58%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

.about-pledge-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: var(--radius-pill);
    background: linear-gradient(160deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .04));
    border: 1px solid rgba(232, 217, 182, .4);
    color: var(--gold-200);
    /* Second ring, drawn as a spread shadow — the medallion needs weight to
       carry the top of the frame. */
    box-shadow:
        0 0 0 7px rgba(232, 217, 182, .07),
        0 12px 26px rgba(0, 0, 0, .3);
}

.about-pledge h2 {
    max-width: 22ch;
    margin: 26px auto 0;
    font-family: var(--font-display);
    font-size: clamp(25px, 3.4vw, 39px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: #fff;
}

/* Rule-and-diamond ornament between the promise and the signature line, so
   the two are read as separate beats rather than one stacked paragraph. */
.about-pledge h2::after {
    content: '';
    display: block;
    width: 132px; height: 9px;
    margin: 26px auto 0;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9'><path d='M4.5 0 9 4.5 4.5 9 0 4.5z' fill='%23c39a45'/></svg>") center / 9px 9px no-repeat,
        linear-gradient(90deg,
            rgba(195, 154, 69, 0) 0%,
            rgba(195, 154, 69, .75) 34%,
            rgba(195, 154, 69, .75) 66%,
            rgba(195, 154, 69, 0) 100%) center / 100% 1px no-repeat;
}

.about-pledge p {
    max-width: 46ch;
    margin: 22px auto 0;
    font-family: var(--font-display);
    font-size: clamp(16px, 1.5vw, 19px);
    font-style: italic;
    line-height: 1.6;
    letter-spacing: .012em;
    color: var(--gold-200);
}
.about-pledge strong { font-weight: 500; color: var(--gold-100); }

/* ---------- breakpoints ---------- */

/* Layout only at this width: the two-column lead stacks, and once stacked
   the statement and the story need a rule between them or they read as one
   run of text. Type sizes stay put — 760px still has a wide measure. */
@media (max-width: 760px) {
    .about-page .section { padding-block: 40px; }
    .about-page .section-sm { padding-block: 30px; }

    .about-stats { padding-top: 26px; }
    .about-lead { grid-template-columns: 1fr; gap: 0; }
    .about-lead-body { padding-top: 0; }

    .about-lead:not(.is-solo) .about-lead-aside {
        padding-bottom: 22px;
        margin-bottom: 22px;
        border-bottom: 1px solid var(--line);
    }

    .about-pledge { padding: 44px 0; }
    .about-pledge > .container { padding-block: 38px; }
    .about-pledge-mark { width: 50px; height: 50px; }
    .about-pledge h2 { margin-top: 22px; }
    .about-pledge h2::after { width: 108px; margin-top: 20px; }
    .about-pledge p { margin-top: 18px; }
}

/* Phone. The column is ~300px wide, so the display serif has to come down to
   keep a usable measure, the bands move closer together, and the four facts
   are compacted so the story starts higher up the scroll. */
@media (max-width: 560px) {
    .about-page .section { padding-block: 34px; }
    .about-page .section-sm { padding-block: 26px; }

    .about-stats { padding-top: 22px; }
    /* Scoped to the about band — the shared tiles keep their own sizing on
       every other template. */
    .about-stats .stat-tile { padding: 16px 10px; gap: 5px; }
    .about-stats .stat-tile .ico { width: 32px; height: 32px; }
    .about-stats .stat-tile .v { font-size: 26px; }
    .about-stats .stat-tile .k { max-width: 14ch; font-size: 9.5px; letter-spacing: .07em; }

    .about-kicker { font-size: 10.5px; letter-spacing: .12em; }
    .about-kicker::after { width: 28px; margin-top: 8px; }

    .about-lead:not(.is-solo) .about-lead-aside { padding-bottom: 20px; margin-bottom: 20px; }
    .about-lead-text {
        margin-top: 14px;
        font-size: 17.5px;
        line-height: 1.62;
        letter-spacing: 0;
    }
    .about-lead-body p { margin-bottom: 13px; font-size: 14.5px; line-height: 1.8; }

    /* The strip is a single column at this width, so two half-width buttons
       would be two cramped taps side by side; full width each reads as a
       clear last step and is the easier target. */
    .about-page .loan-strip .flex { width: 100%; gap: 10px; }
    .about-page .loan-strip .btn { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 400px) {
    .about-page .section { padding-block: 28px; }
    .about-stats { padding-top: 18px; }
    .about-stats .stat-tile { padding: 14px 8px; }
    .about-stats .stat-tile .ico { width: 29px; height: 29px; }
    .about-stats .stat-tile .v { font-size: 23px; }

    .about-lead-text { font-size: 16.5px; line-height: 1.6; }
    .about-lead-body p { font-size: 14px; }

    .about-pledge { padding: 34px 0; }
    .about-pledge > .container { padding-block: 30px; }
    .about-pledge-mark {
        width: 46px; height: 46px;
        box-shadow: 0 0 0 5px rgba(232, 217, 182, .07), 0 10px 20px rgba(0, 0, 0, .28);
    }
    .about-pledge h2 { margin-top: 18px; }
    .about-pledge h2::after { width: 92px; margin-top: 16px; }
}

@media print {
    .about-stats { padding-top: 18px; }
    .about-lead:not(.is-solo) .about-lead-aside { border-bottom: 0; margin-bottom: 10px; padding-bottom: 0; }
    .about-pledge { padding: 20px 0; background: none; border: 0; }
    .about-pledge::before, .about-pledge::after { display: none; }
    .about-pledge > .container { padding-block: 0; }
    .about-pledge > .container::before { display: none; }
    .about-pledge h2 { color: var(--ink); }
    .about-pledge h2::after { display: none; }
    .about-pledge p, .about-pledge strong { color: var(--ink-2); }
    .about-pledge-mark { display: none; }
}