/* ==========================================================================
   Pasture Edge — sub-brand layer
   Loaded ONLY on /communities/pasture-edge/. Scoped to `body.peb`.

   Why this file exists
   --------------------
   Pasture Edge is sold as its own place, not as "a WrightHaven page", so it
   gets its own surface, accent and display voice while keeping the shared
   header, footer and every JS-backed module (site plan, collection grid,
   compare dock) structurally untouched.

   How it works
   ------------
   Almost everything here is a *token* remap. `wh-ds.css` and the PE component
   sheets all read `--surface-*`, `--accent`, `--whh-*`, so redefining those
   under `body.peb` reskins the whole page without editing a single shared
   stylesheet. Only the genuinely new pieces (masthead, split sections,
   inquire pill) get their own `.peb-*` rules.

   Prefix note: `pe-*` is already taken on this page by the HubSpot form
   fields (`pe-select`, `pe-submit`, …). New components use `peb-*`.
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 0. Header lockup — Pasture Edge over WrightHaven wordmark                  */
/* -------------------------------------------------------------------------- */
body.peb .whd-logo--pe-stack .whd-logo__pe-img {
  opacity: 1;
}
body.peb .whd-logo--pe-stack .whd-logo__wh-img {
  opacity: 0.88;
}
body.peb .whd-logo--pe-stack .whd-logo__wh {
  border-top-color: color-mix(in srgb, var(--peb-ink) 16%, transparent);
}

/* -------------------------------------------------------------------------- */
/* 1. Sub-brand palette                                                       */
/* -------------------------------------------------------------------------- */
body.peb {
  /* Light surfaces stay in WrightHaven's warm editorial family. Pasture Edge
     keeps its identity through olive, photography and type—not a gray cast. */
  --peb-stone:       #F5F2EC;
  --peb-stone-deep:  #EDE8DF;
  --peb-stone-soft:  #FAF8F4;
  --peb-paper:       #FBFAF7;
  --peb-eggshell:    #FAF7F0; /* warm eggshell white — nav / chrome */

  --peb-olive:       #5B6045;  /* accent — olive greyed toward the stone */
  --peb-olive-lift:  #6E734F;  /* hover */
  --peb-olive-deep:  #2E3227;  /* dark surface (form band, footers of cards) */

  --peb-ink:         #23231E;
  --peb-ink-soft:    #6B6A5F;
  --peb-tan:         #B8AE9C;

  /* Dark chrome (site plan tooltip + lot card) — never use --wh-white here;
     that token aliases Elementor body text (near-black). */
  --peb-chrome:        #1c1a16;
  --peb-chrome-text:   #fbf8f2;
  --peb-chrome-muted:  color-mix(in srgb, #fbf8f2 72%, transparent);
  --peb-chrome-border: color-mix(in srgb, #c3c79d 45%, transparent);
  --peb-chrome-sage:   #c3c79d;

  /* --- remap the design-system tokens ------------------------------------ */
  --surface-page:       var(--peb-stone);
  --surface-card:       var(--peb-stone-soft);
  --surface-raised:     var(--peb-paper);
  --surface-fill:       var(--peb-stone-deep);
  --surface-dark:       var(--peb-olive-deep);
  --surface-dark-olive: var(--peb-olive-deep);
  --surface-dark-alt:   var(--peb-olive-deep);

  --text-heading: var(--peb-ink);
  --text-body:    #3A392F;
  --text-muted:   var(--peb-ink-soft);
  --text-inverse: #EFEDE5;
  --text-inverse-muted: rgba(239, 237, 229, 0.72);

  --accent:      var(--peb-olive);
  --accent-soft: var(--peb-tan);

  --border-hairline: rgba(35, 35, 30, 0.16);
  --border-subtle:   rgba(35, 35, 30, 0.26);
  --border-strong:   var(--peb-ink);
  --border-inverse:  rgba(239, 237, 229, 0.38);

  /* Raw palette vars the component sheets reference directly. Remapping them
     here is what carries the reskin into the collection grid, site plan and
     compare dock without touching those (shared) files. */
  --whh-cream:      var(--peb-stone);
  --whh-warm-white: var(--peb-stone-soft);
  --whh-linen:      var(--peb-stone-deep);
  --whh-olive:      var(--peb-olive);
  --whh-olive-deep: var(--peb-olive-deep);
  --whh-olive-soft: var(--peb-olive-lift);
  --whh-ink:        var(--peb-ink);
  --whh-ink-soft:   var(--peb-ink-soft);
  --whh-stone:      var(--peb-tan);
  --whh-sage:       #C6C7A9;

  /* Legacy gold accent from the old brand still leaks in via wh-ribbon /
     wh-collection. Point it at the PE olive so nothing renders gold here. */
  --wh-gold: var(--peb-olive);
  --wh-tan:  var(--peb-tan);

  background-color: var(--peb-stone);
}

/* The Elementor page stack sets its own background from --surface-page, but
   a couple of containers on this page hardcode cream. Sweep them. */
body.peb .elementor-269,
body.peb > .elementor.elementor-269 {
  background-color: var(--peb-stone) !important;
}

/* -------------------------------------------------------------------------- */
/* 2. Display voice                                                           */
/* -------------------------------------------------------------------------- */
/* Same typeface as the parent brand (Cormorant Garamond is already loaded),
   set light (300) and large. Headings follow the sitewide rule — serif titles
   in sentence case; only eyebrows, buttons and nav are tracked caps — so the
   sub-brand voice comes from weight + scale, not from shouting. */
body.peb .whd-h2,
body.peb .whd-pe-journey__head h2,
body.peb .whd-faq__head h2,
body.peb .peb-display {
  font-weight: 300;
  text-transform: none;
  letter-spacing: var(--tracking-display, -0.01em);
  font-size: clamp(1.85rem, 3.2vw, 3rem);
  line-height: 1.22;
  color: var(--peb-ink);
}

/* The two Elementor-authored headings left on the page (inquiry form,
   testimonials). Their existing rules set every property `!important`, so
   matching them is the only way in — hence the shouting. Colour is left to
   those rules: one sits on the dark band, one on stone. */
body.peb .elementor-269 .elementor-heading-title,
body.peb .elementor-269 #contact .elementor-heading-title {
  font-weight: 300 !important;
  text-transform: none !important;
  letter-spacing: 0.055em !important;
}

/* Editorial kickers. */
body.peb .whd-label {
  letter-spacing: 0.26em;
  font-size: 0.7rem;
  font-weight: 500;
}
body.peb .whd-label--accent { color: var(--peb-olive); }

/* Body copy: a touch more air, to match the editorial spacing. */
body.peb .whd-lead,
body.peb .whd-body {
  color: var(--text-body);
}

/* Buttons: square, hairline, uppercase — inherited shape is right, only the
   colours need to follow the sub-brand. */
body.peb .whd-btn--accent {
  background: var(--peb-olive);
  border-color: var(--peb-olive);
  color: #F4F2EC;
}
body.peb .whd-btn--secondary {
  background: transparent;
  border-color: var(--peb-ink);
  color: var(--peb-ink);
}
@media (hover: hover) and (pointer: fine) {
  body.peb .whd-btn--accent:hover {
    background: var(--peb-olive-lift);
    border-color: var(--peb-olive-lift);
  }
  body.peb .whd-btn--secondary:hover {
    background: var(--peb-ink);
    color: var(--peb-stone);
  }
}

/* Header bar: eggshell white (rest + scrolled). Solid enough to read logos. */
body.peb .whd-header,
html.whd-nav-scrolled body.peb .whd-header,
body.peb .whd-header--inverse,
html.whd-nav-scrolled body.peb .whd-header--inverse {
  background: var(--peb-eggshell) !important;
  background-color: var(--peb-eggshell) !important;
  backdrop-filter: none;
  border-bottom-color: color-mix(in srgb, var(--peb-ink) 10%, transparent);
  box-shadow: none;
}
html.whd-nav-scrolled body.peb .whd-header {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--peb-ink) 6%, transparent);
}
body.peb .whd-nav__link.is-active,
body.peb .whd-nav__link:hover {
  color: var(--peb-olive);
  border-bottom-color: var(--peb-olive);
}
/* Elementor's global `.elementor-kit-5 button { background-color: accent }`
   outranks the component's plain `.whd-nav-toggle { background: transparent }`,
   so the mobile menu button renders as a solid gold square. Two classes +
   !important is what it takes to win here — see DESIGN.md's button gotcha. */
body.peb .whd-header .whd-nav-toggle {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid var(--peb-ink) !important;
  color: var(--peb-ink) !important;
  padding: 0 !important;
}

/* Every in-page jump on this page lands under the fixed header otherwise.
   The tokens track the header's shrunk state, which is what you're always in
   by the time a jump fires; the +20px is breathing room. */
body.peb #peb-start,
body.peb #homes,
body.peb #location,
body.peb #contact,
body.peb #wh-collection-pasture-edge,
body.peb #wh-siteplan-pasture-edge {
  scroll-margin-top: calc(var(--whd-logo-h, 56px) + var(--whd-header-py, 10px) * 2 + 20px);
}

/* The masthead runs full-bleed under the fixed header, so its own top padding
   has to clear the bar. */
body.peb .peb-masthead {
  padding-top: calc(var(--whd-logo-h, 96px) + var(--whd-header-py, 22px) * 2 + clamp(1rem, 3vh, 2.5rem));
}

/* -------------------------------------------------------------------------- */
/* 3. Masthead — the title card                                               */
/* -------------------------------------------------------------------------- */
/* A brand title card ahead of the selling hero: portrait render, oversized
   wordmark drawn across it. This is the page's single strongest identity
   signal, so it gets the room. The wordmark is decorative — the real <h1>
   stays in the hero below, untouched, so search ranking is unaffected. */
.peb-masthead {
  position: relative;
  background: var(--peb-stone);
  padding: clamp(3rem, 7vh, 5.5rem) var(--gutter, 24px) clamp(3.5rem, 8vh, 6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: min(78vh, 780px);
  overflow: hidden;
}

/* The masthead is an opening cue, not page content. It is only mounted as a
   fixed layer once JS starts the sequence, then removed so the existing hero
   occupies the first viewport with no duplicate-hero scroll. */
.peb-masthead:not(.is-intro) { display: none; }
.peb-masthead[hidden] { display: none !important; }
.peb-masthead.is-intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 780ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 780ms step-end;
}
.peb-masthead.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
html.peb-intro-active,
html.peb-intro-active body { overflow: hidden !important; }

.peb-masthead__inner {
  position: relative;
  width: 100%;
  max-width: 1180px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.peb-masthead__figure {
  position: relative;
  margin: 0;
  width: clamp(220px, 27vw, 396px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--peb-stone-deep);
}
/* Lifts the render toward the stone's value so the multiplied wordmark stays
   legible where it crosses the facade. Without it the letters go muddy. */
.peb-masthead__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(240, 238, 232, 0.5);
  pointer-events: none;
}
/* `!important` earns its keep here: the theme sets a blanket `img { height:
   auto }` that otherwise collapses the portrait crop to the render's own
   16:9 ratio and leaves the bottom half of the frame empty. */
.peb-masthead__figure img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  object-position: 50% 74%;
  display: block;
}

/* Intro frames. Only one is lit at a time; JS walks `.is-on` down the list
   and then hands over to the rest frame. Default state has the rest frame
   already visible, so with JS off or blocked the title card is simply the
   still image it ends on.

   Dissolve (not a hard cut): ease-in-out + transition ≈ hold so adjacent
   frames blend the whole beat. Same sequence length as before (JS HOLD
   unchanged); only the curve and overlap quality change. A hair of scale
   settles the incoming frame so it doesn't pop. */
.peb-masthead__frame {
  opacity: 0;
  transform: scale(1.028);
  transition:
    opacity 320ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.peb-masthead__frame.is-on {
  opacity: 1;
  transform: scale(1);
}
.peb-masthead__frame--rest {
  opacity: 1;
  transform: scale(1);
}
/* Once the sequence starts, the rest frame waits its turn. */
.peb-masthead.is-cueing .peb-masthead__frame--rest {
  opacity: 0;
  transform: scale(1.028);
}
.peb-masthead.is-cueing .peb-masthead__frame--rest.is-on {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .peb-masthead__frame,
  .peb-masthead__frame.is-on,
  .peb-masthead__frame--rest,
  .peb-masthead.is-cueing .peb-masthead__frame--rest,
  .peb-masthead.is-cueing .peb-masthead__frame--rest.is-on {
    transition-duration: 1ms;
    transform: none;
  }
}

/* The wordmark sits across the photo's vertical centre. `multiply` keeps the
   olive legible over both the stone field and the render, without a scrim. */
.peb-masthead__word {
  position: absolute;
  /* below dead centre: crosses the render's light stone wall rather than its
     dark gable, where multiplied olive goes muddy */
  top: 57%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: 100%;
  text-align: center;
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 300;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 10.5vw, 9.5rem);
  line-height: 0.92;
  letter-spacing: 0.045em;
  /* optical: the trailing letterspace pushes the word right of centre */
  text-indent: 0.045em;
  color: var(--peb-olive);
  mix-blend-mode: multiply;
  pointer-events: none;
  white-space: nowrap;
}

.peb-masthead__tag {
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--peb-ink);
}

.peb-scroll {
  position: absolute;
  left: var(--gutter, 24px);
  bottom: clamp(1.25rem, 3vh, 2.25rem);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--peb-ink);
}
.peb-scroll svg { display: block; }
.peb-scroll:hover { color: var(--peb-olive); }

/* Entrance: one settle on load, opacity + transform only. The figure is
   deliberately NOT in this set — it carries the intro sequence and has to be
   on screen from the first frame, or the whole cue plays against a blank. */
.peb-masthead__word,
.peb-masthead__tag {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.peb-masthead.is-ready .peb-masthead__word {
  opacity: 1;
  transform: translate(-50%, -50%);
  transition-delay: 160ms;
}
.peb-masthead.is-ready .peb-masthead__tag {
  opacity: 1;
  transform: none;
  transition-delay: 300ms;
}
/* The wordmark's resting transform is the centring one, so it can't ride in
   on translateY without fighting itself — it fades only. */
.peb-masthead__word { transform: translate(-50%, calc(-50% + 14px)); }

@media (prefers-reduced-motion: reduce) {
  .peb-masthead__word,
  .peb-masthead__tag {
    transition-duration: 1ms;
    transform: none;
  }
  .peb-masthead__word,
  .peb-masthead.is-ready .peb-masthead__word {
    transform: translate(-50%, -50%);
  }
}

/* No-JS: never leave the title card invisible. */
.peb-masthead:not(.is-ready) .peb-masthead__word,
.peb-masthead:not(.is-ready) .peb-masthead__tag {
  animation: peb-failsafe 1ms 2.5s forwards;
}
@keyframes peb-failsafe { to { opacity: 1; transform: none; } }
/* the wordmark's resting transform is its centring, not an offset */
.peb-masthead:not(.is-ready) .peb-masthead__word {
  animation-name: peb-failsafe-word;
}
@keyframes peb-failsafe-word { to { opacity: 1; transform: translate(-50%, -50%); } }

@media (max-width: 780px) {
  .peb-masthead {
    min-height: 0;
    padding-bottom: clamp(2.5rem, 6vh, 4rem);
  }
  .peb-masthead__figure { width: min(70vw, 300px); }
  /* One line no longer fits — stack the words instead of letting the wordmark
     run off the viewport. */
  .peb-masthead__word {
    white-space: normal;
    font-size: clamp(2.4rem, 15vw, 4.5rem);
    line-height: 1.02;
  }
  .peb-masthead__word span { display: block; }
  .peb-masthead__tag {
    text-align: center;
    max-width: 22rem;
  }
  /* In flow on mobile: absolute placement collided with the tagline. */
  .peb-scroll {
    position: static;
    margin-top: clamp(1.5rem, 4vh, 2.25rem);
    align-self: center;
  }
}

/* -------------------------------------------------------------------------- */
/* 4. Editorial split — the overview                                          */
/* -------------------------------------------------------------------------- */
/* Replaces the centred, symmetrical overview with an asymmetric split: copy
   held to a narrow measure on the left, image running to the page edge on the
   right. `width: 0; min-width: 100%` on the media guards against the Elementor
   flex chain picking up the image's intrinsic width and widening the page. */
body.peb .peb-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem) var(--gutter, 24px);
  max-width: 100%;
  /* This is a reading/transition beat, so it returns to the WrightHaven
     eggshell canvas rather than using the cooler Pasture Edge stone field. */
  background: var(--peb-eggshell);
}

body.peb .peb-split__copy,
body.peb .peb-split__copy .whd-lead,
body.peb .peb-split__copy .whd-body {
  text-align: left;
}
body.peb .peb-split__copy {
  /* left edge lines up with the band heads and the collection grid */
  max-width: 32rem;
  margin-left: 0;
  padding-right: clamp(16px, 4vw, 64px);
}
body.peb .peb-split__copy .whd-h2 { margin: 0.9rem 0 1.25rem; }
body.peb .peb-split__copy .whd-lead {
  /* the shared rule centres this with `margin: 0 auto` */
  margin: 0 0 1.85rem;
  max-width: none;
  font-size: 1.0625rem;
  line-height: 1.72;
}

body.peb .peb-split__media {
  margin: 0;
  width: 0;
  min-width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 640px;
  overflow: hidden;
  background: var(--peb-stone-deep);
}
body.peb .peb-split__media img {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  body.peb .peb-split {
    grid-template-columns: minmax(0, 1fr);
    padding: clamp(2.75rem, 8vw, 4rem) var(--gutter, 24px);
    gap: 2rem;
  }
  body.peb .peb-split__copy { margin-left: 0; max-width: 34rem; padding-right: 0; }
  body.peb .peb-split__media { aspect-ratio: 4 / 3; }
}

/* -------------------------------------------------------------------------- */
/* 5. Section bands                                                           */
/* -------------------------------------------------------------------------- */
/* Left-align the band heads and give them the numbered kicker rhythm rather
   than the centred-everything default. Markup is unchanged. */
body.peb .whd-pe-band,
body.peb .whd-pe-band--soft {
  background: transparent;
}
/* Band heads share the collection grid's left edge, so the whole chapter
   reads off one line rather than three different indents. */
body.peb .whd-pe-band {
  padding-left: 0;
  padding-right: 0;
}
body.peb .whd-pe-band__inner,
body.peb .whd-pe-band__inner--wide {
  text-align: left;
  margin-left: 0;
  max-width: 46rem;
}
body.peb .whd-pe-band__inner .whd-h2 { margin: 0.85rem 0 1.15rem; }
body.peb .whd-pe-band__inner .whd-body,
body.peb .whd-pe-band__inner .whd-lead {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

/* Deliberately flat: the --soft tone lands on a narrow Elementor flex child,
   not the full-width row, so it renders as a stray panel behind the copy. */
body.peb .whd-pe-band--soft {
  background: transparent;
}

body.peb .whd-pe-journey,
body.peb .whd-faq {
  background: var(--peb-stone);
}
/* The journey block brings its own 88px of vertical padding and its Elementor
   wrapper adds 100px more at each end, which reads as a dead void between the
   journey and the location block. Let the block own its own rhythm. */
body.peb .elementor-element-4ffa8819 {
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
}
body.peb .whd-pe-journey__num {
  background: var(--peb-olive);
  color: var(--peb-stone);
}

/* Form band: deep olive rather than the parent brand's navy/olive mix. */
body.peb #contact,
body.peb .whd-section--olive,
body.peb .whd-section--navy {
  background: var(--peb-olive-deep);
}
body.peb #contact .elementor-field-group input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
body.peb #contact .elementor-field-group select,
body.peb #contact .elementor-field-group textarea,
body.peb #contact .elementor-field-textual {
  background-color: var(--peb-paper) !important;
  color: var(--peb-ink) !important;
}

/* -------------------------------------------------------------------------- */
/* 6. Persistent inquire pill                                                 */
/* -------------------------------------------------------------------------- */
/* An <a>, never a <button>: Elementor's global `button` reset on this site
   would otherwise repaint it gold. z-index stays under 200 so it can never
   cover the header's open mega-menus. `position: sticky` is dead sitewide
   (overflow-x on html/body), so this is fixed + a scroll listener in JS. */
.peb-pill {
  position: fixed;
  right: clamp(16px, 2.5vw, 32px);
  bottom: clamp(16px, 2.5vw, 28px);
  z-index: 125;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 30px;
  border-radius: 999px;
  border: 1px solid var(--peb-olive-deep, #2E3227);
  background: var(--peb-olive-deep, #2E3227);
  color: #FBF8F2 !important;
  -webkit-text-fill-color: #FBF8F2 !important;
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  box-shadow: 0 14px 34px -16px rgba(35, 35, 30, 0.65);
  /* Hidden until past the title card. */
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 160ms ease;
}
.peb-pill.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.peb-pill:link,
.peb-pill:visited,
.peb-pill:hover,
.peb-pill:active,
.peb-pill:focus-visible {
  color: #FBF8F2 !important;
  -webkit-text-fill-color: #FBF8F2 !important;
}
@media (hover: hover) and (pointer: fine) {
  .peb-pill:hover {
    background: var(--peb-olive, #5B6045);
    color: #FBF8F2 !important;
    -webkit-text-fill-color: #FBF8F2 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .peb-pill { transition-duration: 1ms; transform: none; }
}

/* The compare dock is fixed bottom-centre at z-130 and only appears once a
   home is selected — yield to it rather than stack two bars. */
body:has(.wh-compare-dock.is-visible) .peb-pill {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 560px) {
  .peb-pill {
    left: 16px;
    right: 16px;
    justify-content: center;
    padding: 15px 20px;
    font-size: 0.78rem;
  }
}

/* -------------------------------------------------------------------------- */
/* 7. "Why Pasture Edge" — pinned horizontal deck                             */
/* -------------------------------------------------------------------------- */
/* The signature Canvas Hill move: a section that pins while a row of tall
   cinematic cards tracks sideways under vertical scroll. Left column holds the
   chapter copy and never moves.

   `position: sticky` DOES work here — verified behaviourally, not by reading
   DESIGN.md, which says otherwise. `html` is `overflow-x: hidden` but `body`
   is `overflow-x: clip`, and clip doesn't create a scroll container. The v3
   homepage deck relies on the same thing.

   Desktop only. Below 960px the same cards become a plain swipe carousel with
   scroll-snap — no pin, no scroll math on touch. */
.peb-deck {
  position: relative;
  z-index: 0;
  background: var(--peb-stone);
}

.peb-deck__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--peb-stone);
}

.peb-deck__layout {
  display: grid;
  grid-template-columns: minmax(260px, 26vw) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 3rem);
  align-items: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* no right padding — the track bleeds off the viewport edge */
  padding: clamp(6rem, 12vh, 8rem) 0 clamp(2rem, 5vh, 3.5rem) var(--gutter, 24px);
}

.peb-deck__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1rem, 2vh, 1.6rem);
  max-width: 26rem;
  min-width: 0;
}
.peb-deck__copy .whd-h2 { margin: 0; }
.peb-deck__copy .whd-body { margin: 0; max-width: 24rem; }

.peb-deck__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(0.5rem, 2vh, 1.5rem);
}
.peb-deck__progress {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  background: rgba(35, 35, 30, 0.2);
  overflow: hidden;
}
.peb-deck__bar {
  position: absolute;
  inset: 0;
  background: var(--peb-olive);
  transform: scaleX(0);
  transform-origin: left center;
}
.peb-deck__viewport {
  overflow: hidden;
  height: 100%;
  /* zeroes the track's intrinsic width contribution so a wide row of cards
     can never widen the page — the documented Elementor flex trap */
  width: 0;
  min-width: 100%;
}
.peb-deck__track {
  display: flex;
  gap: clamp(14px, 1.6vw, 26px);
  height: 100%;
  will-change: transform;
}

/* Desktop story beat: the opening split holds, the left chapter copy fades,
   and the image rail expands across the viewport before it begins travelling.
   The viewport is already full-width and simply slides left, keeping the
   scroll animation on the compositor. */
@media (min-width: 960px) {
  .peb-deck__layout { position: relative; display: block; }
  .peb-deck__copy {
    position: absolute;
    z-index: 2;
    left: var(--gutter, 24px);
    top: 50%;
    width: min(26vw, 26rem);
    transform: translateY(-50%);
    transition: none;
  }
  .peb-deck__viewport {
    position: absolute;
    top: clamp(6rem, 12vh, 8rem);
    bottom: clamp(2rem, 5vh, 3.5rem);
    left: calc(var(--gutter, 24px) + min(26vw, 26rem) + clamp(1.25rem, 2.5vw, 3rem));
    width: 100vw;
    min-width: 0;
    height: auto;
    transform: translate3d(var(--peb-deck-shift, 0px), 0, 0);
    will-change: transform;
  }
}

.peb-card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(520px, 68vw, 920px);
  height: 100%;
  overflow: hidden;
  display: block;
  text-decoration: none;
  background: var(--peb-stone-deep);
}
.peb-card img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  display: block;
}
.peb-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 22, 17, 0) 38%, rgba(20, 22, 17, 0.68) 72%, rgba(16, 18, 13, 0.96) 100%),
    rgba(24, 26, 20, 0.26);
}

.peb-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.5rem, 4vh, 2.75rem);
  z-index: 2;
  padding: 0 clamp(1rem, 2vw, 1.75rem);
  text-align: center;
}
.peb-card__title {
  margin: 0;
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 300;
  text-transform: none;
  letter-spacing: var(--tracking-display, -0.01em);
  font-size: clamp(1.6rem, 2.5vw, 2.75rem);
  line-height: 1.2;
  color: #FFFFFF;
}
.peb-card__meta {
  margin: 0.7rem 0 0;
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 242, 236, 0.82);
}

/* Active card lifts its caption — the only motion tied to the scroll itself. */
.peb-card__body,
.peb-card::after {
  transition: opacity 420ms var(--ease-out, ease), transform 420ms var(--ease-out, ease);
}
.peb-deck__track .peb-card:not(.is-active) .peb-card__body {
  opacity: 0.55;
  transform: translateY(10px);
}

/* ---- Below 960px: no pin, plain swipe carousel ---- */
@media (max-width: 959px) {
  .peb-deck__sticky {
    position: static;
    height: auto;
    display: block;
    overflow: visible;
  }
  .peb-deck__layout {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    gap: 1.75rem;
    padding: clamp(3rem, 8vw, 4.5rem) 0 clamp(3rem, 8vw, 4.5rem) var(--gutter, 24px);
  }
  .peb-deck__copy { max-width: 34rem; padding-right: var(--gutter, 24px); }
  .peb-deck__meta { display: none; }
  .peb-deck__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    height: auto;
    width: 100%;
    min-width: 0;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter, 24px);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .peb-deck__viewport::-webkit-scrollbar { display: none; }
  .peb-deck__track { transform: none !important; }
  .peb-card {
    width: min(74vw, 320px);
    height: min(108vw, 480px);
    scroll-snap-align: start;
  }
  .peb-deck__track .peb-card:not(.is-active) .peb-card__body {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .peb-card__body,
  .peb-card::after { transition-duration: 1ms; }
  .peb-deck__track .peb-card:not(.is-active) .peb-card__body {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------------------------------- */
/* 8. Guards for everything below the pin                                     */
/* -------------------------------------------------------------------------- */
/* A sticky pin paints under later content unless that content makes its own
   stacking context with an opaque background — and IntersectionObserver races
   with the pin leave whd-reveal nodes stuck at opacity 0. Both bugs cost the
   v3 homepage deck three follow-up commits; these are the same fixes, scoped.
   Any new section added after the deck needs to be added here too. */
body.peb .elementor-element-4ab96aa1,
body.peb .elementor-element-35c6c65c,
body.peb .elementor-element-65b93489,
body.peb .whd-pe-journey,
body.peb .whd-faq,
body.peb #contact,
body.peb whd-footer,
body.peb .whd-footer,
body.peb footer.elementor-location-footer {
  position: relative;
  z-index: 2;
}
body.peb .elementor-element-4ab96aa1,
body.peb .elementor-element-35c6c65c,
body.peb .elementor-element-65b93489,
body.peb .whd-pe-journey,
body.peb .whd-faq {
  background-color: var(--peb-stone) !important;
}
/* Never leave post-pin content invisible if the observer never fires. */
body.peb .elementor-element-4ab96aa1 .whd-reveal,
body.peb .elementor-element-35c6c65c .whd-reveal,
body.peb .elementor-element-65b93489 .whd-reveal,
body.peb .whd-pe-journey .whd-reveal,
body.peb .whd-faq .whd-reveal {
  opacity: 1;
  transform: none;
}

/* -------------------------------------------------------------------------- */
/* 9. Full-bleed site plan                                                    */
/* -------------------------------------------------------------------------- */
/* Canvas Hill runs its site plan edge to edge with the legend beneath. The
   stage keeps its own `width: 0; min-width: 100%` guard, so widening the frame
   can't reintroduce the page-pannable bug. */
/* Step 1 — stack the row. The band copy and the plan sit side by side in an
   Elementor flex row, which leaves the plan in a 748px off-centre column. Copy
   above, plan below: that also puts the plan's containing block back on the
   viewport's centre line, which is what makes the breakout below exact. */
body.peb .elementor-element-65b93489 {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}
body.peb .elementor-element-65b93489 > .elementor-element {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

/* Step 2 — break the frame out to the viewport edges. Only correct because
   its containing block is now centred (see above). */
body.peb .wh-siteplan { padding-left: 0; padding-right: 0; }
body.peb .wh-siteplan__frame {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 0;
  border: 0;
  border-radius: 0;
  /* Match page stone — stone-deep created a second cream stripe at the edges */
  background: var(--peb-stone);
}
body.peb .wh-siteplan__scroll {
  width: 0;
  min-width: 100%;
  max-width: 100%;
}
/* The rail's own panel background stops short of the bleeding plan and reads
   as a stray strip — let it sit on the stone instead. */
body.peb .wh-siteplan__chiprail,
body.peb .wh-siteplan__legend {
  max-width: var(--container-max, 1240px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter, 24px);
  padding-right: var(--gutter, 24px);
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* One surface: hairline between band copy and plan (no nested cream island). */
body.peb .elementor-element-65b93489 .whd-pe-band {
  border-bottom: 1px solid color-mix(in srgb, var(--peb-ink) 12%, transparent);
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: 0;
}

/* Site plan dark chrome → PE tokens (tooltip + lot card) */
body.peb .wh-siteplan {
  --wh-sp-chrome: var(--peb-chrome);
  --wh-sp-chrome-text: var(--peb-chrome-text);
  --wh-sp-chrome-muted: var(--peb-chrome-muted);
  --wh-sp-chrome-border: var(--peb-chrome-border);
  --wh-sp-chrome-sage: var(--peb-chrome-sage);
}

/* Filter chips on light PE stone — readable ink, not dark-theme white */
body.peb .wh-siteplan__chip {
  color: var(--peb-ink-soft) !important;
  border-color: color-mix(in srgb, var(--peb-ink) 22%, transparent) !important;
  background: var(--peb-paper) !important;
  min-height: 44px;
  padding: 10px 18px !important;
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}
body.peb .wh-siteplan__chip span {
  color: var(--peb-olive) !important;
  opacity: 1;
}
body.peb .wh-siteplan__chip:hover {
  color: var(--peb-ink) !important;
  border-color: var(--peb-olive) !important;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--peb-ink) 6%, transparent);
}
body.peb .wh-siteplan__chip.is-active {
  color: var(--peb-chrome-text) !important;
  -webkit-text-fill-color: var(--peb-chrome-text) !important;
  background: var(--peb-olive) !important;
  border-color: var(--peb-olive) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
}
body.peb .wh-siteplan__chip.is-active span {
  color: color-mix(in srgb, var(--peb-chrome-text) 85%, transparent) !important;
}
body.peb .wh-siteplan__chip:focus-visible {
  outline: 2px solid var(--peb-olive);
  outline-offset: 3px;
}
body.peb .wh-siteplan__legend-note {
  color: var(--peb-ink-soft);
}

/* Lot card + tooltip use chrome tokens */
body.peb .wh-siteplan__tooltip,
body.peb .wh-lotcard__panel {
  background: var(--peb-chrome) !important;
  border-color: var(--peb-chrome-border) !important;
  color: var(--peb-chrome-text) !important;
  -webkit-text-fill-color: var(--peb-chrome-text);
}
body.peb .wh-siteplan__tooltip-lot,
body.peb .wh-lotcard__title {
  color: var(--peb-chrome-text) !important;
  -webkit-text-fill-color: var(--peb-chrome-text) !important;
}
body.peb .wh-siteplan__tooltip-note,
body.peb .wh-lotcard__type,
body.peb .wh-lotcard__disclosure,
body.peb .wh-lotcard__homes-label {
  color: var(--peb-chrome-muted) !important;
  -webkit-text-fill-color: var(--peb-chrome-muted) !important;
}
body.peb .wh-siteplan__badge {
  border-color: var(--peb-chrome-sage) !important;
  color: var(--peb-chrome-sage) !important;
  -webkit-text-fill-color: var(--peb-chrome-sage) !important;
}

/* -------------------------------------------------------------------------- */
/* 10. Matted collection cards                                                */
/* -------------------------------------------------------------------------- */
/* Canvas Hill presents each plan like framed artwork: a generous white mat
   around the render, then an oversized caps-serif name and a small-caps
   collection label. Restyle only — wh-collection.js's markup is untouched, and
   this stays scoped to body.peb so the compare page can't inherit it. */
body.peb #wh-collection-pasture-edge .wh-card,
body.peb .wh-card {
  background: transparent;
  border: 0;
  box-shadow: none;
}
/* The mat is a border, not padding: .wh-card__slide is `position: absolute;
   inset: 0` inside .wh-card__media, so padding would be ignored. A thick
   solid border in the paper tone reads exactly like a mount. */
body.peb .wh-card__media {
  border: clamp(12px, 1.5vw, 24px) solid var(--peb-paper);
  background: var(--peb-paper);
  box-shadow: 0 18px 40px -22px rgba(35, 35, 30, 0.42);
}
body.peb .wh-card__body {
  padding: clamp(1.25rem, 1.8vw, 1.7rem) clamp(1.2rem, 1.8vw, 1.75rem) clamp(1.35rem, 2vw, 1.9rem);
  text-align: left;
  background: var(--peb-paper);
}
body.peb #wh-collection-pasture-edge .wh-card__title,
body.peb .wh-card__title {
  margin: 0 0 0.35rem;
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 300;
  text-transform: none;
  letter-spacing: var(--tracking-display, -0.01em);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.2;
  color: var(--peb-ink);
}
body.peb .wh-card__title a { color: var(--peb-ink); text-decoration: none; }
body.peb .wh-card__price {
  margin: 0 0 0.3rem;
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--peb-olive);
}
body.peb .wh-card__specs {
  margin: 0;
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--peb-ink-soft);
}
body.peb .wh-card__cta {
  margin-top: 0.75rem;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
}

/* The map already handles directions. Removing the duplicate prose keeps the
   location chapter focused on the useful travel-time facts. */
body.peb .elementor-element-3645c706 { display: none !important; }

/* -------------------------------------------------------------------------- */
/* Discover Inverhaugh — restore layout + stop mid-word clipping              */
/* -------------------------------------------------------------------------- */
/* If #location ever sits outside .elementor-269, Elementor's post CSS that
   sets --display never applies. e-con then resolves display:var(--display)
   to the initial value (inline), block children escape padding, and copy
   goes flush to the edge with the LOCATION label clipped. Keep these vars
   as a safety net even after the early-</div> HTML fix. */
body.peb #location.e-con,
body.peb .elementor-element-47334992,
body.peb .elementor-element-25d7344e,
body.peb .elementor-element-4b72f1b9 {
  --display: flex;
  display: flex !important;
  flex-direction: column;
}

body.peb .elementor-element-6cb0ea8 {
  --display: grid;
  display: grid !important;
}

body.peb .elementor-element-6cb0ea8 > .e-con-inner {
  --display: grid;
  display: grid !important;
  width: 100%;
  max-width: none;
}

/* Flex/grid children default to min-width:auto, so long copy overflows the
   column and gets clipped under overflow:hidden parents. Force wrapping. */
body.peb #location,
body.peb .elementor-element-47334992,
body.peb .elementor-element-25d7344e,
body.peb .elementor-element-6cb0ea8 {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

body.peb .elementor-element-6cb0ea8 {
  gap: clamp(1.25rem, 3vw, 2.5rem) !important;
  align-items: start !important;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem) !important;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) !important;
  box-sizing: border-box !important;
}

/* Copy column */
body.peb .elementor-element-4b72f1b9 {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  flex: 1 1 0 !important;
  padding-block-start: 0.25rem !important; /* keep LOCATION label clear of clip */
}

body.peb .elementor-element-4b72f1b9 .elementor-widget,
body.peb .elementor-element-4b72f1b9 .elementor-widget-container,
body.peb .elementor-element-5488ac01,
body.peb .elementor-element-5488ac01 .elementor-widget-container,
body.peb .elementor-element-5488ac01 p,
body.peb .elementor-element-57459ef6,
body.peb .elementor-element-57459ef6 .elementor-widget-container {
  max-width: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  white-space: normal !important;
}

/* Kill Elementor "width: initial" that freezes the text widget too wide */
body.peb .elementor-element-5488ac01.elementor-widget__width-initial,
body.peb .elementor-element-57459ef6.elementor-widget-tablet__width-inherit {
  width: 100% !important;
  max-width: 100% !important;
}

/* Map column stays in its lane */
body.peb .elementor-element-374369ed,
body.peb .elementor-element-374369ed .elementor-widget-container,
body.peb .elementor-element-374369ed iframe,
body.peb .elementor-element-374369ed .home-map__leaflet {
  max-width: 100% !important;
  min-width: 0 !important;
}

body.peb .elementor-element-374369ed iframe,
body.peb .elementor-element-374369ed .home-map__leaflet {
  display: block;
  width: 100% !important;
  border: 0;
}

/* Soft frame around the branded county map */
body.peb .elementor-element-374369ed .elementor-custom-embed,
body.peb .elementor-element-374369ed .elementor-widget-container {
  border: 1px solid color-mix(in srgb, var(--peb-ink) 12%, transparent);
  border-radius: 2px;
  overflow: hidden;
  background: var(--peb-stone-deep);
}

/* Ensure location CTA isn’t clipped */
body.peb .elementor-element-a063405,
body.peb .elementor-element-4b72f1b9 .elementor-widget-button {
  overflow: visible !important;
  margin-bottom: 0.5rem;
}

/* Carousel arrows on the matted cards. The shared component draws them as
   34px translucent black discs pinned 10px off the image edge — against a
   paper mat and a light render they read as clipped smudges. Quieter, fully
   inset, and they arrive with a small slide instead of a bare opacity flip. */
body.peb .wh-collection .wh-card__arrow {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(35, 35, 30, 0.16);
  background: rgba(242, 240, 235, 0.94);
  color: var(--peb-ink);
  font-size: 17px;
  padding: 0 0 2px;
  box-shadow: 0 6px 18px -10px rgba(35, 35, 30, 0.55);
  transition:
    opacity 200ms var(--ease-out, ease),
    transform 200ms var(--ease-out, ease),
    background-color 160ms ease,
    border-color 160ms ease;
}
body.peb .wh-collection .wh-card__arrow--prev {
  left: 14px;
  transform: translateY(-50%) translateX(-6px);
}
body.peb .wh-collection .wh-card__arrow--next {
  right: 14px;
  transform: translateY(-50%) translateX(6px);
}
body.peb .wh-card:hover .wh-card__arrow,
body.peb .wh-collection .wh-card__arrow:focus-visible {
  transform: translateY(-50%) translateX(0);
}
body.peb .wh-collection .wh-card__arrow:hover {
  background: #FFFFFF;
  border-color: var(--peb-olive);
  color: var(--peb-olive);
}
@media (prefers-reduced-motion: reduce) {
  body.peb .wh-collection .wh-card__arrow,
  body.peb .wh-card:hover .wh-card__arrow {
    transition-duration: 1ms;
    transform: translateY(-50%);
  }
}

.peb-availability-bridge {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto clamp(48px, 7vw, 88px);
  padding: clamp(24px, 4vw, 38px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  background: var(--peb-olive);
  color: #fff;
}
.peb-availability-bridge__copy { max-width: 680px; }
.peb-availability-bridge h3 {
  margin: 0 0 8px;
  color: #fff;
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(1.55rem, 2.5vw, 2.2rem);
  font-weight: 400;
}
.peb-availability-bridge p {
  margin: 0;
  color: rgba(255,255,255,0.82);
  line-height: 1.65;
}
body.peb .peb-availability-bridge a.whd-btn,
body.peb .peb-availability-bridge a.pin-hero__cta {
  flex: 0 0 auto;
  min-height: 48px;
}
body.peb .peb-availability-bridge a.whd-btn {
  background-color: #F3EEE6 !important;
  border-color: #F3EEE6 !important;
  color: var(--peb-olive) !important;
}
body.peb .peb-availability-bridge a.whd-btn:hover,
body.peb .peb-availability-bridge a.whd-btn:focus-visible {
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: var(--peb-ink) !important;
}
body.peb .peb-availability-bridge a.whd-btn:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 4px;
}
.peb-grade-guide {
  margin: 1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  color: var(--peb-ink-soft);
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: 0.78rem;
  line-height: 1.55;
}
.peb-grade-guide strong { color: var(--peb-ink); }
@media (max-width: 720px) {
  .peb-availability-bridge {
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
  }
  body.peb .peb-availability-bridge a.whd-btn,
  body.peb .peb-availability-bridge a.pin-hero__cta {
    width: 100%;
    min-height: 48px;
    text-align: center;
    justify-content: space-between;
  }
}


/* Jump-to-a-lot rail retired — discovery is on the plan pins + filters */
body.peb .wh-siteplan__chiprail,
body.peb .wh-siteplan__rail-label {
  display: none !important;
}

/* Feedback: lot-jump question as subheading */
body.peb .whd-pe-lot-jump__title {
  margin: 1.1rem 0 0.35rem;
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--peb-ink);
}
body.peb .whd-pe-lot-jump { margin: 0; }
body.peb .whd-pe-lot-jump a {
  color: var(--whh-olive, #494F25);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Feedback: grade guide stacked */
body.peb .peb-grade-guide {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.35rem;
}
/* Feedback: tighten gap above #homes collection */
body.peb .elementor-element-4ab96aa1 {
  --padding-block-start: 0px;
  padding-block-start: 0 !important;
  margin-top: -0.5rem;
}