/* The Pines — colour packages, site-plan placeholder, interiors.
   Loaded on /communities/the-pines/. Visual language matches Pasture Edge
   (body.peb tokens). These sections sit at the same content edge as the
   homes collection: they must not nest inside leftover Elementor boxes. */

/* --------------------------------------------------------------------------
   Cinematic hero — Prisma layout adapted to WrightHaven (squared, serif,
   existing nav). Full-viewport photo, white overlay chrome, word pull-up.
   -------------------------------------------------------------------------- */

body.pin-cinematic .whd-header--community,
body.pin-cinematic .whd-header--pe,
body.pin-cinematic .whd-header--community.whd-header--inverse,
body.pin-cinematic .whd-header--pe.whd-header--inverse {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}

body.pin-cinematic .whd-header .whd-nav__link,
body.pin-cinematic .whd-header--community.whd-header--inverse .whd-nav__link,
body.pin-cinematic .whd-header--pe.whd-header--inverse .whd-nav__link {
  color: rgba(251, 248, 242, 0.86) !important;
}
body.pin-cinematic .whd-header .whd-nav__link.is-active,
body.pin-cinematic .whd-header .whd-nav__link:hover,
body.pin-cinematic .whd-header--community.whd-header--inverse .whd-nav__link.is-active,
body.pin-cinematic .whd-header--community.whd-header--inverse .whd-nav__link:hover,
body.pin-cinematic .whd-header--pe.whd-header--inverse .whd-nav__link.is-active,
body.pin-cinematic .whd-header--pe.whd-header--inverse .whd-nav__link:hover {
  color: #FBF8F2 !important;
  border-bottom-color: #FBF8F2;
}

body.pin-cinematic .whd-header .whd-nav-toggle,
body.pin-cinematic .whd-header--community.whd-header--inverse .whd-nav-toggle,
body.pin-cinematic .whd-header--pe.whd-header--inverse .whd-nav-toggle,
body.peb.pin-cinematic .whd-header .whd-nav-toggle {
  color: #FBF8F2 !important;
  border-color: rgba(251, 248, 242, 0.72) !important;
  background: transparent !important;
  background-color: transparent !important;
}

body.pin-cinematic .whd-header .whd-logo__wh-text,
body.pin-cinematic .whd-header--inverse .whd-logo--pe-stack .whd-logo__wh-text {
  color: #FBF8F2;
  opacity: 0.9;
}
body.pin-cinematic .whd-header .whd-logo__wh,
body.pin-cinematic .whd-header--inverse .whd-logo--pe-stack .whd-logo__wh {
  border-top-color: rgba(251, 248, 242, 0.32);
}

body.pin-cinematic .whd-header a.whd-btn--inverse,
body.pin-cinematic .whd-header--community.whd-header--inverse a.whd-btn--inverse,
body.pin-cinematic .whd-header a.whd-btn--inverse:link,
body.pin-cinematic .whd-header a.whd-btn--inverse:visited {
  color: #FBF8F2 !important;
  -webkit-text-fill-color: #FBF8F2 !important;
  border-color: rgba(251, 248, 242, 0.72) !important;
  background: transparent !important;
}
body.pin-cinematic .whd-header a.whd-btn--inverse:hover,
body.pin-cinematic .whd-header a.whd-btn--inverse:focus-visible {
  color: #23231e !important;
  -webkit-text-fill-color: #23231e !important;
  background: #FBF8F2 !important;
  border-color: #FBF8F2 !important;
}

/* Scrolled: restore eggshell community bar */
html.whd-nav-scrolled body.pin-cinematic .whd-header--community,
html.whd-nav-scrolled body.pin-cinematic .whd-header--pe,
html.whd-nav-scrolled body.pin-cinematic .whd-header--community.whd-header--inverse,
html.whd-nav-scrolled body.pin-cinematic .whd-header--pe.whd-header--inverse {
  background: #FAF7F0 !important;
  background-color: #FAF7F0 !important;
  border-bottom-color: color-mix(in srgb, #23231e 10%, transparent);
}
html.whd-nav-scrolled body.pin-cinematic .whd-header .whd-nav__link,
html.whd-nav-scrolled body.pin-cinematic .whd-header--community.whd-header--inverse .whd-nav__link {
  color: var(--text-muted, #6b6a5f) !important;
}
html.whd-nav-scrolled body.pin-cinematic .whd-header .whd-nav__link.is-active,
html.whd-nav-scrolled body.pin-cinematic .whd-header .whd-nav__link:hover {
  color: var(--whh-olive, #5b6045) !important;
  border-bottom-color: var(--whh-olive, #5b6045);
}
html.whd-nav-scrolled body.pin-cinematic .whd-header .whd-logo__wh-text {
  color: var(--text-heading, #23231e);
  opacity: 0.72;
}
html.whd-nav-scrolled body.pin-cinematic .whd-header .whd-logo__wh {
  border-top-color: color-mix(in srgb, #23231e 14%, transparent);
}
html.whd-nav-scrolled body.pin-cinematic .whd-header a.whd-btn--inverse,
html.whd-nav-scrolled body.pin-cinematic .whd-header a.whd-btn--inverse:link,
html.whd-nav-scrolled body.pin-cinematic .whd-header a.whd-btn--inverse:visited {
  color: var(--text-heading, #23231e) !important;
  -webkit-text-fill-color: var(--text-heading, #23231e) !important;
  border-color: var(--text-heading, #23231e) !important;
  background: transparent !important;
}
html.whd-nav-scrolled body.pin-cinematic .whd-header a.whd-btn--inverse:hover,
html.whd-nav-scrolled body.pin-cinematic .whd-header a.whd-btn--inverse:focus-visible {
  color: #FBF8F2 !important;
  -webkit-text-fill-color: #FBF8F2 !important;
  background: var(--whh-olive, #494F25) !important;
  border-color: var(--whh-olive, #494F25) !important;
}
html.whd-nav-scrolled body.pin-cinematic .whd-header .whd-nav-toggle,
html.whd-nav-scrolled body.peb.pin-cinematic .whd-header .whd-nav-toggle {
  color: var(--text-heading, #23231e) !important;
  border-color: var(--text-heading, #23231e) !important;
}

body.pin-cinematic #contact,
body.pin-cinematic #list {
  scroll-margin-top: 6.5rem;
}

.pin-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
  background: #1c1a16;
  color: #FBF8F2;
}

.pin-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pin-hero__media img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  object-position: 50% 52%;
  opacity: 0;
  transform: scale(1.02);
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.pin-hero__media img.is-on {
  opacity: 1;
  transform: scale(1);
}

.pin-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Three layers: header band, copy column, floor. The left-to-right layer is
     what keeps the wordmark legible on the pale frames (iris-french-country,
     california) where a cream garage door sits directly behind "The Pines".
     Horizontal rather than a full overlay so the house itself stays bright. */
  background:
    linear-gradient(to bottom, rgba(20, 18, 14, 0.78) 0%, rgba(20, 18, 14, 0.42) 16%, transparent 38%),
    linear-gradient(to right, rgba(20, 18, 14, 0.72) 0%, rgba(20, 18, 14, 0.46) 24%, rgba(20, 18, 14, 0.14) 46%, transparent 62%),
    linear-gradient(to top, rgba(20, 18, 14, 0.86) 0%, rgba(20, 18, 14, 0.52) 38%, transparent 66%);
}

/* White Pines lockup must read on pale sky before scroll. Olive Main on cream. */
body.pin-cinematic .whd-header .whd-logo__pe-img,
body.pin-cinematic .whd-header .whd-logo__comm-img {
  filter: drop-shadow(0 2px 8px rgba(20, 18, 14, 0.9)) drop-shadow(0 0 18px rgba(20, 18, 14, 0.55));
}
body.pin-cinematic .whd-header .whd-logo__wh-text {
  text-shadow: 0 1px 10px rgba(20, 18, 14, 0.95), 0 0 14px rgba(20, 18, 14, 0.6);
}
html.whd-nav-scrolled body.pin-cinematic .whd-header .whd-logo__pe-img,
html.whd-nav-scrolled body.pin-cinematic .whd-header .whd-logo__comm-img {
  filter: none;
}
html.whd-nav-scrolled body.pin-cinematic .whd-header .whd-logo__wh-text {
  text-shadow: none;
}

.pin-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 100vh;
  min-height: 100dvh;
  padding:
    calc(var(--whd-logo-h, 96px) + var(--whd-header-py, 22px) * 2 + 1.5rem)
    clamp(1.25rem, 4.5vw, 4.5rem)
    clamp(1.75rem, 4vh, 3rem);
}

.pin-hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: min(38rem, 100%);
}
.pin-hero__kicker {
  margin: 0 0 0.65rem;
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FBF8F2;
  text-shadow:
    0 1px 2px rgba(20, 18, 14, 0.85),
    0 2px 16px rgba(20, 18, 14, 0.7),
    0 0 22px rgba(20, 18, 14, 0.55);
}

.pin-hero__title {
  margin: 0;
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-weight: 500;
  font-size: clamp(4.2rem, 13vw, 10.5rem);
  line-height: 1.12;
  letter-spacing: -0.045em;
  color: #FBF8F2;
  text-wrap: balance;
  text-shadow:
    0 2px 8px rgba(20, 18, 14, 0.45),
    0 8px 28px rgba(20, 18, 14, 0.35);
}

.pin-hero__word {
  display: inline-block;
  transform: translateY(0.42em);
  opacity: 0;
  animation: pin-pull 0.72s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 80ms);
}

.pin-hero__sub {
  margin: 1.15rem 0 0;
  max-width: 28rem;
  font-family: var(--font-sans, "DM Sans", Montserrat, sans-serif);
  font-size: clamp(0.95rem, 1.4vw, 1.12rem);
  line-height: 1.4;
  color: #FBF8F2;
  text-shadow: 0 1px 14px rgba(20, 18, 14, 0.55);
  transform: translateY(0.8rem);
  opacity: 0;
  animation: pin-pull 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.42s forwards;
}

.pin-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem 1rem;
  margin-top: 1.35rem;
  transform: translateY(0.8rem);
  opacity: 0;
  animation: pin-pull 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.58s forwards;
}

.pin-hero__cta {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  gap: 0.85rem;
  min-height: 3.25rem;
  padding: 0.45rem 0.45rem 0.45rem 1.2rem;
  background: #FBF8F2 !important;
  color: #23231e !important;
  -webkit-text-fill-color: #23231e !important;
  border: 0;
  text-decoration: none;
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 10px 28px rgba(20, 18, 14, 0.32);
}
.pin-hero__cta:link,
.pin-hero__cta:visited,
.pin-hero__cta:hover,
.pin-hero__cta:active,
.pin-hero__cta:focus-visible {
  color: #23231e !important;
  -webkit-text-fill-color: #23231e !important;
}
.pin-hero__cta:hover {
  background: #fff !important;
}
.pin-hero__cta:focus-visible {
  outline: 2px solid #FBF8F2;
  outline-offset: 3px;
}

.pin-hero__cta-icon {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  flex: none;
  background: var(--whh-olive, #494F25);
  color: #FBF8F2;
}

.pin-hero__cta-icon svg {
  display: block;
  stroke: #FBF8F2;
}

.pin-hero__cta--inverse {
  background: var(--whh-olive, #494F25) !important;
  color: #FBF8F2 !important;
  -webkit-text-fill-color: #FBF8F2 !important;
  box-shadow: 0 10px 24px rgba(20, 18, 14, 0.16);
}
.pin-hero__cta--inverse:link,
.pin-hero__cta--inverse:visited,
.pin-hero__cta--inverse:hover,
.pin-hero__cta--inverse:active,
.pin-hero__cta--inverse:focus-visible {
  color: #FBF8F2 !important;
  -webkit-text-fill-color: #FBF8F2 !important;
}
.pin-hero__cta--inverse:hover {
  background: #3d4220 !important;
}
.pin-hero__cta--inverse:focus-visible {
  outline: 2px solid var(--whh-olive, #494F25);
  outline-offset: 3px;
}
.pin-hero__cta--inverse .pin-hero__cta-icon {
  background: #FBF8F2;
  color: var(--whh-olive, #494F25);
}
.pin-hero__cta--inverse .pin-hero__cta-icon svg {
  stroke: var(--whh-olive, #494F25);
}

body.pin-cinematic .pin-hero a.whd-btn.pin-hero__ghost,
.pin-hero__ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 3.25rem;
  height: auto;
  padding: 0.45rem 1.35rem !important;
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: 0.92rem !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: #FBF8F2 !important;
  -webkit-text-fill-color: #FBF8F2 !important;
  border: 1.5px solid #FBF8F2 !important;
  background: rgba(20, 18, 14, 0.62) !important;
  box-shadow: 0 10px 28px rgba(20, 18, 14, 0.32);
}
body.pin-cinematic .pin-hero a.whd-btn.pin-hero__ghost:link,
body.pin-cinematic .pin-hero a.whd-btn.pin-hero__ghost:visited,
body.pin-cinematic .pin-hero a.whd-btn.pin-hero__ghost:hover,
body.pin-cinematic .pin-hero a.whd-btn.pin-hero__ghost:active,
body.pin-cinematic .pin-hero a.whd-btn.pin-hero__ghost:focus-visible,
.pin-hero__ghost:link,
.pin-hero__ghost:visited,
.pin-hero__ghost:hover,
.pin-hero__ghost:active,
.pin-hero__ghost:focus-visible {
  color: #FBF8F2 !important;
  -webkit-text-fill-color: #FBF8F2 !important;
}
body.pin-cinematic .pin-hero a.whd-btn.pin-hero__ghost:hover,
.pin-hero__ghost:hover {
  background: rgba(20, 18, 14, 0.82) !important;
  border-color: #fff !important;
}
.pin-hero__ghost:focus-visible {
  outline: 2px solid #FBF8F2;
  outline-offset: 3px;
}

@keyframes pin-pull {
  to {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pin-hero__word,
  .pin-hero__sub,
  .pin-hero__ctas {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .pin-hero__media img,
  .pin-hero__media img.is-on {
    transition: none;
    transform: none;
  }
}

@media (max-width: 860px) {
  .pin-hero__inner {
    padding-bottom: 1.5rem;
  }
  .pin-hero__title {
    font-size: clamp(3.6rem, 18vw, 5.6rem);
  }
  /* 100dvh cover of a 3:2 elevation is a window close-up.
     Sit the photo in the top of the hero so the house is a house. */
  .pin-hero__media img,
  .pin-hero__media img.is-on {
    top: 0;
    bottom: auto;
    height: 62% !important;
    object-position: 50% 62% !important;
    transform: none;
  }
  .pin-hero__scrim {
    background:
      linear-gradient(to bottom, rgba(20, 18, 14, 0.72) 0%, rgba(20, 18, 14, 0.28) 14%, transparent 30%),
      linear-gradient(to top, #1c1a16 0%, #1c1a16 36%, rgba(20, 18, 14, 0.72) 46%, transparent 64%);
  }
}

.pin-colours,
.pin-styles,
.pin-specs,
.pin-siteplan-soon,
.pin-interiors {
  --pin-pad-x: clamp(1.5rem, 5vw, 4.5rem);
  --pin-pad-y: clamp(3.75rem, 8vw, 6rem);
  --pin-measure: min(46rem, 100%);
  box-sizing: border-box;
  width: 100%;
  padding: var(--pin-pad-y) var(--pin-pad-x);
}

.pin-colours__inner,
.pin-styles__inner,
.pin-specs__inner,
.pin-colours__stage,
.pin-styles__stage,
.pin-siteplan-soon__layout,
.pin-interiors__inner {
  width: 100%;
  max-width: none;
}

/* --- Colour packages ----------------------------------------------------
   21st.dev Interactive Selector: pick a look on the left, house + materials
   on the right. One decision, one preview — no second stack, no chip row. */

.pin-colours,
.pin-styles,
.pin-specs {
  background: var(--surface-page, #FBF8F2);
  scroll-margin-top: 5.5rem;
}

.pin-colours__inner .whd-h2,
.pin-styles__inner .whd-h2,
.pin-specs__inner .whd-h2 {
  margin: 0 0 0.9rem;
  max-width: var(--pin-measure);
  text-wrap: balance;
}

.pin-colours__inner .whd-body,
.pin-styles__inner .whd-body,
.pin-specs__inner .whd-body {
  margin: 0 0 2rem;
  max-width: var(--pin-measure);
  text-wrap: pretty;
}

.pin-colours__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 0.85rem;
  margin: -0.75rem 0 1.75rem;
}

.pin-colours .pin-look__photo {
  min-height: 22rem;
  background: #fff;
}
.pin-colours .pin-look__photo > img {
  object-fit: contain !important;
  background: #fff;
}
.pin-colours .pin-picks {
  max-height: 34rem;
  overflow-y: auto;
}
.pin-colours .pin-board--gallery .pin-picks {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding: 0.15rem 0 0.35rem;
}

.pin-styles__focus {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
  margin: -0.65rem 0 2rem;
  padding: 0;
  list-style: none;
  max-width: var(--pin-measure);
}
.pin-styles__focus li {
  padding: 0.38rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--whh-olive, #494F25) 28%, transparent);
  background: color-mix(in srgb, var(--whh-olive, #494F25) 7%, #FBF8F2);
  color: var(--whh-olive, #494F25);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pin-styles__inner .whd-label,
.pin-specs__inner .whd-label { display: block; margin-bottom: 0.65rem; }

.pin-specs__scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.75rem;
  outline: 1px solid rgba(0, 0, 0, 0.1);
}

.pin-specs__table {
  width: 100%;
  min-width: 52rem;
  border-collapse: collapse;
  background: #FBFAF7;
  font-variant-numeric: tabular-nums;
}

.pin-specs__table th,
.pin-specs__table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  vertical-align: top;
}

.pin-specs__table thead th {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted, #6E594C);
  background: #F3EEE6;
  white-space: nowrap;
}

.pin-specs__table tbody th {
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text-heading, #1c1a16);
}

.pin-specs__table tbody th a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.pin-specs__table tbody th a:hover {
  color: var(--whh-olive, #494F25);
}

.pin-specs__table td {
  font-size: 0.88rem;
  color: var(--text-body, #3d3a34);
  white-space: nowrap;
}

.pin-specs__table tbody tr:last-child th,
.pin-specs__table tbody tr:last-child td {
  border-bottom: 0;
}

.pin-specs__note {
  margin: 0 0 1.25rem;
  font-size: 0.82rem;
  color: var(--text-muted, #6E594C);
}

.pin-specs__cta { margin-top: 0.25rem; }

.pin-specs .peb-availability-bridge {
  width: 100%;
  margin: 2rem 0 0;
}

/* Elevation gallery: one large house, small photo thumbs underneath. */
.pin-styles .pin-board--gallery,
.pin-colours .pin-board--gallery {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 0.85rem;
  overflow: visible;
}
.pin-styles .pin-board,
.pin-styles__stage {
  overflow: visible;
}
.pin-styles .pin-board--gallery .pin-look__photo,
.pin-colours .pin-board--gallery .pin-look__photo {
  grid-column: 1;
  grid-row: 1;
  aspect-ratio: auto;
  min-height: clamp(22rem, 52vw, 34rem);
  padding-top: 0;
  padding-bottom: 0.15rem;
  overflow: visible;
  box-sizing: border-box;
  background: var(--peb-stone, #F5F2EC);
}
@media (min-width: 900px) {
  .pin-styles .pin-board--gallery .pin-look__photo,
  .pin-colours .pin-board--gallery .pin-look__photo {
    min-height: clamp(28rem, 48vw, 40rem);
  }
}
@media (min-width: 1200px) {
  .pin-styles .pin-board--gallery .pin-look__photo,
  .pin-colours .pin-board--gallery .pin-look__photo {
    min-height: clamp(32rem, 44vw, 46rem);
  }
}
.pin-styles .pin-board--gallery .pin-look__photo > img {
  object-fit: contain !important;
  object-position: 50% 50% !important;
}
.pin-styles .pin-board--gallery .pin-look__meta,
.pin-colours .pin-board--gallery .pin-look__meta {
  grid-column: 1;
  grid-row: 2;
}
.pin-styles .pin-board--gallery .pin-picks,
.pin-colours .pin-board--gallery .pin-picks {
  grid-column: 1;
  grid-row: 3;
}
.pin-styles .pin-board--gallery .pin-picks {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.65rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0.2rem;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  padding: 0.2rem 0 1.15rem;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--whh-olive, #494F25) 50%, transparent) transparent;
}
.pin-styles .pin-board--gallery .pin-pick--thumb {
  flex: 0 0 clamp(11.25rem, 14.5vw, 13.75rem);
  width: clamp(11.25rem, 14.5vw, 13.75rem);
  max-width: none;
  scroll-snap-align: start;
}
.pin-colours .pin-board--gallery .pin-picks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.55rem;
  align-items: start;
  padding-bottom: 1.1rem;
}

.pin-board {
  display: grid;
  grid-template-columns: minmax(13.5rem, 17.5rem) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 1.15rem 1.5rem;
  align-items: stretch;
}

.pin-picks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  grid-column: 1;
  grid-row: 1;
}

.pin-look__photo {
  grid-column: 2;
  grid-row: 1;
}

.pin-details,
.pin-mats {
  grid-column: 1 / -1;
}

.pin-pick {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  padding: 0 !important;
  margin: 0;
  border: 1px solid var(--line, #DDD6CC);
  background: var(--surface-card, #FBFAF7) !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  text-align: left;
  color: var(--text-heading, #1c1a16) !important;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
  min-height: 44px;
  transition: border-color 0.2s ease;
}

.pin-pick:hover { border-color: var(--whh-olive, #494F25); }

.pin-pick.is-active,
.pin-pick[aria-selected="true"] {
  border-color: var(--whh-olive, #494F25);
  background: #fff !important;
  box-shadow: inset 3px 0 0 var(--whh-olive, #494F25) !important;
}

.pin-pick:focus-visible {
  outline: 2px solid var(--whh-olive, #494F25);
  outline-offset: 3px;
}

.pin-pick--thumb {
  flex: none;
  min-width: 0;
  min-height: 44px;
  transition-property: border-color, transform, box-shadow;
  transition-duration: 0.16s;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
.pin-pick--thumb:active {
  transform: scale(0.96);
}
.pin-pick--thumb.is-active,
.pin-pick--thumb[aria-selected="true"] {
  box-shadow: none !important;
  background: #fff !important;
}
.pin-pick__frame {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e8e4da;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}
.pin-pick__frame img {
  position: absolute !important;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
}
.pin-pick--thumb.is-active .pin-pick__frame,
.pin-pick--thumb[aria-selected="true"] .pin-pick__frame {
  outline: 2px solid var(--whh-olive, #494F25);
  outline-offset: 2px;
}
.pin-pick--thumb .pin-pick__name {
  font-size: 0.95rem;
  padding: 0.4rem 0.55rem 0;
}
.pin-pick--thumb .pin-pick__tag {
  padding: 0.1rem 0.45rem 0.5rem;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  max-width: 100%;
}

.pin-look__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  flex-wrap: wrap;
  min-height: 1.8rem;
}
.pin-look__meta .pin-look__name {
  color: var(--text-heading, #1c1a16);
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
}
.pin-look__meta .pin-look__tag {
  color: var(--text-muted, #6E594C);
}

.pin-pick__bars {
  display: flex;
  width: 100%;
  flex: 1 1 0;
  min-height: 2.4rem;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}

.pin-pick__bar { flex: 1 1 0; min-width: 0; }

.pin-pick__name {
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-heading, #1c1a16) !important;
  padding: 0.45rem 0.8rem 0;
  line-height: 1.15;
}

.pin-pick__tag {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted, #6E594C);
  padding: 0.15rem 0.8rem 0.55rem;
}

.pin-look__photo {
  position: relative;
  overflow: hidden;
  background: #e8e4da;
  aspect-ratio: 16 / 9;
  min-height: 16rem;
  min-width: 0;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}

.pin-look__photo > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.pin-look__photo > img.is-on { opacity: 1; }

.pin-styles .pin-look__photo { overflow: visible; }
.pin-styles .pin-look__cap { display: none; }

/* Dual colourway toggle — bottom-left; keep this louder than Features/Photo */
.pin-look-toggle {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  z-index: 12;
  display: inline-flex;
  align-items: stretch;
  border-radius: 0.35rem;
  overflow: hidden;
  background: #FBFAF7;
  box-shadow:
    0 1px 2px rgba(28, 26, 22, 0.14),
    0 6px 18px rgba(28, 26, 22, 0.18);
  border: 1.5px solid color-mix(in srgb, var(--peb-ink, #1c1a16) 28%, transparent);
}
.pin-look-toggle[hidden] { display: none !important; }
.pin-look-toggle__btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 4.25rem;
  min-height: 2.35rem !important;
  height: auto;
  margin: 0 !important;
  padding: 0.55rem 0.85rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #FBFAF7 !important;
  box-shadow: none !important;
  color: var(--peb-ink, #1c1a16) !important;
  -webkit-text-fill-color: var(--peb-ink, #1c1a16) !important;
  font-family: inherit;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.pin-look-toggle__btn + .pin-look-toggle__btn {
  border-left: 1.5px solid color-mix(in srgb, var(--peb-ink, #1c1a16) 22%, transparent) !important;
}
.pin-look-toggle__btn:hover {
  background: color-mix(in srgb, var(--peb-olive, #494F25) 10%, #FBFAF7) !important;
  color: var(--peb-ink, #1c1a16) !important;
  -webkit-text-fill-color: var(--peb-ink, #1c1a16) !important;
}
.pin-look-toggle__btn.is-active {
  color: #FBFAF7 !important;
  -webkit-text-fill-color: #FBFAF7 !important;
  background: var(--peb-olive, var(--whh-olive, #494F25)) !important;
}
.pin-look-toggle__btn:focus-visible {
  outline: 2px solid var(--peb-olive, var(--whh-olive, #494F25));
  outline-offset: 3px;
  z-index: 1;
}
@media (hover: none), (pointer: coarse), (max-width: 720px) {
  .pin-look-toggle {
    bottom: 0.55rem;
    left: 0.55rem;
  }
  .pin-look-toggle__btn {
    min-width: 3.6rem;
    min-height: 2.5rem !important;
    padding: 0.6rem 0.75rem !important;
    font-size: 11px !important;
  }
}

/* Features / Photo toggle — low-key chip control */
.pin-hotspot-toggle {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  left: auto;
  transform: none;
  z-index: 10;
  display: inline-flex;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--peb-ink, #1c1a16) 14%, transparent);
  background: color-mix(in srgb, var(--peb-paper, #FBFAF7) 94%, transparent);
  box-shadow: none;
  backdrop-filter: blur(4px);
}
.pin-hotspot-toggle__btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-height: 0 !important;
  height: auto;
  padding: 0.28rem 0.55rem !important;
  margin: 0;
  border: 0;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--peb-ink-soft, #4a4740) !important;
  -webkit-text-fill-color: var(--peb-ink-soft, #4a4740) !important;
  font-family: inherit;
  font-size: 9px !important;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.18s ease,
    background-color 0.18s ease;
}
.pin-hotspot-toggle__btn + .pin-hotspot-toggle__btn {
  border-left: 1px solid color-mix(in srgb, var(--peb-ink, #1c1a16) 18%, transparent);
}
.pin-hotspot-toggle__btn:hover {
  color: var(--peb-ink, #1c1a16) !important;
  -webkit-text-fill-color: var(--peb-ink, #1c1a16) !important;
}
.pin-hotspot-toggle__btn.is-active {
  color: var(--peb-chrome-text, #FBFAF7) !important;
  -webkit-text-fill-color: var(--peb-chrome-text, #FBFAF7) !important;
  background: var(--peb-olive, var(--whh-olive, #494F25)) !important;
  box-shadow: none;
}
.pin-hotspot-toggle__btn:focus-visible {
  outline: 2px solid var(--peb-olive, var(--whh-olive, #494F25));
  outline-offset: 3px;
  z-index: 1;
}
.pin-hotspot-toggle__icon {
  width: 0.68rem;
  height: 0.68rem;
  flex: 0 0 auto;
  display: block;
}

@media (hover: none), (pointer: coarse), (max-width: 720px) {
  .pin-hotspot-toggle {
    top: 0.35rem;
    right: 0.35rem;
  }
  .pin-hotspot-toggle__btn {
    padding: 0.18rem 0.38rem !important;
    font-size: 8px !important;
    letter-spacing: 0.05em;
    gap: 0.18rem;
  }
  .pin-hotspot-toggle__icon {
    width: 0.56rem;
    height: 0.56rem;
  }
}

@media (min-width: 900px) {
  .pin-hotspot-toggle__btn {
    padding: 0.3rem 0.62rem !important;
    font-size: 9px !important;
  }
}

.pin-look__photo--hotspots-off .pin-hotspots {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pin-hotspots {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.pin-hotspot {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  max-width: 44px;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  z-index: 1;
  touch-action: manipulation;
  white-space: normal;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
  line-height: 0;
  overflow: visible;
}
.pin-hotspot:hover,
.pin-hotspot:focus,
.pin-hotspot:active,
.pin-hotspot.is-open {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
.pin-hotspot::before,
.pin-hotspot::after {
  content: none !important;
  display: none !important;
}
.pin-hotspot.is-open { z-index: 8; }
.pin-hotspot:focus-visible {
  outline: 2px solid #FBF8F2;
  outline-offset: 3px;
}

.pin-hotspot__mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  pointer-events: none;
}
.pin-hotspot__core,
.pin-hotspot__plus {
  grid-area: 1 / 1;
  justify-self: center;
  align-self: center;
}

.pin-hotspot__core {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--whh-olive, #494F25);
  box-shadow: 0 0 0 2px #FBF8F2, 0 2px 8px rgba(20, 18, 14, 0.28);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.pin-hotspot__plus {
  width: 11px;
  height: 11px;
  color: #FBF8F2;
  display: block;
  z-index: 1;
  transform-origin: 50% 50%;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.pin-hotspot:hover .pin-hotspot__core,
.pin-hotspot.is-open .pin-hotspot__core,
.pin-hotspot:focus-visible .pin-hotspot__core {
  transform: scale(1.08);
}
.pin-hotspot.is-open .pin-hotspot__plus,
.pin-hotspot:focus-visible .pin-hotspot__plus {
  transform: rotate(45deg);
}
.pin-hotspot:active .pin-hotspot__mark {
  transform: scale(0.96);
}

.pin-hotspot__tip {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.55rem);
  transform: translateX(-50%) translateY(4px);
  box-sizing: border-box;
  width: 15rem;
  max-width: min(15rem, calc(100vw - 2rem));
  min-width: 0;
  padding: 0;
  background: #FBFAF7;
  color: #23231e;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition-property: opacity, transform, visibility;
  transition-duration: 0.18s;
  transition-timing-function: ease;
  z-index: 9;
  text-align: left;
  white-space: normal;
  box-shadow: 0 8px 28px rgba(20, 18, 14, 0.16);
}

.pin-hotspot.is-open .pin-hotspot__tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.pin-hotspot.is-low .pin-hotspot__tip,
.pin-hotspot--tip-above .pin-hotspot__tip {
  top: auto;
  bottom: calc(100% + 0.7rem);
}

.pin-hotspot--tip-center .pin-hotspot__tip {
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  transform: translate(-50%, -50%) translateY(4px);
}
.pin-hotspot--tip-center.is-open .pin-hotspot__tip {
  transform: translate(-50%, -50%);
}

.pin-hotspot--tip-near .pin-hotspot__tip,
.pin-hotspot--tip-near.is-open .pin-hotspot__tip {
  right: auto;
  bottom: auto;
  transform: none;
}

.pin-hotspot.is-rightish .pin-hotspot__tip {
  left: auto;
  right: 0;
  transform: translateY(4px);
}
.pin-hotspot.is-rightish.is-open .pin-hotspot__tip {
  transform: none;
}

.pin-hotspot.is-leftish .pin-hotspot__tip {
  left: 0;
  transform: translateY(4px);
}
.pin-hotspot.is-leftish.is-open .pin-hotspot__tip {
  transform: none;
}

.pin-hotspot__close {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0 !important;
  border: 0;
  border-radius: 0 !important;
  background: color-mix(in srgb, #FBFAF7 92%, transparent) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--peb-ink-soft, #4a4740) !important;
  -webkit-text-fill-color: var(--peb-ink-soft, #4a4740) !important;
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.pin-hotspot__close svg {
  width: 0.75rem;
  height: 0.75rem;
  display: block;
}
.pin-hotspot__close:hover {
  color: var(--peb-ink, #1c1a16) !important;
  -webkit-text-fill-color: var(--peb-ink, #1c1a16) !important;
  background: #fff !important;
}
.pin-hotspot__close:focus-visible {
  outline: 2px solid var(--whh-olive, #494F25);
  outline-offset: -2px;
}

.pin-hotspot__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #23231e;
}
.pin-hotspot__media img,
.pin-hotspot__tip img {
  position: static !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: var(--pin-pos, center) !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
}

.pin-hotspot__label {
  display: block;
  padding: 0.55rem 0.75rem 0.12rem;
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.pin-hotspot__text {
  margin: 0 !important;
  padding: 0 0.75rem 0.7rem;
  font-size: 0.82rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-body, #3d3a34);
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 100%;
}

.pin-styles .pin-look__photo { overflow: visible; }

@media (hover: none), (pointer: coarse), (max-width: 720px) {
  .pin-hotspot {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
  }
  .pin-hotspot__tip {
    width: min(14.5rem, calc(100vw - 2rem));
  }
  .pin-hotspot__media {
    aspect-ratio: 16 / 9;
    max-height: 5.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pin-styles .pin-board--gallery .pin-look__photo,
  .pin-styles .pin-board--gallery .pin-look__photo > img {
    transition: none;
  }
}

.pin-look__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 2.4rem 1.15rem 1rem;
  background: linear-gradient(to top, rgba(28, 26, 22, 0.58), transparent);
  color: #FBF8F2;
}

.pin-look__name {
  display: block;
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.pin-look__tag {
  display: block;
  margin-top: 0.22rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

.pin-mats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.95rem 1.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pin-mats__item {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.7rem;
  row-gap: 0.12rem;
  align-items: start;
}

.pin-mats__chip {
  grid-row: 1 / span 2;
  width: 3.6rem;
  height: 3.6rem;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
  background-color: #ddd;
  background-repeat: no-repeat;
}

.pin-mats__chip--photo {
  background-size: 950%;
}

.pin-mats__chip--tile {
  background-size: cover;
  background-position: center;
}

/* Elevation detail tiles — cropped from the marketing boards
   (rooflines, porch, windows, garage, materials). */
.pin-details {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7rem 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pin-details[hidden] { display: none; }

.pin-details__item figure {
  margin: 0;
}

.pin-details__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #e8e4da;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}

.pin-details__label {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-heading, #1c1a16);
}

.pin-details__value {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text-body, #3d3a34);
}

@media (max-width: 860px) {
  .pin-details {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0.65rem;
    padding-bottom: 0.35rem;
    -webkit-overflow-scrolling: touch;
  }
  .pin-details__item {
    flex: 0 0 9.75rem;
    scroll-snap-align: start;
  }
}

.pin-mats__chip:hover,
.pin-mats__chip:focus-visible {
  outline: 2px solid var(--whh-olive, #494F25);
  outline-offset: 2px;
  z-index: 2;
}

.pin-mats__label {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-heading, #1c1a16);
  padding-top: 0.1rem;
}

.pin-mats__value {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text-body, #3d3a34);
}

@media (max-width: 860px) {
  .pin-board { grid-template-columns: 1fr; }
  .pin-picks,
  .pin-look__photo,
  .pin-details,
  .pin-mats { grid-column: 1; grid-row: auto; }
  .pin-picks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .pin-pick { flex: none; }
  .pin-pick__bars { flex: none; height: 2.5rem; }
  .pin-look__photo { min-height: 12rem; }
  .pin-styles .pin-board--gallery .pin-look__photo {
    min-height: clamp(18rem, 58vw, 24rem);
  }
  .pin-styles .pin-board--gallery .pin-picks {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0.5rem;
    padding-bottom: 1.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .pin-styles .pin-board--gallery .pin-pick--thumb {
    flex: 0 0 7.75rem;
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pin-look__photo > img,
  .pin-pick,
  .pin-pick--thumb,
  .pin-hotspot,
  .pin-hotspot__plus,
  .pin-hotspot__core { transition: none; }
  .pin-pick--thumb:active { transform: none; }
  .pin-hotspot:active .pin-hotspot__mark { transform: none; }
}

/* --- Site plan placeholder ---------------------------------------------- */

.pin-siteplan-soon {
  background: var(--surface-card, #F3EEE6);
}

.pin-siteplan-soon__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.pin-siteplan-soon__copy .whd-h2 {
  margin: 0 0 0.9rem;
}

.pin-siteplan-soon__copy .whd-body {
  margin: 0 0 1rem;
  max-width: 36rem;
}

.pin-siteplan-soon__note {
  margin: 0 0 1.75rem;
  max-width: 36rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-body, #3d3a34);
}

.pin-siteplan-soon__frame {
  min-height: 18rem;
}

.pin-siteplan-soon__plate {
  height: 100%;
  min-height: 18rem;
  border: 1px solid var(--line, #DDD6CC);
  background:
    linear-gradient(to right, rgba(73,79,37,0.035) 1px, transparent 1px) 0 0 / 3rem 3rem,
    linear-gradient(to bottom, rgba(73,79,37,0.035) 1px, transparent 1px) 0 0 / 3rem 3rem,
    #FAF7F0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.35rem;
  padding: 1.5rem 1.6rem;
}

.pin-siteplan-soon__plate-label {
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 1.65rem;
  font-weight: 500;
  color: var(--text-heading, #1c1a16);
}

.pin-siteplan-soon__plate-status {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--whh-olive, #494F25);
}

@media (max-width: 800px) {
  .pin-siteplan-soon__layout {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .pin-siteplan-soon__frame { min-height: 12rem; }
  .pin-siteplan-soon__plate { min-height: 12rem; }
}

.pin-siteplan {
  background: var(--surface-page, #FBF8F2);
}
.pin-siteplan__intro {
  max-width: 46rem;
  margin: 0 auto 2rem;
  text-align: center;
  padding: 0 var(--gutter, 1.5rem);
}
.pin-siteplan__intro .whd-h2 { margin: 0.55rem 0 0.9rem; }
.pin-siteplan__intro .whd-body {
  margin: 0 auto 1.1rem;
  max-width: 40rem;
}
.pin-siteplan__guide {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 0 auto 1.5rem;
  max-width: 42rem;
  color: var(--text-body, #3d3a34);
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: 0.78rem;
  line-height: 1.55;
}
.pin-siteplan__guide strong { color: var(--text-heading, #1c1a16); }
.pin-siteplan__intro .pin-hero__cta { margin-top: 0.25rem; }
.pin-siteplan .wh-siteplan {
  max-width: min(1120px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}

/* Show lot outlines always (matches Pasture Edge); strengthen on hover/select. */
body.pin-cinematic .pin-siteplan .wh-siteplan__lot::before,
body.pin-cinematic .pin-siteplan .wh-siteplan__lot::after {
  opacity: 0.72;
}
body.pin-cinematic .pin-siteplan .wh-siteplan__lot:hover::before,
body.pin-cinematic .pin-siteplan .wh-siteplan__lot:hover::after,
body.pin-cinematic .pin-siteplan .wh-siteplan__lot.is-active:not(.is-existing)::before,
body.pin-cinematic .pin-siteplan .wh-siteplan__lot.is-active:not(.is-existing)::after,
body.pin-cinematic .pin-siteplan .wh-siteplan__lot.is-lit::before,
body.pin-cinematic .pin-siteplan .wh-siteplan__lot.is-lit::after,
body.pin-cinematic .pin-siteplan .wh-siteplan__lot.is-selected::before,
body.pin-cinematic .pin-siteplan .wh-siteplan__lot.is-selected::after {
  opacity: 1;
}
body.pin-cinematic .pin-siteplan .wh-siteplan__lot.is-existing::before,
body.pin-cinematic .pin-siteplan .wh-siteplan__lot.is-existing::after {
  content: none;
  display: none;
}
body.pin-cinematic .pin-siteplan .wh-siteplan__existtag {
  top: auto;
  bottom: 14%;
  transform: translate(-50%, 0);
}

/* --- Interiors ----------------------------------------------------------
   Copy beside the gallery so the heading isn't a leftover block above a
   widget. Expand-on-hover (Skiper52) is the photo interaction. */

.pin-interiors {
  background: var(--surface-page, #FBF8F2);
}

.pin-interiors__inner {
  display: grid;
  grid-template-columns: minmax(16rem, 0.78fr) minmax(0, 1.4fr);
  gap: clamp(1.5rem, 3.5vw, 3.25rem);
  align-items: center;
}

.pin-interiors__copy {
  max-width: 34rem;
  margin-bottom: 0;
}

.pin-interiors__copy .whd-h2 {
  margin: 0 0 0.9rem;
  text-wrap: balance;
}
.pin-interiors__copy .whd-body { margin: 0 0 1.25rem; text-wrap: pretty; }
.pin-interiors__copy .whd-btn { margin-top: 1.35rem; }

.pin-interiors__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.pin-interiors__list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--text-body, #3d3a34);
}

.pin-interiors__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--whh-olive, #494F25);
}

.pin-gallery {
  display: flex;
  flex-direction: row;
  gap: 1px;
  width: 100%;
  height: min(56vh, 32rem);
  min-height: 22rem;
  background: #1c1a16;
  overflow: hidden;
}

.pin-gallery__item {
  appearance: none;
  -webkit-appearance: none;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #1c1a16 !important;
  background-image: none !important;
  position: relative;
  overflow: hidden;
  flex: 0.5 1 2.55rem;
  min-width: 2.45rem;
  height: 100%;
  cursor: pointer;
  text-align: left;
  outline: none;
  line-height: 0;
  transition: flex-grow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.pin-gallery__item.is-active { flex-grow: 16; }

.pin-gallery__item:focus-visible {
  outline: 2px solid var(--whh-olive, #494F25);
  outline-offset: 2px;
  z-index: 2;
}

.pin-gallery__item img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% 48%;
  transform: none;
}

.pin-gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(20, 18, 14, 0.88) 0%, rgba(20, 18, 14, 0.62) 55%, rgba(20, 18, 14, 0.28) 100%);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.pin-gallery__item.is-active::after { opacity: 0; }

.pin-gallery__item .pin-gallery__spine {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 1.05rem 0.55rem;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700 !important;
  line-height: 1;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.pin-gallery__item.is-active .pin-gallery__spine { opacity: 0; }

.pin-gallery__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 2.6rem 1.2rem 1.05rem;
  background: linear-gradient(to top, rgba(28, 26, 22, 0.7), transparent);
  color: #FBF8F2;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.pin-gallery__item.is-active .pin-gallery__cap {
  opacity: 1;
  transform: translateY(0);
}

.pin-gallery__hint {
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  color: var(--text-body, #3d3a34);
  grid-column: 2;
}

@media (max-width: 800px) {
  .pin-interiors__inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .pin-gallery {
    height: auto;
    min-height: 0;
    flex-direction: column;
  }
  .pin-gallery__hint { grid-column: 1; }
  .pin-gallery__item {
    flex: 0 0 2.65rem;
    width: 100%;
    min-width: 0;
    height: 2.65rem;
    transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1), flex-basis 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .pin-gallery__item.is-active {
    flex: 0 0 22rem;
    height: 22rem;
  }
  .pin-gallery__item::after {
    background: linear-gradient(to top, rgba(20, 18, 14, 0.88) 0%, rgba(20, 18, 14, 0.45) 70%, transparent 100%);
  }
  .pin-gallery__spine {
    writing-mode: horizontal-tb;
    transform: none;
    inset: auto auto 0.7rem 0.9rem;
    padding: 0;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pin-gallery__item,
  .pin-gallery__item img,
  .pin-gallery__item::after,
  .pin-gallery__spine,
  .pin-gallery__cap { transition: none; }
}

body.peb .pin-siteplan-soon__plate-label { color: var(--peb-ink, #23231E); }
body.peb .pin-pick.is-active,
body.peb .pin-pick[aria-selected="true"],
body.peb .pin-pick:hover {
  border-color: var(--peb-olive, #5B6045);
}
body.peb .pin-pick.is-active,
body.peb .pin-pick[aria-selected="true"] {
  box-shadow: inset 3px 0 0 var(--peb-olive, #5B6045) !important;
}
body.peb .pin-pick--thumb.is-active,
body.peb .pin-pick--thumb[aria-selected="true"] {
  box-shadow: none !important;
}
body.peb .pin-pick--thumb.is-active .pin-pick__frame,
body.peb .pin-pick--thumb[aria-selected="true"] .pin-pick__frame {
  outline-color: var(--peb-olive, #5B6045);
}
body.peb .pin-siteplan-soon__plate-status,
body.peb .pin-gallery__hint { color: var(--peb-olive, #5B6045); }
body.peb .pin-interiors__list li::before { background: var(--peb-olive, #5B6045); }
body.peb .pin-pick:focus-visible,
body.peb .pin-gallery__item:focus-visible {
  outline-color: var(--peb-olive, #5B6045);
}
body.peb .pin-hero__cta,
body.peb .pin-hero__cta:link,
body.peb .pin-hero__cta:visited,
body.peb .pin-hero__cta:hover,
body.peb .pin-hero__cta:active,
body.peb .pin-hero__cta:focus-visible {
  background: #FBF8F2 !important;
  color: #23231e !important;
  -webkit-text-fill-color: #23231e !important;
}
body.peb .pin-hero__cta:hover {
  background: #fff !important;
}
body.peb .pin-hero__cta--inverse,
body.peb .pin-hero__cta.pin-hero__cta--inverse,
body.peb .pin-hero__cta--inverse:link,
body.peb .pin-hero__cta--inverse:visited,
body.peb .pin-hero__cta--inverse:hover,
body.peb .pin-hero__cta--inverse:active,
body.peb .pin-hero__cta--inverse:focus-visible,
body.peb .pin-hero__cta.pin-hero__cta--inverse:hover {
  background: var(--whh-olive, #494F25) !important;
  color: #FBF8F2 !important;
  -webkit-text-fill-color: #FBF8F2 !important;
}
body.peb .pin-hero__cta--inverse:hover,
body.peb .pin-hero__cta.pin-hero__cta--inverse:hover {
  background: #3d4220 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Sticky inquire pill: Elementor a:hover / :visited paints this blue on olive. */
body.pin-cinematic a.peb-pill,
body.peb a.peb-pill,
body.pin-cinematic a.peb-pill:link,
body.peb a.peb-pill:link,
body.pin-cinematic a.peb-pill:visited,
body.peb a.peb-pill:visited,
body.pin-cinematic a.peb-pill:hover,
body.peb a.peb-pill:hover,
body.pin-cinematic a.peb-pill:active,
body.peb a.peb-pill:active,
body.pin-cinematic a.peb-pill:focus-visible,
body.peb a.peb-pill:focus-visible {
  color: #FBF8F2 !important;
  -webkit-text-fill-color: #FBF8F2 !important;
}
body.pin-cinematic a.peb-pill:hover,
body.peb a.peb-pill:hover {
  background: var(--peb-olive, #5B6045) !important;
}
body.peb .pin-hero__cta--inverse .pin-hero__cta-icon {
  background: #FBF8F2;
  color: var(--whh-olive, #494F25);
}

body.pin-cinematic .peb-deck .peb-card {
  cursor: default;
}

/* Why The Pines — headings on top, then a pinned horizontal card rail. */
body.pin-cinematic .peb-deck--stack {
  position: relative;
  z-index: 3;
  background: var(--peb-stone, #F5F2EC);
}
@media (min-width: 960px) {
  body.pin-cinematic .peb-deck--stack .peb-deck__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    align-items: stretch;
  }
  body.pin-cinematic .peb-deck--stack .peb-deck__layout {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 100%;
    gap: clamp(1.1rem, 2.2vh, 1.75rem);
    padding: calc(var(--whd-logo-h, 64px) + (2 * var(--whd-header-py, 10px)) + 1rem) 0 var(--pin-section-join, 2.5rem);
  }
  body.pin-cinematic .peb-deck--stack .peb-deck__copy {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    max-width: 44rem;
    flex: 0 0 auto;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding: 0 var(--gutter, 24px);
  }
  body.pin-cinematic .peb-deck--stack .peb-deck__copy .whd-body {
    max-width: 38rem;
  }
  body.pin-cinematic .peb-deck--stack .peb-deck__meta {
    display: flex;
    max-width: 11rem;
    margin-top: 0.35rem;
  }
  body.pin-cinematic .peb-deck--stack .peb-deck__viewport {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    flex: 1 1 auto;
    width: 0;
    min-width: 100%;
    height: auto;
    overflow: hidden;
    transform: none !important;
    padding: 0 0 0 var(--gutter, 24px);
  }
  body.pin-cinematic .peb-deck--stack .peb-deck__track {
    height: 100%;
  }
  body.pin-cinematic .peb-deck--stack .peb-card {
    width: clamp(720px, 82vw, 1120px);
    height: 100%;
  }
}
@media (max-width: 959px) {
  body.pin-cinematic .peb-deck--stack .peb-deck__sticky {
    position: static;
    height: auto;
    display: block;
    overflow: visible;
  }
  body.pin-cinematic .peb-deck--stack .peb-deck__layout {
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 1.5rem;
    padding: var(--pin-section-join, 2.5rem) 0;
  }
  body.pin-cinematic .peb-deck--stack .peb-deck__copy {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    max-width: 40rem;
    padding: 0 var(--gutter, 24px);
  }
  body.pin-cinematic .peb-deck--stack .peb-deck__meta { display: none; }
  body.pin-cinematic .peb-deck--stack .peb-deck__viewport {
    position: static;
    width: 100%;
    min-width: 0;
    height: auto;
    transform: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    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: 0 0 4px var(--gutter, 24px);
  }
  body.pin-cinematic .peb-deck--stack .peb-deck__viewport::-webkit-scrollbar { display: none; }
  body.pin-cinematic .peb-deck--stack .peb-deck__track {
    transform: none !important;
    height: auto;
  }
  body.pin-cinematic .peb-deck--stack .peb-card {
    width: min(86vw, 420px);
    height: min(88vw, 640px);
    scroll-snap-align: start;
  }
  body.pin-cinematic .peb-deck--stack .peb-deck__track .peb-card:not(.is-active) .peb-card__body {
    opacity: 1;
    transform: none;
  }
}
body.pin-cinematic .elementor-element-57459ef6 {
  display: none !important;
}

/* Launch timeline title: one line, then more air before the body. */
body.pin-cinematic .whd-pe-journey__head {
  max-width: 46rem;
}
body.pin-cinematic .whd-pe-journey__head .whd-h2 {
  max-width: none;
  margin-bottom: 0;
}
body.pin-cinematic .whd-pe-journey__head .whd-h2::after {
  margin: 1.35rem auto 0;
}
body.pin-cinematic .whd-pe-journey__head .whd-body {
  margin-top: 1.5rem;
}

/* Collection floor plans are portrait drawings — don't crop them in the 3:2 card. */
body.pin-cinematic .wh-card__media:has(.wh-card__slide--plan.is-active) {
  aspect-ratio: 4 / 3;
  background: #fff;
}
body.pin-cinematic .wh-card__slide--plan img {
  object-fit: contain !important;
  object-position: center;
  padding: 1rem 1.15rem;
}

body.pin-cinematic .peb-pill.is-away {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.peb .pin-hero__cta-icon {
  background: var(--peb-olive, #5B6045);
}

.pin-gallery__item--plan {
  background: #f4f1ea !important;
}
.pin-gallery__item--plan img {
  object-fit: contain;
  object-position: center;
  transform: none;
  background: #f4f1ea;
}
.pin-gallery__item--plan.is-active img { transform: none; }

/* --- Overview carousel (houses, then colour looks) ---------------------- */

.pin-overview-carousel {
  position: relative;
}

body.peb .peb-split__media.pin-overview-carousel img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
body.peb .peb-split__media.pin-overview-carousel img.is-on {
  opacity: 1;
  z-index: 1;
}

.pin-overview-carousel__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 2.6rem 1.25rem 2.35rem;
  background: linear-gradient(to top, rgba(28, 26, 22, 0.72), transparent);
  color: #FBF8F2;
  pointer-events: none;
  text-align: center;
}
.pin-overview-carousel__name {
  display: block;
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.pin-overview-carousel__tag {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Arrows sit mid-photo so they never sit on the house name. */
.pin-overview-carousel__ui {
  position: static;
  display: contents;
}
.pin-overview-carousel__btn {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0 !important;
  margin: 0;
  transform: translateY(-50%);
  border: 1px solid rgba(251, 248, 242, 0.45);
  background: rgba(28, 26, 22, 0.45) !important;
  background-image: none !important;
  color: #FBF8F2 !important;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.pin-overview-carousel__btn[data-pin-prev] { left: 0.75rem; }
.pin-overview-carousel__btn[data-pin-next] { right: 0.75rem; left: auto; }
.pin-overview-carousel__btn:hover {
  background: rgba(28, 26, 22, 0.7) !important;
}
.pin-overview-carousel__btn:focus-visible {
  outline: 2px solid #FBF8F2;
  outline-offset: 2px;
}
.pin-overview-carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 0.55rem;
  z-index: 3;
  display: flex;
  gap: 0.3rem;
  margin: 0;
  transform: translateX(-50%);
}
.pin-overview-carousel__dot {
  appearance: none;
  -webkit-appearance: none;
  width: 0.45rem;
  height: 0.45rem;
  padding: 0 !important;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(251, 248, 242, 0.4) !important;
  background-image: none !important;
  box-shadow: none !important;
  cursor: pointer;
}
.pin-overview-carousel__dot.is-on {
  background: #FBF8F2 !important;
}

@media (prefers-reduced-motion: reduce) {
  body.peb .peb-split__media.pin-overview-carousel img {
    transition: none;
  }
}

/* --- Stats strip (21st Bold Stats, flattened to four equal figures) ---- */

.pin-stats {
  background: var(--peb-ink, #23231E);
  color: #FBF8F2;
  padding: 1.75rem var(--pin-pad-x, clamp(1.5rem, 5vw, 4.5rem));
}
.pin-stats__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  max-width: 72rem;
  margin: 0 auto;
}
.pin-stats__value {
  margin: 0;
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #FBF8F2;
}
.pin-stats__label {
  margin: 0.28rem 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(251, 248, 242, 0.62);
}
@media (max-width: 720px) {
  .pin-stats__row { grid-template-columns: 1fr 1fr; }
}

/* --- Private preview steps (21st How It Works Steps) ------------------- */

.pin-preview {
  background: var(--surface-page, #FBF8F2);
  padding: var(--pin-pad-y, clamp(3.75rem, 8vw, 6rem)) var(--pin-pad-x, clamp(1.5rem, 5vw, 4.5rem));
}
.pin-preview__head { max-width: 40rem; margin: 0 0 2.25rem; }
.pin-preview__head .whd-h2 { margin: 0.55rem 0 0.9rem; }
.pin-preview__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.pin-preview__card {
  position: relative;
  padding: 1.5rem 1.35rem 1.4rem;
  border: 1px solid var(--line, #DDD6CC);
  background: var(--surface-card, #FBFAF7);
  min-height: 12.5rem;
}
.pin-preview__num {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--whh-olive, #494F25);
}
.pin-preview__card h3 {
  margin: 2.1rem 0 0.55rem;
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.pin-preview__card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-body, #3d3a34);
}
.pin-preview .whd-btn { margin-top: 1.75rem; }
@media (max-width: 800px) {
  .pin-preview__grid { grid-template-columns: 1fr; }
}

/* --- Material masonry (21st Masonry Grid, CSS columns) ----------------- */

.pin-look {
  background: var(--surface-card, #F3EEE6);
  padding: var(--pin-pad-y, clamp(3.75rem, 8vw, 6rem)) var(--pin-pad-x, clamp(1.5rem, 5vw, 4.5rem));
}
.pin-look__head { max-width: 40rem; margin: 0 0 2rem; }
.pin-look__head .whd-h2 { margin: 0.55rem 0 0.9rem; }
.pin-look__masonry {
  columns: 3;
  column-gap: 0.7rem;
}
.pin-look__tile {
  break-inside: avoid;
  margin: 0 0 0.7rem;
  position: relative;
  overflow: hidden;
  background: #e8e4da;
}
.pin-look__tile img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  transform: scale(2.35);
}
.pin-look__tile--tall { height: 22rem; }
.pin-look__tile--mid { height: 16rem; }
.pin-look__tile--short { height: 12.5rem; }
.pin-look__tile figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem 0.9rem 0.8rem;
  background: linear-gradient(to top, rgba(28, 26, 22, 0.62), transparent);
  color: #FBF8F2;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.pin-look .whd-btn { margin-top: 1.5rem; }
@media (max-width: 800px) {
  .pin-look__masonry { columns: 2; }
  .pin-look__tile--tall { height: 16rem; }
}
@media (max-width: 520px) {
  .pin-look__masonry { columns: 1; }
}

/* --- Fully finished — the specification schedule -----------------------
   Structure (21st "Feature Showcase" split, re-cut for a spec sheet):
   the claim and its proof share one column, the render spans both rows and
   bleeds to the page edge.

       [ claim  ][        ]
       [ spec   ][ render ]

   Before this, the six-item list sat in a full-bleed row *under* the split.
   It read as an afterthought, and because the section carries no right
   padding (so the image can bleed), the third list column ran off the page
   edge and under the floating inquire pill. Moving the list into the copy
   column makes it the evidence for the sentence above it and gives the
   render a column height to fill.

   Every rule here is scoped `body.peb .pin-decided` so it outranks the
   shared `body.peb .peb-split*` rules in wh-pe-brand.css without touching
   Pasture Edge, which loads that same sheet. -------------------------- */

body.peb .pin-decided.peb-split {
  /* Copy column is measure-led (~65ch at the top of the clamp); the render
     takes whatever is left and runs to the page edge. */
  grid-template-columns: minmax(0, clamp(23rem, 38vw, 36rem)) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "copy  media"
    "spec  media";
  align-items: start;
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: clamp(2.25rem, 3.5vw, 3.25rem);
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3.5rem, 7vw, 6rem) var(--gutter, 24px);
}

body.peb .pin-decided .peb-split__copy {
  grid-area: copy;
  max-width: none;      /* the grid column owns the measure now */
  padding-right: 0;
}
body.peb .pin-decided .peb-split__copy .whd-h2 { margin: 0.85rem 0 1.15rem; }
body.peb .pin-decided .peb-split__copy .whd-lead { margin: 0 0 1.15rem; }

/* The price is the whole offer, so it leaves the paragraph and gets the
   display face — a coda under the argument, not another body line. */
.pin-decided__price {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-heading, #23231E);
  text-wrap: balance;
}

/* --- the schedule ------------------------------------------------------ */

body.peb .pin-decided__spec { grid-area: spec; }

.pin-decided__spec-title {
  margin: 0;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border-hairline, rgba(35, 35, 30, 0.16));
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted, #6B6A5F);
}

.pin-finished__grid {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.peb .pin-decided .pin-finished__grid {
  /* one ruled line per finish — a schedule, not a three-column bullet field */
  display: block;
}
body.peb .pin-decided .pin-finished__grid li {
  position: relative;
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  padding: 0.78rem 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text-heading, #23231E);
}
body.peb .pin-decided .pin-finished__grid li::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--border-hairline, rgba(35, 35, 30, 0.16));
}

.pin-finished__tick {
  width: 1rem;
  height: 1rem;
  background: var(--whh-olive, #494F25);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9.2 16.6 4.8 12.2l1.4-1.4 3 3 8.2-8.2 1.4 1.4z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9.2 16.6 4.8 12.2l1.4-1.4 3 3 8.2-8.2 1.4 1.4z'/></svg>") center / contain no-repeat;
}

/* CTA sits with the fine print it qualifies, at the foot of the schedule. */
.pin-decided__cta .pin-hero__cta,
.pin-sarah__copy .pin-hero__cta,
.wh-journey-more-wrap .pin-hero__cta {
  width: auto;
  max-width: 100%;
}
.pin-decided__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* row gap carries the wrapped case (1280—1440), where the note drops
     under the button; the column gap carries the inline case above that. */
  gap: 1.25rem 1.75rem;
  margin-top: 1.9rem;
}
body.peb .pin-decided__cta .pin-finished__note {
  margin: 0;
  max-width: 17rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted, #6B6A5F);
}

/* --- the render -------------------------------------------------------- */

body.peb .pin-decided .peb-split__media {
  grid-area: media;
  align-self: stretch;
  /* the copy column sets the height now, so drop the fixed 4:5 crop */
  aspect-ratio: auto;
  max-height: none;
  min-height: 26rem;
  /* keep the shared guard: without it the Elementor flex chain picks up the
     image's intrinsic width and widens the page */
  width: 0;
  min-width: 100%;
}

/* --- the authored moment ------------------------------------------------
   As the schedule enters, each rule draws from the left and its check marks
   in behind it — the specification being signed off. It starts after the
   block's own 500ms reveal so the two never overlap, and the default state
   is the finished one, so reduced motion and a failed observer both leave a
   fully legible list. */
@media (prefers-reduced-motion: no-preference) {
  body.peb .pin-decided__spec.whd-reveal .pin-finished__grid li::after {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 620ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1))
      var(--pin-line-delay, 0ms);
  }
  body.peb .pin-decided__spec.whd-reveal .pin-finished__tick {
    opacity: 0;
    transform: translateX(-5px);
    transition:
      opacity 420ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) var(--pin-line-delay, 0ms),
      transform 420ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) var(--pin-line-delay, 0ms);
  }
  body.peb .pin-decided__spec.whd-reveal.is-inview .pin-finished__grid li::after {
    transform: scaleX(1);
  }
  body.peb .pin-decided__spec.whd-reveal.is-inview .pin-finished__tick {
    opacity: 1;
    transform: none;
  }
  body.peb .pin-decided .pin-finished__grid li:nth-child(1) { --pin-line-delay: 300ms; }
  body.peb .pin-decided .pin-finished__grid li:nth-child(2) { --pin-line-delay: 375ms; }
  body.peb .pin-decided .pin-finished__grid li:nth-child(3) { --pin-line-delay: 450ms; }
  body.peb .pin-decided .pin-finished__grid li:nth-child(4) { --pin-line-delay: 525ms; }
  body.peb .pin-decided .pin-finished__grid li:nth-child(5) { --pin-line-delay: 600ms; }
  body.peb .pin-decided .pin-finished__grid li:nth-child(6) { --pin-line-delay: 675ms; }
}

/* --- stacked ----------------------------------------------------------- */
/* Stacks at 1200px, not the shared 900. The copy column has a fixed
   height budget, so below ~1200 the render is squeezed into a 0.65 crop
   that loses the kitchen this section exists to show. Stacked, the same
   render runs full-bleed and landscape, which is the stronger read on a
   tablet anyway. */
@media (max-width: 1200px) {
  body.peb .pin-decided.peb-split {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "copy"
      "media"
      "spec";
    padding: clamp(2.75rem, 8vw, 4rem) var(--gutter, 24px);
    row-gap: clamp(1.9rem, 4vw, 2.5rem);
  }
  body.peb .pin-decided .peb-split__copy { max-width: 34rem; }
  body.peb .pin-decided__spec { max-width: 34rem; }
  body.peb .pin-decided .peb-split__media {
    /* Full-bleed on narrow screens: the render is the section's face here.
       Height comes from the ratio, never a max-height — with `aspect-ratio`
       set, capping the height shrinks the width too and the bleed collapses
       into a floating half-width box. */
    aspect-ratio: 2 / 1;
    min-height: 0;
    max-height: none;
    width: auto;
    min-width: 0;
    margin-inline: calc(var(--gutter, 24px) * -1);
  }
}

/* Below ~800 the frame is narrow enough that a letterbox loses the room;
   the render goes back to a landscape crop that still shows the kitchen. */
@media (max-width: 800px) {
  body.peb .pin-decided .peb-split__media { aspect-ratio: 4 / 3; }
}

/* Stacked but wide: the schedule pairs up rather than running as one thin
   column down the left of an otherwise empty band. */
@media (min-width: 760px) and (max-width: 1200px) {
  body.peb .pin-decided__spec { max-width: 46rem; }
  body.peb .pin-decided .pin-finished__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1.5rem, 4vw, 3rem);
  }
}

@media (max-width: 560px) {
  body.peb .pin-decided .pin-finished__grid li { font-size: 0.96rem; }
  body.peb .pin-decided__cta { gap: 1.1rem; }
  body.peb .pin-decided__cta .pin-finished__note { max-width: none; }
}

body.pin-prelaunch .pin-sarah {
  padding-bottom: 1.25rem;
}

/* --- Sarah contact (21st Card Testimonial, split with portrait) -------- */

.pin-sarah {
  background: var(--surface-card, #F3EEE6);
  padding: var(--pin-pad-y, clamp(3.75rem, 8vw, 6rem)) var(--pin-pad-x, clamp(1.5rem, 5vw, 4.5rem));
}
.pin-sarah__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.pin-sarah__photo {
  margin: 0;
  overflow: hidden;
  background: #e8e4da;
  aspect-ratio: 4 / 5;
  max-height: 32rem;
}
.pin-sarah__photo img {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
.pin-sarah__copy .whd-h2 { margin: 0.5rem 0 0.2rem; }
.pin-sarah__role {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--whh-olive, #494F25);
}
.pin-sarah blockquote {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--text-heading, #1c1a16);
}
.pin-sarah__phone {
  margin: 0 0 1.35rem;
  font-size: 0.98rem;
}
.pin-sarah__phone a { color: inherit; }

/* Launch: Sarah sits inside the dark contact band — match it, keep type readable. */
#contact .pin-sarah {
  background: transparent;
  padding: 0 0 2.75rem;
  color: #FBF8F2;
  text-align: left;
}
#contact .pin-sarah__copy,
#contact .pin-sarah blockquote,
#contact .pin-sarah__phone,
#contact .pin-sarah .whd-label {
  text-align: left;
}
#contact .pin-sarah .whd-h2,
#contact .pin-sarah blockquote {
  color: #FBF8F2;
  text-align: left;
}
#contact .pin-sarah .whd-h2 {
  text-transform: none !important;
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}
#contact .pin-sarah__role,
#contact .pin-sarah .whd-label {
  color: #c5c9a8;
}
#contact .pin-sarah__phone,
#contact .pin-sarah__phone a {
  color: #FBF8F2 !important;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
}
#contact .pin-sarah__phone a:hover {
  color: #fff !important;
  text-decoration: underline;
}
@media (max-width: 800px) {
  .pin-sarah__grid { grid-template-columns: 1fr; }
  .pin-sarah__photo { max-height: 22rem; aspect-ratio: 4 / 3; }
}

body.pin-prelaunch .wh-hero-note { display: none !important; }

body.pin-prelaunch .elementor-element-5666ea35 {
  background-image: url("/wp-content/uploads/2026/08/pines-homes/poppy/poppy-alt.png") !important;
  background-size: cover !important;
  background-position: center 58% !important;
  background-repeat: no-repeat !important;
}
body.pin-prelaunch .elementor-element-5666ea35 .swiper,
body.pin-prelaunch .elementor-element-5666ea35 .elementor-background-slideshow,
body.pin-prelaunch .elementor-element-5666ea35 [class*="slideshow"] {
  opacity: 0 !important;
  pointer-events: none;
}

body.pin-prelaunch .whd-pe-journey__head .whd-h2 {
  max-width: 28ch;
}
body.pin-prelaunch .whd-pe-journey__head .whd-body {
  margin: 1.15rem auto 0;
  max-width: 36rem;
  text-align: center;
}

body.peb .pin-preview__num,
body.peb .pin-sarah__role { color: var(--peb-olive, #5B6045); }
body.peb .pin-finished__tick { background: var(--peb-olive, #5B6045); }

/* One section beat. Same-surface cream neighbors share a join instead of
   stacking two full paddings (~168px of empty cream). Surface changes
   (cream ↔ olive contact) keep a full beat on each side. */
body.pin-cinematic {
  --pin-section-y: clamp(3.5rem, 6.5vw, 5.25rem);
  --pin-section-join: clamp(2rem, 4vw, 3rem);
}

body.pin-cinematic .pin-styles,
body.pin-cinematic .pin-specs,
body.pin-cinematic .pin-siteplan-soon,
body.pin-cinematic .pin-siteplan,
body.pin-cinematic .pin-interiors {
  padding-top: var(--pin-section-y);
  padding-bottom: var(--pin-section-y);
}

body.pin-cinematic .pin-siteplan-soon {
  background: var(--surface-page, #FBF8F2);
}

body.pin-cinematic .pin-decided.peb-split {
  padding-top: var(--pin-section-y);
  padding-bottom: var(--pin-section-y);
}

body.pin-cinematic .whd-pe-journey {
  padding-block: var(--pin-section-y) !important;
}

body.pin-cinematic #contact.elementor-section,
body.pin-cinematic section#contact.contact {
  padding: var(--pin-section-y) 24px !important;
}

body.pin-cinematic #location {
  padding-block: var(--pin-section-y) !important;
}

body.pin-cinematic .whd-faq {
  padding-block: var(--pin-section-y);
}

body.pin-cinematic .elementor-element-53e5397 {
  padding-block: var(--pin-section-y) !important;
}

/* Optical balance around the "Still deciding?" rule (Laura, launch review).
   The margins above and below the rule are near-equal as boxes (35 / 33), but
   the 44px serif heading's line box carries ~12px of descender + leading below
   its glyphs, so it *renders* as 65px above the rule and 39px below. Trim the
   margins above until the two optical gaps match.
   Scoped to .pin-cinematic on purpose: these Elementor widget IDs are reused
   on the Pasture Edge page, which is not in scope here. */
body.pin-cinematic .elementor-element-739bedc7 { margin-bottom: 12px; }
/* #contact .elementor-heading-title sets `margin: 0 0 18px !important`, and
   this block lives inside #contact — so match that specificity to win. */
body.pin-cinematic #contact .elementor-element-739bedc7 .elementor-heading-title { margin-bottom: 0 !important; }

/* House selector + next cream block (collection on launch, decided on prelaunch). */
body.pin-cinematic .pin-styles { padding-bottom: var(--pin-section-join); }
body.pin-cinematic .pin-styles + .pin-specs,
body.pin-cinematic .pin-styles + .pin-collection,
body.pin-prelaunch .pin-styles + .pin-decided { padding-top: var(--pin-section-join); }

/* Collection + siteplan on launch. */
body.pin-cinematic .pin-collection { padding-bottom: 0; }
body.pin-cinematic .pin-collection + .pin-siteplan-soon,
body.pin-cinematic .pin-collection + .pin-siteplan,
body.pin-cinematic .pin-specs + .pin-siteplan-soon,
body.pin-cinematic .pin-specs + .pin-siteplan {
  padding-top: var(--pin-section-join);
}

/* Siteplan sits on the same cream as interiors. */
body.pin-cinematic .pin-siteplan-soon,
body.pin-cinematic .pin-siteplan { padding-bottom: var(--pin-section-join); }
body.pin-cinematic .pin-siteplan-soon + .pin-interiors,
body.pin-cinematic .pin-siteplan + .pin-interiors {
  padding-top: var(--pin-section-join);
}

/* Interiors + journey (journey is wrapped in an Elementor container). */
body.pin-cinematic .pin-interiors { padding-bottom: var(--pin-section-join); }
body.pin-cinematic .pin-interiors + .whd-pe-journey,
body.pin-cinematic .pin-interiors + .elementor-element-4ffa8819 > .whd-pe-journey {
  padding-top: var(--pin-section-join) !important;
}

/* Prelaunch: decided + journey are consecutive cream. */
body.pin-prelaunch .pin-decided.peb-split { padding-bottom: var(--pin-section-join); }
body.pin-prelaunch .pin-decided + .elementor-element-4ffa8819 > .whd-pe-journey {
  padding-top: var(--pin-section-join) !important;
}
/* Siteplan + journey (main page order): the siteplan block and section
   already carry two joins of bottom padding (~96px), which matches the gap
   under the journey — so the journey itself adds nothing on top. */
body.pin-cinematic .pin-siteplan + .elementor-element-4ffa8819 > .whd-pe-journey {
  padding-top: 0 !important;
}

/* Launch: neighbourhood now sits between journey and location. */

/* Location + FAQ are consecutive cream once the form sits at the bottom. */
body.pin-cinematic #location { padding-bottom: var(--pin-section-join) !important; }
body.pin-cinematic #location + .whd-faq { padding-top: var(--pin-section-join); }

/* Journey + Why The Pines are consecutive cream. The deck's own top pad
   clears the sticky header, so the journey does not add a second beat. */
body.pin-cinematic .whd-pe-journey {
  padding-bottom: 0 !important;
}
body.pin-cinematic #neighbourhood + #location {
  padding-top: var(--pin-section-join) !important;
}

/* FAQ + testimonials: same cream family. */
body.pin-cinematic .whd-faq { padding-bottom: var(--pin-section-join); }
body.pin-cinematic .whd-faq + .elementor-element-53e5397 {
  padding-top: var(--pin-section-join) !important;
}

/* Launch collection — Pasture Edge filter + 2-up cards. */
body.pin-cinematic:not(.pin-prelaunch) .pin-collection {
  box-sizing: border-box;
  padding-top: var(--pin-section-y);
  padding-left: var(--pin-pad-x, clamp(1.5rem, 5vw, 4.5rem));
  padding-right: var(--pin-pad-x, clamp(1.5rem, 5vw, 4.5rem));
  background: var(--surface-page, #FBF8F2);
}
.pin-collection__head {
  max-width: 40rem;
  margin: 0 0 2rem;
}
.pin-collection__head .whd-h2 { margin: 0.55rem 0 0.9rem; }
.pin-collection .peb-availability-bridge {
  margin-top: 2.25rem;
  margin-bottom: 0;
}

/* Launch “everything decided”: finish list drives the expand gallery. */
.pin-launch-decided .pin-interiors__inner {
  align-items: start;
  grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.5fr);
  gap: clamp(2rem, 4vw, 3.75rem);
}
.pin-launch-decided .pin-interiors__copy {
  position: relative;
  z-index: 2;
  padding-right: 0.5rem;
}
.pin-launch-decided .pin-gallery {
  position: sticky;
  top: 6.25rem;
  height: min(78vh, 44rem);
  min-height: 32rem;
  overflow: hidden;
}
@media (max-width: 800px) {
  .pin-launch-decided .pin-gallery {
    position: static;
    height: auto;
    min-height: 0;
  }
}
.pin-launch-decided .pin-decided__price { margin: 0.35rem 0 1.75rem; }
.pin-launch-decided .whd-h2 { margin-bottom: 1.1rem; }
.pin-launch-decided .pin-decided__spec-title { margin-bottom: 0.15rem; }
.pin-launch-decided .pin-interiors__copy .whd-btn,
.pin-launch-decided .pin-interiors__copy .pin-hero__cta { margin-top: 1.5rem; }
.pin-launch-decided .pin-finished__note {
  margin: 0.85rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted, #6B6A5F);
}

.pin-finished__grid--live {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pin-finished__grid--live li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--border-hairline, rgba(35, 35, 30, 0.16));
}
.pin-finished__grid--live button {
  appearance: none;
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  margin: 0;
  padding: 0.78rem 0.9rem;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: left;
  text-transform: none;
  color: var(--text-heading, #23231E) !important;
  -webkit-text-fill-color: var(--text-heading, #23231E) !important;
  cursor: pointer;
}
.pin-finished__grid--live button::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background: var(--whh-olive, #494F25);
  opacity: 0.28;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9.2 16.6 4.8 12.2l1.4-1.4 3 3 8.2-8.2 1.4 1.4z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9.2 16.6 4.8 12.2l1.4-1.4 3 3 8.2-8.2 1.4 1.4z'/></svg>") center / contain no-repeat;
}
.pin-finished__grid--live button.is-on,
.pin-finished__grid--live button:hover,
.pin-finished__grid--live button:focus-visible {
  background: var(--whh-olive, #494F25) !important;
  color: #FBF8F2 !important;
  -webkit-text-fill-color: #FBF8F2 !important;
}
.pin-finished__grid--live button.is-on::before,
.pin-finished__grid--live button:hover::before,
.pin-finished__grid--live button:focus-visible::before {
  background: #FBF8F2;
  opacity: 1;
}
.pin-finished__grid--live button:focus-visible {
  outline: 2px solid var(--whh-olive, #494F25);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Narrow viewports — keep custom Pines sections in one readable column.
   Launch interiors used a 2-col minmax(18rem, …) that beat the shared
   800px stack, so the photo accordion crushed to ~22px on phones.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .pin-launch-decided .pin-interiors__inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .pin-launch-decided .pin-interiors__copy {
    padding-right: 0;
    max-width: none;
  }
  .pin-launch-decided .pin-gallery {
    position: static;
    width: 100%;
    height: min(52vh, 28rem);
    min-height: 18rem;
  }
}

@media (max-width: 860px) {
  .pin-hero__inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .pin-hero__ctas {
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 22rem);
  }
  /* Hero CTAs only — do not stretch form .wh-cform-submit.pin-hero__cta */
  .pin-hero .pin-hero__cta,
  .pin-hero a.whd-btn.pin-hero__ghost,
  .pin-hero .pin-hero__ghost {
    width: 100%;
    justify-content: space-between;
  }
  .pin-hero__ctas .pin-hero__cta:only-child {
    max-width: 100%;
  }
  .pin-styles__stage,
  .pin-styles .pin-board,
  .pin-styles .pin-board--gallery {
    max-width: 100%;
    min-width: 0;
    overflow: visible;
  }
  .pin-styles .pin-look__photo {
    overflow: visible;
    max-width: 100%;
    min-width: 0;
  }
  body.pin-cinematic .pin-collection,
  body.pin-cinematic .pin-styles,
  body.pin-cinematic .pin-siteplan-soon,
  body.pin-cinematic .pin-interiors {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .pin-collection .peb-availability-bridge {
    width: 100%;
  }
}

@media (max-width: 800px) {
  .pin-launch-decided .pin-gallery {
    height: auto;
    min-height: 0;
  }
  #contact .pin-sarah {
    padding-bottom: 1.75rem;
  }
  body.pin-cinematic #contact.elementor-section,
  body.pin-cinematic section#contact.contact {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* Launch timeline has five steps; the inherited page-id-269 rule hid 4–5. */
body.pin-cinematic:not(.pin-prelaunch) .whd-pe-journey__grid > li:nth-child(n + 4) {
  display: flex !important;
}
@media (min-width: 1101px) {
  body.pin-cinematic:not(.pin-prelaunch) .whd-pe-journey__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    max-width: 68rem !important;
  }
  body.pin-cinematic:not(.pin-prelaunch) .whd-pe-journey__step::after {
    display: none !important;
  }
}
@media (max-width: 1100px) {
  body.pin-cinematic:not(.pin-prelaunch) .whd-pe-journey__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 38rem !important;
    gap: 1.75rem 1.25rem;
  }
  body.pin-cinematic:not(.pin-prelaunch) .whd-pe-journey__step::after {
    display: none !important;
  }
}
@media (max-width: 760px) {
  body.pin-cinematic:not(.pin-prelaunch) .whd-pe-journey__grid {
    grid-template-columns: 1fr !important;
    max-width: 22rem !important;
  }
  body.pin-cinematic .whd-pe-journey__head {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  body.pin-cinematic .whd-pe-journey__head .whd-h2 {
    max-width: 16ch;
  }
  body.pin-cinematic .whd-pe-journey__head .whd-body {
    max-width: 34rem;
  }
}

/* Community cards carry a lede + body, not a one-line caption. */
body.pin-cinematic .peb-deck--stack .peb-card::after {
  background:
    linear-gradient(180deg, rgba(20, 22, 17, 0) 18%, rgba(20, 22, 17, 0.74) 58%, rgba(16, 18, 13, 0.96) 100%),
    rgba(24, 26, 20, 0.22);
}
body.pin-cinematic .peb-deck--stack .peb-card__title {
  font-size: clamp(1.35rem, 2.1vw, 2.35rem);
}
body.pin-cinematic .peb-deck--stack .peb-card__lede {
  margin: 0.65rem auto 0;
  max-width: 34em;
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: clamp(0.78rem, 1.05vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-transform: none;
  text-wrap: balance; /* no orphan words on the two-line lede */
  color: rgba(244, 242, 236, 0.94);
}
body.pin-cinematic .peb-deck--stack .peb-card__copy {
  margin: 0.45rem auto 0;
  max-width: 38em;
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: clamp(0.72rem, 0.95vw, 0.86rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.5;
  text-transform: none;
  text-wrap: pretty;
  color: rgba(244, 242, 236, 0.82);
}


/* Walk + Transit score pair on the walkability card */
body.pin-cinematic .peb-deck--stack .peb-card__scores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin: 0.85rem 0 0;
}
body.pin-cinematic .peb-deck--stack .peb-card__scores .peb-card__score {
  margin: 0;
}

/* Walk Score strip on the walkability card — number + label, one ruled unit. */
body.pin-cinematic .peb-deck--stack .peb-card__score {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.9rem auto 0;
  padding: 0.45rem 0.9rem 0.45rem 0.55rem;
  border: 1px solid rgba(244, 242, 236, 0.28);
  background: rgba(16, 18, 13, 0.32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-align: left;
  text-transform: none;
  color: rgba(244, 242, 236, 0.94);
}
body.pin-cinematic .peb-deck--stack .peb-card__score-num {
  font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  padding-right: 0.8rem;
  border-right: 1px solid rgba(244, 242, 236, 0.28);
  font-variant-numeric: tabular-nums;
}
body.pin-cinematic .peb-deck--stack .peb-card__score-label {
  font-family: var(--font-sans, Montserrat, sans-serif);
  font-size: clamp(0.6rem, 0.8vw, 0.68rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.45;
  text-transform: uppercase;
}
body.pin-cinematic .peb-deck--stack .peb-card__score-label em {
  display: inline-block;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: rgba(244, 242, 236, 0.78);
}
body.pin-cinematic .peb-deck--stack .peb-card__score sup,
body.pin-cinematic .peb-deck--stack .peb-card__copy sup { font-size: 0.6em; line-height: 0; }

/* Pines pre-sale: no price-range field. Keep a hidden default for HubSpot. */
body.pin-prelaunch #contact .elementor-field-group-field_d236115 {
  display: none !important;
}
/* Lifestyle photos now live in the neighbourhood deck. */
body.pin-prelaunch #location .elementor-widget-image-carousel {
  display: none;
}

@media (max-width: 720px) {
  .pin-sarah__copy .whd-h2,
  #contact .pin-sarah .whd-h2 {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }
  body.pin-cinematic #contact .elementor-heading-title {
    font-size: clamp(1.65rem, 8vw, 2.35rem) !important;
    line-height: 1.15 !important;
  }
}

/* Feedback: finished spec list — plain ruled schedule, no checkmarks, no
   bold (no other list on the site is set bold). */
body.peb .pin-decided .pin-finished__grid li {
  grid-template-columns: minmax(0, 1fr);
  font-weight: 400;
}
body.peb .pin-decided .pin-finished__tick { display: none !important; }
body.peb #peb-start.pin-decided {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  row-gap: clamp(1.5rem, 2.5vw, 2.25rem);
}
body.peb .pin-decided .peb-split__copy .whd-lead { margin-bottom: 0; }

/* Export-11: site plan intro spacing + testimonial bullet gaps */
.pin-siteplan__intro {
  gap: 0.65rem;
}
.pin-siteplan__intro .whd-h2 { margin-bottom: 0.35rem; }
.pin-siteplan .wh-siteplan { margin-top: 0.5rem; }
body.whd-page .elementor-element-186256db .uc_material_bullets_row {
  margin-bottom: 0.65rem !important;
}

/* Finished spec list — plain weight, no bullets / checkmarks */
.pin-finished__grid {
  list-style: none;
  padding: 0;
}
.pin-finished__grid li,
.pin-finished__grid--live button {
  font-weight: 400;
}
.pin-finished__grid li::before {
  content: none !important;
}
.pin-finished__grid--live button {
  grid-template-columns: minmax(0, 1fr);
}
.pin-finished__grid--live button::before { display: none; }


.whd-faq details,
.whd-faq .whd-faq__item {
  margin-bottom: 0.65rem;
}
#wh-siteplan-the-pines {
  margin-top: 1.5rem;
}

/* Location section CTA — same compact arrow button as the hero, sits on
   paper so the shadow is lighter. Never full-width. */
body.peb .pin-location__cta { margin-top: 0.75rem; }
body.peb .pin-location__cta .pin-hero__cta {
  width: auto;
  box-shadow: 0 10px 24px rgba(20, 18, 14, 0.16);
}
body.peb .pin-location__cta .pin-hero__cta:focus-visible { outline-color: var(--whh-olive, #494F25); }

/* GSAP motion layer — neutralize CSS reveal when GSAP owns the tween */
html.pin-gsap .whd-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
html.pin-gsap .pin-hero__media {
  transform-origin: center center;
  will-change: transform;
}
html.pin-motion-static .whd-reveal {
  opacity: 1;
  transform: none;
}

/* Contact Send — match pin-hero__cta (not shared community gold #9a8c57) */
body.pin-cinematic #contact .elementor-field-type-submit {
  display: flex !important;
  justify-content: flex-start !important;
  margin-top: 0.85rem !important;
}
body.pin-cinematic #contact .elementor-field-type-submit .elementor-button,
body.pin-cinematic #contact .elementor-field-type-submit button[type="submit"],
body.pin-cinematic #contact .elementor-button-align-stretch .elementor-field-type-submit .elementor-button,
body.pin-cinematic #contact button.pin-hero__cta[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: flex-start !important;
  gap: 0.85rem !important;
  width: fit-content !important;
  max-width: fit-content !important;
  min-width: 0 !important;
  min-height: 3.25rem !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  padding: 0.45rem 0.45rem 0.45rem 1.2rem !important;
  margin: 0 !important;
  background: #FBF8F2 !important;
  background-image: none !important;
  background-color: #FBF8F2 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #23231e !important;
  -webkit-text-fill-color: #23231e !important;
  font-family: var(--font-sans, Montserrat, sans-serif) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  box-shadow: 0 10px 28px rgba(20, 18, 14, 0.32) !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, transform 140ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}
body.pin-cinematic #contact .elementor-field-type-submit .elementor-button:hover,
body.pin-cinematic #contact .elementor-field-type-submit button[type="submit"]:hover,
body.pin-cinematic #contact button.pin-hero__cta[type="submit"]:hover {
  background: #fff !important;
  background-color: #fff !important;
  color: #23231e !important;
  -webkit-text-fill-color: #23231e !important;
}
body.pin-cinematic #contact .elementor-field-type-submit .elementor-button:focus-visible,
body.pin-cinematic #contact button.pin-hero__cta[type="submit"]:focus-visible {
  outline: 2px solid #FBF8F2 !important;
  outline-offset: 3px !important;
}
body.pin-cinematic #contact .elementor-field-type-submit .elementor-button-content-wrapper,
body.pin-cinematic #contact .elementor-field-type-submit .elementor-button-text,
body.pin-cinematic #contact .elementor-field-type-submit .elementor-button span:not(.pin-hero__cta-icon) {
  color: #23231e !important;
  -webkit-text-fill-color: #23231e !important;
  background: transparent !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}
body.pin-cinematic #contact .elementor-field-type-submit .pin-hero__cta-icon,
body.pin-cinematic #contact button.pin-hero__cta .pin-hero__cta-icon,
body.pin-cinematic #contact .elementor-button .pin-hero__cta-icon {
  display: grid !important;
  place-items: center !important;
  width: 2.35rem !important;
  height: 2.35rem !important;
  flex: 0 0 auto !important;
  background: #494F25 !important;
  background-color: #494F25 !important;
  background-image: none !important;
  color: #FBF8F2 !important;
  -webkit-text-fill-color: #FBF8F2 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.pin-cinematic #contact .elementor-field-type-submit .pin-hero__cta-icon svg,
body.pin-cinematic #contact button.pin-hero__cta .pin-hero__cta-icon svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  stroke: #FBF8F2 !important;
  color: #FBF8F2 !important;
}
body.pin-cinematic #contact .elementor-field-type-submit .pin-hero__cta-icon svg path,
body.pin-cinematic #contact button.pin-hero__cta .pin-hero__cta-icon svg path {
  stroke: #FBF8F2 !important;
}

/* Press feedback — interface heard you (Emil: 100–160ms, scale 0.95–0.98) */
body.pin-cinematic .pin-hero__cta,
body.pin-cinematic .pin-hero__ghost,
body.pin-cinematic a.peb-pill,
body.pin-cinematic .wh-siteplan__chip,
body.pin-cinematic .whd-pe-journey__title a {
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
body.pin-cinematic .pin-hero__cta:active,
body.pin-cinematic .pin-hero__ghost:active,
body.pin-cinematic a.peb-pill:active,
body.pin-cinematic .wh-siteplan__chip:active {
  transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
  body.pin-cinematic .pin-hero__cta,
  body.pin-cinematic .pin-hero__ghost,
  body.pin-cinematic a.peb-pill,
  body.pin-cinematic .wh-siteplan__chip,
  body.pin-cinematic .whd-pe-journey__title a {
    transition: none;
  }
  body.pin-cinematic .pin-hero__cta:active,
  body.pin-cinematic .pin-hero__ghost:active,
  body.pin-cinematic a.peb-pill:active,
  body.pin-cinematic .wh-siteplan__chip:active {
    transform: none;
  }
}