:root {
  --red: #d71920;
  --red-dark: #b90f18;
  --ink: #111111;
  --muted: #4d525a;
  --soft: #fbf9f5;
  --soft-2: #f7f1e8;
  --line: rgba(20, 25, 35, 0.12);
  --shadow: 0 18px 46px rgba(28, 34, 44, 0.12);
  --shadow-soft: 0 10px 28px rgba(28, 34, 44, 0.08);
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: Inter, Manrope, "Segoe UI", Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 4%, rgba(255, 255, 255, 0.9), transparent 34%),
    linear-gradient(135deg, #fcfaf7 0%, #fbf9f5 48%, #f6efe5 100%);
  font-family: var(--sans);
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
}

img,
svg {
  display: block;
}

/* Parked above the viewport and slid into view on focus, so keyboard users can
   jump past the header. Uses :focus rather than :focus-visible because the link
   must appear for any focus, including programmatic. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  color: #fff;
  background: var(--red);
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 0.18s ease;
}

.skip-link:focus {
  transform: translateY(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;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(252, 250, 247, 0.93);
  border-bottom: 1px solid rgba(20, 25, 35, 0.08);
  backdrop-filter: blur(18px);
}

.header-shell {
  width: min(1508px, calc(100% - 64px));
  min-height: 86px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  width: 102px;
  text-decoration: none;
}

.brand img {
  width: 96px;
  height: auto;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 58px);
}

.desktop-nav a {
  position: relative;
  font-size: 16px;
  font-weight: 650;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.18s ease;
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
  transform: scaleX(1);
}

/* Marks the page you are currently on. */
.desktop-nav .is-active {
  color: var(--red);
}

.desktop-nav .is-active::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #0e1014;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.phone-link svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.consultation-link,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0 24px;
  font-weight: 750;
  text-decoration: none;
  line-height: 1.1;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

.consultation-link,
.button-primary {
  color: #fff;
  background: var(--red);
  box-shadow: 0 10px 22px rgba(215, 25, 32, 0.18);
}

.consultation-link:hover,
.button-primary:hover {
  background: var(--red-dark);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(215, 25, 32, 0.22);
}

.button-secondary {
  color: #171717;
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(20, 25, 35, 0.28);
  box-shadow: 0 8px 22px rgba(28, 34, 44, 0.06);
}

.button-secondary:hover {
  border-color: rgba(215, 25, 32, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(28, 34, 44, 0.1);
}

.button svg {
  width: 22px;
  height: 22px;
  margin-right: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(215, 25, 32, 0.35);
  outline-offset: 4px;
}

.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(20, 25, 35, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
}

.menu-toggle-lines,
.menu-toggle-lines::before,
.menu-toggle-lines::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 10px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.menu-toggle-lines {
  position: relative;
}

.menu-toggle-lines::before,
.menu-toggle-lines::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-toggle-lines::before {
  top: -7px;
}

.menu-toggle-lines::after {
  top: 7px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-lines {
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-lines::before {
  transform: translateY(7px) rotate(90deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle-lines::after {
  opacity: 0;
}

.mobile-menu {
  position: fixed;
  inset: 86px 0 auto;
  z-index: 39;
  padding: 18px 20px 28px;
  background: rgba(252, 250, 247, 0.98);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(28, 34, 44, 0.16);
}

.mobile-menu nav {
  width: min(540px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 10px;
}

.mobile-menu a {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid rgba(20, 25, 35, 0.1);
  border-radius: 8px;
  background: #fff;
  font-weight: 760;
  text-decoration: none;
}

.mobile-menu .mobile-cta {
  justify-content: center;
  color: #fff;
  background: var(--red);
}

.hero-section {
  position: relative;
  min-height: calc(100vh - 86px);
  padding: 0 0 34px;
  overflow: hidden;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(252, 250, 247, 0.98) 0%, rgba(252, 250, 247, 0.94) 27%, rgba(252, 250, 247, 0.15) 55%, rgba(252, 250, 247, 0.34) 100%),
    radial-gradient(circle at 8% 8%, rgba(255, 255, 255, 0.85), transparent 30%);
  pointer-events: none;
  z-index: 1;
}

.hero-map {
  position: absolute;
  top: 0;
  right: 0;
  width: min(63vw, 1040px);
  height: 604px;
  opacity: 0.96;
}

/* The video takes the still's exact box, fit and crop, so replacing one with
   the other does not move the hero framing at all. */
.hero-map img,
.hero-map video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.hero-map video {
  display: block;
}

/* The still is only the fallback; the video's own poster covers the wait. */
.hero-map-still {
  display: none;
}

/* An autoplaying loop is exactly what this setting is asking us not to do.
   Show the still instead - it is the same file the poster uses, so nothing
   extra is fetched. */
@media (prefers-reduced-motion: reduce) {
  .hero-map video {
    display: none;
  }

  .hero-map-still {
    display: block;
  }
}

.hero-shell {
  position: relative;
  z-index: 2;
  width: min(1508px, calc(100% - 64px));
  margin: 0 auto;
  padding-top: clamp(34px, 4.6vh, 50px);
}

.hero-copy {
  width: min(800px, 52vw);
}

.eyebrow {
  position: relative;
  margin: 0 0 22px;
  color: var(--red);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.eyebrow::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  margin-top: 13px;
  background: currentColor;
}

.center-copy .eyebrow::after {
  margin-left: auto;
  margin-right: auto;
}

h1,
h2,
h3 {
  margin: 0;
}

h1,
h2 {
  font-family: var(--serif);
  font-weight: 760;
  letter-spacing: 0;
}

.hero-copy h1 {
  max-width: 800px;
  font-size: clamp(55px, 4.28vw, 70px);
  line-height: 0.97;
}

.hero-copy h1 span {
  color: var(--red);
}

.hero-lede {
  max-width: 545px;
  margin: 14px 0 0;
  color: #323742;
  font-size: 19px;
  line-height: 1.42;
}

.hero-buttons {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.credibility-line {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  color: #171a20;
  font-size: 15px;
}

.credibility-line i {
  width: 1px;
  height: 25px;
  background: rgba(20, 25, 35, 0.28);
}

.mini-icon {
  width: 24px;
  height: 24px;
  color: #111;
}

.mini-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pathway-shell {
  position: relative;
  z-index: 3;
  width: min(1560px, calc(100% - 58px));
  margin: clamp(18px, 2.4vh, 26px) auto 0;
}

.pathway-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.path-card {
  position: relative;
  min-height: 188px;
  height: 268px;
  display: grid;
  grid-template-columns: 59% 41%;
  overflow: hidden;
  color: #12151b;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(20, 25, 35, 0.12);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
}

.path-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--red);
  z-index: 2;
}

.path-card-body {
  position: relative;
  z-index: 2;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 18px 16px;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.96) 70%, rgba(255, 255, 255, 0) 70.5%);
}

.path-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-bottom: 7px;
  color: #101318;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(20, 25, 35, 0.12);
  border-radius: 50%;
}

.path-icon svg,
.trust-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.path-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--red);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.path-card h3 {
  max-width: 260px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.05;
  font-weight: 730;
}

.path-card p {
  max-width: 245px;
  display: -webkit-box;
  max-height: none;
  margin: 9px 0 12px;
  color: #3f4652;
  font-size: 12px;
  line-height: 1.34;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.path-cta {
  position: static;
  margin-top: auto;
  color: var(--red);
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  line-height: 1.25;
}

.path-cta span {
  display: inline-block;
  margin-left: 7px;
  transition: transform 0.16s ease;
}

.path-card:hover .path-cta span {
  transform: translateX(4px);
}

.path-image {
  position: relative;
  min-width: 0;
}

.path-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.path-image::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -24px;
  width: 58px;
  background: #fff;
  transform: skewX(-13deg);
  transform-origin: top;
}

.trust-shell {
  position: relative;
  z-index: 3;
  width: min(1560px, calc(100% - 58px));
  margin: 16px auto 0;
}

.trust-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(20, 25, 35, 0.1);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(28, 34, 44, 0.08);
}

.trust-item {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 20px;
  border-right: 1px solid rgba(20, 25, 35, 0.12);
}

.trust-item:last-child {
  border-right: 0;
}

/* .trust-item span sets display:block and outranks a bare .trust-icon, which
   killed the centring and left the glyph pinned to the top of the circle. */
.trust-item .trust-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  color: #111;
  border: 1px solid rgba(20, 25, 35, 0.12);
  border-radius: 50%;
}

.trust-item strong {
  display: block;
  margin-bottom: 3px;
  font-size: 20px;
  line-height: 1.05;
}

.trust-item span {
  display: block;
  color: #363c47;
  font-size: 13px;
  line-height: 1.2;
}

.main-section {
  position: relative;
  padding: clamp(34px, 3.6vw, 52px) 0;
}

.section-head {
  width: min(980px, calc(100% - 40px));
  margin: 0 auto clamp(18px, 2vw, 28px);
  text-align: center;
}

.section-head h2,
.final-cta-copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(38px, 3.55vw, 54px);
  line-height: 0.96;
  font-weight: 760;
}

.section-head h2 span,
.final-cta-copy h2 span {
  color: var(--red);
}

.section-head > p:not(.eyebrow) {
  max-width: 640px;
  margin: 12px auto 0;
  color: #303642;
  font-size: 17px;
  line-height: 1.55;
}

.center-eyebrow::after {
  margin-left: auto;
  margin-right: auto;
}

.feature-icon,
.process-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--red);
  background: #fff;
  border: 1px solid rgba(215, 25, 32, 0.18);
  box-shadow: 0 10px 24px rgba(28, 34, 44, 0.06);
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
}

.feature-icon svg,
.process-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-kicker {
  margin: 0 0 12px;
  color: var(--red);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.insight-row {
  width: min(760px, calc(100% - 40px));
  margin: 0 auto 30px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
}

.insight-row article {
  display: flex;
  align-items: center;
  gap: 16px;
}

.insight-row h3,
.final-benefits h3 {
  margin: 0 0 6px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 850;
}

.insight-row p,
.final-benefits p {
  margin: 0;
  color: #424955;
  font-size: 13px;
  line-height: 1.45;
}

.neighborhood-showcase {
  width: 100%;
  height: clamp(340px, 19vw, 382px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  background: #edf6f7;
}

.showcase-photo,
.showcase-map {
  position: relative;
  height: clamp(340px, 19vw, 382px);
  overflow: hidden;
}

.showcase-photo > img,
.showcase-map > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase-photo > img {
  object-position: center right;
}

.showcase-map > img {
  opacity: 0.92;
  filter: saturate(0.92) brightness(1.02);
  object-fit: fill;
}

.map-pins {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.map-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #1f2630;
  text-decoration: none;
  transform: translate(-9px, -21px);
  transition: transform 0.16s ease, z-index 0s linear;
}

.map-pin:hover,
.map-pin:focus-visible {
  z-index: 5;
  transform: translate(-9px, -24px);
}

.map-pin-top {
  transform: translate(-9px, -8px);
}

.map-pin-top:hover,
.map-pin-top:focus-visible {
  transform: translate(-9px, -11px);
}

.map-pin-compact .pin-label {
  padding-inline: 8px;
  font-size: 11px;
}

.map-pin-gardens .pin-label {
  transform: translate(4px, 4px);
}

.map-pin-lakes .pin-label {
  transform: translate(-18px, 10px);
}

.map-pin-north-miami .pin-label {
  transform: translate(4px, 8px);
}

.map-pin-hialeah .pin-label {
  transform: translate(-42px, -23px);
}

.map-pin-doral .pin-label {
  transform: translate(-8px, 11px);
}

.pin-marker {
  position: relative;
  width: 17px;
  height: 21px;
  flex: 0 0 17px;
  background: linear-gradient(180deg, #dc1d28, #a90d16);
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 4px 8px rgba(112, 19, 24, 0.22);
  transform: rotate(-45deg);
}

.pin-marker::after {
  content: "";
  position: absolute;
  inset: 4.5px;
  background: #fff;
  border-radius: 50%;
}

.pin-label {
  padding: 5px 9px;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(20, 25, 35, 0.1);
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(28, 34, 44, 0.12);
}

.map-pin-strong {
  z-index: 4;
}

.featured-neighborhood,
.map-card {
  position: absolute;
  padding: 28px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(20, 25, 35, 0.12);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.featured-neighborhood {
  left: clamp(28px, 10vw, 170px);
  top: 36px;
  width: min(302px, calc(100% - 56px));
  padding: 18px 18px 14px;
}

.map-card {
  z-index: 3;
  right: clamp(52px, 7vw, 132px);
  bottom: 20px;
  width: min(216px, calc(100% - 48px));
  padding: 18px;
}

.featured-neighborhood h3,
.neighborhood-mini h3,
.resource-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1.04;
  font-weight: 740;
}

.featured-neighborhood h3 {
  font-size: 23px;
  line-height: 1;
}

.featured-neighborhood > p:not(.card-kicker) {
  margin: 10px 0;
  font-size: 12.5px;
  line-height: 1.42;
}

.featured-neighborhood .text-link {
  font-size: 12px;
}

.map-card p:not(.card-kicker) {
  margin: 8px 0 10px;
  font-size: 12.5px;
  line-height: 1.38;
}

.map-card .text-link {
  font-size: 12.5px;
}

.featured-neighborhood p:not(.card-kicker),
.map-card p:not(.card-kicker),
.neighborhood-mini p:not(.card-kicker),
.resource-card p:not(.card-kicker) {
  color: #3d4450;
  line-height: 1.48;
}

.feature-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 14px -4px 0;
  padding: 11px 4px 0;
  border-top: 1px solid rgba(20, 25, 35, 0.1);
}

.feature-stats span {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 5px;
  align-items: center;
  min-width: 0;
}

.feature-stats svg {
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  padding: 4px;
  color: #6b7280;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  border: 1px solid rgba(20, 25, 35, 0.12);
  border-radius: 50%;
}

.feature-stats small,
.feature-stats strong {
  display: block;
  min-width: 0;
  white-space: nowrap;
}

.feature-stats small {
  color: #7b8492;
  font-size: 6.6px;
  line-height: 1.1;
}

.feature-stats strong {
  color: #11151b;
  font-size: 7.2px;
  line-height: 1.2;
}

.neighborhood-card-row {
  width: min(1436px, calc(100% - 44px));
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 52px;
  align-items: center;
  gap: 18px;
}

.neighborhood-mini,
.resource-card {
  display: grid;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(20, 25, 35, 0.12);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.neighborhood-mini {
  grid-template-columns: 40% 1fr;
  height: 180px;
}

.neighborhood-mini img,
.resource-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.neighborhood-mini > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 16px 17px 15px;
}

.neighborhood-mini h3 {
  font-size: 19px;
  line-height: 1.01;
}

.neighborhood-mini p:not(.card-kicker) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-block: 8px;
  font-size: 12.5px;
  line-height: 1.34;
}

.neighborhood-mini .text-link {
  margin-top: auto;
  font-size: 12.5px;
}

@media (max-width: 1500px) and (min-width: 901px) {
  .neighborhood-mini {
    grid-template-columns: 36% 1fr;
  }

  .neighborhood-mini > div {
    padding-inline: 14px;
  }

  .neighborhood-mini .text-link {
    font-size: 11.5px;
  }
}

.neighborhood-next {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  color: var(--red);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
}

.neighborhood-next span {
  transform: translateY(-1px);
  font-size: 36px;
  line-height: 1;
}

.section-action-bar {
  width: min(1040px, calc(100% - 44px));
  min-height: 72px;
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: 48px 1fr auto auto;
  align-items: center;
  gap: 22px;
  padding: 16px 22px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(20, 25, 35, 0.12);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.action-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--red);
  background: #fff;
  border: 1px solid rgba(215, 25, 32, 0.18);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(28, 34, 44, 0.06);
}

.action-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.section-action-bar p {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 740;
}

.section-action-bar span {
  color: #525966;
  font-size: 14px;
}

.process-section {
  background: linear-gradient(180deg, rgba(255,255,255,0.54), rgba(251,249,245,0.86));
}

.process-steps {
  position: relative;
  width: min(1220px, calc(100% - 44px));
  margin: 0 auto 42px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px;
}

.process-steps::before {
  content: "";
  position: absolute;
  top: 92px;
  left: 7%;
  right: 7%;
  height: 1px;
  background: rgba(20, 25, 35, 0.18);
}

.process-steps article {
  position: relative;
  text-align: center;
}

.process-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 30px;
  border-radius: 50%;
}

.process-steps article::after {
  content: "";
  position: absolute;
  top: 88px;
  left: 50%;
  width: 9px;
  height: 9px;
  background: var(--red);
  border-radius: 50%;
  transform: translateX(-50%);
}

.process-steps strong {
  display: block;
  color: var(--red);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.process-steps h3 {
  margin: 8px 0 10px;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.05;
}

.process-steps p {
  max-width: 260px;
  margin: 0 auto;
  color: #424955;
  font-size: 15px;
  line-height: 1.5;
}

.testimonial-grid {
  width: min(1190px, calc(100% - 44px));
  margin: 0 auto 28px;
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 22px;
  align-items: stretch;
}

.testimonial-card {
  min-height: 242px;
  padding: 34px 52px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(20, 25, 35, 0.12);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.quote-mark {
  margin: 0 0 -4px;
  color: rgba(20, 25, 35, 0.1);
  font-family: Georgia, serif;
  font-size: 82px;
  line-height: 0.6;
}

.testimonial-card blockquote {
  margin: 0;
  max-width: 720px;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.28;
  font-weight: 720;
}

.testimonial-card blockquote::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  margin-top: 20px;
  background: var(--red);
}

.testimonial-footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
}

.testimonial-footer strong,
.testimonial-footer small {
  display: block;
}

.testimonial-person {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.testimonial-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  background:
    linear-gradient(135deg, rgba(215, 25, 32, 0.92), rgba(15, 18, 24, 0.82)),
    url("section-process-consultation-v2.webp") center / cover;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(20, 25, 35, 0.14);
}

.testimonial-footer small {
  margin-top: 4px;
  color: #6a7280;
}

.stars {
  color: var(--red);
  font-size: 21px;
  letter-spacing: 0.12em;
}

.testimonial-image {
  width: 100%;
  height: 100%;
  min-height: 256px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.section-trust,
.cta-trust {
  width: min(1190px, calc(100% - 44px));
  margin: 0 auto;
}

.resource-grid {
  width: min(1260px, calc(100% - 44px));
  margin: 0 auto 38px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.resource-card {
  grid-template-columns: 62% 38%;
  height: 292px;
}

.resource-card > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 22px;
  background: linear-gradient(110deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.98) 72%, rgba(255,255,255,0) 72.5%);
  z-index: 2;
}

.resource-card .feature-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}

.resource-card h3 {
  font-size: 21px;
  line-height: 1.02;
}

.resource-card p:not(.card-kicker) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.36;
  margin-block: 10px;
}

.resource-card .card-kicker {
  margin-bottom: 8px;
  font-size: 10px;
}

.resource-card .text-link {
  font-size: 14px;
}

.guides-section .section-head {
  width: min(1180px, calc(100% - 40px));
}

.guides-section .section-head h2 {
  font-size: clamp(38px, 3.35vw, 54px);
}

.resource-card .text-link {
  margin-top: auto;
}

.final-cta-panel {
  position: relative;
  width: min(1560px, calc(100% - 72px));
  min-height: 372px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.7fr 0.46fr 0.7fr;
  gap: 30px;
  align-items: center;
  overflow: hidden;
  padding: 36px 64px 30px 300px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(20, 25, 35, 0.1);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.final-cta-panel > img {
  position: absolute;
  inset: 0 auto 0 0;
  width: 430px;
  height: 100%;
  object-fit: cover;
  object-position: 42% center;
  opacity: 0.78;
  mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
}

.final-cta-copy {
  position: relative;
  z-index: 2;
}

.final-cta-copy h2 {
  max-width: 710px;
  font-size: clamp(36px, 2.8vw, 44px);
}

.final-cta-copy p:not(.eyebrow) {
  color: #4b5360;
  font-size: 17px;
  line-height: 1.55;
}

.final-cta-contact {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 20px;
  padding-inline: 34px;
  border-inline: 1px solid rgba(20, 25, 35, 0.12);
}

.final-cta-contact .phone-link {
  font-family: var(--serif);
  font-size: 28px;
}

.final-benefits {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 18px;
}

.final-benefits article {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(20, 25, 35, 0.1);
}

.final-benefits article:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.cta-trust {
  position: relative;
  grid-column: 1 / -1;
  z-index: 3;
  width: 100%;
  margin-top: 8px;
}

.section {
  position: relative;
  padding: clamp(70px, 8vw, 118px) 0;
}

.section-copy h2,
.split-copy h2,
.program-card-large h2,
.cta-box h2 {
  font-size: clamp(40px, 4.2vw, 66px);
  line-height: 0.98;
}

.neighborhood-copy h2 {
  font-size: clamp(38px, 3.35vw, 52px);
  line-height: 1;
}

.section-copy p,
.neighborhood-copy p,
.split-card p,
.program-card-large p,
.cta-box p {
  color: #444b56;
  font-size: 18px;
  line-height: 1.62;
}

.section-narrow {
  width: min(1160px, calc(100% - 44px));
  margin: 0 auto;
}

.center-copy {
  max-width: 840px;
  margin: 0 auto 34px;
  text-align: center;
}

.service-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.service-lanes article {
  min-height: 210px;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.service-lanes span {
  display: block;
  margin-bottom: 18px;
  color: var(--red);
  font-weight: 900;
  letter-spacing: 0.08em;
}

.service-lanes h3 {
  font-family: var(--serif);
  font-size: 31px;
}

.service-lanes p {
  color: #4f5662;
  line-height: 1.55;
}

.section-wide {
  width: min(1460px, calc(100% - 36px));
  margin: 0 auto;
  padding-top: 46px;
}

.neighborhood-panel {
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: 34px;
  align-items: stretch;
}

.neighborhood-copy {
  padding: 42px;
  background: #11151b;
  color: #fff;
  border-radius: 8px;
}

.neighborhood-copy p {
  color: rgba(255, 255, 255, 0.78);
}

.neighborhood-copy .text-link {
  color: #fff;
}

.neighborhood-image {
  min-height: 410px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.neighborhood-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--red);
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}

.text-link span {
  transition: transform 0.16s ease;
}

.text-link:hover span {
  transform: translateX(4px);
}

.section-split {
  width: min(1260px, calc(100% - 44px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 28px;
  align-items: center;
}

.split-card {
  padding: 38px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.section-programs {
  width: min(1380px, calc(100% - 36px));
  margin: 0 auto;
  padding-top: 50px;
}

.program-card-large {
  display: grid;
  grid-template-columns: 44% 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.program-card-large img {
  width: 100%;
  aspect-ratio: 1.2 / 1;
  object-fit: cover;
  border-radius: 6px;
}

.program-card-large div {
  padding: 22px 34px 22px 0;
}

.section-cta {
  width: min(1040px, calc(100% - 44px));
  margin: 0 auto;
  padding-bottom: 90px;
}

.cta-box {
  padding: clamp(34px, 5vw, 62px);
  text-align: center;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(215, 25, 32, 0.96), rgba(169, 13, 22, 0.96)),
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.28), transparent 34%);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.cta-box .eyebrow,
.cta-box p {
  color: #fff;
}

.cta-box .eyebrow::after {
  margin-left: auto;
  margin-right: auto;
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.cta-box .button-primary {
  background: #111;
}

.cta-box .button-secondary {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.48);
}

@media (max-width: 1320px) {
  .header-shell {
    width: min(100% - 42px, 1280px);
    gap: 18px;
  }

  .desktop-nav {
    gap: 26px;
  }

  .consultation-link {
    padding-inline: 18px;
  }

  .hero-copy h1 {
    font-size: clamp(56px, 5vw, 68px);
  }

  .path-card {
    grid-template-columns: 1fr 38%;
  }

  .path-card h3 {
    font-size: 24px;
  }
}

@media (max-width: 1180px) {
  .desktop-nav,
  .header-actions {
    display: none;
  }

  .header-shell {
    grid-template-columns: auto 1fr auto;
    min-height: 76px;
  }

  .menu-toggle {
    display: inline-flex;
    grid-column: 3;
  }

  .mobile-menu {
    inset: 76px 0 auto;
  }

  .hero-section {
    padding-top: 0;
  }

  .hero-map {
    top: 230px;
    right: -48px;
    width: 68vw;
    opacity: 0.58;
  }

  .hero-shell,
  .pathway-shell,
  .trust-shell {
    width: min(100% - 40px, 1080px);
  }

  .hero-copy {
    width: min(680px, 70vw);
  }

  .pathway-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .path-card {
    height: auto;
    min-height: 238px;
  }

  .trust-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 2 x 2: no border down the right edge, none under the bottom row */
  .trust-item:nth-child(even) {
    border-right: 0;
  }

  .trust-item:nth-child(-n+2) {
    border-bottom: 1px solid rgba(20, 25, 35, 0.12);
  }

  .insight-row,
  .process-steps {
    width: min(100% - 40px, 900px);
  }

  .neighborhood-card-row,
  .resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .neighborhood-next {
    display: none;
  }

  .process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px 24px;
  }

  .process-steps::before {
    display: none;
  }

  .testimonial-grid,
  .final-cta-panel {
    grid-template-columns: 1fr;
  }

  .final-cta-panel {
    min-height: 0;
    padding: 330px 34px 34px;
  }

  .final-cta-panel > img {
    inset: 0 0 auto;
    width: 100%;
    height: 310px;
    object-position: center 48%;
    mask-image: linear-gradient(180deg, #000 0%, #000 66%, transparent 100%);
  }

  .final-cta-contact {
    padding: 24px 0;
    border-inline: 0;
    border-block: 1px solid rgba(20, 25, 35, 0.12);
  }
}

@media (max-width: 900px) {
  .hero-section {
    min-height: 0;
    padding-bottom: 28px;
  }

  .hero-shell {
    padding-top: 34px;
  }

  .hero-copy {
    width: 100%;
  }

  .hero-copy h1 {
    max-width: 720px;
    font-size: clamp(45px, 12vw, 74px);
  }

  .hero-lede {
    max-width: 630px;
    font-size: 18px;
  }

  .hero-map {
    position: relative;
    top: auto;
    right: auto;
    z-index: 2;
    width: min(100% - 28px, 720px);
    height: 360px;
    margin: 26px auto 0;
    opacity: 1;
    border: 1px solid rgba(20, 25, 35, 0.08);
    border-radius: 10px;
    overflow: hidden;
  }

  .hero-section::before {
    background: linear-gradient(180deg, rgba(252, 250, 247, 0.98), rgba(252, 250, 247, 0.78));
  }

  .pathway-shell {
    margin-top: 26px;
  }

  .path-card {
    min-height: 238px;
  }

  .trust-item {
    padding: 14px 16px;
  }

  .service-lanes,
  .neighborhood-panel,
  .section-split,
  .program-card-large {
    grid-template-columns: 1fr;
  }

  .neighborhood-image {
    min-height: 290px;
  }

  .program-card-large div {
    padding: 0 10px 20px;
  }

  .main-section {
    padding: 68px 0;
  }

  .section-head h2,
  .final-cta-copy h2 {
    font-size: clamp(38px, 8vw, 58px);
  }

  .insight-row {
    grid-template-columns: 1fr;
    max-width: 560px;
    gap: 18px;
  }

  .neighborhood-showcase {
    width: min(100% - 24px, 720px);
    margin: 0 auto;
    grid-template-columns: 1fr;
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
  }

  .showcase-photo,
  .showcase-map {
    min-height: 330px;
  }

  .featured-neighborhood {
    left: 18px;
    right: 18px;
    width: auto;
    top: 18px;
  }

  /* The card used to float over the bottom of the map at these widths. Because
     it is translucent, the pins underneath ghosted through it - which reads as
     a rendering fault - and it covered most of them, while the card's own copy
     says "click on any neighborhood". Measured: 5 of 12 pins reachable on a
     phone, 7 of 12 on a tablet, against 12 of 12 on desktop.

     Below the map instead. The container has no fixed height here, so it grows
     and nothing is clipped. */
  .showcase-map {
    /* One source of truth for the map's height. `.map-pins` is inset:0, so the
       moment this container grew to hold the card as well, the pin layer grew
       with it and the pins spread down over the card's own text. Both the image
       and the pin layer are pinned to this value so they cannot drift apart. */
    --map-h: clamp(300px, 44vw, 360px);
    height: auto;
  }

  .showcase-map > img {
    height: var(--map-h);
  }

  .map-pins {
    height: var(--map-h);
    bottom: auto;
  }

  .map-card {
    position: static;
    width: auto;
    margin: 14px 18px 18px;
  }

  .neighborhood-card-row,
  .resource-grid {
    grid-template-columns: 1fr;
    width: min(100% - 24px, 620px);
  }

  .neighborhood-mini {
    grid-template-columns: 42% 1fr;
    height: 188px;
  }

  .section-action-bar {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .action-icon {
    display: none;
  }

  .testimonial-grid {
    width: min(100% - 24px, 720px);
  }

  .section-trust,
  .cta-trust {
    width: min(100% - 24px, 720px);
  }

  .resource-card {
    min-height: 270px;
  }

  .final-cta-panel {
    width: min(100% - 24px, 720px);
  }
}

@media (max-width: 640px) {
  .header-shell {
    width: calc(100% - 24px);
    min-height: 70px;
  }

  .brand {
    width: 88px;
  }

  .brand img {
    width: 84px;
  }

  .mobile-menu {
    inset: 70px 0 auto;
  }

  .hero-shell,
  .pathway-shell,
  .trust-shell {
    width: calc(100% - 24px);
  }

  .hero-copy h1 {
    font-size: clamp(42px, 13vw, 58px);
  }

  .hero-buttons {
    display: grid;
    gap: 12px;
  }

  .button {
    width: 100%;
    min-height: 52px;
    padding-inline: 16px;
  }

  .credibility-line {
    align-items: flex-start;
    flex-wrap: wrap;
    font-size: 14px;
  }

  .credibility-line i {
    display: none;
  }

  .hero-map {
    width: calc(100% - 24px);
    height: 286px;
  }

  .pathway-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .path-card {
    min-height: 0;
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }

  .path-card-body {
    flex: 0 0 auto;
    height: auto;
    z-index: auto;
    padding: 22px;
    overflow: visible;
    background: #fff;
  }

  .path-card h3,
  .path-card p {
    max-width: none;
  }

  .path-card p {
    display: block;
    max-height: none;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  .path-cta {
    position: static;
  }

  .path-image {
    display: block;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    overflow: hidden;
    height: 184px;
  }

  .path-image::before {
    display: none;
  }

  .trust-bar {
    grid-template-columns: 1fr;
  }

  .trust-item {
    justify-content: flex-start;
    border-right: 0;
    border-bottom: 1px solid rgba(20, 25, 35, 0.12);
  }

  .trust-item:last-child {
    border-bottom: 0;
  }

  .section {
    padding: 58px 0;
  }

  .section-narrow,
  .section-wide,
  .section-split,
  .section-programs,
  .section-cta {
    width: calc(100% - 24px);
  }

  .section-copy h2,
  .neighborhood-copy h2,
  .split-copy h2,
  .program-card-large h2,
  .cta-box h2 {
    font-size: clamp(35px, 10vw, 48px);
  }

  .service-lanes article,
  .neighborhood-copy,
  .split-card,
  .program-card-large,
  .cta-box {
    padding: 24px;
  }

  .program-card-large {
    padding: 14px;
  }

  .section-head {
    width: calc(100% - 24px);
  }

  .section-head h2,
  .final-cta-copy h2 {
    font-size: clamp(35px, 10vw, 48px);
  }

  .section-head > p:not(.eyebrow) {
    font-size: 16px;
  }

  .showcase-photo,
  .showcase-map {
    min-height: 420px;
  }

  .featured-neighborhood,
  .map-card {
    padding: 22px;
  }

  /* The pins are placed by percentage, so the narrower the map the closer they
     sit. At 12px the labels are wide enough that Miami Gardens covered
     Aventura and Doral covered Hialeah - the pin underneath could not be
     tapped at all. Narrowing the label is enough to separate them; the pin
     positions themselves stay untouched. */
  .pin-label {
    padding: 4px 7px;
    font-size: 10.5px;
  }

  .map-pin-compact .pin-label {
    padding-inline: 6px;
    font-size: 10px;
  }

  /* Aventura and Miami Gardens are the closest pair, and below ~400px their
     labels still overlap after the shrink - one of the two loses its centre to
     the other. Raising z-index only chooses which one loses, so it is not worth
     a rule. Both are reachable from the neighbourhoods page, which is where
     this card's "View Full Map" link goes. Left alone deliberately: separating
     them means moving a pin off the place it marks, and the map is accurate. */

  .neighborhood-mini,
  .resource-card {
    grid-template-columns: 1fr;
    height: auto;
  }

  .neighborhood-mini img {
    min-height: 170px;
  }

  .resource-card {
    min-height: 0;
  }

  .resource-card > div {
    padding: 24px;
    background: #fff;
  }

  .resource-card img {
    height: 190px;
  }

  .process-steps {
    grid-template-columns: 1fr;
    width: calc(100% - 24px);
  }

  .process-icon {
    margin-bottom: 18px;
  }

  .process-steps article::after {
    display: none;
  }

  .testimonial-card {
    padding: 28px 24px;
  }

  .testimonial-card blockquote {
    font-size: 21px;
  }

  .testimonial-footer {
    align-items: start;
    flex-direction: column;
  }

  .testimonial-image {
    min-height: 230px;
  }

  .final-cta-panel {
    padding: 250px 22px 24px;
  }

  .final-cta-panel > img {
    height: 238px;
    object-position: center center;
  }

  .final-cta-contact {
    justify-items: stretch;
  }

  .final-cta-contact .phone-link {
    justify-content: center;
    font-size: 24px;
  }

  .final-benefits article {
    align-items: flex-start;
  }

}

@media (max-width: 390px) {
  .hero-copy h1 {
    font-size: 40px;
  }

  .hero-lede {
    font-size: 16px;
  }

  .hero-map {
    height: 250px;
  }

  .path-image {
    height: 158px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------------------------------------------------------------------------
   Scroll reveal
   The hidden state is scoped to .js-reveal, which is set by an inline script in
   the document head. That keeps the effect a progressive enhancement: without
   JavaScript, or if main.js fails to load, the class is never applied (or is
   removed by the fallback timer) and every section renders normally.
   Gating on no-preference means reduced-motion users never get hidden content
   at all, rather than relying on JS to un-hide it.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition:
      opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .js-reveal [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }
}

/* Scroll-revealed sections are transparent until observed. Printing never
   scrolls, so force them visible or the sheet comes out blank below the fold. */
@media print {
  .js-reveal [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

[id]{scroll-margin-top:96px}

/* === Site footer ==========================================================
   The main site had no footer at all: no address, no licence, no legal links.
   Structure mirrors the sub-sites so the group reads as one brand, but uses
   this site's own palette rather than their black bar. */
.site-footer {
  margin-top: clamp(48px, 6vw, 96px);
  background: #11151b;
  color: #e8e6e2;
}

.footer-shell {
  width: min(1480px, 94vw);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) 0 clamp(28px, 3vw, 40px);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1.4fr;
  gap: clamp(26px, 3vw, 48px);
}

.footer-brand img {
  width: 150px;
  height: auto;
  margin-bottom: 14px;
}

.footer-brand p {
  margin: 0 0 10px;
  color: rgba(232, 230, 226, 0.72);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 34ch;
}

.footer-licence {
  font-weight: 700;
  color: rgba(232, 230, 226, 0.9) !important;
  font-size: 13px !important;
}

.footer-social {
  display: flex;
  gap: 14px;
  margin-top: 16px;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}

.footer-social a:hover { background: var(--red); border-color: var(--red); }
.footer-social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.footer-col h2 {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
}

.footer-col a,
.footer-col p,
.footer-col address {
  display: block;
  margin: 0 0 9px;
  color: rgba(232, 230, 226, 0.72);
  font-size: 14.5px;
  line-height: 1.6;
  font-style: normal;
  text-decoration: none;
}

.footer-col a:hover { color: #fff; }
.footer-phone { font-weight: 700; color: #fff !important; }

.footer-cta {
  display: inline-block !important;
  margin-top: 6px;
  padding: 11px 20px;
  border-radius: 8px;
  background: var(--red);
  color: #fff !important;
  font-weight: 800;
  font-size: 14px;
}

.footer-cta:hover { background: var(--red-dark); }

.footer-legal {
  width: min(1480px, 94vw);
  margin: 0 auto;
  padding: 18px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: space-between;
  color: rgba(232, 230, 226, 0.6);
  font-size: 13px;
}

.footer-legal a {
  color: rgba(232, 230, 226, 0.78);
  text-decoration: none;
  margin-right: 16px;
}

.footer-legal a:last-child { margin-right: 0; }
.footer-legal a:hover { color: #fff; }

@media (max-width: 960px) {
  .footer-shell { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .footer-shell { grid-template-columns: 1fr; }
  .footer-legal { flex-direction: column; }
}

/* Touch targets: keep the icons their drawn size, widen only what a thumb hits. */
.footer-social a { position: relative; }
.footer-social a::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* The CTA panel is narrower than the page, so its trust bar runs out of room
   for four columns well before the other two do. Drop it to 2 x 2 on its own
   schedule rather than making every bar wrap early. */
@media (max-width: 1400px) {
  .cta-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cta-trust .trust-item:nth-child(even) {
    border-right: 0;
  }
  .cta-trust .trust-item:nth-child(-n+2) {
    border-bottom: 1px solid rgba(20, 25, 35, 0.12);
  }
}

@media (max-width: 640px) {
  .cta-trust {
    grid-template-columns: 1fr;
  }

  .cta-trust .trust-item {
    border-right: 0;
    border-bottom: 1px solid rgba(20, 25, 35, 0.12);
  }

  .cta-trust .trust-item:last-child {
    border-bottom: 0;
  }
}


/* ---------- Broker ---------- */
.broker-section {
  background: var(--soft);
}

.broker-panel {
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  padding: clamp(24px, 3vw, 40px);
}

.broker-media {
  position: relative;
}

/* A thin red rule anchored behind the portrait, echoing the eyebrow accent. */
.broker-media::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 22px;
  bottom: 22px;
  width: 4px;
  background: var(--red);
  border-radius: 4px;
}

.broker-portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 8px;
  background: var(--soft-2);
}

.broker-copy .eyebrow {
  margin-bottom: 12px;
}

.broker-copy h2 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.broker-role {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.broker-quote {
  margin: 0 0 18px;
  padding: 0 0 0 18px;
  border-left: 3px solid var(--red);
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.32;
  color: var(--ink);
}

.broker-note {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.broker-facts {
  margin: 0 0 26px;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.broker-facts > div {
  min-width: 0;
}

.broker-facts dt {
  margin-bottom: 5px;
  color: var(--red);
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.broker-facts dd {
  margin: 0;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.4;
}

.broker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 900px) {
  .broker-panel {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 26px;
  }

  .broker-media {
    width: min(88vw, 420px);
  }

  /* The accent rule reads as a stray line once the layout centres. */
  .broker-media::before {
    display: none;
  }

  .broker-quote {
    padding: 14px 0 0;
    border-left: 0;
    border-top: 3px solid var(--red);
  }

  .broker-facts {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: left;
  }

  .broker-actions {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .broker-panel {
    width: calc(100% - 24px);
    padding: 22px 18px 26px;
  }

  .broker-actions .button {
    width: 100%;
    justify-content: center;
  }
}

/* Photo credit for the homepage neighborhood strip. The cards are only ~114px
   wide on a desktop, so an overlay caption would be unreadable; one line under
   the row names every photographer and licence instead, which is what CC BY and
   CC BY-SA require. */
.neighborhood-credits {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  color: #6b7280;
  font-size: 11.5px;
  line-height: 1.5;
}

.neighborhood-credits span:not(:last-child)::after {
  content: " ·";
  color: rgba(20, 25, 35, 0.32);
}

.neighborhood-credits span {
  white-space: nowrap;
}

.neighborhood-credits a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.neighborhood-credits a:hover {
  color: var(--red);
}

@media (max-width: 640px) {
  .neighborhood-credits {
    font-size: 12px;
  }
  .neighborhood-credits span {
    white-space: normal;
  }
}

/* ---------- Legal hub ---------- */
.legal-hero-main {
  background: #11151b;
  color: #fff;
  padding: clamp(46px, 6vw, 78px) 0 clamp(34px, 4vw, 52px);
}

.legal-hero-shell {
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto;
}

.legal-hero-main h1 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.03;
}

.legal-hero-main .eyebrow {
  margin-bottom: 14px;
  color: #ff6b73;
}

.legal-hero-lede {
  max-width: 640px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  line-height: 1.6;
}

.legal-shell {
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto;
  padding: clamp(28px, 4vw, 52px) 0 clamp(40px, 5vw, 70px);
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: 96px;
  padding: 18px 20px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.legal-toc p {
  margin: 0 0 10px;
  color: var(--red);
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.legal-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-toc li + li {
  margin-top: 8px;
}

.legal-toc a {
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.legal-toc a:hover {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-doc {
  /* the sticky header must not cover the heading when an anchor is followed */
  scroll-margin-top: 96px;
}

.legal-doc + .legal-doc {
  margin-top: clamp(34px, 4vw, 56px);
  padding-top: clamp(30px, 3.5vw, 48px);
  border-top: 1px solid var(--line);
}

.legal-doc-title {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: clamp(27px, 3vw, 38px);
  line-height: 1.1;
}

.legal-doc-body {
  color: #2b3038;
  font-size: 15.5px;
  line-height: 1.68;
}

.legal-doc-body h2 {
  margin: 30px 0 10px;
  font-size: 19px;
  line-height: 1.25;
}

/* The fair-housing emblem. The sub-sites carry their own copy of this rule;
   the main site had none, so the mark rendered at body-text size and read as
   a stray character rather than a deliberate emblem. */
.equal-housing-emblem {
  width: 88px;
  height: 88px;
  margin: 20px 0 8px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fdf1f2;
  border: 1px solid #f6d3d7;
  color: var(--red);
}

.equal-housing-emblem svg {
  width: 46px;
  height: 46px;
  display: block;
}

.legal-doc-body p,
.legal-doc-body ul,
.legal-doc-body ol {
  margin: 0 0 14px;
}

.legal-doc-body ul,
.legal-doc-body ol {
  padding-left: 22px;
}

.legal-doc-body li {
  margin-bottom: 7px;
}

.legal-doc-body a {
  color: var(--red);
  text-underline-offset: 3px;
}

.legal-updated {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13.5px;
}

.legal-notice {
  margin: 0 0 18px;
  padding: 15px 18px;
  background: #fff4f5;
  border-left: 4px solid var(--red);
  border-radius: 6px;
  font-size: 14.5px;
}

.legal-site-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.legal-site-list a {
  display: inline-block;
  padding: 9px 15px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.legal-site-list a:hover {
  border-color: var(--red);
  color: var(--red);
}

@media (max-width: 900px) {
  .legal-shell {
    grid-template-columns: 1fr;
  }

  .legal-toc {
    position: static;
  }

  .legal-toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
  }

  .legal-toc li + li {
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  .legal-hero-shell,
  .legal-shell {
    width: calc(100% - 24px);
  }
}


/* ---------- Contact ---------- */
.contact-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fbf9f5;
  color: var(--ink);
  padding: clamp(46px, 6vw, 84px) 0 clamp(40px, 5vw, 68px);
}

.contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(251, 249, 245, 0.98) 0%, rgba(251, 249, 245, 0.96) 31%, rgba(251, 249, 245, 0.62) 52%, rgba(251, 249, 245, 0.06) 82%),
    url("contact-cta-hero.webp") center right / cover no-repeat;
}

.contact-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 255, 255, 0.86), transparent 30%),
    linear-gradient(180deg, rgba(251, 249, 245, 0) 62%, #fbf9f5 100%);
  pointer-events: none;
}

.contact-hero-shell {
  position: relative;
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto;
}

.contact-hero .eyebrow {
  margin-bottom: 14px;
  color: var(--red);
}

.contact-hero h1 {
  max-width: 15ch;
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.contact-hero-lede {
  max-width: 60ch;
  margin: 0 0 28px;
  color: #303845;
  font-size: 16.5px;
  line-height: 1.62;
}

.contact-hero-call svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-routes-section .section-head {
  text-align: left;
  width: min(1120px, calc(100% - 44px));
}

.contact-routes-section .section-head h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.08;
}

.contact-routes-section .section-head p {
  margin: 0;
  color: var(--muted);
}

.contact-routes {
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.contact-route {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.contact-route:hover,
.contact-route:focus-visible {
  border-color: var(--red);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(28, 34, 44, 0.12);
}

.contact-route-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff0f2;
  border: 1px solid rgba(215, 25, 43, 0.14);
  color: var(--red);
}

.contact-route-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-route-body strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.15;
}

.contact-route-body span {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
}

.contact-route-cta {
  color: var(--red);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.contact-route-cta em {
  font-style: normal;
  transition: transform 0.16s ease;
  display: inline-block;
}

.contact-route:hover .contact-route-cta em {
  transform: translateX(3px);
}

.contact-direct-section {
  background: var(--soft);
}

.contact-direct {
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
}

.contact-details h2 {
  margin: 0 0 22px;
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
}

.contact-detail-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
}

.contact-detail-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.contact-detail-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.contact-detail-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-detail-list strong {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}

.contact-detail-list a {
  color: var(--ink);
  font-size: 19px;
  font-weight: 750;
  text-decoration: none;
}

.contact-detail-list a:hover {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-detail-list address,
.contact-detail-list p {
  margin: 0;
  font-style: normal;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink);
}

.contact-detail-list small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13.5px;
}

.contact-broker {
  display: grid;
  gap: 16px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  text-align: center;
  justify-items: center;
}

.contact-broker img {
  width: 190px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 8px;
  background: var(--soft-2);
}

.contact-broker-kicker {
  margin: 0 0 2px;
  color: var(--red);
  font-size: 11.5px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.contact-broker-name {
  margin: 0 0 2px;
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.1;
}

.contact-broker-licence {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.contact-broker-note {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.contact-next {
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto;
}

.contact-next h2 {
  margin: 0 0 22px;
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
}

.contact-steps {
  margin: 0 0 38px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.contact-steps li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.contact-step-num {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-weight: 850;
}

.contact-steps strong {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  line-height: 1.3;
}

.contact-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.seller-details-panel {
  position: relative;
  margin: 50px 0 28px;
  padding: 38px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
  border: 1px solid rgba(210, 15, 27, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(210, 15, 27, 0.08), transparent 38%),
    #fff;
  box-shadow: 0 22px 60px rgba(11, 18, 32, 0.08);
  scroll-margin-top: 120px;
}

.seller-details-panel::before {
  content: "";
  position: absolute;
  inset: -28px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210, 15, 27, 0.34), transparent);
}

.seller-details-kicker {
  margin: 0 0 12px;
  color: var(--red);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.seller-details-copy h3 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(42px, 5.6vw, 72px);
  line-height: 0.96;
}

.seller-details-copy p:last-child {
  margin: 0;
  max-width: 700px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.seller-lead-form {
  display: grid;
  gap: 18px;
}

.seller-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.seller-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.seller-field input,
.seller-field select,
.seller-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  line-height: 1.3;
  box-shadow: 0 12px 28px rgba(11, 18, 32, 0.04);
}

.seller-field input,
.seller-field select {
  height: 48px;
  padding: 0 14px;
}

.seller-field input[type="file"] {
  height: auto;
  padding: 14px;
  color: var(--muted);
  background: #fff;
}

.seller-field textarea {
  min-height: 108px;
  padding: 13px 14px;
  resize: vertical;
}

.seller-field small,
.seller-upload-status {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.seller-photo-field {
  padding: 16px;
  border: 1px dashed rgba(210, 15, 27, 0.32);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.seller-photo-field[hidden] {
  display: none;
}

.seller-field[hidden] {
  display: none;
}

.seller-field input:focus,
.seller-field select:focus,
.seller-field textarea:focus {
  outline: 3px solid rgba(210, 15, 27, 0.16);
  border-color: rgba(210, 15, 27, 0.58);
}

.seller-field-wide {
  grid-column: 1 / -1;
}

.seller-form-consent {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.seller-form-consent input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--red);
}

.seller-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.seller-form-actions .button {
  min-height: 48px;
}

.form-message {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 750;
}

.form-message.is-success {
  color: #17663a;
}

.form-message.is-error {
  color: var(--red);
}

.contact-fair {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .contact-hero {
    padding-top: 282px;
  }

  .contact-hero::before {
    background:
      linear-gradient(180deg, rgba(251, 249, 245, 0.04) 0%, rgba(251, 249, 245, 0.32) 48%, #fbf9f5 100%),
      url("contact-cta-hero-900w.webp") top center / 100% 330px no-repeat;
  }

  .contact-direct {
    grid-template-columns: 1fr;
  }

  .contact-broker {
    justify-self: stretch;
  }

  .contact-steps {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .seller-details-panel {
    padding: 24px;
  }

  .seller-details-copy p:last-child {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .contact-hero {
    padding-top: 238px;
  }

  .contact-hero::before {
    background:
      linear-gradient(180deg, rgba(251, 249, 245, 0.04) 0%, rgba(251, 249, 245, 0.34) 44%, #fbf9f5 100%),
      url("contact-cta-hero-480w.webp") top center / 100% 280px no-repeat;
  }

  .contact-hero-shell,
  .contact-routes,
  .contact-direct,
  .contact-next,
  .contact-routes-section .section-head {
    width: calc(100% - 24px);
  }

  /* The arrow label under a stacked card reads as a second link; keep the whole
     card tappable and let the title carry the meaning. */
  .contact-route {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
  }

  .contact-route-icon {
    width: 48px;
    height: 48px;
  }

  .contact-route-cta {
    grid-column: 1 / -1;
  }

  .contact-hero-call {
    width: 100%;
    justify-content: center;
  }

  .seller-details-panel {
    padding: 20px;
    margin-top: 44px;
  }

  .seller-details-copy h3 {
    font-size: clamp(38px, 13vw, 52px);
  }

  .seller-form-grid {
    grid-template-columns: 1fr;
  }

  .seller-form-actions .button {
    width: 100%;
  }
}

.contact-areas {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.contact-areas-label {
  margin: 0 0 4px;
  color: var(--red);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-areas-note {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.contact-area-chips {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contact-area-chips a {
  display: inline-block;
  padding: 7px 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.contact-area-chips a:hover,
.contact-area-chips a:focus-visible {
  border-color: var(--red);
  color: var(--red);
}

/* ---------------------------------------------------------------------------
   Hero owns the first screen
   The pathway cards sit inside .hero-section. Without this they start about
   halfway up the fold and compete with the headline. Filling the shell pushes
   them just below it, so the first screen carries one message and the cards
   read as the next step rather than a rival.
--------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .hero-shell {
    min-height: calc(100vh - 86px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* The cards belong to the second screen; give them room to breathe from it. */
  .pathway-shell {
    margin-top: clamp(26px, 4vh, 48px);
  }
}

/* On a short laptop screen a full viewport of hero leaves the cards stranded,
   so relax it rather than pushing them off the page entirely. */
@media (min-width: 901px) and (max-height: 760px) {
  .hero-shell {
    min-height: 560px;
  }
}

/* ---------------------------------------------------------------------------
   Hero photograph
   Replaces the decorative map. Masked on the left and bottom so it dissolves
   into the cream rather than ending on a hard edge, and dimmed slightly so the
   headline beside it stays the loudest thing on the screen.
--------------------------------------------------------------------------- */
.hero-map img,
.hero-map video {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 26%),
    linear-gradient(to bottom, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 26%),
    linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-composite: intersect;
}

@media (max-width: 900px) {
  /* Once it becomes a framed block in the flow, the fade reads as a fault. */
  .hero-map img,
  .hero-map video {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* The hero photo is CC BY, so the credit has to appear somewhere - the footer
   legal row, with the copyright and the policy links, rather than stamped over
   the image. */
.footer-credit {
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
}

.footer-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-credit a:hover {
  color: rgba(255, 255, 255, 0.8);
}

@media (min-width: 901px) {
  /* Centring a ~470px block in a viewport-height shell leaves the headline
     sitting about 42% down, which reads as sagging. Anchor it high instead. */
  .hero-shell {
    justify-content: flex-start;
    padding-top: clamp(48px, 13vh, 132px);
  }
}

/* ---------- Sell ---------- */
.sell-hero {
  background: #fbf9f5;
  color: var(--ink);
  padding: clamp(46px, 6vw, 82px) 0 clamp(40px, 5vw, 66px);
}

.sell-hero-shell,
.sell-shell {
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto;
}

.sell-hero .eyebrow {
  margin-bottom: 14px;
  color: var(--red);
}

.sell-hero h1 {
  max-width: 16ch;
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.03;
  letter-spacing: -0.01em;
}

.sell-hero-lede {
  max-width: 62ch;
  margin: 0 0 28px;
  color: #303845;
  font-size: 16.5px;
  line-height: 1.62;
}

.sell-shell > h2 {
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.08;
}

.sell-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.sell-card {
  padding: 26px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
}

.sell-card-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 50%;
  background: #fff0f2;
  border: 1px solid rgba(215, 25, 43, 0.14);
  color: var(--red);
}

.sell-card-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sell-card h3 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.15;
}

.sell-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.sell-fee-section {
  background: var(--soft);
}

.sell-fee {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  padding: clamp(26px, 3.4vw, 40px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
}

.sell-fee-figure {
  text-align: center;
  padding: 22px 18px;
  background: var(--soft);
  border-radius: 8px;
}

.sell-fee-figure strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(48px, 6vw, 68px);
  line-height: 1;
  color: var(--red);
}

.sell-fee-figure span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
}

.sell-fee-body h2 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
}

.sell-fee-body p {
  margin: 0 0 12px;
  color: #2b3038;
  font-size: 15.5px;
  line-height: 1.65;
}

/* Commissions are negotiable by law; the note is a disclosure, not small print
   to be buried, so it stays legible. */
.sell-fee-note {
  margin: 0 !important;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted) !important;
  font-size: 13.5px !important;
}

.sell-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.sell-proof > div {
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.sell-proof strong {
  display: block;
  margin-bottom: 4px;
  font-size: 24px;
  line-height: 1.05;
}

.sell-proof span {
  color: var(--muted);
  font-size: 13.5px;
}

.sell-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.sell-steps li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.sell-step-num {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-weight: 850;
}

.sell-steps strong {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
}

.sell-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.sell-cta-section {
  background: var(--soft);
}

.sell-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(24px, 3vw, 38px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
}

.sell-cta h2 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.1;
}

.sell-cta p {
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
}

.sell-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sell-cta-actions svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sell-fair {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .sell-cards,
  .sell-steps {
    grid-template-columns: 1fr;
  }
  .sell-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sell-fee,
  .sell-cta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .sell-hero-shell,
  .sell-shell {
    width: calc(100% - 24px);
  }
  .sell-cta-actions .button {
    width: 100%;
    justify-content: center;
  }
}

/* Four numbers answer what the firm has done; the photo answers who is
   handling the house. A seller is asking both. */
.sell-broker {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: clamp(22px, 3.4vw, 44px);
  align-items: start;
  padding: clamp(24px, 3vw, 36px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
}

.sell-broker img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 8px;
  background: var(--soft-2);
}

.sell-broker-name {
  margin: 0 0 2px;
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.08;
}

.sell-broker-role {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 700;
}

.sell-broker-note {
  margin: 0 0 22px;
  color: #2b3038;
  font-size: 15.5px;
  line-height: 1.62;
  max-width: 62ch;
}

/* inside the broker card the figures are a supporting row, not the headline */
.sell-broker .sell-proof {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.sell-broker .sell-proof > div {
  padding: 16px 14px;
  background: var(--soft);
  border-color: transparent;
}

.sell-broker .sell-proof strong {
  font-size: 20px;
}

.sell-broker .sell-proof span {
  font-size: 12.5px;
}

@media (max-width: 900px) {
  .sell-broker {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .sell-broker img {
    width: min(60vw, 240px);
  }
  .sell-broker-note {
    text-align: left;
  }
  .sell-broker .sell-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    text-align: left;
  }
}

/* ---------- Seller costs + FAQ ---------- */
.sell-costs-section { background: var(--soft); }

.sell-costs-lede {
  max-width: 70ch;
  margin: -8px 0 clamp(20px, 2.6vw, 30px);
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.sell-costs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sell-cost {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* Direct child only: an inline <strong> inside the paragraph must not inherit
   the card-title styling and break onto its own line. */
.sell-cost > strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.15;
}

.sell-cost p {
  margin: 0;
  color: #2b3038;
  font-size: 14.5px;
  line-height: 1.6;
}

.sell-costs-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.sell-faq { display: grid; gap: 10px; }

.sell-faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.sell-faq-item summary {
  padding: 18px 22px;
  cursor: pointer;
  font-size: 16.5px;
  font-weight: 750;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.sell-faq-item summary::-webkit-details-marker { display: none; }

.sell-faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--red);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.sell-faq-item[open] summary::after { content: "−"; }

.sell-faq-item[open] summary { padding-bottom: 6px; }

.sell-faq-item > div { padding: 0 22px 20px; }

.sell-faq-item p {
  margin: 0;
  max-width: 76ch;
  color: #2b3038;
  font-size: 15.5px;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .sell-costs { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .sell-faq-item summary { padding: 16px 18px; font-size: 15.5px; }
  .sell-faq-item > div { padding: 0 18px 18px; }
}

/* The hero photo was composed with an open left third, so it takes a
   left-to-right gradient rather than a flat scrim: dark enough for white text
   on the left, nearly clear over the house on the right. */
.sell-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.sell-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  z-index: -2;
}

.sell-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(251,249,245,0.98) 0%, rgba(251,249,245,0.96) 33%, rgba(251,249,245,0.48) 61%, rgba(251,249,245,0.08) 100%),
    linear-gradient(180deg, rgba(251,249,245,0) 60%, #fbf9f5 100%);
}

@media (max-width: 900px) {
  .sell-hero {
    padding-top: 286px;
  }

  .sell-hero-photo {
    inset: 0 0 auto;
    height: 330px;
    object-position: center 52%;
  }

  .sell-hero::before {
    background: linear-gradient(180deg, rgba(251,249,245,0.04) 0%, rgba(251,249,245,0.32) 48%, #fbf9f5 100%);
  }
}

/* ---------- Buy ---------- */
.buy-hero .sell-hero-photo {
  object-position: 64% 48%;
}

.buy-hero::before {
  background:
    linear-gradient(90deg, rgba(251,249,245,0.98) 0%, rgba(251,249,245,0.94) 34%, rgba(251,249,245,0.58) 62%, rgba(251,249,245,0.16) 100%),
    linear-gradient(180deg, rgba(251,249,245,0) 62%, #fbf9f5 100%);
}

.buy-proof-panel {
  grid-template-columns: 340px minmax(0, 1fr);
}

.buy-proof-panel img {
  aspect-ratio: 4 / 3;
  object-position: center;
}

.buyer-details-panel {
  margin-top: 50px;
}

@media (max-width: 900px) {
  .buy-proof-panel {
    grid-template-columns: 1fr;
  }

  .buy-proof-panel img {
    width: 100%;
    max-width: 520px;
  }
}

/* --- Touch targets on phones and tablets ---------------------------------- */
/* Probed with elementFromPoint over a 44x44 square rather than measured from
   the box, so the icons that already carry a 44x44 ::after are correctly absent
   from this list. .menu-toggle is 48x48 here and passes as-is. */
@media (max-width: 900px) {
  /* Both were 16px tall - the whole tappable area was the height of the text.
     These are the primary "go deeper" links on the homepage cards. */
  .path-cta,
  .featured-neighborhood .text-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* 23px links separated by a 9px margin: the gap was dead space. Moving it
     inside the link keeps the same rhythm and makes the whole strip tappable.
     Selector matches `.footer-col a` above - a media query adds no specificity,
     so a looser selector would silently lose to it. */
  .footer-col a {
    margin-bottom: 0;
    padding-block: 10px;
  }

  /* `.footer-legal a` sets no display, so these are inline and ignore height
     entirely - inline-flex first, then the height applies. */
  .footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}