/* ==========================================================================
   Dream Key Group — Homepage Stylesheet
   Built from: Design System v1.0, Experience Manifesto, Homepage Wireframe,
   High-Fidelity Design Specification. Every color, spacing, and type value
   below traces to those documents — nothing introduced ad hoc.
   ========================================================================== */

:root {
  /* Color */
  --navy: #102642;
  --gold: #D4B06A;
  --ivory: #F8F4EE;
  --sand: #D8C9B4;
  --driftwood: #9C8F81;
  --sage: #AAB6A1;
  --white: #FFFFFF;

  /* Spacing scale (8px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 160px;

  /* Layout */
  --container-max: 1280px;
  --container-pad: 80px;
  --radius-card: 2px;
  --radius-control: 4px;

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 600ms;
  --dur-settle: 120ms;

  /* Type */
  --font-display: 'Libre Caslon Display', Georgia, serif;
  --font-quote: 'Libre Caslon Text', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============ Reset & base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--navy);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ============ Skip link ============ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--ivory);
  padding: var(--sp-3) var(--sp-5);
  z-index: 1000;
  border-radius: 0 0 var(--radius-control) 0;
}
.skip-link:focus {
  left: 0;
}

/* ============ Focus ring (global) ============ */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-control);
}

/* ============ Typography ============ */
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--navy);
  margin: 0;
  text-wrap: balance; /* prevents a lone orphan word on the last line of editorial headlines; unsupported browsers fall back to normal wrapping */
}

h1 {
  font-size: 64px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.005em;
  max-width: 640px;
}

h2 {
  font-size: 44px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

h3 {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
}

.body-large { font-size: 19px; line-height: 1.6; margin: 0; }
.body-small { font-size: 14px; line-height: 1.55; margin: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 var(--sp-5);
}
.eyebrow--on-photo { color: var(--gold); text-shadow: 0 1px 3px rgba(16,38,66,0.35); }
.eyebrow--center { text-align: center; }

/* Shaft-line: Key Language asymmetric divider (weighted point, thinning line) */
.shaft-line {
  width: 96px;
  height: 4px;
  margin-bottom: var(--sp-5);
  background: linear-gradient(to right, var(--gold) 0 10px, rgba(212,176,106,0.35) 10px 100%);
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--dur-base) var(--ease-standard);
}
.reveal.is-visible .shaft-line { transform: scaleX(1); }

/* ============ Reveal-on-scroll ============ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============ Buttons (Key Language: "the settle" on click) ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding-inline: var(--sp-6);
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 250ms ease, background-color 250ms ease, color 250ms ease;
}
.btn:active { transform: translateY(2px); transition: transform var(--dur-settle) var(--ease-standard); }

.btn-primary {
  background: var(--navy);
  color: var(--ivory);
  border: 1px solid transparent;
}
.btn-primary:hover { border-color: var(--gold); }

.btn-secondary {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
}
.btn-secondary:hover { background: var(--navy); color: var(--ivory); }

.btn-ghost {
  background: transparent;
  color: var(--ivory);
  border: 1px solid var(--ivory);
}
.btn-ghost:hover { border-color: var(--gold); }

.btn-secondary-on-photo {
  background: transparent;
  color: var(--ivory);
  border: 1px solid var(--ivory);
}
.decision__tile:hover .btn-secondary-on-photo { border-color: var(--gold); }

.btn-primary-inverted {
  background: var(--ivory);
  color: var(--navy);
  border: 1px solid transparent;
}
.btn-primary-inverted:hover { border-color: var(--gold); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--navy);
  margin-top: var(--sp-6);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) ease;
}
.text-link:hover { border-color: var(--gold); }
.text-link svg { color: var(--gold); }
.text-link--small { margin-top: var(--sp-3); font-size: 14px; }

/* ============ Media placeholders (no photography yet) ============
   Treated as an intentional, quiet design moment rather than a "missing
   asset" marker — a soft field with the Key Language watermark mark
   centered at low opacity, and a small caption tucked in the corner. */
.media-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar, 4 / 3);
  background: linear-gradient(180deg, rgba(216,201,180,0.32), rgba(216,201,180,0.18));
  border: 1px solid rgba(16,38,66,0.08);
  border-radius: var(--radius-card);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.media-placeholder__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15%;
  min-width: 24px;
  max-width: 52px;
  transform: translate(-50%, -50%);
  color: var(--navy);
  opacity: 0.12;
}
.media-placeholder__label {
  position: relative;
  z-index: 1;
  margin: var(--sp-3);
  max-width: calc(100% - var(--sp-6));
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--navy);
  background: rgba(248,244,238,0.9);
  padding: var(--sp-1) var(--sp-2);
  border-radius: 2px;
}

/* Real placeholder photography — fills the same frame the empty
   media-placeholder used, so aspect ratio, hover-scale, and scrim behavior
   defined per-section (decision tiles, listing cards) all keep working
   unchanged once a photo is dropped in. */
.media-placeholder__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============ Icons (weighted-terminus line system) ============ */
svg use { color: var(--navy); }
.listing-card__facts svg { color: var(--navy); }

/* ============ Header / Navigation ============ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 96px;
  z-index: 100;
  background: transparent;
  transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.site-header.is-scrolled {
  background: var(--ivory);
  border-bottom: 1px solid var(--sand);
}

.header-inner {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}

/* Official logo icon + text-set wordmark. No horizontal lockup file exists
   yet, and the stacked lockup compresses poorly at 96px nav height — so the
   icon graphic (unmodified official artwork) pairs with "Dream Key Group"
   set in Libre Caslon Display, prioritizing readability over forcing the
   vertical mark into a space it wasn't drawn for. */
.logo { display: inline-flex; align-items: center; gap: var(--sp-3); }
.logo__icon {
  height: 40px;
  width: auto;
  filter: drop-shadow(0 1px 3px rgba(16,38,66,0.35));
  transition: filter var(--dur-base) ease;
}
.site-header.is-scrolled .logo__icon { filter: none; }
.logo__wordmark {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ivory);
  text-shadow: 0 1px 3px rgba(16,38,66,0.35);
  white-space: nowrap;
  transition: color var(--dur-base) ease, text-shadow var(--dur-base) ease;
}
.site-header.is-scrolled .logo__wordmark { color: var(--navy); text-shadow: none; }

/* Footer keeps the full stacked lockup — there's no height constraint there,
   so the original artwork is used exactly as designed. */
.logo__img {
  width: auto;
}

.primary-nav ul { display: flex; align-items: center; gap: var(--sp-6); }
.primary-nav > ul > li { position: relative; }

.nav-trigger,
.primary-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ivory);
  text-shadow: 0 1px 3px rgba(16,38,66,0.35);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) ease, color var(--dur-base) ease, text-shadow var(--dur-base) ease;
}
.site-header.is-scrolled .nav-trigger,
.site-header.is-scrolled .primary-nav a {
  color: var(--navy);
  text-shadow: none;
}
.nav-trigger:hover, .primary-nav a:hover { border-color: var(--gold); }

.chevron { transition: transform var(--dur-fast) var(--ease-standard); }
.has-dropdown.is-open .chevron { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: 0;
  background: var(--ivory);
  border: 1px solid var(--sand);
  border-radius: var(--radius-control);
  padding: var(--sp-4);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  box-shadow: 0 12px 32px rgba(16,38,66,0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 250ms var(--ease-standard), transform 250ms var(--ease-standard), visibility 250ms;
}
.has-dropdown.is-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { color: var(--navy); text-shadow: none; font-size: 14px; font-weight: 400; letter-spacing: 0; border: none; }
.dropdown a:hover { color: var(--gold); border: none; }

/* Mega-menu is wide (four columns) and its trigger isn't the first nav item,
   so it's anchored to the viewport center rather than the trigger to avoid
   running past the right edge of the screen on real desktop widths. */
.mega-menu {
  position: fixed;
  left: 50%;
  top: 96px;
  display: grid;
  grid-template-columns: repeat(4, 200px);
  gap: var(--sp-6);
  width: 900px;
  padding: var(--sp-6);
  transform: translate(-50%, 8px);
}
.has-dropdown.is-open .mega-menu { transform: translate(-50%, 0); }
.mega-col { display: flex; flex-direction: column; gap: var(--sp-3); }
.mega-col h3 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.mega-col .view-all { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); color: var(--navy); }

.header-utility { display: flex; align-items: center; gap: var(--sp-5); flex-shrink: 0; }
.phone-link {
  font-size: 13px;
  color: var(--ivory);
  text-shadow: 0 1px 3px rgba(16,38,66,0.35);
  transition: color var(--dur-base) ease, text-shadow var(--dur-base) ease;
}
.site-header.is-scrolled .phone-link { color: var(--navy); text-shadow: none; }
.site-header.is-scrolled .btn-ghost { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.site-header.is-scrolled .btn-ghost:hover { border-color: var(--gold); }

.mobile-menu-toggle { display: none; }

/* ============ Section 1 — Hero (navy-led, deliberately restrained) ============
   No background motif. The hero's entire inventory is the logo (via the nav
   above), a headline, supporting copy, and one clear CTA — set with generous
   space rather than filled with decoration. Centered composition, since
   there's no longer an asymmetric graphic to balance against. */
.hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--navy);
  text-align: center;
}
.hero__content {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin-inline: auto;
  padding-inline: var(--sp-6);
  padding-block: var(--sp-10);
}
.hero h1 { color: var(--ivory); max-width: none; margin-inline: auto; font-size: 52px; }
.hero__sub { color: var(--ivory); max-width: 480px; margin: var(--sp-5) auto 0; }
.hero .eyebrow { margin-bottom: var(--sp-5); text-align: center; }
.hero__cta { margin-top: var(--sp-7); }

/* Responsive line break: keeps the hero headline to two balanced lines on
   desktop (where the wide hero has room to breathe). Each half is forced
   onto its own line and forbidden from wrapping further, guaranteeing
   exactly two lines rather than leaving it to chance. On narrower viewports
   the halves flow inline again and the browser wraps the headline naturally. */
.hero h1 .hero__line { display: inline; white-space: normal; }
@media (min-width: 960px) {
  .hero h1 .hero__line { display: block; white-space: nowrap; }
}

.scroll-cue {
  position: absolute;
  bottom: var(--sp-6);
  left: 50%;
  width: 1px;
  height: 40px;
  background: rgba(248,244,238,0.6);
  animation: scrollCuePulse 2.5s ease-in-out infinite;
}
@keyframes scrollCuePulse {
  0%, 100% { opacity: 0.35; transform: scaleY(1); }
  50% { opacity: 0.9; transform: scaleY(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; opacity: 0.6; }
}

/* ============ Section 2 — Philosophy ============ */
.philosophy { background: var(--ivory); padding-block: var(--sp-11) var(--sp-9); }
.philosophy__inner { max-width: 720px; margin-inline: auto; text-align: center; }
.philosophy__inner h2 { max-width: none; margin-bottom: var(--sp-6); }
.philosophy__inner .eyebrow { text-align: center; }

/* ============ Section 3 — Buyer / Seller Decision ============ */
/* Background revised to Navy per the color hierarchy update — reintroduces
   Navy earlier in the page rather than four consecutive Ivory sections. */
.decision { padding-block: var(--sp-10); background: var(--navy); }
.decision > .container > .eyebrow { margin-bottom: var(--sp-7); color: var(--gold); }
.decision__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
.decision__tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.decision__tile .media-placeholder { position: absolute; inset: 0; aspect-ratio: auto; border: none; border-radius: 0; transition: transform 500ms ease-out; }
.decision__tile:hover .media-placeholder { transform: scale(1.03); }
.decision__tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,38,66,0.75) 0%, rgba(16,38,66,0.2) 45%, rgba(16,38,66,0) 65%);
  transition: background var(--dur-base) ease;
}
.decision__tile:hover::after { background: linear-gradient(to top, rgba(16,38,66,0.85) 0%, rgba(16,38,66,0.3) 45%, rgba(16,38,66,0) 65%); }
.decision__tile-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: var(--sp-7);
}
.decision__tile-content h3 { color: var(--ivory); margin-bottom: var(--sp-3); }
.decision__tile-content p { color: var(--ivory); margin: 0 0 var(--sp-6); max-width: 380px; }

/* ============ Section intros ============ */
.section-intro { max-width: 640px; margin: 0 auto var(--sp-8); text-align: center; }
.section-intro--left { margin-inline: 0; text-align: left; }

/* ============ Section 4 — Featured listings ============ */
.featured-listings { padding-block: var(--sp-10); background: var(--sand); }
.listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.listing-card { display: block; background: var(--ivory); border-radius: var(--radius-card); overflow: hidden; transition: box-shadow var(--dur-base) ease; }
.listing-card:hover { box-shadow: 0 12px 32px rgba(16,38,66,0.12); }
.listing-card .media-placeholder { aspect-ratio: 4/3; border: none; border-radius: 0; overflow: hidden; }
.listing-card .media-placeholder { transition: transform 500ms ease-out; }
.listing-card:hover .media-placeholder { transform: scale(1.03); }
.listing-card__price { font-family: var(--font-display); font-weight: 400; font-size: 22px; margin: var(--sp-4) var(--sp-4) 0; }
.listing-card__address { font-size: 15px; font-weight: 500; margin: var(--sp-1) var(--sp-4) 0; }
.listing-card__facts { display: flex; gap: var(--sp-4); margin: var(--sp-3) var(--sp-4) var(--sp-4); font-size: 13px; }
.listing-card__facts span { display: inline-flex; align-items: center; gap: var(--sp-1); }

/* ============ Section 5 — What Sets Us Apart ============
   Replaces invented transaction statistics with honest value statements —
   Dream Key is a new brokerage and would rather build trust through candor
   than imply a track record not yet earned. */
.values { background: var(--navy); padding-block: var(--sp-9); }
.values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-7); text-align: center; }
.value__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.005em;
  color: var(--ivory);
  margin: 0 0 var(--sp-3);
}
.value__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ivory);
  opacity: 0.75;
  margin: 0;
  max-width: 220px;
  margin-inline: auto;
}

/* ============ Section 6 — Client stories ============ */
.client-stories { padding-block: var(--sp-10); background: var(--ivory); }
.testimonial--featured {
  max-width: 720px;
  margin: 0 auto var(--sp-8);
  padding: var(--sp-7);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  background: var(--white);
}
.testimonial blockquote { margin: 0; }
.testimonial--featured blockquote p {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.4;
  margin: 0 0 var(--sp-5);
}
.testimonial--featured cite { font-style: normal; font-size: 14px; font-weight: 500; }
.testimonial-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); max-width: 780px; margin-inline: auto; }
.testimonial-row .testimonial blockquote p {
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  margin: 0 0 var(--sp-4);
}
.testimonial-row cite { font-style: normal; font-size: 14px; font-weight: 500; }

/* ============ Section 7 — Closing CTA ============ */
.closing-cta { background: var(--navy); padding-block: var(--sp-11); }
.closing-cta__panel {
  max-width: 640px;
  text-align: center;
  padding: var(--sp-8) var(--sp-8) var(--sp-7);
  background: rgba(248, 244, 238, 0.04);
  border: 1px solid rgba(212, 176, 106, 0.25);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}
.closing-cta h2 { color: var(--ivory); margin-bottom: var(--sp-5); }
.closing-cta .body-large { color: var(--ivory); opacity: 0.85; margin-bottom: var(--sp-7); }

/* ============ Footer ============ */
.site-footer { position: relative; overflow: hidden; background: var(--navy); padding-top: var(--sp-9); }
/* Signature mark — the micro logo held at very low opacity with a faint
   emboss (light edge + dark edge via layered drop-shadows), so it reads as
   a texture in the surface rather than a graphic. One of a small handful of
   intentional appearances across the site, not a repeated brand stamp. */
.footer__watermark {
  position: absolute;
  right: -48px;
  bottom: -64px;
  height: 340px;
  width: auto;
  opacity: 0.05;
  filter: drop-shadow(1px 1px 0 rgba(255,255,255,0.08)) drop-shadow(-1px -1px 1px rgba(0,0,0,0.5));
  pointer-events: none;
  z-index: 0;
}
.footer__grid, .footer__legal { position: relative; z-index: 1; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 3fr; gap: var(--sp-8); padding-bottom: var(--sp-8); }
.logo__img--footer { height: 72px; margin: 0 0 var(--sp-3); }
.footer__tagline { color: var(--ivory); opacity: 0.7; font-size: 14px; margin: 0; }
.footer__grid nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.footer__col { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__col h3 { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin: 0 0 var(--sp-2); }
.footer__col a { color: var(--ivory); font-size: 14px; border-bottom: 1px solid transparent; width: fit-content; transition: border-color var(--dur-fast) ease; }
.footer__col a:hover { border-color: var(--gold); }
.footer__legal { border-top: 1px solid rgba(248,244,238,0.15); padding-block: var(--sp-6); display: flex; justify-content: space-between; gap: var(--sp-6); align-items: center; }
.footer__legal p { font-size: 12px; color: var(--ivory); opacity: 0.6; margin: 0; }

/* Equal Housing Opportunity mark — official HUD icon, recolored to ivory via
   filter (source asset is black-on-transparent) so it reads correctly on
   the navy footer. Kept fully opaque; this is a compliance mark, not a
   decorative one, so it isn't faded like the rest of the footer text. */
.footer__eho-logo {
  height: 30px;
  width: auto;
  vertical-align: middle;
  margin-right: var(--sp-2);
  filter: brightness(0) invert(1);
}

/* ============ Responsive ============ */
@media (max-width: 1024px) {
  :root { --container-pad: 48px; }
  .primary-nav, .header-utility .phone-link { display: none; }
  .mobile-menu-toggle { display: inline-flex; flex-direction: column; gap: 4px; }
  .mobile-menu-toggle span { width: 22px; height: 1.5px; background: currentColor; }

  .decision__grid { grid-template-columns: repeat(2, 1fr); }
  .listing-grid { grid-template-columns: repeat(2, 1fr); }
  .values__grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__grid nav { grid-template-columns: repeat(3, 1fr); }

  h1 { font-size: 48px; }
  h2 { font-size: 34px; }
}

@media (max-width: 640px) {
  :root { --container-pad: 24px; }
  h1 { font-size: 40px; }
  h2 { font-size: 30px; }
  h3 { font-size: 24px; }
  .hero { min-height: 72vh; }
  .hero__content { padding-block: var(--sp-8); }
  .decision__grid, .listing-grid, .values__grid { grid-template-columns: 1fr; }
  .footer__grid nav { grid-template-columns: 1fr; }
  .footer__legal { flex-direction: column; gap: var(--sp-2); }
  .footer__watermark { height: 220px; right: -32px; bottom: -40px; }
  .philosophy, .decision, .featured-listings, .client-stories { padding-block: var(--sp-8); }
  .closing-cta { padding-block: var(--sp-9); }
}

/* ==========================================================================
   Interior-page additions — added when building out pages beyond the
   Homepage (Contact, Privacy Policy, and subsequent interior pages).
   Nothing above this line is touched; the Homepage (Version 1, archived in
   homepage/v1-archive/) renders identically with or without this block. */

/* ============ Page hero (compact, non-photographic) ============
   Used by utility/content pages that don't warrant a full photographic
   hero — Contact and similar. Same Navy field and restrained inventory
   as the homepage hero, just shorter. (Privacy Policy deliberately does
   NOT use this — see .doc-page below — it's meant to feel like a quiet
   utility document, not a branded page.) */
.page-hero {
  background: var(--navy);
  padding-block: 168px var(--sp-8);
  text-align: center;
}
.page-hero .eyebrow { justify-content: center; }
.page-hero h1 { color: var(--ivory); max-width: 720px; margin-inline: auto; font-size: 48px; }
.page-hero p { color: var(--ivory); opacity: 0.8; max-width: 560px; margin: var(--sp-4) auto 0; }

/* ============ Quiet document page (Privacy Policy and similar) ============
   Deliberately understated per creative direction: no hero band, no sticky
   TOC, no CTA — a single reading column presented plainly within the
   design system, reached only from a small footer link. */
.doc-page { padding-block: 152px var(--sp-9); }
.doc-page__col { max-width: 680px; margin-inline: auto; }
.doc-page__eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--driftwood);
  margin: 0 0 var(--sp-3);
}
.doc-page h1 { font-size: 32px; margin-bottom: var(--sp-3); }
.doc-page__updated {
  font-size: 13px;
  color: var(--driftwood);
  margin: 0 0 var(--sp-8);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--sand);
}
.doc-section { margin-bottom: var(--sp-8); scroll-margin-top: 32px; }
.doc-section:last-child { margin-bottom: 0; }
.doc-section h2 { font-size: 20px; margin-bottom: var(--sp-3); }
.doc-section h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy);
  margin: var(--sp-5) 0 var(--sp-2);
}
.doc-section p { margin: 0 0 var(--sp-4); font-size: 15px; }
.doc-section p:last-child { margin-bottom: 0; }
.doc-section ul, .doc-section ol { margin: 0 0 var(--sp-4); padding-left: 1.25em; font-size: 15px; }
.doc-section ul { list-style: disc; }
.doc-section ol { list-style: decimal; }
.doc-section li { margin-bottom: var(--sp-2); }
.doc-section li:last-child { margin-bottom: 0; }
.doc-note { font-size: 14px; font-style: italic; color: var(--driftwood); }
.doc-page__toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: 0 0 var(--sp-8);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--sand);
}
.doc-page__toc a { font-size: 13px; color: var(--navy); opacity: 0.65; border-bottom: 1px solid transparent; }
.doc-page__toc a:hover { opacity: 1; border-color: var(--gold); }

@media (max-width: 640px) {
  .page-hero { padding-block: 140px var(--sp-7); }
  .page-hero h1 { font-size: 34px; }
  .doc-page { padding-block: 128px var(--sp-8); }
}

/* ============ Forms (shared: Contact, Start the Conversation, Home
   Valuation, agent contact modules, etc.) ============ */
.form { display: flex; flex-direction: column; gap: var(--sp-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.form-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-field label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--navy);
}
.form-field input,
.form-field textarea,
.form-field select {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--navy);
  padding: 13px var(--sp-4);
  border: 1px solid var(--sand);
  border-radius: var(--radius-control);
  background: var(--white);
  transition: border-color var(--dur-fast) ease;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus { outline: none; border-color: var(--gold); }
.form-field textarea { min-height: 140px; resize: vertical; font-family: var(--font-body); }
.form-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 15px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.form-hint { font-size: 13px; color: var(--driftwood); margin: 0; }
.form-submit { align-self: flex-start; margin-top: var(--sp-2); }

/* ============ Two-column content layout (Contact and similar) ============ */
.content-layout {
  padding-block: var(--sp-9);
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--sp-9);
  align-items: start;
}
.info-panel {
  background: var(--ivory);
  border: 1px solid var(--sand);
  border-radius: var(--radius-card);
  padding: var(--sp-6);
}
.info-panel h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--driftwood);
  margin: 0 0 var(--sp-3);
}
.info-panel + .info-panel { margin-top: var(--sp-6); }
.info-panel p { margin: 0 0 var(--sp-2); font-size: 15px; }
.info-panel p:last-child { margin-bottom: 0; }
.info-panel a { border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) ease; }
.info-panel a:hover { border-color: var(--gold); }

@media (max-width: 1024px) {
  .content-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
}

.contact-reassurance {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--sand);
}
.contact-reassurance p { color: var(--driftwood); font-size: 13px; margin: 0; }

/* ==========================================================================
   Shared hub-page components — About, Agents, Buyers, Sellers, Communities,
   Client Stories, and their sub-pages all draw from this shared set rather
   than each inventing one-off section styles. Every value here traces back
   to existing tokens (spacing scale, color variables, radius, motion). */

/* ============ Generic section backgrounds (vertical rhythm only) ============ */
.section--ivory { background: var(--ivory); padding-block: var(--sp-10); }
.section--navy { background: var(--navy); padding-block: var(--sp-10); }
.section--sand { background: var(--sand); padding-block: var(--sp-10); }

/* ============ Narrative / long-form reading column ============ */
.narrative-col { max-width: 720px; margin-inline: auto; }
.narrative-col p { margin: 0 0 var(--sp-5); }
.narrative-col p:last-child { margin-bottom: 0; }

/* ============ Agent cards (roster grid) + profile layout ============ */
.agent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); }
.agent-card { display: block; text-align: center; }
.agent-card .media-placeholder {
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  max-width: 220px;
  margin-inline: auto;
}
.agent-card h3 { margin-top: var(--sp-5); font-size: 21px; }
.agent-card__role { font-size: 13px; color: var(--driftwood); margin: var(--sp-1) 0 var(--sp-3); }
.agent-card p.body-small { margin: 0 auto; max-width: 260px; }

.agent-profile { display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-8); align-items: start; }
.agent-profile .media-placeholder { border-radius: 50%; aspect-ratio: 1; overflow: hidden; }
.agent-profile__name { margin-top: var(--sp-5); }
.agent-profile__role { color: var(--driftwood); margin: var(--sp-1) 0 0; }

@media (max-width: 1024px) {
  .agent-grid { grid-template-columns: repeat(2, 1fr); }
  .agent-profile { grid-template-columns: 1fr; }
  .agent-profile .media-placeholder { max-width: 220px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .agent-grid { grid-template-columns: 1fr; }
}

/* ============ Path selector cards (Buyers hub 5-path grid, etc.) ============ */
.path-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-5); }
.path-card {
  display: block;
  padding: var(--sp-6);
  background: var(--ivory);
  border: 1px solid var(--sand);
  border-radius: var(--radius-card);
  transition: box-shadow var(--dur-base) ease, border-color var(--dur-base) ease;
}
.path-card:hover { box-shadow: 0 12px 32px rgba(16,38,66,0.10); border-color: var(--gold); }
.path-card h3 { font-size: 20px; margin-bottom: var(--sp-2); }
.path-card p { font-size: 14px; margin: 0; color: var(--navy); opacity: 0.8; }

/* ============ Numbered process steps (buying/selling process overviews) ============ */
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.process-step { text-align: center; }
.process-step__num { font-family: var(--font-display); font-size: 32px; color: var(--gold); margin-bottom: var(--sp-2); }
.process-step h3 { font-size: 17px; margin-bottom: var(--sp-2); }
.process-step p { font-size: 14px; color: var(--navy); opacity: 0.8; margin: 0; }
@media (max-width: 1024px) { .process-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .process-steps { grid-template-columns: 1fr; } }

/* ============ Regional / neighborhood cards (Communities hub) ============ */
.region-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.region-card { position: relative; display: block; aspect-ratio: 16/10; border-radius: var(--radius-card); overflow: hidden; }
.region-card .media-placeholder { position: absolute; inset: 0; aspect-ratio: auto; border: none; border-radius: 0; transition: transform 500ms ease-out; }
.region-card:hover .media-placeholder { transform: scale(1.03); }
.region-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,38,66,0.75) 0%, rgba(16,38,66,0.15) 50%, rgba(16,38,66,0) 70%);
}
.region-card__content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: var(--sp-6); }
.region-card__content h3 { color: var(--ivory); margin-bottom: var(--sp-2); }
.region-card__content p { color: var(--ivory); opacity: 0.85; font-size: 14px; margin: 0; }
@media (max-width: 640px) { .region-grid { grid-template-columns: 1fr; } }

/* ============ Standalone testimonial cards (Client Stories grid) ============ */
.testimonial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
@media (max-width: 768px) { .testimonial-grid { grid-template-columns: 1fr; } }
.testimonial-card { padding: var(--sp-6); background: var(--white); border: 1px solid var(--sand); border-radius: var(--radius-card); }
.testimonial-card blockquote { margin: 0 0 var(--sp-4); font-family: var(--font-quote); font-style: italic; font-size: 19px; line-height: 1.5; }
.testimonial-card cite { font-style: normal; font-size: 14px; font-weight: 500; color: var(--driftwood); }
.testimonial-filter { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-7); }
.testimonial-filter button {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--sand);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  background: var(--ivory);
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.testimonial-filter button:hover, .testimonial-filter button.is-active { border-color: var(--gold); background: var(--white); }