/* ==========================================================================
   Home Dynamics — base.css  (foundation skin)
   Consolidated VERBATIM from the mockup port design/homepage-v2.css — no rules
   changed, only renamed/merged. Loads after tokens.css, before chrome.css.
   Do NOT hand-rewrite (an earlier by-eye header rebuild drifted). See functions.php.
   ========================================================================== */
/* ==========================================================================
   Home Dynamics — Homepage skin v2 ("Grounded Editorial")
   Grounded in Thomas James Homes (structure/restraint) + Alys Beach (serif
   editorial). Prata display + uppercase wide-tracked Roboto UI + squared
   elements + generous air. Brand blue kept as a restrained accent.
   All values reference tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--hdc-font-body);
  font-size: var(--hdc-fs-400);
  line-height: var(--hdc-lh-body);
  color: var(--hdc-color-text);
  background: var(--hdc-surface);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--hdc-font-display);
  color: var(--hdc-color-heading);
  font-weight: var(--hdc-fw-regular);
  line-height: var(--hdc-lh-snug);
  margin: 0;
  letter-spacing: 0.005em;
}

/* ---- Shared layout ---- */
/* max(), so the notch only ever ADDS room. In landscape with viewport-fit=cover
   the page runs under the camera cutout on one side; the gutter is wider than the
   inset on most phones, which is exactly why max() and not a sum. */
.container { width: 100%; max-width: var(--hdc-container); margin-inline: auto;
  padding-inline: max(var(--hdc-gutter), var(--hdc-safe-l)) max(var(--hdc-gutter), var(--hdc-safe-r)); }
/* Reading measure, for pages that are prose rather than layout — legal, the page.php
   editor fallback, long-form disclaimers. page.php has referenced this class since it
   was written and nothing defined it, so that fallback has been rendering at the full
   1320px container. 58rem lands a 16px paragraph near 70ch, which is the measure the
   legal wireframe asks for. */
.container--narrow { max-width: 58rem; }
.section { padding-block: clamp(var(--hdc-space-8), 4vw + 2rem, 8rem); }
.section--warm { background: var(--hdc-surface-warm); }

/* Eyebrow — uppercase, wide-tracked, small dose of brand blue */
.eyebrow {
  display: inline-block;
  font-family: var(--hdc-font-ui);
  font-size: var(--hdc-fs-200);
  font-weight: var(--hdc-fw-semi);
  letter-spacing: var(--hdc-tracking-wide);
  text-transform: uppercase;
  color: var(--hdc-color-primary);
  margin: 0 0 var(--hdc-space-4);
}

/* Section heading block — centered like TJH */
.section-head { max-width: 52rem; margin: 0 auto var(--hdc-space-8); text-align: center; }
.section-head h2 { font-size: var(--hdc-fs-800); letter-spacing: -0.01em; }
.section-head p { font-size: var(--hdc-fs-500); color: var(--hdc-color-text); margin: var(--hdc-space-4) auto 0; max-width: 46ch; }

/* ---- Buttons: squared, uppercase, tracked ---- */
.btn {
  --_bg: var(--hdc-color-primary);
  --_fg: var(--hdc-color-on-dark);
  --_bd: var(--hdc-color-primary);
  display: inline-flex; align-items: center; gap: var(--hdc-space-3);
  font-family: var(--hdc-font-ui);
  /* fs-400 (16px) + semibold — enough weight for a primary action without
     overshooting the rest of the UI's body size. */
  font-size: var(--hdc-fs-400);
  font-weight: var(--hdc-fw-semi);
  letter-spacing: 0.01em;
  text-transform: none;
  /* 12/32 — 16 made the label sit in too much air now the text is 16px. */
  padding: var(--hdc-space-3) var(--hdc-space-6);
  border-radius: var(--hdc-radius-sm);
  background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd);
  cursor: pointer;
  transition: background var(--hdc-dur) var(--hdc-ease), color var(--hdc-dur) var(--hdc-ease), border-color var(--hdc-dur) var(--hdc-ease);
}
.btn:hover { --_bg: var(--hdc-color-primary-deep); --_bd: var(--hdc-color-primary-deep); }
.header-searchbtn { border-radius: var(--hdc-radius-pill); }
.btn--ink { --_bg: var(--hdc-color-heading); --_bd: var(--hdc-color-heading); }
.btn--ink:hover { --_bg: var(--hdc-surface-ink); --_bd: var(--hdc-surface-ink); }
.btn--ghost { --_bg: transparent; --_fg: var(--hdc-color-heading); --_bd: var(--hdc-line-strong); }
.btn--ghost:hover { --_bg: transparent; --_fg: var(--hdc-color-primary); --_bd: var(--hdc-color-primary); }
.btn--on-dark { --_bg: var(--hdc-color-on-dark); --_fg: var(--hdc-color-heading); --_bd: var(--hdc-color-on-dark); }
.btn--on-dark:hover { --_bg: transparent; --_fg: var(--hdc-color-on-dark); --_bd: var(--hdc-color-on-dark); }
.btn--ghost-dark { --_bg: transparent; --_fg: var(--hdc-color-on-dark); --_bd: color-mix(in srgb, var(--hdc-color-on-dark) 45%, transparent); }
.btn--ghost-dark:hover { --_bg: transparent; --_fg: var(--hdc-color-on-dark); --_bd: var(--hdc-color-on-dark); }

/* Text link — uppercase tracked with rule */
.textlink {
  font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-200); font-weight: var(--hdc-fw-semi);
  letter-spacing: var(--hdc-tracking-ui); text-transform: uppercase; color: var(--hdc-color-primary);
  display: inline-flex; align-items: center; gap: var(--hdc-space-2);
}
.textlink .arrow { transition: transform var(--hdc-dur) var(--hdc-ease); }
.textlink:hover { color: var(--hdc-color-primary-deep); }
.textlink:hover .arrow { transform: translateX(4px); }

/* Status label — refined dot + uppercase tracked text (no filled pill) */
.status { display: inline-flex; align-items: center; gap: var(--hdc-space-2); font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-100); font-weight: var(--hdc-fw-semi); letter-spacing: var(--hdc-tracking-ui); text-transform: uppercase; color: var(--hdc-color-heading); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: var(--hdc-radius-pill); background: var(--hdc-color-muted); }
.status--open { color: var(--hdc-color-success); }
.status--open::before { background: var(--hdc-color-success); }
.status--selling { color: var(--hdc-color-selling); }
.status--selling::before { background: var(--hdc-color-selling); }
.status--coming_soon { color: var(--hdc-color-muted); }
.status--coming_soon::before { background: var(--hdc-color-muted); }
.status--on-photo { color: var(--hdc-color-on-dark); background: var(--hdc-surface-ink); padding: var(--hdc-space-2) var(--hdc-space-3); }
.status--on-photo.status--open::before { background: var(--hdc-color-success); }
.status--on-photo.status--selling::before { background: var(--hdc-color-selling); }

/* ==========================================================================
   Utility bar — slim, uppercase, tracked
   ========================================================================== */
.utilbar { background: var(--hdc-surface); border-bottom: 1px solid var(--hdc-line); font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-100); letter-spacing: var(--hdc-tracking-ui); text-transform: uppercase; }
.utilbar .container { display: flex; align-items: center; justify-content: flex-end; gap: var(--hdc-space-6); min-height: 38px; }
.utilbar a { color: var(--hdc-color-muted); transition: color var(--hdc-dur) var(--hdc-ease); }
.utilbar a:hover { color: var(--hdc-color-primary); }
.utilbar .util-social { display: inline-flex; gap: var(--hdc-space-5); margin-right: auto; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--hdc-surface); border-bottom: 1px solid var(--hdc-line); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; min-height: 108px; gap: var(--hdc-space-6); }
.brand img { height: 34px; width: auto; }
.mainnav { display: flex; align-items: center; gap: var(--hdc-space-6); }
.mainnav a { font-family: var(--hdc-font-ui); font-weight: var(--hdc-fw-medium); font-size: var(--hdc-fs-300); letter-spacing: var(--hdc-tracking-ui); text-transform: uppercase; color: var(--hdc-color-heading); padding-block: var(--hdc-space-2); position: relative; }
.mainnav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px; background: var(--hdc-color-primary); transition: right var(--hdc-dur) var(--hdc-ease); }
.mainnav a:hover::after { right: 0; }
.header-cta { display: inline-flex; align-items: center; gap: var(--hdc-space-5); }
.header-phone { font-family: var(--hdc-font-ui); font-weight: var(--hdc-fw-semi); font-size: var(--hdc-fs-200); letter-spacing: var(--hdc-tracking-ui); color: var(--hdc-color-heading); white-space: nowrap; }

/* ==========================================================================
   Hero — full-bleed, left-aligned editorial (Alys), Prata headline
   ========================================================================== */
.hero { position: relative; min-height: min(90vh, 820px); display: flex; align-items: center; color: var(--hdc-color-on-dark); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
/* Hero art is composed for a WIDE frame: the subject sits right of center and the
   left third is deliberately empty so the headline has somewhere to live. A phone
   crops that wide frame to something near-portrait, and a center crop throws the
   subject out of shot — you get the empty wall and none of the family.
   Anchoring right keeps the subject and sacrifices the empty side, which is the
   half the headline was going to cover anyway. */
@media (max-width: 720px) {
  .hero__media img, .hero__media video { object-position: 78% center; }
}
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, color-mix(in srgb, var(--hdc-surface-ink) 72%, transparent) 0%, color-mix(in srgb, var(--hdc-surface-ink) 36%, transparent) 42%, color-mix(in srgb, var(--hdc-surface-ink) 8%, transparent) 72%), linear-gradient(to top, color-mix(in srgb, var(--hdc-surface-ink) 55%, transparent), transparent 45%); }
.hero .container { position: relative; z-index: 1; width: 100%; }
.hero__inner { max-width: 40rem; }
.hero__eyebrow { color: var(--hdc-color-on-dark-muted); }
.hero h1 { color: var(--hdc-color-on-dark); font-size: var(--hdc-fs-900); line-height: var(--hdc-lh-tight); letter-spacing: -0.005em; }
.hero__sub { font-size: var(--hdc-fs-500); color: var(--hdc-color-on-dark-muted); max-width: 42ch; margin: var(--hdc-space-5) 0 0; }

/* Search — squared, refined */
.searchbar { margin-top: var(--hdc-space-7); background: var(--hdc-surface); border-radius: var(--hdc-radius-md); box-shadow: var(--hdc-shadow-2); display: flex; align-items: stretch; max-width: 700px; overflow: hidden; }
.searchbar__field { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: var(--hdc-space-4) var(--hdc-space-5); flex: 1 1 auto; }
.searchbar__field + .searchbar__field { border-left: 1px solid var(--hdc-line); }
.searchbar__field label { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-100); font-weight: var(--hdc-fw-semi); letter-spacing: var(--hdc-tracking-ui); text-transform: uppercase; color: var(--hdc-color-muted); }
.searchbar__field input, .searchbar__field select { border: 0; padding: 0; font-family: var(--hdc-font-body); font-size: var(--hdc-fs-400); color: var(--hdc-color-heading); background: transparent; outline: none; width: 100%; }
.searchbar__field--location { flex: 2 1 auto; }
.searchbar .btn { flex: 0 0 auto; border-radius: 0; border: 0; }

/* ==========================================================================
   Communities — editorial cards, squared, restrained
   ========================================================================== */
.communities-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--hdc-space-7); }
.community-card { position: relative; display: flex; flex-direction: column; background: var(--hdc-surface); border: 1px solid var(--hdc-line); border-radius: var(--hdc-radius-md); overflow: hidden; transition: border-color var(--hdc-dur) var(--hdc-ease); }
.community-card:hover { border-color: var(--hdc-line-strong); }
.community-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.community-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--hdc-ease); }
.community-card:hover .community-card__media img { transform: scale(1.03); }
.community-card__top { position: absolute; top: var(--hdc-space-4); left: var(--hdc-space-4); right: var(--hdc-space-4); display: flex; align-items: center; justify-content: space-between; }
.community-card__incentive { font-family: var(--hdc-font-ui); font-weight: var(--hdc-fw-semi); font-size: var(--hdc-fs-100); letter-spacing: var(--hdc-tracking-ui); text-transform: uppercase; color: var(--hdc-color-on-dark); background: var(--hdc-color-primary); padding: var(--hdc-space-2) var(--hdc-space-3); }
.community-card__body { padding: var(--hdc-space-6); display: flex; flex-direction: column; gap: var(--hdc-space-3); flex: 1 1 auto; }
.community-card__loc { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-100); font-weight: var(--hdc-fw-semi); letter-spacing: var(--hdc-tracking-wide); text-transform: uppercase; color: var(--hdc-color-primary); }
.community-card__body h3 { font-size: var(--hdc-fs-700); }
.community-card__desc { margin: 0; font-size: var(--hdc-fs-300); color: var(--hdc-color-text); }
.community-card__meta { margin-top: auto; padding-top: var(--hdc-space-5); border-top: 1px solid var(--hdc-line); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--hdc-space-4); }
.community-card__spec { display: flex; gap: var(--hdc-space-6); }
.community-card__spec div { display: flex; flex-direction: column; gap: 2px; }
.community-card__spec dt { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-100); letter-spacing: var(--hdc-tracking-ui); text-transform: uppercase; color: var(--hdc-color-muted); }
.community-card__spec dd { margin: 0; font-family: var(--hdc-font-display); font-size: var(--hdc-fs-500); color: var(--hdc-color-heading); }

/* ==========================================================================
   Story — split, editorial
   ========================================================================== */
.story { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(var(--hdc-space-6), 5vw, var(--hdc-space-9)); }
.story__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--hdc-radius-md); }
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story__copy h2 { font-size: var(--hdc-fs-800); letter-spacing: -0.01em; }
.story__copy p { font-size: var(--hdc-fs-500); margin: var(--hdc-space-5) 0 0; max-width: 44ch; }
.story__stats { display: flex; gap: var(--hdc-space-8); margin: var(--hdc-space-6) 0 0; }
.story__stats div { display: flex; flex-direction: column; gap: var(--hdc-space-1); }
.story__stats .n { font-family: var(--hdc-font-display); font-size: var(--hdc-fs-700); color: var(--hdc-color-primary); line-height: 1; }
.story__stats .l { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-100); font-weight: var(--hdc-fw-semi); letter-spacing: var(--hdc-tracking-ui); text-transform: uppercase; color: var(--hdc-color-muted); }
.story .btn { margin-top: var(--hdc-space-7); }

/* ==========================================================================
   QMI — squared inventory cards
   ========================================================================== */
.qmi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hdc-space-6); }
.qmi-card { background: var(--hdc-surface); border: 1px solid var(--hdc-line); border-radius: var(--hdc-radius-md); overflow: hidden; transition: border-color var(--hdc-dur) var(--hdc-ease); }
.qmi-card:hover { border-color: var(--hdc-line-strong); }
.qmi-card__media { position: relative; aspect-ratio: 16 / 10; }
.qmi-card__media img { width: 100%; height: 100%; object-fit: cover; }
.qmi-card__status { position: absolute; top: var(--hdc-space-3); left: var(--hdc-space-3); }
.qmi-card__body { padding: var(--hdc-space-5); }
.qmi-card__community { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-100); font-weight: var(--hdc-fw-semi); letter-spacing: var(--hdc-tracking-wide); text-transform: uppercase; color: var(--hdc-color-primary); }
.qmi-card__price { font-family: var(--hdc-font-display); font-size: var(--hdc-fs-600); color: var(--hdc-color-heading); margin-top: var(--hdc-space-2); }
.qmi-card__addr { font-size: var(--hdc-fs-300); margin: var(--hdc-space-1) 0 var(--hdc-space-4); color: var(--hdc-color-text); }
.qmi-card__specs { display: flex; gap: var(--hdc-space-5); padding-top: var(--hdc-space-4); border-top: 1px solid var(--hdc-line); font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-200); letter-spacing: 0.04em; text-transform: uppercase; color: var(--hdc-color-muted); }
.qmi-card__specs b { color: var(--hdc-color-heading); font-weight: var(--hdc-fw-semi); }
.section-foot { margin-top: var(--hdc-space-8); display: flex; justify-content: center; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta { background: var(--hdc-surface-ink); color: var(--hdc-color-on-dark); text-align: center; }
.cta h2 { color: var(--hdc-color-on-dark); font-size: var(--hdc-fs-800); max-width: 18ch; margin-inline: auto; letter-spacing: -0.01em; }
.cta p { color: var(--hdc-color-on-dark-muted); font-size: var(--hdc-fs-500); max-width: 50ch; margin: var(--hdc-space-4) auto 0; }
.cta__actions { margin-top: var(--hdc-space-7); display: flex; gap: var(--hdc-space-4); justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--hdc-surface-warm); border-top: 1px solid var(--hdc-line); padding-block: var(--hdc-space-8) var(--hdc-space-6); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--hdc-space-7); }
.site-footer h4 { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-100); font-weight: var(--hdc-fw-semi); letter-spacing: var(--hdc-tracking-wide); text-transform: uppercase; color: var(--hdc-color-muted); margin: 0 0 var(--hdc-space-4); }
.site-footer img { height: 30px; width: auto; margin-bottom: var(--hdc-space-4); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--hdc-space-3); }
.site-footer li a { font-size: var(--hdc-fs-300); color: var(--hdc-color-text); transition: color var(--hdc-dur) var(--hdc-ease); }
.site-footer li a:hover { color: var(--hdc-color-primary); }
.footer-about p { font-size: var(--hdc-fs-300); margin: 0; max-width: 32ch; }
.footer-bottom { margin-top: var(--hdc-space-8); padding-top: var(--hdc-space-5); border-top: 1px solid var(--hdc-line); display: flex; align-items: center; justify-content: space-between; gap: var(--hdc-space-4); font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-100); letter-spacing: var(--hdc-tracking-ui); text-transform: uppercase; color: var(--hdc-color-muted); }
.footer-disclaimer { font-size: var(--hdc-fs-100); color: var(--hdc-color-muted); margin-top: var(--hdc-space-5); line-height: 1.6; max-width: 84ch; }

:focus-visible { outline: 2px solid var(--hdc-color-primary); outline-offset: 3px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
  .communities-grid { grid-template-columns: 1fr; }
  .qmi-grid { grid-template-columns: 1fr 1fr; }
  .story { grid-template-columns: 1fr; }
  .story__media { order: -1; aspect-ratio: 3 / 2; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .mainnav, .header-phone, .utilbar .util-social { display: none; }
  .searchbar { flex-direction: column; }
  .searchbar__field + .searchbar__field { border-left: 0; border-top: 1px solid var(--hdc-line); }
  .searchbar .btn { width: 100%; justify-content: center; padding-block: var(--hdc-space-4); }
  .qmi-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .community-card__meta { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }