/* ============================================================
   MATT MANSER REAL ESTATE — Design System
   Background: #FFFFFF  Text: #181614  Gold: #C49E46  (marketing scheme, Sept 2026)
   Headings: Playfair Display  Body: Inter
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
::selection { background: rgba(196,158,70,0.30); color: #181614; }

/* ── Tokens ── */
:root {
  --bg:        #FFFFFF;
  --bg2:       #FAF8F5;
  --bg3:       #F2EDE3;
  --gold:      #C49E46;
  --gold-lt:   #A8843A;
  --gold-dk:   #8A6C2C;
  --gold-dim:  rgba(196,158,70,0.10);
  --gold-line: rgba(196,158,70,0.30);
  --text:      #2E2C2A;
  --text-muted:#6E6C70;
  --text-dim:  #8F8D92;
  --white:     #181614;
  --radius:    7px;
  --shadow:    0 8px 34px rgba(24,22,20,0.12);
  --shadow-card: 0 4px 20px rgba(24,22,20,0.08), 0 1px 2px rgba(24,22,20,0.06);
  --glow-gold: 0 0 0 1px rgba(196,158,70,0.45), 0 8px 24px rgba(196,158,70,0.20);
  --ff-head:   'Playfair Display', Georgia, serif;
  --ff-body:   'Inter', system-ui, sans-serif;
  --max:       1100px;
  --nav-h:     68px;
}

/* ── Base ── */
body {
  font-family: var(--ff-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--gold-lt); }
img { display: block; max-width: 100%; }
button, input, select, textarea {
  font-family: var(--ff-body);
  font-size: 1rem;
}

/* ── Typography ── */
h1,h2,h3,h4,h5 {
  font-family: var(--ff-head);
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
}
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.15rem; }
p { color: var(--text-muted); line-height: 1.8; }
.gold { color: var(--gold); }
.italic { font-style: italic; }
.lead {
  font-size: 1.15rem;
  color: var(--text);
  line-height: 1.8;
  font-weight: 300;
}

/* ── Layout ── */
.container { max-width: var(--max); margin: 0 auto; padding: 0 2rem; }
.section { padding: 6rem 0; }
.section-sm { padding: 4rem 0; }

.section-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.section-label::before {
  content: '';
  display: block;
  width: 28px; height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

/* ── Navigation ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  transition: background 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(16px);
  border-color: var(--gold-line);
  box-shadow: 0 4px 24px rgba(24,22,20,0.08);
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  font-family: var(--ff-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.nav-logo span { display: block; color: var(--gold); font-size: 0.65rem; font-family: var(--ff-body); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 1px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}
.nav-links a {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.4rem 0.75rem;
  letter-spacing: 0.02em;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); }
.nav-links .cta-link a {
  color: var(--gold);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  padding: 0.45rem 1rem;
}
.nav-links .cta-link a:hover { background: var(--gold-dim); color: var(--gold-lt); }
.nav-links .cta-link-book a {
  color: #C49E46;
  border: 1px solid #C49E46;
  border-radius: var(--radius);
  padding: 0.45rem 1rem;
  background: transparent;
}
.nav-links .cta-link-book a:hover { background: rgba(196,158,70,0.12); color: #C49E46; }
.nav-toggle {
  display: none;
  background: none; border: none;
  color: var(--text); font-size: 1.4rem;
  cursor: pointer; padding: 0.25rem;
  line-height: 1;
}
.nav-mobile {
  display: none;
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--gold-line);
  padding: 1.5rem 2rem;
  z-index: 99;
}
.nav-mobile.open { display: block; }
.nav-mobile a {
  display: block;
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 500;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(24,22,20,0.08);
}
.nav-mobile a:hover { color: var(--gold); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: all 0.25s;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold-lt), var(--gold) 55%, var(--gold-dk));
  color: #181614;
  box-shadow: 0 2px 12px rgba(196,158,70,0.25);
}
.btn-gold:hover {
  background: linear-gradient(135deg, var(--gold-lt), var(--gold-lt) 55%, var(--gold));
  color: #181614;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(196,158,70,0.4);
}
.btn-outline {
  background: transparent;
  border: 1px solid var(--gold-line);
  color: var(--gold);
}
.btn-outline:hover { background: var(--gold-dim); border-color: var(--gold); color: var(--gold-lt); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  border: 1px solid rgba(24,22,20,0.10);
  color: var(--text-muted);
}
.btn-ghost:hover { border-color: rgba(24,22,20,0.28); color: var(--text); }
.btn-lg { padding: 1rem 2.25rem; font-size: 0.9rem; }
.btn-sm { padding: 0.5rem 1.25rem; font-size: 0.78rem; }

/* ── Cards ── */
.card {
  background: var(--bg2);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  padding: 2rem;
  position: relative;
  box-shadow: var(--shadow-card);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  opacity: 0; transition: opacity 0.3s;
}
.card:hover {
  border-color: rgba(196,158,70,0.4);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card), var(--glow-gold);
}
.card:hover::before { opacity: 1; }

/* ── Hero ── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  position: relative;
  overflow: hidden;
}
/* Hero atmosphere. Every value here was originally tuned against the OLD DARK hero, where
   gold at 3-6% opacity reads clearly. On the white scheme the same values are effectively
   invisible — which is why the homepage lost its depth when the palette changed, with nothing
   actually broken. Same gold (#C49E46), enough weight to be seen on white, and slow movement so
   the hero breathes instead of sitting flat. */
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 62% 38%, rgba(196,158,70,0.17) 0%, transparent 62%),
    radial-gradient(ellipse 60% 50% at 18% 78%, rgba(196,158,70,0.11) 0%, transparent 58%),
    radial-gradient(ellipse 55% 45% at 88% 82%, rgba(196,158,70,0.08) 0%, transparent 60%);
  animation: heroDrift 22s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-1.6%, 1.2%, 0) scale(1.05); }
  100% { transform: translate3d(1.4%, -1%, 0) scale(1.03); }
}
.hero-grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(196,158,70,0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196,158,70,0.11) 1px, transparent 1px);
  background-size: 62px 62px;
  /* Fade the grid out at the edges so it reads as depth rather than graph paper. */
  -webkit-mask-image: radial-gradient(ellipse 78% 68% at 50% 45%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 78% 68% at 50% 45%, #000 35%, transparent 100%);
  animation: heroGridPan 38s linear infinite;
}
@keyframes heroGridPan {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 62px 62px, 62px 62px; }
}
/* A slow sweep of light across the hero — the single thing that makes it feel alive. */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(115deg, transparent 38%, rgba(196,158,70,0.13) 50%, transparent 62%);
  transform: translateX(-35%);
  animation: heroSheen 14s ease-in-out infinite;
}
@keyframes heroSheen {
  0%, 62% { transform: translateX(-38%); opacity: 0; }
  72%     { opacity: 1; }
  100%    { transform: translateX(38%); opacity: 0; }
}
/* Anyone who has asked their system to stop animating gets a still hero, not a broken one. */
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero-grid-lines, .hero::after { animation: none; }
  .hero::after { opacity: 0; }
}

/* ── Page Header (inner pages) ── */
.page-header {
  padding: calc(var(--nav-h) + 4rem) 0 4rem;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--gold-line);
}
.page-header-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(196,158,70,0.06) 0%, transparent 70%);
}

/* ── Gold divider ── */
.divider {
  width: 48px; height: 2px;
  background: linear-gradient(to right, var(--gold), transparent);
  margin: 1.5rem 0;
}
.divider-center { margin-left: auto; margin-right: auto; }

/* ── Stat blocks ── */
.stats-row {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}
.stat-item strong {
  display: block;
  font-family: var(--ff-head);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(135deg, var(--gold-lt), var(--gold) 65%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);   /* fallback for browsers without background-clip:text support */
}
.stat-item span {
  font-size: 0.8rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
  display: block;
}

/* ── Forms ── */
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.form-control {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--bg3);
  border: 1px solid rgba(24,22,20,0.12);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 0.2s;
  outline: none;
}
.form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(196,158,70,0.12); }
.form-control::placeholder { color: var(--text-dim); }
select.form-control option { background: var(--bg2); }
textarea.form-control { resize: vertical; min-height: 120px; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-hint {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 0.35rem;
}
.form-success {
  display: none;
  background: rgba(196,158,70,0.1);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  padding: 1.25rem;
  color: var(--text);
  text-align: center;
  font-size: 0.9rem;
  margin-top: 1rem;
}

/* ── Guide sections ── */
.guide-step {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.75rem 0;
  border-bottom: 1px solid rgba(24,22,20,0.08);
}
.guide-step:last-child { border-bottom: none; }
.step-num {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-head);
  font-size: 0.9rem;
  color: var(--gold);
  font-weight: 600;
}
.step-content h4 { color: var(--white); margin-bottom: 0.4rem; }
.step-content p { font-size: 0.9rem; }

/* ── Checklist ── */
.checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.checklist li::before {
  content: '';
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--gold-dim);
  border: 1px solid var(--gold-line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23C49E46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,6 5,9 10,3'/%3E%3C/svg%3E");
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
}

/* ── Accordion ── */
.accordion-item {
  border-bottom: 1px solid rgba(24,22,20,0.09);
}
.accordion-btn {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 1.25rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  color: var(--text);
  font-family: var(--ff-head);
  font-size: 1.05rem;
  font-weight: 600;
  transition: color 0.2s;
}
.accordion-btn:hover { color: var(--gold); }
.accordion-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  color: var(--gold);
  transition: transform 0.3s;
}
.accordion-item.open .accordion-icon { transform: rotate(45deg); }
.accordion-body {
  display: none;
  padding-bottom: 1.25rem;
}
.accordion-item.open .accordion-body { display: block; }
.accordion-body p { font-size: 0.9rem; }

/* ── Calculator ── */
.calc-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.calc-result {
  background: var(--bg2);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  padding: 2rem;
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
}
.calc-result .result-main {
  font-family: var(--ff-head);
  font-size: 3rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin: 1rem 0 0.25rem;
}
.calc-result .result-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-dim);
}
.calc-breakdown {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(24,22,20,0.09);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.calc-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
}
.calc-row span:first-child { color: var(--text-dim); }
.calc-row span:last-child { color: var(--text); font-weight: 500; }
.range-wrap { position: relative; }
input[type="range"] {
  width: 100%;
  height: 4px;
  background: var(--bg3);
  border-radius: 2px;
  appearance: none;
  outline: none;
  margin-top: 0.5rem;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  border: 2px solid var(--bg);
}
.range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 0.3rem;
}

/* ── Suburb cards ── */
.suburb-card {
  background: var(--bg2);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s;
}
.suburb-card:hover { transform: translateY(-4px); border-color: rgba(196,158,70,0.4); }
.suburb-header {
  background: linear-gradient(135deg, var(--bg3) 0%, #F0EADF 100%);
  padding: 2rem;
  border-bottom: 1px solid var(--gold-line);
}
.suburb-header h3 { margin-bottom: 0.25rem; }
.suburb-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--gold-line);
  border-radius: 2px;
}
.suburb-body { padding: 1.75rem; }
.suburb-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}
.trait {
  font-size: 0.72rem;
  padding: 0.2rem 0.6rem;
  background: var(--gold-dim);
  border: 1px solid var(--gold-line);
  border-radius: 2px;
  color: var(--text-muted);
}

/* ── Business Card page ── */
.bcard-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--bg);
}
.bcard {
  width: min(400px, 100%);
  background: var(--bg2);
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
}
.bcard-top {
  background: linear-gradient(135deg, #F0EADF 0%, var(--bg3) 100%);
  padding: 2.5rem 2rem 2rem;
  text-align: center;
  position: relative;
}
.bcard-top::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.bcard-avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  margin: 0 auto 1.25rem;
  background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-head);
  font-size: 2rem;
  color: var(--gold);
  font-weight: 700;
}
.bcard-name {
  font-family: var(--ff-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.2rem;
}
.bcard-title {
  font-size: 0.78rem;
  color: var(--gold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
}
.bcard-body { padding: 1.75rem 2rem; }
.bcard-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.bcard-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--bg3);
  border: 1px solid rgba(24,22,20,0.09);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s;
  text-decoration: none;
}
.bcard-link:hover {
  border-color: var(--gold-line);
  color: var(--gold);
  transform: translateX(3px);
}
.bcard-link-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius);
  background: var(--gold-dim);
  border: 1px solid var(--gold-line);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bcard-link-icon svg { width: 15px; height: 15px; color: var(--gold); }
.bcard-footer {
  padding: 1.25rem 2rem;
  border-top: 1px solid rgba(24,22,20,0.08);
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* ── Toast / Alert ── */
.alert {
  padding: 0.9rem 1.25rem;
  border-radius: var(--radius);
  font-size: 0.88rem;
  border: 1px solid;
}
.alert-success { background: rgba(52,199,89,0.08); border-color: rgba(52,199,89,0.25); color: #6edba0; }
.alert-error   { background: rgba(255,69,58,0.08); border-color: rgba(255,69,58,0.25); color: #f07070; }

/* ── Grid helpers ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.gap-sm { gap: 1rem; }

/* ── CTA Banner ── */
.cta-band {
  background: var(--bg2);
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
  padding: 4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(196,158,70,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Footer ── */
.footer {
  background: var(--bg);
  border-top: 1px solid var(--gold-line);
  padding: 3rem 0 1.5rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(24,22,20,0.08);
  margin-bottom: 1.5rem;
}
.footer-logo {
  font-family: var(--ff-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.75rem;
}
.footer-logo span { color: var(--gold); }
.footer-text { font-size: 0.85rem; color: var(--text-dim); line-height: 1.7; max-width: 260px; }
.footer-col h5 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.footer-col a {
  display: block;
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 2.1;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-dim);
  flex-wrap: wrap;
  gap: 0.5rem;
}
.footer-bottom a { color: var(--text-dim); }
.footer-bottom a:hover { color: var(--gold); }

/* ── Scroll reveal ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .calc-wrap { grid-template-columns: 1fr; }
  .calc-result { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  :root { --max: 100%; }
  .container { padding: 0 1.25rem; }
  .section { padding: 4rem 0; }
  .stats-row { gap: 1.5rem; }
  .footer-grid { grid-template-columns: 1fr; }
  h1 { font-size: 2.2rem; }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-section { padding: 6rem 0; background: var(--bg); overflow: hidden; }
.testi-track-outer { position: relative; overflow: hidden; margin-top: 3rem; }
.testi-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}
.testi-card {
  min-width: calc(50% - 0.75rem);
  background: var(--bg2);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  padding: 2rem 2.25rem;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.3s;
}
.testi-card:hover { border-color: rgba(196,158,70,0.4); }
.testi-card::before {
  content: '\201C';
  position: absolute; top: 1rem; right: 1.5rem;
  font-family: var(--ff-head);
  font-size: 5rem;
  color: rgba(196,158,70,0.08);
  line-height: 1;
  pointer-events: none;
}
.testi-stars {
  color: var(--gold);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}
.testi-text {
  font-size: 0.93rem;
  line-height: 1.75;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 1.5rem;
}
.testi-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.testi-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}
.testi-suburb {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 0.1rem;
}
.testi-source {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-align: right;
}
.testi-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 1.25rem; margin-top: 2rem;
}
.testi-prev, .testi-next {
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--gold-line);
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  border-radius: var(--radius);
  transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.testi-prev:hover, .testi-next:hover { border-color: var(--gold); color: var(--gold); }
.testi-dots { display: flex; gap: 0.4rem; }
.testi-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(24,22,20,0.18);
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  padding: 0;
}
.testi-dot.active { background: var(--gold); width: 20px; border-radius: 3px; }
.testi-rma-link {
  text-align: center; margin-top: 2.5rem;
  font-size: 0.85rem; color: var(--text-dim);
}
.testi-rma-link a { color: var(--gold); font-weight: 500; }
.testi-rma-link a:hover { color: var(--gold-lt); }

/* ============================================================
   PROPERTY LISTINGS
   ============================================================ */
.listings-section { padding: 5rem 0; }
.listings-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.listing-card {
  background: var(--bg2);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.listing-card:hover { transform: translateY(-4px); border-color: rgba(196,158,70,0.4); }
.listing-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Listing detail page ── */
.detail-back { display:inline-flex; align-items:center; gap:0.4rem; color:var(--text-dim); font-size:0.85rem; margin-bottom:1.5rem; }
.detail-back:hover { color: var(--gold); }
.detail-grid { display:grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items:start; }
.detail-gallery-main { position:relative; border-radius: var(--radius); overflow:hidden; background: var(--bg3); aspect-ratio: 4/3; }
.detail-gallery-main img { width:100%; height:100%; object-fit:cover; display:block; }
.detail-gallery-main .listing-badge { position:absolute; top:1rem; left:1rem; }
.detail-gallery-thumbs { display:grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; margin-top: 0.75rem; max-height: 13rem; overflow-y: auto; padding-right: 0.25rem; }
.detail-gallery-thumbs img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius: 6px; cursor:pointer; opacity:0.65; border: 1px solid transparent; transition: opacity 0.2s, border-color 0.2s; }
.detail-gallery-thumbs img:hover, .detail-gallery-thumbs img.active { opacity:1; border-color: var(--gold); }
.detail-gallery-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:none; background:rgba(20,18,16,0.55); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3; transition:background 0.2s, transform 0.15s; backdrop-filter:blur(2px); }
.detail-gallery-arrow:hover { background:var(--gold, #C49E46); color:#181614; }
.detail-gallery-arrow:active { transform:translateY(-50%) scale(0.92); }
.detail-gallery-arrow.prev { left:0.75rem; }
.detail-gallery-arrow.next { right:0.75rem; }
.detail-gallery-count { position:absolute; bottom:0.9rem; right:0.9rem; z-index:3; background:rgba(20,18,16,0.6); color:#fff; font-size:0.8rem; padding:0.25rem 0.6rem; border-radius:999px; letter-spacing:0.03em; }
.detail-openhomes { margin:1rem 0; padding:0.9rem 1rem; border:1px solid var(--gold-line, rgba(196,158,70,0.35)); border-radius:var(--radius,10px); background:var(--bg2, rgba(24,22,20,0.03)); }
.detail-openhomes-title { font-weight:700; letter-spacing:0.02em; margin-bottom:0.4rem; color:var(--gold,#C49E46); }
.detail-openhome { padding:0.15rem 0; font-size:0.98rem; }
.listing-badge.badge-open { background:#1f9d55; color:#fff; }
.detail-photo-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.75rem; width:100%; height:100%; color: var(--text-dim); background: linear-gradient(135deg, var(--bg3) 0%, #F0EADF 100%); }
.detail-address { font-family: var(--ff-head); font-size: 1.9rem; margin-bottom: 0.25rem; }
.detail-suburb { color: var(--text-dim); margin-bottom: 1rem; }
.detail-price { color: var(--gold); font-size: 1.4rem; font-weight: 600; margin: 1rem 0; }
.detail-specs { display:flex; gap:1.25rem; flex-wrap:wrap; margin: 1rem 0 1.5rem; padding: 1rem 0; border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line); }
.detail-spec { display:flex; align-items:center; gap:0.4rem; font-size:0.9rem; }
.detail-spec svg { width:16px; height:16px; opacity:0.7; color: var(--gold); }
.detail-description { line-height:1.7; color: var(--text-dim); white-space: pre-line; margin-bottom: 2rem; }
.detail-cta-row { display:flex; gap:1rem; flex-wrap:wrap; }
.detail-notfound { text-align:center; padding: 4rem 0; }
@media (max-width: 860px) {
  .detail-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.listing-photo {
  position: relative;
  height: 200px;
  background: var(--bg3);
  overflow: hidden;
  flex-shrink: 0;
}
.listing-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.listing-card:hover .listing-photo img { transform: scale(1.04); }
.listing-photo-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, var(--bg3) 0%, #F0EADF 100%);
  color: var(--text-dim);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.listing-photo-placeholder svg { opacity: 0.25; }
.listing-badge {
  position: absolute; top: 0.75rem; left: 0.75rem;
  font-size: 0.65rem; font-weight: 800;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 0.28rem 0.65rem;
  border-radius: 2px;
}
.badge-sale  { background: var(--gold); color: #181614; }
.badge-sold  { background: #4a4a4a; color: var(--white); }
.badge-under { background: #1a5f3a; color: #7ee8a2; }
.listing-body { padding: 1.25rem 1.4rem; flex: 1; display: flex; flex-direction: column; }
.listing-address {
  font-family: var(--ff-head);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.15rem;
  line-height: 1.3;
}
.listing-suburb {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 0.9rem;
}
.listing-specs {
  display: flex; gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.listing-spec {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.78rem; color: var(--text-muted);
}
.listing-spec svg { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.6; }
.listing-price {
  font-family: var(--ff-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 1rem;
  margin-top: auto;
}
.listing-footer {
  display: flex; gap: 0.6rem;
  margin-top: 0.25rem;
}
.listing-footer .btn { flex: 1; justify-content: center; font-size: 0.73rem; }
.listings-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 3.5rem 2rem;
  background: var(--bg2);
  border: 1px dashed var(--gold-line);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 0.9rem;
}
.listings-empty p { margin-top: 0.5rem; }
.listings-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--gold-line); margin-bottom: 0;
}
.listings-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 0.75rem 1.5rem; font-family: var(--ff-body); font-size: 0.85rem;
  font-weight: 600; color: var(--text-muted); cursor: pointer;
  transition: all 0.2s; margin-bottom: -1px;
}
.listings-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.listings-tab:hover { color: var(--text); }
.listings-panel { display: none; }
.listings-panel.active { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 2rem; }

/* ============================================================
   SOCIAL ICONS
   ============================================================ */
.social-row {
  display: flex; gap: 0.6rem; margin-top: 1rem;
}
.social-icon {
  width: 34px; height: 34px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  text-decoration: none;
  transition: all 0.2s;
  flex-shrink: 0;
}
.social-icon:hover { border-color: var(--gold); color: var(--gold); }
.social-icon svg { width: 15px; height: 15px; }

/* ============================================================
   UPDATED FOOTER (contact + social + RLA)
   ============================================================ */
.footer-grid-new {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(24,22,20,0.08);
  margin-bottom: 1.5rem;
}
.footer-contact-line {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.83rem; color: var(--text-muted);
  margin-top: 0.5rem;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-contact-line:hover { color: var(--gold); }
.footer-contact-line svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.6; }
.footer-rla {
  font-size: 0.7rem; color: var(--text-dim);
  margin-top: 1.25rem; line-height: 1.6;
}
@media (max-width: 900px) {
  .footer-grid-new { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .listings-panel.active { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer-grid-new { grid-template-columns: 1fr; }
  .testi-card { min-width: 88%; }
  .listings-grid, .listings-panel.active { grid-template-columns: 1fr; }
}

/* ============================================================
   PREMIUM UPGRADES — Hero, Particles, Proof Bar, Carousel,
   Stat Counters, Micro-interactions, Profile Photo
   ============================================================ */

/* ── Hero Canvas ── */
.hero-canvas {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  width: 100%; height: 100%;
}

/* ── Hero Inner Layout (text + photo) ── */
.hero-container {
  position: relative; z-index: 2; width: 100%;
}
.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5rem;
  min-height: calc(100vh - var(--nav-h));
  padding: 3rem 0;
}
.hero-text { flex: 1; max-width: 600px; }

/* ── Hero Photo ── */
.hero-photo-wrap {
  flex-shrink: 0;
  width: 420px;
  max-width: 420px;
  aspect-ratio: 1 / 1; /* matches matt-profile-square.jpg (420x420) so object-fit:cover
                           never has to scale/crop the source — was height:520px, which
                           forced a ~24% zoom + side-crop on the square photo */
  border-radius: 8px;
  border: 1px solid var(--gold-line);
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%);
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}
.hero-photo-init {
  display: none;
  position: absolute; inset: 0;
  align-items: center; justify-content: center;
  font-family: var(--ff-head);
  font-size: 5rem;
  color: rgba(196,158,70,0.15);
  user-select: none;
  pointer-events: none;
}
.hero-profile-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  z-index: 1;
}
/* Gold accent corner */
.hero-photo-corner {
  position: absolute;
  bottom: -14px; right: -14px;
  width: 56%; height: 56%;
  border-right: 2px solid rgba(196,158,70,0.6);
  border-bottom: 2px solid rgba(196,158,70,0.6);
  border-radius: 0 0 6px 0;
  pointer-events: none;
  z-index: 2;
}

/* ── Hero Fade-in Animations ── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-label-animate  { animation: heroFadeUp 0.7s ease both; animation-delay: 0.1s; }
.hero-headline-animate { animation: heroFadeUp 0.7s ease both; animation-delay: 0.25s; }
.hero-divider-animate  { animation: heroFadeUp 0.6s ease both; animation-delay: 0.4s; }
.hero-lead-animate     { animation: heroFadeUp 0.6s ease both; animation-delay: 0.5s; }
.hero-btns-animate     { animation: heroFadeUp 0.6s ease both; animation-delay: 0.65s; }
.hero-stats-animate    { animation: heroFadeUp 0.6s ease both; animation-delay: 0.8s; }
.hero-photo-animate    { animation: heroFadeUp 0.9s ease both; animation-delay: 0.3s; }

/* ── Social Proof / Stat Bar ── */
.proof-bar {
  background: var(--bg2);
  border-bottom: 1px solid var(--gold-line);
  padding: 1.5rem 0;
  overflow: hidden;
}
.proof-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}
.proof-stat {
  text-align: center;
  padding: 0.75rem 2.5rem;
  flex-shrink: 0;
}
.proof-num {
  display: block;
  font-family: var(--ff-head);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.proof-stat span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  display: block;
}
.proof-sep {
  width: 1px;
  height: 44px;
  background: var(--gold-line);
  flex-shrink: 0;
}

/* ── Carousel: Fade single-card (replaces translateX approach) ── */
.testi-track-outer { position: relative; }
.testi-track {
  display: block !important;
  position: relative;
  min-height: 220px;
  transform: none !important;
  transition: none !important;
}
.testi-card {
  display: none;
  opacity: 0;
  min-width: 0 !important;
  width: 100%;
  transition: opacity 0.5s ease;
}
.testi-card.active {
  display: block;
  opacity: 1;
}

/* ── Card Premium Hover (gold shadow) ── */
.card:hover {
  border-color: rgba(196,158,70,0.45) !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(196,158,70,0.1);
}
.listing-card:hover {
  box-shadow: 0 12px 40px rgba(196,158,70,0.12);
}
.suburb-card:hover {
  box-shadow: 0 12px 40px rgba(196,158,70,0.1);
}

/* ── Button Shimmer on Hover ── */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(24,22,20,0.10), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  pointer-events: none;
}
.btn:hover::after { left: 150%; }

/* ── Footer Brand (photo + logo) ── */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.footer-profile-img {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--gold-line);
  flex-shrink: 0;
}
.footer-brand .footer-logo { margin-bottom: 0; }

/* ── Suburb Card Premium Hover ── */
.suburb-card {
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), border-color 0.35s, box-shadow 0.35s;
}
.suburb-card:hover .suburb-header {
  background: linear-gradient(135deg, var(--bg3) 0%, #EFE8DB 100%);
}

/* ── Social Icon Premium Hover ── */
.social-icon {
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.social-icon:hover {
  background: var(--gold-dim);
  transform: translateY(-2px);
}

/* ── Responsive Hero ── */
@media (max-width: 960px) {
  .hero-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
    min-height: auto;
    padding-top: 2rem;
    padding-bottom: 3rem;
  }
  .hero-photo-wrap {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    align-self: center;
  }
  .hero-photo-corner { display: none; }
}
@media (max-width: 600px) {
  .hero-inner { gap: 2rem; }
  .hero-photo-wrap { max-width: 260px; aspect-ratio: 1 / 1; align-self: center; }
  .proof-stat { padding: 0.75rem 1.25rem; }
  .proof-num { font-size: 1.5rem; }
  .proof-sep { display: none; }
}

/* ── Nav link hover: gold underline slide ── */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width 0.25s ease;
}
.nav-links a:hover::after { width: 100%; }

/* ── Scroll-down indicator ── */
.hero-scroll-indicator {
  display: none !important;
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  opacity: 0.5;
  animation: scrollBounce 1.8s ease-in-out infinite;
}
.hero-scroll-indicator span {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero-scroll-indicator svg {
  stroke: var(--gold);
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.4; }
  50%       { transform: translateX(-50%) translateY(6px); opacity: 0.8; }
}

/* ── Gold shimmer underline on hero italic ── */
.hero-shimmer-word {
  position: relative;
  display: inline-block;
}
.hero-shimmer-word::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-lt), var(--gold), transparent);
  background-size: 200% 100%;
  animation: shimmerLine 2.5s linear infinite;
}
@keyframes shimmerLine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Word-by-word hero headline animation ── */
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px);
  animation: wordIn 0.55s ease forwards;
}
@keyframes wordIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Testimonials: large quote mark per card ── */
.testi-card::before {
  font-size: 7rem !important;
  top: 0.5rem !important;
  right: 1.5rem !important;
  color: rgba(196,158,70,0.10) !important;
}
.testi-text {
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
}

/* ── Hero photo: gold diagonal slash behind ── */
.hero-photo-wrap::before {
  content: '';
  position: absolute;
  bottom: -20px; right: -20px;
  width: 70%; height: 70%;
  border: 2px solid rgba(196,158,70,0.45);
  border-radius: 6px;
  z-index: 0;
  pointer-events: none;
}
.hero-photo-wrap::after {
  content: '';
  position: absolute;
  top: -12px; left: -12px;
  width: 40%; height: 40%;
  border-top: 2px solid rgba(196,158,70,0.30);
  border-left: 2px solid rgba(196,158,70,0.30);
  border-radius: 4px 0 0 0;
  pointer-events: none;
}

/* ── Proof bar: gold top border ── */
.proof-bar {
  border-top: 1px solid var(--gold-line) !important;
}

/* ── Hero section: full viewport feel ── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
}

/* ============================================================
   AI Lead-Qualifier Chat Widget
   Rebuilt from scratch (10 Jul 2026) after the original was lost
   to a Netlify snippet-injection cleanup. Baked directly into the
   site source this time — no snippet injection — so it can't
   disappear without a trace again.
   Sits immediately next to the existing WhatsApp / Call Matt
   floating buttons (#matt-chat-widget, anchored at right:90px),
   occupying the reserved right:20px slot beside them.
   ============================================================ */
#mm-chat-launcher {
  position: fixed;
  bottom: 24px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10001;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  padding: 0;
}
#mm-chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,0.45); }
#mm-chat-launcher .mm-chat-wave {
  font-size: 26px;
  display: inline-block;
  transform-origin: 70% 70%;
  animation: mm-wave 2.4s ease-in-out infinite;
  line-height: 1;
}
#mm-chat-launcher .mm-chat-close-icon { display: none; color: var(--bg); font-size: 20px; font-weight: 700; line-height: 1; }
#mm-chat-launcher.open .mm-chat-wave { display: none; }
#mm-chat-launcher.open .mm-chat-close-icon { display: block; }
#mm-chat-launcher .mm-chat-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--gold-line);
  animation: mm-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
#mm-chat-launcher.open .mm-chat-ring { animation: none; opacity: 0; }
@keyframes mm-wave {
  0%, 100% { transform: rotate(0deg); }
  10%      { transform: rotate(14deg); }
  20%      { transform: rotate(-8deg); }
  30%      { transform: rotate(14deg); }
  40%      { transform: rotate(-4deg); }
  50%      { transform: rotate(10deg); }
  60%,100% { transform: rotate(0deg); }
}
@keyframes mm-pulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(1.35); opacity: 0; }
}

#mm-chat-panel {
  position: fixed;
  bottom: 92px;
  right: 20px;
  width: 336px;
  max-width: calc(100vw - 32px);
  max-height: 460px;
  background: var(--bg2);
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  font-family: var(--ff-body);
}
#mm-chat-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.mm-chat-header {
  background: var(--bg3);
  border-bottom: 1px solid var(--gold-line);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.mm-chat-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--gold-dim);
  border: 1px solid var(--gold-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.mm-chat-header-text { flex: 1; min-width: 0; }
.mm-chat-header-text strong { display: block; color: var(--white); font-size: 0.9rem; font-family: var(--ff-body); font-weight: 600; }
.mm-chat-header-text span { display: block; color: var(--gold); font-size: 0.72rem; margin-top: 1px; }
.mm-chat-header-text span::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #3ecf6e;
  margin-right: 5px;
}
#mm-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mm-msg {
  max-width: 88%;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.5;
  animation: mm-msg-in 0.2s ease;
}
.mm-msg-bot {
  background: var(--bg3);
  border: 1px solid var(--gold-line);
  color: var(--text);
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}
.mm-msg-user {
  background: var(--gold);
  color: var(--bg);
  align-self: flex-end;
  border-bottom-right-radius: 3px;
  font-weight: 500;
}
@keyframes mm-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.mm-quick-replies { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.mm-quick-btn {
  background: transparent;
  border: 1px solid var(--gold-line);
  color: var(--gold);
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mm-quick-btn:hover { background: var(--gold-dim); border-color: var(--gold); color: var(--gold-lt); }
.mm-cta-btn {
  display: inline-block;
  background: var(--gold);
  color: var(--bg) !important;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
}
.mm-cta-btn:hover { background: var(--gold-lt); }
.mm-cta-btn.secondary {
  background: transparent;
  border: 1px solid var(--gold-line);
  color: var(--gold) !important;
}
.mm-cta-btn.secondary:hover { background: var(--gold-dim); }
#mm-chat-body::-webkit-scrollbar { width: 6px; }
#mm-chat-body::-webkit-scrollbar-thumb { background: var(--gold-line); border-radius: 3px; }

@media (max-width: 480px) {
  #mm-chat-launcher { bottom: 78px; right: 14px; width: 50px; height: 50px; }
  #mm-chat-launcher .mm-chat-wave { font-size: 22px; }
  #mm-chat-panel { bottom: 140px; right: 12px; width: calc(100vw - 24px); }
}

/* ============================================================
   WhatsApp / Call Matt floating buttons
   Restored 14 Jul 2026 — see js/main.js mmContactButtons() for
   why. CORRECTED same day per Matt: these are long pill shapes
   (rounded rectangle) stacked vertically ON TOP of each other,
   right-aligned above #mm-chat-launcher (right:20px) — NOT circles
   side-by-side (that was the wrong first attempt). See
   feedback_widget_design memory.
   ============================================================ */
.mm-contact-btn {
  position: fixed;
  right: 20px;
  width: 150px;
  height: 44px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  z-index: 10001;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  color: #fff;
  text-decoration: none;
  font-family: var(--ff-body, inherit);
  font-size: 14px;
  font-weight: 600;
}
.mm-contact-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.mm-contact-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,0.45); }
.mm-contact-whatsapp { bottom: 150px; background: #25D366; }
.mm-contact-call { bottom: 96px; background: var(--gold); color: #181614; }
@media (max-width: 480px) {
  .mm-contact-btn { width: 128px; height: 40px; font-size: 13px; padding: 0 14px; }
  .mm-contact-whatsapp { bottom: 190px; }
  .mm-contact-call { bottom: 144px; }
}

/* ============================================================
   Sold Price Alerts floating pill + sign-up modal
   Rebuilt from scratch (10 Jul 2026) after the Netlify snippet
   pair that used to run this (a </head> script plus a separate
   </body> "mobile fix" override with no media query) got stepped
   on by concurrent snippet edits overnight, leaving the pill
   position inconsistent. Baked directly into site source now —
   one single rule, no override snippet needed — so it can't be
   silently reset again. Fixed position, bottom-left, same
   floating pattern as the WhatsApp / Call Matt buttons.
   ============================================================ */
#sal-pill {
  position: fixed;
  left: 0;
  bottom: 16px;
  top: auto;
  background: var(--gold);
  color: #181614;
  border: none;
  padding: 14px 10px;
  border-radius: 0 6px 6px 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  z-index: 9998;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  box-shadow: 2px 0 8px rgba(0,0,0,0.3);
}
#sal-ov {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
#sal-ov.open { display: flex; }
#sal-box {
  background: #fff;
  border-radius: 12px;
  padding: 36px;
  max-width: 420px;
  width: 90%;
  position: relative;
  font-family: inherit;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
#sal-close {
  position: absolute;
  top: 12px; right: 14px;
  background: none;
  border: none;
  color: #333;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
#sal-box h2 { color: var(--bg); font-size: 22px; margin: 0 0 8px; }
#sal-box p { color: #555; font-size: 14px; margin: 0 0 20px; line-height: 1.5; }
#sal-name, #sal-email, #sal-street, #sal-suburb {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 6px;
  color: #222;
  font-size: 14px;
  font-family: inherit;
}
#sal-submit {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--gold);
  color: var(--bg);
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
#sal-msg { margin-top: 14px; text-align: center; font-size: 14px; color: #333; display: none; }

.listing-openhome { font-size:0.85rem; color:#2fbf71; font-weight:600; margin-top:0.3rem; }

/* Listing detail — video walkthrough + floor plan */
.detail-video, .detail-floorplan { margin-top: 1.25rem; }
.detail-video-title, .detail-floorplan-title { font-weight:700; color:var(--gold,#C49E46); letter-spacing:0.02em; margin-bottom:0.5rem; }
.detail-video-frame { position:relative; width:100%; padding-bottom:56.25%; border-radius:var(--radius,10px); overflow:hidden; background:#000; }
.detail-video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.detail-floorplan img { width:100%; border-radius:var(--radius,10px); background:#fff; border:1px solid var(--gold-line,rgba(196,158,70,0.2)); cursor:zoom-in; }

/* ============================================================
   Softer floating widgets — Matt: "make them transparent so
   they're not so harsh". Semi-transparent at rest, full on hover.
   ============================================================ */
#mm-chat-launcher, .mm-contact-btn, #sal-pill {
  opacity: 0.58;
  transition: opacity 0.25s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
#mm-chat-launcher { box-shadow: 0 3px 12px rgba(0,0,0,0.22); }
.mm-contact-btn { box-shadow: 0 3px 12px rgba(0,0,0,0.20); }
#mm-chat-launcher:hover, .mm-contact-btn:hover, #sal-pill:hover,
#mm-chat-launcher:focus, .mm-contact-btn:focus, #sal-pill:focus { opacity: 1; }
/* keep the pulsing ring subtle too */
#mm-chat-launcher .mm-chat-ring { opacity: 0.4; }

/* ───────────────────────────────────────────────────────────────────────────
   MOBILE: stack everything into one column, and never scroll sideways.
   Added 2026-09-07. Matt, after scanning the appraisal QR on his phone:
   "the writing is all on the right hand side it should be under and all pages
   should be able to scroll down not side to side".

   Why this is one blunt rule rather than 43 tidy edits: every one of those
   layouts is an INLINE style — e.g. <div style="display:grid;
   grid-template-columns:1.4fr 1fr"> — on 12 pages (suburb-guide.html alone has
   32). Inline styles beat ordinary stylesheet rules, which is why the earlier
   attempt at this looked right and changed nothing on a phone: a @media block
   was added, but it could never win against the style attribute. Overriding
   with !important at the one place every page already loads fixes all of them
   at once, and keeps working when a new page is written the same way.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  /* Any multi-column grid collapses to a single column, so side-by-side
     content stacks and reads top to bottom. */
  [style*="grid-template-columns"],
  [style*="grid-template-columns"][style*="display:grid"] {
    /* minmax(0,1fr), NOT 1fr. A plain 1fr track cannot shrink below its content's
       min-content width, so a form with 40px side padding forced the column to 386px inside a
       375px phone — the card then hung 31px off the right edge and got clipped. Measured live,
       not guessed. minmax(0,...) lets the track shrink; min-width:0 lets the children follow. */
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.75rem !important;
  }
  [style*="grid-template-columns"] > * { min-width: 0 !important; }
  /* Same for inline flex rows that would otherwise squeeze side by side. */
  [style*="display:flex"]:not(.nav-inner):not(.footer-bottom) {
    flex-wrap: wrap !important;
  }

  /* No horizontal scrolling, and nothing sticking out past the screen edge.
     overflow-x on both html and body — on iOS Safari, body alone is ignored. */
  html, body { overflow-x: hidden !important; max-width: 100% !important; }
  img, video, iframe, table, pre, canvas, svg { max-width: 100% !important; height: auto; }
  /* A fixed pixel width is the other common cause of sideways scroll. */
  [style*="width:"][style*="px"] { max-width: 100% !important; }
}


/* ───────────────────────────────────────────────────────────────────────────
   MOBILE: get the floating furniture out of the reading area.
   Added 2026-09-19. Matt: "It's all squished and it doesn't just flow down.
   There stuff on the left and right it should just flow so you can read it
   up and down not across."

   The 2026-09-07 block above already collapses every inline multi-column grid
   and it genuinely works — check_web_layout reports 0 multi-column and no
   sideways scroll on every page. What it never touched is the three FIXED
   overlays that sit permanently on top of the text on a phone, which is what
   he's actually describing:
     - #sal-pill       a vertical "Sold Price Alerts" bar pinned to left:0,
                       running down the LEFT edge over the content.
     - .mm-contact-btn the WhatsApp + Call Matt pills on the RIGHT at
                       bottom:190px/144px — i.e. floating across the middle of
                       a phone screen. Measured on /about at 390px: the Call
                       Matt pill sits directly over the "NE Adelaide" stat and
                       the FREE APPRAISAL button.
     - #mm-chat-launcher the wave circle, bottom right.

   Fix: drop the left-edge pill entirely on phones, and pull the right-hand
   buttons down into the bottom corner so they stack just above the launcher
   instead of hovering mid-page. Shape and order are unchanged — Matt asked
   for stacked pills, not circles, so they stay pills.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  /* The left-hand vertical bar goes. The sign-up modal still auto-opens on a
     timer (soldPriceAlerts() in js/main.js), so nothing is lost by hiding the
     permanent tab — and sideways text down the edge of a phone is the single
     least readable thing on the page. */
  #sal-pill { display: none !important; }

  /* Everything else tucks into the bottom-right corner, clear of the text. */
  #mm-chat-launcher { bottom: 12px !important; right: 12px !important; }
  .mm-contact-call { bottom: 74px !important; right: 12px !important; }
  .mm-contact-whatsapp { bottom: 126px !important; right: 12px !important; }
}

/* ============================================================
   8 Oct 2026 — the old 👋 chat launcher (#mm-chat-launcher) was removed from js/main.js
   (Georgie, the AI listings assistant, replaces it). WhatsApp / Call Matt drop down into
   the bottom-right slot it used to hold instead of floating above an empty space.
   ============================================================ */
.mm-contact-call { bottom: 24px; }
.mm-contact-whatsapp { bottom: 78px; }
@media (max-width: 480px) {
  .mm-contact-call { bottom: 24px; }
  .mm-contact-whatsapp { bottom: 74px; }
}
@media (max-width: 899px) {
  .mm-contact-call { bottom: 12px !important; }
  .mm-contact-whatsapp { bottom: 64px !important; }
}