/* Park27 — shared section patterns used across home and interior */

/* Decorative diamond divider — colored via currentColor (parent sets `color`) */
.park27-divider {
  display: inline-block;
  width: 250px;
  height: 57px;
  max-width: 100%;
  background-color: currentColor;
  -webkit-mask: url("../img/divider.svg") center / contain no-repeat;
  mask: url("../img/divider.svg") center / contain no-repeat;
}

/* "Park 27" stencil wordmark — rendered from the Figma logo.svg via mask
   so the color follows the parent's `color`. The text content is preserved
   for screen readers but visually replaced. */
.park27-wordmark {
  display: inline-block;
  width: clamp(180px, 14vw, 260px);
  aspect-ratio: 158 / 45;
  background-color: currentColor;
  -webkit-mask: url("../img/logo.svg") center / contain no-repeat;
  mask: url("../img/logo.svg") center / contain no-repeat;
  font-size: 0;
  color: inherit;
  vertical-align: middle;
  white-space: nowrap;
  text-indent: 200%;
  overflow: hidden;
}
.park27-wordmark--inline {
  width: 99px;
  vertical-align: -0.18em;
  margin: 0 0.15em;
}

/* Cream rectangular frame around hero/team/property photos with diamond accent */
.park27-photo-frame {
  position: relative;
  padding: 24px;
  border: 4px solid var(--bg);
  display: inline-block;
  max-width: 100%;
}
.park27-photo-frame > img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.park27-photo-frame::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -17px;
  transform: translateX(-50%) rotate(45deg);
  width: 30px;
  height: 30px;
  background: var(--bg);
}
.park27-photo-frame--green {
  border-color: var(--bg);
}
.park27-photo-frame--green::after {
  background: var(--bg);
}

/* Photo frame with the divider star on the bottom edge.
   Use standalone (does NOT require the base .park27-photo-frame class):
     <div class="park27-photo-frame--star"><img></div>
   The image fills the whole container; pseudo-elements draw the inset frame.
   Aspect ratio is overridable via the --frame-ratio CSS variable for rectangular photos:
     <div class="park27-photo-frame--star" style="--frame-ratio: 16/10"> */
.park27-photo-frame--star {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: 0;
  overflow: visible;
  aspect-ratio: var(--frame-ratio, 1 / 1);
}

.park27-photo-frame--star > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Top, left, right cream borders. Stops where the bottom line is, so the
   side borders meet the horizontal line at the same y. */
.park27-photo-frame--star::before {
  content: "";
  position: absolute;
  inset: var(--frame-inset-v, 40px) var(--frame-inset-h, 40px);
  border: var(--frame-border, 7px) solid var(--bg);
  border-bottom: 0;
  width: auto;
  height: auto;
  background: none;
  transform: none;
  pointer-events: none;
  z-index: 2;
}

/* Bottom edge: star centered (natural size) + a 5px-thick cream line
   extending to the left/right corners. Bar sits on the same y as ::before's
   bottom inset (60px from container bottom = 80px inset → half of 40px bar). */
.park27-photo-frame--star::after {
  content: "";
  position: absolute;
  left: var(--frame-inset-h, 45px);
  right: var(--frame-inset-h, 45px);
  bottom: var(--frame-bottom, 22px);
  height: var(--frame-star-h, 43px);
  background:
    url("../img/star.svg") center / auto 100% no-repeat,
    linear-gradient(
        to right,
        var(--bg) calc(50% - 12px),
        transparent calc(50% - 12px),
        transparent calc(50% + 12px),
        var(--bg) calc(50% + 12px)
      )
      0 50% / 100% var(--frame-bar-h, 7px) no-repeat;
  pointer-events: none;
  z-index: 3;
}

/* Scale frame insets down at narrower viewports — the 80/50 desktop values
   look disproportionate when the photo itself is smaller. */
@media (max-width: 1399px) {
  .park27-photo-frame--star {
    --frame-inset-v: 50px;
    --frame-inset-h: 32px;
    --frame-border: 6px;
    --frame-bar-h: 5px;
    --frame-star-h: 34px;
    --frame-bottom: 36px;
  }
}

@media (max-width: 767px) {
  .park27-photo-frame--star {
    --frame-inset-v: 28px;
    --frame-inset-h: 20px;
    --frame-border: 4px;
    --frame-bar-h: 4px;
    --frame-star-h: 26px;
    --frame-bottom: 22px;
  }
}

/* Reusable horizontal divider — line | star | line, all themed via currentColor.
   Markup:
     <span class="park27-divider-star"><i class="park27-divider-star__icon"></i></span>
   The icon uses the star SVG as a CSS mask so background-color (= currentColor)
   drives the actual fill, allowing per-page recoloring. */
.park27-divider-star {
  display: flex;
  align-items: center;
  flex: 1;
  height: 50px;
  color: var(--bg);
}
.park27-divider-star::before,
.park27-divider-star::after {
  content: "";
  flex: 1;
  height: 5px;
  background: currentColor;
}
.park27-divider-star__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 50px;
  margin: 0 -6px;
  background-color: currentColor;
  -webkit-mask: url("../img/star.svg") center / contain no-repeat;
  mask: url("../img/star.svg") center / contain no-repeat;
}

/* Decorative section-border band — uses border-grade.svg as a mask so the
   color is controlled in CSS (parent sets `--pattern-color` or the variant). */
.park27-pattern-band {
  --pattern-color: var(--accent-taupe);
  display: block;
  width: 100%;
  height: 120px;
  background-color: var(--pattern-color);
  -webkit-mask: url("../img/border-grade.svg") center / auto 100% repeat-x;
  mask: url("../img/border-grade.svg") center / auto 100% repeat-x;
}
.park27-pattern-band--green {
  --pattern-color: rgba(var(--green-dark-rgb), 0.55);
}
.park27-pattern-band--maroon {
  --pattern-color: rgba(var(--ink-rgb), 0.3);
}

/* Mobile: photo-frame--star insets are too tight at desktop values
   (80px/50px), shrink so the inner border doesn't strangle the image. */
@media (max-width: 991px) {
  .park27-photo-frame--star::before {
    inset: 30px 20px 30px 20px;
    border-width: 4px;
  }
  .park27-photo-frame--star::after {
    left: 20px;
    right: 20px;
    bottom: 14px;
    height: 32px;
    background:
      url("../img/star.svg") center / auto 100% no-repeat,
      linear-gradient(
          to right,
          var(--bg) calc(50% - 9px),
          transparent calc(50% - 9px),
          transparent calc(50% + 9px),
          var(--bg) calc(50% + 9px)
        )
        0 50% / 100% 4px no-repeat;
  }
}

/* =========================================================
   ABOUT
   ========================================================= */

.about {
  background: var(--bg);
  padding: 100px 0 54px;
  position: sticky;
  top: var(--header-h);
}

.about h2 {
  color: var(--ink);
  margin: 0 0 33px;
}
.about-inner {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: 200px;
  align-items: flex-start;
}

.about-media {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.about-media .park27-photo-frame {
  width: 100%;
  max-width: 760px;
}
.about-content {
  position: relative;
  z-index: 2;
}
.about-content p {
  color: var(--ink);
  margin: 0 0 36px;
}

.about > .park27-pattern-band {
  position: absolute;
  left: 0;
  right: 0;
  height: 140px;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

/* =========================================================
   CONTACT BANNER
   ========================================================= */

/* Sticky contact banner — themable via --banner-* custom properties.
   Defaults match the home page (maroon bg / cream accent). */
.banner-contact {
  --banner-bg: var(--brand);
  --banner-fg: var(--bg);
  --banner-accent: var(--green-dark);
  --banner-accent-fg: var(--bg);

  background: var(--banner-bg);
  color: var(--banner-fg);
  padding: 145px 0;
  position: sticky;
  top: var(--header-h);
}

.banner-contact address {
  color: var(--banner-fg);
  font-style: normal;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.15vw, 1.25rem);
  font-weight: 400;
  line-height: 1.23;
}

.banner-contact-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 120px;
  margin: 0 auto;
}

.banner-contact-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 43px;
  color: var(--banner-fg);
}

.banner-contact-left .park27-wordmark {
  color: var(--banner-fg);
  width: clamp(220px, 16vw, 300px);
}
.banner-contact-left .park27-divider {
  color: var(--banner-fg);
  width: 240px;
  height: 50px;
}

.banner-contact-right {
  display: flex;
  justify-content: flex-end;
}
.banner-contact-right .btn-layout {
  min-width: 280px;
}

.banner-contact .btn-layout.hollow-light {
  /* !important: base.css a.btn-layout colors carry !important and would
     override the banner token (e.g. green label on the wine banner). */
  color: var(--banner-fg) !important;
  border-color: var(--banner-fg);
}
.banner-contact .btn-layout.hollow-light:hover,
.banner-contact .btn-layout.hollow-light:focus-visible {
  background: var(--banner-accent);
  border-color: var(--banner-accent);
  /* !important: outranks base.css a.btn-layout:hover color, which otherwise
     paints the label the same as the hover bg (invisible text on banner-buy). */
  color: var(--banner-accent-fg) !important;
}

/* =========================================================
   PROPERTIES
   ========================================================= */

.properties {
  background: var(--bg);
  padding: 80px 0 var(--section-pad);
  position: relative;
  z-index: 2;
}

.properties-tabs {
  display: flex;
  justify-content: center;
  gap: 83px;
  margin-bottom: 80px;
}

.tab {
  background: none;
  border: none;
  padding: 14px 56px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition:
    background 0.2s,
    color 0.2s;
}

.tab-label {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  font-weight: 400;
  line-height: 1.23;
  color: var(--green);
}

.tab-main {
  font-family: var(--sans);
  font-size: clamp(1.125rem, 1.65vw, 1.8125rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}

.tab.is-active {
  background: var(--green-dark);
}
.tab.is-active .tab-label {
  color: var(--bg-blue);
}
.tab.is-active .tab-main {
  color: var(--bg-blue);
}

.properties-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px 30px;
  margin-bottom: 83px;
}

.property-card {
  background: transparent;
  overflow: visible;
  position: relative;
}
.property-card[hidden] {
  display: none;
}
.property-card__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}
.property-card__link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}

.property-card .img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 799 / 637;
  margin-bottom: 29px;
}
.property-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.property-card:hover .img-wrap img {
  transform: scale(1.03);
}

/* Hover corner half-circles — same SVG as hero, 1/3 larger */
.property-card .img-wrap::before,
.property-card .img-wrap::after,
.property-card .img-wrap > .corner {
  content: "";
  position: absolute;
  width: clamp(127px, 14.7vw, 247px);
  aspect-ratio: 202 / 179;
  background: url("../img/half-circle.svg") center / contain no-repeat;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}
.property-card .img-wrap::before {
  top: 0;
  right: 0;
}
.property-card .img-wrap::after {
  bottom: 0;
  left: 0;
  transform: rotate(180deg);
}
.property-card .img-wrap > .corner.tl {
  top: 0;
  left: 0;
  transform: scaleX(-1);
}
.property-card .img-wrap > .corner.br {
  bottom: 0;
  right: 0;
  transform: scaleY(-1);
}
.property-card:hover .img-wrap::before,
.property-card:hover .img-wrap::after,
.property-card:hover .img-wrap > .corner {
  opacity: 1;
}

.property-card .info {
  padding: 0 4px;
}
.property-card .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.property-card .price {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(2.25rem, 2.86vw, 3.125rem);
  font-weight: 300;
  line-height: 1.233;
  letter-spacing: 0;
}

.property-card .location {
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.125rem, 1.37vw, 1.5rem);
  font-weight: 400;
  line-height: 1.21;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.property-card .location .cnm-icon {
  color: var(--green);
  font-size: 24px;
}

.property-card .stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.property-card .stats li {
  min-height: 49px;
  padding: 10px 18px;
  border-radius: 47px;
  gap: 10px;
  background: rgba(var(--green-rgb), 0.09);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.125rem, 1.37vw, 1.5rem);
  font-weight: 400;
  line-height: 1.21;
  display: inline-flex;
  align-items: center;
}

.property-card .stats .cnm-icon {
  color: var(--green);
  font-size: 24px;
}

.properties-footer {
  display: flex;
  justify-content: center;
}

/* =========================================================
   IMPRESS CAROUSEL (IDX Broker [impress_carousel] shortcode)
   Mirrors the .property-card visual above onto the widget's
   own markup without touching the plugin HTML. Plugin base
   styles live in idx-broker-platinum/assets/css/widgets/
   impress-carousel.min.css and load AFTER this inline sheet,
   so selectors below are anchored on .impress-carousel-property
   to out-rank them.
   ========================================================= */

/* Side padding is the container alignment minus the 15px item side
   margins below, so edge cards sit flush with the container while owl
   (which measures the content width at init) clips the next item
   exactly at the stage edge — no sliver. */
.impress-carousel.impress-carousel-shortcode {
  background: var(--bg);
  /* 80px top mirrors .properties; see the side-padding note above. */
  padding: 80px calc(max(var(--gutter), (100% - var(--container)) / 2) - 15px)
    var(--section-pad);
}

.impress-carousel.owl-carousel .owl-item .impress-carousel-property {
  margin: 0 15px;
}

/* Grid lets price (inside the photo anchor) and address (inside its
   own anchor) share one row, like .property-card .top — the anchors
   become display: contents so their children are the grid items. */
.impress-carousel .impress-carousel-property {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  text-align: left;
}

.impress-carousel .impress-carousel-property > a {
  display: contents;
}

.impress-carousel .impress-carousel-property img {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 799 / 637;
  object-fit: cover;
  margin: 0 0 29px;
}

/* Hover corner half-circles — same SVG + size as .property-card
   (carousel shows 2 items per view, so cards match the 2-up grid).
   Each pseudo is an image-sized overlay (width 100%, image aspect)
   holding one corner as a background; the photo anchor is
   display: contents but still generates pseudo-elements. */
.impress-carousel .impress-carousel-property::before,
.impress-carousel .impress-carousel-property::after,
.impress-carousel .impress-carousel-photo::before,
.impress-carousel .impress-carousel-photo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 799 / 637;
  background: url("../img/half-circle.svg") top right /
    clamp(127px, 14.7vw, 247px) no-repeat;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}
.impress-carousel .impress-carousel-property::before {
  transform: scaleX(-1);
} /* top-left */
.impress-carousel .impress-carousel-property::after {
  transform: scaleY(-1);
} /* bottom-right */
.impress-carousel .impress-carousel-photo::after {
  transform: rotate(180deg);
} /* bottom-left */
.impress-carousel .impress-carousel-property:hover::before,
.impress-carousel .impress-carousel-property:hover::after,
.impress-carousel
  .impress-carousel-property:hover
  .impress-carousel-photo::before,
.impress-carousel
  .impress-carousel-property:hover
  .impress-carousel-photo::after {
  opacity: 1;
}

.impress-carousel .impress-carousel-property .impress-price {
  grid-column: 1;
  grid-row: 2;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(2.25rem, 2.86vw, 3.125rem);
  font-weight: 300;
  line-height: 1.233;
  margin: 0;
}

/* Address ≙ .property-card .location (green pin + sans text). */
.impress-carousel .impress-carousel-property .impress-address {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.125rem, 1.37vw, 1.5rem);
  font-weight: 400;
  line-height: 1.21;
  text-align: right;
}
.impress-carousel .impress-carousel-property .impress-street {
  display: inline;
}
.impress-carousel .impress-carousel-property .impress-address::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  vertical-align: -0.3em;
  background-color: var(--green);
  -webkit-mask: url("../img/icons/elocation-icon.svg") center / contain
    no-repeat;
  mask: url("../img/icons/elocation-icon.svg") center / contain no-repeat;
}

/* Beds / baths / acres ≙ .property-card .stats pills. */
.impress-carousel .impress-carousel-property .impress-beds-baths-sqft {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 20px 0 0;
}
.impress-carousel .impress-carousel-property .impress-beds-baths-sqft span {
  margin: 0;
  min-height: 49px;
  padding: 10px 18px;
  border-radius: 47px;
  background: rgba(var(--green-rgb), 0.09);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.125rem, 1.37vw, 1.5rem);
  font-weight: 400;
  line-height: 1.21;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.impress-carousel
  .impress-carousel-property
  .impress-beds-baths-sqft
  span::before {
  content: "";
  width: 24px;
  height: 24px;
  flex: none;
  background-color: var(--green);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.impress-carousel .impress-carousel-property .impress-beds::before {
  -webkit-mask-image: url("../img/icons/ebed-icon.svg");
  mask-image: url("../img/icons/ebed-icon.svg");
}
.impress-carousel .impress-carousel-property .impress-baths::before {
  -webkit-mask-image: url("../img/icons/ebath-icon.svg");
  mask-image: url("../img/icons/ebath-icon.svg");
}
.impress-carousel .impress-carousel-property .impress-acres::before {
  -webkit-mask-image: url("../img/icons/eacres-icon.svg");
  mask-image: url("../img/icons/eacres-icon.svg");
}

/* Owl prev/next — theme colors instead of the plugin greys. */
.impress-carousel.owl-carousel .owl-nav.owl-controls button.owl-prev,
.impress-carousel.owl-carousel .owl-nav.owl-controls button.owl-next {
  background: rgba(var(--green-rgb), 0.09);
  color: var(--green);
}

/* "View Properties" CTA below the carousel (an html block in the page
   content reusing .properties-footer). Mirrors the grid→footer spacing
   of the original section (83px) and carries the same background. */
.impress-carousel.impress-carousel-shortcode:has(+ .properties-footer) {
  padding-bottom: 83px;
}
.impress-carousel-shortcode + .properties-footer {
  background: var(--bg);
  margin: 0;
  padding: 0 var(--gutter) var(--section-pad);
}

@media (max-width: 991px) {
  /* Mirrors the .property-card pill tweaks in the 991px block below. */
  .impress-carousel .impress-carousel-property .impress-beds-baths-sqft {
    gap: 10px;
  }
  .impress-carousel .impress-carousel-property .impress-beds-baths-sqft span {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 1rem;
  }
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */

.testimonials {
  background: var(--green);
  color: var(--white);
  padding: 129px 0;
  overflow-x: clip;
}

.testimonials h2 {
  color: var(--bg);
  margin: 0;
  text-align: left;
  letter-spacing: -0.01em;
}
.testimonials-header {
  position: relative;
  margin-bottom: 103px;
}

.testimonials-ornament {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 70px;
  height: 70px;
  background: url("../img/icons/confidence-icon.svg") center / contain no-repeat;
}

/* Pattern band breaks out of the container to span full viewport width,
   keeping the same vertical rhythm as the title gap above */
.testimonials .park27-pattern-band {
  width: 100vw;
  height: 150px;
  margin-left: calc(50% - 50vw);
  margin-bottom: 103px;
}

.testimonials .park27-pattern-band--green {
  --pattern-color: rgba(var(--green-dark-rgb), 0.85);
}

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

.testimonial {
  margin: 0;
}

.testimonial p {
  /* uses .t-quote utility on the element */
  color: rgba(var(--bg-rgb), 0.85);
  margin: 0 0 28px;
}

.testimonial cite {
  /* h3 styled by base — but cite is inline, so keep h3-equivalent inline */
  font-family: var(--sans);
  font-size: clamp(1.5rem, 2.25vw, 2.4375rem);
  font-weight: 400;
  color: var(--bg);
  font-style: normal;
  letter-spacing: -0.01em;
}

/* =========================================================
   SELLING CTA
   ========================================================= */

/* Sticky CTA banner — colors are themable via custom properties.
   Defaults match the home page (blue bg / green accent). Pages override
   the four --banner-* vars to repaint the banner without rewriting rules. */
.banner-sell {
  --banner-bg: var(--bg-blue);
  --banner-fg: var(--green);
  --banner-accent: var(--green);
  --banner-accent-fg: var(--white);

  background: var(--banner-bg);
  padding: 145px 0;
  position: sticky;
  top: var(--header-h);
}

.banner-sell h2 {
  color: var(--banner-fg);
  margin: 0;
  letter-spacing: -0.01em;
}
.banner-sell-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 150px;
  margin: 0 auto;
}
.banner-sell-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 33px;
}
.banner-sell-right .park27-divider {
  color: var(--banner-fg);
  width: 220px;
  height: 50px;
}

.banner-sell .btn-layout.hollow-green {
  /* !important: base.css a.btn-layout colors carry !important and would
     override the banner token (e.g. green label on the wine banner). */
  color: var(--banner-fg) !important;
  border-color: var(--banner-fg);
  background: transparent;
}
.banner-sell .btn-layout.hollow-green:hover,
.banner-sell .btn-layout.hollow-green:focus-visible {
  background: var(--banner-accent);
  border-color: var(--banner-accent);
  /* !important: outranks base.css a.btn-layout:hover color, which otherwise
     paints the label the same as the hover bg (invisible text on banner-buy). */
  color: var(--banner-accent-fg) !important;
}

/* =========================================================
   SITE-WIDE BOTTOM TRIO — banner-sell → contact-form → testimonials
   (client standard 2026-06-30). Adjacency-based so it works in BOTH
   classic templates and block-built pages (where sections are siblings
   inside .wp-block-group__inner-container and child selectors on the
   stack wrapper break). Three effects, all keyed on adjacency:
   1. A sell banner directly followed by the form turns WINE (the default
      blue banner next to the blue form section reads as one blob).
   2. The reveal chain: banner pins (z1), form pins over it (z2),
      testimonials scrolls over the pinned form (z3).
   Pages under .page-default keep their static reset (interior.css loads
   later and wins ties) — they never had the reveal.
   ========================================================= */
/* The form section never pins, anywhere: pinned, a form taller than the
   viewport hides its own submit button. Sweep 2026-07-07 caught pages
   without a trailing testimonials (our-specialists, for-sellers, worth)
   where the adjacency no-pin rule below didn't reach. */
.contact-form {
  position: relative !important;
  top: auto !important;
}

/* News page: its sell banner sits away from the form, so the adjacency rule
   above never fires — the client wants it wine there regardless. */
.page-news .banner-sell {
  --banner-bg: var(--brand);
  --banner-fg: var(--bg);
  --banner-accent: var(--green);
  --banner-accent-fg: var(--bg);
}

/* Color: any sell banner immediately followed by the form turns wine. */
.banner-sell:has(+ .contact-form) {
  --banner-bg: var(--brand);
  --banner-fg: var(--bg);
  --banner-accent: var(--green);
  --banner-accent-fg: var(--bg);
}
/* Reveal: ONLY when the trio closes its container (testimonials is the last
   child). A sticky form mid-page would pin at the header and cover every
   section after it (seen on the home page). !important: several page sheets
   (property.css, careers, page-default reset) pin these sections static,
   which kills the reveal; the IDX wrapper rules (body-scoped, higher
   specificity) still win where they must. */
.banner-sell:has(+ .contact-form + .testimonials:last-child) {
  position: sticky !important;
  top: var(--header-h) !important;
  z-index: 1 !important;
}
.contact-form:has(+ .testimonials:last-child) {
  /* The form never pins: pinned, a form taller than the viewport hides its
     submit button (unreachable). It scrolls in full, painting over the
     pinned banner — the reveal feel stays, usability wins. */
  position: relative !important;
  top: auto !important;
  z-index: 2 !important;
}
.contact-form + .testimonials:last-child {
  position: relative !important;
  z-index: 3 !important;
}
/* Home opts out of the form/testimonials reveal (client 2026-07-07): with the
   home's custom section order the pinned form let the testimonials ride over
   it. Both scroll normally there; every other page keeps the reveal. */
.page-home .contact-form:has(+ .testimonials),
.page-home .contact-form + .testimonials,
.page-home .media-content {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

/* IDX pages: paint the sell banner in the home .banner-contact red scheme
   (#69151A bg + cream heading/divider/button). On IDX the banner is pinned by
   the dashboard CSS (idx-broker-custom-css.css) with !important, so these
   overrides carry !important + body-scoped specificity to win. The rest of the
   site keeps the default blue banner-sell. */
body.page-template-idx-wrapper .banner-sell {
  background: var(--brand) !important;
  /* Tuck the sticky banner flush under the 124px header. The IDX dashboard
     pins it at --idx-header-clearance (132px), leaving an 8px band above it
     where the blue contact-form/stack background showed as a line. */
  top: calc(var(--header-h) - 1px) !important;
}
body.page-template-idx-wrapper .banner-sell h2 {
  color: var(--bg) !important;
}
body.page-template-idx-wrapper .banner-sell-right .park27-divider {
  color: var(--bg) !important;
}
body.page-template-idx-wrapper .banner-sell .btn-layout.hollow-green {
  color: var(--bg) !important;
  border-color: var(--bg) !important;
}
body.page-template-idx-wrapper .banner-sell .btn-layout.hollow-green:hover,
body.page-template-idx-wrapper .banner-sell .btn-layout.hollow-green:focus-visible {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: var(--bg) !important;
}

/* =========================================================
   MEDIA CONTENT (Philosophy)
   ========================================================= */

.media-content {
  background: var(--bg);
  color: var(--bg);
  overflow: hidden;
  position: sticky;
  top: var(--header-h);
}

.media-content-inner {
  display: grid;
  grid-template-columns: minmax(360px, 36%) 1fr;
  grid-template-rows: min(800px, calc(100svh - var(--header-h)));
  align-items: stretch;
  height: min(800px, calc(100svh - var(--header-h)));
}

.media-content-text {
  background: var(--brand);
  color: var(--bg);
  padding: 100px 64px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 70px;
  position: relative;
}

.media-content-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -13px;
  height: 150px;
  background-color: rgba(var(--bg-rgb), 0.046);
  -webkit-mask: url("../img/border-grade.svg") center bottom / auto 100%
    repeat-x;
  mask: url("../img/border-grade.svg") center bottom / auto 100% repeat-x;
  pointer-events: none;
}

.media-content-text p {
  color: var(--bg);
  margin: 0;
}
.media-content-text .park27-wordmark {
  color: var(--bg-blue);
}
.media-content-text a {
  max-width: 60%;
}
.media-content-media {
  position: relative;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.media-content-media,
.media-content-text {
  min-height: 0;
}

/* Desktop only: frame fills the 800px row height (overrides aspect-ratio so
   the photo isn't dictated by the inline --frame-ratio at wide viewports).
   Below 992px the grid row is auto-height, so height:100% would collapse — keep
   the natural aspect-ratio there. */
@media (min-width: 992px) {
  .media-content-media .park27-photo-frame--star {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* =========================================================
   BUYING CTA
   ========================================================= */

/* Sticky buy CTA — themable via --banner-* custom properties.
   Defaults match the home page (green bg / cream accent). */
.banner-buy {
  --banner-bg: var(--green);
  --banner-fg: var(--bg);
  --banner-accent: var(--bg);
  --banner-accent-fg: var(--green-dark);

  background: var(--banner-bg);
  padding: 140px 0;
  position: sticky;
  top: var(--header-h);
}

.banner-buy h2 {
  color: var(--banner-fg);
  margin: 0;
  letter-spacing: -0.01em;
}
.banner-buy-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 150px;
  margin: 0 auto;
}
.banner-buy-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 33px;
}
.banner-buy-right .park27-divider {
  color: var(--banner-fg);
  width: 220px;
  height: 50px;
}

.banner-buy .btn-layout.hollow-light {
  /* !important: base.css a.btn-layout colors carry !important and would
     override the banner token (e.g. green label on the wine banner). */
  color: var(--banner-fg) !important;
  border-color: var(--banner-fg);
}
.banner-buy .btn-layout.hollow-light:hover,
.banner-buy .btn-layout.hollow-light:focus-visible {
  background: var(--banner-accent);
  border-color: var(--banner-accent);
  /* !important: outranks base.css a.btn-layout:hover color, which otherwise
     paints the label the same as the hover bg (invisible text on banner-buy). */
  color: var(--banner-accent-fg) !important;
}

/* =========================================================
   CORE BELIEFS — periwinkle bg + green text default.
   Reused by about-us, for-sellers, and (with color overrides) for-buyers.
   ========================================================= */
.about-beliefs {
  background: var(--bg-blue);
  color: var(--green);
  padding: 100px 0;
}

.about-beliefs-inner {
  display: flex;
  align-items: center;
  gap: clamp(40px, 12vw, 200px);
}

.about-beliefs-label {
  flex: 0 0 auto;
}

.about-beliefs-label h2 {
  font-family: var(--sans);
  font-size: clamp(28px, 3.6vw, 50px);
  font-weight: 400;
  line-height: 1.21;
  color: var(--green);
  margin: 0;
}

.about-beliefs-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 70px) clamp(40px, 7vw, 100px);
}

.about-belief {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--green);
}

.about-belief h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--green);
  margin: 0 0 clamp(16px, 2vw, 30px);
}

.about-belief-icon {
  display: inline-flex;
  width: clamp(22px, 2.4vw, 33px);
  height: clamp(22px, 2.4vw, 33px);
  color: var(--green);
  flex: 0 0 auto;
}

.about-belief-icon .cnm-icon {
  width: 100%;
  height: 100%;
  background-color: currentColor;
}

.about-belief p {
  font-family: var(--sans);
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 300;
  line-height: normal;
  color: var(--green);
  margin: 0;
}

@media (max-width: 991px) {
  .about-beliefs {
    padding: 60px 0;
  }
  .about-beliefs-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
}

@media (max-width: 767px) {
  .about-beliefs {
    padding: 48px 0;
  }
  .about-beliefs-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 575px) {
  .about-beliefs {
    padding: 40px 0;
  }
}

/* =========================================================
   CONTACT FORM
   ========================================================= */

.contact-form {
  background: var(--bg-blue);
  padding: var(--section-pad) 0;
  position: sticky;
  top: var(--header-h);
}

.contact-form h2 {
  color: var(--green);
  margin: 0;
}

.contact-form-inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.contact-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.contact-form-header .park27-wordmark {
  color: var(--green);
  font-size: clamp(2.25rem, 4.5vw, 4rem);
}

/* Gravity Forms (Orbital theme) — line-style inputs + full-width green submit */
.contact-form .gform_wrapper {
  --gf-color-primary: var(--green);
  --gf-color-primary-rgb: 16, 66, 37;
  --gf-color-primary-darker: var(--green-dark);
  --gf-color-primary-contrast: var(--bg);
  --gf-color-in-ctrl: transparent;
  --gf-color-in-ctrl-darker: transparent;
  --gf-color-in-ctrl-contrast: var(--green-dark);
  --gf-color-out-ctrl-light: var(--green);
  --gf-color-out-ctrl-light-darker: var(--green-dark);
  --gf-color-out-ctrl-dark: var(--green);
  --gf-color-out-ctrl-dark-darker: var(--green-dark);
  --gf-radius: 0;
}
.contact-form .gform_wrapper .gform_fields {
  row-gap: 28px !important;
  column-gap: 32px !important;
}
.contact-form .gform_wrapper .gfield_label {
  font-family: var(--sans) !important;
  font-size: clamp(1rem, 1.15vw, 1.25rem) !important;
  font-weight: 300 !important;
  line-height: 1.21 !important;
  color: var(--green) !important;
  margin-bottom: 2px !important;
}
.contact-form .gform_wrapper .ginput_container input[type="text"],
.contact-form .gform_wrapper .ginput_container input[type="email"],
.contact-form .gform_wrapper .ginput_container input[type="tel"],
.contact-form .gform_wrapper .ginput_container input[type="url"],
.contact-form .gform_wrapper .ginput_container input[type="number"],
.contact-form .gform_wrapper .ginput_container select,
.contact-form .gform_wrapper .ginput_container textarea {
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--green) !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
  font-family: var(--sans) !important;
  font-size: clamp(1rem, 1.15vw, 1.25rem) !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  color: var(--green-dark) !important;
  box-shadow: none !important;
  outline: none !important;
  min-height: auto !important;
  height: auto !important;
}
.contact-form .gform_wrapper .ginput_container input:focus,
.contact-form .gform_wrapper .ginput_container select:focus,
.contact-form .gform_wrapper .ginput_container textarea:focus {
  border-bottom-width: 2px !important;
}
.contact-form .gform_wrapper .ginput_container select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M0 0 L6 8 L12 0 Z' fill='%23104225'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 4px center !important;
  background-size: 12px 8px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 6px 24px 6px 0 !important;
}
.contact-form .gform_wrapper .ginput_container textarea {
  min-height: 0 !important;
  height: 4.5em !important;
  resize: vertical !important;
}
.contact-form .gform_wrapper .gfield--type-consent {
  margin-top: -4px !important;
}
.contact-form .gform_wrapper .gfield--type-consent .gfield_label {
  margin-bottom: 14px !important;
}
.contact-form .gform_wrapper .gfield--type-consent .ginput_container_consent {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.contact-form .gform_wrapper .gfield--type-consent input[type="checkbox"] {
  flex: 0 0 auto !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  accent-color: var(--green) !important;
}
.contact-form .gform_wrapper .gfield--type-consent .gfield_consent_label {
  margin: 0 !important;
  font-family: var(--sans) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: var(--green-dark) !important;
}
.contact-form .gform_wrapper .gfield--type-consent .gfield_consent_description {
  margin-top: 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  color: var(--green-dark) !important;
  max-height: none !important;
  overflow: visible !important;
}
.contact-form
  .gform_wrapper
  .gfield--type-consent
  .gfield_consent_description
  a {
  color: var(--green-dark) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}
.contact-form
  .gform_wrapper
  .gfield--type-consent
  .gfield_consent_description
  a:hover,
.contact-form
  .gform_wrapper
  .gfield--type-consent
  .gfield_consent_description
  a:focus {
  color: var(--green) !important;
}
.contact-form .gform_wrapper input::placeholder,
.contact-form .gform_wrapper textarea::placeholder {
  color: var(--green) !important;
  opacity: 0.6 !important;
}
.contact-form .gform_wrapper .gform_footer {
  margin-top: 32px !important;
  padding: 0 !important;
  display: block !important;
}
.contact-form .gform_wrapper .gform_footer input[type="submit"],
.contact-form .gform_wrapper .gform_footer button[type="submit"] {
  width: 100% !important;
  background: var(--green) !important;
  color: var(--bg) !important;
  border: 0 !important;
  padding: 22px !important;
  font-family: var(--sans) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  border-radius: 0 !important;
}
.contact-form .gform_wrapper .gform_footer input[type="submit"]:hover,
.contact-form .gform_wrapper .gform_footer button[type="submit"]:hover {
  background: var(--green-dark) !important;
}
.contact-form .gform_wrapper .charleft,
.contact-form .gform_wrapper .ginput_counter {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--green);
  text-align: right;
  margin-top: 4px;
}
@media (max-width: 991px) {
  .about-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 50px;
  }
  .about-content {
    order: 1;
    margin-top: 0;
  }
  .about-media {
    order: 2;
  }

  /* Light parallax on mobile: content-heavy sections scroll normally,
     small banner CTAs keep sticky for the card-stack vibe.
     `position: relative` + explicit `z-index: 0` creates a stacking context
     so absolute children (e.g. .about's pattern-band) stay isolated and
     don't paint over the sticky banners that follow. */
  .about,
  .media-content,
  .contact-form {
    position: relative;
    top: auto;
    z-index: 0;
  }

  .about {
    padding-top: 64px;
  }

  /* Trim sticky banner padding on mobile — desktop's 145—œ160px is too tall
     for small viewports, leaving the empty viewport behind them. */
  .banner-contact {
    padding-block: 70px;
  }
  .banner-sell,
  .banner-buy {
    padding-block: 60px;
  }

  .banner-contact-inner {
    flex-direction: column;
    gap: 32px;
    text-align: center;
    max-width: none;
  }
  .banner-contact-left {
    align-items: center;
  }
  .banner-contact-right {
    justify-content: center;
  }

  .properties-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .property-card .top {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
  }

  .property-card .stats {
    gap: 10px;
  }

  .property-card .stats li {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 1rem;
  }

  .testimonials {
    padding: 80px 0;
  }
  .testimonials-header {
    margin-bottom: 48px;
  }
  .testimonials .park27-pattern-band {
    margin-bottom: 48px;
  }
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .banner-sell-inner,
  .banner-buy-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    max-width: none;
  }

  .media-content,
  .media-content-inner {
    padding: 0;
    margin: 0;
  }
  .media-content-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
    min-height: auto;
    row-gap: 0;
  }
  /* Reorder: photo above text on mobile. Photo edge-to-edge (no beige gutter).
     Red text panel: items centered horizontally. */
  .media-content-media {
    order: 1;
    padding: 0;
    margin: 0;
  }
  .media-content-text {
    order: 2;
    padding: 60px 24px;
    margin: 0;
    align-items: center;
    text-align: center;
  }
  .media-content-text p {
    max-width: none;
  }
  .media-content-text a {
    max-width: none;
  }
  .media-content-text::after {
    height: 60px;
    bottom: -6px;
  }

  .contact-form-inner {
    gap: 32px;
  }
  .contact-form-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .contact-form .gform_wrapper .gform_fields {
    grid-template-columns: 1fr !important;
  }
  .contact-form .gform_wrapper .gfield {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 767px) {
  .properties {
    padding-top: 16px;
  }
  .properties-tabs {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    overflow: visible;
    margin-bottom: 32px;
  }
  .tab {
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
    padding: 8px 16px;
    width: 100%;
  }
  .tab-label {
    font-size: 0.875rem;
  }
  .tab-main {
    font-size: 1rem;
    line-height: 1.1;
  }
}

/* Below 450px: move the testimonials ornament from absolute-right to inline
   below the title at a smaller size so it doesn't crowd the heading. */
@media (max-width: 450px) {
  .testimonials-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .testimonials-ornament {
    position: static;
    transform: none;
    width: 50px;
    height: 50px;
  }
}

/* =========================================================
   PAGE HERO (maroon banner with title + pattern)
   Default art is the right-side fencegrid (news, all-properties, contact,
   about-us, our-specialists, home-sale-calculator, page.php, 404).
   .page-exclusive-listings overrides the pattern to a border-grade tile;
   that override lives in property.css.
   ========================================================= */

.exclusive-hero {
  min-height: 663px;
  padding: 0;
  background: var(--brand);
  color: var(--bg);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.exclusive-hero-inner {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 0;
  max-width: 120rem;
  margin-inline: auto;
  padding-inline: var(--gutter) 0;
}

.exclusive-hero h1 {
  flex: 0 0 min(60vw, 970px);
  color: var(--bg);
  font-family: var(--sans);
  font-size: clamp(3rem, 5.15vw, 5.625rem);
  font-weight: 600;
  line-height: 1.1667;
  letter-spacing: 0;
  position: relative;
  z-index: 2;
}

.exclusive-title-pattern {
  flex: 1 1 auto;
  align-self: stretch;
  background: url("../img/fencegrid.svg") right center / cover no-repeat;
  pointer-events: none;
}

@media (max-width: 1200px) {
  .exclusive-hero {
    min-height: 460px;
  }
  .exclusive-hero h1 {
    flex-basis: min(70vw, 970px);
  }
}

@media (max-width: 991px) {
  .exclusive-hero {
    min-height: 300px;
  }
}

@media (max-width: 767px) {
  .exclusive-hero {
    min-height: 250px;
  }
  .exclusive-hero-inner {
    align-items: center;
    padding-top: 0;
  }
  .exclusive-hero h1 {
    flex: 1 1 auto;
    margin-top: 0;
  }
  .exclusive-title-pattern {
    display: none;
  }
}

/* Hero with an optional CTA button (page-hero `cta_text`). Stacks title + button
   as a column in the hero's left slot; the `-head` wrapper only exists when a
   button is rendered, so plain heroes are unaffected. */
.exclusive-hero-head {
  flex: 0 0 min(60vw, 970px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  position: relative;
  z-index: 2;
}
.exclusive-hero-head > h1 {
  /* !important: page sheets re-declare the h1's row-layout flex-basis
     (width). Inside this COLUMN wrapper flex-basis becomes HEIGHT — an
     840px-tall title pushing the CTA to the hero's bottom (about-us bug). */
  flex: 0 0 auto !important;
  min-height: 0;
  width: auto;
  max-width: 100%;
}
/* IDX detail pages mark themselves on #IDX-main (not <body>), so :has() reaches
   up from there to drop the hero CTA on listing-detail views only. */
body:has(#IDX-main.IDX-category-details) .exclusive-hero-head a.btn-layout {
  display: none;
}
@media (max-width: 1200px) {
  .exclusive-hero-head { flex-basis: min(70vw, 970px); }
}
@media (max-width: 767px) {
  .exclusive-hero-head { flex: 1 1 auto; }
  /* Keep the CTA off the screen edge and let it shrink to its label. */
  .exclusive-hero-inner:has(.exclusive-hero-head) { padding-inline: 30px; }
  .exclusive-hero-head .btn-layout.big { min-width: 0; margin-bottom: 30px; }
}

/* IDX wrapper: the contact form now leads the post-listings stack
   (templates/idx-wrapper.php). As the first child it must NOT be sticky — a
   sticky lead pins and covers the sell + testimonial banners behind it. */
/* IDX wrapper stack order is banner > form > testimonials (matches the
   neighborhoods pages). Re-stage the reveal for that order: the form pins
   flush under the header (like the banner) and paints over it (z2), and the
   testimonials paint over the pinned form (z3). Overrides the dashboard
   paste's fixed z3-form/z2-testimonials with body-scoped specificity. */
body.page-template-idx-wrapper .sticky-stack--reveal > .contact-form {
  /* No pin (see the trio rules above): a pinned form taller than the
     viewport makes its submit unreachable. Overrides the dashboard paste. */
  position: relative !important;
  top: auto !important;
  z-index: 2 !important;
}
/* Class repeated 7× (specificity 0,9,0) to outgun the dashboard paste's
   generic `section:not(...)×6` rule (0,8,1 + !important). */
body.page-template-idx-wrapper .sticky-stack--reveal > .testimonials.testimonials.testimonials.testimonials.testimonials.testimonials.testimonials {
  position: relative !important;
  z-index: 3 !important;
}

/* =========================================================
   ARTICLE HERO IMAGE FRAME — cream inner border + star bar at base.
   Used by the maroon news-detail hero photo and the team/house photos
   on about-us, for-buyers and for-sellers.
   ========================================================= */

.article-hero__image-frame {
  position: absolute;
  inset: 20px 40px 33px;
  border: 6px solid var(--bg);
  border-bottom: 0;
  pointer-events: none;
  z-index: 2;
}

.article-hero__image-marker {
  position: absolute;
  left: 46px;
  right: 46px;
  bottom: 14px;
  height: 44px;
  background-color: var(--bg);
  pointer-events: none;
  z-index: 3;
  transform: none;
  -webkit-mask:
    url("../img/star.svg") center / auto 100% no-repeat,
    linear-gradient(
        to right,
        #000 calc(50% - 26px),
        transparent calc(50% - 26px),
        transparent calc(50% + 26px),
        #000 calc(50% + 26px)
      )
      0 50% / 100% 6px no-repeat;
  mask:
    url("../img/star.svg") center / auto 100% no-repeat,
    linear-gradient(
        to right,
        #000 calc(51% - 26px),
        transparent calc(50% - 26px),
        transparent calc(47% + 26px),
        #000 calc(50% + 26px)
      )
      0 50% / 100% 6px no-repeat;
  width: auto;
}

/* =========================================================
   ABOUT CTA — sticky maroon banner with right-aligned heading + button.
   Extends .banner-contact (color and sticky behavior come from there).
   Used by about-us and for-sellers.
   ========================================================= */

.about-cta .banner-contact-left {
  gap: 43px;
}
.about-cta .banner-contact-left .park27-divider-star {
  width: 250px;
  color: var(--bg);
}

.about-cta .banner-contact-right,
.about-cta .about-cta-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  text-align: left;
}

.about-cta-right h2 {
  font-family: var(--sans);
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 500;
  line-height: normal;
  color: var(--bg);
  margin: 0;
}

.about-cta-right p {
  font-family: var(--sans);
  font-size: clamp(14px, 1.2vw, 20px);
  font-weight: 300;
  line-height: normal;
  color: var(--bg);
  margin: 0;
}

.about-cta-right .btn-layout {
  margin-top: 4px;
  min-width: 0;
  width: 320px;
}
.about-cta-right .btn-layout.light:hover,
.about-cta-right .btn-layout.light:focus-visible {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--bg);
}

@media (max-width: 1399px) {
  .about-cta {
    padding: 100px 0;
  }
}

@media (max-width: 991px) {
  .about-cta {
    position: relative;
    top: auto;
    padding: 56px 0;
  }
  .about-cta .banner-contact-inner {
    flex-direction: column;
    text-align: center;
    gap: 32px;
  }
  .about-cta-right {
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .about-cta {
    padding: 48px 0;
  }
}

@media (max-width: 575px) {
  .about-cta {
    padding: 40px 0;
  }
}

/* =========================================================
   LISTING PAGINATION (used by Exclusive Listings, All Properties, News)
   ========================================================= */

.listing-pagination {
  padding: 100px 0;
  background: var(--white);
}

.listing-pagination .container {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
}

.listing-pagination a {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  font-family: var(--sans);
  font-size: clamp(1rem, 1.15vw, 1.25rem);
  font-weight: 300;
  line-height: 1.21;
  text-decoration: none;
}

.listing-pagination .pages {
  justify-self: center;
  display: flex;
  gap: 20px;
}

.listing-pagination .pages a {
  width: 69px;
  height: 69px;
  border: 1px solid rgba(61, 50, 32, 0.7);
  font-size: 1.125rem;
  text-transform: uppercase;
}

.listing-pagination .pages [aria-current="page"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

@media (max-width: 991px) {
  .listing-pagination {
    padding-bottom: 80px;
  }
}

@media (max-width: 767px) {
  .listing-pagination .container {
    gap: 12px;
  }
  .listing-pagination .pages {
    gap: 8px;
  }
  .listing-pagination .pages a {
    width: 46px;
    height: 46px;
  }
}

/* ============================================================
   WP block-group inner wrapper bridge.
   WordPress renders wp:group as <div class="wp-block-group ..."><div class="wp-block-group__inner-container">…</div></div>.
   The plugin uses wp:group with className "sticky-stack sticky-stack--…" to
   recreate the theme's sticky-scroll wrappers; the inner container otherwise
   breaks `> section` selectors and acts as a containing block for sticky.
   Making it display:contents removes its box so children act as direct layout
   children of .sticky-stack, while the descendant selector below restores the
   non-sticky-siblings z-index rule for sticky-stack--reveal.
   ============================================================ */
.sticky-stack > .wp-block-group__inner-container {
  display: contents;
}

.sticky-stack--reveal
  > .wp-block-group__inner-container
  > section:not(.banner-buy):not(.banner-sell):not(.banner-contact):not(
    .contact-form
  ):not(.media-content):not(.about) {
  position: relative;
  z-index: 2;
}