/* HOAQM Marketing Site — shared styles
   Source of truth for tokens: docs/style-tokens.md
   Source of truth for brand: assets/wordmark/README.md
*/

/* ---------- Self-hosted fonts (Latin only) ---------- */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
  --color-navy: #1F2D3D;
  --color-green: #4A5D4F;
  --color-warm-white: #FAFAF7;
  --color-black: #000000;

  --font-serif: "Source Serif 4", "Source Serif 4 Display", Georgia, serif;
  --font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lead: 1.125rem;
  --text-h4: 1.25rem;
  --text-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.5rem);
  --text-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  --text-h1: clamp(2.25rem, 1.8rem + 2vw, 3rem);
  --text-hero: clamp(2.75rem, 1.8rem + 4.2vw, 4.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-caps: 0.18em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  --content-max: 72rem;
  --prose-max: 38rem;
  --gutter: 1.25rem;

  --rule-hairline: 1px solid var(--color-green);
  --radius-subtle: 4px;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-default: 220ms;
}

@media (min-width: 1024px) {
  :root { --gutter: 2.5rem; }
}

/* ---------- Reset / base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--color-warm-white);
  color: var(--color-navy);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-optical-sizing: auto;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--color-navy);
  margin: 0;
  line-height: var(--leading-tight);
}

h2 { font-size: var(--text-h2); line-height: var(--leading-tight); }
h3 { font-size: var(--text-h3); line-height: var(--leading-snug); }
h4 { font-size: var(--text-h4); line-height: var(--leading-snug); }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duration-fast) var(--ease-default);
}
a:hover { color: var(--color-green); }
a:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 3px;
  border-radius: var(--radius-subtle);
}

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

/* Account for the sticky header height when jumping to in-page anchors. */
:target,
[id] { scroll-margin-top: 6rem; }

/* Skip-to-content link for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-navy);
  color: var(--color-warm-white);
  text-decoration: none;
  z-index: 100;
}
.skip-link:focus { left: var(--space-2); }

/* ---------- Layout primitives ---------- */

.shell {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

@media (min-width: 1024px) {
  .section { padding-top: var(--space-12); padding-bottom: var(--space-12); }
}

.section-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0 0 var(--space-4);
}

.section-heading {
  font-size: var(--text-h2);
  margin-bottom: var(--space-6);
  max-width: 56ch;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--color-warm-white);
  border-bottom: var(--rule-hairline);
  transition: box-shadow var(--duration-default) var(--ease-default),
              background var(--duration-default) var(--ease-default);
}

/* Header row gets more horizontal room than the body content max so the
   wordmark and the seven nav items + sign-in button never need to compress. */
@media (min-width: 1024px) {
  .site-header .shell { max-width: 84rem; }
}

.site-header.scrolled {
  background: rgba(250, 250, 247, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  box-shadow: 0 1px 0 rgba(31, 45, 61, 0.06), 0 4px 12px rgba(31, 45, 61, 0.05);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  flex-wrap: wrap;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-header__brand img {
  height: 2rem;
  width: auto;
}

@media (min-width: 1024px) {
  .site-header__inner { flex-wrap: nowrap; }
  .site-header__brand img { height: 2.25rem; }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

@media (min-width: 1024px) {
  .site-nav { flex-wrap: nowrap; gap: var(--space-4); }
}

.site-nav a,
.nav-group__parent {
  text-decoration: none;
  font-size: var(--text-sm);
  color: var(--color-navy);
  white-space: nowrap;
}

/* Header nav links — green + underline on hover. Matches the footer link pattern.
   Excludes .btn-link (the Resident sign-in entry) which has its own bold-by-default + slide-on-hover treatment. */
.site-nav a:not(.btn-link):not(.nav-group__parent):hover,
.nav-group__menu a:hover,
.nav-group__menu a:focus-visible,
.nav-group__parent:hover .nav-link__label,
.nav-group__parent:focus-visible .nav-link__label {
  color: var(--color-green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

/* Active-page indicator — green + bold on the nav link matching the current page.
   aria-current="page" is set on the matching <a> in the page's HTML; community
   sub-pages set aria-current="true" on the dropdown parent (.nav-group__parent)
   to indicate the user is *in* the Communities section even though the parent
   itself is not the current page. The [aria-current] attribute selector matches
   either value. */
.site-nav a[aria-current],
.nav-group__parent[aria-current] .nav-link__label {
  color: var(--color-green);
  font-weight: 700;
}

/* Resident sign-in (.btn-link) inside the nav — match nav font-size, keep no-wrap.
   Defensive: explicitly suppress any text-decoration: underline on hover. The .btn-link
   only renders its border-bottom (the static + sliding underline); the surrounding nav
   links' green+underline hover pattern must not double up here. */
.site-nav .btn-link {
  font-size: var(--text-sm);
  white-space: nowrap;
}
.site-nav .btn-link:hover {
  text-decoration: none;
}

/* Communities dropdown — CSS-only, hover + focus-within */

.nav-group {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-group__parent {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  text-decoration: none;
  font-size: var(--text-sm);
  color: var(--color-navy);
}

.nav-group__parent:hover { color: var(--color-green); }

.nav-group__caret {
  font-size: 1em;
  line-height: 1;
  transition: transform var(--duration-fast) var(--ease-default);
}

.nav-group:hover .nav-group__caret,
.nav-group:focus-within .nav-group__caret {
  transform: translateY(1px);
  color: var(--color-green);
}

.nav-group__menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 16rem;
  margin: 0;
  padding: var(--space-3) 0;
  list-style: none;
  background: var(--color-warm-white);
  border: var(--rule-hairline);
  border-radius: var(--radius-subtle);
  box-shadow: 0 4px 16px rgba(31, 45, 61, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default),
              visibility 0s linear var(--duration-fast);
  z-index: 50;
}

.nav-group:hover .nav-group__menu,
.nav-group:focus-within .nav-group__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default),
              visibility 0s;
}

.nav-group__menu li { margin: 0; }

.nav-group__menu a {
  display: block;
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-navy);
  text-decoration: none;
  white-space: nowrap;
}

.nav-group__menu a:hover,
.nav-group__menu a:focus-visible { color: var(--color-green); }

@media (max-width: 1023px) {
  .nav-group { width: 100%; }
  .nav-group__menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding: var(--space-2) 0 0 var(--space-5);
    background: transparent;
    transition: none;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-subtle);
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
  cursor: pointer;
}

.btn--primary {
  background: var(--color-navy);
  color: var(--color-warm-white);
}
.btn--primary:hover {
  background: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-warm-white);
}

.btn--secondary {
  background: transparent;
  color: var(--color-navy);
}
.btn--secondary:hover {
  background: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-warm-white);
}

/* Inverted secondary for the dark footer surface. */
.btn--secondary--reverse {
  border-color: var(--color-warm-white);
  color: var(--color-warm-white);
}
.btn--secondary--reverse:hover {
  background: var(--color-warm-white);
  border-color: var(--color-warm-white);
  color: var(--color-navy);
}

/* Secondary buttons that wrap their label in a <span> get a slide-right
   gesture on hover, matching the site's text-link motion language. The
   button's outer box stays the same shape; only the label transforms. */
.btn--secondary > span,
.btn--secondary--reverse > span {
  display: inline-block;
  transition: transform var(--duration-default) var(--ease-default);
}
.btn--secondary:hover > span,
.btn--secondary--reverse:hover > span {
  transform: translateX(var(--space-3));
}

.btn-link {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-navy);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  transition: color var(--duration-fast) var(--ease-default),
              padding-left var(--duration-default) var(--ease-default),
              margin-right var(--duration-default) var(--ease-default);
}
.btn-link:hover {
  color: var(--color-green);
  padding-left: var(--space-3);
  margin-right: calc(-1 * var(--space-3));
}

/* ---------- Hero (type-only) ---------- */

.hero {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  text-align: center;
}

@media (min-width: 1024px) {
  .hero { padding-top: var(--space-16); padding-bottom: var(--space-16); }
}

.hero .shell {
  max-width: 64rem;
}

.hero__wordmark {
  width: 100%;
  max-width: 44rem;
  height: auto;
  margin: 0 auto var(--space-8);
}

.hero__headline {
  font-family: var(--font-serif);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 auto var(--space-5);
  max-width: none;
}

.hero__subhead {
  font-family: var(--font-sans);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--color-navy);
  margin: 0 auto var(--space-8);
  max-width: none;
}

.hero__ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* ---------- Reusable: definition-list row (h3 left, body right) ----------
   Used by .credential (about) and .expectation (about, services).
   Pair with a wrapping list (.credentials__list, .expectations__list)
   that handles vertical rhythm between rows. */

.def-row {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .def-row {
    grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr);
    gap: var(--space-8);
    align-items: baseline;
  }
}

@media (min-width: 1024px) {
  .def-row {
    grid-template-columns: minmax(14rem, 1fr) minmax(0, 2.4fr);
    gap: var(--space-10);
  }
}

.def-row > h3 {
  margin: 0;
}

/* ---------- Communities list ---------- */

.communities {
  border-top: var(--rule-hairline);
  background: var(--color-warm-white);
}

/* Reusable: vertical row-list with hairlines between rows.
   Shared by .communities__list (home) and .milestones__list (about). */
.communities__list,
.milestones__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: var(--rule-hairline);
}

.communities__list { margin-bottom: var(--space-8); }

.communities__list > li,
.milestones__list > li {
  border-bottom: var(--rule-hairline);
}

.communities__list a {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  text-decoration: none;
  color: var(--color-navy);
  transition: color var(--duration-fast) var(--ease-default),
              padding-left var(--duration-default) var(--ease-default);
}

@media (min-width: 640px) {
  .communities__list a {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-6);
  }
}

.communities__list a:hover,
.communities__list a:focus-visible {
  color: var(--color-green);
  padding-left: var(--space-3);
}

.community-list__name {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.community-list__meta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-green);
}

.communities__see-all {
  margin: 0;
  font-size: var(--text-sm);
}

.communities__see-all a {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-navy);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color var(--duration-fast) var(--ease-default),
              padding-left var(--duration-default) var(--ease-default);
}

.communities__see-all a:hover {
  color: var(--color-green);
  padding-left: var(--space-3);
}

/* ---------- Founder section (green surface) ---------- */

.founders {
  background: var(--color-green);
  color: var(--color-warm-white);
}

.founders .section-eyebrow {
  color: var(--color-warm-white);
  opacity: 0.75;
}

.founders .section-heading,
.founders h3 {
  color: var(--color-warm-white);
}

.founders__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .founders__grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}

.founder h3 {
  font-size: var(--text-h3);
  margin-bottom: var(--space-3);
}

.founder p {
  max-width: var(--prose-max);
  line-height: var(--leading-relaxed);
}

.founders__chris {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(250, 250, 247, 0.25);
  font-size: var(--text-base);
  color: var(--color-warm-white);
  max-width: var(--prose-max);
}

/* ---------- Closing CTA ---------- */

.closing {
  border-top: var(--rule-hairline);
  background: var(--color-navy);
  color: var(--color-warm-white);
  padding-bottom: var(--space-8);
}

@media (min-width: 1024px) {
  .closing { padding-bottom: var(--space-10); }
}

.closing .shell { max-width: 56rem; }

.closing__lede {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  line-height: var(--leading-snug);
  color: var(--color-warm-white);
  margin: 0 0 var(--space-6);
}

.closing__cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-lead);
  font-weight: 700;
  color: var(--color-warm-white);
  text-decoration: none;
  border-bottom: 1px solid var(--color-warm-white);
  padding-bottom: 4px;
  transition: padding-left var(--duration-default) var(--ease-default);
}
.closing__cta:hover {
  color: var(--color-warm-white);
  padding-left: var(--space-3);
}

/* ---------- About page ---------- */

/* Hero — quieter than home: left-aligned, content-first, no oversized wordmark */
.about-hero {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

@media (min-width: 1024px) {
  .about-hero { padding-top: var(--space-12); padding-bottom: var(--space-12); }
}

.about-hero h1 {
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-5);
  max-width: 24ch;
}

.about-hero__intro {
  font-family: var(--font-serif);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  max-width: var(--prose-max);
  margin: 0;
}

/* Two intro paragraphs in the hero get a half-em breath between them so each
   reads as its own audience cue rather than one continuous block. Used on
   /contact and /portal. */
.about-hero__intro + .about-hero__intro {
  margin-top: 0.5em;
}

/* Founders bio — h3 on top, body paragraphs below; full-column blocks stacked */
.founders-bio {
  border-top: var(--rule-hairline);
}

.bio {
  margin-bottom: var(--space-10);
}

.bio:last-child {
  margin-bottom: 0;
}

.bio h3 {
  font-size: var(--text-h3);
  margin-bottom: var(--space-3);
}

.bio p {
  max-width: var(--prose-max);
  line-height: var(--leading-relaxed);
}

/* Credentials — uses .def-row pattern; right column has italic meta line + body paragraph */
.credentials {
  border-top: var(--rule-hairline);
}

.credentials__list {
  display: grid;
  gap: var(--space-10);
}

.credential__meta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-green);
  margin: 0 0 var(--space-3);
}

.credential__body {
  margin: 0;
  max-width: var(--prose-max);
}

/* Milestones — typographic list; year left, event right; uses the row-list primitive */
.milestones {
  border-top: var(--rule-hairline);
}

.milestones__list > li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) 0;
}

@media (min-width: 640px) {
  .milestones__list > li {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-8);
  }
}

.milestone__year {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--color-green);
}

@media (min-width: 640px) {
  .milestone__year { flex: 0 0 5rem; }
}

.milestone__event {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy);
}

/* How we work — three statement blocks; uses .def-row pattern */
.expectations {
  border-top: var(--rule-hairline);
}

.expectations__list {
  display: grid;
  gap: var(--space-10);
}

.expectation > p {
  margin: 0;
  max-width: var(--prose-max);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-navy);
  color: var(--color-warm-white);
  padding-top: var(--space-8);
  padding-bottom: var(--space-5);
}

.site-footer a { color: var(--color-warm-white); text-decoration: none; }
.site-footer a:hover { color: var(--color-warm-white); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.site-footer a.btn:hover { text-decoration: none; }
.site-footer a.btn--secondary--reverse:hover { color: var(--color-navy); }

.site-footer__signin {
  margin: 0 0 var(--space-5);
}

/* Footer grid — 5 outer cells at desktop:
   col 1: brand wordmark + tagline + Residents sign-in
   col 2: Site nav
   col 3: Contact (heading) + Carol/Ryan/Assessments emails
   col 4: continuation of Contact (no heading) — phone/fax/hours + address
   col 5: Legal (Privacy + Terms)
   Tablet collapses to 2 cols (3 rows with col 5 in the last row alone);
   mobile to a single stacked column. */
.site-footer__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-6); }
}

@media (min-width: 1024px) {
  /* Col 4 (contact-cont) is the widest after the brand col — needs to fit
     "After-hours emergency:" and "HOA Quality Management, LLC" on single
     lines. The brand col gives up some room since the stacked wordmark
     comfortably fits in ~180px. */
  .site-footer__grid { grid-template-columns: 1.1fr 0.85fr 1fr 1.3fr 0.85fr; gap: var(--space-8); }
}

/* Contact continuation column (col 4 at desktop) has no visible heading
   — visually reads as the right-hand continuation of col 3. The hidden
   heading inside it occupies vertical space at desktop only so col 4's
   first list item aligns with col 3's first list item. On tablet and
   mobile the alignment spacer collapses (display: none) and the
   continuation column flows naturally beneath the emails block. */
.site-footer__contact-cont .footer-heading[aria-hidden="true"] {
  display: none;
}

@media (min-width: 1024px) {
  .site-footer__contact-cont .footer-heading[aria-hidden="true"] {
    display: block;
    visibility: hidden;
  }
}

/* Section-spacing inside the brand column when Residents stacks under
   the tagline — keeps the Residents heading from sitting too close to
   the tagline above it. */
.site-footer__brand-col .footer-heading + .site-footer__signin {
  margin-top: 0;
}

.site-footer__brand-col .site-footer__tagline + .footer-heading {
  margin-top: var(--space-6);
}

/* Email rows in the Contact column: label on its own line, address on
   the next line. Matches the natural wrap of "Assessments/payments:"
   but applied consistently to all three rows via an explicit <br>. */
.site-footer__contact .footer-list a[href^="mailto:"] {
  display: inline-block;
}

.site-footer__brand img {
  height: 3rem;
  width: auto;
  margin-bottom: var(--space-4);
}

@media (min-width: 1024px) {
  .site-footer__brand img { height: 4rem; }
}

.site-footer__tagline {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  max-width: 22rem;
}

.footer-heading {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-warm-white);
  margin: 0 0 var(--space-4);
  opacity: 0.7;
}

.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

/* Selector matches address blocks anywhere inside the footer (Contact
   column or Contact-continuation column after the round-3 split). The
   browser default for <address> is italic-serif, which leaks through
   if the rule isn't applied. */
.site-footer address {
  font-style: normal;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  margin-top: var(--space-3);
}

.site-footer__contact .footer-list,
.site-footer__contact-cont .footer-list { gap: var(--space-3); }

.site-footer__bottom {
  border-top: 1px solid rgba(250, 250, 247, 0.15);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-warm-white);
  opacity: 0.7;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.site-footer__bottom a { font-size: var(--text-xs); }

/* ---------- Contact page ---------- */

.contact-section {
  border-top: var(--rule-hairline);
}

.contact-section--alt {
  background: var(--color-warm-white);
}

.contact-section__lead {
  font-family: var(--font-serif);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  max-width: var(--prose-max);
  margin: 0 0 var(--space-8);
}

/* Two adjacent .contact-section__lead paragraphs collapse the first one's
   bottom margin and use a half-em breath between them — same convention as
   .about-hero__intro, applied to Section 2's homeowner lead paragraph. */
.contact-section__lead:has(+ .contact-section__lead) {
  margin-bottom: 0;
}
.contact-section__lead + .contact-section__lead {
  margin-top: 0.5em;
}

/* Proposal request form */
.proposal-form-wrap[hidden],
.proposal-success[hidden] { display: none; }

.proposal-form__heading {
  font-size: var(--text-h3);
  margin: 0 0 var(--space-5);
}

.proposal-form {
  display: grid;
  gap: var(--space-5);
  max-width: 36rem;
}

.proposal-form__field {
  display: grid;
  gap: var(--space-2);
}

.proposal-form__field label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-navy);
}

.proposal-form__req { color: var(--color-green); }

.proposal-form__opt {
  font-weight: 400;
  color: var(--color-green);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  margin-left: var(--space-1);
}

.proposal-form input[type="text"],
.proposal-form input[type="email"],
.proposal-form input[type="tel"],
.proposal-form textarea {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-navy);
  background: var(--color-warm-white);
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-subtle);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}

.proposal-form input:focus,
.proposal-form textarea:focus {
  outline: none;
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(74, 93, 79, 0.18);
}

.proposal-form textarea { resize: vertical; }

.proposal-form input::placeholder,
.proposal-form textarea::placeholder {
  color: var(--color-green);
  opacity: 0.65;
  font-style: italic;
}

.proposal-form__help {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-green);
  margin: var(--space-1) 0 0;
  line-height: var(--leading-snug);
}

.proposal-form__honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.proposal-form__submit { margin-top: var(--space-2); }

.proposal-form__privacy {
  font-size: var(--text-sm);
  color: var(--color-green);
  margin: 0;
  max-width: var(--prose-max);
}

.proposal-success {
  max-width: var(--prose-max);
}

.proposal-success p {
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
}

/* Homeowner contact details */
.contact-details {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-base);
  max-width: 36rem;
}

.contact-details__address {
  font-style: normal;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  margin: 0;
}

/* ---------- Escrow page ---------- */

.escrow-instructions { border-top: var(--rule-hairline); }
.escrow-pricing { border-top: var(--rule-hairline); }

/* Instructions: label-left / value-right rows. Two-column at 768px+,
   stacked at narrow widths. Labels match the eyebrow's small-caps styling. */
.instructions-list {
  margin: 0;
  display: grid;
  gap: var(--space-6);
}

.instructions-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .instructions-row {
    grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: baseline;
  }
}

.instructions-row dt {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0;
}

.instructions-row dd {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-navy);
  margin: 0;
}

.instructions-row dd address {
  font-style: normal;
  line-height: var(--leading-snug);
  margin: 0;
}

/* Pricing menu — typographic list. No bullets, no row dividers (per
   2026-05-06 round-4 review pass; vertical padding alone separates rows).
   Body on the left, price right-aligned at desktop. */
.price-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.price-menu__row {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-6) 0;
}

@media (min-width: 640px) {
  .price-menu__row {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-8);
    align-items: baseline;
  }
}

.price-menu__body h3 {
  font-size: var(--text-h3);
  margin: 0 0 var(--space-3);
}

.price-menu__body p {
  margin: 0 0 var(--space-2);
  max-width: var(--prose-max);
}

.price-menu__body p:last-child { margin-bottom: 0; }

.price-menu__note {
  font-size: var(--text-sm);
  color: var(--color-green);
  margin-top: var(--space-3);
}

/* Sublist for the per-community meetings cadence under
   "Meetings per year by community:" — small bulleted list. */
.price-menu__sublist {
  list-style: disc;
  font-size: var(--text-sm);
  color: var(--color-green);
  margin: var(--space-1) 0 0;
  padding-left: var(--space-5);
}

.price-menu__sublist li {
  margin-bottom: var(--space-1);
}

.price-menu__sublist li:last-child { margin-bottom: 0; }

.price-menu__price {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-navy);
}

@media (min-width: 640px) {
  .price-menu__price {
    text-align: right;
  }
}

.price-menu__price p {
  margin: 0 0 var(--space-2);
}
.price-menu__price p:last-child { margin-bottom: 0; }

/* Dollar amounts in the price column — serif, larger size, regular
   weight (un-bolded per 2026-05-06 round-4 review pass). The size and
   serif treatment alone make them anchor a quick scan. */
.price-menu__amount {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-h3);
  color: var(--color-navy);
}

.escrow-insurance {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
}

.escrow-closing {
  border-top: var(--rule-hairline);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.escrow-closing__line {
  font-size: var(--text-lead);
  margin: 0;
}

/* ---------- Community sub-page ---------- */

.community-hero { padding: 0; }

.community-hero__photo {
  width: 100%;
  background: var(--color-navy);
  border-bottom: var(--rule-hairline);
  overflow: hidden;
}

.community-hero__photo img {
  display: block;
  width: 100%;
  height: clamp(14rem, 25vw, 22rem);
  object-fit: cover;
}

.community-hero .shell {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

@media (min-width: 1024px) {
  .community-hero .shell {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }
}

.community-hero h1 {
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-3) 0 var(--space-3);
  max-width: 26ch;
}

.community-hero__meta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-green);
  margin: 0;
}

/* Sub-meta line beneath the hero meta — italic serif, slightly smaller-feeling
   register than the meta line above it. Carries the "Continuously managed by
   HOA Quality Management since YYYY." credibility statement that previously
   lived in a dedicated "By the numbers" section (removed 2026-05-10 along
   with .community-numbers + .fact-box, since the cadence half of that section
   was redundant with the "Next board meeting" block in Section 4 and the
   managed-since fact alone didn't justify a whole section). */
.community-hero__sub-meta {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  color: var(--color-navy);
  margin: var(--space-2) 0 0;
  max-width: var(--prose-max);
}

.community-about {
  border-top: var(--rule-hairline);
}

.community-about__body {
  font-family: var(--font-serif);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  max-width: var(--prose-max);
  margin: 0;
}

.signup-placeholder {
  font-size: var(--text-sm);
  color: var(--color-green);
  border: 1px dashed var(--color-green);
  border-radius: var(--radius-subtle);
  padding: var(--space-3) var(--space-4);
  background: rgba(74, 93, 79, 0.04);
  margin: 0;
}

/* ---------- For Homeowners — sectioned FAQ ----------
   Sectioned FAQ primitive (per the 2026-04-30 FAQ-structure decision;
   established 2026-05-09 on /homeowners; redesigned 2026-05-09 to use
   native <details>/<summary> accordion; consolidated 2026-05-09 to two
   sections; layout iteration 2026-05-09 added section-top dividers and
   moved expand-all into the hero; second layout iteration 2026-05-09
   reverted .faq-section padding to .section defaults, capped the
   .faq-list as a unit so questions and answers share the same visual
   width, restored TOC links in the hero alongside a bolded "Expand
   all answers" toggle, added per-section eyebrows + per-section
   "Expand all answers" toggles right-aligned with the section h2).
   Each Q is a <details class="faq-entry"> with a <summary> (italic
   serif question + small +/- indicator) and a <div class="faq-entry__a">
   wrapping the answer prose. .faq-section gets a hairline border-top
   that marks each section boundary (after the hero AND between
   sections), matching the section-divider pattern used elsewhere on
   the site. .faq-list is max-width capped at 52rem so the entire
   list (Qs + dividers + As) reads as one constrained block.
   .faq-toolbar (in the hero) and .faq-section__head (next to each
   section h2) carry the TOC + expand-all controls. The inline script
   on the page handles both global and per-section toggles via
   data-action="expand-all" + data-target attributes. */

.faq-section {
  border-top: var(--rule-hairline);
}

.faq-toolbar {
  margin: var(--space-4) 0 0;
  max-width: 52rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
  flex-wrap: wrap;
  font-size: var(--text-sm);
}

.faq-toolbar__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}

.faq-toolbar__nav a {
  font-family: var(--font-sans);
  color: var(--color-navy);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.faq-toolbar__nav a:hover { color: var(--color-green); }

.faq-toolbar__expand,
.faq-section__head .faq-expand {
  margin: 0;
}

.faq-section__head {
  max-width: 52rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4) var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.faq-section__head .faq-section__title {
  flex: 1 1 auto;
  min-width: 0;
}

.faq-section__head .section-eyebrow,
.faq-section__head .section-heading {
  margin-bottom: 0;
}

.faq-section__head .section-eyebrow {
  margin-bottom: var(--space-3);
}

.faq-expand {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
}

.faq-expand-link {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--color-green);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  cursor: pointer;
}

.faq-expand-link:hover { color: var(--color-navy); }

.faq-list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  max-width: 52rem;
}

.faq-entry {
  border-bottom: var(--rule-hairline);
}

.faq-entry > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  color: var(--color-navy);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
}

.faq-entry > summary::-webkit-details-marker { display: none; }
.faq-entry > summary::marker { content: ""; }

.faq-entry > summary::after {
  content: "+";
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--text-h3);
  color: var(--color-green);
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-default);
}

.faq-entry[open] > summary::after { content: "\2212"; /* minus sign */ }

.faq-entry > summary:hover { color: var(--color-green); }
.faq-entry > summary:hover::after { color: var(--color-navy); }

.faq-entry > summary:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 3px;
  border-radius: var(--radius-subtle);
}

.faq-entry__a {
  padding: 0 0 var(--space-5);
}

.faq-entry__a > p {
  margin: 0 0 var(--space-3);
  line-height: var(--leading-relaxed);
}

.faq-entry__a > p:last-child { margin-bottom: 0; }

.faq-entry__a address {
  font-style: normal;
  line-height: var(--leading-snug);
  margin: var(--space-3) 0;
}

.faq-section__close {
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-navy);
  max-width: var(--prose-max);
  margin: var(--space-6) 0 0;
}

/* ---------- Portal placeholder ---------- */

.portal-callout-section {
  padding-top: var(--space-6);
  padding-bottom: 0;
}

.portal-callout {
  border: var(--rule-hairline);
  border-left: 4px solid var(--color-green);
  border-radius: var(--radius-subtle);
  background: rgba(74, 93, 79, 0.04);
  padding: var(--space-4) var(--space-5);
}

.portal-callout p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
}

/* ---------- Legal pages (/privacy, /terms) ---------- */

/* Pre-publish DRAFT banner. Sits at the top of the hero on /privacy and
   /terms until attorney review is complete and Ryan removes it. Same
   shape as .portal-callout — green-accent left border, warm-white tint —
   but used here as a visible note that the page isn't yet authoritative.
   Removed wholesale once the legal pages clear review. */
.draft-banner {
  border: var(--rule-hairline);
  border-left: 4px solid var(--color-green);
  border-radius: var(--radius-subtle);
  background: rgba(74, 93, 79, 0.06);
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-6);
  max-width: 52rem;
}

.draft-banner__label {
  display: block;
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-green);
}

.draft-banner p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-navy);
}

/* Last-updated stamp in the legal-page hero. Small, green, sans-serif
   so it reads as metadata rather than body prose. */
.legal-last-updated {
  margin: var(--space-5) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-green);
}

/* Sectioned long-form legal content. No hairline dividers between
   sections — the eyebrow + h2 typography carries the section-break
   work on its own, so the page reads as one continuous policy rather
   than a stack of independent FAQ-style blocks. Padding is tighter
   than the default .section rhythm (which is tuned for marketing
   pages) to match a typical web privacy-policy register.
   .legal-section__body caps prose at 52rem to keep line lengths
   readable — wider than the default 38rem prose-max because legal
   sections include sub-headed paragraphs and bulleted lists that
   benefit from a bit more room. */
.legal-section {
  /* Asymmetric padding — more on top than bottom — so each new section's
     eyebrow visibly "claims" the white space above it. Magnitudes dialed
     in: previous symmetric attempt looked too tight (used an undefined
     --space-7 var that fell back to 0); first asymmetric attempt at
     space-10/space-6 looked too generous. These values land between. */
  padding-top: var(--space-6);
  padding-bottom: var(--space-4);
}

@media (min-width: 1024px) {
  .legal-section { padding-top: var(--space-8); padding-bottom: var(--space-5); }
}

/* The last legal section on the page needs noticeably more bottom padding
   so the closing content doesn't crowd the dark surface below. Two cases:
   (a) the legal section is the literal last <section> in <main> (privacy,
   terms — the contact/housekeeping sections close the page); (b) the
   legal section is immediately followed by a .section.closing CTA block
   (boards essay — Section 4's last paragraph sits directly above the
   dark navy closing CTA, which is functionally the same visual transition
   as the dark footer in the (a) case). Without case (b), :last-of-type
   matches no element on the boards page and the gap reads as tight. */
.legal-section:last-of-type,
.legal-section:has(+ .section.closing) {
  padding-bottom: var(--space-10);
}

@media (min-width: 1024px) {
  .legal-section:last-of-type,
  .legal-section:has(+ .section.closing) { padding-bottom: var(--space-12); }
}

.legal-section .section-heading {
  margin-bottom: var(--space-4);
}

.legal-section__body {
  max-width: 52rem;
}

.legal-section__body > p,
.legal-section__body > ul {
  margin: 0 0 var(--space-4);
  line-height: var(--leading-relaxed);
}

.legal-section__body > p:last-child,
.legal-section__body > ul:last-child {
  margin-bottom: 0;
}

.legal-section__body > ul {
  padding-left: var(--space-5);
}

.legal-section__body > ul > li {
  margin-bottom: var(--space-2);
  line-height: var(--leading-relaxed);
}

.legal-section__body > ul > li:last-child {
  margin-bottom: 0;
}

/* Run-in subheadings inside a section paragraph — e.g. "Informational
   only." on /terms Section 1. Slightly heavier weight; same color as
   surrounding prose. */
.legal-section__body strong {
  color: var(--color-navy);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
  .communities__list a:hover,
  .communities__list a:focus-visible { padding-left: 0; }
}