/* ===========================================================
   Jan Calle — jancalle.opsrefresh.com
   Premium landing page styles
   Color: forest green + warm cream
   Typography: Bricolage Grotesque (display) + Onest (body)
   Motion: young / fast / energetic
   =========================================================== */

/* ----- 1. RESET & TOKENS ----- */

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

:root {
  /* Color tokens — soft white + deep charcoal + single saffron accent.
     Distinctive from Dolores (oxblood + gold) and Juan (cobalt). Not "earthy
     eco" — this is the digital-native palette for a 2026 young/urban
     Queens agent. Saffron is used SPARINGLY (CTA arrows, hover states,
     star ratings, dot markers) — never as a large surface fill. */
  --forest: #1C1A17;        /* dark surface = deep neutral charcoal (was forest green) */
  --forest-deep: #0E0C0A;   /* darker charcoal for hero overlays + footer */
  --sage: #8A857A;           /* muted — replaces sage, decorative neutrals */
  --sage-soft: #B5AFA0;     /* light hairline / borders */
  --moss: #6B665E;           /* tertiary text — replaces moss */
  --olive: #C8731A;          /* accent reuse (star ratings / hover markers) */
  --cream: #F5F2EA;          /* page background = paper */
  --cream-soft: #E8E2D2;     /* card surfaces = paper-2 */
  --cream-warm: #DDD6C2;     /* FAQ open / slightly warmer surface */
  --brown: #3A3733;          /* secondary text = ink-2 */
  --brown-light: #6B665E;    /* tertiary text = ink-3 */
  --ink: #1C1A17;            /* body text, primary ink (cleaner than before) */
  --line: rgba(28, 26, 23, 0.14);          /* charcoal hairline */
  --line-on-dark: rgba(245, 242, 234, 0.18); /* paper on dark surfaces */
  --line-soft: rgba(28, 26, 23, 0.08);
  --gold: #C8731A;           /* saffron — used for star ratings + small accents */

  /* Accent — single bold saffron. Used sparingly. */
  --accent: #C8731A;
  --accent-2: #A35A12;       /* hover/active state */
  --hairline: #B5AFA0;
  --muted: #8A857A;
  --shadow: rgba(28, 26, 23, 0.16);
  --shadow-2: rgba(28, 26, 23, 0.06);

  /* Typography */
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Mono uses system stack — Bricolage Grotesque + Onest pair does not need a third face. */
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Spacing & layout */
  --container: 1280px;
  --gutter: 24px;
  /* Section vertical padding rhythm — mobile 64px → desktop 120px (fluid).
     Use --section-y-tight (80px) for testimonials, contact, and other tighter
     sections. Both clamp smoothly across viewports. */
  --section-y: clamp(64px, 10vw, 120px);
  --section-y-tight: clamp(56px, 7vw, 80px);

  /* Easing — fast + energetic for the next-gen site */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-quick: cubic-bezier(0.4, 0, 0.2, 1);

  /* Sticky nav height */
  --nav-h: 72px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

html {
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

/* ----- 2. UTILITIES ----- */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 64px;
}

@media (max-width: 768px) {
  .container {
    padding: 0 24px;
  }
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink, #1C1A17);
  margin-bottom: 16px;
  position: relative;
  /* Editorial folio — used for major sections. */
}

.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--forest);
  margin-bottom: 28px;
}
.h2 em {
  font-style: italic;
  font-weight: 600;
  color: var(--brown);
}

.lede {
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--brown);
  max-width: 38em;
  margin-bottom: 24px;
}

.section-lede {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--brown-light);
  max-width: 42em;
  margin: 0 auto;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  padding: 12px 20px;
  background: var(--forest);
  color: var(--cream);
  z-index: 9999;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  top: 0;
}

/* ----- 3. BUTTONS ----- */
/* Architectural rectangle: sharp 2px max radius, uppercase 0.08em
   letter-spacing, outlined or solid-ink by default. On hover the
   primary swaps to a saffron fill — distinctive against the muted
   charcoal-on-paper page palette. Different from Dolores (oxblood,
   pill) and Juan (cobalt, square). */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 18px 32px;
  border-radius: 2px;
  transition: background 200ms var(--ease-quick), color 200ms var(--ease-quick),
              border-color 200ms var(--ease-quick), transform 180ms var(--ease-quick),
              box-shadow 220ms var(--ease-quick);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
}

.btn--lg {
  padding: 20px 36px;
  font-size: 0.9375rem;
}

.btn--sm {
  padding: 12px 20px;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}

.btn--block {
  width: 100%;
  justify-content: center;
}

/* Primary CTA: solid charcoal with paper text. On hover, fill with
   the saffron accent — distinctive against the muted page palette. */
.btn--solid {
  background: var(--ink, #1C1A17);
  color: var(--paper, #F5F2EA);
  border: 1.5px solid var(--ink, #1C1A17);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background .25s ease, color .25s ease, border-color .25s ease, box-shadow .35s ease;
}
.btn--solid:hover {
  background: var(--accent, #C8731A);
  color: var(--paper, #F5F2EA);
  border-color: var(--accent, #C8731A);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(200, 115, 26, 0.5);
}
.btn re-icon, .btn .arrow, .btn [class*="arrow"] { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.btn:hover re-icon, .btn:hover .arrow, .btn:hover [class*="arrow"] { transform: translateX(5px); }
.btn--solid:active {
  background: var(--accent-2, #A35A12);
  border-color: var(--accent-2, #A35A12);
  transform: translateY(0);
}

/* Ghost: outlined ink, paper bg. On hover, swap to solid ink. */
.btn--ghost {
  background: transparent;
  color: var(--ink, #1C1A17);
  border: 1.5px solid var(--ink, #1C1A17);
}
.btn--ghost:hover {
  background: var(--ink, #1C1A17);
  color: var(--paper, #F5F2EA);
  transform: translateY(-1px);
}
.btn--ghost:active {
  background: var(--accent-2, #A35A12);
  border-color: var(--accent-2, #A35A12);
  color: var(--paper, #F5F2EA);
}

/* On-dark variants — used on the dark hero. Paper bg, ink text on
   default; saffron fill on hover. */
.btn--on-dark.btn--solid {
  background: var(--paper, #F5F2EA);
  color: var(--ink, #1C1A17);
  border-color: var(--paper, #F5F2EA);
}
.btn--on-dark.btn--solid:hover {
  background: var(--accent, #C8731A);
  border-color: var(--accent, #C8731A);
  color: var(--paper, #F5F2EA);
}
.btn--on-dark.btn--ghost {
  background: transparent;
  color: var(--paper, #F5F2EA);
  border-color: rgba(245, 242, 234, 0.5);
}
.btn--on-dark.btn--ghost:hover {
  background: var(--paper, #F5F2EA);
  color: var(--ink, #1C1A17);
  border-color: var(--paper, #F5F2EA);
}

.btn__arrow {
  transition: transform 220ms var(--ease-quick);
  display: inline-block;
  font-weight: 700;
}
.btn:hover .btn__arrow {
  transform: translateX(3px);
}

/* ----- 4. STICKY NAV ----- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(245, 242, 234, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  height: var(--nav-h);
  transition: all 300ms var(--ease-quick);
  /* Defensive: never let the nav's own content blow out the viewport */
  overflow: hidden;
}
.nav.is-scrolled {
  background: rgba(245, 242, 234, 0.95);
  box-shadow: 0 8px 32px -16px rgba(14, 12, 10, 0.15);
}

.nav__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav__brand-img {
  height: 52px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.nav__brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--forest);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  display: grid;
  place-items: center;
  font-style: italic;
}
.nav__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.nav__brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--forest);
  letter-spacing: -0.01em;
}
.nav__brand-sub {
  font-size: 0.7rem;
  color: var(--brown-light);
  letter-spacing: 0.04em;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav__links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  transition: color 200ms;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1.5px;
  background: var(--moss);
  transition: width 280ms var(--ease-out);
}
.nav__links a:hover {
  color: var(--forest);
}
.nav__links a:hover::after {
  width: 100%;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--paper-2, #E8E2D2);
  border-radius: 2px;
  padding: 4px 10px;
  border: 1px solid var(--line);
}
.lang-toggle__btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 5px 8px;
  border-radius: 2px;
  color: var(--brown-light);
  transition: all 200ms var(--ease-quick);
}
.lang-toggle__btn.is-active {
  background: var(--ink, #1C1A17);
  color: var(--paper, #F5F2EA);
}
.lang-toggle__sep {
  color: var(--brown-light);
  font-size: 0.78rem;
}

.nav__call .phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.nav__hamburger {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 8px;
}
.nav__hamburger span {
  width: 22px;
  height: 1.5px;
  background: var(--forest);
  transition: all 200ms var(--ease-quick);
}
.nav__hamburger.is-open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav__hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.nav__hamburger.is-open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(28, 26, 23, 0.96);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms var(--ease-quick);
  /* Constrain to viewport — don't allow its content to widen the layout */
  max-width: 100vw;
  overflow-x: hidden;
}
.mobile-nav.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav__panel {
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: center;
  padding: 32px;
}
.mobile-nav__panel a {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--cream);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.mobile-nav__panel .btn--solid {
  margin-top: 20px;
  background: var(--cream);
  color: var(--forest);
  border-color: var(--cream);
}

.mobile-nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 242, 234, 0.1);
  border: 1px solid rgba(245, 242, 234, 0.25);
  border-radius: 999px;
  padding: 6px 14px;
  margin: 8px auto 0;
}
.mobile-nav__lang .lang-toggle__btn {
  color: var(--cream-soft);
  padding: 4px 8px;
}
.mobile-nav__lang .lang-toggle__btn.is-active {
  background: var(--cream);
  color: var(--forest);
}
.mobile-nav__lang .lang-toggle__sep {
  color: var(--cream-soft);
}

@media (max-width: 1024px) {
  .nav__links {
    display: none;
  }
  .nav__call .nav__call-text {
    display: none;
  }
  .nav__hamburger {
    display: flex;
  }
}

/* On small mobile the top-bar call button is redundant with the
   sticky bottom mobile-cta, and crowds the hamburger off-screen. */
@media (max-width: 480px) {
  .nav__call {
    display: none;
  }
  .nav__inner {
    padding: 0 16px;
    gap: 10px;
  }
  /* On very small screens, collapse the top-bar EN/ES toggle to a
     compact chip showing only the active language. The full toggle
     remains available inside the mobile nav overlay. Scoped to the
     top-bar .lang-toggle so we don't hide the mobile-nav's toggle. */
  .nav .lang-toggle > .lang-toggle__sep,
  .nav .lang-toggle > .lang-toggle__btn {
    display: none;
  }
  .nav .lang-toggle {
    padding: 0;
    background: transparent;
    border: 1px solid var(--sage);
    border-radius: 999px;
    min-width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
  }
  .nav .lang-toggle::before {
    content: attr(data-active-lang);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--forest);
  }
  /* Slightly trim brand to give actions more room */
  .nav__brand-sub {
    display: none;
  }
  .nav__brand-text {
    line-height: 1.2;
  }
}

/* ----- 5. HERO ----- */

.hero {
  position: relative;
  min-height: 100vh;
  height: 100vh;
  max-height: 920px;
  display: flex;
  align-items: flex-end;
  padding: 0 0 80px;
  overflow: hidden;
  background: var(--forest);
  color: var(--cream);
}

.hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%) scale(1.05);
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
  /* parallax */
  will-change: transform;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(28, 26, 23, 0.55) 0%, rgba(28, 26, 23, 0.15) 30%, rgba(14, 12, 10, 0.75) 100%),
    linear-gradient(90deg, rgba(14, 12, 10, 0.45) 0%, transparent 60%);
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px 32px;
}

@media (max-width: 768px) {
  .hero {
    padding: 0 0 48px;
    min-height: 92vh;
  }
  .hero__content {
    padding: 0 24px 24px;
  }
}

.hero__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--cream-soft);
  margin-bottom: 24px;
  padding: 6px 12px;
  background: rgba(245, 242, 234, 0.1);
  border: 1px solid rgba(245, 242, 234, 0.25);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.2rem, 9vw, 8.5rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--cream);
  margin-bottom: 24px;
  max-width: 14ch;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
.hero__title span {
  display: block;
}
.hero__title-accent {
  font-style: italic;
  font-weight: 600;
  color: var(--cream-soft);
}

.hero__sub {
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  line-height: 1.45;
  max-width: 36em;
  color: var(--cream);
  margin-bottom: 36px;
  opacity: 0.92;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

@media (max-width: 640px) {
  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
  }
}

.hero__scroll-cue {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cream-soft);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
}
.hero__scroll-line {
  width: 60px;
  height: 1px;
  background: var(--cream-soft);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cream);
  transform: translateX(-100%);
  animation: scrollLine 2.5s var(--ease-quick) infinite;
}
@keyframes scrollLine {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* ----- 7. ABOUT ----- */

.about {
  padding: var(--section-y) 0;
  background: var(--cream);
  position: relative;
}
.about::before {
  content: '';
  position: absolute;
  top: 80px;
  right: 0;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, var(--sage-soft) 0%, transparent 60%);
  opacity: 0.5;
  filter: blur(40px);
  z-index: 0;
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) {
  .about__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.about__photo-wrap {
  position: sticky;
  top: calc(var(--nav-h) + 32px);
}

@media (max-width: 1024px) {
  .about__photo-wrap {
    position: static;
  }
}

.about__photo-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--cream-soft);
  aspect-ratio: 4 / 5;
  box-shadow: 0 32px 64px -24px rgba(14, 12, 10, 0.3);
}
.about__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.95);
  transition: transform 600ms var(--ease-out);
}
.about__photo-frame:hover .about__photo {
  transform: scale(1.03);
  filter: contrast(1.05) saturate(1) sepia(0.1);
}

.about__photo-tag {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background: rgba(245, 242, 234, 0.95);
  backdrop-filter: blur(10px);
  padding: 14px 18px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Jan's identity accent (same --accent used on his call button and the
     "BILINGUAL" service badge) — a small, contemporary marker that ties this
     card to the rest of his page instead of a generic frosted chip. */
  border-left: 3px solid var(--accent, #C8731A);
  box-shadow: 0 10px 28px -10px rgba(14, 12, 10, 0.4);
}
.about__photo-tag-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--forest);
}
.about__photo-tag-lic {
  font-size: 0.75rem;
  color: var(--brown-light);
  letter-spacing: 0.02em;
}

.about__photo-meta {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.about__photo-meta-item {
  background: var(--cream-soft);
  padding: 14px 12px;
  border-radius: 10px;
  text-align: center;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.about__photo-meta-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 22px -14px rgba(14, 12, 10, 0.3);
}
.about__photo-meta-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--forest);
  margin-bottom: 2px;
}
.about__photo-meta-lbl {
  font-size: 0.7rem;
  color: var(--brown-light);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.about__copy .h2 {
  margin-top: 0;
}

.about__bio {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--brown);
  margin-bottom: 32px;
}

/* ----- 8. FAMILY TEAM ----- */

.family {
  padding: var(--section-y) 0;
  background: var(--cream-soft);
  position: relative;
}
.family::before {
  content: '';
  position: absolute;
  bottom: 80px;
  left: 0;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, var(--sage-soft) 0%, transparent 60%);
  opacity: 0.5;
  filter: blur(40px);
  z-index: 0;
}

.family__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
  position: relative;
  z-index: 1;
}
.family__head .eyebrow {
  padding-left: 0;
}

.family__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) {
  .family__grid {
    grid-template-columns: 1fr;
  }
}

.family__card {
  background: var(--cream);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: all 400ms var(--ease-out);
  display: flex;
  flex-direction: column;
}
.family__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px rgba(14, 12, 10, 0.2);
  border-color: var(--sage);
}
.family__card--featured {
  background: var(--forest);
  color: var(--cream);
  border-color: var(--forest);
  position: relative;
  transform: translateY(-12px);
}
.family__card--featured:hover {
  transform: translateY(-18px);
  box-shadow: 0 32px 64px -20px rgba(14, 12, 10, 0.4);
}
.family__card--featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--sage) 0%, var(--cream-soft) 100%);
}

@media (max-width: 1024px) {
  .family__card--featured {
    transform: none;
  }
  .family__card--featured:hover {
    transform: translateY(-4px);
  }
}

.family__card-photo {
  aspect-ratio: 4 / 3;
  background: var(--cream-soft);
  overflow: hidden;
}
.family__card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.95);
  transition: transform 600ms var(--ease-out);
}
.family__card:hover .family__card-photo img {
  transform: scale(1.05);
}
.family__card--featured .family__card-photo {
  background: var(--moss);
}

.family__card-body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.family__card-role {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brown-light);
}
.family__card--featured .family__card-role {
  color: var(--sage-soft);
}

.family__card-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75rem;
  color: var(--forest);
  letter-spacing: -0.01em;
}
.family__card--featured .family__card-name {
  color: var(--cream);
}

.family__card-bio {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--brown);
  flex: 1;
}
.family__card--featured .family__card-bio {
  color: var(--cream-soft);
}

.family__card-link {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--moss);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  transition: gap 200ms;
}
.family__card-link:hover {
  gap: 10px;
}
.family__card--featured .family__card-link {
  color: var(--sage);
}
.family__card-link.is-current {
  color: var(--sage);
  cursor: default;
}

/* ----- 9. SERVICES ----- */

.services {
  padding: var(--section-y) 0;
  background: var(--cream);
}

.services__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}
.services__head .eyebrow {
  padding-left: 0;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .services__grid {
    grid-template-columns: 1fr;
  }
}

.service-card {
  position: relative;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px 32px;
  transition: all 350ms var(--ease-out);
  display: flex;
  flex-direction: column;
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--sage);
  box-shadow: 0 24px 48px -20px rgba(28, 26, 23, 0.18);
}
.service-card--featured {
  background: var(--forest);
  color: var(--cream);
  border-color: var(--forest);
}
.service-card--featured:hover {
  border-color: var(--sage);
  box-shadow: 0 32px 64px -20px rgba(14, 12, 10, 0.35);
}

.service-card__badge {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent, #C8731A);
  background: rgba(200, 115, 26, 0.12);
  padding: 6px 12px;
  border-radius: 2px;
  border: 1px solid rgba(200, 115, 26, 0.35);
}

.service-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--sage-soft);
  color: var(--forest);
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  transition: transform 350ms var(--ease-bouncy);
}
.service-card--featured .service-card__icon {
  background: rgba(245, 242, 234, 0.12);
  color: var(--cream-soft);
}
.service-card:hover .service-card__icon {
  transform: scale(1.1) rotate(-4deg);
}
.service-card__icon svg {
  width: 24px;
  height: 24px;
}

.service-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75rem;
  color: var(--forest);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.service-card--featured .service-card__title {
  color: var(--cream);
}

.service-card__price {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--moss);
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.service-card--featured .service-card__price {
  color: var(--sage);
}

.service-card__copy {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--brown);
  margin-bottom: 24px;
  flex: 1;
}
.service-card--featured .service-card__copy {
  color: var(--cream-soft);
}

.service-card__link {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--moss);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 220ms var(--ease-quick);
}
.service-card--featured .service-card__link {
  color: var(--sage);
}
.service-card__link:hover {
  gap: 12px;
}

/* ----- 10. NEIGHBORHOODS ----- */

.neighborhoods {
  padding: 0;
  background: var(--cream-soft);
  overflow: hidden;
}
/* Override default data-reveal fade+rise on the section itself —
   the inner image fade and staggered list names handle entry. */
.neighborhoods[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}
.neighborhoods__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
  padding: var(--section-y) 24px 0;
}
.neighborhoods__head .eyebrow {
  padding-left: 0;
}

/* Magazine spread — full-bleed image + typographic list */
.neighborhoods__spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 92vh;
  align-items: stretch;
  margin-top: 64px;
}
.neighborhoods__media {
  position: relative;
  overflow: hidden;
  background: var(--moss);
}
.neighborhoods__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.92);
  opacity: 1;
  transition: opacity 800ms var(--ease-out);
}
.neighborhoods.is-revealed .neighborhoods__media img {
  opacity: 1;
}

.neighborhoods__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(48px, 7vw, 96px) clamp(32px, 6vw, 96px);
}
.neighborhoods__item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 8px 0;
  border-bottom: 1px solid rgba(28, 26, 23, 0.12);
  opacity: 1;
  transform: translateX(0);
  transition: opacity 600ms var(--ease-out), transform 360ms var(--ease-out), color 220ms;
}
.neighborhoods.is-revealed .neighborhoods__item {
  opacity: 1;
}
.neighborhoods.is-revealed .neighborhoods__item:nth-child(1) { transition-delay: 0ms; }
.neighborhoods.is-revealed .neighborhoods__item:nth-child(2) { transition-delay: 70ms; }
.neighborhoods.is-revealed .neighborhoods__item:nth-child(3) { transition-delay: 140ms; }
.neighborhoods.is-revealed .neighborhoods__item:nth-child(4) { transition-delay: 210ms; }

.neighborhoods__item:hover,
.neighborhoods__item:focus-visible {
  color: var(--ink, #1C1A17);
  transform: translateX(8px);
}
.neighborhoods__item:hover .neighborhoods__name,
.neighborhoods__item:focus-visible .neighborhoods__name {
  color: var(--ink, #1C1A17);
}
.neighborhoods__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--forest);
  display: block;
  transition: color 220ms;
}
.neighborhoods__tag {
  display: block;
  font-size: 0.95rem;
  color: var(--brown);
  margin-top: 6px;
  letter-spacing: 0.01em;
}
.neighborhoods__item:hover .neighborhoods__tag,
.neighborhoods__item:focus-visible .neighborhoods__tag {
  color: var(--moss);
}

@media (max-width: 900px) {
  .neighborhoods__spread {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .neighborhoods__media {
    min-height: 56vw;
  }
  .neighborhoods__list {
    padding: 48px 24px 64px;
  }
}

/* ============================================ */
/* FULL-BLEED IMAGE SECTION (Section A)         */
/* ============================================ */

.fullbleed-section[data-reveal] {
  /* Override default data-reveal fade+rise — the section's own custom
     animations on its children handle entry. The IntersectionObserver
     still adds .is-revealed, which the inner CSS uses as a trigger. */
  opacity: 1;
  transform: none;
  transition: none;
}
.fullbleed-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: var(--forest-deep);
  color: var(--cream);
}
.fullbleed-section__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.fullbleed-section__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.06) saturate(0.9) brightness(0.78);
  transform: scale(1.08);
  opacity: 1;
  transition: transform 1.3s var(--ease-out), opacity 1.3s var(--ease-out);
}
.fullbleed-section.is-revealed .fullbleed-section__media img {
  transform: scale(1);
  opacity: 1;
}
.fullbleed-section__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 12, 10, 0.10) 0%, rgba(14, 12, 10, 0.45) 100%);
  z-index: 1;
}
.fullbleed-section__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: clamp(40px, 8vw, 96px) clamp(24px, 6vw, 96px);
  max-width: 1280px;
  margin: 0 auto;
}
.fullbleed-section__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 4.6vw, 3.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--cream);
  max-width: 22ch;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-out) 220ms, transform 700ms var(--ease-out) 220ms;
}
.fullbleed-section.is-revealed .fullbleed-section__text {
  opacity: 1;
  transform: translateY(0);
}

/* ----- 11. PROCESS ----- */

.process {
  padding: var(--section-y) 0;
  background: var(--cream);
}
.process__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}
.process__head .eyebrow {
  padding-left: 0;
}

.process__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.process__list::before {
  content: '';
  position: absolute;
  top: 50px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--sage) 20%, var(--sage) 80%, transparent 100%);
  z-index: 0;
}

@media (max-width: 1024px) {
  .process__list {
    grid-template-columns: repeat(2, 1fr);
  }
  .process__list::before {
    display: none;
  }
}

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

.process__step {
  position: relative;
  z-index: 1;
  padding: 32px 24px;
  background: var(--cream-soft);
  border-radius: 20px;
  border: 1px solid var(--line);
  transition: all 350ms var(--ease-out);
}
.process__step:hover {
  transform: translateY(-4px);
  border-color: var(--sage);
}

.process__num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--moss);
  margin-bottom: 16px;
  letter-spacing: 0.1em;
}

.process__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--forest);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.process__copy {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--brown);
}

/* ----- 12. TESTIMONIAL ----- */

.testimonial {
  position: relative;
  padding: var(--section-y-tight) 0;
  background: var(--forest-deep);
  color: var(--cream);
  overflow: hidden;
}
.testimonial__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(181, 175, 160, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(200, 115, 26, 0.12) 0%, transparent 50%);
  z-index: 0;
}
.testimonial__container {
  position: relative;
  z-index: 1;
}
.testimonial__quote-wrap {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.testimonial__mark {
  display: block;
  font-family: var(--font-display);
  font-size: 8rem;
  line-height: 0.6;
  color: var(--sage);
  opacity: 0.4;
  margin-bottom: 24px;
  font-weight: 700;
}
.testimonial__quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.25;
  font-weight: 500;
  font-style: italic;
  color: var(--cream);
  margin-bottom: 32px;
  letter-spacing: -0.01em;
}
.testimonial__attr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.testimonial__name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--cream);
  letter-spacing: 0.04em;
}
.testimonial__role {
  font-size: 0.85rem;
  color: var(--sage-soft);
}

/* ----- 13. CONTACT ----- */

.contact {
  padding: var(--section-y-tight) 0;
  background: var(--cream);
}
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
}

@media (max-width: 1024px) {
  .contact__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.contact__list {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact__list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 16px 20px;
  background: var(--cream-soft);
  border-radius: 12px;
  border: 1px solid var(--line);
}
.contact__list-icon {
  grid-row: 1 / 3;
  font-size: 1.25rem;
  display: grid;
  place-items: center;
}
.contact__list a,
.contact__list strong,
.contact__list span {
  font-size: 0.95rem;
}
.contact__list a {
  color: var(--forest);
  font-weight: 600;
}
.contact__list a:hover {
  color: var(--moss);
}
.contact__list span:not(.contact__list-icon) {
  color: var(--brown-light);
  font-size: 0.85rem;
}

.contact__form {
  background: var(--cream-soft);
  padding: 40px;
  border-radius: 20px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}

.form__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form__row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (max-width: 480px) {
  .form__row--split { grid-template-columns: 1fr; }
}
.form__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brown-light);
}
.form__input {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 14px 16px;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  transition: all 200ms var(--ease-quick);
  width: 100%;
}
.form__input:focus {
  outline: none;
  border-color: var(--accent, #C8731A);
  box-shadow: 0 0 0 4px rgba(200, 115, 26, 0.12);
}
.form__input--select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%235C463A'%3E%3Cpath d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  padding-right: 40px;
}
.form__fine {
  font-size: 0.78rem;
  color: var(--brown-light);
  text-align: center;
  margin-top: -8px;
}
.form__success {
  font-size: 0.95rem;
  color: var(--accent, #C8731A);
  text-align: center;
  font-weight: 600;
  margin-top: 8px;
  display: none;
  padding: 12px;
  background: rgba(200, 115, 26, 0.08);
  border-radius: 2px;
}
.form__success.is-shown {
  display: block;
}
.form__success re-icon.form__success-icon {
  vertical-align: -3px;
  margin-right: 8px;
}

@media (max-width: 640px) {
  .contact__form {
    padding: 28px 24px;
  }
}

/* ----- 14. FAQ ----- */

.faq {
  padding: var(--section-y) 0;
  background: var(--cream-soft);
}
.faq__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.faq__head .eyebrow {
  padding-left: 0;
}

.faq__list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq__item {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: all 250ms var(--ease-quick);
}
.faq__item[open] {
  border-color: var(--accent, #C8731A);
  background: var(--cream-warm, #DDD6C2);
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--forest);
  transition: color 200ms;
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item summary:hover {
  color: var(--moss);
}
.faq__plus {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cream-soft);
  color: var(--moss);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  font-weight: 400;
  transition: all 300ms var(--ease-bouncy);
}
.faq__item[open] .faq__plus {
  transform: rotate(45deg);
  background: var(--accent, #C8731A);
  color: var(--paper, #F5F2EA);
}
.faq__item p {
  padding: 0 28px 28px;
  color: var(--brown);
  line-height: 1.6;
}

/* ----- 15. FOOTER ----- */

.footer {
  background: var(--forest-deep);
  color: var(--cream);
  padding: 80px 0 32px;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: 64px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line-on-dark);
}

@media (max-width: 1024px) {
  .footer__top {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer__brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--cream);
  color: var(--forest);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  font-style: italic;
  display: grid;
  place-items: center;
}
.footer__brand-img {
  height: 44px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.footer__brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--cream);
}
.footer__brand-sub {
  font-size: 0.85rem;
  color: var(--sage-soft);
  margin-top: 2px;
}

.footer__cross-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 16px;
}
.footer__cross-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 640px) {
  .footer__cross-grid {
    grid-template-columns: 1fr;
  }
}
.footer__cross-card {
  display: block;
  padding: 18px;
  background: rgba(245, 242, 234, 0.04);
  border: 1px solid var(--line-on-dark);
  border-radius: 12px;
  transition: all 250ms var(--ease-quick);
}
.footer__cross-card:hover {
  background: rgba(245, 242, 234, 0.08);
  border-color: var(--sage);
  transform: translateY(-2px);
}
.footer__cross-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--cream);
  margin-bottom: 4px;
}
.footer__cross-role {
  font-size: 0.78rem;
  color: var(--sage-soft);
}
.footer__cross-role.is-current {
  color: var(--sage);
  font-weight: 600;
}

.footer__middle {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: 48px 0;
  border-bottom: 1px solid var(--line-on-dark);
}

@media (max-width: 768px) {
  .footer__middle {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer__col-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 6px;
}
.footer__col a,
.footer__col span {
  font-size: 0.92rem;
  color: var(--cream-soft);
}
.footer__col a:hover {
  color: var(--cream);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  flex-wrap: wrap;
  gap: 16px;
}
.footer__copy {
  font-size: 0.85rem;
  color: var(--sage-soft);
}
.footer__legal {
  display: flex;
  gap: 24px;
}
.footer__legal a {
  font-size: 0.85rem;
  color: var(--sage-soft);
  transition: color 200ms;
}
.footer__legal a:hover {
  color: var(--cream);
}

/* ----- 16. REVEAL ANIMATIONS ----- */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="80"] {
  transition-delay: 80ms;
}
[data-reveal-delay="120"] {
  transition-delay: 120ms;
}
[data-reveal-delay="160"] {
  transition-delay: 160ms;
}
[data-reveal-delay="240"] {
  transition-delay: 240ms;
}

/* Directional reveal variants — image-left/copy-right (and mirrored) splits
   slide in from their own side instead of the generic straight-up fade.
   --reveal-x shrinks at narrower widths so nothing pushes past the viewport
   edge; below 600px the motion is vertical-only per the mobile guidance. */
:root { --reveal-x: 40px; }
@media (max-width: 1024px) { :root { --reveal-x: 24px; } }
@media (max-width: 600px)  { :root { --reveal-x: 0px; } }

[data-reveal][data-reveal-dir="left"] {
  transform: translateY(24px) translateX(calc(var(--reveal-x) * -1));
}
[data-reveal][data-reveal-dir="right"] {
  transform: translateY(24px) translateX(var(--reveal-x));
}
[data-reveal][data-reveal-dir="left"].is-revealed,
[data-reveal][data-reveal-dir="right"].is-revealed {
  transform: none;
}

/* Card-grid "pop" — used on family/service/listing cards for a slightly
   livelier, youthful entrance than the plain fade+rise. Listing cards are
   generated by tools/gen-proof-cards.php and already carry [data-reveal];
   they're matched by tag/class here instead of a hand-added attribute so the
   generator output never needs hand-editing between its markers. */
[data-reveal][data-reveal-pop],
.listing-card[data-reveal] {
  transform: translateY(16px) scale(0.97);
}
[data-reveal][data-reveal-pop].is-revealed,
.listing-card[data-reveal].is-revealed {
  transform: none;
}

/* Jan's featured family card has a static -12px "lift" (see .family__card--featured
   above) that the generic [data-reveal].is-revealed{transform:none} rule was
   silently overriding once the card scrolled into view, so the featured
   treatment never actually showed on the live site. Restore it at matching
   specificity, and use the reveal itself as the moment the card rises into
   its featured position. */
.family__card--featured[data-reveal] { transform: translateY(0); }
.family__card--featured[data-reveal].is-revealed { transform: translateY(-12px); }
.family__card--featured[data-reveal]:hover,
.family__card--featured[data-reveal].is-revealed:hover { transform: translateY(-18px); }
@media (max-width: 1024px) {
  .family__card--featured[data-reveal],
  .family__card--featured[data-reveal].is-revealed { transform: none; }
  .family__card--featured[data-reveal]:hover,
  .family__card--featured[data-reveal].is-revealed:hover { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
  /* The directional/pop variants add a second attribute selector, which
     out-specifies the plain [data-reveal] rule above — without this, a
     reduced-motion visitor could see the pre-reveal offset "stuck" on an
     element that hasn't scrolled into the IntersectionObserver's view yet. */
  [data-reveal][data-reveal-dir="left"],
  [data-reveal][data-reveal-dir="right"],
  [data-reveal][data-reveal-pop],
  .listing-card[data-reveal] {
    transform: none;
  }
  .family__card--featured[data-reveal],
  .family__card--featured[data-reveal].is-revealed {
    transform: translateY(-12px);
  }
  @media (max-width: 1024px) {
    .family__card--featured[data-reveal],
    .family__card--featured[data-reveal].is-revealed {
      transform: none;
    }
  }
  .hero__video {
    transform: translate(-50%, -50%) scale(1) !important;
  }
}

/* ----- 17. UTILITY: hidden by lang ----- */

[lang-switch-hidden] {
  display: none !important;
}

/* ----- 18. CONSOLIDATED TESTIMONIALS ----- */

.testimonials {
  padding: var(--section-y) 0;
  background: var(--cream);
  position: relative;
}

.testimonials__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
}
.testimonials__head .eyebrow {
  padding-left: 0;
}

.testimonials__reviews-note {
  max-width: 720px;
  margin: 0 auto 48px;
  padding: 16px 22px;
  background: var(--cream-soft);
  border: 1px dashed var(--sage);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.92rem;
  color: var(--brown);
  line-height: 1.5;
}
.testimonials__reviews-icon {
  font-size: 1.2rem;
  color: var(--olive);
  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}

@media (max-width: 1024px) {
  .testimonials__grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
  }
}

.tcard {
  position: relative;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: all 400ms var(--ease-out);
}
.tcard:hover {
  transform: translateY(-6px);
  border-color: var(--sage);
  box-shadow: 0 24px 48px -20px rgba(14, 12, 10, 0.2);
}
.tcard--featured {
  background: var(--forest);
  color: var(--cream);
  border-color: var(--forest);
}
.tcard--featured:hover {
  border-color: var(--sage);
  box-shadow: 0 32px 64px -20px rgba(14, 12, 10, 0.35);
}

.tcard__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tcard__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--cream);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.tcard--featured .tcard__avatar {
  background: var(--cream);
  color: var(--forest);
}

.tcard__who {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.tcard__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--forest);
  letter-spacing: -0.01em;
}
.tcard--featured .tcard__name {
  color: var(--cream);
}
.tcard__loc {
  font-size: 0.78rem;
  color: var(--brown-light);
  margin-top: 2px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.tcard--featured .tcard__loc {
  color: var(--sage-soft);
}

.tcard__quote {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--brown);
  flex: 1;
}
.tcard--featured .tcard__quote {
  color: var(--cream-soft);
}

.tcard__tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--moss);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  background: rgba(200, 115, 26, 0.1);
  border-radius: 999px;
  align-self: flex-start;
}
.tcard--featured .tcard__tag {
  color: var(--sage);
  background: rgba(181, 175, 160, 0.18);
}

.testimonials__cta {
  text-align: center;
}

/* ----- 20. STICKY MOBILE CTA BAR ----- */

.mobile-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  gap: 10px;
  align-items: center;
  box-shadow: 0 -8px 32px -8px rgba(14, 12, 10, 0.2);
  transform: translateY(100%);
  transition: transform 280ms var(--ease-quick);
}
.mobile-cta.is-shown {
  transform: translateY(0);
}

.mobile-cta__call {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--paper-2, #E8E2D2);
  border: 1.5px solid var(--ink, #1C1A17);
  color: var(--ink, #1C1A17);
  border-radius: 2px;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: all 200ms;
}
.mobile-cta__call:hover {
  background: var(--ink, #1C1A17);
  color: var(--paper, #F5F2EA);
}

.mobile-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.mobile-cta__call-text {
  font-weight: 600;
}

.mobile-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 14px 16px;
  background: var(--ink, #1C1A17);
  color: var(--paper, #F5F2EA);
  border-radius: 2px;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 200ms;
}
.mobile-cta__btn:hover {
  background: var(--accent, #C8731A);
  border-color: var(--accent, #C8731A);
}

.mobile-cta__arrow {
  font-size: 0.95rem;
  transition: transform 200ms;
}
.mobile-cta__btn:hover .mobile-cta__arrow {
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .mobile-cta {
    display: flex;
  }
  /* Pad main content so footer isn't covered by sticky bar */
  body {
    padding-bottom: 76px;
  }
}

@media (max-width: 380px) {
  .mobile-cta__call-text {
    display: none;
  }
  .mobile-cta__call {
    padding: 12px 14px;
  }
}

/* ----- 22. FLOATING BILINGUAL BADGE ("Hablamos español") ----- */

.float-es-badge {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 14px;
  background: rgba(245, 242, 234, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid var(--ink, #1C1A17);
  border-radius: 2px;
  box-shadow: 0 12px 32px -12px rgba(28, 26, 23, 0.28);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink, #1C1A17);
  transition: all 280ms var(--ease-out);
  cursor: default;
  user-select: none;
}
.float-es-badge:hover {
  transform: translateY(-2px);
  background: var(--ink, #1C1A17);
  color: var(--paper, #F5F2EA);
  box-shadow: 0 16px 40px -12px rgba(14, 12, 10, 0.36);
  border-color: var(--ink, #1C1A17);
}
.float-es-badge:hover .float-es-badge__dot {
  background: var(--accent, #C8731A);
}
.float-es-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #C8731A);
  flex-shrink: 0;
  transition: background 220ms var(--ease-quick);
}
.float-es-badge__text {
  font-style: normal;
  color: inherit;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.01em;
}
.float-es-badge__lang {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: inherit;
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: 0.7;
}

/* Hide on mobile to avoid colliding with the sticky bottom CTA bar */
@media (max-width: 1024px) {
  .float-es-badge {
    display: none;
  }
}

/* ----- 23. SUBTLE SECTION DIVIDERS ----- */

/* Where two sections share a background color, add a thin sage top-border
   to create a soft break without changing the palette. */
.testimonials {
  border-top: 1px solid var(--line);
}

/* Mobile: lighten the divider so it doesn't feel heavy on small screens */
@media (max-width: 768px) {
  .testimonials {
    border-top-color: rgba(28, 26, 23, 0.08);
  }
}

/* ============ RECENT RENTALS + NEXT-GEN CALLOUT ============ */
.rentals { background: var(--cream); }
.rentals__head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.rentals__callout {
  max-width: 880px; margin: 0 auto 56px;
  padding: 32px 36px;
  background: var(--forest);
  color: var(--cream);
  border-left: 4px solid var(--moss);
}
.rentals__callout p { margin: 0; font-family: var(--font-display); font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.5; }
.rentals__callout strong { color: var(--cream); font-weight: 600; }
.rentals__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-bottom: 48px;
}
.rental-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent, #C8731A);
  padding: 24px 22px 22px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.rental-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -12px rgba(28, 26, 23, 0.18); }
.rental-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rental-card__badge {
  display: inline-block; padding: 4px 10px;
  background: var(--ink, #1C1A17); color: var(--paper, #F5F2EA);
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em;
}
.rental-card__loc { font-family: var(--font-body); font-size: 12px; color: var(--brown); letter-spacing: 0.04em; }
.rental-card__tour-badge {
  display: inline-block; padding: 4px 10px;
  background: var(--gold, #C8731A); color: var(--ink, #1C1A17);
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em;
  border-radius: 2px;
}
.rental-card__addr { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.rental-card__meta { font-family: var(--font-body); font-size: 0.875rem; color: var(--brown); }
.rental-card__price { display: flex; align-items: baseline; gap: 4px; margin-top: auto; }
.rental-card__tour-link,
.rental-card__stage-link {
  display: block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #C8731A);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.rental-card__tour-link:hover,
.rental-card__stage-link:hover {
  text-decoration: underline;
}
.rental-card__amount { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; color: var(--forest); }
.rental-card__per { font-family: var(--font-body); font-size: 0.875rem; color: var(--brown); }
.rentals__cta { text-align: center; }
@media (max-width: 900px) { .rentals__grid { grid-template-columns: 1fr; gap: 18px; } }

/* ============ BROKERAGE REVIEWS (Jan) ============ */
.brokerage-reviews { background: var(--forest-deep); color: var(--cream); }
.brokerage-reviews__head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.brokerage-reviews__head .eyebrow { color: var(--sage); }
.brokerage-reviews__head .h2 { color: var(--cream); }
.brokerage-reviews__head .section-lede { color: var(--cream-soft); }
.brokerage-reviews__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-bottom: 64px;
}
.br-card {
  background: var(--forest);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 28px 24px 22px;
  display: flex; flex-direction: column; gap: 16px;
}
.br-card__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px; color: var(--accent, #C8731A); font-size: 0.95rem; letter-spacing: 0.2em; }
.br-card__quote {
  font-family: var(--font-body); font-size: 1rem; line-height: 1.55;
  color: var(--cream); flex: 1;
}
.br-card__quote::before { content: '"'; color: var(--sage); font-weight: 700; font-size: 1.2em; margin-right: 2px; }
.br-card__quote::after { content: '"'; color: var(--sage); font-weight: 700; font-size: 1.2em; margin-left: 2px; }
.br-card__attr {
  display: flex; flex-direction: column; gap: 2px;
  padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.10);
}
.br-card__attr strong { font-family: var(--font-body); font-weight: 600; color: var(--cream); font-size: 0.875rem; }
.br-card__source { font-size: 0.7rem; color: var(--sage); letter-spacing: 0.18em; text-transform: uppercase; }
.brokerage-reviews__trust {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  padding-top: 48px; border-top: 1px solid rgba(255,255,255,0.10);
  text-align: center;
}
.brokerage-reviews__num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); color: var(--sage); line-height: 1; margin-bottom: 10px; }
.brokerage-reviews__lbl { font-family: var(--font-body); font-size: 0.875rem; color: var(--cream-soft); line-height: 1.5; }
@media (max-width: 900px) {
  .brokerage-reviews__grid { grid-template-columns: 1fr; }
  .brokerage-reviews__trust { grid-template-columns: 1fr; gap: 40px; }
}

/* ============ BY THE NUMBERS (data strip — verified from Success King Realty) ============ */
.bythenums {
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.bythenums__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.bythenums__head .eyebrow { color: var(--moss); }
.bythenums__head .section-lede { color: var(--brown); }
.bythenums__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--cream-soft);
  border: 1px solid var(--line);
}
.bythenums__grid .stat {
  padding: 36px 24px;
  text-align: center;
  border-right: 1px solid var(--line);
}
.bythenums__grid .stat:last-child { border-right: none; }
.bythenums .stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.bythenums .stat__num-unit {
  font-size: 0.6em;
  color: var(--accent, #C8731A);
  font-weight: 700;
  margin-left: 2px;
}
.bythenums .stat__label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--brown);
  line-height: 1.4;
  letter-spacing: 0.01em;
}
@media (max-width: 900px) {
  .bythenums__grid { grid-template-columns: repeat(2, 1fr); }
  .bythenums__grid .stat:nth-child(2) { border-right: none; }
  .bythenums__grid .stat:nth-child(1),
  .bythenums__grid .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .bythenums__grid { grid-template-columns: 1fr; }
  .bythenums__grid .stat { border-right: none; border-bottom: 1px solid var(--line); }
  .bythenums__grid .stat:last-child { border-bottom: none; }
}
.bythenums__also {
  margin: 28px auto 0;
  max-width: 880px;
  padding: 0 24px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--brown);
  font-style: italic;
}
.bythenums__also strong {
  font-style: normal;
  font-weight: 600;
  color: var(--moss);
  letter-spacing: 0.01em;
}

/* ============ CURRENT LISTINGS (verified active + rented from Success King Realty) ============ */
.listings { background: var(--cream); }
.listings__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.listings__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.listings__grid[hidden] { display: none; }
.listings__grid--more {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  max-width: 1100px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
}
.listings__grid--more.is-open {
  opacity: 1;
  transform: translateY(0);
}
.listing-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent, #C8731A);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  overflow: hidden;
}
.listing-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -12px rgba(28, 26, 23, 0.18);
}
.listing-card--has-img { padding: 0; }
.listing-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--cream-warm, #DDD6C2);
}
.listing-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease-out);
}
.listing-card:hover .listing-card__media img { transform: scale(1.04); }
.listing-card__body {
  padding: 22px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.listing-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.listing-card__status {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.listing-card__status--forsale { background: var(--ink, #1C1A17); color: var(--cream, #F5F2EA); }
.listing-card__status--forrent { background: var(--accent, #C8731A); color: var(--cream, #F5F2EA); }
.listing-card__status--sold { background: var(--cream-warm, #DDD6C2); color: var(--ink, #1C1A17); border: 1px solid var(--line); }
.listing-card__status--rented { background: var(--ink, #1C1A17); color: var(--cream, #F5F2EA); }
.listing-card__status--unknown { background: var(--cream-warm, #DDD6C2); color: var(--ink, #1C1A17); border: 1px solid var(--line); }
.listing-card__addr {
  transition: color .35s ease;
}
.listing-card__badge {
  display: inline-block;
  padding: 4px 10px;
  background: var(--cream-warm, #DDD6C2);
  color: var(--ink, #1C1A17);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.listing-card__addr {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  margin-top: 4px;
}
.listing-card__unit {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brown);
  margin-left: 4px;
}
.listing-card__hood {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--brown);
}
.listing-card__meta {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--brown);
  opacity: .85;
  line-height: 1.4;
}
.listing-card__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.listing-card__beds {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--ink);
  font-weight: 500;
}
.listing-card__sep { color: var(--moss); margin: 0 4px; }
.listing-card__price {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--forest);
  line-height: 1;
  margin-top: 4px;
}
.listing-card__price-unit {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brown);
  margin-left: 2px;
}
.listing-card__view {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent, #C8731A);
  letter-spacing: 0.02em;
}
.listings__more { text-align: center; }
.listings__toggle {
  display: flex;
  justify-content: center;
  margin: 0 auto 28px;
}
.listings__toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--cream-soft);
  border: 1px solid var(--ink, #1C1A17);
  color: var(--ink, #1C1A17);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.listings__toggle-btn:hover { background: var(--ink, #1C1A17); color: var(--cream-soft); }
.listings__arrow {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  transition: transform .3s ease;
}
@media (max-width: 900px) {
  .listings__grid { grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (max-width: 720px) {
  .listings__grid { grid-template-columns: 1fr; gap: 18px; }
}
/* When the full family portfolio count isn't a multiple of 3, the last card
   lands alone on its own row at desktop, flush left, reading like a layout
   mistake rather than a deliberate ending. Center it under the middle column
   instead. Only matches a genuinely-lone last card (nth-child(3n+1) AND
   last-child), so it stays correct if the record count changes. */
@media (min-width: 901px) {
  .listings__grid--more > .listing-card:nth-child(3n+1):last-child {
    grid-column: 2 / span 1;
  }
}

/* ============ BROKERAGE REVIEWS (Jan) — updated ============ */
.brokerage-reviews { background: var(--forest-deep); color: var(--cream); }
.brokerage-reviews__head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.brokerage-reviews__head .eyebrow { color: var(--sage); }
.brokerage-reviews__head .h2 { color: var(--cream); }
.brokerage-reviews__head .section-lede { color: var(--cream-soft); }
.brokerage-reviews__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-bottom: 48px;
}
.br-card {
  background: var(--forest);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 28px 24px 22px;
  display: flex; flex-direction: column; gap: 16px;
}
.br-card__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px; color: var(--accent, #C8731A); font-size: 0.95rem; letter-spacing: 0.2em; }
.br-card__quote {
  font-family: var(--font-body); font-size: 1rem; line-height: 1.55;
  color: var(--cream); flex: 1;
  margin: 0;
}
.br-card__quote--es { font-style: normal; }
.br-card__trans {
  font-family: var(--font-body);
  font-size: 0.825rem;
  line-height: 1.5;
  color: var(--sage-soft, #B5AFA0);
  font-style: italic;
  margin: -4px 0 0;
}
.br-card__attr {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.10);
}
.br-card__name {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--cream);
  font-size: 0.95rem;
}
.br-card__source { font-size: 0.72rem; color: var(--sage); letter-spacing: 0.12em; text-transform: uppercase; }
.brokerage-reviews__more { text-align: center; margin-bottom: 64px; }
.brokerage-reviews__more .btn--ink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: var(--cream, #F5F2EA);
  color: var(--ink, #1C1A17);
  border: 1.5px solid var(--cream, #F5F2EA);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: all 200ms;
}
.brokerage-reviews__more .btn--ink:hover {
  background: var(--accent, #C8731A);
  border-color: var(--accent, #C8731A);
  color: var(--cream, #F5F2EA);
}
.brokerage-reviews__trust {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  padding-top: 48px; border-top: 1px solid rgba(255,255,255,0.10);
  text-align: center;
}
.brokerage-reviews__num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); color: var(--sage); line-height: 1; margin-bottom: 10px; }
.brokerage-reviews__num-unit { font-size: 0.6em; color: var(--accent, #C8731A); margin-left: 2px; }
.brokerage-reviews__lbl { font-family: var(--font-body); font-size: 0.875rem; color: var(--cream-soft); line-height: 1.5; }
@media (max-width: 900px) {
  .brokerage-reviews__grid { grid-template-columns: 1fr; }
  .brokerage-reviews__trust { grid-template-columns: 1fr; gap: 40px; }
}

/* ============ END-OF-FILE RESPONSIVE OVERRIDES ============ */
/* Footer collapses to 1 column below 480px to prevent overflow at iPhone SE / 320px widths. */
@media (max-width: 480px) {
  .footer__middle { grid-template-columns: 1fr; gap: 24px; }
  .footer__top { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
  .footer__cross-grid { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; gap: 32px; }
  .contact__list li { flex-direction: column; align-items: flex-start; gap: 4px; }
  .form__row { margin-bottom: 16px; }
}

/* Constrain wide buttons on small viewports */
@media (max-width: 640px) {
  .testimonials__cta .btn,
  .service-card__link { max-width: 100%; width: 100%; justify-content: center; }
  .testimonials__cta { padding: 0 8px; }
  .family__head, .neighborhoods__head, .services__head, .process__head, .testimonials__head, .faq__head, .contact__copy .lede { word-wrap: break-word; overflow-wrap: break-word; }
}

/* ============ A11Y: skip link already exists, focus-visible + reduced motion ============ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent, #1C1A17);
  outline-offset: 3px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================ */
/* HOME VALUE FORM */
/* ============================================ */
.home-value {
  background: var(--cream, #F5F2EA);
  color: var(--forest-deep, #1C1A17);
  padding: 80px 0;
  border-top: 1px solid rgba(28, 26, 23, 0.1);
  border-bottom: 1px solid rgba(28, 26, 23, 0.1);
}
.home-value__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.home-value__lead {
  color: var(--brown, #3A3733);
  font-size: 17px;
  line-height: 1.6;
  max-width: 56ch;
  margin: 16px 0 24px;
}
.home-value__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.home-value__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
}
.home-value__list li re-icon.list-icon {
  flex-shrink: 0;
  margin-top: 3px;
}.home-value__form {
  background: var(--white, #FFFFFF);
  border: 1px solid rgba(28, 26, 23, 0.15);
  border-radius: 8px;
  padding: 32px;
  display: grid;
  gap: 16px;
  box-shadow: 0 12px 32px -16px rgba(28, 26, 23, 0.18);
}
.home-value__form .form__field { display: flex; flex-direction: column; gap: 6px; }
.home-value__form .form__field label {
  color: var(--brown, #3A3733);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.home-value__form .form__field input,
.home-value__form .form__field select {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(28, 26, 23, 0.2);
  color: var(--forest-deep, #1C1A17);
  font-family: inherit;
  font-size: 16px;
  padding: 10px 0;
  transition: border-color 0.15s ease;
}
.home-value__form .form__field input::placeholder { color: var(--brown-light, #6B665E); opacity: 0.6; }
.home-value__form .form__field input:focus,
.home-value__form .form__field select:focus {
  outline: none;
  border-color: var(--moss, #6B665E);
}
.home-value__form .form__field--row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.home-value__form .form__field--row > div { display: flex; flex-direction: column; gap: 6px; }
.home-value__submit {
  background: var(--ink, #1C1A17);
  color: var(--paper, #F5F2EA);
  border: 1.5px solid var(--ink, #1C1A17);
  padding: 18px 24px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: background 200ms var(--ease-quick), border-color 200ms var(--ease-quick),
              transform 180ms var(--ease-quick), box-shadow 220ms var(--ease-quick);
  border-radius: 2px;
}
.home-value__submit:hover {
  background: var(--accent, #C8731A);
  border-color: var(--accent, #C8731A);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(200, 115, 26, 0.45);
}
.home-value__form .form__fine {
  color: var(--brown-light, #6B665E);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  margin: 0;
}
@media (max-width: 900px) {
  .home-value__grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 540px) {
  .home-value__form .form__field--row { grid-template-columns: 1fr; }
}

/* ============================================ */
/* CALENDLY LINK (below form) */
/* ============================================ */
.form__calendly {
  display: block;
  text-align: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(28, 26, 23, 0.15);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #C8731A);
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.form__calendly:hover { text-decoration: underline; }

/* Reicon (re-icon) base styles */
re-icon {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}
re-icon[aria-hidden="true"] {
  pointer-events: none;
}

/* ---------- Responsive image safety (2026 audit) ---------- */
img, picture, video, svg {
  max-width: 100%;
  height: auto;
}
img[src$=".svg"] { height: auto; }

/* ============================================ */
/* QUOTE SECTION (Section B)                    */
/* 100vh, single sentence, no other elements.   */
/* Bricolage Grotesque italic on forest green.  */
/* ============================================ */

.quote-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--forest);
  color: var(--cream);
  padding: clamp(64px, 12vw, 160px) clamp(24px, 8vw, 120px);
  overflow: hidden;
}
/* Override default data-reveal fade+rise — the text opacity is the
   only motion we want for the quote. */
.quote-section[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}
.quote-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(181, 175, 160, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(200, 115, 26, 0.10) 0%, transparent 55%);
  z-index: 0;
}
.quote-section__text {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(2rem, 5.4vw, 4.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cream);
  text-align: center;
  max-width: 18ch;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
.quote-section.is-revealed .quote-section__text {
  opacity: 1;
}

/* ============================================ */
/* VARIABLE MOTION — reduce-motion fallback     */
/* ============================================ */

@media (prefers-reduced-motion: reduce) {
  .fullbleed-section__media img,
  .fullbleed-section__text,
  .quote-section__text,
  .neighborhoods__media img,
  .neighborhoods__item {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
  }
  .fullbleed-section__media img { transform: scale(1) !important; }
}

/* Hide platform "Created by Agent" badge */
#minimax-floating-ball { display: none !important; }