/* SBZ Real Estate - FF-DESIGN-1 elevation layer.
 * Loaded after site.css. Content and layout remain complete without this file;
 * motion stays gated by html.js and prefers-reduced-motion in site.css.
 */

/* Coordinated editorial scale. The wide-screen branch deliberately starts at
 * the old 1440px ceiling and continues to scale instead of flattening there. */
.page-sections h1.display-2xl {
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.4rem);
  line-height: 1;
}
.page-sections h1.display-xl {
  font-size: clamp(2.7rem, 1.7rem + 4.4vw, 5.4rem);
  line-height: 1;
}
.page-sections h2.display-lg {
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
  line-height: 1.05;
}
.page-sections h2.display-md {
  font-size: clamp(1.65rem, 1.35rem + 1.5vw, 2.4rem);
  line-height: 1.08;
}
.page-sections .lead {
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
}

@media (min-width: 1440px) {
  .page-sections h1.display-2xl,
  .page-sections h1.display-xl {
    font-size: clamp(4.4rem, calc(2.2rem + 2.45vw), 7rem);
  }
  .page-sections h2.display-lg {
    font-size: clamp(3.25rem, calc(.55rem + 3vw), 4.75rem);
  }
  .page-sections h2.display-md {
    font-size: clamp(2.4rem, calc(.65rem + 1.95vw), 3.5rem);
  }
  .page-sections--post .article h2 {
    font-size: clamp(2.4rem, calc(.65rem + 1.95vw), 3.5rem);
  }
  .page-sections .lead {
    font-size: clamp(1.6rem, calc(1rem + .67vw), 1.85rem);
  }
}

/* Shader hosts. Static gradients are also the no-WebGL fallback. */
.hero--shader,
.route-hero--shader {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero-shader {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(72% 92% at 82% 16%, rgba(168, 81, 43, .7), transparent 68%),
    radial-gradient(78% 94% at 58% 105%, rgba(76, 67, 58, .5), transparent 72%),
    #faf6f0;
}

.hero-shader::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(102deg, rgba(250, 246, 240, .91) 0%, rgba(250, 246, 240, .82) 34%, rgba(250, 246, 240, .50) 65%, rgba(250, 246, 240, .28) 100%),
    radial-gradient(68% 96% at 16% 44%, rgba(255, 253, 250, .72), transparent 100%);
}

.hero-shader__renderer,
.hero-shader__canvas,
.hero-shader__static,
.hero-shader__canvas canvas {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.hero-shader__renderer { z-index: 1; }
.hero-shader__static--grain {
  background:
    radial-gradient(85% 100% at 78% 14%, rgba(168, 81, 43, .86), transparent 62%),
    radial-gradient(74% 86% at 52% 104%, rgba(76, 67, 58, .64), transparent 70%),
    linear-gradient(145deg, #faf6f0, #f1f4f7 52%, #7e3717);
}
.hero-shader__static--blobs {
  background:
    radial-gradient(circle at 78% 22%, #a8512b 0 18%, transparent 38%),
    radial-gradient(circle at 62% 92%, #4c433a 0 22%, transparent 44%),
    radial-gradient(circle at 96% 66%, #7e3717 0 16%, transparent 36%),
    #faf6f0;
}
.hero-shader__static--warp {
  background:
    radial-gradient(82% 96% at 88% 8%, rgba(168, 81, 43, .9), transparent 63%),
    radial-gradient(76% 94% at 58% 102%, rgba(76, 67, 58, .72), transparent 68%),
    radial-gradient(50% 72% at 100% 74%, rgba(126, 55, 23, .65), transparent 66%),
    #faf6f0;
}

@media (prefers-reduced-motion: reduce) {
  .hero-shader,
  .hero-shader * {
    animation: none !important;
    transition: none !important;
  }
}

/* Homepage: the grain shader replaces the legacy gradient/video fallback. */
.hero--shader {
  min-height: min(820px, calc(100svh - 74px));
  align-items: center;
  padding-block: clamp(4rem, 8vw, 7rem);
  color: var(--text-body);
  background: var(--surface-page);
  border-bottom: 1px solid color-mix(in oklab, var(--border) 72%, transparent);
}
.hero--shader .hero__bg { display: none; }
.hero--shader .hero__inner { z-index: 3; }
.hero--shader .hero__content { max-width: 48rem; }
.page-sections .hero--shader h1.display-2xl {
  max-width: 12ch;
  color: var(--text-strong);
  text-shadow: 0 1px 24px rgba(255, 253, 250, .6);
}
.hero--shader .lead { max-width: 40rem; color: var(--text-body); }
.hero--shader .hero__eyebrow { color: var(--accent-strong); }
.hero--shader .review-strip { color: var(--text-body); }
.hero--shader .review-chip strong { color: var(--text-strong); }
.hero--shader .review-chip.dre { color: var(--text-muted); }
.hero--shader .stars { color: var(--accent-strong); }
.hero--shader .btn--glass {
  --btn-bg: rgba(255, 253, 250, .68);
  --btn-fg: var(--text-strong);
  --btn-bd: rgba(76, 67, 58, .32);
  backdrop-filter: blur(12px) saturate(1.08);
  box-shadow: inset 0 1px rgba(255, 255, 255, .72);
}
.hero--shader .hero__scroll { display: none; }

/* Funnel and index heroes keep their original markup while becoming one
 * atmospheric surface. Placeholder media and EmbedSlots remain untouched. */
.route-hero--shader {
  min-height: clamp(560px, 57vw, 760px);
  display: flex;
  align-items: center;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 72%, transparent);
}
.route-hero--shader > .container {
  position: relative;
  z-index: 3;
}
.route-hero--shader h1 { max-width: 12ch; }
.route-hero--shader .lead { max-width: 40rem; color: var(--text-body); }
.route-hero--shader .photo,
.route-hero--shader .embed-slot {
  background-color: rgba(255, 253, 250, .84);
  border-color: rgba(210, 193, 172, .82);
  box-shadow: 0 34px 78px -50px rgba(33, 27, 22, .58), inset 0 1px rgba(255, 255, 255, .72);
  backdrop-filter: blur(13px) saturate(1.04);
}
.route-hero--communities,
.route-hero--blog {
  min-height: clamp(560px, 50vw, 690px);
}
.route-hero--blog .section-head { max-width: 64ch !important; }
.route-hero--blog .chip-row { position: relative; z-index: 3; }

/* Section openers gain an editorial anchor without changing their content. */
.page-sections .section-head {
  max-width: 54rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.page-sections .section-head .lead { max-width: 58ch; }
.page-sections .eyebrow:not(.eyebrow--bare)::before {
  width: 32px;
  height: 1px;
}

/* Approved photography inherits the existing card language and stays
 * subordinate to the section copy. Intrinsic ratios reserve every slot. */
.page-sections .sbz-photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-color: color-mix(in oklab, var(--border) 82%, transparent);
  box-shadow: 0 24px 60px -46px rgba(33, 27, 22, .72), inset 0 1px rgba(255, 255, 255, .54);
}
.page-sections .sbz-photo--pathway { aspect-ratio: 5 / 4; }
.page-sections .sbz-photo--portrait { aspect-ratio: 4 / 5; }
.page-sections .sbz-photo--community { aspect-ratio: 3 / 2; }
.page-sections .sbz-avatar {
  display: block;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--border-strong) 80%, transparent);
  box-shadow: 0 12px 28px -22px rgba(33, 27, 22, .78);
}
.page-sections--home .section--ink .sbz-photo {
  border: 1px solid rgba(244, 236, 226, .18);
  box-shadow: 0 30px 68px -48px rgba(0, 0, 0, .88), inset 0 1px rgba(255, 255, 255, .12);
}

/* Card treatments are mapped directly to the design-system surface roles. */
.page-sections .pathway,
.page-sections .community,
.page-sections .post-card,
.page-sections .contact-method,
.page-sections .testimonial,
.page-sections .card {
  border-color: color-mix(in oklab, var(--border) 82%, transparent);
  box-shadow: 0 18px 48px -42px rgba(33, 27, 22, .72), inset 0 1px rgba(255, 255, 255, .72);
}
.page-sections .pathway,
.page-sections .community {
  border-top: 3px solid color-mix(in oklab, var(--accent) 72%, var(--border));
  border-radius: var(--radius-sm) var(--radius-sm) var(--radius-xl) var(--radius-xl);
}
.page-sections .pathway:nth-child(even),
.page-sections .community:nth-child(even) {
  border-top-color: color-mix(in oklab, var(--pine-500) 68%, var(--border));
}
.page-sections .post-card,
.page-sections .contact-method,
.page-sections .testimonial {
  border-radius: var(--radius-sm) var(--radius-sm) var(--radius-lg) var(--radius-lg);
}
.page-sections .stats {
  gap: 0;
  border-block: 1px solid var(--border);
}
.page-sections .stats > div {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-right: 1px solid var(--border);
}
.page-sections .stats > div:last-child { border-right: 0; }
.page-sections .stat__num { font-variant-numeric: lining-nums tabular-nums; }
.page-sections .testimonial {
  border: 0;
  border-top: 1px solid var(--border-strong);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* EmbedSlot remains a visibly bounded placeholder. No simulated widget UI. */
.page-sections .embed-slot {
  border-width: 1.5px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .78), 0 24px 60px -52px rgba(33, 27, 22, .58);
}

/* Ink CTA/authority sections retain the DS ink variant with a cut-paper edge. */
.page-sections .section--ink {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(72% 120% at 92% -12%, rgba(168, 81, 43, .28), transparent 64%),
    linear-gradient(112deg, #211b16 0 68%, #322b25 68% 100%);
}
.page-sections .section--ink::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 79px, rgba(244, 236, 226, .025) 80px);
}
.page-sections .section--ink > .container { position: relative; z-index: 1; }

/* Elevate owns the entrance timing. Siblings stagger in 80ms desktop / 60ms
 * mobile, with hidden states still gated by the existing liveness class. */
@media (prefers-reduced-motion: no-preference) {
  html.js .page-sections [data-reveal] {
    --rise: 28px;
    transition-duration: .78s;
    transition-timing-function: var(--ease-out);
  }
  html.js .page-sections [data-reveal][data-delay="1"] { transition-delay: .08s; }
  html.js .page-sections [data-reveal][data-delay="2"] { transition-delay: .16s; }
  html.js .page-sections [data-reveal][data-delay="3"] { transition-delay: .24s; }

  /* Commissioned imagery settles into place without competing with the
   * existing rise choreography. Reduced-motion keeps the static end state. */
  html.js .page-sections img.sbz-photo[data-reveal],
  html.js .page-sections img.sbz-avatar[data-reveal] {
    transform: translate3d(0, var(--plx, 0px), 0) scale(1.03);
    transition: opacity .78s var(--ease-out), transform .9s var(--ease-out);
  }
  html.js .page-sections img.sbz-photo[data-reveal].is-in,
  html.js .page-sections img.sbz-avatar[data-reveal].is-in {
    transform: translate3d(0, var(--plx, 0px), 0) scale(1);
  }
  html.js .page-sections .pathway:not(.is-in) .sbz-photo,
  html.js .page-sections .community:not(.is-in) .sbz-photo { transform: scale(1.03); }
  html.js .page-sections .pathway.is-in .sbz-photo,
  html.js .page-sections .community.is-in .sbz-photo { transform: scale(1); }
  html.js .page-sections .pathway.is-in:hover .sbz-photo,
  html.js .page-sections .community.is-in:hover .sbz-photo { transform: scale(1.05); }

  .page-sections .pathway,
  .page-sections .community,
  .page-sections .post-card,
  .page-sections .contact-method,
  .page-sections .testimonial,
  .page-sections .card {
    transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
  }
  .page-sections .pathway:hover,
  .page-sections .community:hover,
  .page-sections .post-card:hover,
  .page-sections .contact-method:hover,
  .page-sections .testimonial:hover,
  .page-sections .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  html.js .page-sections [data-reveal] { --rise: 14px; transition-duration: .5s; }
  html.js .page-sections [data-reveal][data-delay="1"] { transition-delay: .06s; }
  html.js .page-sections [data-reveal][data-delay="2"] { transition-delay: .12s; }
  html.js .page-sections [data-reveal][data-delay="3"] { transition-delay: .18s; }
}

@media (max-width: 899px) {
  .hero--shader,
  .route-hero--shader {
    min-height: auto;
    padding-block: 4rem;
  }
  .hero-shader::after {
    background:
      linear-gradient(180deg, rgba(250, 246, 240, .80) 0%, rgba(250, 246, 240, .74) 55%, rgba(250, 246, 240, .67) 100%),
      radial-gradient(90% 70% at 10% 18%, rgba(255, 253, 250, .38), transparent 74%);
  }
  .route-hero--shader h1,
  .hero--shader h1 { max-width: 11ch; }
  .route-hero--shader .photo,
  .route-hero--shader .embed-slot { backdrop-filter: blur(9px); }
  .page-sections .stats { grid-template-columns: 1fr 1fr; }
  .page-sections .stats > div:nth-child(2) { border-right: 0; }
  .page-sections .stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}

@media (max-width: 560px) {
  .hero--shader { padding-block: 3.25rem 4rem; }
  .route-hero--shader { padding-block: 3.5rem; }
  .route-hero--blog { padding-bottom: 4rem; }
  .route-hero--shader .grid-2 { gap: 3rem; }
  .page-sections .stats { grid-template-columns: 1fr; }
  .page-sections .stats > div {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .page-sections .stats > div:last-child { border-bottom: 0; }
}

@media print {
  .hero-shader { display: none !important; }
  .hero--shader,
  .route-hero--shader { background: var(--surface-page) !important; }
}

/* ============================================================
   SBZRE-SCALE-3: pinned luxury-retail poster choreography.
   The no-JS state is the complete settled composition. elevate.js
   writes phase variables from the existing passive rAF scrub loop.
   ============================================================ */

.moment {
  --moment-p: 1;
  --fill-p: 1;
  --photo-type-p: 0;
  --solid-type-p: 1;
  --veil-p: .12;
  --mid-p: 1;
  --settle-p: 1;
  --type-x: 0vw;
  --type-y: 0svh;
  position: relative;
  height: 320svh;
  min-height: 92rem;
  overflow: clip;
  background: var(--surface-ink);
}
.moment__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  isolation: isolate;
  background: #17120f;
}
.moment__bg {
  position: absolute;
  inset: -7svh -2vw;
  z-index: 0;
  width: 104vw;
  height: calc(100% + 14svh);
  max-width: none;
  object-fit: cover;
  will-change: transform;
}
.moment--buy .moment__bg { object-position: 50% 62%; }
.moment--sell .moment__bg { object-position: 50% 54%; }
.moment__scrim,
.moment__photo-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.moment__scrim { z-index: 1; }
.moment__photo-veil {
  z-index: 2;
  opacity: var(--veil-p);
  background: #110d0a;
  will-change: opacity;
}
.moment--buy .moment__scrim {
  background:
    linear-gradient(0deg, rgba(13, 9, 6, .91) 0%, rgba(13, 9, 6, .50) 36%, rgba(13, 9, 6, .09) 74%),
    linear-gradient(92deg, rgba(13, 9, 6, .52) 0%, rgba(13, 9, 6, .12) 58%, rgba(13, 9, 6, .28) 100%),
    radial-gradient(96% 72% at 18% 88%, rgba(20, 13, 8, .48), transparent 70%);
}
.moment--sell .moment__scrim {
  background:
    linear-gradient(0deg, rgba(12, 9, 7, .90) 0%, rgba(12, 9, 7, .43) 43%, rgba(12, 9, 7, .10) 76%),
    linear-gradient(270deg, rgba(12, 9, 7, .58) 0%, rgba(12, 9, 7, .08) 60%, rgba(12, 9, 7, .30) 100%),
    radial-gradient(88% 72% at 82% 80%, rgba(18, 12, 8, .50), transparent 72%);
}
.moment__mid {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  opacity: calc(.2 + var(--mid-p) * .8);
  transform: translate3d(0, calc(5svh - var(--mid-p) * 8svh), 0);
  will-change: transform, opacity;
}
.moment__index {
  position: absolute;
  top: 4svh;
  color: rgba(255, 248, 239, .11);
  font-family: var(--font-display);
  font-size: clamp(17rem, 43vw, 40rem);
  font-weight: var(--fw-medium);
  line-height: .8;
  letter-spacing: -.09em;
  white-space: nowrap;
}
.moment--buy .moment__index { right: -3vw; }
.moment--sell .moment__index { left: -6vw; }
.moment__frame {
  position: absolute;
  inset: clamp(1.25rem, 4vw, 4rem);
  border: 1px solid rgba(255, 248, 239, .30);
  opacity: calc(.2 + var(--mid-p) * .8);
  transform: scale3d(calc(.94 + var(--mid-p) * .06), calc(.94 + var(--mid-p) * .06), 1);
  will-change: transform, opacity;
}
.moment--sell .moment__frame {
  inset: clamp(1.25rem, 4vw, 4rem) clamp(2rem, 8vw, 8rem);
  border-color: rgba(255, 248, 239, .38);
}
.moment__content.container-wide {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: clamp(5rem, 10svh, 8rem) clamp(.75rem, 2.2vw, 2.5rem) clamp(3rem, 7svh, 6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translate3d(var(--type-x), var(--type-y), 0);
  will-change: transform;
}
.moment__words {
  width: 100%;
  color: #fff8ef;
  font-size: clamp(76px, 20vw, 19rem);
  line-height: .69;
  letter-spacing: -.065em;
  font-weight: var(--fw-medium);
  text-shadow: 0 3px 40px rgba(8, 5, 3, .62), 0 1px 2px rgba(8, 5, 3, .56);
  text-wrap: nowrap;
  transform: scale3d(calc(.985 + var(--settle-p) * .015), 1, 1);
  transform-origin: center center;
  will-change: transform;
}
.moment--sell .moment__words {
  font-size: clamp(72.5px, 18.6vw, 17.5rem);
  line-height: .72;
}
.moment__line,
.moment__mask { display: block; }
.moment__line:first-child { text-align: left; }
.moment__line--indent { text-align: right; }
.moment__mask {
  overflow: hidden;
  padding-block: .12em .11em;
  margin-block: -.12em -.11em;
}
.moment__word {
  --word-p: 1;
  --word-x: 0vw;
  position: relative;
  display: inline-block;
  opacity: calc(.72 + var(--word-p) * .28);
  transform: translate3d(var(--word-x), calc((1 - var(--word-p)) * .24em), 0);
  will-change: transform, opacity;
}
.moment__word-base,
.moment__word-solid,
.moment__word-photo { display: block; }
.moment__word-base {
  color: rgba(255, 248, 239, .22);
  -webkit-text-stroke: 1px rgba(255, 248, 239, .92);
}
.moment__fill-window,
.moment__word-photo {
  position: absolute;
  inset: 0;
}
.moment__fill-window {
  overflow: hidden;
  opacity: var(--solid-type-p);
  transform: translate3d(calc((var(--fill-p) - 1) * 100%), 0, 0);
  will-change: transform, opacity;
}
.moment__word-solid {
  color: #fff8ef;
  transform: translate3d(calc((1 - var(--fill-p)) * 100%), 0, 0);
  will-change: transform;
}
.moment__word-photo {
  color: #fff8ef;
  opacity: var(--photo-type-p);
  text-shadow: 0 2px 1px rgba(255, 248, 239, .20), 0 10px 44px rgba(0, 0, 0, .72);
  will-change: opacity;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .moment__word-photo {
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image:
      linear-gradient(rgba(255, 255, 255, .10), rgba(255, 255, 255, .10)),
      var(--moment-photo);
    background-size: 100vw 116svh;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    filter: saturate(1.28) brightness(1.34) contrast(1.12);
  }
  .moment--buy .moment__word-photo { background-position: 48% 63%; }
  .moment--sell .moment__word-photo { background-position: 52% 48%; }
}
.moment--buy .moment__line:first-child { padding-left: .01em; }
.moment--buy .moment__line--indent { padding-right: .045em; }
.moment--sell .moment__line:first-child { padding-left: 4vw; }
.moment--sell .moment__line--indent { padding-right: .035em; }
.moment__foot {
  display: grid;
  grid-template-columns: minmax(3rem, 16vw) minmax(0, 34rem);
  gap: clamp(1rem, 2vw, 2rem);
  align-items: center;
  margin-top: clamp(1.25rem, 3.5svh, 3rem);
}
.moment__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255, 248, 239, .72);
  transform: scaleX(calc(.12 + var(--settle-p) * .88));
  transform-origin: left center;
  will-change: transform, opacity;
}
.moment--sell .moment__rule {
  width: clamp(5rem, 22vw, 20rem);
  margin: clamp(1.5rem, 3svh, 3rem) 0 0 auto;
  transform-origin: right center;
}
.moment__sub {
  max-width: 34rem;
  color: rgba(255, 248, 239, .94);
  font-size: clamp(1rem, 1.35vw, 1.32rem);
  line-height: 1.4;
  letter-spacing: .015em;
  opacity: calc(.15 + var(--settle-p) * .85);
  transform: translate3d(0, calc((1 - var(--settle-p)) * 1.4rem), 0);
  text-shadow: 0 2px 18px rgba(8, 5, 3, .76);
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: no-preference) {
  html.js .moment__bg {
    transform: translate3d(calc(var(--moment-p) * -1.4vw), calc(4.2svh - var(--moment-p) * 8.4svh), 0) scale(calc(1.015 + var(--moment-p) * .085));
  }
}

@media (max-width: 700px) {
  .moment {
    height: 270svh;
    min-height: 72rem;
  }
  .moment__content.container-wide {
    padding: max(5.25rem, 11svh) .5rem max(4.75rem, 9svh);
  }
  .moment--buy .moment__words {
    font-size: clamp(76px, 20vw, 5.5rem);
    line-height: .73;
  }
  .moment--sell .moment__words {
    font-size: clamp(72.5px, 18.6vw, 5.25rem);
    line-height: .76;
  }
  .moment--sell .moment__line:first-child { padding-left: .08em; }
  .moment__foot {
    grid-template-columns: 3rem minmax(0, 1fr);
    margin-top: 1.65rem;
    padding-inline: .5rem;
  }
  .moment__sub { max-width: 18rem; font-size: 1rem; }
  .moment__frame { inset: 1rem; }
  .moment--sell .moment__frame { inset: 1rem 1.4rem; }
  .moment__index { top: 10svh; font-size: clamp(14rem, 78vw, 21rem); }
  .moment--buy .moment__bg { object-position: 51% 58%; }
  .moment--sell .moment__bg { object-position: 50% 50%; }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .moment__word-photo { background-size: 108vw 116svh; }
  }
}

/* ============================================================
   SBZRE-SCALE-3B: the home flow band extends the poster language.
   The complete no-JS state is solid and settled; elevate.js scrubs
   the same outline/fill/photo phases and differential layer motion.
   ============================================================ */
.flowband {
  --band-p: 1;
  --band-fill-p: 1;
  --band-photo-type-p: 0;
  --band-solid-type-p: 1;
  --band-title-x: 0vw;
  --band-title-y: 0svh;
  --band-track-y: 0svh;
  --band-bg-x: -1.6vw;
  --band-bg-y: -2.5svh;
  --band-photo-x: -7%;
  --band-tracking: -.02em;
  position: relative;
  height: 280vh;
  overflow: clip;
  background: var(--surface-ink);
}
.flowband__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
  background: var(--surface-ink);
}
.flowband__stage::before {
  content: "";
  position: absolute;
  inset: -12svh -8vw;
  z-index: 0;
  background:
    radial-gradient(72% 92% at 86% 10%, rgba(206, 144, 107, .22), transparent 60%),
    radial-gradient(60% 78% at 12% 92%, rgba(102, 73, 56, .20), transparent 68%),
    linear-gradient(112deg, #17120f 0%, var(--surface-ink) 54%, #1b1410 100%);
  transform: translate3d(var(--band-bg-x), var(--band-bg-y), 0) scale3d(1.05, 1.05, 1);
  will-change: transform;
}
.flowband__head {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(-3.6rem, -3vw, -0.8rem);
  pointer-events: none;
  transform: translate3d(var(--band-title-x), var(--band-title-y), 0);
  will-change: transform;
}
.flowband__title {
  color: #fff8ef;
  font-size: clamp(56px, 11.5vw, 172px);
  line-height: .94;
  letter-spacing: var(--band-tracking);
  font-weight: var(--fw-medium);
  text-shadow: 0 2px 34px rgba(0, 0, 0, .58);
}
.flowband__title-layer {
  position: relative;
  display: block;
}
.flowband__title-base,
.flowband__title-solid,
.flowband__title-photo { display: block; }
.flowband__title-base {
  color: rgba(255, 248, 239, .18);
  -webkit-text-stroke: 1px rgba(255, 248, 239, .94);
}
.flowband__fill-window,
.flowband__title-photo {
  position: absolute;
  inset: 0;
}
.flowband__fill-window {
  overflow: hidden;
  opacity: var(--band-solid-type-p);
  transform: translate3d(calc((var(--band-fill-p) - 1) * 100%), 0, 0);
  will-change: transform, opacity;
}
.flowband__title-solid {
  color: #fff8ef;
  transform: translate3d(calc((1 - var(--band-fill-p)) * 100%), 0, 0);
  will-change: transform;
}
.flowband__title-photo {
  color: #fff8ef;
  opacity: var(--band-photo-type-p);
  text-shadow: 0 2px 1px rgba(255, 248, 239, .18), 0 12px 42px rgba(0, 0, 0, .78);
  will-change: opacity;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .flowband__title-photo {
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image:
      linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)),
      var(--flowband-photo);
    background-size: 108vw 78svh;
    background-position: calc(50% + var(--band-photo-x)) 52%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    filter: saturate(1.24) brightness(1.42) contrast(1.12);
  }
}
.flowband__track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: clamp(.9rem, 1.8vw, 1.75rem);
  padding-inline: var(--gutter);
  padding-top: clamp(1rem, 2.5vh, 2rem);
  will-change: transform;
}
.flowband__track img {
  flex: none;
  height: clamp(260px, 56vh, 620px);
  width: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(244, 236, 226, .14);
  box-shadow: 0 30px 68px -48px rgba(0, 0, 0, .85);
}
.flowband__track img:nth-child(even) {
  height: clamp(220px, 46vh, 520px);
  margin-top: clamp(1.2rem, 4vh, 3rem);
}

@media (max-width: 700px) {
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .flowband__title-photo { background-size: 190vw 72svh; }
  }
}

@media (min-width: 701px) {
  .flowband__head { top: clamp(1rem, 2.8vw, 2.5rem); }
}

/* ---- Home hero steps up a size class ---- */
.page-sections--home .hero--shader h1.display-2xl {
  font-size: clamp(3.1rem, 1.9rem + 5.8vw, 6.6rem);
  max-width: 13ch;
}
@media (min-width: 1440px) {
  .page-sections--home .hero--shader h1.display-2xl {
    font-size: clamp(6.6rem, calc(2rem + 3.6vw), 8rem);
  }
}

/* ---- Continuous scroll drift layered onto revealed content (desktop) ---- */
@media (prefers-reduced-motion: no-preference) {
  html.js .page-sections [data-reveal] {
    transform: translate3d(0, calc(var(--rise, 0px) + var(--plx, 0px) + var(--flow, 0px)), 0);
  }
}

/* ---- Reduced motion: moments and band go fully static, still composed ---- */
@media (prefers-reduced-motion: reduce) {
  .moment { height: auto; }
  .moment__stage {
    position: relative;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
  }
  .moment__bg { transform: none !important; }
  .moment__words { clip-path: none !important; transform: none !important; }
  .moment__word,
  .moment__sub,
  .moment__rule { opacity: 1 !important; transform: none !important; }
  .flowband {
    --band-fill-p: 1;
    --band-photo-type-p: 0;
    --band-solid-type-p: 1;
    --band-title-x: 0vw;
    --band-title-y: 0svh;
    --band-track-y: 0svh;
    --band-bg-x: 0vw;
    --band-bg-y: 0svh;
    --band-tracking: -.02em;
    height: auto;
  }
  .flowband__stage {
    position: relative;
    height: auto;
    padding-block: var(--section-y);
    overflow: visible;
  }
  .flowband__stage::before { transform: none !important; }
  .flowband__head { margin-bottom: clamp(1.5rem, 4vw, 3rem); }
  .flowband__track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    transform: none !important;
  }
  .flowband__track img,
  .flowband__track img:nth-child(even) {
    width: 100%;
    height: auto;
    margin-top: 0;
    aspect-ratio: 3 / 2;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 700px) {
  .flowband__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  .moment,
  .flowband { height: auto; }
  .moment__stage,
  .flowband__stage { position: relative; height: auto; }
}

/* ============================================================
   SBZRE-COMM-1 — editorial community reports.
   Full-bleed chapters replace the legacy equal-card directory;
   market figures are tabular, unboxed, and visually primary.
   ============================================================ */
.page-sections--communities,
.page-sections--community-palmdale,
.page-sections--community-lancaster,
.page-sections--community-quartz-hill,
.page-sections--community-santa-clarita {
  background: #f5efe6;
}

.comm-index-hero {
  min-height: calc(70dvh - 84px);
  padding-block: clamp(3.5rem, 6vw, 6rem) clamp(4rem, 8vw, 7rem);
  display: flex;
  align-items: flex-end;
  background:
    radial-gradient(80% 110% at 94% -10%, rgba(170, 97, 59, .13), transparent 62%),
    #f5efe6;
}
.comm-index-hero__inner { display: grid; gap: clamp(2.5rem, 5vw, 5rem); }
.comm-index-hero h1 {
  max-width: 9.5ch;
  font-size: clamp(4.2rem, 11.2vw, 10.5rem);
  line-height: .78;
  letter-spacing: -.055em;
  font-weight: var(--fw-medium);
}
.comm-index-hero h1 em { color: var(--accent-strong); font-weight: inherit; }
.comm-index-hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 34rem) auto;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-strong);
}
.comm-index-hero__foot p { font-size: clamp(1.15rem, 1.5vw, 1.45rem); line-height: 1.4; }
.comm-index-hero__foot span,
.community-band__period {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.community-bands { background: var(--surface-ink); }
.community-band {
  position: relative;
  isolation: isolate;
  min-height: clamp(680px, 92dvh, 940px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid rgba(244, 236, 226, .14);
}
.community-band > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: scale(1.012);
  transition: transform 1.1s var(--ease-out), filter .6s var(--ease-out);
}
.community-band:nth-child(even) > img { object-position: 65% center; }
.community-band:hover > img { transform: scale(1.035); filter: saturate(1.04); }
.community-band__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(17, 13, 9, .86) 0%, rgba(17, 13, 9, .62) 42%, rgba(17, 13, 9, .16) 78%),
    linear-gradient(0deg, rgba(17, 13, 9, .76), transparent 56%);
}
.community-band:nth-child(even) .community-band__scrim {
  background:
    linear-gradient(-90deg, rgba(17, 13, 9, .86) 0%, rgba(17, 13, 9, .62) 42%, rgba(17, 13, 9, .16) 78%),
    linear-gradient(0deg, rgba(17, 13, 9, .76), transparent 56%);
}
.community-band__content {
  padding-block: clamp(4rem, 8vw, 7rem);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(28rem, .8fr);
  grid-template-areas: "name stats" "link period";
  align-items: end;
  gap: 3rem clamp(4rem, 8vw, 9rem);
  color: var(--text-on-ink);
}
.community-band:nth-child(even) .community-band__content {
  grid-template-columns: minmax(28rem, .8fr) minmax(0, 1.2fr);
  grid-template-areas: "stats name" "period link";
  text-align: right;
}
.community-band__name { grid-area: name; }
.community-band__name span {
  display: block;
  margin-bottom: .8rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244, 236, 226, .72);
}
.community-band__name h2 {
  color: var(--text-on-ink);
  font-size: clamp(4.5rem, 9.5vw, 9.5rem);
  line-height: .76;
  letter-spacing: -.045em;
}
.community-band__stats {
  grid-area: stats;
  display: grid;
  gap: 1rem;
  border-top: 1px solid rgba(244, 236, 226, .36);
  padding-top: 1.5rem;
}
.community-band__stats > div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline; }
.community-band__stats dt {
  font-family: var(--font-mono);
  font-size: .67rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(244, 236, 226, .65);
}
.community-band__stats dd {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.6rem);
  line-height: .9;
  font-variant-numeric: lining-nums tabular-nums;
}
.community-band__link {
  grid-area: link;
  width: fit-content;
  padding-bottom: .3rem;
  border-bottom: 1px solid rgba(244, 236, 226, .65);
  font-weight: var(--fw-semibold);
  transition: border-color .25s ease, color .25s ease;
}
.community-band:nth-child(even) .community-band__link { justify-self: end; }
.community-band__link:hover { color: var(--accent-on-dark); border-color: var(--accent-on-dark); }
.community-band__period { grid-area: period; color: rgba(244, 236, 226, .58); text-align: right; }
.community-band:nth-child(even) .community-band__period { text-align: left; }

.community-hero {
  position: relative;
  isolation: isolate;
  min-height: min(900px, calc(92dvh - 84px));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--surface-ink);
}
.community-hero__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.page-sections--community-santa-clarita .community-hero__image { object-position: center 58%; }
.community-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(18deg, rgba(16, 12, 9, .92) 5%, rgba(16, 12, 9, .46) 48%, rgba(16, 12, 9, .08) 77%),
    linear-gradient(90deg, rgba(16, 12, 9, .38), transparent 64%);
}
.community-hero__inner { padding-block: clamp(4rem, 9vw, 8rem); color: var(--text-on-ink); }
.community-hero__back {
  display: block;
  width: fit-content;
  margin-bottom: clamp(4rem, 10vh, 8rem);
  padding-bottom: .2rem;
  border-bottom: 1px solid rgba(244, 236, 226, .56);
  font-size: var(--text-sm);
}
.community-hero .eyebrow { color: var(--accent-on-dark); }
.community-hero h1 {
  color: var(--text-on-ink);
  margin: .35rem 0 1.5rem;
  font-size: clamp(5rem, 15vw, 13rem);
  line-height: .72;
  letter-spacing: -.055em;
  text-shadow: 0 3px 44px rgba(0, 0, 0, .35);
}
.community-hero__inner > p:last-child {
  max-width: 42rem;
  font-size: clamp(1.15rem, 1.65vw, 1.5rem);
  line-height: 1.4;
  color: rgba(244, 236, 226, .88);
}

.market-report { padding-block: clamp(7rem, 13vw, 13rem); }
.market-report__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 3rem;
  margin-bottom: clamp(4rem, 7vw, 7rem);
}
.market-report__head h2 {
  max-width: 10ch;
  margin-top: 1rem;
  font-size: clamp(3.4rem, 7vw, 7rem);
  line-height: .86;
  letter-spacing: -.045em;
}
.market-report__period { text-align: right; padding-bottom: .6rem; }
.market-report__period strong { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--text-strong); }
.market-report__period span { font-family: var(--font-mono); font-size: .67rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.market-boundary-note {
  max-width: 54rem;
  margin: -2rem 0 4rem auto;
  padding-left: 1.25rem;
  border-left: 2px solid var(--accent);
  color: var(--text-muted);
}
.market-ledger {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  border-top: 1px solid var(--border-strong);
  margin-bottom: clamp(6rem, 10vw, 10rem);
}
.market-ledger > div {
  grid-column: span 3;
  min-width: 0;
  padding: 1.3rem 1.5rem 2.4rem 0;
  border-bottom: 1px solid var(--border);
}
.market-ledger > .market-ledger__primary {
  grid-column: span 6;
  padding-block: clamp(2rem, 4vw, 4rem);
}
.market-ledger dt {
  min-height: 2.5em;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .075em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--text-muted);
}
.market-ledger dd {
  margin-block: .55rem .4rem;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 5.2rem);
  line-height: .88;
  letter-spacing: -.035em;
  color: var(--text-strong);
  font-variant-numeric: lining-nums tabular-nums;
}
.market-ledger__primary dd { font-size: clamp(4.2rem, 8.5vw, 8.5rem); }
.market-ledger span { font-size: var(--text-xs); color: var(--text-muted); }

.market-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); }
.market-chart {
  min-width: 0;
  padding-block: 1.4rem 1rem;
  border-block: 1px solid var(--border-strong);
}
.market-chart--wide { grid-column: 1 / -1; margin-top: clamp(2rem, 4vw, 4rem); }
.market-chart__head { display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline; }
.market-chart figcaption { font-weight: var(--fw-semibold); color: var(--text-strong); }
.market-chart__head > span,
.market-chart__axis {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.market-sparkline { width: 100%; height: auto; margin-block: clamp(2rem, 5vw, 4rem) 1rem; overflow: visible; }
.market-sparkline__baseline { fill: none; stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.market-sparkline__line { fill: none; stroke: var(--accent-strong); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.market-sparkline__point { fill: var(--accent-strong); stroke: #f5efe6; stroke-width: 3; vector-effect: non-scaling-stroke; }
.market-chart__axis { display: flex; justify-content: space-between; }

.living-here { padding-block: clamp(8rem, 16vw, 16rem); background: #ded4c7; }
.living-here__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(4rem, 12vw, 12rem); align-items: start; }
.living-here h2 {
  max-width: 9ch;
  margin-top: 1.2rem;
  font-size: clamp(3.7rem, 7vw, 7.4rem);
  line-height: .86;
  letter-spacing: -.045em;
}
.living-here__copy { max-width: 42rem; padding-top: clamp(4rem, 10vw, 9rem); }
.living-here__copy p { font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.65; }
.living-here__copy p + p { margin-top: 2rem; }

.comm-outcome { padding-block: clamp(8rem, 15vw, 15rem); }
.comm-outcome__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, .45fr); gap: 2rem clamp(4rem, 10vw, 10rem); align-items: end; }
.comm-outcome .eyebrow { grid-column: 1 / -1; }
.comm-outcome h2 {
  max-width: 12ch;
  color: var(--text-on-ink);
  font-size: clamp(3.8rem, 8vw, 8rem);
  line-height: .84;
  letter-spacing: -.045em;
}
.comm-outcome__inner > p:not(.eyebrow) { color: var(--text-on-ink-muted); font-size: var(--text-lg); }
.comm-outcome__links { grid-column: 2; display: flex; flex-wrap: wrap; gap: 1.5rem; }
.comm-outcome__links a { padding-bottom: .3rem; border-bottom: 1px solid var(--accent-on-dark); color: var(--text-on-ink); font-weight: var(--fw-semibold); }
.market-attribution { padding-block: 1.2rem; border-top: 1px solid var(--border); background: #f5efe6; color: var(--text-muted); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .025em; }

@media (min-width: 900px) {
  .site-footer .footer-grid { grid-template-columns: 1.35fr .72fr .8fr .72fr; }
}

@media (max-width: 899px) {
  .comm-index-hero { min-height: auto; }
  .comm-index-hero__foot,
  .community-band__content,
  .community-band:nth-child(even) .community-band__content,
  .market-report__head,
  .living-here__grid,
  .comm-outcome__inner { grid-template-columns: 1fr; }
  .community-band__content,
  .community-band:nth-child(even) .community-band__content {
    grid-template-areas: "name" "stats" "link" "period";
    text-align: left;
  }
  .community-band:nth-child(even) .community-band__link { justify-self: start; }
  .community-band__period,
  .community-band:nth-child(even) .community-band__period,
  .market-report__period { text-align: left; }
  .community-band__content { gap: 2rem; }
  .market-report__head { align-items: start; }
  .market-ledger > div { grid-column: span 6; }
  .market-ledger > .market-ledger__primary { grid-column: span 6; }
  .living-here__copy { padding-top: 0; }
  .comm-outcome__links { grid-column: 1; }
}

@media (max-width: 600px) {
  .comm-index-hero { padding-block: 5rem 3.5rem; }
  .comm-index-hero h1 { font-size: clamp(3.7rem, 18vw, 5.2rem); line-height: .82; }
  .comm-index-hero__foot { gap: 1.5rem; }
  .community-band { min-height: 760px; }
  .community-band__scrim,
  .community-band:nth-child(even) .community-band__scrim {
    background: linear-gradient(0deg, rgba(17, 13, 9, .94) 0%, rgba(17, 13, 9, .62) 58%, rgba(17, 13, 9, .12) 100%);
  }
  .community-band__name h2 { font-size: clamp(4rem, 21vw, 6rem); line-height: .8; }
  .community-band__stats dd { font-size: 2.05rem; }
  .community-band__period { line-height: 1.5; }
  .community-hero { min-height: calc(88dvh - 74px); }
  .community-hero__back { margin-bottom: 28vh; }
  .community-hero h1 { font-size: clamp(4.2rem, 22vw, 6.4rem); line-height: .77; }
  .market-report { padding-block: 6rem; }
  .market-report__head h2 { font-size: clamp(3.25rem, 15vw, 4.7rem); }
  .market-boundary-note { margin: -1rem 0 3rem; }
  .market-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-ledger > div,
  .market-ledger > .market-ledger__primary { grid-column: span 1; padding-right: .75rem; }
  .market-ledger > .market-ledger__primary { grid-column: 1 / -1; }
  .market-ledger dd { font-size: clamp(2.45rem, 13vw, 3.5rem); }
  .market-ledger__primary dd { font-size: clamp(4rem, 20vw, 5.6rem); }
  .market-charts { grid-template-columns: 1fr; }
  .market-chart--wide { grid-column: 1; }
  .market-chart__head { align-items: flex-start; flex-direction: column; gap: .4rem; }
  .living-here { padding-block: 7rem; }
  .living-here h2 { font-size: clamp(3.4rem, 16vw, 4.9rem); }
  .comm-outcome { padding-block: 7rem; }
  .comm-outcome h2 { font-size: clamp(3.5rem, 16vw, 5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .community-band > img,
  .community-band:hover > img { transform: none; transition: none; }
  .community-band__link { transition: none; }
}

/* ============================================================
   SBZRE hero market snapshot rail (Tony 8/20: "the hero's right
   side looks empty — give it some animation, and keep the pieces
   next to each other on mobile").

   Desktop: a glass card parked in the hero's empty right column,
   cycling the five areas named in the eyebrow. Mobile: the card
   drops under the CTAs full-width and the three metrics STAY in
   one 3-across row — they never stack.

   No-JS / reduced-motion: the first area renders settled and
   static. Cycling is added by elevate.js via .is-cycling only.
   ============================================================ */

.page-sections--home .hero--shader .hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(20rem, 27vw, 25.5rem);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
.page-sections--home .hero--shader .hero__content { grid-column: 1; }

.hero-pulse {
  grid-column: 2;
  align-self: end;
  position: relative;
  z-index: 3;
  padding: clamp(1.25rem, 1.6vw, 1.75rem) clamp(1.25rem, 1.7vw, 1.85rem) clamp(1rem, 1.3vw, 1.35rem);
  border: 1px solid rgba(210, 193, 172, .82);
  border-radius: var(--radius-lg, 18px);
  background: rgba(255, 253, 250, .74);
  backdrop-filter: blur(14px) saturate(1.06);
  box-shadow: 0 34px 78px -50px rgba(33, 27, 22, .58), inset 0 1px rgba(255, 255, 255, .72);
}

.hero-pulse__head {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: clamp(.9rem, 1.2vw, 1.15rem);
}
.hero-pulse__label,
.hero-pulse__source {
  font-family: var(--font-mono, monospace);
  font-size: .66rem;
  letter-spacing: .075em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-pulse__label { color: var(--accent-strong); }
.hero-pulse__source { margin-left: auto; color: var(--text-faint); letter-spacing: .05em; }

.hero-pulse__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent);
}
html.js .hero-pulse__dot { animation: sbz-pulse-dot 2.6s var(--ease-out, ease-out) infinite; }

@keyframes sbz-pulse-dot {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 50%, transparent); opacity: 1; }
  60%  { box-shadow: 0 0 0 7px rgba(168, 81, 43, 0); opacity: .78; }
  100% { box-shadow: 0 0 0 0 rgba(168, 81, 43, 0); opacity: 1; }
}

/* Slides share one grid cell, so the card height never jumps mid-cycle. */
.hero-pulse__stage { display: grid; }
.hero-pulse__slide {
  grid-area: 1 / 1 / 2 / 2;
  margin: 0;
  opacity: 0;
  visibility: hidden;
}
.hero-pulse__slide:first-child { opacity: 1; visibility: visible; }
.hero-pulse.is-cycling .hero-pulse__slide:first-child { opacity: 0; visibility: hidden; }
.hero-pulse.is-cycling .hero-pulse__slide {
  transform: translateY(6px);
  filter: blur(2px);
  transition: opacity .55s var(--ease-out, ease-out), transform .55s var(--ease-out, ease-out),
    filter .55s var(--ease-out, ease-out), visibility 0s linear .55s;
}
.hero-pulse.is-cycling .hero-pulse__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  transition-delay: 0s;
}

.hero-pulse__area {
  margin: 0 0 .55rem;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 1.9vw, 2.05rem);
  line-height: 1.05;
  color: var(--text-strong);
}
.hero-pulse.is-cycling .hero-pulse__slide.is-active .hero-pulse__area { animation: sbz-pulse-in .6s var(--ease-out, ease-out) both; }
.hero-pulse.is-cycling .hero-pulse__slide.is-active .hero-pulse__metrics > div { animation: sbz-pulse-in .6s var(--ease-out, ease-out) both; }
.hero-pulse.is-cycling .hero-pulse__slide.is-active .hero-pulse__metrics > div:nth-child(1) { animation-delay: .07s; }
.hero-pulse.is-cycling .hero-pulse__slide.is-active .hero-pulse__metrics > div:nth-child(2) { animation-delay: .14s; }
.hero-pulse.is-cycling .hero-pulse__slide.is-active .hero-pulse__metrics > div:nth-child(3) { animation-delay: .21s; }

@keyframes sbz-pulse-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* The three metrics are a row at EVERY width — never a stack. */
.hero-pulse__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.6rem, 1.1vw, 1rem);
  margin: 0;
}
.hero-pulse__metrics > div {
  min-width: 0;
  padding-left: clamp(.6rem, .9vw, .85rem);
  border-left: 1px solid var(--border);
}
.hero-pulse__metrics > div:first-child { padding-left: 0; border-left: 0; }
.hero-pulse__metrics dt {
  font-family: var(--font-mono, monospace);
  font-size: .6rem;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-pulse__metrics dd {
  margin: .3rem 0 0;
  font-family: var(--font-mono, monospace);
  font-weight: 500;
  font-size: clamp(.86rem, 1.05vw, 1.02rem);
  letter-spacing: -.01em;
  color: var(--text-strong);
  white-space: nowrap;
}
.hero-pulse__delta.is-up { color: var(--pine-600); }
.hero-pulse__delta.is-down { color: var(--critical); }

/* Dwell indicator: the one piece of continuous motion. */
.hero-pulse__track {
  margin-top: clamp(.9rem, 1.2vw, 1.15rem);
  height: 1px;
  overflow: hidden;
  background: var(--border);
}
.hero-pulse__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}
.hero-pulse.is-cycling .hero-pulse__fill { animation: sbz-pulse-fill var(--pulse-dwell, 5200ms) linear both; }

@keyframes sbz-pulse-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (max-width: 1023px) {
  .page-sections--home .hero--shader .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 2.5rem);
  }
  /* Belt and braces. The JS already skips the parallax when stacked, but a browser
     holding a cached elevate.js would re-apply the old translate and drive the CTAs
     into the market rail. A transform does not affect layout, so nothing can reserve
     space for it - the only safe answer at this width is no transform at all. */
  .page-sections--home .hero--shader .hero__content { transform: none !important; }
  .hero-pulse {
    grid-column: 1;
    align-self: stretch;
    max-width: 34rem;
  }
}

@media (max-width: 560px) {
  .hero-pulse {
    max-width: none;
    padding: 1.05rem 1rem .9rem;
    border-radius: 14px;
  }
  .hero-pulse__head { gap: .45rem; margin-bottom: .8rem; }
  .hero-pulse__label { font-size: .62rem; letter-spacing: .07em; }
  .hero-pulse__source { font-size: .58rem; letter-spacing: .03em; }
  .hero-pulse__area { font-size: 1.5rem; margin-bottom: .5rem; }
  .hero-pulse__metrics { gap: .55rem; }
  .hero-pulse__metrics > div { padding-left: .55rem; }
  .hero-pulse__metrics dt { font-size: .53rem; letter-spacing: .05em; }
  .hero-pulse__metrics dd { font-size: .84rem; margin-top: .25rem; }
  .hero-pulse__track { margin-top: .8rem; }
}

/* Very narrow phones: keep all three metrics on one line by trading size. */
@media (max-width: 380px) {
  .hero-pulse__metrics dd { font-size: .78rem; }
  .hero-pulse__metrics > div { padding-left: .45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-pulse__dot,
  .hero-pulse__fill,
  .hero-pulse__slide,
  .hero-pulse__area,
  .hero-pulse__metrics > div {
    animation: none !important;
    transition: none !important;
  }
  .hero-pulse__fill { transform: scaleX(1); opacity: .35; }
}

@media print {
  .hero-pulse__track { display: none; }
}

/* TYPO-1: Instrument Serif stays at its native 400 weight. */
.page-sections h1.display-2xl,
.page-sections h1.display-xl,
.page-sections .hero--shader h1.display-2xl,
.route-hero--shader h1 {
  font-size: var(--display-lg);
  font-weight: var(--fw-regular) !important;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.page-sections h2.display-lg,
.page-sections .section-head h2.display-lg {
  font-size: var(--display-h2);
  font-weight: var(--fw-regular) !important;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.page-sections .lead,
.hero--shader .lead,
.route-hero--shader .lead { font-size: var(--text-lead); }

.page-sections .section-head h2,
h2[data-anchor-line] { font-weight: var(--fw-regular) !important; }

h1,
h2,
h3,
h4,
.brand__name,
.lead-choice strong,
.embed-slot__label,
.stat__num,
.testimonial__quote,
.faq summary,
.step__num,
.mobile-menu a.m-link,
.byline__name,
.article blockquote,
.drop-cap::first-letter,
.contact-method .big,
.community__stat b,
.comm-index-list a,
.moment__index,
.community-band__stats dd,
.market-report__period strong,
.market-ledger dd,
.hero-pulse__area { font-weight: var(--fw-regular); }