/*
  Verve theme stylesheet — PART 3 (Blocks 17–20, layout blocks, footer, responsive).

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

  Blocks in this file: 17 Property Tile, 18 Process Steps Carousel, 19 CTA
  Banner, 20 Insights Filter + Article Grid, L1–L7 generic layout blocks,
  Footer (Block 16, main layout), image hover zoom, and ALL responsive/mobile
  media queries (kept together here rather than split per-block, since they
  are intermixed in one place in the original file).
*/

/* ══════════════════════════════════════════════════════════
   BLOCK 17 — PROPERTY TILE (RECENTLY PURCHASED)
══════════════════════════════════════════════════════════ */
.properties-section { padding: var(--pad-y) var(--pad-x); text-align: center; }
.props-header { display: flex; flex-direction: column; align-items: center; gap: 40px; margin-bottom: 64px; }
.props-header-top { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.filter-tabs { background: var(--white); display: inline-flex; padding: 4px; border-radius: 100px; }
.filter-tab {
  padding: 12px 16px; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  cursor: pointer; border: none; background: transparent; color: var(--black);
  transition: background .18s, color .18s;
}
.filter-tab.active { background: var(--primary); color: var(--white); }

/* ── Recent Purchases block — filter bar + wrapping grid ── */
.purchases-section { padding: 0 var(--pad-x) var(--pad-y) var(--pad-x)}
.purchases-section .properties-section { padding: 0; }
.purchases-header { text-align: center; margin-bottom: 48px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.purchases-filter { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 48px; }
.filter-dropdowns { display: flex; gap: 16px; flex-wrap: wrap; }
.filter-select {
  appearance: none; -webkit-appearance: none;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%23402020' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid var(--border-light); border-radius: var(--radius-pill);
  padding: 12px 40px 12px 18px; font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--black); cursor: pointer; min-width: 180px;
}
.filter-select:focus { outline: none; border-color: var(--primary); }
.purchases-section .property-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 25px; row-gap: 48px; }
.purchases-empty { grid-column: 1 / -1; text-align: center; color: var(--grey-mid); padding: 48px 0; }
.property-grid.is-loading { opacity: .5; transition: opacity .2s; }
@media (max-width: 900px) { .purchases-section .property-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 670px) {
  .purchases-section .property-grid { grid-template-columns: 1fr; }
  .purchases-filter { flex-direction: column; align-items: stretch; }
  .filter-dropdowns { flex-direction: column; }
  .filter-select { min-width: 0; width: 100%; }
}

.property-grid { display: flex; gap: 25px; }
/* Card height follows its content: a 3:2 photo on top, the meta bar underneath —
   no fixed 500px, no inset floating image (see the 28 Aug purchases handover). */
.property-card {
  background: var(--white); flex: 1; flex-shrink: 0;
  border-radius: var(--radius-card); overflow: hidden; position: relative;
  display: flex; flex-direction: column;
}
/* The whole card is an <a> now; the reveal panel inside is only a styled div. */
a.property-card { color: inherit; text-decoration: none; }
.property-img-frame { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.property-img-frame img { width: 100%; height: 100%; object-fit: cover; }
/* Darkens the photo on hover so the reveal panel reads against it. */
.property-img-frame::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,0); transition: background 0.2s ease; pointer-events: none;
}
.property-card:hover .property-img-frame::after { background: rgba(0,0,0,0.15); }
.property-meta-bar { display: flex; gap: 24px; margin: auto 32px 24px; text-align: left; transition: opacity 0.2s ease; }
.property-card:hover .property-meta-bar { opacity: 0; }
.property-reveal {
  position: absolute; left: 0; right: 0; bottom: 0; top: auto;
  background: #fff; border-radius: 0;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
  display: flex; flex-direction: row; align-items: center; gap: 16px;
  padding: 16px 24px; transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.18s ease;
  text-decoration: none; color: inherit; cursor: pointer;
}
.property-reveal:hover { background: #fafafa; }
.property-card:hover .property-reveal { transform: translateY(0); }
.reveal-agent-img { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.reveal-agent-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.reveal-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; align-items: flex-start; text-align: left; }
.reveal-learn-btn {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  font-size: 13px; font-weight: 500; color: var(--primary);
  border: 1px solid var(--primary); border-radius: var(--radius-pill);
  padding: 10px 16px; transition: opacity .18s; width: fit-content;
}
.reveal-learn-btn svg { transition: transform 0.25s cubic-bezier(0.25,0.46,0.45,0.94); flex-shrink: 0; }
.property-reveal:hover .reveal-learn-btn { opacity: .7; }
.property-reveal:hover .reveal-learn-btn svg { transform: rotate(45deg); }
.reveal-agent { font-size: 18px; line-height: 22px; color: var(--primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.reveal-area { font-size: 14px; line-height: 20px; color: var(--grey-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.property-tag { position: absolute; top: 24px; left: 24px; }
.property-meta-col { display: flex; flex-direction: column; border-top: 1px solid var(--border-light); padding-top: 16px; flex: 1; }
.property-meta-col.w-fixed { flex: 0 0 156px; }
.meta-label { font-size: 16px; line-height: 24px; color: var(--black); font-weight: 500; }
.meta-value { font-size: 16px; line-height: 24px; color: var(--grey-mid); }

/* ══════════════════════════════════════════════════════════
   BLOCK 18 — PROCESS STEPS CAROUSEL
══════════════════════════════════════════════════════════ */
.process-section { background: #F0EDE9; box-shadow: 0 0 0 100vmax #F0EDE9; clip-path: inset(0 -100vmax); padding: var(--pad-y) var(--pad-x); }
.process-header { max-width: 760px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; text-align: left; }
.process-header-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.process-arrows { display: flex; gap: 12px; flex-shrink: 0; }
.process-arrow-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-light); background: var(--white);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary); transition: background .15s, border-color .15s, color .15s;
}
.process-arrow-btn:hover { background: var(--primary); border-color: var(--primary); color: var(--white); }
.process-arrow-btn:hover svg path { stroke: var(--white); }
.process-arrow-btn:disabled { opacity: 0.35; cursor: default; }
.process-arrow-btn:disabled:hover { background: var(--white); border-color: var(--border-light); color: var(--primary); }
.process-arrow-btn:disabled:hover svg path { stroke: var(--primary); }
.process-steps {
  display: flex; gap: 24px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.process-steps::-webkit-scrollbar { display: none; }
.process-step { flex: 0 0 calc((100% - 48px) / 3); background: #FAF7F4; border-radius: var(--radius-card); padding: 56px 32px 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.process-step-num { font-family: var(--font-heading); font-weight: 400; font-size: 64px; line-height: 0.5; letter-spacing: -1.12px; color: #BAA890; }
.process-step-body { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; text-align: left; }
.process-step-name { font-family: var(--font-heading); font-weight: 400; font-size: 22px; line-height: 29px; letter-spacing: -0.3px; color: var(--primary); }
.process-step-desc { font-size: 15px; line-height: 22px; color: #434343; }
/* More than 3 steps: shrink the cards by an 88px sliver so the next card peeks in
   and the row reads as scrollable. */
.process-steps--peek .process-step { flex: 0 0 calc((100% - 48px - 88px) / 3); }

/* ══════════════════════════════════════════════════════════
   BLOCK 19 — CTA BANNER (START THE PROCESS)
══════════════════════════════════════════════════════════ */
.cta-section { padding: 80px var(--pad-x) ; }
.cta-card {
  border: 1px solid var(--secondary-200); border-radius: var(--radius-card);
  height: 471px; position: relative; overflow: hidden;
  display: flex; align-items: center; padding: 0 65px;
  background: transparent; transition: background 0.3s ease;
}
.cta-card:hover { background: var(--white); }
.cta-logo-graphic { position: absolute; right: 0px; top: 50%; transform: translateY(-50%); width: 68.75%; pointer-events: none; }
.cta-logo-graphic svg { width: 100%; height: auto; display: block; }
.cta-content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; max-width: 655px; }
.cta-sub-label { font-size: 16px; font-weight: 500; letter-spacing: 0.16px; }
.cta-heading { color: var(--black); }

/* ══════════════════════════════════════════════════════════
   BLOCK 19B — CTA BANNER (AUTHOR / AGENT PHOTO)
   Own class set — deliberately not sharing Block 19's .cta-* classes so
   changes to one banner variant can't affect the other.
══════════════════════════════════════════════════════════ */
.cta-author-section { padding: 0 var(--pad-x) 80px; }
.cta-author-card {
  border: 1px solid var(--secondary-200); border-radius: var(--radius-card);
  height: 471px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 0 24px 0 65px;
  background: transparent; transition: background 0.3s ease;
}
.cta-author-card:hover { background: var(--white); }
.cta-author-content { display: flex; flex-direction: column; gap: 24px; max-width: 655px; }
.cta-author-sub-label { font-size: 16px; font-weight: 500; letter-spacing: 0.16px; }
.cta-author-heading { color: var(--black); }
.cta-author-photo { flex-shrink: 0; height: calc(100% - 48px); max-width: 632px; border-radius: var(--radius-card); overflow: hidden; }
.cta-author-photo img {
  height: 100%; width: auto; aspect-ratio: 381 / 254; object-fit: cover; object-position: top center; display: block;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cta-author-card:hover .cta-author-photo img { transform: scale(1.06); }

@media(max-width: 1199px) {
 .cta-author-photo {
   max-width: 50%;
 } 
}
/* ══════════════════════════════════════════════════════════
   BLOCK 20 — INSIGHTS FILTER + ARTICLE GRID
══════════════════════════════════════════════════════════ */
.cat-filter { padding: 20px var(--pad-x); display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--bg-page); position: relative; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); flex-wrap: wrap; }
.cat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-light); background: transparent;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--black); cursor: pointer; transition: all .15s; white-space: nowrap;
}
.cat-pill:hover { border-color: var(--primary); color: var(--primary); }
.cat-pill.active { background: var(--primary); border-color: var(--primary); color: var(--white); }
.cat-tag {
  display: inline-flex; align-items: center; padding: 12px 16px;
  border-radius: var(--radius-pill); background: var(--white); border: 1px solid transparent;
  font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 20px;
  color: var(--primary); white-space: nowrap; margin-bottom: 24px;
}
.article-img { width: 100%; border-radius: var(--radius-card); overflow: hidden; background: var(--bg-section); flex-shrink: 0; position: relative; }
.article-img .cat-tag { position: absolute; top: 16px; left: 16px; margin-bottom: 0; z-index: 1; }
.article-img-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-img-inner { width: 100%; height: 100%; background: linear-gradient(135deg, #ddd5cb 0%, #c8b9a6 100%); }
.article-meta { font-family: var(--font-body); font-size: 13px; color: #434343; display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.specialist-avatar { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--bg-section); }
.specialist-avatar img { width: 100%; height: 100%; object-fit: cover; }
.specialist-name { font-size: 13px; font-weight: 500; color: var(--primary); }
.article-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--primary-300); }
.read-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--primary);
  border: 1px solid var(--primary); border-radius: var(--radius-pill); padding: 8px 14px;
  margin-top: 20px; transition: opacity .18s;
}
.read-link:hover { opacity: .7; }
.read-link svg { transition: transform 0.25s cubic-bezier(0.25,0.46,0.45,0.94); flex-shrink: 0; }
.read-link:hover svg { transform: rotate(45deg); }
.featured-wrap { padding: 64px var(--pad-x); }
.featured-article { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.featured-article .article-img { aspect-ratio: 4/3; }
.featured-article .article-img-inner { height: 100%; }
.featured-content { order: 1; }
.featured-title { font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 48px; letter-spacing: -0.8px; color: var(--black); margin-bottom: 16px; }
.featured-excerpt { font-family: var(--font-body); font-size: 16px; line-height: 26px; color: #434343; max-width: 440px; }
.articles-section { padding: 64px var(--pad-x); }
.articles-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 32px; row-gap: 48px; }
.articles-grid-3.fade { opacity: .5; transition: opacity .2s; }
.article-card .article-img { aspect-ratio: 3/2; margin-bottom: 20px; }
.article-card .article-img-inner { height: 100%; }
.article-card-title { font-family: var(--font-heading); font-weight: 400; font-size: 22px; line-height: 29px; letter-spacing: -0.3px; color: var(--black); margin-bottom: 10px; }
.article-card-excerpt { font-family: var(--font-body); font-size: 14px; line-height: 22px; color: #434343; }
/* The card itself is the <a> — "Read article" inside is only a styled span. The
   markup carries draggable="false" so dragging selects the copy instead of the link. */
.article-card, .featured-article { position: relative; color: inherit; text-decoration: none; }
a.article-card { display: block; }
/* Hovering anywhere on the card reads as hovering the link. */
.article-card:hover .read-link,
.featured-article:hover .read-link { opacity: .7; }
.article-card:hover .read-link svg,
.featured-article:hover .read-link svg { transform: rotate(45deg); }
.article-item { transition: opacity .2s; }
.article-item.hidden { display: none; }
.property-card.hidden { display: none; }

@media(max-width: 991px) {
 .featured-article {
   grid-template-columns: 1fr;
 }

 .articles-grid-3 {
   grid-template-columns: 1fr 1fr;
 }

 /* CTA (Author) */
 .cta-author-card { height: auto; flex-direction: column; align-items: stretch; gap: 28px; padding: 40px 65px; }
 .cta-author-photo { order: -1; max-width: none; width: 100%;  }
 .cta-author-photo img { width: 100%; height: 100%; }

}
@media(max-width: 991px) and (min-width: 660px) {
    .insights-grid {
        flex-direction: column;

    }
    .insights-grid .insight-card.insight-large{
        flex: auto;
    }
    .insights-grid  .insight-stack {
        flex-direction: row;
    }
    .insight-small-col {
        flex-direction: row;
    }
}
@media(max-width: 767px) {
 .cat-filter {
   justify-content: flex-start;
 }
}

@media(max-width: 575px) {
 .articles-grid-3 {
   grid-template-columns: 1fr;
 }

}

/* ══════════════════════════════════════════════════════════
   BLOCK 21 — suburb-tiles-section
══════════════════════════════════════════════════════════ */

.suburb-tiles-section { padding: 40px var(--pad-x) 80px; display: flex; flex-direction: column; gap: 48px; }
.suburb-tiles-header { display: flex; flex-direction: column; gap: 24px; /*max-width: 640px;*/ }
.suburb-tiles-subtext { font-family: var(--font-body); font-size: 16px; line-height: 24px; color: #434343; max-width: 760px; }
.suburb-tiles-groups { display: flex; flex-direction: column; }

/* One collapsible panel per area group. */
.suburb-group { border-top: 1px solid var(--border-light); }
.suburb-group:last-child { border-bottom: 1px solid var(--border-light); }
.suburb-group-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 24px 0;
  background: none; border: none; cursor: pointer; text-align: left;
}
.suburb-group-name {
  font-family: var(--font-heading); font-weight: 400;
  font-size: 24px; line-height: 30px; color: var(--primary); flex: 1;
}
.suburb-group-body { display: none; padding-bottom: 40px; }
.suburb-group.open .suburb-group-body { display: block; }

/* The theme's own .faq-plus is scoped to the off-market block, so this panel
   carries its own copy of the plus/minus glyph. */
.suburb-group .faq-plus { flex-shrink: 0; width: 16px; height: 16px; position: relative; }
.suburb-group .faq-plus::before,
.suburb-group .faq-plus::after { content: ''; position: absolute; background: var(--primary); border-radius: 2px; }
.suburb-group .faq-plus::before { width: 2px; height: 16px; top: 0; left: 7px; transition: transform .2s; }
.suburb-group .faq-plus::after { width: 16px; height: 2px; top: 7px; left: 0; }
.suburb-group.open .faq-plus::before { transform: rotate(90deg); }

.suburb-list { display: flex; flex-direction: column; }
.suburb-list-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; border-top: 1px solid var(--border-light);
  text-decoration: none; color: inherit; cursor: pointer;
}
.suburb-list-item:first-child { border-top: none; }
.suburb-list-info { display: flex; flex-direction: column; gap: 2px; }
.suburb-list-name { font-family: var(--font-heading); font-size: 20px; line-height: 26px; color: var(--primary); }
.suburb-list-stat { font-size: 14px; line-height: 20px; color: #434343; }
.suburb-list-item:hover .btn-circle svg { transform: rotate(45deg); }


/* ══════════════════════════════════════════════════════════
   BLOCK 22 
══════════════════════════════════════════════════════════ */

/* ─── Filter bar ── */
    .purchases-filter {
      padding: 16px;
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
      background: var(--bg-page);
      position: relative;
    }
    .purchases-filter::before,
    .purchases-filter::after {
      content: "";
      position: absolute;
      left: 50%;
      width: 100vw;
      margin-left: -50vw;
      height: 1px;
      background: var(--border-light);
    }
    .purchases-filter::before { top: 0; }
    .purchases-filter::after { bottom: 0; }
    .filter-tabs {
      background: var(--white);
      display: inline-flex; padding: 4px; border-radius: var(--radius-pill);
    }
    .filter-tab {
      padding: 10px 20px; border-radius: var(--radius-pill);
      font-family: var(--font-body); font-size: 14px; font-weight: 500;
      cursor: pointer; border: none; background: transparent;
      color: var(--black); transition: background .18s, color .18s; white-space: nowrap;
    }
    .filter-tab.active { background: var(--primary); color: var(--white); }
    .filter-dropdowns { display: flex; align-items: center; gap: 8px; }
    .filter-select {
      appearance: none; -webkit-appearance: none;
      padding: 10px 36px 10px 14px; border-radius: var(--radius-pill);
      border: 1px solid var(--border-light); background: var(--white);
      font-family: var(--font-body); font-size: 14px; font-weight: 500;
      color: var(--black); cursor: pointer; transition: border-color .15s;
      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23402020' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 12px center;
    }
    .filter-select:hover { border-color: var(--primary); }
    .filter-select:focus { outline: none; border-color: var(--primary); }



/* ── Basic layout blocks (L1–L7) ─────────────────────────── */

/* Shared section padding */
.layout-section { padding: var(--pad-y) var(--pad-x); background: var(--white); box-shadow: 0 0 0 100vmax var(--white); clip-path: inset(0 -100vmax); }
.layout-section-stone { padding: var(--pad-y) var(--pad-x); background: var(--bg-stone); box-shadow: 0 0 0 100vmax var(--bg-stone); clip-path: inset(0 -100vmax); }
.layout-section-dark { padding: var(--pad-y) var(--pad-x); background: var(--primary); box-shadow: 0 0 0 100vmax var(--primary); clip-path: inset(0 -100vmax); }

/* L1/L2 — Split image + text */
.split-wrap {
  display: flex;
  gap: 80px;
  align-items: center;
}
.split-img {
  flex: 0 0 52%;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.split-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-img-tall img  { aspect-ratio: 4/5; }
.split-img-wide img  { aspect-ratio: 16/9; }
.split-content { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.split-content .split-label {
  font-size: 14px; font-weight: 500; letter-spacing: 0.14px; color: var(--black);
}
.split-content .split-heading { color: var(--primary); }
.split-content .split-body {
  font-size: 16px; line-height: 24px; color: var(--grey-dark);
}
.split-content .split-body + .split-body { margin-top: -8px; }

/* L3/L4 — Full-width text */
.fulltext-wrap {
  max-width: 800px;
}
.fulltext-wrap.centered {
  margin: 0 auto;
  text-align: center;
  align-items: center;
}
.fulltext-wrap { display: flex; flex-direction: column; gap: 24px; }
.fulltext-label {
  font-size: 14px; font-weight: 500; letter-spacing: 0.14px; color: var(--black);
}
.fulltext-body { font-size: 20px; line-height: 28px; color: var(--grey-dark); }
.fulltext-body-sm { font-size: 16px; line-height: 24px; color: var(--grey-dark); }

/* Insights / news block (15B) */
.insights-header-left { display: flex; flex-direction: column; gap: 24px; }
.insight-card { border-radius: var(--radius-card); overflow: hidden; position: relative; }
.insight-large { flex: 2 0 0; aspect-ratio: 872 / 611; height: auto; }
.insight-stack { display: flex; flex-direction: column; gap: 16px; flex: 1 0 0; }
.insight-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.insight-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 24px; }
.insight-heading { color: var(--white); }

/* L5 — 3-column text */
.col3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.col3-item { display: flex; flex-direction: column; gap: 16px; }
.col3-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary); flex-shrink: 0;
}
.col3-heading { color: var(--primary); }
.col3-body { font-size: 16px; line-height: 24px; color: var(--grey-dark); }

/* L6 — 2-column text */
.col2-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px;
}
.col2-item { display: flex; flex-direction: column; gap: 16px; }
.col2-heading { color: var(--primary); }
.col2-body { font-size: 16px; line-height: 24px; color: var(--grey-dark); }
.col2-rule { border: none; border-top: 1px solid var(--border-light); margin-bottom: 32px; }

/* L7 — Pull quote */
.pullquote-wrap {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.pullquote-mark {
  font-family: var(--font-heading);
  font-size: 120px;
  line-height: 60px;
  color: var(--primary-300);
  opacity: .4;
  user-select: none;
}
.pullquote-text {
  font-family: var(--font-heading); font-weight: 400;
  font-size: 40px; line-height: calc(46 / 40); letter-spacing: -0.8px;
  color: var(--white);
}
.pullquote-attribution {
  font-size: 14px; font-weight: 500; letter-spacing: 0.14px;
  color: rgba(255,255,255,.5); text-transform: uppercase;
}

@media(max-width: 991px) {
 .split-wrap {
   flex-direction: column;
 } 
 .split-img {
   flex-basis: auto;
 }

 .col3-grid {
   grid-template-columns: 1fr 1fr;
 }
}

@media(max-width: 767px) {
 .col2-grid {
   column-gap: 30px;
 } 
  .pullquote-text {
    font-size: 35px;
  }
}

@media(max-width: 575px) {
 .col3-grid, .col2-grid {
   grid-template-columns: 1fr;
 }

  .pullquote-text {
    font-size: 32px;
  }
  .pullquote-wrap {
    gap: 20px;
  }
}

/* ── Footer (Block 16) ──────────────────────────────────────── */
.footer-wrap { width: 100vw; margin-left: calc(50% - 50vw); padding: 24px; box-sizing: border-box; }
.footer-card {
  background: var(--primary);
  border-radius: var(--radius-card);
  padding: 40px 36px calc(17.9% + 60px);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-logo-watermark {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  max-width: 1440px;
  margin: 0 auto;
}
.footer-logo-watermark svg { width: 100%; height: auto; display: block; }
.footer-inner { max-width: 1440px; margin: 0 auto; position: relative; }
.footer-grid { display: flex; gap: 24px; margin-bottom: 60px; }
.footer-col {
  /* Equal shares rather than a fixed 313px, so the suburbs column can take a
     double share below without pushing the contact column off the row. */
  flex: 1 1 0;
  min-width: 0;
  display: flex; flex-direction: column; gap: 32px;
}
.footer-col--suburbs { flex: 2 1 0; }
.footer-col-heading { font-size: 20px; line-height: 24px; color: var(--white); }
/* A heading that links reads the same until you hover it. */
.footer-col-heading a { color: inherit; transition: opacity .15s; }
.footer-col-heading a:hover { opacity: .7; }
.footer-links { display: flex; flex-direction: column; gap: 12px; list-style: none }
/* ~35 suburbs in one column ran the footer far too tall — flow them into three.
   Multi-column keeps them alphabetical down each column, unlike a grid. */
.footer-col--suburbs .footer-links {
  display: block;
  columns: 3;
  column-gap: 24px;
}
.footer-col--suburbs .footer-links li { margin-bottom: 12px; break-inside: avoid; }
.footer-col--suburbs .footer-links li:last-child { margin-bottom: 0; }
.footer-links a, .footer-links p , .footer-links li { font-size: 14px; line-height: 20px; color: var(--white); }
.footer-contact { font-size: 14px; line-height: 20px; color: var(--white); }
.footer-contact p + p { margin-top: 28px; }
.footer-bottom { display: flex; align-items: center; margin-top: 60px; }
.footer-legal-links { display: flex; gap: 20px; flex: 1; list-style: none }
.footer-legal-links a { font-size: 14px; line-height: 20px; color: var(--white); }
.footer-copyright { flex: 1; font-size: 14px; line-height: 20px; color: var(--white); }
.footer-social { display: flex; gap: 10px; align-items: center; }
.footer-social-icon { width: 24px; height: 24px; opacity: .9; }

/* ── Image hover zoom ── */
.profile-photo-lg img, .market-photo img, .offmarket-photos img, .property-photo img,
.profile-photo img, .banner-photo img, .banner-image img, .tphoto-large img, .tphoto-sm img,
.property-img-frame img, .sourced-author-img-frame img,
.insight-img, .article-img-inner, .insight-large img, .insight-small img,
.team-card img, .why-img img, .hero-img img { transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.profile-photo-lg:hover img, .market-photo:hover img, .offmarket-photos:hover img,
.property-card:hover .property-photo img,
.property-card:hover .property-img-frame img,
.sourced-author-card:hover .sourced-author-img-frame img,
.profile-card:hover .profile-photo img,
.banner-photo:hover img, .banner-image:hover img, .tphoto-large:hover img, .tphoto-sm:hover img,
.insight-card:hover .insight-img,
.insight-large:hover img, .insight-small:hover img,
.article-card:hover .article-img-inner,
.featured-article:hover .article-img-inner,
.team-card:hover img, .why-img:hover img, .hero-img:hover img { transform: scale(1.06); }
@media(max-width: 1200px) {
  .testimonial-card {
      flex-direction: column;
      align-items: stretch;
    }
    .testimonial-left, .testimonial-right {
      flex-basis: auto;
    }
}

@media(max-width: 991px) {
 :root {
   --pad-y: 80px;
 } 

  /* Nav collapses here, not at 767px: the logo (a fixed 140px SVG that cannot
     shrink) plus the five menu items and the CTA need ~990px, so between 768
     and 990 the row used to overflow the pill. */
  .nav-center { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-inner > .btn-primary { display: none; }
}

.prose-section { padding: var(--pad-y) var(--pad-x); display: flex; gap: 60px; align-items: flex-start; }
.prose-heading { flex: 0 0 400px; font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 48px; letter-spacing: -0.8px; color: var(--primary); margin-bottom: 0; }
.prose-body { flex: 1; max-width: 700px; font-size: 17px; line-height: 28px; color: #434343; }
.prose-body p + p { margin-top: 20px; }
/* ─── Mobile ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  :root { --pad-x: 20px; --pad-y: 64px; }

  /* Nav — collapsing already happened at 991px; this is just tighter sizing. */
  .nav-wrap { padding: 12px; }
  .nav-inner { padding: 8px 8px 8px 20px; height: 56px; }
  /* With the menu open the bar and the dropdown read as one panel, so its top
     corners match the dropdown's 24px bottom ones instead of staying a pill. */
  .nav-wrap.menu-open .nav-inner {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }
  .btn-primary { font-size: 13px; padding: 10px 14px; }
  .banner-section { padding: 48px var(--pad-x) 40px; }
  /* 900px would eat a phone screen whole, so the hero is shorter here. */
  .banner-hero { height: 560px; padding: 0; }
  .banner-hero-content { padding: 32px var(--pad-x); gap: 20px; }
  .banner-heading { font-size: 36px; line-height: 45px; }
  .banner-body { font-size: 17px; line-height: 26px; }
  .stats-row { flex-direction: column; gap: 1px; }
  .stat-item { padding: 28px 24px; border-radius: 0 !important;  align-items: center;}
  .stat-number { font-size: 40px; line-height: 48px; }
  .services-heading { font-size: 34px; line-height: 42px; }
  .services-subheading { font-size: 17px; line-height: 26px; margin-bottom: 40px; }
  .services-grid { flex-direction: column; }
  .svc-tile { min-height: unset; }
  .process-header-row { margin-bottom: 40px; }
  .process-arrows { display: none; }
  .process-steps { padding-right: var(--pad-x); }
  .process-step, .process-steps--peek .process-step { flex: 0 0 260px; padding: 40px 24px 24px; }
  .process-step-num { font-size: 50px; line-height: 0.5; }
  .process-step-name { font-size: 24px; line-height: 31px; }
  .faq-inner { flex-direction: column; gap: 24px; }
  .faq-heading, .faq-list { flex: unset; width: 100%; }
  .faq-heading { font-size: 34px; line-height: 42px; }
  /* Buyers agent Perth page */
  .prose-section { flex-direction: column; gap: 20px; }
  .prose-heading { flex: unset; font-size: 30px; line-height: 38px; }
  .prose-body { flex: unset; max-width: none; font-size: 17px; line-height: 26px; }
  .lead-body { font-size: 17px; line-height: 26px; }
  .lead-section { padding-top: 40px; }
  .agents-heading { font-size: 34px; line-height: 42px; }
  .agents-grid { grid-template-columns: 1fr; }
  .cta-reviews { grid-template-columns: 1fr; gap: 28px; }

  /* Hero */
  .hero { padding-top: 48px; }
  .hero-heading { font-family: var(--font-heading); font-size: 34px; line-height: 42px; letter-spacing: -0.5px; margin-bottom: 28px; }
  .hero-cta { margin-bottom: 48px; }
  .hero-image-wrap { margin: 0 12px; height: 240px; }
  /* .hero-image-wrap iframe { display: none; } */

  /* What we do */
  .section-what-we-do { padding-top: 64px; padding-bottom: 64px; }
  .two-col { flex-direction: column; gap: 16px; }
  .col-label { flex: unset; }
  .col-content { flex: unset; }
  .heading-1, .heading-2 { font-size: 32px; line-height: 40px; }
  /* Section headings that never had a mobile size — brought to the same 32px
     as .heading-1 (the "Our team" heading) so every section matches. */
  .stats-title { font-size: 32px; line-height: 40px; }
  .featured-title { font-size: 28px; line-height: 36px; }
  .why-center-heading { font-size: 28px; line-height: 36px; }
  .display-2 {
    font-size: 36px;
    line-height: 42px;
  }

  /* Why Verve — the tab row and shared panel give way to the accordion. */
  .why-section { padding: 56px 20px; }
  .why-grid { flex-direction: column; min-height: unset; gap: 40px; }
  .why-top { gap: 32px; padding-bottom: 0; }
  .why-left-label { font-size: 34px; line-height: 42px; }
  .why-features { display: none; }
  .why-bottom { display: none; }
  .why-accordion { display: flex; }

  /* Specialists */
  /* stretch, not flex-start: in a column flex container flex-start sizes children
     to their content, and .spec-right's content is a max-content marquee several
     thousand pixels wide — that is what was blowing the page out sideways. */
  .specialists-section { flex-direction: column; padding: 56px 20px; gap: 32px; align-items: stretch; }
  .spec-left { flex: unset; gap: 24px; align-items: flex-start; }
  .spec-right { width: 100%; }
  /* Smaller tiles so the strip reads as a strip on a phone, not as cropped
     half-photos; overflow:hidden on .spec-right keeps it unscrollable. */
  .spec-photo { width: 180px; }
  .spec-row { gap: 8px; }
  /* .spec-right { display: none; } */
  .spec-heading { font-size: 34px; line-height: 42px; }
  .spec-label {
    margin-bottom: -20px;
  }

  /* Properties */
  .property-grid { flex-direction: column; }
  .property-card { flex: unset; width: 100%; }


  /* Testimonial */
  .testimonial-card { padding: 48px 24px; gap: 40px; }
  .testimonial-left { flex: unset; }
  /* iOS renders a gradient mask over an animated child unreliably — the whole
     strip can come out blank. It is decoration, so drop it on phones. */
  .testimonial-quotes {
    -webkit-mask-image: none;
    mask-image: none;
}
  /* A nested scroll box inside a transformed (animating) ancestor is the other
     known Safari blank-render trigger, and nobody scrolls it on a phone anyway:
     clamp the quote instead. */
  /*  .quote-text {
    height: auto;
    max-height: none;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
  } */
  .testimonial-heading { font-size: 32px; line-height: 40px; margin-bottom: 24px; }
  .testimonial-right { flex: unset; width: 100%; }
  /* The small tiles are ~130-160px wide here, so "Meet Michael and Athena" can
     neither fit on one line (it was being cut off) nor wrap freely (it filled
     the whole tile). Two lines, clamped, with the label sized down to match. */
  .tphoto-sm-label { padding: 28px 12px 10px; align-items: flex-end; }
  .tphoto-sm-label span {
    white-space: normal;
    font-size: 13px;
    line-height: 17px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tphoto-sm-label svg { flex-shrink: 0; }

  /* Insights */
  .insights-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .insights-grid { flex-direction: column; }
  .insight-large { flex: unset; aspect-ratio: 4/3; }
  .insight-stack { flex-direction: column; }
  .insight-small { flex: unset; aspect-ratio: 4/3; min-height: 220px; }

  /* CTA */
  .cta-section { padding: 0 12px 48px; }
  .cta-card { height: auto; padding: 48px 28px; align-items: flex-start; }
  .cta-logo-graphic { display: none; }
  .cta-heading { font-size: 32px; line-height: 40px; }

  /* CTA (Author) */
  .cta-author-section { padding: 0 12px 48px; }
  .cta-author-card { padding: 24px 28px 48px;}
  .cta-author-photo { margin: 0; }
  .cta-author-heading { font-size: 32px; line-height: 40px; }

  /* Footer */
  .footer-wrap { padding: 12px; }
  .footer-card { padding: 40px 24px calc(40% + 40px); }
  .footer-grid { flex-direction: column; gap: 40px; }
  .footer-col { flex: unset; }
  /* Full width once stacked, but three columns of names is too narrow on a phone. */
  .footer-col--suburbs .footer-links { columns: 2; }

  .suburb-tiles-section { padding: 24px 20px 48px; gap: 32px; }
  .suburb-group-name { font-size: 20px; line-height: 26px; }
  .suburb-list-name { font-size: 18px; line-height: 24px; }

  /* Legal pages (default page template) */
  .section-wrap { padding: 64px var(--pad-x); }
  .section-wrap .body-base h2 { font-size: 24px; line-height: 30px; margin: 40px 0 12px; }
  .section-wrap .body-base h3 { font-size: 20px; line-height: 26px; margin: 32px 0 10px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 40px; }
}

@media(max-width: 659px) {
    .insights-grid {
         flex-direction:row;
        white-space: nowrap;
        align-items: flex-start;
        overflow-x: auto;
    }
    .insight-large {
        flex: 0 0 301px;
        aspect-ratio: 4 / 3;
        white-space: normal;
    }

    .insight-stack {
        flex-direction: row;
        white-space: nowrap;
        flex-basis: max-content;
        align-items: flex-start;
    }

    .insight-small {
        flex: 0 0 301px;
        aspect-ratio: 4 / 3;
        min-height: 220px;
        white-space: normal;
    }

    .page-id-215 .property-grid:has(.property-card:nth-child(2)) {
        flex-direction: row;
        white-space: nowrap;
        overflow-x: auto;
    }
    .page-id-215 .property-grid:has(.property-card:nth-child(2)) .property-card {
        flex: 0 0 79vw;
        white-space: normal;
    }
}
@media(max-width: 575px) {
  .tphoto-row { flex-direction: column; }
  .tphoto-sm { flex: unset; width: 100%; }
  .tphoto-sm-label span { font-size: 14px; line-height: 20px; -webkit-line-clamp: 1; }

  :root { --pad-y: 40px; }
}



/* ── Page-specific background — /start-the-process/ ──────── */
body.page-start-the-process { background: #402020; }