:root {
  --navy: #1e3348;
  --navy-deep: #132230;
  --navy-soft: #2a4258;
  --sage: #6a7178;
  --sage-deep: #4a5258;
  --ink: #2c3340;
  --muted: #5a6270;
  --cream: #ffffff;
  --cream-dark: #f3f3f3;
  --paper: #ffffff;
  --white: #ffffff;
  --line: rgba(30, 51, 72, 0.12);
  --shadow: 0 18px 50px rgba(19, 34, 48, 0.08);
  --max: 1180px;
  --header-h: 96px;
  --cluster: #8a5a22;
  --font-sans: "Figtree", sans-serif;
  --font-serif: "Fraunces", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html { scroll-behavior: smooth; }
#chat, #moving, #saturday, #process, #process-steps, #request, #subscribe, #library { scroll-margin-top: calc(var(--header-h) + 1.25rem); }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.wrap {
  width: min(var(--max), calc(100% - 2.5rem));
  margin-inline: auto;
}

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
}

h1, h2, h3, .serif {
  font-family: var(--font-serif);
  font-weight: 500;
  font-optical-sizing: auto;
}

.script {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--sage);
}

/* ——— Header ——— */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  width: 100%;
  padding: 0 clamp(1.75rem, 3.5vw, 2.75rem);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.85rem;
  line-height: normal;
  overflow: visible;
}
.brand-horse {
  display: block;
  height: 48px;
  width: auto;
  flex-shrink: 0;
  transform: scaleX(-1);
}
.brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
}
.brand-name {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.14rem;
  width: max-content;
  color: var(--navy);
  line-height: 1;
}
.brand-name em {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 2.2rem;
  letter-spacing: 0.01em;
  line-height: 0.9;
  margin-left: -0.05em;
  font-synthesis: none;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 144;
}
.brand-name .brand-last {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: "Figtree", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}
.brand-floor {
  display: block;
  height: 1px;
  width: 100%;
  margin-top: 0.4rem;
  background: var(--sage);
  opacity: 0.75;
}
.brand .brand-floor {
  display: none;
}
.brand-rule {
  align-self: stretch;
  width: 1px;
  min-height: 36px;
  background: var(--navy);
  opacity: 0.2;
  flex-shrink: 0;
}
.brand-mhm {
  display: block;
  height: 22px;
  width: auto;
  max-width: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.45rem;
}

.nav a {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}

.nav a:hover { color: var(--sage-deep); }
.nav a.is-active { color: var(--sage-deep); }

.nav a[data-link="contact"] {
  padding-left: 1.25rem;
  margin-left: 0.15rem;
  border-left: 1px solid var(--line);
}

.nav-toggle {
  display: none;
  border: 0;
  background: transparent;
  width: 42px;
  height: 42px;
  position: relative;
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--navy);
}
.nav-toggle span { top: 20px; }
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after { top: 8px; }

/* ——— Buttons ——— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.35rem;
  border: 1px solid transparent;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.2s ease;
}

.btn-gold { background: var(--navy); color: #fff; }
.btn-gold:hover { background: var(--navy-soft); }

.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-soft); }

.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.45);
}
.btn-ghost:hover { background: #fff; color: var(--navy); }

.btn-line {
  background: transparent;
  color: var(--navy);
  border-color: rgba(30, 51, 72, 0.28);
}
.btn-line:hover { border-color: var(--navy); background: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ——— Hero ——— */
.home-opening {
  display: grid;
  height: calc(100dvh - var(--header-h) - 1px);
  min-height: 32rem;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(28rem, 42%) minmax(0, 1fr);
  min-height: 0;
  color: var(--navy);
  overflow: hidden;
  background: var(--paper);
}

.hero-media {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}

.hero-media img,
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.hero-media img.is-active,
.hero-media video.is-active {
  opacity: 1;
  z-index: 1;
}

.hero-dots {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 1.15rem;
  display: flex;
  justify-content: center;
  gap: 0.42rem;
}

.hero-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 0 0 1px rgba(19, 34, 48, 0.12);
  cursor: pointer;
}

.hero-dots button.is-active {
  background: #fff;
}

.hero-stage {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 2.6rem 1.85rem 2.9rem;
}

.hero-copy {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  transform: translateY(-4%);
  padding: 2.55rem 2.15rem 2.65rem;
  text-align: center;
}

.hero-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--navy);
}

.hero-frame::before,
.hero-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hero-frame::before {
  inset: 0;
  border: 1px solid rgba(30, 51, 72, 0.34);
}

.hero-frame::after {
  inset: 8px;
  border: 1px solid rgba(125, 139, 116, 0.42);
}

.hero-frame-corner {
  position: absolute;
  width: 3.75rem;
  height: 3.75rem;
  background: url("../assets/hero-frame-corner.svg") no-repeat center / contain;
  z-index: 1;
}

.hero-frame-corner.is-tl { top: 0; left: 0; }
.hero-frame-corner.is-tr { top: 0; right: 0; transform: scaleX(-1); }
.hero-frame-corner.is-bl { bottom: 0; left: 0; transform: scaleY(-1); }
.hero-frame-corner.is-br { bottom: 0; right: 0; transform: scale(-1); }

.hero-frame-crest {
  position: absolute;
  top: -1px;
  left: 50%;
  z-index: 1;
  width: 5.6rem;
  height: 1rem;
  transform: translateX(-50%);
  background: var(--paper) url("../assets/hero-frame-crest.svg") no-repeat center / contain;
}

.hero-kicker {
  display: block;
  margin: 0 0 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
}

.hero h1 {
  margin: 0;
  font-size: clamp(3.4rem, 7vw, 5.4rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
}

.hero-tick {
  display: block;
  width: 2.35rem;
  height: 1px;
  margin: 1.45rem auto 1.55rem;
  background: var(--sage);
  opacity: 0.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}

.hero-actions .btn {
  min-width: 7.25rem;
}

.hero-contact {
  display: inline-block;
  margin-top: 1.05rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-contact:hover,
.hero-contact:focus-visible {
  color: var(--navy);
}

.hero .eyebrow {
  color: var(--sage);
}

.hero h1 em {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 0.72em;
  color: var(--sage);
  margin-top: 0.12em;
  letter-spacing: -0.02em;
}

.hero p {
  max-width: 34rem;
  margin: 0.9rem auto 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.5;
}

.pin-deck {
  justify-self: end;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
}

.pin-deck.is-light {
  justify-self: stretch;
  max-width: 380px;
  margin-left: auto;
}

.pin-deck.is-light .pin-photo {
  border-color: var(--line);
}

.pin-deck.is-light .pin.is-front .pin-photo {
  box-shadow: var(--shadow);
}

.pin-deck.is-light .pin-caption { color: var(--navy); }

.pin-deck.is-light .pin-arrow {
  border-color: rgba(30, 51, 72, 0.28);
  color: var(--navy);
}

.pin-deck.is-light .pin-arrow:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: #fff;
}

.pin-board {
  position: relative;
  width: 100%;
  padding-left: 2.1rem;
}

.pin-stack {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
}

.pin {
  position: absolute;
  inset: 0;
  display: block;
  color: #fff;
  transform-origin: center center;
  transition: transform 0.4s ease;
  pointer-events: none;
}

.pin.is-front { pointer-events: auto; }

.pin-photo {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #132230;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
}

.pin-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pin-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(19, 34, 48, 0.72);
  transition: opacity 0.4s ease;
}

.pin.is-front {
  z-index: 3;
  transform: translate(0, 0) scale(1);
}

.pin.is-front .pin-photo {
  box-shadow: 0 22px 44px rgba(8, 16, 24, 0.55);
}

.pin.is-front .pin-photo::after { opacity: 0; }

.pin.is-mid {
  z-index: 2;
  transform: translate(-18px, 10px) scale(0.95);
}

.pin.is-back {
  z-index: 1;
  transform: translate(-34px, 20px) scale(0.9);
}

.pin.is-front:hover .pin-photo { border-color: var(--sage); }

.pin-ig {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.65rem;
  padding: 0.28rem 0.58rem 0.28rem 0.3rem;
  background: rgba(255,255,255,0.96);
  color: var(--navy);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
}

.pin-ig svg {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

.pin[data-title="A little about me"] img { object-position: 50% 42%; }
.pin[data-title="272 Orion Court"] img { object-position: 50% 55%; }
.pin[data-title="A Front Range Fourth"] img { object-position: 50% 40%; }

.pin-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  margin-top: 1.15rem;
  padding-left: 2.1rem;
  box-sizing: border-box;
  position: relative;
  z-index: 6;
}

.pin-caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18rem;
  min-width: 0;
  color: #fff;
}

.pin-caption b {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.2;
}

.pin-caption span {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
}

.pin-pager {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.pin-arrow {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.38);
  background: transparent;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 7px;
}

.pin-arrow:hover {
  border-color: var(--sage);
  color: var(--sage);
  background: rgba(19, 34, 48, 0.45);
}

.pin-slides {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.pin-slides[hidden] { display: none; }

.pin-slide-arrow {
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--navy);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}

.pin-slide-arrow.is-prev { left: 0.55rem; }
.pin-slide-arrow.is-next { right: 0.55rem; }

.pin-slide-arrow:hover {
  background: #fff;
}

.pin-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.7rem;
  display: flex;
  justify-content: center;
  gap: 0.32rem;
  pointer-events: auto;
}

.pin-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
}

.pin-dots button.is-active {
  background: #fff;
  transform: scale(1.15);
}

/* ——— Sections ——— */
.section { padding: 5.5rem 0; }
.section-tight { padding: 4rem 0; }
.section-cream { background: var(--cream); }
.section-paper { background: var(--paper); }
.section-navy { background: var(--navy); color: #fff; }
.section-sage { background: #e8ebe4; }

.page-hero .eyebrow,
.section-navy .eyebrow {
  color: rgba(255,255,255,0.72);
}

.section-navy .btn-gold {
  background: var(--paper);
  color: var(--navy);
}

.section-navy .btn-gold:hover {
  background: #fff;
  color: var(--navy);
}

.section-head {
  max-width: 38rem;
  margin-bottom: 2.6rem;
}

.section-head h2,
.neighborhood-head .section-head h1 {
  margin: 0.45rem 0 0.8rem;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.08;
  color: var(--navy);
}

.section-navy .section-head h2,
.section-navy .section-head p { color: #fff; }
.section-navy .section-head p { color: rgba(255,255,255,0.78); }

.lede { color: var(--muted); font-size: 1.02rem; }

.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 4rem;
  align-items: center;
}

.split.reverse { grid-template-columns: 0.95fr 1.05fr; }
.split.reverse .split-copy { order: 2; }

.split.is-about {
  align-items: start;
  gap: 3.4rem;
}

.about-portrait {
  position: sticky;
  top: calc(var(--header-h) + 1.4rem);
}

.about-bio p {
  color: var(--ink);
  font-size: 1.02rem;
  margin: 0 0 1.15rem;
}

.about-bio .lede {
  color: var(--muted);
  font-size: 1.06rem;
}

.about-bio p:last-of-type {
  margin-bottom: 0;
}

.about-seal {
  display: block;
  width: 118px;
  height: auto;
  margin: 1.6rem 0 0;
}

.split-photo {
  position: relative;
  overflow: hidden;
}

.split-photo img {
  width: 100%;
  height: 560px;
  object-fit: cover;
}

.split-photo.portrait img {
  height: 640px;
  object-fit: cover;
  object-position: 50% 18%;
  background: #fff;
}

.split-photo.portrait.is-home-studio img {
  object-position: 50% 22%;
}

body[data-page="about"] .split-photo.portrait.is-seated {
  overflow: visible;
}

body[data-page="about"] .split-photo.portrait.is-seated img {
  height: auto;
  object-fit: contain;
  object-position: center top;
  background: transparent;
  display: block;
}

body[data-page="about"] .photo-mat-caption {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 0.2rem 0.95rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--walnut);
}

body[data-page="about"] .photo-mat-caption::before {
  content: "";
  width: 1.15rem;
  height: 1px;
  background: var(--sage);
  opacity: 0.85;
  flex-shrink: 0;
}

body[data-page="about"] .about-archive {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 1.4rem 1.8rem;
  align-items: end;
  margin-top: 3.4rem;
}

body[data-page="about"] .about-archive figure {
  margin: 0;
}

body[data-page="about"] .about-archive img {
  width: 100%;
  height: auto;
  display: block;
  background: #f3f1ec;
}

.photo-frame {
  box-shadow: var(--shadow);
}

.photo-caption {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  background: rgba(255, 255, 255, 0.94);
  color: var(--navy);
  padding: 0.55rem 0.8rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-page="sell"] .split.is-sell {
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-areas: "copy form";
  align-items: start;
  gap: 2.4rem 3.2rem;
}

body[data-page="sell"] .sell-copy { grid-area: copy; }

body[data-page="sell"] .split.is-sell > .path {
  grid-area: form;
  min-height: 0;
}

/* ——— Credentials ——— */
.cred-bar {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.35rem 0;
}

.cred-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.6rem 2.6rem;
}

.cred-logos.is-start {
  justify-content: flex-start;
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.cred-logo {
  display: block;
  height: 86px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
}

.cred-logo.is-wide {
  height: 32px;
  max-width: 220px;
}

.cred-note {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  margin-top: 1.15rem;
  max-width: 38rem;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--sage-deep);
}

.cred-note img {
  height: 58px;
  width: auto;
  flex-shrink: 0;
}

.agent-mini .creds-inline {
  margin-top: 0.45rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}

/* ——— Cards ——— */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
}

.card-photo {
  height: 240px;
  overflow: hidden;
}

.card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.card:hover .card-photo img { transform: scale(1.05); }

.card-body { padding: 1.35rem 1.4rem 1.5rem; }
.card-body h3 {
  font-size: 1.45rem;
  color: var(--navy);
  margin: 0.25rem 0 0.5rem;
}
.card-body p { color: var(--muted); font-size: 0.95rem; }

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.9rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage-deep);
}

.price {
  margin-top: 0.85rem;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--navy);
}

.pill {
  display: inline-block;
  padding: 0.22rem 0.5rem;
  background: var(--cream-dark);
  color: var(--navy);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pill-gold { background: var(--navy); color: #fff; }
.pill-sage { background: var(--sage); color: #fff; }

/* ——— Paths / services ——— */
.path {
  padding: 2rem 1.8rem;
  background: #fff;
  border: 1px solid var(--line);
  min-height: 100%;
}

.path h3 {
  font-size: 2rem;
  color: var(--navy);
  margin: 0.4rem 0 0.7rem;
}

.path p { color: var(--muted); margin-bottom: 1.2rem; }

.path-steps {
  display: flex;
  flex-direction: column;
}

.path-steps ol {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.path-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 1.8rem 1fr;
  gap: 0.55rem;
  align-items: baseline;
  padding: 0.65rem 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.98rem;
}

.path-steps li::before {
  content: counter(step, decimal-leading-zero);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--sage-deep);
}

.path-steps .path-more {
  margin: auto 0 0;
  padding-top: 1.4rem;
}

.path-steps .path-more a {
  color: var(--navy);
  font-size: 0.92rem;
  border-bottom: 1px solid var(--sage);
}

/* ——— Lifestyle mosaic ——— */
.mosaic {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-template-rows: 280px 280px;
  gap: 0.85rem;
}

.mosaic-item {
  position: relative;
  overflow: hidden;
  color: #fff;
}

.mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mosaic-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(19,34,48,0.72));
}

.mosaic-item.wide { grid-row: 1 / span 2; }

.mosaic-item figcaption {
  position: absolute;
  z-index: 2;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1.1rem;
}

.mosaic-item h3 {
  font-size: 1.55rem;
  line-height: 1.1;
}

.mosaic-item p {
  margin-top: 0.25rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.82);
}

/* ——— Quotes ——— */
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }

.quote {
  background: #fff;
  padding: 1.7rem 1.6rem;
  border-left: 2px solid var(--sage);
}

.quote p {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--navy);
}

.quote cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
}

/* Testimonials page: letters, not review cards */
.testimonials-intro {
  max-width: 34rem;
  margin-bottom: 4.8rem;
}

.testimonials-intro h1 {
  color: var(--navy);
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  line-height: 1.04;
  margin: 0.35rem 0 1rem;
}

.testimonials-intro .lede {
  margin: 0;
}

.pull-quotes {
  display: grid;
  gap: 4.6rem;
  max-width: 40rem;
}

.pull-quote {
  background: none;
  border: 0;
  padding: 0;
}

.pull-quote p {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.12rem, 1.7vw, 1.28rem);
  line-height: 1.62;
  color: var(--navy);
}

.pull-quote cite {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.35rem;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.letter cite {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.95rem;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.pull-quote cite::after,
.letter cite::after {
  content: "★★★★★";
  letter-spacing: 0.14em;
  font-size: 0.62rem;
  font-weight: 400;
  line-height: 1;
  color: var(--navy);
  opacity: 0.42;
  text-transform: none;
}

.testimonials-rest {
  max-width: 38rem;
  margin-top: 5.2rem;
  padding-top: 0.4rem;
}

.letter {
  background: none;
  border: 0;
  padding: 2.15rem 0;
  border-top: 1px solid var(--line);
}

.letter p {
  font-size: 0.95rem;
  line-height: 1.72;
  color: var(--ink);
}


/* ——— Neighborhoods grid (3×2 flush gallery on solid white) ——— */
.wrap-wide {
  width: min(1280px, calc(100% - 2.4rem));
  margin-inline: auto;
}
.neighborhood-section {
  padding-block: clamp(2.65rem, 4.4vw, 3.9rem) clamp(2rem, 3.4vw, 2.85rem);
  padding-inline: 0;
  width: 100%;
  background: #fff;
}
.neighborhood-head .section-head {
  margin-bottom: clamp(1.4rem, 2.6vw, 2rem);
}
.neighborhood-wrap {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 0 clamp(0.75rem, 1.7vw, 1.25rem);
  box-sizing: border-box;
}
.neighborhood-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Tiles are flush: no gaps on either axis. */
  gap: 0;
  row-gap: 0;
  column-gap: 0;
  width: 100%;
}
.neighborhood-wrap .photo-credit {
  margin: 0.85rem 0 0;
  padding: 0;
  text-align: right;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: 0.7;
  background: none;
}
.neighborhood-tile.area {
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  /* Shared 4:3 wells: every town fills the cell equally via cover. */
  aspect-ratio: 4 / 3;
  background: #fff;
  overflow: hidden;
  border: 0;
  color: #fff;
  text-decoration: none;
}
.neighborhood-tile.area img {
  object-fit: cover;
  object-position: center center;
  transition: transform 0.7s ease;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .neighborhood-tile.area:hover img {
    transform: scale(1.03);
  }
}
.neighborhood-tile.area::after {
  /* Resting state: solid veil keeps labels readable without a gradient. */
  background: rgba(0, 0, 0, 0.34);
  opacity: 1;
  transition: opacity 0.5s ease;
}
/* Hover-only gradient veil (top clear → bottom dark). Gradients cannot animate,
   so this overlay sits at opacity 0 and fades in while the solid veil fades out. */
.neighborhood-tile.area::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.68) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
@media (hover: hover) and (pointer: fine) {
  .neighborhood-tile.area:hover::after {
    opacity: 0;
  }
  .neighborhood-tile.area:hover::before {
    opacity: 1;
  }
}
.neighborhood-tile .area-body {
  min-height: 0;
  height: 100%;
  padding: 1.05rem 1.2rem 1.25rem;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
}
.neighborhood-tile h3 {
  /* Match site caption / eyebrow language (Figtree, tracked caps) */
  font-family: var(--font-sans);
  font-size: clamp(0.74rem, 1.15vw, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
  text-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  line-height: 1.2;
}
.neighborhood-tile h3::before {
  content: "";
  width: 1.15rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.75);
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .neighborhood-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .neighborhood-grid {
    grid-template-columns: 1fr;
  }
  .neighborhood-section {
    padding-block: 2.45rem 1.65rem;
  }
  .neighborhood-wrap {
    padding: 0 0.6rem;
  }
  .neighborhood-tile.area {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .neighborhood-tile .area-body {
    padding: 1rem 1.05rem 1.1rem;
  }
}

/* ——— Areas ——— */
.area {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  color: #fff;
}

.area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.area::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19,34,48,0.1), rgba(19,34,48,0.78));
}

.area-body {
  position: relative;
  z-index: 2;
  padding: 1.5rem;
  height: 100%;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.area h3 { font-size: 1.8rem; }
.area p { font-size: 0.88rem; color: rgba(255,255,255,0.84); }

/* ——— Forms ——— */
.form {
  display: grid;
  gap: 0.9rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}

input, select, textarea {
  width: 100%;
  border: 1px solid rgba(30, 51, 72, 0.18);
  background: #fff;
  padding: 0.85rem 0.9rem;
  color: var(--ink);
}

textarea { min-height: 140px; resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(30, 51, 72, 0.28);
  border-color: var(--navy);
}

.form-note {
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

.form-success {
  display: none;
  background: #fff;
  border: 1px solid var(--line);
  padding: 2rem 1.6rem;
}

.form-success.is-visible { display: block; }
.form.is-hidden { display: none; }

/* ——— Ways to reach out ——— */
.reach-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
}

.reach-grid.is-three {
  grid-template-columns: repeat(3, 1fr);
}

.reach-grid.is-two {
  grid-template-columns: 1fr 1fr;
}

.reach-card {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 1.15rem 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy);
  min-width: 0;
  min-height: 100%;
}

.reach-card:hover {
  border-color: var(--navy);
  background: var(--paper);
}

.reach-card small {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}

.reach-card b {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.reach-card span {
  font-size: 0.82rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.reach-card.is-hire {
  flex-direction: row;
  align-items: center;
  gap: 0;
}

.reach-card.is-hire .hire-num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-right: 1.05rem;
  margin-right: 1.05rem;
  border-right: 1px solid color-mix(in srgb, var(--cluster) 38%, transparent);
  font-family: var(--font-serif);
  font-size: 5rem;
  font-weight: 500;
  font-style: italic;
  font-synthesis: none;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--cluster);
}

.reach-card.is-hire .hire-copy {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
  font-size: inherit;
  color: inherit;
}

.reach-card.is-hire .hire-word {
  font-family: var(--font-serif);
  font-size: 1.22rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1.15;
  color: var(--navy);
}

.offer-stack { display: grid; gap: 1.1rem; }

.offer {
  display: grid;
  grid-template-columns: 220px 1fr;
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
}

.offer.reverse { grid-template-columns: 1fr 220px; }
.offer.reverse .offer-photo { order: 2; }

.offer-photo {
  min-height: 200px;
  overflow: hidden;
}
.offer-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offer-eight {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  background: var(--navy);
  color: #fff;
}

.offer-eight::before {
  content: "";
  position: absolute;
  inset: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.38);
  pointer-events: none;
}

.offer-eight-num {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(6.5rem, 18vw, 8.25rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
}

.offer-copy {
  padding: 1.55rem 1.7rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.offer-copy h3 {
  font-size: 1.7rem;
  color: var(--navy);
  margin: 0.2rem 0 0.45rem;
}

.offer-copy p {
  color: var(--muted);
  margin-bottom: 1.05rem;
}

.intent-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.intent-choice {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--line);
  background: #fff;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
}

.intent-choice input {
  width: auto;
  accent-color: var(--navy);
}

.questions { display: grid; gap: 0; }

.question {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 0.9rem;
  padding: 1.05rem 0;
  border-top: 1px solid var(--line);
}

.question:last-child { border-bottom: 1px solid var(--line); }

.question-num {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--sage);
}

.question p { color: var(--navy); font-size: 1.02rem; }

/* ——— Page hero ——— */
.page-hero {
  position: relative;
  min-height: 420px;
  display: grid;
  align-items: end;
  color: #fff;
  overflow: hidden;
}

.page-hero-media {
  position: absolute;
  inset: 0;
}

.page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

body[data-page="blog"] .page-hero-media img {
  object-position: 50% 28%;
}

body[data-page="about"] .page-hero-media img {
  /* Boulder aerial: keep blue sky + Flatirons in frame */
  object-position: 50% 12%;
}
@media (max-width: 700px) {
  body[data-page="about"] .page-hero-media img { object-position: 42% 0%; }
}
/* No blur on About so the mountains stay crisp; gradient stays for text contrast */
body[data-page="about"] .page-hero-media::after {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(180deg, rgba(19,34,48,0) 0%, rgba(19,34,48,0.1) 45%, rgba(19,34,48,0.68) 100%);
}

body[data-page="listings"] .page-hero-media img {
  object-position: 50% 100%;
}

/* Neighborhoods: half Buy/Sell hero height (420 → 210). Full uncropped Flatirons —
   no object-fit:cover. scale-down + width:100% / height:auto + top-justify.
   Image is always full hero width (JS keeps parallax scale at 1 here — no side crop); JS parallax is
   relative to scroll 0 (translateY ≥ 0, clamped so margin-top + translateY ≤ 0) — no gap under the nav. */
body[data-page="neighborhoods"] .page-hero {
  min-height: 210px;
  background: var(--navy-deep);
}
body[data-page="neighborhoods"] .page-hero-media {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
body[data-page="neighborhoods"] .page-hero-media img {
  object-fit: scale-down;
  object-position: center top;
  transform-origin: 50% 0%;
  /* Keep the uncropped, top-justified image 150px higher in the 210px hero. */
  /* Never let the shift expose the hero below the image on narrow screens:
     image height = 74.95vw (1920x1439), banner = 210px. */
  margin-top: max(-150px, calc(210px - 74.95vw));
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
}
/* Solid image darken keeps the title readable without a fade band. */
body[data-page="neighborhoods"] .page-hero-media::after {
  background: rgba(19, 34, 48, 0.46);
  /* Neighborhoods stays unblurred (explicit request) — overrides the shared 6px blur below. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-page="neighborhoods"] .page-hero-copy {
  margin-bottom: 1.1rem;
}
body[data-page="neighborhoods"] .page-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
}
/* Gallery → “How we choose” spacing */
body[data-page="neighborhoods"] .section-cream {
  padding-block: clamp(3.4rem, 5.8vw, 4.6rem);
}

.page-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19,34,48,0.2), rgba(19,34,48,0.72));
  /* Shared blur: every page hero matches Buy/Sell (Neighborhoods opts out above). */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.page-hero-copy {
  position: relative;
  z-index: 2;
  width: min(var(--max), calc(100% - 2.5rem));
  margin: 0 auto 3rem;
}

.page-hero h1 {
  margin-top: 0.4rem;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 0.98;
}

/* ——— Steps ——— */
.steps { display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1.2rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
}

.step:last-child { border-bottom: 1px solid var(--line); }

.step-num {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--sage);
}

.step h3 { color: var(--navy); font-size: 1.4rem; margin-bottom: 0.3rem; }
.step p { color: var(--muted); }

.process-section {
  background: var(--cream);
  padding-bottom: 5.5rem;
}

.process-banner {
  position: relative;
  min-height: 320px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

.process-banner-media {
  position: absolute;
  inset: 0;
}

.process-banner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.process-banner-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19,34,48,0.28), rgba(19,34,48,0.62));
}

body[data-page="sell"] .process-banner-media::after {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.process-banner-copy {
  position: relative;
  z-index: 2;
  padding: 3.5rem 1.5rem;
}

.process-banner-copy .eyebrow { color: rgba(255,255,255,0.78); }
.process-banner-copy h2 {
  margin-top: 0.45rem;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.05;
  color: #fff;
}

.process-feature-title {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 3.2rem 1.5rem;
  background: var(--navy);
  color: #fff;
}

.process-feature-title .eyebrow { color: rgba(255,255,255,0.72); }
.process-feature-title h2 {
  margin-top: 0.55rem;
  font-size: clamp(2.1rem, 3.6vw, 3.2rem);
  line-height: 1.08;
  color: #fff;
}

.process-body { padding-top: 2.4rem; }

.process-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2.2rem;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
}

.process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.7rem 1.55rem 1.75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 12px 34px rgba(19, 34, 48, 0.05);
}

.process-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--sage);
}

.process-num {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 3.4vw, 3.25rem);
  font-weight: 500;
  line-height: 1;
  color: var(--sage);
}

.process-step h3 {
  margin: 0.45rem 0 0.7rem;
  font-family: var(--font-serif);
  font-size: 1.42rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
}

.process-step p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

.process-cta {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.88rem;
}

.process-cta a {
  color: var(--navy);
  border-bottom: 1px solid var(--sage);
}

/* ——— Stats ——— */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.stat {
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--sage);
}

.stat b {
  display: block;
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--navy);
  font-weight: 600;
}

.stat span {
  font-size: 0.78rem;
  color: var(--muted);
}

.section-navy .stat b { color: #fff; }
.section-navy .stat span { color: rgba(255,255,255,0.7); }

/* ——— Footer ——— */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.78);
  padding: 3.5rem 0 1.6rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand {
  color: #fff;
  line-height: 1;
}
.footer-lockup {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.footer-brand .brand-horse {
  height: 42px;
  filter: brightness(0) invert(1);
}
.footer-brand .brand-name {
  color: #fff;
}
.footer-brand .brand-name em { font-size: 1.9rem; }
.footer-brand .brand-name .brand-last { font-size: 0.62rem; }
.footer-brand .brand-floor {
  display: none;
}

.footer-brand small {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
}

.site-footer h4 {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.8rem;
}

.site-footer a:hover { color: #fff; }

.footer-list { display: grid; gap: 0.4rem; font-size: 0.92rem; }

.footer-legal {
  padding-top: 1.3rem;
  font-size: 0.72rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.5);
}

.agent-mini {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1.2rem;
}

.agent-mini img {
  width: 72px;
  height: 86px;
  object-fit: cover;
  object-position: 50% 22%;
  background: #fff;
}

/* ——— Listing feature ——— */
.listing-feature {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  background: #fff;
  border: 1px solid var(--line);
}

.listing-feature img,
.listing-feature .parallax-clip img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  display: block;
}

.listing-feature .parallax-clip {
  overflow: hidden;
  min-height: 420px;
  height: 100%;
}

.listing-feature .photo-mat .parallax-clip {
  min-height: 0;
}

.listing-feature-copy { padding: 2.2rem 2rem; }

.market-buyer {
  margin-top: 2.8rem;
}

.market-buyer h3 {
  font-size: 2rem;
  color: var(--navy);
  margin: 0.2rem 0 0.35rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

body[data-page="listings"] .gallery-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.7rem;
}

body[data-page="listings"] .gallery-grid .card-photo {
  height: 380px;
}

body[data-page="listings"] .gallery-grid .card-body h3 {
  font-size: 1.38rem;
}

/* ——— Blog ——— */
.blog-feature {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  background: #fff;
  border: 1px solid var(--line);
  color: inherit;
}

.blog-feature-photo {
  min-height: 420px;
  overflow: hidden;
}

.blog-feature-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.blog-feature:hover .blog-feature-photo img { transform: scale(1.04); }

.blog-feature-copy { padding: 2.2rem 2rem; }

.blog-feature-copy h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--navy);
  margin: 0.7rem 0 0.7rem;
  line-height: 1.15;
}

.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  color: inherit;
}

.blog-card .card-photo { height: 220px; }

.blog-card .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card .card-body h3 {
  font-size: 1.35rem;
  line-height: 1.25;
}

.blog-card .card-body .lede { flex: 1; }

.blog-month {
  margin: 2.8rem 0 1.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
}

.blog-archive {
  margin-top: 2.6rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--line);
}

.blog-more {
  margin-top: 1.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
}

.blog-card:hover .blog-more,
.blog-feature:hover .blog-more { color: var(--navy); }

.blog-article {
  max-width: 44rem;
  margin-inline: auto;
  overflow-x: auto;
}

.blog-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-bottom: 1.6rem;
}

.blog-article .lede {
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 1.8rem;
}

.blog-article h2 {
  font-size: clamp(1.55rem, 3vw, 1.9rem);
  color: var(--navy);
  margin: 2.4rem 0 0.85rem;
  line-height: 1.2;
}

.blog-article h3 {
  font-size: 1.2rem;
  color: var(--navy);
  margin: 1.8rem 0 0.6rem;
}

.blog-article p {
  color: var(--ink);
  font-size: 1.04rem;
  margin-bottom: 1.1rem;
}

.blog-article ul,
.blog-article ol {
  margin: 0 0 1.3rem 1.2rem;
  color: var(--ink);
}

.blog-article li { margin-bottom: 0.45rem; }

.blog-article a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.blog-article a:hover { color: var(--sage-deep); }

.blog-article strong { color: var(--navy); }

.blog-article hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.2rem 0;
}

.blog-article blockquote {
  margin: 1.8rem 0;
  padding: 0.2rem 0 0.2rem 1.3rem;
  border-left: 2px solid var(--sage);
}

.blog-article blockquote p {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--navy);
  margin: 0;
}

.blog-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0 2rem;
  font-size: 0.9rem;
  background: #fff;
  border: 1px solid var(--line);
}

.blog-article th,
.blog-article td {
  text-align: left;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.blog-article th {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--cream);
}

.blog-article tr:last-child td { border-bottom: 0; }

.blog-related h3 {
  font-size: 1.6rem;
  color: var(--navy);
  margin: 0 0 1.2rem;
}

/* ——— Newsletter / exclusive letter ——— */
.letter-hero {
  background: var(--navy-deep);
  color: #fff;
  padding: 4.4rem 0 4.8rem;
  text-align: center;
}

.letter-hero .wrap {
  max-width: 40rem;
}

.letter-stamp {
  width: 148px;
  height: auto;
  margin: 0 auto 1.4rem;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.28));
}

.letter-hero .letter-stamp,
.letter-issue-seal .letter-stamp,
.letter-exclusive .letter-stamp {
  background: var(--paper);
  border-radius: 50%;
  padding: 10%;
  box-sizing: content-box;
}

.letter-stamp.is-mark {
  width: 88px;
  margin-bottom: 0.85rem;
}

.letter-stamp.is-badge {
  width: 72px;
  margin: 0;
  filter: none;
}

.letter-hero .eyebrow {
  color: rgba(255, 255, 255, 0.7);
}

.letter-hero h1 {
  margin: 0.4rem 0 0.85rem;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 0.98;
}

.letter-hero .lede {
  color: rgba(255, 255, 255, 0.78);
  margin-inline: auto;
}

.letter-exclusive {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 2.2rem;
  align-items: center;
  background: var(--navy-deep);
  color: #fff;
  padding: 2.4rem 2.2rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.letter-exclusive .letter-stamp {
  width: 120px;
  margin: 0;
}

.letter-stamp-wrap {
  display: block;
  width: max-content;
}

.letter-hero .letter-stamp-wrap {
  margin: 0 auto 1.4rem;
}

.letter-hero .letter-stamp-wrap .letter-stamp {
  margin: 0;
}

.letter-exclusive .eyebrow {
  color: rgba(255, 255, 255, 0.68);
}

.letter-exclusive h2,
.letter-exclusive h3 {
  color: #fff;
  margin: 0.35rem 0 0.7rem;
}

.letter-exclusive .lede,
.letter-exclusive p {
  color: rgba(255, 255, 255, 0.78);
}

.letter-exclusive .btn-gold {
  background: #fff;
  color: var(--navy);
}

.letter-exclusive .btn-gold:hover {
  background: var(--paper);
  color: var(--navy);
}

.letter-exclusive .btn-ghost {
  border-color: rgba(255, 255, 255, 0.4);
}

.letter-issue {
  position: relative;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  background: #fff;
  border: 1px solid var(--line);
  color: inherit;
}

.letter-issue-seal {
  position: relative;
  min-height: 340px;
  background: var(--navy-deep);
  display: grid;
  place-items: center;
  padding: 2rem 1.4rem;
}

.letter-issue-seal .letter-stamp {
  width: 168px;
  margin: 0;
}

.letter-issue-copy {
  padding: 2.2rem 2rem;
}

.letter-issue-copy h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--navy);
  margin: 0.55rem 0 0.7rem;
  line-height: 1.15;
}

.letter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--navy);
}

.letter-badge .letter-stamp-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  flex-shrink: 0;
  line-height: 0;
}

.letter-badge img {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0;
}

.letter-masthead {
  text-align: center;
  padding-bottom: 1.8rem;
  margin-bottom: 1.8rem;
  border-bottom: 1px solid var(--line);
}

.letter-masthead > .letter-stamp-wrap {
  display: block;
  width: max-content;
  margin: 0 auto 1rem;
}

.letter-masthead > .letter-stamp-wrap .letter-stamp {
  width: 108px;
  margin: 0;
  filter: none;
}

.letter-masthead h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--navy);
  margin: 0.35rem 0 0.5rem;
  line-height: 1.12;
}

.letter-tldr {
  background: var(--cream-dark);
  border: 1px solid var(--line);
  padding: 1.35rem 1.4rem 0.45rem;
  margin: 0 0 1.8rem;
}

.letter-tldr h2 {
  margin-top: 0;
}

.letter-takeaway {
  background: #f4f6f8;
  border-left: 3px solid var(--navy);
  padding: 0.9rem 1.05rem;
  margin: 0.4rem 0 1.6rem;
  font-size: 0.98rem;
  color: var(--ink);
}

.letter-takeaway strong { color: var(--navy); }

.letter-note {
  font-size: 0.92rem;
  color: var(--muted);
  font-style: italic;
}

.letter-chart {
  margin: 0 0 1.8rem;
}

.letter-chart img,
.letter-chart svg {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
  background: #fff;
}

.letter-chart figcaption {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.65rem;
  line-height: 1.45;
}

.letter-sources {
  margin-top: 2.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.letter-sources h2 {
  font-size: 1.15rem;
}

.letter-sources li {
  font-size: 0.92rem;
  color: var(--muted);
}

/* ——— Guide library ——— */
.guide-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

a.guide-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

a.guide-card:hover {
  border-color: rgba(30, 51, 72, 0.32);
}

.guide-card .card-photo { height: 240px; }

.guide-card .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.45rem 1.4rem 1.55rem;
}

.guide-card h2,
.guide-card h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.4vw, 2.15rem);
  color: var(--navy);
  margin: 0.4rem 0 0.65rem;
  line-height: 1.12;
}

.guide-card .lede { flex: 1; }

.guide-card .blog-more { margin-top: 1.15rem; }

a.guide-month {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  padding: 1.5rem 1.5rem 1.4rem;
  text-decoration: none;
  color: inherit;
}

a.guide-month:hover { border-color: rgba(30, 51, 72, 0.32); }

a.guide-month h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  color: var(--navy);
  margin: 0.35rem 0 0.55rem;
  line-height: 1.15;
}

.guide-gate {
  position: relative;
  margin-top: 0.2rem;
}

.guide-tease {
  max-height: 4.6rem;
  overflow: hidden;
  margin: 0 0 0.2rem;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 10%, transparent 92%);
}

.guide-tease p {
  margin: 0;
}

.guide-gate .path {
  position: relative;
}

.guide-gate .path h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  color: var(--navy);
  margin: 0.35rem 0 0.65rem;
}

html.guides-open [data-library-open] { display: block !important; }

html.guides-open [data-guide-gate] { display: none !important; }

html.guides-open.guides-just-opened [data-guide-gate] {
  display: block !important;
  margin-top: 1.5rem;
}

html.guides-open [data-guide-rest] { display: block !important; }


.issuu-block {
  margin: 0 0 2rem;
}

.issuu-block > p {
  margin-bottom: 1rem;
}

.issuu-embed {
  position: relative;
  width: 100%;
  padding-top: max(62%, 360px);
  height: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--navy) 12%, transparent);
  border-radius: 4px;
  background: #f4f1ea;
}

.issuu-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


html.guides-just-opened .guide-tease { display: none; }

/* ——— Utilities ——— */
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 1.6rem; }
.center { text-align: center; }
.center .section-head { margin-inline: auto; }

/* ——— Home search / MLS mock ——— */
body.mls-page {
  height: 100dvh;
  overflow: hidden;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}

body.mls-page .site-header { flex-shrink: 0; }

.mls-app {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mls-toolbar {
  flex-shrink: 0;
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 0.65rem 1rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.mls-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.5rem;
}

.mls-search {
  position: relative;
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 340px;
}

.mls-search input {
  width: 100%;
  height: 40px;
  padding: 0 0.9rem 0 2.2rem;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--navy);
}

.mls-search input:focus {
  outline: 1px solid var(--navy);
  border-color: var(--navy);
  background: #fff;
}

.mls-search svg {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  fill: var(--sage);
  pointer-events: none;
}

.mls-dd { position: relative; }

.mls-dd-btn,
.mls-tool-btn {
  height: 40px;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.mls-dd-btn::after {
  content: "";
  display: inline-block;
  margin-left: 0.45rem;
  border: 4px solid transparent;
  border-top-color: var(--navy);
  transform: translateY(2px);
}

.mls-dd.is-open .mls-dd-btn,
.mls-dd-btn:hover,
.mls-tool-btn:hover {
  border-color: var(--navy);
}

.mls-dd-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 0.7rem 0.85rem;
  z-index: 20;
}

.mls-dd.is-open .mls-dd-panel { display: grid; gap: 0.45rem; }

.mls-dd-panel label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.mls-dd-panel input[type="radio"],
.mls-dd-panel input[type="checkbox"] {
  width: auto;
  padding: 0;
  accent-color: var(--navy);
}

.mls-price-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.mls-price-inputs input {
  width: 100%;
  height: 36px;
  padding: 0 0.55rem;
  border: 1px solid var(--line);
}

.mls-view {
  display: inline-flex;
  border: 1px solid var(--line);
  height: 40px;
}

.mls-view button {
  border: 0;
  background: #fff;
  padding: 0 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}

.mls-view button.is-on {
  background: var(--navy);
  color: #fff;
}

.mls-tool-btn.is-accent {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.mls-auth {
  margin-left: auto;
  display: flex;
  gap: 0.35rem;
}

.mls-auth button {
  height: 40px;
  padding: 0 0.8rem;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.mls-auth button:hover { color: var(--sage-deep); }

.mls-split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(380px, 1fr) 1.12fr;
}

.mls-app.is-list .mls-map { display: none; }
.mls-app.is-list .mls-split { grid-template-columns: 1fr; }

.mls-results {
  min-height: 0;
  overflow: auto;
  background: var(--paper);
  padding: 1.1rem 1.15rem 1.6rem;
}

.mls-results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.7rem 1rem;
  margin-bottom: 0.85rem;
}

.mls-results-head h1 {
  font-size: 1.45rem;
  color: var(--navy);
  line-height: 1.15;
}

.mls-count {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
}

.mls-banner {
  margin: 0 0 0.9rem;
  padding: 0.55rem 0.75rem;
  background: var(--cream-dark);
  color: var(--navy);
  font-size: 0.78rem;
}

.mls-cities {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  margin-bottom: 0.95rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
}

.mls-chip { flex-shrink: 0; }

.mls-chip {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  padding: 0.32rem 0.65rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.mls-chip.is-on,
.mls-chip:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.mls-sort {
  height: 36px;
  width: auto;
  border: 1px solid var(--line);
  background: #fff;
  padding: 0 0.6rem;
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.mls-app.is-list .mls-grid {
  grid-template-columns: repeat(3, 1fr);
}

.mls-card {
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.mls-card:hover,
.mls-card.is-active {
  border-color: var(--navy);
}

.mls-card-photo {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #132230;
}

.mls-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.mls-card-photo img:not([src]),
.mls-card-photo img[src=""] {
  display: none;
}

/* Honest no-photo state: no stand-in image, just a plain label when no real photo loads. */
.mls-card-photo.is-no-photo::after,
.mls-drawer-photo.is-no-photo::after {
  content: "Photo not available";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.mls-card-photo.is-single .mls-photo-nav,
.mls-card-photo.is-single .mls-dots {
  display: none;
}

.mls-card:hover .mls-card-photo img { transform: scale(1.04); }

.mls-photo-nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.4rem;
  opacity: 0;
  pointer-events: none;
}

.mls-card:hover .mls-photo-nav { opacity: 1; }

.mls-photo-nav button {
  pointer-events: auto;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--navy);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.mls-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.45rem;
  display: flex;
  justify-content: center;
  gap: 0.28rem;
}

.mls-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
}

.mls-dots span.is-on { background: #fff; }

.mls-badge {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.mls-days {
  position: absolute;
  left: 0.55rem;
  bottom: 1.15rem;
  z-index: 2;
  background: rgba(19,34,48,0.78);
  color: #fff;
  padding: 0.18rem 0.42rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mls-save {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  width: 34px;
  height: 34px;
  border: 0;
  background: rgba(255,255,255,0.92);
  color: var(--navy);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.mls-save.is-on { color: #b23b3b; }

.mls-save svg { width: 16px; height: 16px; fill: currentColor; }

.mls-card-body { padding: 0.85rem 0.95rem 1rem; }

.mls-card-price {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--navy);
  line-height: 1.1;
}

.mls-card-facts {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
}

.mls-card-facts span { white-space: nowrap; }

.mls-card-addr {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.mls-card-mls {
  margin-top: 0.2rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
}

.mls-empty {
  grid-column: 1 / -1;
  padding: 2.4rem 1rem;
  text-align: center;
}

.mls-empty h3 { color: var(--navy); font-size: 1.6rem; margin-bottom: 0.4rem; }

.mls-more {
  margin: 1.1rem 0 0.4rem;
  min-height: 1.4rem;
}

.mls-more-status {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
}

.mls-legal {
  font-size: 0.7rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 46rem;
}

.mls-map {
  position: relative;
  z-index: 1;
  isolation: isolate;
  min-height: 0;
  height: 100%;
  background: #e8ebe4;
}

.mls-map-canvas {
  height: 100%;
  width: 100%;
  background: #e8ebe4;
}

.mls-map-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1.5rem;
  text-align: center;
  color: var(--navy);
  font-size: 0.88rem;
}

.mls-basemap {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 1px 6px rgba(19, 34, 48, 0.18);
}

.mls-basemap button {
  border: 0;
  background: #fff;
  height: 34px;
  padding: 0 0.75rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}

.mls-basemap button.is-on {
  background: var(--navy);
  color: #fff;
}

.mls-pin,
.mls-cluster {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 6px;
  background: var(--navy);
  color: #fff;
  border: 1px solid #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(19, 34, 48, 0.25);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.mls-cluster {
  background: var(--sage-deep);
}

.mls-pin-active {
  background: #fff;
  color: var(--navy);
  border-color: var(--navy);
}

.mls-drawer,
.mls-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
}

.mls-drawer.is-open,
.mls-modal.is-open { display: block; }

.mls-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(19,34,48,0.42);
}

.mls-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 100%);
  background: #fff;
  overflow: auto;
  box-shadow: var(--shadow);
}

#mls-detail-panel {
  width: min(720px, 100%);
}

.mls-modal-panel {
  position: relative;
  width: min(420px, calc(100% - 2rem));
  margin: 12vh auto 0;
  background: #fff;
  padding: 1.6rem 1.5rem 1.5rem;
}

.mls-drawer-photo {
  position: relative;
  height: 400px;
  background: #132230;
}

.mls-drawer-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: relative;
  z-index: 0;
}

.mls-drawer-photo img:not([src]),
.mls-drawer-photo img[src=""] {
  display: none;
}

#mls-detail .mls-drawer-photo .mls-photo-nav {
  opacity: 1;
}

#mls-detail .mls-drawer-photo .mls-photo-nav button {
  width: 36px;
  height: 36px;
  font-size: 1.25rem;
}

.mls-drawer-photo.is-single .mls-photo-nav,
.mls-drawer-photo.is-single .mls-drawer-photo-count {
  display: none;
}

.mls-drawer-photo-count {
  position: absolute;
  left: 0.8rem;
  bottom: 0.8rem;
  z-index: 2;
  background: rgba(19, 34, 48, 0.72);
  color: #fff;
  padding: 0.28rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.mls-drawer-thumbs {
  display: flex;
  gap: 0.45rem;
  padding: 0.7rem 0.8rem;
  overflow-x: auto;
  background: #132230;
  scrollbar-width: thin;
}

.mls-drawer-thumbs:empty {
  display: none;
}

.mls-drawer-thumb {
  flex: 0 0 128px;
  height: 88px;
  padding: 0;
  border: 2px solid transparent;
  background: #1e3348;
  cursor: pointer;
  overflow: hidden;
}

.mls-drawer-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mls-drawer-thumb.is-on {
  border-color: #fff;
}

#mls-detail-panel .mls-facts-grid {
  grid-template-columns: 1fr 1fr 1fr;
}

.mls-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 5;
  width: 36px;
  height: 36px;
  border: 0;
  background: rgba(255,255,255,0.94);
  color: var(--navy);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  pointer-events: auto;
}

.mls-drawer-copy { padding: 1.3rem 1.35rem 2rem; }

.mls-drawer-copy h2 {
  font-size: 1.85rem;
  color: var(--navy);
  margin: 0.35rem 0 0.25rem;
}

.mls-facts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin: 1rem 0 1.1rem;
}

.mls-facts-grid div {
  border-top: 1px solid var(--line);
  padding-top: 0.45rem;
}

.mls-facts-grid b {
  display: block;
  font-size: 0.92rem;
  color: var(--navy);
}

.mls-facts-grid span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
}

.mls-toast {
  position: fixed;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2100;
  display: none;
  background: var(--navy);
  color: #fff;
  padding: 0.75rem 1.1rem;
  font-size: 0.82rem;
}

.mls-toast.is-on { display: block; }

.mls-filters-panel .mls-filter-block {
  margin-bottom: 1.1rem;
}

.mls-filters-panel h3 {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 0.5rem;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1.25rem 1.4rem;
    gap: 1rem;
  }
  .nav a[data-link="contact"] {
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
  }
  .nav.is-open { display: flex; }
  body.mls-page { height: auto; overflow: auto; display: block; }
  .mls-app { height: auto; min-height: calc(100dvh - var(--header-h)); }
  .mls-split { grid-template-columns: 1fr; }
  .mls-app.is-map .mls-results { display: none; }
  .mls-app.is-map .mls-map { display: block; height: calc(100dvh - var(--header-h) - 120px); }
  .mls-app.is-list .mls-map { display: none; }
  .mls-app.is-list .mls-grid { grid-template-columns: 1fr 1fr; }
  .mls-search { max-width: none; flex-basis: 100%; }
  .mls-auth { margin-left: 0; }
  .mls-drawer-photo { height: 300px; }
  #mls-detail-panel .mls-facts-grid { grid-template-columns: 1fr 1fr; }
  .split, .split.reverse, .grid-3, .grid-2, .guide-pair, .quotes, .footer-grid, .listing-feature, .blog-feature, .letter-exclusive, .letter-issue, .form-row, .stats, .offer, .offer.reverse, .reach-grid {
    grid-template-columns: 1fr;
  }
  body[data-page="sell"] .split.is-sell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "form";
    gap: 1.6rem;
  }
  .letter-issue-seal { min-height: 240px; }
  .letter-exclusive { text-align: center; padding: 2rem 1.4rem; }
  .letter-exclusive .letter-stamp,
  .letter-exclusive .letter-stamp-wrap { margin-inline: auto; }
  .about-portrait { position: static; }
  body[data-page="about"] .about-portrait {
    max-width: 320px;
    margin-inline: auto;
  }
  body[data-page="about"] .about-archive {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }
  .blog-feature-photo { min-height: 260px; }
  .process-feature-title { padding: 2.6rem 1.4rem; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .offer.reverse .offer-photo { order: 0; }
  .offer-photo { height: 220px; }
  .reach-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .reach-grid.is-three { grid-template-columns: 1fr; }
  .split.reverse .split-copy { order: 0; }
  .mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 240px 200px 200px;
  }
  .mosaic-item.wide { grid-row: auto; grid-column: 1 / -1; height: 280px; }
  .split-photo img, .split-photo.portrait img { height: 420px; }
  .home-opening {
    height: auto;
    min-height: 0;
  }
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero-media {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    align-self: start;
    min-height: 16.5rem;
    aspect-ratio: auto;
    height: min(62vh, 34rem);
    max-height: none;
    order: -1;
  }
  .hero-media::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5.5rem;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--paper) 78%, transparent) 100%
    );
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 58%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 58%);
  }
  .hero-stage {
    width: 100%;
    padding: 1.7rem 1.35rem 2rem;
  }
  .hero-copy {
    transform: none;
    max-width: 100%;
    padding: 2.15rem 1.7rem 2.2rem;
  }
  .hero-frame-corner {
    width: 2.85rem;
    height: 2.85rem;
  }
  .hero h1 { font-size: clamp(2.8rem, 12vw, 4.2rem); }
  body[data-page="home"] .letter-dock {
    position: absolute;
    z-index: 30;
    top: calc(var(--header-h) + min(62vh, 34rem) - 6.5rem);
    bottom: auto;
    right: max(0.9rem, env(safe-area-inset-right));
  }
  .pin-deck,
  .pin-deck.is-light { max-width: 320px; margin-left: 0; }
  .pin-board,
  .pin-controls { padding-left: 1.1rem; }
}

@media (max-width: 640px) {
  .wrap, .page-hero-copy { width: calc(100% - 1.6rem); }
  body[data-page="listings"] .gallery-grid {
    grid-template-columns: 1fr;
  }
  body[data-page="listings"] .gallery-grid .card-photo {
    height: 280px;
  }
  .hero-stage { padding: 1.4rem 1.15rem 1.75rem; }
  .hero-copy { padding: 1.95rem 1.5rem 2.05rem; }
  .hero-frame::after { inset: 6px; }
  .hero-frame-corner { width: 2.45rem; height: 2.45rem; }
  .hero-frame-crest { width: 4.8rem; }
  .brand-name em { font-size: 1.75rem; }
  .brand-name .brand-last { font-size: 0.58rem; }
  .brand { gap: 0.55rem; }
  .brand-horse { height: 38px; }
  .brand-rule { min-height: 30px; }
  .brand-mhm { height: 16px; }
  .section { padding: 3.6rem 0; }
  .mosaic { grid-template-columns: 1fr; grid-template-rows: none; }
  .mosaic-item, .mosaic-item.wide { height: 230px; }
  .step { grid-template-columns: 54px 1fr; }
  .process-section { padding-bottom: 3.6rem; }
  .process-banner { min-height: 240px; }
  .process-grid { grid-template-columns: 1fr; }
  .hero p { max-width: 22rem; }
  .pin-deck,
  .pin-deck.is-light { max-width: none; }
  .pin-caption span { display: none; }
  .reach-grid,
  .reach-grid.is-three,
  .reach-grid.is-two { grid-template-columns: 1fr; }
  .mls-grid,
  .mls-app.is-list .mls-grid { grid-template-columns: 1fr; }
  .mls-toolbar { padding: 0.6rem 0.7rem; }
  .cred-logo { height: 72px; }
  .cred-logo.is-wide { height: 26px; max-width: 180px; }
  .cred-logos { gap: 1.2rem 1.6rem; }
  .cred-note { align-items: flex-start; }
}

.hero-media img,
.hero-media video {
  transform-origin: 50% 50%;
  will-change: transform;
}

.page-hero-media img,
.process-banner-media img,
.split-photo:not(.portrait) img,
.area img,
.offer-photo img,
.mosaic-item img,
.listing-feature img {
  transform-origin: 50% 50%;
}

/* ——— Letter dock ——— */
.letter-dock {
  position: fixed;
  z-index: 50;
  right: max(1.1rem, env(safe-area-inset-right));
  bottom: max(1.1rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

.letter-dock-panel {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 7.2rem;
  width: min(21rem, calc(100vw - 2.2rem));
  max-height: calc(100vh - 8rem);
  overflow: auto;
  padding: 1.55rem 1.35rem 1.7rem;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--white) 42%, transparent), transparent 28%),
    repeating-linear-gradient(
      180deg,
      transparent,
      transparent 27px,
      color-mix(in srgb, var(--navy) 8%, transparent) 28px
    );
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  box-shadow: 0 22px 48px color-mix(in srgb, var(--navy-deep) 22%, transparent);
  transform: translateY(18px) rotate(-1.1deg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: 88% 100%;
  transition: opacity 0.28s ease, transform 0.34s ease, visibility 0.34s, background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.letter-dock.is-open .letter-dock-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) rotate(-0.35deg);
}

.letter-dock-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 0.55rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}

.letter-dock-mark {
  width: 52px;
  height: auto;
  margin-bottom: 0.45rem;
}

.letter-dock-head .eyebrow {
  color: var(--navy);
}

.letter-dock-panel h2 {
  font-size: 1.7rem;
  color: var(--navy);
  margin: 0 0 0.45rem;
  line-height: 1.08;
}

.letter-dock-lede {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
}

.letter-dock-close {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  font-size: 1.7rem;
  line-height: 1;
}

.letter-dock-close:hover,
.letter-dock-close:focus-visible {
  color: var(--sage-deep);
  outline: none;
}

.letter-dock .form {
  position: relative;
  gap: 0.7rem;
}

.letter-dock-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.letter-dock .form-note {
  font-size: 0.72rem;
  line-height: 1.45;
}

.letter-dock input {
  background: color-mix(in srgb, var(--paper) 88%, var(--ink));
  border-color: var(--line);
  color: var(--ink);
}

.letter-dock input:focus {
  border-color: var(--navy);
  outline-color: color-mix(in srgb, var(--navy) 28%, transparent);
}

.letter-dock .btn {
  width: 100%;
}

.letter-dock .form-success {
  padding: 1rem 0 0.2rem;
  border: 0;
  background: transparent;
}

.letter-dock .form-success h3 {
  font-size: 1.2rem;
  color: var(--navy);
  margin-bottom: 0.4rem;
}

.letter-dock .form-success p {
  font-size: 0.9rem;
  color: var(--muted);
}

.letter-dock-talk {
  margin-top: 0.95rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.letter-dock-talk a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.letter-dock .form-success.is-visible ~ .letter-dock-talk {
  display: none;
}

.letter-dock-seal {
  position: relative;
  z-index: 2;
  width: 78px;
  height: 104px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: block;
  transition: transform 0.28s ease;
}

.letter-dock-sheet {
  position: absolute;
  inset: 0;
  background-color: var(--paper);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--white) 42%, transparent), transparent 32%);
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--navy-deep) 22%, transparent);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.letter-dock-sheet::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7px -6px -6px 6px;
  background-color: var(--cream-dark);
  border: 1px solid var(--line);
  transform: rotate(3.5deg);
  transition: transform 0.28s ease, background-color 0.4s ease, border-color 0.4s ease;
}

.letter-dock-seal:hover .letter-dock-sheet::before,
.letter-dock-seal:focus-visible .letter-dock-sheet::before {
  transform: rotate(0deg);
}

.letter-dock-sheet::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 64%;
  height: 1px;
  background-color: var(--line);
}

.letter-dock-crest-wrap {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 48px;
  height: 48px;
  display: block;
  transform: translateX(-50%);
  transition: filter 0.4s ease;
}

.letter-dock-crest {
  width: 48px;
  height: 48px;
  display: block;
}

.letter-dock-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
}

.letter-dock-seal:hover,
.letter-dock-seal:focus-visible {
  transform: translateY(-3px);
}

.letter-dock:not(.is-open) .letter-dock-seal:hover,
.letter-dock:not(.is-open) .letter-dock-seal:focus-visible {
  animation: none;
}

.letter-dock-seal:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--navy) 35%, transparent);
  outline-offset: 4px;
}

.letter-dock:not(.is-open) .letter-dock-seal {
  animation: letter-dock-press 5.2s ease-in-out infinite;
}

.letter-dock.is-open .letter-dock-seal {
  animation: none;
}

.letter-dock.is-open .letter-dock-caption {
  opacity: 0.55;
}

@keyframes letter-dock-press {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@media (max-width: 640px) {
  .letter-dock {
    right: max(0.85rem, env(safe-area-inset-right));
    bottom: max(0.85rem, env(safe-area-inset-bottom));
  }

  .letter-dock-seal {
    width: 70px;
    height: 94px;
  }

  .letter-dock-crest-wrap {
    width: 42px;
    height: 42px;
    top: 12px;
  }

  .letter-dock-crest {
    width: 42px;
    height: 42px;
  }

  .letter-dock-panel {
    bottom: 6.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .letter-dock-panel,
  .letter-dock-seal,
  .letter-dock-sheet::before {
    transition: none;
    animation: none;
  }
  .letter-dock-panel {
    transform: none;
  }
  .letter-dock.is-open .letter-dock-panel {
    transform: none;
  }
  .letter-dock-seal:hover,
  .letter-dock-seal:focus-visible,
  .letter-dock:not(.is-open) .letter-dock-seal {
    transform: none;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media img,
  .hero-media video {
    transition: none;
  }
  .hero-media img,
  .hero-media video,
  .page-hero-media img,
  .process-banner-media img,
  .split-photo img,
  .area img,
  .offer-photo img,
  .mosaic-item img,
  .listing-feature img {
    transform: none !important;
    will-change: auto;
  }
}

/* ——— White and black ——— */
body {
  --cream: #f6f2eb;
  --paper: #f6f2eb;
  --cream-dark: #e4ddd2;
  --stone: #e4ddd2;
  --sage: #7d8b74;
  --sage-deep: #5f6b58;
  --walnut: #6b5344;
  --white: #ffffff;
  --line: rgba(30, 51, 72, 0.1);
  --shadow: none;
  --accent-mist: #a3b199;
  --frame-inner: rgba(125, 139, 116, 0.42);
  --texture-grain: url("../assets/texture-grain.png?v=3");
  --texture-laid: url("../assets/texture-laid.png?v=3");
  background: var(--cream);
}


body[data-theme="ink"] {
  --cream: #ffffff;
  --paper: #ffffff;
  --cream-dark: #f0f0f0;
  --stone: #f4f4f4;
  --sage: #111111;
  --sage-deep: #000000;
  --walnut: #111111;
  --navy: #000000;
  --navy-deep: #000000;
  --navy-soft: #1a1a1a;
  --ink: #000000;
  --muted: #222222;
  --line: rgba(0, 0, 0, 0.14);
  --accent-mist: #888888;
  --frame-inner: rgba(0, 0, 0, 0.5);
  --white: #ffffff;
  --gold: #000000;
  --cluster: #000000;
  color: #000000;
  background: #ffffff;
  color-scheme: light;
}

body[data-theme="ink"] .section-sage,
body[data-theme="ink"] .mls-map,
body[data-theme="ink"] .mls-map-canvas {
  background: var(--stone);
}

body[data-theme="ink"] .btn-line {
  border-color: rgba(0, 0, 0, 0.32);
}

body[data-theme="ink"] .hero-stage::before,
body[data-theme="ink"] .hero-stage::after {
  content: none;
}

body[data-theme="ink"] .hero p,
body[data-theme="ink"] .hero-contact {
  color: #000000;
}

body[data-theme="ink"] .btn-gold {
  background: #000000;
  color: #ffffff;
}

body[data-theme="ink"] .btn-gold:hover {
  background: #1a1a1a;
  color: #ffffff;
}

body[data-theme="ink"] .section-navy .btn-gold {
  background: #ffffff;
  color: #000000;
}

body[data-theme="ink"] .pill-gold {
  background: #000000;
  color: #ffffff;
}

body[data-theme="ink"] .brand-horse {
  filter: brightness(0);
}

body[data-theme="ink"] .footer-brand .brand-horse {
  filter: brightness(0) invert(1);
}

body[data-theme="ink"] .brand-mhm {
  filter: grayscale(1) brightness(0);
}

body[data-theme="ink"] .letter-stamp,
body[data-theme="ink"] .letter-dock-mark,
body[data-theme="ink"] .letter-dock-crest {
  filter: brightness(0);
}

body[data-theme="ink"] .letter-hero .letter-stamp,
body[data-theme="ink"] .letter-issue-seal .letter-stamp,
body[data-theme="ink"] .letter-exclusive .letter-stamp {
  background: none;
  padding: 0;
  filter: brightness(0);
}

body[data-theme="ink"] .letter-hero .letter-stamp-wrap,
body[data-theme="ink"] .letter-issue-seal .letter-stamp-wrap,
body[data-theme="ink"] .letter-exclusive .letter-stamp-wrap {
  background: var(--paper);
  border-radius: 50%;
  padding: 10%;
}


body .site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cream) 96%, transparent) 0%,
    color-mix(in srgb, var(--cream) 78%, transparent) 100%
  );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body .hero-stage,
body .section,
body .ig-band,
body .site-footer {
  position: relative;
}

body .hero-stage::before,
body .site-header::before,
body .section::before,
body .ig-band::before,
body .site-footer::before {
  content: none;
}


body .hero-stage > *,
body .header-inner,
body .section > .wrap,
body .ig-band > .wrap,
body .site-footer > .wrap {
  position: relative;
  z-index: 1;
}

body[data-page="home"] .room-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-synthesis: none;
}

body[data-page="home"] .hero p.room-italic {
  color: var(--ink);
  font-size: 1.12rem;
  line-height: 1.48;
}

body .btn {
  padding: 0.95rem 1.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

body .btn-line:hover,
body .btn-ghost:hover {
  background: var(--cream);
}

body .section-stone {
  background: linear-gradient(
    165deg,
    var(--cream) 0%,
    var(--stone) 52%,
    var(--cream-dark) 100%
  );
}

body .section-head .eyebrow::after,
body .split-copy .eyebrow::after {
  content: "";
  display: block;
  width: 2.35rem;
  height: 1px;
  margin-top: 0.85rem;
  background: var(--sage);
  opacity: 0.75;
}

body[data-page="home"] .hero-frame::after {
  border-color: var(--frame-inner);
}

body[data-page="home"] .hero-tick {
  opacity: 1;
}

body[data-page="home"] .photo-mat {
  background: transparent;
  padding: 0;
  box-shadow: none;
  outline: none;
}

body[data-page="home"] .split-photo.portrait.is-home-studio {
  overflow: visible;
}

body[data-page="home"] .split-photo.portrait.is-home-studio img {
  background: transparent;
}

body[data-page="home"] .photo-mat img {
  display: block;
  width: 100%;
}

body[data-page="home"] .photo-mat-caption {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 0.2rem 0.95rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--walnut);
}

body[data-page="home"] .photo-mat-caption::before {
  content: "";
  width: 1.15rem;
  height: 1px;
  background: var(--sage);
  opacity: 0.85;
  flex-shrink: 0;
}

body .path {
  background: var(--cream);
}

body[data-page="home"] .card {
  background: transparent;
  border: 0;
}

body[data-page="home"] .card-photo {
  height: auto;
  background: transparent;
  padding: 0;
  outline: none;
}

body[data-page="home"] .card-photo img {
  height: 240px;
}

body[data-page="home"] .card-body {
  padding: 1.05rem 0.75rem 1.35rem;
}

body[data-page="home"] a.card {
  color: inherit;
}

body[data-page="home"] [data-market-empty] {
  max-width: 36rem;
}

body[data-page="home"] .pill-sage {
  background: transparent;
  color: var(--walnut);
  padding-left: 0;
}

body[data-page="home"] .quotes {
  gap: 1.85rem 2.2rem;
}

body[data-page="home"] .quote {
  background: transparent;
  padding: 0.15rem 0 0.35rem 1.35rem;
  border-left: 1px solid var(--sage);
}

body[data-page="home"] .listing-feature {
  background: transparent;
  border: 0;
  gap: 2.8rem;
  align-items: center;
}

body[data-page="home"] .listing-feature .photo-mat img {
  height: 28rem;
  min-height: 0;
  object-fit: cover;
}

body[data-page="home"] .listing-feature-copy {
  padding: 0.4rem 0 0.4rem 0;
}

body[data-page="home"] .listing-feature-copy .room-italic {
  color: var(--ink);
}

body[data-page="home"] .ig-band {
  background: var(--navy-soft);
  color: #fff;
  padding: 1.85rem 0 2rem;
}

body[data-page="home"] .feed-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.85rem 2.4rem;
  align-items: start;
}

body[data-page="home"] .feed-pair.is-social {
  grid-template-columns: 1fr;
}

body[data-page="home"] .ig-strip,
body[data-page="home"] .blog-strip {
  max-width: none;
  margin: 0;
}

body[data-page="home"] .ig-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.85rem;
}

body[data-page="home"] .ig-heading {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-mist);
  line-height: 1.3;
}

body[data-page="home"] .ig-heading a {
  color: inherit;
  text-decoration: none;
}

body[data-page="home"] .ig-heading a:hover {
  color: #fff;
}

body[data-page="home"] .ig-profile {
  flex: 0 0 auto;
  width: 2.85rem;
  height: 2.85rem;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  background: #e8b9a0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28);
}

body[data-page="home"] .ig-profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-page="home"] .ig-profile.is-full img {
  object-position: 50% 8%;
}

body[data-page="home"] .ig-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}

body[data-page="home"] .ig-post {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--navy-deep);
}

body[data-page="home"] .ig-post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

body[data-page="home"] .ig-post.is-portrait img {
  object-position: 50% 42%;
}

body[data-page="home"] .ig-post.is-graphic img {
  object-position: 50% 0;
}

body[data-page="home"] .ig-post:hover img {
  transform: scale(1.04);
}

body[data-page="home"] .blog-feed-post {
  position: relative;
}

body[data-page="home"] .blog-feed-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.55rem 0.55rem 0.5rem;
  background: linear-gradient(180deg, transparent, rgba(19, 34, 48, 0.78));
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body .section-navy .eyebrow {
  color: var(--accent-mist);
}

body .section-navy .section-head .eyebrow::after {
  background: var(--accent-mist);
}

body .section-navy .room-italic {
  color: rgba(255, 255, 255, 0.82);
}

body .section-navy .reach-card {
  background: var(--cream);
  border-color: transparent;
}

body .section-navy .reach-card:hover {
  background: var(--cream);
  border-color: color-mix(in srgb, var(--cream) 55%, transparent);
}

body[data-page="home"] .reach-band {
  display: grid;
  grid-template-columns: minmax(16rem, 0.88fr) minmax(24rem, 1.22fr);
  gap: 2rem 3rem;
  align-items: center;
}

body[data-page="home"] .reach-band .section-head {
  max-width: none;
  margin-bottom: 0;
}

body[data-page="home"] .reach-band .section-head h2 {
  margin: 0.3rem 0 0.55rem;
}

body[data-page="home"] .reach-band .lede {
  max-width: 22rem;
}

body[data-page="home"] .reach-grid.is-two {
  gap: 0.85rem;
  align-items: stretch;
}

body[data-page="home"] .reach-grid.is-two .reach-card {
  padding: 1.2rem 1.25rem 1.25rem;
  justify-content: center;
}

body[data-page="home"] .reach-grid.is-two .reach-card b {
  font-size: 1.42rem;
}

@media (max-width: 900px) {
  body[data-page="home"] .listing-feature .photo-mat img {
    height: 22rem;
  }
  body[data-page="home"] .reach-band {
    grid-template-columns: 1fr;
    gap: 1.7rem;
  }
  body[data-page="home"] .reach-band .lede {
    max-width: none;
  }
  body[data-page="home"] .feed-pair {
    grid-template-columns: 1fr;
    gap: 1.7rem;
  }
}

@media (max-width: 640px) {
  body[data-page="home"] .split-photo.portrait.is-home-studio img {
    height: 420px;
  }
  body[data-page="home"] .listing-feature .photo-mat img {
    height: 18rem;
  }
  body[data-page="home"] .ig-band {
    padding: 1.55rem 0 1.7rem;
  }
  body[data-page="home"] .ig-strip,
  body[data-page="home"] .blog-strip {
    max-width: 22rem;
    margin: 0 auto;
  }
  body[data-page="home"] .ig-head {
    margin-bottom: 0.7rem;
  }
  body[data-page="home"] .ig-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
}

body,
body .site-header,
body .hero,
body .section,
body .path,
body .ig-band,
body .site-footer,
body .reach-card,
body .letter-dock-caption,
body .letter-dock-panel h2,
body .letter-dock-head .eyebrow,
body .letter-dock-lede,
body .letter-dock-talk,
body .letter-dock-talk a,
body .letter-dock-close,
body .letter-dock input {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}


@media (prefers-reduced-motion: reduce) {
  body,
  body .site-header,
  body .hero,
  body .section,
  body .path,
  body .ig-band,
  body .site-footer,
  body .reach-card,
  body .letter-dock-caption,
  body .letter-dock-panel,
  body .letter-dock-sheet,
  body .letter-dock input {
    transition: none;
  }
}

/* Google review credit */
.review-meta { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--muted, #6b6b6b); font-style: normal; }
.review-meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.review-summary { margin-top: 0.9rem; font-size: 0.98rem; }
.review-summary a { text-decoration: underline; text-underline-offset: 2px; }
.review-stars { color: var(--gold, #b8955a); letter-spacing: 0.08em; }
.letter p + p, .pull-quote p + p, .quote p + p { margin-top: 0.7rem; }
blockquote p.review-meta { font-family: "Figtree", system-ui, sans-serif; font-size: 0.85rem; line-height: 1.4; font-style: normal; margin-top: 0.35rem; }

/* Optimized images (scripts/optimize-images.mjs): the <picture> wrapper must not change layout,
   and width/height attributes only reserve the aspect ratio. */
picture[data-opt] { display: contents; }
picture[data-opt] > source { display: none; }
:where(img[data-opt-wh]) { height: auto; }

/* Home hero: third action (Aging in place) on its own row under Buy / Sell. */
.hero-actions-aip { margin-top: 0.7rem; }
.hero-actions-aip .btn { min-width: calc(14.5rem + 0.7rem); }

/* Guides dock: secondary "Preview the content" button under the submit button. */
.letter-dock .letter-dock-preview { margin-top: 0.55rem; }

/* Brokerage name is always lowercase: milehimodern */
.brand-lc { text-transform: none !important; }

/* Molly: no seal in the guides block, so the copy takes the full width. */

/* Molly placeholder emblem: a monogram must not be mirrored like Michelle's horse. */
.brand-horse.is-emblem { transform: none; }

/* Aging in Place page (aip2) */
.aip-h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--navy); margin: 0.4rem 0 1rem; }
.aip-gain { margin-top: 0.8rem; font-size: 0.95rem; }
.aip-faq details { border-bottom: 1px solid rgba(0,0,0,0.12); padding: 1rem 0; }
.aip-faq summary { cursor: pointer; font-weight: 600; font-size: 1.08rem; color: var(--navy); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.aip-faq summary::-webkit-details-marker { display: none; }
.aip-faq summary::after { content: "+"; font-size: 1.3rem; line-height: 1; }
.aip-faq details[open] summary::after { content: "\2212"; }
.aip-faq details p { margin: 0.7rem 0 0; color: var(--muted); }

/* Aging in Place: larger type for older readers (aip3), page-scoped */
body[data-page="aging-in-place"] > section { font-size: 18px; line-height: 1.65; }
body[data-page="aging-in-place"] > section p,
body[data-page="aging-in-place"] > section li { font-size: 18px; line-height: 1.65; }
body[data-page="aging-in-place"] > section .lede { font-size: 19px; line-height: 1.65; }
body[data-page="aging-in-place"] > section .eyebrow { font-size: 14px; line-height: 1.5; }
body[data-page="aging-in-place"] > section .cred-note { font-size: 15.5px; }
body[data-page="aging-in-place"] > section .process-step p,
body[data-page="aging-in-place"] > section .aip-gain { font-size: 17.5px; line-height: 1.65; }
body[data-page="aging-in-place"] > section .process-step h3 { font-size: 26px; line-height: 1.25; }
body[data-page="aging-in-place"] > section .process-num { font-size: 54px; }
body[data-page="aging-in-place"] > section .section-head h2 { font-size: clamp(2.25rem, 4.2vw, 3.5rem); line-height: 1.1; }
body[data-page="aging-in-place"] > section .aip-h2 { font-size: clamp(2.25rem, 4.5vw, 3.4rem); }
body[data-page="aging-in-place"] .page-hero h1 { font-size: clamp(2.9rem, 5.6vw, 4.9rem); }
body[data-page="aging-in-place"] > section .btn { font-size: 14px; padding-top: 1em; padding-bottom: 1em; }
body[data-page="aging-in-place"] .aip-faq summary { font-size: 20px; line-height: 1.45; }
body[data-page="aging-in-place"] .aip-faq details p { font-size: 18px; }
body[data-page="aging-in-place"] > section .path h3 { font-size: 36px; line-height: 1.25; }
@media (max-width: 700px) {
  body[data-page="aging-in-place"] > section, body[data-page="aging-in-place"] > section p, body[data-page="aging-in-place"] > section li,
  body[data-page="aging-in-place"] > section .process-step p, body[data-page="aging-in-place"] > section .aip-gain { font-size: 17px; }
  body[data-page="aging-in-place"] > section .lede { font-size: 18px; }
  body[data-page="aging-in-place"] > section .process-step h3 { font-size: 24px; }
  body[data-page="aging-in-place"] > section .process-num { font-size: 44px; }
  body[data-page="aging-in-place"] > section .path h3 { font-size: 30px; }
  body[data-page="aging-in-place"] .aip-faq summary { font-size: 18.5px; }
  body[data-page="aging-in-place"] .aip-faq details p { font-size: 17px; }
}

/* Transparent-background headshot cutout: show whole figure, no white box */
.split-photo.portrait img.is-cutout {
  height: auto;
  max-height: 720px;
  object-fit: contain;
  object-position: center bottom;
  background: transparent;
}

/* Guide gate v2: bigger, easier form (matches Aging in Place sizing) */
.guide-peek { max-height: 7.5rem; filter: blur(2.5px); opacity: 0.75; font-size: 1.05rem; }
.guide-peek .fall-num { font-weight: 600; margin-bottom: 0.4rem; }
.guide-inside { font-size: 1.15rem; font-weight: 600; color: var(--navy); margin: 0 0 0.4rem; }
.guide-form, .guide-gate .path, #library .path { font-size: 1.125rem; }
.guide-form label { display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: 0; text-transform: none; margin-top: 0.9rem; }
.guide-form label .opt { font-weight: 400; color: #6b6b6d; }
.guide-form input[type=email], .guide-form input[type=text] { width: 100%; box-sizing: border-box; min-height: 52px; font-size: 1.125rem; padding: 0.7rem 0.9rem; margin-top: 0.35rem; }
.guide-form input[aria-invalid=true] { border-color: #b3261e; outline: 2px solid #b3261e; }
.form-error { color: #b3261e; font-size: 1rem; font-weight: 600; margin: 0.4rem 0 0; }
.btn-big { display: inline-flex; justify-content: center; width: 100%; min-height: 56px; font-size: 1.05rem; margin-top: 1.1rem; box-sizing: border-box; }
.guide-form .form-note { font-size: 0.98rem; margin-top: 0.8rem; }
.guide-gate .form-success h3, #library .form-success h3 { font-size: clamp(1.8rem, 3vw, 2.3rem); }
.guide-gate .form-success p, #library .form-success p { font-size: 1.125rem; }
html.guides-open .guide-peek, html.guides-open .guide-inside { display: none; }
html.guides-just-opened [data-guide-gate] .path > h3,
html.guides-just-opened [data-guide-gate] .path > p,
html.guides-just-opened [data-guide-gate] .path > .eyebrow { display: none; }
.form-success .btn-big { text-decoration: none; text-align: center; align-items: center; padding: 0.8rem 1rem; letter-spacing: 0.08em; }

/* About: Meet Molly vertical video */
.meet-molly-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.meet-molly-video video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; max-height: 80vh; background: #111; object-fit: contain; }
.meet-molly-text h2 { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--navy); margin: 0.4rem 0 1rem; }
.meet-molly-quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.3; margin: 0 0 1.2rem; padding-left: 1rem; border-left: 3px solid #d3bd29; color: var(--navy); }
@media (max-width: 700px) {
  .meet-molly-grid { grid-template-columns: minmax(0, 1fr); }
  .meet-molly-video { order: 2; }
  .meet-molly-video video { width: auto; max-width: 100%; margin: 0 auto; }
}
.meet-molly-video video { max-width: min(100%, calc(80vh * 9 / 16)); margin: 0 auto; }

/* Living Design Company text wordmark (same type as the header "Molly / STAUFFER" logo) */
.ldc-mark { display: flex; flex-direction: column; align-items: stretch; gap: 0.14rem; width: max-content; margin: 0 0 1rem; line-height: 1; color: var(--navy); }
.ldc-mark em { font-family: "Fraunces", serif; font-style: italic; font-weight: 400; font-size: 2.2rem; letter-spacing: 0.01em; line-height: 0.9; margin-left: -0.05em; font-synthesis: none; font-optical-sizing: auto; font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 144; }
.ldc-mark span { font-family: "Figtree", sans-serif; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; text-align: justify; text-align-last: justify; }
.page-hero .ldc-mark { color: #fff; }
.ldc-mark.ldc-center { margin: 0 auto 1rem; }
/* Hero Living Design Company mark: centered, ~2.3x (same type; small line spans the width of "Living") */
.page-hero .ldc-mark { margin: 0 auto 1.4rem; gap: 0.3rem; }
.page-hero .ldc-mark em { font-size: 5rem; }
.page-hero .ldc-mark span { font-size: 1.6rem; }
@media (max-width: 700px) {
  .page-hero .ldc-mark { gap: 0.2rem; margin-bottom: 1rem; }
  .page-hero .ldc-mark em { font-size: 3.2rem; }
  .page-hero .ldc-mark span { font-size: 1.02rem; }
}

/* Living Design Company contact email link */
.ldc-email { margin-top: 1rem; }
.ldc-email a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
body[data-page="aging-in-place"] .page-hero-copy { padding-top: 2.5rem; }

/* Aging in Place page only: larger, higher-contrast small text for older readers */
body[data-page="aging-in-place"] :is(.page-hero, .section) .eyebrow { font-size: 18px; letter-spacing: 0.12em; color: #1a1a1a; }
body[data-page="aging-in-place"] :is(.page-hero, .section) .btn { font-size: 18px; }
body[data-page="aging-in-place"] .section .cred-note { font-size: 18px; }
body[data-page="aging-in-place"] .section :is(.process-step, .path, .aip-card, article) p:not(.eyebrow):not(.ldc-mark) { font-size: max(18px, 1em); }
body[data-page="aging-in-place"] .section :is(.process-step, .path, article) p:not(.eyebrow):not(.ldc-mark) { font-size: 18px; }
body[data-page="aging-in-place"] .ldc-mark.ldc-center em { font-size: 2.8rem; }
body[data-page="aging-in-place"] .ldc-mark.ldc-center span { font-size: 0.9rem; }
@media (max-width: 700px) {
  body[data-page="aging-in-place"] :is(.page-hero, .section) :is(.eyebrow, .btn) { font-size: 17px; }
  body[data-page="aging-in-place"] .section .cred-note { font-size: 17px; }
  body[data-page="aging-in-place"] .section :is(.process-step, .path, article) p:not(.eyebrow):not(.ldc-mark) { font-size: 17px; }
}
/* Aging in Place hero: no small text (>=22px desktop, >=20px mobile) */
body[data-page="aging-in-place"] .page-hero .btn { font-size: 22px; }
@media (max-width: 700px) {
  body[data-page="aging-in-place"] .page-hero .ldc-mark em { font-size: 4rem; }
  body[data-page="aging-in-place"] .page-hero .ldc-mark span { font-size: 1.28rem; }
  body[data-page="aging-in-place"] .page-hero .btn { font-size: 20px; }
}

/* Aging in Place: one obvious "Book an assessment" button style */
body[data-page="aging-in-place"] .btn.btn-book { display: inline-flex; align-items: center; justify-content: center; padding: 16px 32px; border-radius: 10px; border: 2px solid #111; background: #111; color: #fff; font-size: 20px; font-weight: 600; letter-spacing: 0.06em; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,0.18); transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s; }
body[data-page="aging-in-place"] .btn.btn-book:hover, body[data-page="aging-in-place"] .btn.btn-book:focus-visible { background: #3a3a3a; border-color: #3a3a3a; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.28); }
body[data-page="aging-in-place"] .page-hero .btn.btn-book { background: #fff; color: #111; border-color: #fff; font-size: 22px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
body[data-page="aging-in-place"] .page-hero .btn.btn-book:hover, body[data-page="aging-in-place"] .page-hero .btn.btn-book:focus-visible { background: #ececec; border-color: #ececec; color: #000; }
body[data-page="aging-in-place"] .btn.btn-book:focus-visible { outline: 3px solid #d3bd29; outline-offset: 3px; }
@media (max-width: 700px) { body[data-page="aging-in-place"] .page-hero .btn.btn-book { font-size: 20px; } }
/* Aging in Place hero: centered single column */
body[data-page="aging-in-place"] .page-hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
body[data-page="aging-in-place"] .page-hero h1 { max-width: 18ch; margin-left: auto; margin-right: auto; text-align: center; text-shadow: 0 2px 18px rgba(0,0,0,0.35); }
body[data-page="aging-in-place"] .page-hero .btn-row { justify-content: center; }

/* Aging in Place: "Where are you" cards as links with icons */
body[data-page="aging-in-place"] a.journey-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; cursor: pointer; border-radius: 10px; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
body[data-page="aging-in-place"] .journey-icon { width: 46px; height: 46px; color: #111; margin-bottom: 0.9rem; flex-shrink: 0; }
body[data-page="aging-in-place"] .journey-cue { margin-top: auto; padding-top: 1rem; font-size: 18px; font-weight: 600; color: #111; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
body[data-page="aging-in-place"] a.journey-card:hover, body[data-page="aging-in-place"] a.journey-card:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,0.14); border-color: #111; }
body[data-page="aging-in-place"] a.journey-card:hover .journey-cue { text-decoration-color: #d3bd29; }
body[data-page="aging-in-place"] a.journey-card:focus-visible { outline: 3px solid #d3bd29; outline-offset: 3px; }
body[data-page="aging-in-place"] #services .process-step { scroll-margin-top: 120px; }
body[data-page="aging-in-place"] #services .process-step:target { box-shadow: 0 0 0 3px #d3bd29; }
@media (max-width: 700px) { body[data-page="aging-in-place"] .journey-cue { font-size: 17px; } }

/* Aging in Place: credentials as chips */
body[data-page="aging-in-place"] .cred-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0 0; padding: 0; }
body[data-page="aging-in-place"] .cred-chip { display: inline-flex; align-items: center; padding: 0.45rem 1rem; border: 1px solid #bdbdbd; border-radius: 999px; background: #fff; color: #4a4a4a; font-size: 18px; font-weight: 400; line-height: 1.2; }
body[data-page="aging-in-place"] .cred-chip abbr { text-decoration: none; border: 0; cursor: help; }
@media (max-width: 700px) { body[data-page="aging-in-place"] .cred-chip { font-size: 17px; padding: 0.4rem 0.85rem; } }

/* Aging in Place: service cards with Best for, highlighted gain and own button */
body[data-page="aging-in-place"] .svc-card { display: flex; flex-direction: column; }
body[data-page="aging-in-place"] .svc-card .svc-best { font-size: 18px; color: #1a1a1a; margin: 0.2rem 0 0.8rem; }
body[data-page="aging-in-place"] .svc-card .aip-gain { display: flex; gap: 0.75rem; align-items: flex-start; margin: 1rem 0 1.3rem; padding: 0.9rem 1rem; background: #f6f5ef; border-left: 4px solid #d3bd29; border-radius: 6px; }
body[data-page="aging-in-place"] .svc-card .aip-gain p { margin: 0; font-size: 18px; color: #1a1a1a; }
body[data-page="aging-in-place"] .svc-card .gain-check { flex-shrink: 0; width: 26px; height: 26px; color: #111; margin-top: 1px; }
body[data-page="aging-in-place"] .svc-card .svc-btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 700px) {
  body[data-page="aging-in-place"] .svc-card .svc-best, body[data-page="aging-in-place"] .svc-card .aip-gain p { font-size: 17px; }
  body[data-page="aging-in-place"] .svc-card .svc-btn { align-self: stretch; }
}

/* Aging in Place: dark "A different kind of perspective" section */
body[data-page="aging-in-place"] .section.aip-dark { background: #111; color: #f5f5f2; }
body[data-page="aging-in-place"] .section.aip-dark h2 { color: #fff; }
body[data-page="aging-in-place"] .section.aip-dark .eyebrow { color: #e8e8e3; }
body[data-page="aging-in-place"] .section.aip-dark .eyebrow::after, body[data-page="aging-in-place"] .section.aip-dark .section-head::after { background: #e8e8e3; border-color: #e8e8e3; }
body[data-page="aging-in-place"] .section.aip-dark p.lede { color: #f5f5f2; }
body[data-page="aging-in-place"] .section.aip-dark .btn { background: #fff; color: #111; border: 2px solid #fff; border-radius: 10px; padding: 16px 32px; font-size: 20px; }
body[data-page="aging-in-place"] .section.aip-dark .btn:hover, body[data-page="aging-in-place"] .section.aip-dark .btn:focus-visible { background: #e6e6e6; border-color: #e6e6e6; color: #000; }
body[data-page="aging-in-place"] .section.aip-dark .btn:focus-visible { outline: 3px solid #d3bd29; outline-offset: 3px; }
@media (max-width: 700px) { body[data-page="aging-in-place"] .section.aip-dark .eyebrow { font-size: 18px; } }

/* Aging in Place: "Why Molly?" heading in the dark section */
body[data-page="aging-in-place"] .aip-dark .why-head { text-align: center; margin-left: auto; margin-right: auto; }
body[data-page="aging-in-place"] .aip-dark .why-head .eyebrow::after { margin-left: auto; margin-right: auto; }
body[data-page="aging-in-place"] .aip-dark .why-head h2 { font-family: var(--font-serif); font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1.05; color: #fff; margin: 0.3rem 0 0.8rem; }
body[data-page="aging-in-place"] .aip-dark .why-value { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.3; color: #f5f5f2; max-width: 30ch; margin: 0 auto 2rem; }
/* Aging in Place "Why Molly?": larger, wider body on desktop only */
@media (min-width: 900px) {
  body[data-page="aging-in-place"] .aip-dark > .wrap { max-width: 1000px !important; }
  body[data-page="aging-in-place"] .aip-dark p.lede { font-size: 23.5px; line-height: 1.6; max-width: 1000px; }
  body[data-page="aging-in-place"] .aip-dark .btn-row { margin-top: 2.2rem; }
  body[data-page="aging-in-place"] .section.aip-dark .btn { font-size: 22px; padding: 18px 38px; }
}
/* Aging in Place "Why Molly?": elegant, legible serif body on desktop only */
@media (min-width: 900px) {
  body[data-page="aging-in-place"] .aip-dark p.lede { font-family: "Fraunces", serif; font-weight: 400; font-style: normal; font-optical-sizing: none; font-variation-settings: "opsz" 20, "SOFT" 0, "WONK" 0; font-size: 26.5px; line-height: 1.6; letter-spacing: 0.005em; color: #f7f6f2; }
}

/* Aging in Place "Why Molly?" as a personal note */
body[data-page="aging-in-place"] .aip-dark .why-photo { display: block; width: 120px; height: 120px; margin: 0 auto 2rem; border-radius: 50%; overflow: hidden; border: 3px solid #f7f6f2; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
body[data-page="aging-in-place"] .aip-dark .why-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
body[data-page="aging-in-place"] .aip-dark .why-signoff { font-family: "Fraunces", serif; font-style: italic; font-weight: 400; font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 144; font-size: 2.2rem; line-height: 1.1; color: #fff; margin: 1.4rem 0 0.4rem; }
@media (min-width: 900px) {
  body[data-page="aging-in-place"] .aip-dark > .wrap { max-width: 800px !important; }
  body[data-page="aging-in-place"] .aip-dark .why-photo { width: 140px; height: 140px; }
  body[data-page="aging-in-place"] .aip-dark .why-signoff { font-size: 2.8rem; }
}
body[data-page="aging-in-place"] .why-photo { overflow: hidden; }
body[data-page="aging-in-place"] .why-photo img { transform: scale(2.1); transform-origin: 50% 16%; }

/* ——— Molly email updates (Oct 12): readable steps, home bio, Community ——— */
.path-steps li { font-size: 1.2rem; line-height: 1.45; grid-template-columns: 2.4rem 1fr; }
.path-steps li::before { font-size: 1rem; }
.path-steps .path-more a { font-size: 1.1rem; }
.home-bio .lede + .lede { margin-top: 0.9rem; }
.community-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
}
.community-list li {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--sage-deep);
  padding: 1.3rem 1.5rem; font-size: 1.25rem; line-height: 1.45; color: var(--ink);
}
@media (max-width: 700px) { .community-list { grid-template-columns: 1fr; } }

/* ——— Living Design Company logo icon (replaces the MS monogram) ——— */
.brand-horse.is-emblem,
body[data-theme] .brand-horse.is-emblem,
body[data-theme] .footer-brand .brand-horse.is-emblem,
body[data-theme] .letter-stamp,
body[data-theme] .letter-dock-mark,
body[data-theme] .letter-dock-crest,
.about-seal { filter: none; transform: none; }
.brand-horse.is-emblem { height: 56px; width: auto; }
.footer-brand .brand-horse.is-emblem { height: 56px; }
.about-seal { width: 170px; height: auto; }
.letter-stamp { height: auto; }
.letter-dock-mark { width: 64px; height: auto; }
.letter-dock-crest-wrap { width: 56px; height: auto; }
.letter-dock-crest { width: 56px; height: auto; }
@media (max-width: 700px) { .brand-horse.is-emblem { height: 44px; } }
/* Temporary LDC logo comparison toggle */
img[data-ldc-option] { cursor: pointer; }
img[data-ldc-option]:focus-visible, a.brand:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* Buy/Sell 7-step cards: no small text */
body:is([data-page="buy"],[data-page="sell"]) .process-step p { font-size: 18px; line-height: 1.6; }
body:is([data-page="buy"],[data-page="sell"]) .process-step p + p { margin-top: 0.8rem; }
@media (max-width: 700px) { body:is([data-page="buy"],[data-page="sell"]) .process-step p { font-size: 17px; } }
.process-steps-head { margin: 0 auto 1.4rem; text-align: center; }