/* ==========================================================================
   Buy (Page 5). This page's own stylesheet, under the owner's rulings of
   2026-10-08, 6:21 PM (Depth of Field approved; build with placeholders).
   Linked from the Buy page alone, after the shared stylesheet. Every rule
   begins with .page-buy, the page's body class. Colours come only from the
   palette; type only from the shared families.

   Depth of Field: six views hang in layers on graphite, the focal view
   deepest. The page's script names the scene (open, g1, g2, g3, g4, resolve);
   this sheet decides which view is in focus, how the layers drift, and which
   of Shirin's words is shown. Each of the six views has its own moment: views
   1 to 5 in turn, then the focal view as the resolution (reviewer's ruling of
   2026-10-09, 1:58 PM: the fifth view had none). Focus is a cross-fade between a soft and a
   sharp image of the same view: nothing is blurred while the page runs.

   TEMPORARY: the six images are line-drawing placeholders, so they can never
   be taken for photographs of real homes. Their tone comes from this sheet
   (.buy-view backgrounds); a real photograph covers it. Photographic
   calibration (how soft the soft image is, how far the layers dim) is
   deferred until the photography arrives.
   ========================================================================== */

/* ---------- The story: stage and views ---------- */

.page-buy .buy-story {
  position: relative;
}

.page-buy .buy-story__stage {
  position: relative;
}

.page-buy .buy-story__views {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.page-buy .buy-view {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  margin: 0;
  background: linear-gradient(165deg, rgb(243 239 233 / 0.1), rgb(243 239 233 / 0.035));
  transform: translate3d(var(--dx, 0%), var(--dy, 0%), 0) scale(var(--s, 1));
  transform-origin: 50% 50%;
  transition:
    transform 1600ms var(--ease-silk),
    opacity 1100ms var(--ease-silk);
}

/* Depth, nearest first: the focal view sits deepest, partly behind the others. */
.page-buy .buy-view--1 { --x: -4%; --y: 6%; --w: 25%; --h: 58%; z-index: 6; }
.page-buy .buy-view--2 { --x: 76%; --y: 5%; --w: 27%; --h: 56%; z-index: 5; }
.page-buy .buy-view--3 { --x: 52%; --y: 54%; --w: 19%; --h: 30%; z-index: 4; }
.page-buy .buy-view--4 { --x: 76%; --y: 66%; --w: 20%; --h: 25%; z-index: 3; }
.page-buy .buy-view--5 { --x: 30%; --y: 8%; --w: 14%; --h: 24%; z-index: 2; }



.page-buy .buy-view__soft,
.page-buy .buy-view__sharp {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-buy .buy-view__mark {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 1;
  margin: 0;
  line-height: 1;
  /* a graphite plate, so a placeholder's lines never run through its label */
  background: var(--graphite);
}

/* A mark keeps its size while its view grows: it scales by the inverse of the view. */
.page-buy .buy-story[data-buy-live] .buy-view__mark {
  transform: scale(calc(1 / var(--s, 1)));
  transform-origin: 0 100%;
  transition:
    opacity 1100ms var(--ease-silk),
    transform 1600ms var(--ease-silk);
}

/* The nearest view runs off the left edge; its mark sits on its right. */
.page-buy .buy-view--1 .buy-view__mark {
  left: auto;
  right: 0.75rem;
}

/* ---------- Shirin's words ---------- */

.page-buy .buy-story__words {
  display: grid;
  gap: var(--space-4);
  max-width: 40rem;
  padding: var(--space-5) var(--gutter) var(--space-6);
}

.page-buy .buy-word {
  margin: 0;
  color: var(--ivory);
}



.page-buy .buy-resolve__line {
  max-width: 24ch;
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  margin: 0;
  color: var(--ivory);
  text-wrap: balance;
}



/* The way in and Call Shirin side by side (sitewide call ruling of 2026-10-10): the button, and beside it one link,
   the words in Display S over the number from the site's contact data. On the stage's dark ground, in ivory. The
   pair sits where the button alone stood, so the resolution keeps its height on wider windows. */
.page-buy .buy-resolve__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-4);
}

.page-buy .buy-resolve__call {
  display: inline-grid;
  gap: 0.2rem;
  min-height: 44px;
  color: var(--ivory);
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease-silk);
}

.page-buy .buy-resolve__call-words {
  line-height: 1.05;
}

.page-buy .buy-resolve__call-number {
  font-family: var(--font-ui);
  font-size: clamp(0.9375rem, 1vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.1em;
}

.page-buy .buy-resolve__call:hover,
.page-buy .buy-resolve__call:focus-visible {
  color: var(--gold);
}

.page-buy .buy-story__steps {
  display: none;
}

/* ---------- With the script running: the stage holds while the steps pass ---------- */

.page-buy .buy-story[data-buy-live] .buy-story__stage {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  overflow: hidden;
}

.page-buy .buy-story[data-buy-live] .buy-story__views {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

/* A low graphite shade under the words, so they read over the views. */
.page-buy .buy-story[data-buy-live] .buy-story__stage::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 7;
  width: 62%;
  height: 58%;
  background: radial-gradient(120% 100% at 0% 100%, rgb(37 37 38 / 0.94), rgb(37 37 38 / 0.72) 38%, rgb(37 37 38 / 0) 72%);
  pointer-events: none;
}

.page-buy .buy-story[data-buy-live] .buy-story__words {
  position: absolute;
  inset: 0;
  z-index: 8;
  max-width: none;
  padding: 0;
  pointer-events: none;
}

.page-buy .buy-story[data-buy-live] .buy-word {
  position: absolute;
  left: var(--gutter);
  bottom: 7%;
  width: min(36%, 32rem);
  pointer-events: auto;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 800ms var(--ease-silk),
    transform 800ms var(--ease-silk);
}

.page-buy .buy-story[data-buy-live][data-scene="open"] .buy-word--open,
.page-buy .buy-story[data-buy-live][data-scene="g1"] .buy-word--g1,
.page-buy .buy-story[data-buy-live][data-scene="g2"] .buy-word--g2,
.page-buy .buy-story[data-buy-live][data-scene="g3"] .buy-word--g3,
.page-buy .buy-story[data-buy-live][data-scene="g4"] .buy-word--g3,
.page-buy .buy-story[data-buy-live][data-scene="resolve"] .buy-word--resolve,
.page-buy .buy-story[data-buy-live] .buy-word--resolve:focus-within {
  opacity: 1;
  transform: none;
  transition-delay: 350ms;
}

.page-buy .buy-story[data-buy-live] .buy-story__steps {
  display: block;
  position: relative;
  margin-top: calc(var(--nav-h) - 100vh);
  margin-top: calc(var(--nav-h) - 100svh);
  pointer-events: none;
}

.page-buy .buy-step {
  height: 85vh;
  height: 85svh;
}

/* The resolution holds longer than a window, so it is reached while the stage still holds. */
.page-buy .buy-step--resolve {
  height: 110vh;
  height: 110svh;
}

/* ---------- Focus: the view Shirin speaks of is sharp; the others stay, softly ---------- */

.page-buy .buy-story[data-buy-live] .buy-view {
  opacity: 0.74;
}

.page-buy .buy-story[data-buy-live] .buy-view__sharp,
.page-buy .buy-story[data-buy-live] .buy-view__mark {
  opacity: 0;
}

.page-buy .buy-story[data-buy-live] .buy-view__sharp {
  transition: opacity 1100ms var(--ease-silk);
}

.page-buy .buy-story[data-buy-live][data-scene="open"] .buy-view--1,
.page-buy .buy-story[data-buy-live][data-scene="g1"] .buy-view--2,
.page-buy .buy-story[data-buy-live][data-scene="g2"] .buy-view--3,
.page-buy .buy-story[data-buy-live][data-scene="g3"] .buy-view--4,
.page-buy .buy-story[data-buy-live][data-scene="g4"] .buy-view--5,
.page-buy .buy-story[data-buy-live][data-scene="open"] .buy-view--1 .buy-view__sharp,
.page-buy .buy-story[data-buy-live][data-scene="g1"] .buy-view--2 .buy-view__sharp,
.page-buy .buy-story[data-buy-live][data-scene="g2"] .buy-view--3 .buy-view__sharp,
.page-buy .buy-story[data-buy-live][data-scene="g3"] .buy-view--4 .buy-view__sharp,
.page-buy .buy-story[data-buy-live][data-scene="g4"] .buy-view--5 .buy-view__sharp,
.page-buy .buy-story[data-buy-live][data-scene="open"] .buy-view--1 .buy-view__mark,
.page-buy .buy-story[data-buy-live][data-scene="g1"] .buy-view--2 .buy-view__mark,
.page-buy .buy-story[data-buy-live][data-scene="g2"] .buy-view--3 .buy-view__mark,
.page-buy .buy-story[data-buy-live][data-scene="g3"] .buy-view--4 .buy-view__mark,
.page-buy .buy-story[data-buy-live][data-scene="g4"] .buy-view--5 .buy-view__mark {
  opacity: 1;
}

.page-buy .buy-story[data-buy-live] .buy-word--resolve {
  left: 26.5%;
  bottom: 6%;
  width: 47%;
}


/* In the resolution the shade spans the foot of the stage. */
.page-buy .buy-story[data-buy-live][data-scene="resolve"] .buy-story__stage::after {
  width: 100%;
  height: 46%;
  background: linear-gradient(to top, rgb(37 37 38 / 0.95), rgb(37 37 38 / 0.75) 45%, rgb(37 37 38 / 0));
}

/* Each note moves the eye a little deeper: the nearest layers drift out of the way. */
.page-buy .buy-story[data-buy-live][data-scene="g1"] .buy-view--1 { --dx: -4%; --s: 1.02; }
.page-buy .buy-story[data-buy-live][data-scene="g1"] .buy-view--2 { --s: 1.03; }
.page-buy .buy-story[data-buy-live][data-scene="g2"] .buy-view--1 { --dx: -8%; --s: 1.03; }
.page-buy .buy-story[data-buy-live][data-scene="g2"] .buy-view--2 { --dx: 5%; }
.page-buy .buy-story[data-buy-live][data-scene="g2"] .buy-view--3 { --s: 1.04; }
.page-buy .buy-story[data-buy-live][data-scene="g3"] .buy-view--1 { --dx: -12%; --s: 1.04; }
.page-buy .buy-story[data-buy-live][data-scene="g3"] .buy-view--2 { --dx: 9%; }
.page-buy .buy-story[data-buy-live][data-scene="g3"] .buy-view--3 { --dy: 5%; }
.page-buy .buy-story[data-buy-live][data-scene="g3"] .buy-view--4 { --s: 1.05; }

/* The fifth view's moment: the small square at the back comes forward over its neighbours and sharpens, while
   the nearer layers carry on drifting out of the way. Shirin's third note stays with it (no new words). */
.page-buy .buy-story[data-buy-live][data-scene="g4"] .buy-view--1 { --dx: -16%; --s: 1.05; }
.page-buy .buy-story[data-buy-live][data-scene="g4"] .buy-view--2 { --dx: 13%; }
.page-buy .buy-story[data-buy-live][data-scene="g4"] .buy-view--3 { --dy: 8%; }
.page-buy .buy-story[data-buy-live][data-scene="g4"] .buy-view--4 { --dx: 4%; --dy: 4%; }
.page-buy .buy-story[data-buy-live][data-scene="g4"] .buy-view--5 { --s: 1.06; z-index: 6; }

.page-buy .buy-story[data-buy-live][data-scene="resolve"] .buy-view--1 { --dx: -24%; --s: 0.96; opacity: 0.45; }
.page-buy .buy-story[data-buy-live][data-scene="resolve"] .buy-view--2 { --dx: 22%; opacity: 0.45; }
.page-buy .buy-story[data-buy-live][data-scene="resolve"] .buy-view--3 { --dx: 10%; --dy: 40%; opacity: 0.4; }
.page-buy .buy-story[data-buy-live][data-scene="resolve"] .buy-view--4 { --dx: 20%; --dy: 30%; opacity: 0.4; }
.page-buy .buy-story[data-buy-live][data-scene="resolve"] .buy-view--5 { --dy: -45%; opacity: 0.4; }

/* ---------- After the story: the page's headline ----------
   H1 editorial composition pass, ruling of 2026-10-10: the page's one h1 stands on Warm Ivory once the six
   stages have resolved, as their payoff, before the buyer listings. Display L, set like the opening titles of
   Properties and Areas (the first columns, a measured width); the Ivory weight and optical size come from the
   surface rule. Its reveal is the site's own float. Nothing above it changes: the stages keep their lengths. */

.page-buy .buy-focus {
  padding-block: var(--space-6) 0;
}

.page-buy .buy-focus__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-3);
}

.page-buy .buy-focus__title {
  grid-column: 1 / 11;
  margin: 0;
  max-width: 16ch;
}










/* ---------- Tablets held upright and phones: the layers stack ---------- */

@media (max-width: 1023px) {
  .page-buy .buy-story__views {
    aspect-ratio: 4 / 5;
  }

  .page-buy .buy-view--1 { --x: -6%; --y: 7%; --w: 46%; --h: 26%; }
  .page-buy .buy-view--2 { --x: 66%; --y: 11%; --w: 40%; --h: 25%; }
  .page-buy .buy-view--3 { --x: -4%; --y: 50%; --w: 40%; --h: 16%; }
  .page-buy .buy-view--4 { --x: 58%; --y: 54%; --w: 44%; --h: 14%; }
  .page-buy .buy-view--5 { --x: 40%; --y: 6%; --w: 24%; --h: 14%; }


  /* The third view runs off the left edge here too; its mark sits on its right and keeps that edge as it scales. */
  .page-buy .buy-view--3 .buy-view__mark {
    left: auto;
    right: 0.75rem;
  }

  .page-buy .buy-story[data-buy-live] .buy-view--3 .buy-view__mark {
    transform-origin: 100% 100%;
  }

  .page-buy .buy-story[data-buy-live] .buy-story__stage::after {
    width: 100%;
    height: 46%;
    background: linear-gradient(to top, rgb(37 37 38 / 0.95), rgb(37 37 38 / 0.8) 42%, rgb(37 37 38 / 0));
  }

  .page-buy .buy-story[data-buy-live] .buy-word,
  .page-buy .buy-story[data-buy-live] .buy-word--resolve {
    left: var(--gutter);
    bottom: 4%;
    width: calc(100% - 2 * var(--gutter));
  }

  .page-buy .buy-story[data-buy-live][data-scene="g1"] .buy-view--1 { --dx: 0%; --dy: -4%; --s: 1.02; }
  .page-buy .buy-story[data-buy-live][data-scene="g2"] .buy-view--1 { --dx: 0%; --dy: -8%; --s: 1.03; }
  .page-buy .buy-story[data-buy-live][data-scene="g2"] .buy-view--2 { --dx: 0%; --dy: -5%; }
  .page-buy .buy-story[data-buy-live][data-scene="g3"] .buy-view--1 { --dx: 0%; --dy: -12%; --s: 1.04; }
  .page-buy .buy-story[data-buy-live][data-scene="g3"] .buy-view--2 { --dx: 0%; --dy: -9%; }
  .page-buy .buy-story[data-buy-live][data-scene="g3"] .buy-view--3 { --dy: 6%; }
  .page-buy .buy-story[data-buy-live][data-scene="g4"] .buy-view--1 { --dx: 0%; --dy: -16%; --s: 1.05; }
  .page-buy .buy-story[data-buy-live][data-scene="g4"] .buy-view--2 { --dx: 0%; --dy: -13%; }
  .page-buy .buy-story[data-buy-live][data-scene="g4"] .buy-view--3 { --dy: 8%; }
  .page-buy .buy-story[data-buy-live][data-scene="g4"] .buy-view--4 { --dx: 0%; --dy: 4%; }

  .page-buy .buy-story[data-buy-live][data-scene="resolve"] .buy-view--1 { --dx: 0%; --dy: -30%; --s: 0.96; }
  .page-buy .buy-story[data-buy-live][data-scene="resolve"] .buy-view--2 { --dx: 8%; --dy: -30%; }
  .page-buy .buy-story[data-buy-live][data-scene="resolve"] .buy-view--3 { --dx: 0%; --dy: 90%; }
  .page-buy .buy-story[data-buy-live][data-scene="resolve"] .buy-view--4 { --dx: 0%; --dy: 90%; }
  .page-buy .buy-story[data-buy-live][data-scene="resolve"] .buy-view--5 { --dy: -50%; }

  .page-buy .buy-focus__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .page-buy .buy-focus__title {
    grid-column: 1 / -1;
  }


}

/* ---------- Tablets held upright: the taller stage, the layers spread to fill it ---------- */

@media (min-width: 720px) and (max-width: 1023px) {
  .page-buy .buy-view--1 { --y: 6%; --h: 30%; }
  .page-buy .buy-view--2 { --y: 10%; --h: 28%; }
  .page-buy .buy-view--3 { --y: 57%; --h: 18%; }
  .page-buy .buy-view--4 { --y: 61%; --h: 16%; }
  .page-buy .buy-view--5 { --y: 4%; --h: 15%; }


  .page-buy .buy-resolve__line {
    font-size: 2.25rem;
  }

}

/* ---------- Phones ---------- */

@media (max-width: 719px) {
  .page-buy .buy-view__mark {
    left: 0.5rem;
    bottom: 0.5rem;
  }

  .page-buy .buy-focus {
    padding-top: var(--space-5);
  }

  /* A little more of the third view on screen, so its mark keeps clear of the edge on the narrowest phones. */
  .page-buy .buy-view--3 { --x: -3%; --w: 42%; }

  /* on phones the call is one line under the button, the words and the number side by side, so the resolution
     grows by one touch row only and keeps clear of the focal view on short phones */
  .page-buy .buy-resolve__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: var(--space-3);
  }


  .page-buy .buy-resolve__call {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    align-content: center;
    align-self: flex-start;
    column-gap: 0.75rem;
  }

}

/* ---------- Short phones: room for the call under the way in ----------
   On a phone no taller than 720 px the resolution's actions sit a little closer to its line and the button is 48 px
   tall (still above a 44 px touch target), which takes back the room the call's row needs, so the line keeps clear of
   the focal view (sitewide call ruling of 2026-10-10). */
@media (max-width: 719px) and (max-height: 720px) {
  .page-buy .buy-resolve__actions {
    margin-top: var(--space-1);
  }

}

/* ---------- Reduced motion: the scenes change without travel ---------- */

@media (prefers-reduced-motion: reduce) {
  .page-buy .buy-view,
  .page-buy .buy-story[data-buy-live] .buy-view__sharp,
  .page-buy .buy-story[data-buy-live] .buy-view__mark,
  .page-buy .buy-story[data-buy-live] .buy-word {
    transition-duration: 1ms;
    transition-delay: 0ms;
  }

  .page-buy .buy-story[data-buy-live] .buy-word {
    transform: none;
  }

  .page-buy .buy-story[data-buy-live][data-scene] .buy-story__words .buy-word {
    transition-delay: 0ms;
  }
}

/* Oct 15: approved five-photo Buy composition; same six scroll beats, five homes. */
.page-buy .buy-focus {padding-block:clamp(5rem,9vh,8rem) clamp(4rem,8vh,7rem);}
.page-buy .buy-view__soft {filter:blur(12px);transform:scale(1.07);}
.page-buy .buy-view__mark {padding:.45rem .7rem;font-family:var(--font-ui);font-size:clamp(.7rem,.9vw,.95rem);font-weight:600;color:var(--ivory);line-height:1.3;white-space:nowrap;max-width:95%;overflow:hidden;text-overflow:ellipsis;}
.page-buy .buy-listing-detail {display:grid;gap:clamp(.25rem,.5vw,.55rem);align-content:end;}
.page-buy .buy-listing-detail :is(h2,p) {margin:0;}
.page-buy .buy-listing-detail__count {font-family:var(--font-ui);color:var(--gold);font-size:clamp(.7rem,.85vw,.88rem);letter-spacing:.13em;font-weight:600;}
.page-buy .buy-listing-detail__address {font-family:var(--font-display);font-size:clamp(1.55rem,2.5vw,2.8rem);font-weight:500;line-height:1.1;}
.page-buy .buy-listing-detail__locale,.page-buy .buy-listing-detail__facts {font-family:var(--font-ui);font-size:clamp(.92rem,1.05vw,1.125rem);line-height:1.35;}
.page-buy .buy-listing-detail__price {font-family:var(--font-display);font-size:clamp(1.4rem,1.8vw,2rem);line-height:1.2;}
.page-buy .buy-listing-detail__credit {font-family:var(--font-ui);font-size:clamp(.72rem,.85vw,.85rem);line-height:1.45;color:var(--ivory-72);}
.page-buy .buy-listing-detail__link {display:inline-flex;align-items:center;min-height:44px;width:fit-content;color:var(--ivory);font-family:var(--font-ui);font-size:clamp(.83rem,1vw,.98rem);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.3em;}
.page-buy .buy-listing-detail__link:hover,.page-buy .buy-listing-detail__link:focus-visible {color:var(--gold);}
.page-buy .buy-story[data-buy-live] .buy-word {visibility:hidden;transition:opacity 800ms var(--ease-silk),transform 800ms var(--ease-silk),visibility 0s linear 800ms;}
.page-buy .buy-story[data-buy-live][data-scene="open"] .buy-word--open,
.page-buy .buy-story[data-buy-live][data-scene="g1"] .buy-word--g1,
.page-buy .buy-story[data-buy-live][data-scene="g2"] .buy-word--g2,
.page-buy .buy-story[data-buy-live][data-scene="g3"] .buy-word--g3,
.page-buy .buy-story[data-buy-live][data-scene="g4"] .buy-word--g4,
.page-buy .buy-story[data-buy-live][data-scene="resolve"] .buy-word--resolve,
.page-buy .buy-story[data-buy-live] .buy-word:focus-within {visibility:visible;opacity:1;transform:none;transition-delay:0s;}
.page-buy .buy-story[data-buy-live] .buy-listing-detail {width:min(39%,34rem);bottom:3%;padding:.8rem 1rem;background:rgb(37 37 38 / .79);}
.page-buy .buy-story[data-buy-live][data-scene="resolve"] .buy-view--5 {--dx:-6%;--dy:8%;--s:1.44;opacity:1;z-index:6;}
.page-buy .buy-story[data-buy-live][data-scene="resolve"] .buy-view--5 .buy-view__sharp {opacity:1;}
.page-buy .buy-story[data-buy-live][data-scene="resolve"] .buy-view--5 .buy-view__mark {opacity:0;}
@media(max-width:1023px){.page-buy .buy-story[data-buy-live] .buy-listing-detail {left:var(--gutter);bottom:2%;width:calc(100% - 2 * var(--gutter));padding:.5rem .75rem;gap:.2rem;}
 .page-buy .buy-listing-detail__address{font-size:clamp(1.35rem,4.6vw,1.9rem)}
 .page-buy .buy-listing-detail__credit{font-size:clamp(.67rem,1.3vw,.8rem)}
 .page-buy .buy-story[data-buy-live][data-scene="resolve"] .buy-view--5 {--dx:0%;--dy:20%;--s:1.6;}}
@media(max-width:719px){.page-buy .buy-focus{padding-block:var(--space-5)}
 .page-buy .buy-listing-detail__locale,.page-buy .buy-listing-detail__facts{font-size:.85rem;}
 .page-buy .buy-listing-detail__price{font-size:1.25rem;}
 .page-buy .buy-listing-detail__count{font-size:.67rem;}
 .page-buy .buy-listing-detail__link{font-size:.8rem;}}
@media(prefers-reduced-motion:reduce){.page-buy .buy-view__soft{filter:none;opacity:.3;}}

/* Oct16: all five homes begin as equal-sized images, then each is brought
   front-and-centre by its existing scroll scene. The preceding image returns
   to the same resting size. There is no ranking through baseline size. */
.page-buy .buy-view--1,.page-buy .buy-view--2,.page-buy .buy-view--3,.page-buy .buy-view--4,.page-buy .buy-view--5{
 --w:23%;--h:30%;
}
.page-buy .buy-view--1{--x:-3%;--y:5%;}
.page-buy .buy-view--2{--x:38%;--y:7%;}
.page-buy .buy-view--3{--x:79%;--y:5%;}
.page-buy .buy-view--4{--x:62%;--y:57%;}
.page-buy .buy-view--5{--x:20%;--y:57%;}
.page-buy .buy-story[data-buy-live] .buy-view{
 transform:translate3d(0,0,0);z-index:1;opacity:.62;
 transition:left 1150ms var(--ease-silk),top 1150ms var(--ease-silk),width 1150ms var(--ease-silk),height 1150ms var(--ease-silk),transform 1150ms var(--ease-silk),opacity 850ms var(--ease-silk);
}
.page-buy .buy-story[data-buy-live][data-scene="open"] .buy-view--1,
.page-buy .buy-story[data-buy-live][data-scene="g1"] .buy-view--2,
.page-buy .buy-story[data-buy-live][data-scene="g2"] .buy-view--3,
.page-buy .buy-story[data-buy-live][data-scene="g3"] .buy-view--4,
.page-buy .buy-story[data-buy-live][data-scene="g4"] .buy-view--5,
.page-buy .buy-story[data-buy-live][data-scene="resolve"] .buy-view--5{
 left:50%;top:38%;width:55%;height:52%;z-index:7;opacity:1;
 transform:translate3d(-50%,-50%,0);
}
.page-buy .buy-story[data-buy-live] .buy-view__mark{transform:none;}
.page-buy .buy-focus{min-height:clamp(24rem,43svh,34rem);padding-block:clamp(4rem,7vh,6rem);display:block;}
.page-buy .buy-focus__title{grid-column:1 / 12;max-width:20ch;margin:0;font-size:clamp(3rem,6vw,7.25rem);line-height:1.03;letter-spacing:-.015em;}
.page-buy .buy-cta__sentence{max-width:35ch;margin-top:clamp(1.2rem,2vw,2rem);font-family:var(--font-display);font-size:clamp(1.35rem,2vw,2.2rem);font-weight:500;line-height:1.4;color:var(--graphite);}
.page-buy .buy-cta__actions{margin-top:clamp(1.5rem,3vw,3rem);}
@media(max-width:1023px){
 .page-buy .buy-view--1,.page-buy .buy-view--2,.page-buy .buy-view--3,.page-buy .buy-view--4,.page-buy .buy-view--5{--w:36%;--h:24%;}
 .page-buy .buy-view--1{--x:-5%;--y:5%;}
 .page-buy .buy-view--2{--x:68%;--y:5%;}
 .page-buy .buy-view--3{--x:35%;--y:29%;}
 .page-buy .buy-view--4{--x:-3%;--y:56%;}
 .page-buy .buy-view--5{--x:69%;--y:56%;}
 .page-buy .buy-story[data-buy-live][data-scene="open"] .buy-view--1,
 .page-buy .buy-story[data-buy-live][data-scene="g1"] .buy-view--2,
 .page-buy .buy-story[data-buy-live][data-scene="g2"] .buy-view--3,
 .page-buy .buy-story[data-buy-live][data-scene="g3"] .buy-view--4,
 .page-buy .buy-story[data-buy-live][data-scene="g4"] .buy-view--5,
 .page-buy .buy-story[data-buy-live][data-scene="resolve"] .buy-view--5{
  top:32%;left:50%;width:68%;height:41%;transform:translate3d(-50%,-50%,0);
 }
}
@media(max-width:719px){.page-buy .buy-focus{min-height:clamp(22rem,40svh,28rem);padding-block:3.5rem;}.page-buy .buy-focus__title{font-size:clamp(3rem,10vw,4.5rem);}}
@media(prefers-reduced-motion:reduce){.page-buy .buy-story[data-buy-live] .buy-view{transition:none;}}

/* Oct16 shared editorial CTA geometry adapted to .page-buy, page-local only. */
.page-buy .buy-cta{min-height:clamp(38rem,85svh,58rem);padding-block:clamp(4rem,8vw,8rem);display:grid;align-items:center;}
.page-buy .buy-cta__inner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;column-gap:clamp(2rem,5vw,6rem);}
.page-buy .buy-cta__copy{min-width:0;}
.page-buy .buy-cta__title{margin:0;max-width:14ch;color:var(--graphite);font-family:var(--font-display);font-size:clamp(3rem,5.5vw,6.5rem);font-weight:500;line-height:1.08;letter-spacing:-.012em;font-style:normal;}
.page-buy .buy-cta__actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1.2rem 2.5rem;margin-top:clamp(2rem,5vh,4rem);}
.page-buy .buy-cta__call{display:inline-grid;align-content:center;justify-items:start;grid-column:auto;gap:.25rem;min-height:60px;color:var(--graphite);text-decoration:none;transition:color 220ms ease;}
.page-buy .buy-cta__call-words{font-family:var(--font-display);font-size:clamp(2.15rem,3.6vw,4.15rem);font-weight:500;line-height:1.1;}
.page-buy .buy-cta__call-number{font-family:var(--font-ui);font-size:clamp(1rem,1.3vw,1.3rem);font-weight:600;letter-spacing:.09em;line-height:1.5;}
.page-buy .buy-cta__call:hover,.page-buy .buy-cta__call:focus-visible{color:var(--aubergine);}


.page-buy .buy-cta__visual{justify-self:end;align-self:center;}
.page-buy .buy-cta__sign{font-size:clamp(.8rem,1.3vw,1.15rem);}
.page-buy .buy-cta__panel{animation:buy-cta-sign-flip 10s ease-in-out 1s infinite;}
@keyframes buy-cta-sign-flip{
 0%,24%{transform:rotateX(0deg);}
 36%,63%{transform:rotateX(180deg);}
 76%,100%{transform:rotateX(0deg);}
}
@media(max-width:900px){
 .page-buy .buy-cta__inner{grid-template-columns:minmax(0,1fr);row-gap:clamp(2rem,5vw,4rem);}
 .page-buy .buy-cta__visual{justify-self:center;}
 .page-buy .buy-cta__sign{font-size:clamp(.75rem,2.9vw,1rem);}
}
@media(prefers-reduced-motion:reduce){
 .page-buy .buy-cta__panel{animation:none;}
 .page-buy .buy-cta__call{transition:none;}
}

/* Oct17 approved six-page CTA and review polish; page-scoped only. */
.page-buy .buy-cta{padding-bottom:0;align-items:end}.page-buy .buy-cta__inner{align-items:end}.page-buy .buy-cta__copy{align-self:center;padding-bottom:clamp(2.5rem,6vh,5rem)}.page-buy .buy-cta__visual{align-self:end;line-height:0}.page-buy .buy-cta__sign{vertical-align:bottom;line-height:normal}@media(max-width:900px){.page-buy .buy-cta__copy{padding-bottom:0}}

/* Oct 17: confident optical weight and measured spacing, sign remains locked. */
.page-buy .buy-cta__title {font-weight:500;font-optical-sizing:none;font-variation-settings:"opsz" 14;line-height:1.12;}
.page-buy .buy-cta__actions {margin-top:clamp(3.25rem,7vh,5rem);}
@media(max-width:900px){.page-buy .buy-cta__actions{margin-top:clamp(2.5rem,5vw,3.75rem);}}

/* Oct 17: universal CTA layout: same geometry on six page-scoped sheets. */
.page-buy .cta-unified{height:clamp(42rem,82svh,56rem);min-height:clamp(42rem,82svh,56rem);padding:0;display:block;overflow:hidden;}
.page-buy .cta-unified__inner{height:100%;min-height:100%;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:stretch;gap:clamp(2rem,5vw,6rem);}
.page-buy .cta-unified__copy{min-width:0;min-height:0;height:100%;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding-top:clamp(5rem,11svh,8.5rem);padding-bottom:clamp(5.75rem,11svh,8.5rem);}
.page-buy .cta-unified__heading{grid-row:auto;grid-column:auto;max-width:18.5ch;margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(3rem,5.15vw,5.8rem);line-height:1.09;letter-spacing:-.012em;font-style:normal;font-optical-sizing:none;font-variation-settings:"opsz" 18;color:var(--graphite);}
.page-buy .cta-unified__actions{grid-row:auto;grid-column:auto;position:static;display:block;margin:0;padding:0;align-self:start;justify-self:start;}
.page-buy .cta-unified__call{display:inline-grid;gap:.18rem;align-content:start;justify-items:start;min-height:44px;margin:0;text-align:left;color:var(--graphite);text-decoration:none;}
.page-buy .cta-unified__call-words{font-family:var(--font-display);font-weight:500;font-size:clamp(2.2rem,3.5vw,4rem);line-height:1.1;font-optical-sizing:none;font-variation-settings:"opsz" 14;}
.page-buy .cta-unified__number{font-family:var(--font-ui);font-size:clamp(1rem,1.2vw,1.25rem);font-weight:600;line-height:1.5;letter-spacing:.09em;}
.page-buy .cta-unified__visual{grid-row:1;grid-column:2;justify-self:end;align-self:end;line-height:0;}
.page-buy .cta-unified__visual .sign{vertical-align:bottom;line-height:normal;}
@media(max-width:900px){
.page-buy .cta-unified{height:auto;min-height:0;padding-top:clamp(3.5rem,8vw,5rem);}
.page-buy .cta-unified__inner{height:auto;min-height:0;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,5vw,4rem);}
.page-buy .cta-unified__copy{grid-row:1;grid-column:1;height:auto;min-height:0;gap:clamp(2.5rem,6vw,4.5rem);padding:0;}
.page-buy .cta-unified__heading{font-size:clamp(2.6rem,8.2vw,4.6rem);line-height:1.1;max-width:20ch;}
.page-buy .cta-unified__actions{margin:0;}
.page-buy .cta-unified__visual{grid-row:2;grid-column:1;justify-self:center;align-self:end;}
}
.page-buy .cta-unified__copy [hidden]{display:none!important;}