/* ==========================================================================
   design.css — premium refinements layered over tokens/base/components.
   Keeps the Sarah Bui Realty identity (navy / white / charcoal, uppercase tracked headings, white logo on dark)
   while adding a consistent type scale, controlled whitespace, glass + gradient + shadow treatments,
   distinct section roles, restrained motion (reduced-motion aware) and consistent interactive states.
   ========================================================================== */
:root {
  --shadow-soft: 0 10px 30px rgba(0, 20, 50, .10);
  --shadow-lift: 0 18px 45px rgba(0, 20, 50, .18);
  --radius-card: 4px;
  --glass-bg: rgba(255, 255, 255, .78);
  --glass-border: rgba(255, 255, 255, .55);
  --navy-gradient: linear-gradient(160deg, #0b2d55 0%, #002347 55%, #001732 100%);
  --gold: #c9a24d;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .55s;
}

/* ---------- Type scale (major third) ---------- */
h1, .h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); letter-spacing: .12em; }
h2, .h2 { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem); letter-spacing: .16em; }
.section__title { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__eyebrow { display: block; font-family: var(--font-heading); font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: .75rem; text-align: center; }
.section__title--left { text-align: left; } .section__title--left::after { margin-left: 0; }
.section__eyebrow--left { text-align: left; }
p.lead { font-size: 1.2rem; line-height: 1.55; color: var(--color-ink-70); }
.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }

/* ---------- Interactive states ---------- */
.button { border-radius: 2px; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .2s, color .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 35, 71, .25); }
.button:active { transform: translateY(0); box-shadow: none; }
a:not(.button):not(.tile):not(.community-card) { transition: color .2s; }
.field input:not([type="checkbox"]), .field textarea { border-radius: 2px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.field input:focus-visible, .field textarea:focus-visible { outline: 0; border-color: var(--color-navy); box-shadow: 0 0 0 3px rgba(0, 35, 71, .18); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* ---------- Header: smoother transitions, glass on scroll ---------- */
.site-header { transition: background-color .35s var(--ease-out), backdrop-filter .35s; }
body:not(.has-hero) .site-header { background: rgba(20, 20, 20, .92); backdrop-filter: blur(10px); }
.primary-nav__link { position: relative; transition: color .2s; }
@media (min-width: 1200px) {
  .primary-nav__link:not(.is-pill *)::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .25rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
  .primary-nav__link:hover::after, .primary-nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .primary-nav__link:hover, .primary-nav__link[aria-current="page"] { text-decoration: none; }
  .primary-nav__sub { border-top: 2px solid var(--gold); border-radius: 2px; }
}
@media (max-width: 1199px) { .primary-nav { transition: transform .38s var(--ease-out), visibility 0s .38s; } .primary-nav__list > li { opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); } .primary-nav.is-open .primary-nav__list > li { opacity: 1; transform: none; } .primary-nav.is-open .primary-nav__list > li:nth-child(n) { transition-delay: calc(40ms * var(--i, 0)); } }

/* ---------- Hero: picture backgrounds + text entrance ---------- */
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media picture, .hero__media .pic { position: absolute; inset: 0; display: block; }
.hero__media .pic img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { background: linear-gradient(180deg, rgba(0, 10, 25, .62) 0%, rgba(0, 10, 25, .28) 45%, rgba(0, 10, 25, .55) 100%); }
.hero__title, .hero__subtitle, .hero .search-form, .hero__actions { animation: hero-in var(--dur) var(--ease-out) both; }
.hero__subtitle { animation-delay: .12s; } .hero .search-form, .hero__actions { animation-delay: .24s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero--short { min-height: 420px; } .hero--tall { min-height: 600px; }
.hero__actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.hero__actions .button { width: auto; margin: 0; }
.search-form { border-radius: 2px; overflow: hidden; box-shadow: 0 12px 34px rgba(0, 0, 0, .35); }

/* ---------- Reveal variants (IntersectionObserver in reveal.js) ---------- */
.js .reveal, .js .reveal--up { opacity: 0; transform: translateY(22px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.js .reveal--fade { opacity: 0; transform: none; transition: opacity .8s var(--ease-out); }
.js .reveal--zoom { opacity: 0; transform: scale(1.04); transition: opacity .8s var(--ease-out), transform 1.1s var(--ease-out); }
.js .reveal.is-visible, .js .reveal--up.is-visible, .js .reveal--fade.is-visible, .js .reveal--zoom.is-visible { opacity: 1; transform: none; }
.js [data-stagger] > * { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js [data-stagger].is-visible > * { opacity: 1; transform: none; }
.js [data-stagger].is-visible > *:nth-child(2) { transition-delay: 70ms; } .js [data-stagger].is-visible > *:nth-child(3) { transition-delay: 140ms; } .js [data-stagger].is-visible > *:nth-child(4) { transition-delay: 210ms; } .js [data-stagger].is-visible > *:nth-child(n+5) { transition-delay: 260ms; }
@media (prefers-reduced-motion: reduce) { .js .reveal, .js .reveal--up, .js .reveal--fade, .js .reveal--zoom, .js [data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; } .hero__title, .hero__subtitle, .hero .search-form, .hero__actions { animation: none; } }

/* ---------- Cards ---------- */
.listing-card, .cta-card, .community-card, .testimonial, .contact-card { border-radius: var(--radius-card); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.listing-card:hover, .cta-card:hover, .community-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.tile { border-radius: var(--radius-card); overflow: hidden; }
.tile__media { transition: transform .7s var(--ease-out); }
.tile .pic, .tile .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile__label { font-size: .8rem; padding: .85rem .5rem; background: linear-gradient(transparent, rgba(0, 15, 35, .8)); }
.tile:hover .tile__media, .tile:focus-visible .tile__media { transform: scale(1.06); }
.community-card__media { position: relative; overflow: hidden; }
.community-card__media .pic, .community-card__media .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.community-card:hover .community-card__media .pic img { transform: scale(1.06); }

/* ---------- About Me: editorial two-column over a distinct architectural backdrop ---------- */
.about-editorial { position: relative; color: var(--color-ink); isolation: isolate; }
.about-editorial__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.about-editorial__bg .pic, .about-editorial__bg .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-editorial__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246, 247, 249, .96) 0%, rgba(246, 247, 249, .9) 55%, rgba(246, 247, 249, .72) 100%); }
.about-editorial__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .about-editorial__grid { grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 6vw, 5rem); } }
.about-editorial__figure { position: relative; margin: 0; max-width: 420px; justify-self: center; width: 100%; }
/* contain + white card: the portrait is a square with the gold ring baked in, so it must never be cropped. */
.about-editorial__figure .pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: #fff; padding: 4%; box-sizing: border-box; border-radius: var(--radius-card); box-shadow: var(--shadow-lift); }
.about-editorial__figure::before { content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border: 1px solid var(--gold); border-radius: var(--radius-card); z-index: -1; }
.about-editorial__monogram { position: absolute; right: -.75rem; bottom: -.75rem; width: 72px; height: 72px; border-radius: 50%; background: var(--color-navy); color: #fff; display: grid; place-items: center; font-family: Georgia, serif; font-style: italic; font-size: 1.6rem; box-shadow: var(--shadow-soft); }
.about-editorial__name { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .18em; font-size: clamp(1.35rem, 1rem + 1vw, 1.75rem); margin: 0 0 .25rem; }
.about-editorial__role { color: var(--color-ink-70); margin-bottom: 1.25rem; }
.about-editorial__bio { font-size: 1.05rem; max-width: 60ch; }
.qualities { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .75rem; }
@media (min-width: 600px) { .qualities { grid-template-columns: 1fr 1fr; } }
.qualities li { display: flex; gap: .75rem; align-items: flex-start; background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(6px); padding: .85rem 1rem; border-radius: var(--radius-card); font-size: .95rem; }
.qualities .icon { width: 1.4rem; height: 1.4rem; color: var(--color-navy); flex: 0 0 auto; margin-top: .1rem; }
.about-editorial__contact { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: 1.5rem; font-weight: 600; }
.about-editorial__contact a { text-decoration: none; }
.about-editorial__actions { display: flex; flex-wrap: wrap; gap: .75rem; } .about-editorial__actions .button { width: auto; margin: 0; }
@media (max-width: 899px) { .about-editorial__figure { max-width: 320px; } .about-editorial__figure::before { inset: .75rem -.75rem -.75rem .75rem; } }

/* ---------- Get in Touch: distinct architectural backdrop, two-column desktop, single column mobile ---------- */
.contact-section { position: relative; color: #fff; isolation: isolate; }
.contact-section__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.contact-section__bg .pic, .contact-section__bg .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-section__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(0, 20, 45, .92) 0%, rgba(0, 20, 45, .78) 50%, rgba(0, 20, 45, .55) 100%); }
.contact-section__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .contact-section__grid { grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 6vw, 5rem); } }
.contact-section .section__title, .contact-section .section__eyebrow { text-align: left; } .contact-section .section__title::after { margin-left: 0; background: var(--gold); }
.contact-section__lead { font-size: 1.15rem; line-height: 1.6; max-width: 40ch; color: rgba(255, 255, 255, .88); }
.contact-info { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: 1rem; }
.contact-info li { display: flex; gap: .9rem; align-items: flex-start; }
.contact-info .icon { width: 1.5rem; height: 1.5rem; color: var(--gold); flex: 0 0 auto; margin-top: .15rem; }
.contact-info a { color: #fff; text-decoration: none; font-weight: 600; } .contact-info a:hover { text-decoration: underline; }
.contact-info small { display: block; color: rgba(255, 255, 255, .7); font-size: .85rem; }
.contact-panel { background: #fff; color: var(--color-ink); padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--radius-card); box-shadow: var(--shadow-lift); }
.contact-panel__title { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .14em; font-size: 1.05rem; margin-bottom: 1.25rem; }
.contact-form__note { margin-top: 1rem; font-size: .85rem; color: var(--color-ink-70); }
.contact-form__submit { width: 100%; }
@media (min-width: 600px) { .contact-form__submit { width: auto; min-width: 220px; } }

/* ---------- Split sections with real pictures ---------- */
.split__media { position: relative; overflow: hidden; }
.split__media .pic, .split__media .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) { .split__media { min-height: 260px; } }

/* ---------- Testimonials on a quiet texture ---------- */
.section--texture { position: relative; isolation: isolate; }
.section--texture .section__bg { position: absolute; inset: 0; z-index: -1; opacity: .35; }
.section--texture .section__bg .pic, .section--texture .section__bg .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Community page: nearby communities with thumbnails ---------- */
.nearby { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.nearby a { display: grid; grid-template-columns: 72px 1fr; gap: .75rem; align-items: center; text-decoration: none; color: var(--color-ink); padding: .4rem; border-radius: var(--radius-card); transition: background-color .2s; }
.nearby a:hover { background: #fff; color: var(--color-navy); }
.nearby .pic, .nearby .pic img { width: 72px; height: 54px; object-fit: cover; border-radius: 2px; display: block; }
.nearby span { font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Placeholders remain honest but quieter ---------- */
.placeholder-note { border-radius: var(--radius-card); }
.trends-placeholder__chart { border-radius: var(--radius-card); }
.listing-card__media { background: linear-gradient(135deg, #eef1f5, #dfe4ea); }

/* ---------- Footer polish ---------- */
.site-footer { background: var(--navy-gradient); }
.site-footer__legal { border-top-color: rgba(255, 255, 255, .12); }

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) { .button:hover, .listing-card:hover, .cta-card:hover, .community-card:hover { transform: none; } .tile:hover .tile__media, .community-card:hover .community-card__media .pic img { transform: none; } }

.agent-hero__media { background: none; filter: none; }
.agent-hero__media .pic, .agent-hero__media .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.agent-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.35)); }
.map-static--dark { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; width: auto; max-width: 320px; }
.map-static--dark span, .map-static--dark small { color: #fff; }
.site-footer .map-static--dark { color: #fff; }
.contact-form__status.is-info { color: var(--color-navy); }
/* contrast: eyebrow gold is for dark backgrounds only; on light backgrounds use a deep gold that passes 4.5:1 */
.section__eyebrow { color: #7a5c14; }
.contact-section .section__eyebrow, .hero .section__eyebrow, .section--navy .section__eyebrow, .section--dark .section__eyebrow { color: var(--gold); }
.stat-tile__label, .listing-card__foot, .listing-card__stats { color: #4a4a4a; }

/* --- Ask Sarah: floating button + dialog (no third-party chat) ---------------------------------------------- */
.ask-sarah__toggle { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: .7rem 1.15rem .7rem .95rem; border: 1px solid rgba(201, 162, 77, .55); border-radius: 999px; background: var(--color-navy); color: #fff; font-family: var(--font-heading); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 10px 28px rgba(0, 35, 71, .35); cursor: pointer; transition: transform .25s var(--ease-out, ease), box-shadow .25s; }
.ask-sarah__toggle:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 35, 71, .45); }
.ask-sarah__toggle:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.ask-sarah__toggle-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--color-navy); }
.ask-sarah { width: min(420px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); margin: auto 1rem 1rem auto; padding: 0; border: 0; border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 20, 40, .35); color: var(--color-ink); overflow: auto; }
.ask-sarah::backdrop { background: rgba(0, 20, 40, .35); }
.ask-sarah__head { display: grid; grid-template-columns: 56px 1fr auto; gap: .85rem; align-items: center; padding: 1.1rem 1.1rem 1rem; background: var(--color-navy); color: #fff; border-bottom: 3px solid var(--gold); }
.ask-sarah__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); background: #fff; }
.ask-sarah__title { margin: 0; font-size: 1.05rem; letter-spacing: .14em; color: #fff; }
.ask-sarah__title::after { display: none; }
.ask-sarah__sub { margin: .2rem 0 0; font-size: .85rem; line-height: 1.4; color: rgba(255, 255, 255, .85); }
.ask-sarah__close { align-self: start; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.ask-sarah__close:hover, .ask-sarah__close:focus-visible { background: rgba(255, 255, 255, .25); }
.ask-sarah__quick { list-style: none; margin: 0; padding: 1rem 1.1rem 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ask-sarah__quick a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: .4rem .5rem; border: 1px solid var(--color-navy); border-radius: 6px; color: var(--color-navy); font-size: .78rem; font-weight: 600; text-align: center; text-decoration: none; line-height: 1.2; }
.ask-sarah__quick a:hover, .ask-sarah__quick a:focus-visible { background: var(--color-navy); color: #fff; }
.ask-sarah__or { display: flex; align-items: center; gap: .75rem; margin: 1rem 1.1rem .25rem; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink-70); }
.ask-sarah__or::before, .ask-sarah__or::after { content: ""; flex: 1; border-top: 1px solid var(--color-border); }
.ask-sarah .contact-form { padding: .5rem 1.1rem 1.1rem; }
.ask-sarah .contact-form__submit { width: 100%; }
@media (max-width: 560px) {
  .ask-sarah__toggle { padding: .65rem; } .ask-sarah__toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ask-sarah { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 14px 14px 0 0; max-height: 92dvh; }
}
@media (prefers-reduced-motion: reduce) { .ask-sarah__toggle { transition: none; } .ask-sarah__toggle:hover { transform: none; } }
@media print { .ask-sarah__toggle, .ask-sarah { display: none !important; } }