/*
  Verve theme stylesheet — PART 1 (Blocks 1–9).

  TEMPORARY SPLIT for concurrent editing on the server — see style-base.css
  for the full explanation and the recombine instructions.

  Blocks in this file: 1 Verve Difference, 2 Testimonial (+ video lightbox),
  3 Profiles, 4 Banner, 5 FAQ, 6 Profile Banner, 7 Property Market,
  8 Off-Market Property Access, 9 Suburb Cards.
*/

/* ══════════════════════════════════════════════════════════
   BLOCK 1 — WHY VERVE
   Ported from the 4 Sep homepage package. The accordion below is mobile-only
   and built by js/main.js; its rules live here so both states stay together.
══════════════════════════════════════════════════════════ */
.why-section {
  background: var(--primary); box-shadow: 0 0 0 100vmax var(--primary); clip-path: inset(0 -100vmax);
  padding: var(--pad-y) 57px;
}
.why-grid { display: flex; flex-direction: column; gap: 32px; }
.why-top { display: flex; flex-direction: column; gap: 56px; padding-bottom: 32px; }
.why-left-label {
  font-family: var(--font-heading);
  font-size: 48px; line-height: 58px; font-weight: 500; letter-spacing: 0.16px;
  text-align: center; color: var(--white);
}
.why-features {
  display: flex;
    justify-content: center;
	grid-template-columns: repeat(6, 1fr); 
	gap: 24px;
  padding-top: 24px; 
	border-top: 1px solid var(--primary-300);
}
.why-feature {
	flex: 0 1 calc((100% - 120px) / 6);
  font-family: var(--font-heading);
  font-size: 18px; line-height: 22px; font-weight: 400;
  color: var(--primary-300); text-align: center; cursor: pointer; transition: color .2s;
}
.why-feature.active { color: var(--white); border-top: 4px solid var(--white); margin-top: -24px; padding-top: 20px; }
.why-feature:not(.active):hover { color: var(--white); }
.why-bottom { display: flex; align-items: center; gap: 64px; }
.why-center-heading,
.why-center-body { transition: opacity .2s ease; }
.why-center.fading .why-center-heading,
.why-center.fading .why-center-body { opacity: 0; }
.why-center {
  flex: 0 0 37.5%;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
  text-align: left; gap: 28px;
}
.why-center-heading { font-family: var(--font-heading); font-size: 38px; line-height: 46px; font-weight: 400; color: var(--white); }
.why-center-body { font-size: 18px; line-height: 28px; color: #b3a6a6; }
.why-right { flex: 0 0 50%; align-self: center; aspect-ratio: 3 / 2; border-radius: var(--radius-card); overflow: hidden; }
.why-right img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s ease; }
.why-right img.fading { opacity: 0; }

/* ── Mobile accordion (shown under 767px, see blocks-part-3.css) ── */
.why-accordion { display: none; flex-direction: column; }
.why-accordion-item { border-top: 1px solid var(--primary-300); }
.why-accordion-item:last-child { border-bottom: 1px solid var(--primary-300); }
.why-accordion-header {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; background: none; border: none;
  font-family: var(--font-heading); font-size: 20px; line-height: 26px; font-weight: 400;
  color: var(--white); text-align: left; cursor: pointer;
}
.why-accordion-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.why-accordion-icon { position: relative; flex-shrink: 0; width: 20px; height: 20px; }
.why-accordion-icon::before,
.why-accordion-icon::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  background: var(--white); transform: translate(-50%, -50%);
}
.why-accordion-icon::before { width: 14px; height: 1.5px; }
.why-accordion-icon::after { width: 1.5px; height: 14px; transition: transform .2s ease, opacity .2s ease; }
.why-accordion-item.active .why-accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.why-accordion-panel { display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; }
.why-accordion-img { aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; }
.why-accordion-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why-accordion-heading { font-family: var(--font-heading); font-size: 22px; line-height: 28px; font-weight: 400; color: var(--white); }
.why-accordion-body { font-size: 16px; line-height: 24px; color: #b3a6a6; }

/* ══════════════════════════════════════════════════════════
   BLOCK 2 — TESTIMONIAL
══════════════════════════════════════════════════════════ */
.testimonial-section { padding: var(--pad-y) var(--pad-x); }
.testimonial-card {
  background: var(--primary); border-radius: var(--radius-card);
  padding: 82px 85px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 60px; overflow: hidden;
}
.testimonial-left { flex: 0 0 581px; overflow: hidden; min-width: 0; }
.testimonial-heading { color: var(--white); margin-bottom: 40px; }
.testimonial-rating { display: flex; align-items: center; gap: 16px; margin-bottom: 48px; }
.rating-badge {
  background: #664d4d; border-radius: 100px;
  padding: 4px 8px; font-size: 16px; color: var(--white);
  white-space: nowrap;
}
.stars { display: flex; gap: 1px; }
.stars svg { fill: #BAA890; }
.reviews-count { font-size: 16px; color: var(--white); }
.reviews-count strong { font-weight: 700; }
.testimonial-quotes {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}
 
.testimonial-quotes-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 45px;

    width: fit-content;

    -webkit-animation: quoteScroll 28s linear infinite;
    animation: quoteScroll 28s linear infinite;

    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);

    will-change: transform;
}

.testimonial-quotes-track:hover { animation-play-state: paused; }
.testimonial-quote {
    flex: 0 0 220px;
    width: 220px;
}

@-webkit-keyframes quoteScroll {
    from {
        -webkit-transform: translate3d(0, 0, 0);
    }

    to {
        -webkit-transform: translate3d(-50%, 0, 0);
    }
}

@keyframes quoteScroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}
.quote-stars { display: flex; gap: 1px; margin-bottom: 16px; }
.quote-stars svg { fill: #BAA890; }
.quote-text {
  font-size: 14px; line-height: 20px; color: #b3a6a6;
  height: 153px;
  overflow-y: auto;
  padding-right: 5px;
}
.quote-author{
 font-size: 14px;
 color: #fff;
 padding-top: 5px;
}
.quote-text::-webkit-scrollbar {
  width: 2px;
}

.quote-text::-webkit-scrollbar-track {
  background: #b3a6a6;
}

.quote-text::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 2px;
}

.testimonial-right { flex: 0 0 527px; display: flex; flex-direction: column; gap: 16px; }
.tphoto-large {
  width: 100%;
  aspect-ratio: 527/297;
  border-radius: 16px; overflow: hidden; position: relative; cursor: pointer;
}
.tphoto-large img { width: 100%; height: 100%; object-fit: cover; }
.tphoto-large:hover img { transform: scale(1.04); transition: transform 0.5s ease; }
.tphoto-label {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 16px 16px;
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
}
.tphoto-label span { font-size: 16px; color: var(--white); }
.tphoto-row { display: flex; gap: 16px; }
.tphoto-sm {
  flex: 1;
  aspect-ratio: 527 / 297;
  border-radius: 16px; overflow: hidden; position: relative;
}
.tphoto-sm img { width: 100%; height: 100%; object-fit: cover; }
/* Only the side photos that carry a video are clickable. */
.tphoto-sm[data-video] { cursor: pointer; }
.tphoto-sm[data-video]:hover img { transform: scale(1.04); transition: transform 0.5s ease; }
.tphoto-sm-label {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 32px 16px 12px;
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
}
.tphoto-sm-label span { font-size: 14px; color: var(--white); white-space: nowrap; }
/* ── Video lightbox ── */
.video-lightbox {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.85); align-items: center; justify-content: center;
}
.video-lightbox.is-open { display: flex; }
.video-lightbox-inner { position: relative; width: 90vw; max-width: 1100px; aspect-ratio: 16 / 9; }
.video-lightbox-inner iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; }
.video-lightbox-close {
  position: absolute; top: -44px; right: 0;
  background: none; border: none; cursor: pointer;
  color: white; font-size: 28px; line-height: 1; opacity: 0.8;
}
.video-lightbox-close:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   BLOCK 3 — PROFILES (MEET THE TEAM)
══════════════════════════════════════════════════════════ */
.profiles-section { background: var(--white); box-shadow: 0 0 0 100vmax var(--white); clip-path: inset(0 -100vmax); padding: var(--pad-y) var(--pad-x); }
.profiles-header { margin-bottom: 64px; }
@media(max-width: 991px) {
  .profiles-header { margin-bottom: 40px; }
}
.profiles-header .heading-1 { margin-bottom: 12px; }
.profiles-header .body-base { color: var(--grey-dark); max-width: 680px; }
.profiles-grid {
  display: flex; flex-wrap: wrap; gap: 48px 24px;
}
.profile-card { flex: 0 0 calc(33.333% - 16px); display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; }
@media(max-width: 991px) {
  .profile-card { flex: 0 0 calc(50% - 16px); }
}
@media(max-width: 575px) {
  .profile-card { flex: 0 0 100%; }
}
.profile-photo {
  border-radius: var(--radius-card); overflow: hidden;
  aspect-ratio: 381 / 254; margin-bottom: 20px;
}
.profile-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; object-position: top;}
.profile-card:hover .profile-photo img { transform: scale(1.04); }
.profile-photo-placeholder { width: 100%; height: 100%; }
.profile-card:hover .profile-photo-placeholder { transform: scale(1.04); }
.profile-name { font-size: 20px; line-height: 24px; color: var(--primary); margin-bottom: 4px; }
.profile-title { font-size: 16px; line-height: 24px; color: var(--grey-dark); }
.profile-area  { font-size: 16px; line-height: 24px; color: var(--grey-dark); margin-bottom: 16px; }
.profile-actions { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.profile-link-label { font-size: 14px; font-weight: 500; color: var(--primary); }
.btn-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  border: 1px solid var(--primary); background: transparent;
  flex-shrink: 0; cursor: pointer; transition: background .18s;
}
.btn-circle:hover { background: rgba(64,32,32,.08); }
.btn-circle svg { transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.profile-card:hover .btn-circle svg { transform: rotate(45deg); }

@media(max-width: 767px) {
 .profiles-grid {
   row-gap: 30px;
 }
  .testimonial-rating {

    margin-bottom: 24px;
  }
}

/* ══════════════════════════════════════════════════════════
   BLOCK 4 — BANNER
══════════════════════════════════════════════════════════ */
.banner-section { background: var(--white); box-shadow: 0 0 0 100vmax var(--white); clip-path: inset(0 -100vmax); padding: var(--pad-y) var(--pad-x); text-align: center; }
.banner-label {
  font-size: 16px; font-weight: 500; letter-spacing: 0.16px;
  margin-bottom: 24px;
}
.banner-label:empty {
  display: none;
}
.banner-heading { margin-bottom: 24px; }
.banner-intro {
  font-size: 20px; line-height: 28px; color: #000000;
  max-width: 870px; margin: 0 auto 64px;
}
.banner-image {
  border-radius: var(--radius-card); overflow: hidden; height: 100%;
    width: 100%;
    aspect-ratio: 1320 / 757;
}
.banner-image img { width: 100%; height: 100%; object-fit: cover; }

@media(max-width: 767px) {
 .banner-intro {
   margin-bottom: 30px;
 } 
}


/* ── Side-by-side variant ──────────────────────────────────
   Media in the left column, copy in the right, so the section stops eating a
   whole screen. Media first in the markup — the mobile stack wants it on top. */
.banner-split {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 60px;
  text-align: left;
  padding: 64px var(--pad-x);
}
.banner-split-media {
  flex: 0 0 52%;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--bg-section);
}
/* The video field is a WYSIWYG, so its iframe arrives wrapped in a <p>. */
.banner-split-media p { height: 100%; margin: 0; }
.banner-split-media iframe,
.banner-split-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; object-fit: cover; display: block;
}
.banner-split-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 620px;
}
.banner-split .banner-label,
.banner-split .banner-heading,
.banner-split .banner-intro { margin: 0; max-width: none; }

@media (max-width: 900px) {
  .banner-split { flex-direction: column; align-items: stretch; gap: 32px; padding: 48px var(--pad-x); }
  .banner-split-media { flex: unset; width: 100%; }
  .banner-split-content { max-width: none; }
}

/* ── Hero variant ──────────────────────────────────────────
   A 900px full-bleed media panel starting at the very top of the page, with the
   nav floating over it. Copy sits bottom-left over a dark scrim. */
/* On a page with a hero the nav is lifted out of the flow and floats over it,
   so the hero starts at the very top with no height arithmetic to get wrong.
   Fixed rather than sticky keeps it visible on scroll exactly as before; the
   max-width/auto margins reproduce the body's own box. */
body:has(.banner-hero) .nav-wrap {
  position: fixed;
  top: 0; left: 0; right: 0;
  max-width: 1440px;
  margin: 0 auto;
}
/* The WP admin bar owns the first 32px for logged-in users. */
body.admin-bar:has(.banner-hero) .nav-wrap { top: 32px; }

.banner-hero {
  position: relative;
  /* body is capped at 1440px; this breaks the hero out to the full viewport
     width so it doesn't sit in a beige frame on wide screens. 
     height: 900px;*/
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding: 0;
  background: none;
  box-shadow: none;
  clip-path: none;
  border-radius: 0;
  overflow: hidden;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  text-align: left;
}
.banner-hero-media { position: absolute; inset: 0; overflow: hidden; }
/* The video field is a WYSIWYG, so its iframe arrives wrapped in a <p>. */
.banner-hero-media p { height: 100%; margin: 0; }
.banner-hero-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* object-fit does nothing to an iframe — the player would letterbox itself with
   grey bars. Oversizing it to whichever axis overflows crops instead. */
.banner-hero-media iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 177.78vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  border: 0;
  display: block;
  z-index: 2;
}
/* Cover image over the video: visible until the player has loaded, then faded
   out by js/main.js. Without it the hero is a black rectangle on first paint. */
.banner-hero-cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 1; transition: opacity .6s ease;
  pointer-events: none;
}
 

/* Scrim: keeps the white copy legible whatever the photo does down there. */
.banner-hero::after {
  content: '';
  z-index: 2;
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 38%, rgba(0,0,0,0) 68%);
}
.banner-hero-content {
  position: relative;

  width: 100%;
  /* Matches the body's own box, so the copy lines up with every section below
     even though the media runs edge to edge. */
  max-width: 1440px;
  margin: 0 auto;
  padding: 56px var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  z-index: 3;
}
.banner-hero-content > * { max-width: 820px; }
.banner-hero .banner-label,
.banner-hero .banner-heading,
.banner-hero .banner-intro { color: var(--white); margin: 0; max-width: 700px; }
.banner-hero .banner-intro { font-size: 18px; line-height: 28px; }

.banner-section.pad-bot-none {
  padding-bottom: 0;
}
.banner-section.pad-bot-none .banner-intro {
  margin-bottom: 0;
}
.reveal-text{
  opacity: 0;
}
.reveal-text.is-animated{
  opacity: 1;
}
/* ══════════════════════════════════════════════════════════
   BLOCK 5 — FAQ
══════════════════════════════════════════════════════════ */
.faq-section { background: transparent;
/* box-shadow: 0 0 0 100vmax var(--white); */
clip-path: inset(0 -100vmax); padding: var(--pad-y) var(--pad-x); }
.faq-grid { display: flex; gap: 80px; align-items: flex-start; }
.faq-left { flex: 0 0 424px; }
.faq-right { flex: 1; }
.faq-item {
  border-top: 1px solid var(--border-light);
}
.faq-item:last-child { border-bottom: 1px solid var(--border-light); }
.faq-question {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 0; cursor: pointer; gap: 16px;
  width: 100%;
}
.faq-question-text { font-size: 20px; line-height: 28px; font-weight: 400; text-align: left; }
.faq-icon { flex-shrink: 0; color: var(--primary); transition: transform .3s ease; }
.faq-answer {
  font-size: 16px; line-height: 24px; color: var(--grey-dark);
  max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease;
}
.faq-item.open .faq-answer { max-height: 400px; padding-bottom: 24px; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

@media(max-width: 991px) {
 .faq-grid {
   flex-direction: column;
 } 
 .faq-left {
   flex: 1 1 auto;
 }
}

@media(max-width: 767px) {
 .faq-grid {
   gap: 35px;
 } 
 .faq-question {
   padding-block: 18px;
 }
}

/* ══════════════════════════════════════════════════════════
   BLOCK 6 — PROFILE BANNER (SPECIALIST HEADER)
══════════════════════════════════════════════════════════ */
.profile-banner-section {
  background: var(--bg-page); box-shadow: 0 0 0 100vmax var(--bg-page); clip-path: inset(0 -100vmax); padding: 64px 60px;
  display: flex; gap: 64px; align-items: center; position: relative;
}
.pb-left { flex: 0 0 528px; display: flex; flex-direction: column; gap: 24px; }
.pb-back { display: inline-flex; align-items: center; gap: 8px; }
.pb-name-block { display: flex; flex-direction: column; gap: 12px; }
.pb-title { font-size: 20px; line-height: 26px; color: var(--grey-dark); }
.pb-suburbs { font-size: 16px; line-height: 24px; color: var(--black); display: flex; align-items: center; gap: 6px; }
.pb-bio { font-size: 16px; line-height: 24px; color: #434343; margin-top: 24px; }
.pb-bio:empty {
  display: none;
}
.pb-right { flex: 1; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 381 / 254; }
.pb-right img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media(max-width: 1199px) {
  .pb-left {
    flex-shrink: 0.5;
  }
  .pb-right {
    flex-shrink: 0.5;
    flex-basis: auto;
  }
}
@media(max-width: 991px) {
 .profile-banner-section {
   flex-direction: column-reverse;
   gap: 30px;
   align-items: stretch;
 } 
 .pb-left {
   flex-basis: auto;
 }
 .pb-right {
   width: 100%;
 }
 .pb-bio {
   margin-top: 0;
 }
 .btn-back-to-members {
   top: 9px;
   left: 60px;
 }
}

@media(max-width: 767px) {
  .profile-banner-section {
    padding-inline: var(--pad-x);
    padding-bottom: 40px;
  }
 .btn-back-to-members {
   left: 20px;
   top: 5px;
 }
}

/* ══════════════════════════════════════════════════════════
   BLOCK 7 — PROPERTY MARKET
══════════════════════════════════════════════════════════ */
.property-market-section {
  background: var(--primary); box-shadow: 0 0 0 100vmax var(--primary); clip-path: inset(0 -100vmax); padding: var(--pad-y) var(--pad-x);
}
.pm-stack { display: flex; flex-direction: column; gap: 96px; }
.pm-row { display: flex; gap: 80px; align-items: center; }
.pm-row.reverse { flex-direction: row-reverse; }
.pm-images { flex: 0 0 480px; position: relative; }
.pm-img-main {
  border-radius: var(--radius-card); overflow: hidden; height: 420px;
}
.pm-img-main img { width: 100%; height: 100%; object-fit: cover; }
.pm-img-float {
  position: absolute; bottom: -32px; right: -24px;
  width: 200px; height: 160px;
  border-radius: var(--radius-card); overflow: hidden;
  border: 4px solid var(--primary);
}
.pm-img-float img { width: 100%; height: 100%; object-fit: cover; }
.pm-content { flex: 1; }
.pm-content .heading-2 { color: var(--white); margin-bottom: 28px; }
.pm-body { font-size: 16px; line-height: 24px; color: var(--tan); }
.pm-body + .pm-body { margin-top: 16px; }
.pm-sub-label {
  font-size: 14px; font-weight: 500; color: var(--white);
  letter-spacing: 0.14px;
  border-top: 1px solid var(--primary-300);
  padding-top: 16px; margin-top: 48px; margin-bottom: 16px;
}

@media(max-width: 991px) {
.pm-row {
    flex-direction: column;
  }

  .pm-row.reverse {
    flex-direction: column;
  }

  .pm-img-main {
    height: auto;
  }

  .pm-images {
    flex-basis: auto;
  }

  .pm-row {
    gap: 40ppx;
  }
}

/* ══════════════════════════════════════════════════════════
   BLOCK 7B — PROPERTY MARKET (DARK / MAP)
══════════════════════════════════════════════════════════ */
.market-section {
  background: var(--primary); box-shadow: 0 0 0 100vmax var(--primary); clip-path: inset(0 -100vmax); padding: var(--pad-y) var(--pad-x);
}
.market-inner { display: flex; flex-direction: column; gap: 96px; }
.market-row { display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.market-row.reverse { flex-direction: row-reverse; }
.market-photo { flex: 0 0 535px; height: 483px; border-radius: var(--radius-card); overflow: hidden; }
.market-photo img { width: 100%; height: 100%; object-fit: cover; }
.market-photo > div[id^="market-map-"] { width: 100%; height: 100%; }
.market-text { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.market-text .heading-2 { color: var(--white); }
.market-body { font-size: 16px; line-height: 24px; color: #b3a6a6; }
.market-body p + p { margin-top: 16px; }

.market-verve-pin {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary); color: var(--white);
  font-family: 'Google Sans', sans-serif; font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}
.market-verve-pin-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.6); flex-shrink: 0; display: inline-block; }

@media(max-width: 991px) {
  .market-row {
    flex-direction: column;
  }

  .market-row.reverse {
    flex-direction: column;
  }

  .market-photo {
    flex-basis: auto;
    width: 100%;
    height: 360px;
  }
}

/* ══════════════════════════════════════════════════════════
   BLOCK 8 — OFF-MARKET PROPERTY ACCESS
══════════════════════════════════════════════════════════ */
.offmarket-outer { background: transparent; padding: var(--pad-y) var(--pad-x); }
.offmarket-card {
  background: var(--bg-offwhite); border-radius: var(--radius-card);
  padding: 64px; display: flex; gap: 64px; align-items: center;
}
.offmarket-img { flex: 0 1 460px; border-radius: var(--radius-card); overflow: hidden; height: 540px; }
.offmarket-img img { width: 100%; height: 100%; object-fit: cover; }
.offmarket-content { flex: 1; }
.offmarket-content .heading-2 { color: var(--primary); margin-bottom: 28px; }
.offmarket-body { font-size: 16px; line-height: 24px; color: var(--black); margin-bottom: 16px; }
.offmarket-body:last-of-type { margin-bottom: 40px; }

/* Agent feature layout — transparent card, wider image */
.offmarket-card--feature { padding: 0; background: transparent; }
.offmarket-card--feature .offmarket-img { flex: 0 0 753px; aspect-ratio: 381 / 254; height: auto; }

@media(max-width: 991px) {
  .offmarket-img {
    height: auto;
  }
  .offmarket-card {
    padding: 32px;
    flex-direction: column;
    gap: 20px;
  }
}

@media(max-width: 500px) {
 .offmarket-card {
   padding: 16px;
 } 
}

/* ══════════════════════════════════════════════════════════
   BLOCK 9 — SUBURB CARDS
══════════════════════════════════════════════════════════ */
.suburb-section { background: var(--white); box-shadow: 0 0 0 100vmax var(--white); clip-path: inset(0 -100vmax); padding: var(--pad-y) var(--pad-x); }
.suburb-header { margin-bottom: 48px; }
.suburb-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.suburb-card {
  flex: 1; background: var(--bg-stone); border-radius: var(--radius-card);
  padding: 32px; display: flex; flex-direction: column; gap: 16px;
  min-height: 320px;
}
.suburb-pin { color: var(--primary); margin-bottom: 4px; }
.suburb-card .heading-3 { color: var(--primary); }
.suburb-card .body-base { color: var(--black); flex: 1; }
.suburb-cta { margin-top: auto; }