/* Fahari Homes Kenya: page layout and site components. Values come from tokens.css; component classes (fh-*) from components.css. */

/* ---------- Fonts ---------- */
/* CHANGED (2026-11-07): Lens Grotesk is the one Fahari Homes Kenya typeface, on the website, the dashboard, the social post
   pictures and the PDFs. Served from our own domain (no outside font servers). Book 400, Medium 500, SemiBold 600, Bold 700
   (800 in the CSS draws as Bold) and Book italic. The 400 and 700 files are preloaded in partials/header and layouts/admin. */
@font-face { font-family: 'Lens Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lens-grotesk-400.woff2) format('woff2'); }
@font-face { font-family: 'Lens Grotesk'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/lens-grotesk-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Lens Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/lens-grotesk-500.woff2) format('woff2'); }
@font-face { font-family: 'Lens Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/lens-grotesk-600.woff2) format('woff2'); }
@font-face { font-family: 'Lens Grotesk'; font-style: normal; font-weight: 700 900; font-display: swap; src: url(../fonts/lens-grotesk-700.woff2) format('woff2'); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 16px/26px var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: 3px; }
/* Plain text links only: buttons styled as links keep their own hover colours (white text on blue, etc.) */
:where(body:not(.admin)) a:where(:not(.fh-btn, .icon-btn, .wa-float)):hover { color: var(--blue-dark); } /* CHANGED: the dashboard has its own rule (admin.css) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button { font: inherit; }
h1, h2, h3, h4 { text-wrap: balance; letter-spacing: var(--tracking-title); }
p { text-wrap: pretty; }
main:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; padding: var(--space-2) var(--space-4); background: var(--blue); color: var(--on-blue); border-radius: var(--radius-pill); }
.skip-link:focus { top: var(--space-4); outline-color: var(--green); }
[hidden] { display: none !important; }
.muted { color: var(--ink-muted); }
.nowrap { white-space: nowrap; }

.container { width: 100%; max-width: calc(1200px + 2 * var(--space-12)); margin-inline: auto; padding-inline: var(--space-12); }
/* Generous vertical rhythm so pages breathe: 120px between sections on desktop, 96px on tablet, 64px on phones */
.section { margin-block: calc(var(--space-20) * 1.5); }
.section--tight { margin-block: calc(var(--space-8) * 2); }
.section--muted { background: var(--surface-muted); padding-block: calc(var(--space-20) * 1.5); }
@media (max-width: 1000px) {
  .section { margin-block: calc(var(--space-12) * 2); }
  .section--muted { padding-block: calc(var(--space-12) * 2); }
}
@media (max-width: 720px) {
  .container { padding-inline: var(--space-4); }
  .section { margin-block: calc(var(--space-8) * 2); }
  .section--tight { margin-block: var(--space-12); }
  .section--muted { padding-block: calc(var(--space-8) * 2); }
}

.fh-sh { margin-bottom: var(--space-12); }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12) var(--space-6); }
@media (max-width: 720px) { .fh-sh { margin-bottom: var(--space-8); } .card-grid { row-gap: var(--space-8); } }
@media (max-width: 1000px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .card-grid { grid-template-columns: minmax(0, 1fr); } }

.empty { padding: var(--space-8); background: var(--surface-muted); border-radius: var(--radius-md); color: var(--ink-muted); }
.empty p { margin: 0; }
.empty strong { color: var(--ink); }
.empty__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--ink); cursor: pointer; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.icon-btn:hover { background: var(--blue-tint); color: var(--blue); }
.icon-btn--outline { background: var(--surface); border: 1px solid var(--border); }
.icon-btn--light { background: rgba(255,255,255,0.14); color: var(--on-blue); }
.icon-btn--light:hover { background: rgba(255,255,255,0.28); color: var(--on-blue); }
.icon-btn--light:focus-visible { outline-color: var(--green); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--glass); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; }
.site-header.is-scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-card); }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 72px; }
.site-nav .fh-nav__links { background: var(--surface-muted); }
.site-nav .fh-nav__link { color: var(--ink-muted); }
.site-nav .fh-nav__link:hover { color: var(--ink); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-3); }
.site-header__phone { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); font-size: 16px; font-weight: 500; text-decoration: none; border-radius: var(--radius-pill); padding: var(--space-2); }
.site-header__phone:hover { color: var(--blue); }
.site-header__phone svg { color: var(--blue); }
.menu-toggle { display: none; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); cursor: pointer; }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }
.mobile-menu { border-top: 1px solid var(--border); background: var(--surface); padding-block: var(--space-4) var(--space-6); }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu li a { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); color: var(--ink); font: 600 20px/26px var(--font-display); text-decoration: none; }
.mobile-menu li a[aria-current="page"] { color: var(--blue); }
.mobile-menu__actions { display: grid; gap: var(--space-2); margin-top: var(--space-6); }
@media (max-width: 1100px) { .site-header__phone span { display: none; } }
@media (max-width: 960px) {
  .site-nav, .site-header__phone { display: none; }
  .menu-toggle { display: grid; }
}
@media (max-width: 480px) {
  .site-header__bar { height: 64px; }
  .site-header__cta { display: none; }
}

/* ---------- Home slider: designed banners only (CHANGED) ----------
 * Images only: the overlay gradient, text shadows and slow zoom were removed, so banners show exactly as designed.
 * Height: about 30% of the screen on phones; on tablets and desktops it follows the 1920 × 750 banner shape
 * (39vw) between 320 and 600 px. object-fit: cover fills the frame without stretching. */
.hero-slider { position: relative; background: var(--blue-tint); }
.hero-slider__track { position: relative; height: clamp(320px, 39vw, 600px); overflow: hidden; }
.hero__slide { position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s linear 1s; }
.hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity 1s ease, visibility 0s; }
.hero__slide picture, .hero__slide img, .hero__link { display: block; width: 100%; height: 100%; }
.hero__slide img { object-fit: cover; object-position: center; }
.hero__link:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
/* Dots sit on a small dark pill (not over the whole image) so they show on light and dark banners */
.hero__dots { position: absolute; z-index: 1; left: 50%; bottom: var(--space-4); transform: translateX(-50%); display: flex; padding: 2px 6px; border-radius: var(--radius-pill); background: rgba(4,22,64,0.45); }
/* CHANGED: each dot is a 24px tap target (WCAG target size); the visible dot is drawn inside it */
.hero__dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-pill); background: none; cursor: pointer; transition: width .2s ease; }
.hero__dot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%); border-radius: var(--radius-pill); background: rgba(255,255,255,0.7); transition: width .2s ease, background-color .2s ease; }
.hero__dot.is-active { width: 36px; }
.hero__dot.is-active::before { width: 28px; background: var(--green); }
.hero__dot:focus-visible { outline: 2px solid var(--on-blue); outline-offset: -2px; }
@media (max-width: 720px) {
  .hero-slider__track { height: 30vh; height: 30svh; min-height: 180px; max-height: 320px; }
  .hero__dots { bottom: var(--space-2); padding: 0 4px; }
  .hero__dot::before { width: 8px; height: 8px; }
  .hero__dot.is-active { width: 28px; }
  .hero__dot.is-active::before { width: 20px; }
}

/* ---------- Home intro: heading, text, buttons and search (CHANGED: moved out of the slider, white background) ---------- */
.hero__inner { display: grid; gap: var(--space-12); padding-top: var(--space-20); }
.hero__content { max-width: 820px; margin-inline: auto; text-align: center; color: var(--ink); }
.hero__eyebrow { margin-bottom: var(--space-4); }
.hero__lead { max-width: 60ch; margin: var(--space-4) auto 0; font-size: 19px; line-height: 30px; font-weight: 500; color: var(--ink); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-8); }
.hero__search { width: 100%; max-width: 1040px; margin-inline: auto; }
@media (max-width: 720px) {
  .hero__inner { padding-top: var(--space-12); gap: var(--space-8); }
  .hero__lead { font-size: 17px; line-height: 27px; }
  .hero__actions .fh-btn { flex: 1 1 100%; }
}

/* ---------- Search panel ---------- */
.property-search select { min-width: 0; }
.property-search--bar { box-shadow: none; border: 1px solid var(--border); }
.property-search--bar .fh-search__fields { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.fh-search__filters a.fh-tag { text-decoration: none; }
.fh-search__filters a.fh-tag:hover { background: var(--blue-tint); color: var(--ink); }
.fh-search__filters a.fh-tag:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.filter-wrap { margin-top: var(--space-8); }
@media (max-width: 520px) {
  .fh-search { padding: var(--space-4); border-radius: var(--radius-md); }
  .fh-search__foot .fh-btn { width: 100%; }
}

/* ---------- Value grid, stats ---------- */
.value-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.value-card { padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); transition: box-shadow .2s ease, border-color .2s ease; }
.value-card:hover { box-shadow: var(--shadow-card); border-color: transparent; }
.value-card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--blue); color: var(--on-blue); }
.value-card__title { margin: var(--space-4) 0 var(--space-2); font: 600 20px/26px var(--font-display); letter-spacing: var(--tracking-title); }
.value-card__text { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
@media (max-width: 1000px) { .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .value-grid { grid-template-columns: minmax(0, 1fr); } }

.stats-band { margin-top: var(--space-12); padding: var(--space-8) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stats-band--flush { margin-top: 0; }
@media (max-width: 560px) {
  .fh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fh-stat, .fh-stat:first-child { padding: 0 var(--space-4); border-left: 0; }
  .fh-stat__value { font-size: 40px; line-height: 44px; }
}

/* ---------- Property card ---------- */

/* ---------- Blog card ---------- */
.bcard { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.bcard__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-md); background: var(--blue-tint); }
.bcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.bcard:hover .bcard__media img { transform: scale(1.03); }
.bcard__body { display: grid; gap: var(--space-2); }
.bcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; font: 500 14px/20px var(--font-body); color: var(--ink-muted); }
.bcard__title { margin: 0; font: 600 20px/26px var(--font-display); letter-spacing: var(--tracking-title); }
.bcard__title a { color: var(--ink); text-decoration: none; border-radius: 4px; }
.bcard__title a:hover { color: var(--blue); }
.bcard__excerpt { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.bcard__author { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: 500 14px/20px var(--font-body); color: var(--ink-muted); }
.bcard--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.bcard--wide .bcard__title { font-size: 28px; line-height: 34px; letter-spacing: var(--tracking-heading); }
.bcard--wide .bcard__excerpt { font-size: 16px; line-height: 26px; }
@media (max-width: 760px) { .bcard--wide { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } .bcard--wide .bcard__title { font-size: 22px; line-height: 28px; } }

/* ---------- Lead banner ---------- */
.lead-banner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; padding: var(--space-12); border-radius: var(--radius-lg); background: var(--blue); color: var(--on-blue); }
.lead-banner__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font: 600 13px/18px var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.lead-banner__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--green); }
.lead-banner__title { margin: 0; font: 600 44px/50px var(--font-display); letter-spacing: var(--tracking-heading); color: var(--on-blue); }
.lead-banner__text { margin: var(--space-4) 0 0; max-width: 50ch; opacity: .9; }
.lead-banner__list { display: grid; gap: var(--space-2); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.lead-banner__list li { display: flex; align-items: center; gap: var(--space-3); }
.lead-banner__list svg { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: var(--radius-pill); background: var(--green); color: var(--on-green); }
.lead-banner__guide { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-8); color: var(--on-blue); font-weight: 500; text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 5px; border-radius: 4px; }
.lead-banner__guide:hover { color: var(--green); }
.lead-banner__guide:focus-visible { outline-color: var(--green); }
.lead-banner__form { padding: var(--space-8); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); }
.lead-banner__form-title { margin: 0 0 var(--space-4); font: 600 20px/26px var(--font-display); letter-spacing: var(--tracking-title); }
@media (max-width: 900px) { .lead-banner { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding: var(--space-8) var(--space-6); } }
@media (max-width: 720px) { .lead-banner__title { font-size: 32px; line-height: 38px; } }
@media (max-width: 520px) { .lead-banner { padding: var(--space-6) var(--space-4); border-radius: var(--radius-md); } .lead-banner__form { padding: var(--space-6) var(--space-4); } }

/* ---------- Forms ---------- */
.lead-form { display: grid; gap: var(--space-4); }
.lead-form__fields { display: grid; gap: var(--space-4); }
.lead-form--compact .lead-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lead-form--compact .lead-form__fields .field:last-child:nth-child(odd) { grid-column: 1 / -1; }
#contact-form .lead-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field--wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .lead-form--compact .lead-form__fields, #contact-form .lead-form__fields { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field__label { font: 500 16px/24px var(--font-body); color: var(--ink); padding: 0; }
.field__optional { color: var(--ink-muted); font-weight: 400; }
.field__input { width: 100%; min-height: 46px; padding: 11px var(--space-4); background: var(--surface-muted); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-sm); font: 400 16px/24px var(--font-body); transition: border-color .15s ease, background-color .15s ease; }
.field__input::placeholder { color: var(--ink-muted); opacity: .8; }
.field__input:hover { border-color: var(--ink-muted); }
.field__input:focus { background: var(--surface); border-color: var(--blue); outline: none; }
.field__input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
textarea.field__input { resize: vertical; min-height: 92px; }
.field__input[aria-invalid="true"], .field [aria-invalid="true"] { border-color: currentColor; color: var(--ink); box-shadow: inset 4px 0 0 var(--blue); }
.field__error { display: flex; align-items: flex-start; gap: 6px; margin: 0; font: 500 14px/20px var(--font-body); color: var(--blue); }
.field__error::before { content: "!"; flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: var(--radius-pill); background: var(--blue); color: var(--on-blue); font-size: 12px; font-weight: 700; }
.fh-field__control select { font-size: 16px; }
.choice-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.choice-group legend { width: 100%; margin-bottom: 6px; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; height: 38px; padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-muted); font-size: 16px; font-weight: 500; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.choice input:checked + span { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 16px; line-height: 24px; color: var(--ink-muted); cursor: pointer; }
.consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--blue); }
.lead-form__submit { justify-self: start; }
.lead-form--compact .lead-form__submit, .lead-form--panel .lead-form__submit, .sidebar .lead-form__submit { width: 100%; justify-content: space-between; padding-left: var(--space-6); }
.lead-form__submit[disabled] { opacity: .7; cursor: progress; }
.lead-form__alert { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--blue-tint); color: var(--ink); font-size: 16px; line-height: 24px; border-left: 4px solid var(--blue); }
.lead-form__success { display: grid; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-md); background: var(--green-tint); border: 1px solid var(--green); color: var(--ink); }
.lead-form__success strong { font: 600 20px/26px var(--font-display); letter-spacing: var(--tracking-title); }
.lead-form__success p { margin: 0; font-size: 16px; line-height: 24px; }
.lead-form__success .lead-form__wa { justify-self: start; margin-top: var(--space-2); } /* NEW (2026-11-07): carry on in WhatsApp */
.lead-form.is-done > :not(.lead-form__success) { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Slide-over enquiry panel ---------- */
.slide-over { position: fixed; inset: 0 0 0 auto; width: min(480px, 100%); max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-panel); overflow-y: auto; overscroll-behavior: contain; }
.slide-over::backdrop { background: rgba(4,22,64,0.45); }
.slide-over[open] { animation: slide-in .28s ease; }
@keyframes slide-in { from { transform: translateX(100%); } to { transform: none; } }
.slide-over__inner { display: grid; gap: var(--space-4); padding: var(--space-6); }
.slide-over__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.slide-over__head .fh-eyebrow { margin-bottom: var(--space-2); }
.slide-over__title { margin: 0; font: 600 28px/34px var(--font-display); letter-spacing: var(--tracking-heading); }
.slide-over__property { margin: var(--space-2) 0 0; display: inline-flex; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--blue-tint); font-size: 16px; font-weight: 500; color: var(--blue); }
.slide-over__intro { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.slide-over__alt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: 16px; color: var(--ink-muted); }
.slide-over__alt a { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; text-decoration: none; }
body.has-dialog { overflow: hidden; }

/* ---------- WhatsApp float ---------- */
.wa-float { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 30; display: inline-flex; align-items: center; gap: var(--space-2); height: 60px; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--green); color: var(--on-green); text-decoration: none; font-weight: 600; font-size: 16px; box-shadow: var(--shadow-panel); transition: background-color .15s ease, transform .15s ease; }
.wa-float:hover { background: var(--green-dark); color: var(--on-green); transform: translateY(-2px); }
.wa-float__label { padding-right: var(--space-1); }
/* Attention: a soft ring pulses out every few seconds and the icon gives a little wiggle */
.wa-float::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--green); animation: wa-ring 3s ease-out infinite; }
.wa-float svg { animation: wa-wiggle 3s ease-in-out infinite; transform-origin: 50% 60%; }
.wa-float:hover::before, .wa-float:hover svg { animation-play-state: paused; }
@keyframes wa-ring {
  0% { transform: scale(1); opacity: .55; }
  70%, 100% { transform: scale(1.35); opacity: 0; }
}
@keyframes wa-wiggle {
  0%, 62%, 100% { transform: rotate(0); }
  66% { transform: rotate(-14deg); }
  72% { transform: rotate(12deg); }
  78% { transform: rotate(-8deg); }
  84% { transform: rotate(4deg); }
}
/* Card WhatsApp icons: brand green with a gentle pop when the card is hovered */
@keyframes wa-pop {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.18) rotate(-8deg); }
  70% { transform: scale(.96) rotate(4deg); }
}
@media (max-width: 720px) {
  .wa-float { right: var(--space-4); bottom: var(--space-4); width: 56px; height: 56px; padding: 0; justify-content: center; }
  .wa-float__label { display: none; }
  .page-property .wa-float { bottom: 88px; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; margin-top: var(--space-12); }
.page-hero--compact { grid-template-columns: minmax(0, 1fr); }
.page-hero--compact .page-hero__copy { max-width: 860px; }
.page-hero__lead { margin: var(--space-4) 0 0; max-width: 60ch; font-size: 18px; line-height: 28px; color: var(--ink-muted); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.page-hero__media { overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 5 / 4; background: var(--blue-tint); }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .page-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); margin-top: var(--space-8); } .page-hero__lead { font-size: 16px; line-height: 26px; } }

/* ---------- About ---------- */
.story { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.story__aside { display: grid; gap: var(--space-6); }
.mv-card { padding: var(--space-8); border-radius: var(--radius-lg); background: var(--surface-muted); }
.mv-card p { margin: 0; color: var(--ink-muted); }
.mv-card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--green); color: var(--on-green); }
.mv-card__title { margin: var(--space-4) 0 var(--space-2); font: 600 28px/34px var(--font-display); letter-spacing: var(--tracking-heading); }
.mv-card--blue { background: var(--blue); color: var(--on-blue); }
.mv-card--blue p { color: var(--on-blue); opacity: .9; }
.values { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--border); }
.values__title { margin: 0 0 var(--space-6); font: 600 28px/34px var(--font-display); letter-spacing: var(--tracking-heading); }
.values__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.values__list li { display: grid; gap: var(--space-2); padding-left: var(--space-4); border-left: 3px solid var(--green); }
.values__list strong { font: 600 20px/26px var(--font-display); letter-spacing: var(--tracking-title); }
.values__list span { font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.pillar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.pillar { position: relative; display: grid; align-content: start; gap: var(--space-3); padding: var(--space-8) var(--space-6); border-radius: var(--radius-md); background: var(--surface); }
.pillar p { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.pillar__num { position: absolute; top: var(--space-6); right: var(--space-6); font: 600 14px/1 var(--font-display); color: var(--ink-muted); letter-spacing: var(--tracking-small); }
.pillar__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--blue-tint); color: var(--blue); }
.pillar__title { margin: var(--space-2) 0 0; font: 600 20px/26px var(--font-display); letter-spacing: var(--tracking-title); }
.testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); margin-top: var(--space-12); }
.tcard { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: var(--space-8); border-radius: var(--radius-lg); background: var(--surface-muted); }
.tcard__mark { font: 700 64px/0.6 var(--font-display); color: var(--green); height: 30px; }
.tcard__quote { margin: 0; flex: 1; }
.tcard__quote p { margin: 0; font-size: 18px; line-height: 28px; }
.tcard__who { display: flex; align-items: center; gap: var(--space-3); }
.tcard__avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--blue); color: var(--on-blue); font: 600 16px/1 var(--font-display); }
.tcard__name { display: block; font-weight: 600; color: var(--blue); }
.tcard__role { display: block; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.impact-link { margin: var(--space-8) 0 0; }
.fh-cta .fh-btn:focus-visible { outline-color: var(--green); }
@media (max-width: 1000px) { .pillar-grid, .values__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .story { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }
@media (max-width: 560px) { .pillar-grid, .values__list { grid-template-columns: minmax(0, 1fr); } .fh-cta { padding: var(--space-12) var(--space-4); } }
/* NEW: the banner photo is a lazy <img> under the dark overlay, not a CSS background */
.fh-cta--photo { isolation: isolate; }
.fh-cta__photo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Prose (imported content) ---------- */
.prose { max-width: 70ch; color: var(--ink); }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--space-4); }
.prose h2 { margin: var(--space-8) 0 var(--space-3); font: 600 28px/34px var(--font-display); letter-spacing: var(--tracking-heading); }
.prose h3 { margin: var(--space-6) 0 var(--space-2); font: 600 20px/26px var(--font-display); letter-spacing: var(--tracking-title); }
.prose h4 { margin: var(--space-4) 0 var(--space-2); font: 600 17px/24px var(--font-body); }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose li { margin-bottom: var(--space-1); }
.prose li::marker { color: var(--blue); }
.prose img { border-radius: var(--radius-md); margin: var(--space-6) 0; }
.prose figure { margin: 0; }
.prose blockquote { margin: var(--space-6) 0; padding: var(--space-4) var(--space-6); border-left: 4px solid var(--green); background: var(--surface-muted); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; font-size: 16px; }
.prose th, .prose td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); text-align: left; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-8) 0; }
.prose a { font-weight: 500; }
.prose--content[data-collapsible].is-collapsed { max-height: 520px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.read-more { margin-top: var(--space-3); }

/* ---------- Breadcrumb, detail header ---------- */
.breadcrumb { margin: var(--space-8) 0 var(--space-4); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--border); }
.breadcrumb a { color: var(--ink-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--blue); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--ink); }
.detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-6); margin-bottom: var(--space-6); }
.detail-head__tags { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.detail-head__ref { font: 500 14px/20px var(--font-body); color: var(--ink-muted); }
.detail-head__title { margin: 0; font: 600 44px/50px var(--font-display); letter-spacing: var(--tracking-heading); max-width: 22ch; }
.detail-head__loc { display: flex; align-items: center; gap: 6px; margin: var(--space-3) 0 0; color: var(--ink-muted); }
.detail-head__price { display: grid; text-align: right; }
.detail-head__price-label { font-size: 14px; color: var(--ink-muted); }
.detail-head__price strong { font: 600 32px/38px var(--font-display); color: var(--blue); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-heading); }
@media (max-width: 720px) { .detail-head__title { font-size: 32px; line-height: 38px; } .detail-head__price { text-align: left; } }

/* ---------- Gallery and lightbox ---------- */
.gallery { position: relative; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 220px); gap: var(--space-2); border-radius: var(--radius-lg); overflow: hidden; }
.gallery--single { grid-template-columns: 1fr; grid-template-rows: 460px; }
.gallery__item { position: relative; padding: 0; border: 0; background: var(--blue-tint); cursor: zoom-in; overflow: hidden; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery__item:hover img { transform: scale(1.03); }
.gallery__item:focus-visible { outline-offset: -4px; outline-color: var(--green); }
.gallery__item--main { grid-row: span 2; }
.gallery__all { position: absolute; right: var(--space-4); bottom: var(--space-4); box-shadow: var(--shadow-card); }
@media (max-width: 760px) {
  .gallery { grid-template-columns: 1fr; grid-template-rows: 300px; border-radius: var(--radius-md); }
  .gallery__item:not(.gallery__item--main) { display: none; }
  .gallery__item--main { grid-row: auto; }
}
.lightbox { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: rgba(4,22,64,0.96); color: var(--on-blue); }
.lightbox::backdrop { background: rgba(4,22,64,0.96); }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-6); }
.lightbox__count { font-size: 16px; font-variant-numeric: tabular-nums; }
.lightbox__stage { display: grid; place-items: center; margin: 0; padding: 0 var(--space-20) var(--space-8); min-height: 0; }
.lightbox__stage img { max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; border-radius: var(--radius-sm); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.lightbox__nav--prev { left: var(--space-4); }
.lightbox__nav--next { right: var(--space-4); }
@media (max-width: 720px) { .lightbox__stage { padding: 0 var(--space-2) var(--space-20); } .lightbox__nav { top: auto; bottom: var(--space-4); transform: none; } }

/* ---------- Detail layout, sidebar ---------- */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-12); align-items: start; margin-top: var(--space-8); }
.detail-main { min-width: 0; }
@media (max-width: 1000px) { .detail-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-8); padding: var(--space-6); list-style: none; border: 1px solid var(--border); border-radius: var(--radius-md); }
.facts li { display: flex; align-items: center; gap: var(--space-3); }
.facts__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--blue-tint); color: var(--blue); }
.facts__label { display: block; font: 500 13px/18px var(--font-body); color: var(--ink-muted); }
.facts__value { display: block; font-weight: 600; font-size: 16px; line-height: 24px; }
.detail-section { padding: var(--space-8) 0; border-top: 1px solid var(--border); }
.detail-section__title { margin: 0 0 var(--space-4); font: 600 28px/34px var(--font-display); letter-spacing: var(--tracking-heading); }
.detail-section__text { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--space-4); color: var(--ink-muted); }
.pricing { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--space-6); align-items: stretch; }
.pricing__cash { display: grid; align-content: center; gap: var(--space-1); padding: var(--space-6); border-radius: var(--radius-md); background: var(--blue); color: var(--on-blue); }
.pricing__label { font-size: 14px; opacity: .9; }
.pricing__value { font: 600 26px/32px var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-title); }
.pricing__note { font-size: 14px; line-height: 20px; opacity: .9; }
.pricing__table { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.pricing__table th, .pricing__table td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--border); text-align: left; }
.pricing__table thead th { font: 500 13px/18px var(--font-body); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; }
.pricing__table tbody th { font-weight: 500; }
.pricing__table td:nth-child(2) { font-weight: 600; color: var(--blue); }
.pricing__small { margin: var(--space-3) 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
@media (max-width: 640px) { .pricing { grid-template-columns: minmax(0, 1fr); } .pricing__table { font-size: 14px; } }
/* NEW: properties page price table and questions; the table scrolls sideways inside its box on phones */
.price-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-list .pricing__table { min-width: 560px; }
.price-list .pricing__table a { color: inherit; }
.price-list .pricing__table td { white-space: nowrap; }
.price-list .pricing__table tbody th { min-width: 200px; }
h2.price-faq__title { margin: calc(var(--space-8) * 2) 0 var(--space-6); font-size: 28px; line-height: 34px; }
.price-faq { max-width: 860px; }
.checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-6); margin: 0; padding: 0; list-style: none; }
.checklist li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 16px; line-height: 24px; }
.checklist__icon { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--green); color: var(--on-green); }
@media (max-width: 560px) { .checklist { grid-template-columns: minmax(0, 1fr); } }
.map { overflow: hidden; border-radius: var(--radius-md); background: var(--blue-tint); aspect-ratio: 16 / 9; }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
.map--wide { aspect-ratio: 21 / 8; border-radius: var(--radius-lg); }
@media (max-width: 720px) { .map--wide { aspect-ratio: 4 / 3; } }
.map__link { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-3); font-size: 16px; font-weight: 500; }

.sidebar { position: sticky; top: 96px; display: grid; gap: var(--space-6); }
.sidebar__card { display: grid; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.sidebar__card .fh-eyebrow { margin: 0; }
.sidebar__title { margin: 0; font: 600 24px/30px var(--font-display); letter-spacing: var(--tracking-title); }
.sidebar__text { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.sidebar__price { display: grid; gap: 2px; }
.sidebar__price-label { font-size: 14px; color: var(--ink-muted); }
.sidebar__price-value { font: 600 32px/38px var(--font-display); color: var(--blue); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-heading); }
.sidebar__price-alt { font-size: 16px; color: var(--ink); }
.sidebar__wa { width: 100%; }
.sidebar__divider { display: flex; align-items: center; gap: var(--space-3); font-size: 14px; color: var(--ink-muted); }
.sidebar__divider::before, .sidebar__divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.sidebar__call { margin: 0; font-size: 16px; text-align: center; color: var(--ink-muted); }
.sidebar__call a { font-weight: 600; }
.sidebar__list { display: grid; gap: var(--space-3); }
.sidebar__list-title { margin: 0; font: 600 20px/26px var(--font-display); letter-spacing: var(--tracking-title); }
.mini-listing { display: flex; gap: var(--space-3); align-items: center; color: var(--ink); text-decoration: none; border-radius: var(--radius-sm); }
.mini-listing img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); flex: none; }
.mini-listing__title { display: block; font-weight: 600; font-size: 16px; line-height: 24px; }
.mini-listing:hover .mini-listing__title { color: var(--blue); }
.mini-listing__price { display: block; font-size: 16px; color: var(--blue); font-weight: 600; }
@media (max-width: 1000px) { .sidebar { position: static; } }

.mobile-cta { display: none; }
@media (max-width: 720px) {
  .mobile-cta { position: fixed; inset: auto 0 0 0; z-index: 35; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(7,47,135,0.08); }
  .page-property main { padding-bottom: 72px; }
}

/* ---------- Listing page heads, pagination ---------- */
.list-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-8); }
.list-head__count { margin: 0; font: 500 16px/24px var(--font-body); color: var(--ink-muted); }
.list-head__desc { margin: var(--space-2) 0 0; color: var(--ink-muted); font-size: 16px; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); margin-top: var(--space-12); }
.pagination ol { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.pagination a { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-width: 40px; height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-pill); color: var(--ink); font-size: 16px; font-weight: 500; text-decoration: none; }
.pagination a:hover { background: var(--surface-muted); }
.pagination a[aria-current="page"] { background: var(--blue); color: var(--on-blue); }
.pagination__step { border: 1px solid var(--border); }

/* ---------- Blog post ---------- */
.post__head { max-width: 860px; }
.post__title { margin: 0; }
.post__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: var(--space-4) 0 0; font: 500 16px/24px var(--font-body); color: var(--ink-muted); }
.post__meta span { display: inline-flex; align-items: center; gap: 6px; }
.post__cover { margin: var(--space-8) 0 0; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 21 / 9; background: var(--blue-tint); }
.post__cover img { width: 100%; height: 100%; object-fit: cover; }
.post__body { font-size: 17px; line-height: 29px; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-8); padding: var(--space-6) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.share__label { font-weight: 600; font-size: 16px; }
.share__list { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.share__copied { font-size: 14px; color: var(--ink-muted); }
.author-box { display: flex; gap: var(--space-4); align-items: flex-start; margin-top: var(--space-8); padding: var(--space-6); border-radius: var(--radius-md); background: var(--surface-muted); }
.author-box__avatar { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--blue); color: var(--on-blue); font: 700 18px/1 var(--font-display); }
.author-box__name { margin: 0; font: 600 18px/24px var(--font-display); letter-spacing: var(--tracking-small); }
.author-box__bio { margin: var(--space-1) 0 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
@media (max-width: 720px) { .post__cover { aspect-ratio: 4 / 3; border-radius: var(--radius-md); } .post__body { font-size: 16px; line-height: 27px; } }

/* ---------- Contact ---------- */
.contact-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-12) 0 0; padding: 0; list-style: none; }
.contact-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-md); }
.contact-card p { margin: 0; flex: 1; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.contact-card__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-2); border-radius: var(--radius-pill); background: var(--blue-tint); color: var(--blue); }
.contact-card--wa .contact-card__icon { background: var(--green); color: var(--on-green); }
.contact-card__title { margin: 0; font: 600 20px/26px var(--font-display); letter-spacing: var(--tracking-title); }
.contact-card__link { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.contact-card__link:hover { text-decoration: underline; }
@media (max-width: 1000px) { .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .contact-cards { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-8); } }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.contact-form-card { padding: var(--space-8); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.contact-form-card__intro { margin: var(--space-3) 0 var(--space-6); color: var(--ink-muted); }
.contact-aside { display: grid; gap: var(--space-6); }
.contact-aside__card { padding: var(--space-6); border-radius: var(--radius-md); border: 1px solid var(--border); }
.contact-aside__card--muted { background: var(--surface-muted); border-color: transparent; }
.contact-aside__card p { margin: 0 0 var(--space-2); font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.contact-aside__title { margin: 0 0 var(--space-4); font: 600 20px/26px var(--font-display); letter-spacing: var(--tracking-title); }
.steps { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 32px 1fr; column-gap: var(--space-3); counter-increment: step; }
.steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--blue); color: var(--on-blue); font: 600 14px/1 var(--font-display); }
.steps strong { font-size: 16px; }
.steps span { font-size: 16px; line-height: 24px; color: var(--ink-muted); }
@media (max-width: 900px) { .contact-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }
@media (max-width: 520px) { .contact-form-card { padding: var(--space-6) var(--space-4); border-radius: var(--radius-md); } }

/* ---------- Status pages ---------- */
.status-page { display: grid; justify-items: center; gap: var(--space-4); max-width: 640px; text-align: center; }
.status-page__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--radius-pill); background: var(--green); color: var(--on-green); }
.status-page__code { margin: 0; font: 600 14px/1 var(--font-body); letter-spacing: .1em; color: var(--ink-muted); }
.status-page__text { margin: 0; color: var(--ink-muted); font-size: 18px; line-height: 28px; }
.status-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }
.status-page__detail { max-width: 100%; overflow: auto; text-align: left; font-size: 13px; background: var(--surface-muted); padding: var(--space-4); border-radius: var(--radius-sm); }

/* ---------- Footer: brand blue, white type ---------- */
.site-footer { margin-top: calc(var(--space-20) * 1.5); padding: var(--space-20) 0 var(--space-8); background: var(--blue); color: var(--on-blue); }
.site-footer a { color: var(--on-blue); text-decoration: none; border-radius: 4px; }
.site-footer a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 4px; }
.site-footer :focus-visible { outline-color: var(--green); }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: var(--space-12) var(--space-8); }
.site-footer__brand { display: grid; align-content: start; justify-items: start; gap: var(--space-4); }
.site-footer__logo { display: inline-block; }
.site-footer__lead { margin: var(--space-2) 0 0; font: 600 28px/34px var(--font-display); letter-spacing: var(--tracking-heading); color: var(--on-blue); text-wrap: balance; }
.site-footer__text { margin: 0; max-width: 42ch; font-size: 16px; line-height: 24px; color: var(--on-blue); opacity: .85; }
.site-footer__heading { margin: 0 0 var(--space-4); font: 600 14px/20px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.site-footer__col ul { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 24px; }
.site-footer__contact { display: grid; gap: var(--space-3); font-style: normal; font-size: 16px; line-height: 24px; }
.site-footer__contact p { display: flex; gap: var(--space-3); align-items: flex-start; margin: 0; }
.site-footer__contact svg { flex: none; margin-top: 3px; color: var(--green); }
.site-footer__map { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-4); font-size: 16px; font-weight: 600; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,0.2); font-size: 16px; line-height: 24px; color: var(--on-blue); }
.site-footer__legal p { margin: 0; opacity: .85; }
@media (max-width: 1100px) { .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .site-footer { padding-top: var(--space-12); padding-bottom: 96px; } .site-footer__top { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .hero__slide { transform: none; }
  .bcard:hover .bcard__media img, .gallery__item:hover img { transform: none; }
  .wa-float::before, .wa-float svg, .pcard:hover .pcard__wa { animation: none !important; }
}

/* ---------- Properties: status tabs ---------- */
.filter-tabs { display: flex; gap: var(--space-1); margin-top: var(--space-8); padding: var(--space-1); width: fit-content; max-width: 100%; overflow-x: auto; background: var(--surface-muted); border-radius: var(--radius-pill); scrollbar-width: none; }
.filter-tabs__tab { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill); color: var(--ink-muted); font-size: 16px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.filter-tabs__tab:hover { color: var(--ink); background: var(--blue-tint); }
.filter-tabs__tab[aria-current="page"] { background: var(--blue); color: var(--on-blue); box-shadow: var(--shadow-card); }
.filter-tabs__count { min-width: 26px; padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: 13px; text-align: center; }
.filter-tabs__tab[aria-current="page"] .filter-tabs__count { background: var(--green); color: var(--on-green); }
@media (max-width: 520px) { .filter-tabs { width: 100%; } .filter-tabs__tab { padding: var(--space-2) var(--space-4); font-size: 16px; } }

/* ---------- Card call-to-action buttons: one row (details, site visit, WhatsApp) ---------- */
.bcard__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.bcard__cta { margin-top: auto; }
.bcard__excerpt { margin-bottom: var(--space-2) !important; }
.bcard { height: 100%; }
.author-box__cta { margin-top: var(--space-4); }

/* ---------- HTML sitemap ---------- */
.sitemap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-12); }
.sitemap-grid h2 { margin: 0 0 var(--space-4); font: 600 20px/26px var(--font-display); letter-spacing: var(--tracking-title); }
.sitemap-grid ul { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-4); font-size: 16px; }
.sitemap-grid li::marker { color: var(--green-dark); }
@media (max-width: 900px) { .sitemap-grid { grid-template-columns: minmax(0, 1fr); } }
.sitemap-grid__gap { margin-top: var(--space-8) !important; }

/* ---- Content from the dashboard: summaries, amenities, video tours, editor embeds and CTAs ---- */
.summary-box { margin: 0 0 var(--space-8); padding: var(--space-4) var(--space-6); border-left: 4px solid var(--green); border-radius: var(--radius-sm); background: var(--surface-muted); }
.summary-box__label { margin: 0 0 var(--space-1); font: 500 13px/18px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.summary-box__text { margin: 0; font-size: 16px; line-height: 26px; }
.amenity-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.video-embed, .prose figure.embed { position: relative; aspect-ratio: 16 / 9; margin: 0 0 var(--space-4); overflow: hidden; border-radius: var(--radius-md); background: var(--surface-muted); }
.video-embed iframe, .prose figure.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.prose figure.image { margin: var(--space-6) 0; }
.prose figcaption { margin-top: var(--space-2); font-size: 14px; color: var(--ink-muted); }
.prose blockquote { margin: var(--space-6) 0; padding: var(--space-2) var(--space-6); border-left: 4px solid var(--green); color: var(--ink-muted); font-size: 18px; line-height: 28px; }
.prose pre { overflow-x: auto; margin: 0 0 var(--space-4); padding: var(--space-4); border-radius: var(--radius-sm); background: var(--ink); color: #f4f6f9; font: 14px/20px ui-monospace, SFMono-Regular, Consolas, monospace; }
.prose code { padding: 1px 5px; border-radius: 4px; background: var(--surface-muted); font: 0.9em ui-monospace, SFMono-Regular, Consolas, monospace; }
.prose pre code { padding: 0; background: none; color: inherit; }
.prose a.fh-btn { margin: var(--space-2) 0 var(--space-4); text-decoration: none; }
.prose table { width: 100%; margin: 0 0 var(--space-4); border-collapse: collapse; font-size: 16px; }
.prose th, .prose td { padding: var(--space-2) var(--space-3); border: 1px solid var(--border); text-align: left; }
.prose h5 { margin: var(--space-4) 0 var(--space-2); font: 600 16px/24px var(--font-body); }
.preview-bar { position: sticky; top: 0; z-index: 100; padding: var(--space-2) var(--space-4); background: var(--ink); color: #fff; font-size: 16px; text-align: center; }

/* ---- Pages from the page builder ---- */
.cpage__section { margin-top: var(--space-20); }
.cpage__section--wide { margin-top: var(--space-20); padding-inline: var(--space-12); }
.page-custom main > :first-child { margin-top: var(--space-8); }
.cpage-hero { position: relative; display: grid; align-items: end; min-height: 360px; margin-top: var(--space-8); padding: var(--space-12); border-radius: var(--radius-lg); background: var(--surface-muted); overflow: hidden; }
.cpage-hero--image { min-height: 480px; color: var(--on-blue); }
.cpage-hero--image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,22,64,0) 20%, var(--overlay) 100%); }
.cpage-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cpage-hero__inner { position: relative; z-index: 1; display: grid; gap: var(--space-4); justify-items: start; max-width: 760px; }
.cpage-hero__title { margin: 0; text-wrap: balance; }
.cpage-hero--image .cpage-hero__title { color: var(--on-blue); }
.cpage-hero:not(.cpage-hero--image) .cpage-hero__title { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cpage-hero__lead { margin: 0; max-width: 60ch; font-size: 18px; line-height: 28px; }
.cpage-hero:not(.cpage-hero--image) .cpage-hero__lead { color: var(--ink-muted); }
.cpage-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.cpage-split--left .cpage-split__media { order: -1; }
.cpage-split__copy .fh-h2 { margin: 0 0 var(--space-4); }
.cpage-split__media { margin: 0; }
.cpage-split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }
.cpage-text .fh-h2, .cpage-faq .fh-h2 { margin: 0 0 var(--space-6); }
.cpage-faq .fh-acc { max-width: 860px; }
details.fh-acc__item > summary { list-style: none; }
details.fh-acc__item > summary::-webkit-details-marker { display: none; }
details.fh-acc__item[open] { background: var(--surface-muted); }
details.fh-acc__item[open] .fh-acc__icon { transform: rotate(180deg); background: var(--green); color: var(--on-green); }
.cpage-cta--green { background-color: var(--green); color: var(--on-green); }
.cpage-cta--green .fh-cta__title, .cpage-cta--green .fh-cta__text { color: var(--on-green); }
.landing-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block: var(--space-4); }
.page-custom main { padding-bottom: var(--space-20); }
@media (max-width: 900px) { .cpage-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } .cpage-split--left .cpage-split__media { order: 0; } }
@media (max-width: 720px) { .cpage__section, .cpage__section--wide { margin-top: var(--space-12); } .cpage__section--wide { padding-inline: var(--space-4); } .cpage-hero { padding: var(--space-6); min-height: 300px; } }

/* ---- Official logo (public/assets/brand). The PNG is 400 × 100, so heights up to 50px stay sharp on retina screens ---- */
.brand-logo { display: block; width: auto; max-width: 100%; }
.brand-logo--nav { height: 40px; }
.brand-logo--footer { height: 44px; }
@media (max-width: 720px) { .brand-logo--nav { height: 32px; } }
.site-footer__credit a { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__credit a:hover { color: #fff; }
.field__req { color: #b42318; font-weight: 600; }
/* Keep the developer credit clear of the floating WhatsApp button */
@media (min-width: 561px) { .site-footer__legal { padding-right: 230px; } }

/* ---- Our team (/our-team, /our-team/{slug}). Cards are the design system's TeamCard (fh-team) ---- */
.story__team { margin-top: var(--space-8); }
.team-section { display: grid; gap: var(--space-20); margin-top: var(--space-12); }
.team-grid .fh-team { height: 100%; }
.empty-note { margin: 0; padding: var(--space-8); border-radius: var(--radius-md); background: var(--surface-muted); font-size: 18px; line-height: 28px; color: var(--ink-muted); }

.team-profile .breadcrumb { margin-bottom: 0; }
.team-profile__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
.team-profile__photo { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); background: var(--blue-tint); }
.team-profile__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.team-profile__intro { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-4); }
.team-profile__intro .fh-eyebrow { margin: 0; }
.team-profile__role { margin: 0; font: 600 18px/28px var(--font-body); color: var(--blue); }
.team-profile__vision { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; padding: var(--space-6); border-radius: var(--radius-md); background: var(--surface-muted); }
.team-profile__vision p { margin: 0; font: 400 20px/32px var(--font-body); color: var(--ink); }
.team-profile__mark { height: 32px; font: 700 64px/0.8 var(--font-display); color: var(--green); }
.team-profile__bio { margin-top: var(--space-12); max-width: 68ch; }
.team-profile__back { margin: var(--space-12) 0 0; }
.team-profile__back a { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.team-profile__back svg { transform: rotate(180deg); }

/* The sidebar runs the full height of the profile so the WhatsApp card can stay in view */
.team-sidebar { position: static; align-self: stretch; align-content: start; }
.team-sidebar .sidebar__card { gap: var(--space-4); }
.team-sidebar .sidebar__list-title { margin: 0; }
.mini-listing__meta { display: block; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.team-sidebar__all { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.team-wa { position: sticky; top: 96px; display: grid; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--blue); color: var(--on-blue); }
.team-wa__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--green); color: var(--on-green); }
.team-wa__title { margin: 0; font: 600 24px/30px var(--font-display); color: var(--on-blue); letter-spacing: var(--tracking-title); }
.team-wa__text { margin: 0; font-size: 16px; line-height: 24px; color: var(--on-blue); }
.team-wa__btn { width: 100%; }
.team-wa__btn:focus-visible { outline-color: var(--green); }

@media (max-width: 1000px) { .team-wa { position: static; } }
@media (max-width: 720px) {
  .team-section { gap: var(--space-12); margin-top: var(--space-8); }
  .team-profile__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .team-profile__photo { max-width: 420px; border-radius: var(--radius-md); }
  .team-profile__intro { padding-top: 0; }
  .team-profile__vision { padding: var(--space-4); }
  .team-profile__vision p { font-size: 18px; line-height: 28px; }
  .team-profile__bio { margin-top: var(--space-8); }
}

/* ---- Top bar above the main menu (blue ground: on-blue text, green accents and focus ring) ---- */
.topbar { background: var(--blue); color: var(--on-blue); font: 500 14px/20px var(--font-body); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 44px; padding-block: var(--space-1); }
.topbar ul { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.topbar__contact { gap: var(--space-2) var(--space-6); }
.topbar__contact a { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--on-blue); text-decoration: none; border-radius: 4px; }
.topbar__contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar__contact svg { flex: none; color: var(--green); }
.topbar__social { gap: var(--space-2); }
.topbar__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-pill); background: var(--green); color: var(--on-green); transition: background-color .15s ease; }
.topbar__icon:hover { background: var(--green-dark); }
.topbar a:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
@media (max-width: 860px) { .topbar__office { display: none; } }
@media (max-width: 600px) { .topbar__email { display: none; } .topbar__social { gap: var(--space-1); } }

/* ---- Brand stats band (home page): white figures on a blue-to-green ground.
   Blue holds for the first 35% like the heading gradient, and the green end sits past the right edge,
   so every figure and label keeps at least 4.5:1 against white. ---- */
.stats-band--brand {
  --band-hold: 35%;
  --band-end: 135%;
  padding: var(--space-12) var(--space-8); border: 0; border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue) var(--band-hold), var(--green) var(--band-end));
}
.stats-band--brand .fh-stat { border-left-color: rgba(255, 255, 255, 0.24); }
.stats-band--brand .fh-stat__value, .stats-band--brand .fh-stat__label { color: var(--on-blue); }
@media (max-width: 1000px) { .stats-band--brand { --band-end: 150%; } }
@media (max-width: 560px) { .stats-band--brand { padding: var(--space-8) var(--space-4); border-radius: var(--radius-md); } }

/* =====================================================================================================
   NEW: land management on the public site: plot availability, site progress, the client portal, e-signature
   ===================================================================================================== */
/* Plot availability map on a project page */
.site-plan__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); padding: 0; list-style: none; font-size: 16px; color: var(--ink-muted); }
.site-plan__legend li { display: inline-flex; align-items: center; gap: 6px; }
.site-plan__dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.12); }
.site-plan__dot--green, .site-plan__plot--green rect { background: var(--green); fill: var(--green); }
.site-plan__dot--yellow, .site-plan__plot--yellow rect { background: #f6cf4a; fill: #f6cf4a; }
.site-plan__dot--grey, .site-plan__plot--grey rect { background: #dfe3ea; fill: #dfe3ea; }
.site-plan__dot--blue, .site-plan__plot--blue rect { background: var(--blue); fill: var(--blue); }
.site-plan { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-muted); overflow-x: auto; }
.site-plan svg { display: block; width: 100%; min-width: 560px; height: auto; }
.site-plan__plot rect { stroke: rgba(23,23,23,0.3); stroke-width: 1; }
.site-plan__plot text { font: 600 11px var(--font-body); fill: var(--ink); pointer-events: none; }
.site-plan__plot--grey text { fill: var(--ink-muted); }
.site-plan__plot--blue text { fill: var(--on-blue); }
a.site-plan__plot { cursor: pointer; }
a.site-plan__plot:hover rect, a.site-plan__plot:focus-visible rect { stroke: var(--blue); stroke-width: 3; }
a.site-plan__plot:focus-visible { outline: none; }

/* Site progress on a project page */
.site-updates { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.site-update { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.site-update img { width: 160px; height: 120px; object-fit: cover; border-radius: var(--radius-sm); }
.site-update__date { margin: 0; font-size: 14px; color: var(--ink-muted); }
.site-update__title { margin: 2px 0 var(--space-1); font: 600 18px/24px var(--font-display); letter-spacing: var(--tracking-small); }
.site-update p { margin: 0; font-size: 16px; line-height: 24px; }
@media (max-width: 560px) { .site-update { grid-template-columns: minmax(0, 1fr); } .site-update img { width: 100%; height: auto; aspect-ratio: 4 / 3; } }

/* Client portal */
.portal { display: grid; gap: var(--space-6); padding-block: var(--space-12) var(--space-20); }
.portal--narrow { max-width: 760px; }
.portal__lead { margin: 0; font-size: 18px; line-height: 28px; color: var(--ink-muted); }
.portal__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-4); }
.portal .fh-h2, .portal .fh-eyebrow { margin: 0; }
.portal .fh-h3 { margin: 0 0 var(--space-4); font: 600 24px/30px var(--font-display); color: var(--ink); letter-spacing: var(--tracking-title); }
.portal .input { width: 100%; min-height: 46px; padding: 11px var(--space-4); background: var(--surface-muted); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-sm); font: 400 16px/24px var(--font-body); }
.portal .input:focus { background: var(--surface); border-color: var(--blue); outline: none; }
.portal .input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.portal .input--code { max-width: 220px; font: 600 24px/32px var(--font-display); letter-spacing: .3em; text-align: center; }
.portal .check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 16px; line-height: 24px; cursor: pointer; }
.portal .check input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--blue); }
.portal .text-button { padding: 0; border: 0; background: none; color: var(--blue); font: 500 16px var(--font-body); text-decoration: underline; cursor: pointer; }
.portal .muted { color: var(--ink-muted); }
.portal .small { font-size: 16px; line-height: 24px; }
.portal .text-warn { color: #7a2e0e; }
.form-alert, .form-note { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: 16px; line-height: 24px; }
.form-alert { background: var(--blue-tint); border-left: 4px solid var(--blue); }
.form-note { background: var(--green-tint); border-left: 4px solid var(--green-dark); }
.portal-card { display: grid; gap: var(--space-4); padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-card); }
.portal-card form { display: grid; gap: var(--space-4); justify-items: start; }
.portal-card .field { width: 100%; }
.portal-sale { display: grid; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-card); }
.portal-sale__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.portal-sale__title { margin: 0; font: 600 24px/30px var(--font-display); letter-spacing: var(--tracking-title); }
.portal-sale__head p { margin: var(--space-1) 0 0; }
.portal-badge { padding: 4px var(--space-3); border-radius: var(--radius-pill); background: var(--surface-muted); font: 500 14px var(--font-body); }
.portal-badge--active { background: var(--green-tint); color: var(--ink); }
.portal-badge--reserved { background: #fff4cc; }
.portal-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.portal-money div { display: grid; gap: 2px; padding: var(--space-4); border-radius: var(--radius-sm); background: var(--surface-muted); }
.portal-money span, .portal-money small { font-size: 14px; color: var(--ink-muted); }
.portal-money strong { font: 600 22px/28px var(--font-display); letter-spacing: var(--tracking-title); }
.portal-progress { height: 12px; border-radius: var(--radius-pill); background: var(--surface-muted); overflow: hidden; }
.portal-progress span { display: block; height: 100%; background: var(--green); }
.portal-sale > p { margin: 0; }
.portal-pay > summary { list-style: none; width: fit-content; }
.portal-pay > summary::-webkit-details-marker { display: none; }
.portal-pay__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.portal-pay__option { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.portal-pay__option--wide { grid-column: 1 / -1; }
.portal-pay__option h3 { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: 600 18px/24px var(--font-display); letter-spacing: var(--tracking-small); }
.portal-pay__option p { margin: 0; font-size: 16px; line-height: 24px; }
.portal-pay__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.portal-sale__links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.portal-receipts summary { font-weight: 600; cursor: pointer; }
.portal-receipts ul { margin: var(--space-2) 0 0; padding-left: var(--space-6); font-size: 16px; line-height: 28px; }
.portal-section { padding-top: var(--space-6); border-top: 1px solid var(--border); }
.title-steps { margin-bottom: var(--space-6); }
.title-steps p { margin: 0 0 var(--space-3); }
.steps-line { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps-line li { position: relative; padding-top: var(--space-6); font-size: 14px; line-height: 18px; color: var(--ink-muted); counter-increment: step; }
.steps-line li::before { content: counter(step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-muted); border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.steps-line li.is-done::before { content: "✓"; background: var(--green); border-color: var(--green); color: var(--on-green); }
.steps-line li.is-current { color: var(--ink); font-weight: 600; }
.steps-line li.is-current::before { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
@media (max-width: 720px) { .steps-line { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } .steps-line li { padding: 2px 0 0 32px; } .portal-money { grid-template-columns: minmax(0, 1fr); } }
.portal-docs { display: grid; gap: var(--space-3); margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.portal-docs li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.portal-docs .fh-btn { margin-left: auto; }
.portal-upload { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px dashed var(--border); border-radius: var(--radius-sm); justify-items: start; }
.portal-upload .portal-pay__row { width: 100%; }
.portal-updates { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.portal-update { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.portal-update img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.portal-update h3 { margin: 0; font: 600 18px/24px var(--font-display); letter-spacing: var(--tracking-small); }
.portal-update p { margin: 0; font-size: 16px; line-height: 24px; }
.portal-card__alt { margin: 0; }

/* E-signature */
.doc-reader { max-height: 60vh; overflow-y: auto; padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.doc-reader table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; }
.doc-reader th, .doc-reader td { padding: 6px 8px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.doc-reader th { background: var(--blue-tint); color: var(--blue); }
.sign-form { display: grid; gap: var(--space-4); justify-items: start; }
.sign-form .field { width: 100%; }
.sign-pad { width: 100%; max-width: 600px; height: 180px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface) linear-gradient(to top, transparent 39px, var(--border) 39px, var(--border) 40px, transparent 40px); touch-action: none; cursor: crosshair; }
.portal-done { display: grid; gap: var(--space-4); justify-items: start; }
.portal-done__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--green); color: var(--on-green); }
.site-plan__dot--red, .site-plan__plot--red rect { background: #e5484d; fill: #e5484d; } /* NEW: sold plots in red */
.site-plan__dot--yellow, .site-plan__plot--yellow rect { background: #f7b928; fill: #f7b928; }
.site-plan__dot--green, .site-plan__plot--green rect { background: #8cc63f; fill: #8cc63f; }
/* NEW: the plot map drawn on the designer's mutation sketch */
.site-plan--sketch { background: #fff; }
.site-plan--sketch svg { min-width: 720px; }
.site-plan--sketch .site-plan__plot polygon { stroke-width: .7; fill-opacity: .55; }
.site-plan--sketch .site-plan__plot--green polygon { fill: #22c55e; stroke: #15803d; }
.site-plan--sketch .site-plan__plot--yellow polygon { fill: #f59e0b; stroke: #b45309; fill-opacity: .65; }
.site-plan--sketch .site-plan__plot--red polygon { fill: #ef4444; stroke: #b91c1c; fill-opacity: .65; }
.site-plan--sketch .site-plan__plot--blue polygon { fill: #60a5fa; stroke: #1d4ed8; }
.site-plan--sketch a.site-plan__plot:hover polygon, .site-plan--sketch a.site-plan__plot:focus polygon { fill-opacity: .85; stroke: var(--blue); stroke-width: 2; }
.site-plan--sketch .site-plan__plot text { font-weight: 700; fill: #0b1b3a; paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 2px; pointer-events: none; }
/* NEW: zoom the plot map (buttons, pinch, Ctrl + wheel) */
.zoom-box { display: grid; gap: var(--space-2); }
.zoom-bar { display: flex; align-items: center; gap: var(--space-2); }
.zoom-bar__btn, .zoom-bar__fit { min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--ink); font: 600 20px/1 var(--font-body); cursor: pointer; }
.zoom-bar__fit { font-size: 15px; }
.zoom-bar__level { min-width: 48px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.site-plan { max-height: 75vh; overflow: auto; touch-action: pan-x pan-y; }

/* CHANGED: plot colours on the website's plot maps, the same as the dashboard: sold = Fahari blue, booked = green,
   available = pure white; roads and open spaces sand. Numbers big and bold. */
.site-plan__dot--available, .site-plan__plot--available rect, .site-plan--sketch .site-plan__plot--available polygon { background: #ffffff; fill: #ffffff; }
.site-plan__dot--booked, .site-plan__plot--booked rect, .site-plan--sketch .site-plan__plot--booked polygon { background: #9fcc40; fill: #9fcc40; }
.site-plan__dot--sold, .site-plan__plot--sold rect, .site-plan--sketch .site-plan__plot--sold polygon { background: #072f87; fill: #072f87; }
.site-plan__dot--company, .site-plan__plot--company rect, .site-plan--sketch .site-plan__plot--company polygon { background: #e9dcc0; fill: #e9dcc0; }
.site-plan__dot--available { border: 1px solid #8a929e; }
.site-plan__plot rect, .site-plan--sketch .site-plan__plot polygon { stroke: #4b5563; stroke-width: 1; fill-opacity: 1; }
.site-plan__plot text { font: 800 16px var(--font-body); fill: #111827; stroke: none; }
.site-plan--sketch .site-plan__plot text { font-weight: 800; fill: #111827; stroke: none; }
.site-plan__plot--sold text, .site-plan--sketch .site-plan__plot--sold text { fill: #fff; }
a.site-plan__plot:hover polygon, a.site-plan__plot:focus polygon, a.site-plan__plot:hover rect, a.site-plan__plot:focus rect { stroke: #f59e0b; stroke-width: 3; }

/* CHANGED 2026-10-07: date and time boxes on the website's forms: a big coloured picker button, and a tap anywhere
   in the box opens the picker (app.js) */
input[type="date"], input[type="time"], input[type="datetime-local"] { cursor: pointer; color: var(--blue); font-weight: 600; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator {
  width: 20px; height: 20px; margin-left: 8px; padding: 7px; border-radius: 10px; opacity: 1; cursor: pointer;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2.5'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E") center / 18px no-repeat;
}
input[type="time"]::-webkit-calendar-picker-indicator {
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23072f87' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* ---------- Property card: framed style (2026-11-07) ----------
   A white frame with the photo inset; status pill, area badge and WhatsApp sit on the photo; name and location left,
   cash price right; plot size, title deed and instalments in a tinted stats panel; the two buttons last. */
.pcard { position: relative; height: 100%; gap: var(--space-4); padding: 12px 12px var(--space-4); border-radius: 24px; background: var(--surface);
  box-shadow: 0 1px 2px rgba(7,47,135,.06), 0 12px 32px rgba(7,47,135,.08); transition: box-shadow .2s ease, transform .2s ease; }
.pcard:hover { box-shadow: 0 1px 2px rgba(7,47,135,.08), 0 18px 44px rgba(7,47,135,.14); transform: translateY(-2px); }
.pcard__frame { position: relative; }
.pcard .fh-pcard__media { border-radius: 16px; aspect-ratio: 4 / 3; }
.pcard .fh-pcard__media img { aspect-ratio: 4 / 3; }
.pcard--sold .fh-pcard__media img { filter: saturate(.6); }

/* status pill: white with a coloured dot, top left */
.pcard__status { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 12px; border-radius: var(--radius-pill);
  background: #fff; color: var(--ink); font: 500 15px/1 var(--font-body); box-shadow: 0 2px 8px rgba(0,0,0,.10); }
.pcard__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green-dark); }
.pcard__dot--green { background: #22c55e; }
.pcard__dot--blue { background: var(--blue); }

/* area badge: frosted glass, bottom left */
.pcard__badge { position: absolute; left: var(--space-3); bottom: var(--space-3); display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px;
  border-radius: var(--radius-pill); background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); font: 500 14px/1 var(--font-body); }
.pcard__badge svg { color: var(--blue); }

/* WhatsApp: a round button at the end of the button row (CHANGED 2026-11-07: back in the row) */
.pcard__wa { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #25d366; background: #fff; color: #128c4b;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .2s ease; }
.pcard__wa:hover, .pcard__wa:focus-visible { background: #25d366; border-color: #25d366; color: #fff; }
.pcard__wa:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pcard:hover .pcard__wa { animation: wa-pop .6s ease; }

.pcard__sold { position: absolute; inset: 0; display: grid; place-items: center; background: var(--overlay); }
.pcard__sold span { padding: var(--space-2) var(--space-4); border: 2px solid var(--on-blue); border-radius: var(--radius-pill); color: var(--on-blue);
  font: 600 14px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }

/* name and location left, cash price right */
.pcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: 0 4px; }
.pcard__name { display: grid; gap: 4px; min-width: 0; }
.pcard .fh-pcard__title { font-size: 20px; line-height: 26px; }
.pcard .fh-pcard__loc { margin: 0; font-size: 15px; line-height: 22px; color: #4a5a78; }
.pcard__price { display: grid; justify-items: end; flex: none; margin: 0; text-align: right; }
.pcard__price-label { font: 500 13px/18px var(--font-body); color: var(--ink-muted); }
.pcard__price .fh-pcard__price { font: 700 22px/28px var(--font-display); letter-spacing: var(--tracking-title); color: var(--ink); white-space: nowrap; }

/* stats panel: tinted, columns split by thin dividers */
.pcard__stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; } /* CHANGED: no tinted box, just the dividers */
.pcard__stat { display: grid; gap: 2px; min-width: 0; padding: 0 12px; }
.pcard__stat:first-child { padding-left: 4px; }
.pcard__stat + .pcard__stat { border-left: 1px solid #dde3ee; }
.pcard__stat dt { display: inline-flex; align-items: center; gap: 4px; font: 400 13px/18px var(--font-body); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard__stat dt svg { flex: none; color: var(--blue); }
.pcard__stat dd { margin: 0; font: 600 16px/22px var(--font-display); letter-spacing: var(--tracking-small); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pcard { container-type: inline-size; }
.pcard__actions { display: flex; align-items: center; gap: var(--space-2); margin-top: auto; padding: 0 4px; }
.pcard__btn { flex: 1 1 auto; min-width: max-content; height: 40px; padding-inline: var(--space-3); white-space: nowrap; }
/* CHANGED (2026-11-07): the three buttons always share one row; on narrow cards the text and padding shrink a little instead of wrapping */
@container (max-width: 320px) {
  .pcard__actions { gap: 8px; }
  .pcard__btn { height: 38px; padding-inline: 10px; font-size: 14px; }
  .pcard__wa { width: 38px; height: 38px; }
}
@container (max-width: 280px) {
  .pcard__actions { gap: 6px; }
  .pcard__btn { height: 36px; padding-inline: 8px; font-size: 13px; }
  .pcard__wa { width: 36px; height: 36px; }
}

/* narrow cards (by the card's own width, not the screen's): the price drops under the name */
@container (max-width: 320px) {
  .pcard__head { flex-direction: column; gap: var(--space-2); }
  .pcard__price { justify-items: start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .pcard, .pcard:hover { transform: none; transition: none; } }