/* =================================================================
   WITWIT & CO PROPERTY — STYLESHEET
   -----------------------------------------------------------------
   Quick edit guide for non-coders:
   - Colours are all defined once at the top under ":root".
     Change a colour there and it updates the whole site.
   - Fonts are set in "body" (text) and ".section-title/.hero-title"
     (big headings).
   ================================================================= */

:root {
  /* ---- Colour palette: clean black & white editorial ---- */
  --color-bg:        #FFFFFF; /* main page background */
  --color-bg-soft:   #FAFAFA; /* soft off-white — alternate section backgrounds */
  --color-border:    #E5E5E5; /* light grey — hairline borders, dividers */
  --color-accent:    #333333; /* charcoal accent — buttons, nav hover, labels, price figures */
  --color-heading:   #1A1A1A; /* near-black — strong headings */
  --color-body:      #535353; /* mid grey — body text */
  --color-muted:     #999999; /* light grey — captions, secondary/meta text */
  --color-white:     #FFFFFF; /* pure white — card backgrounds, text on dark/photo */

  --font-display: 'Ibarra Real Nova', 'Georgia', serif;
  --font-body: 'Gabarito', 'Helvetica Neue', Arial, sans-serif;

  --container-width: 1180px;
}

/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — visually hidden until focused by keyboard */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 99999;
  padding: 10px 20px;
  background: var(--color-heading);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

button { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-body);
  background: var(--color-bg);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---- Shared type styles ---- */

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 18px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.5vw, 54px);
  letter-spacing: 0.02em;
  color: var(--color-heading);
  margin-bottom: 22px;
}

.section-title.light { color: var(--color-white); }

.section-sub {
  max-width: 560px;
  color: var(--color-body);
  font-size: 17px;
}

.section-sub.light { color: rgba(255,255,255,0.85); }

.center { text-align: center; margin-left: auto; margin-right: auto; }

.text-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}

/* ---- Buttons (sharp corners, no border-radius, by design) ---- */

.btn {
  display: inline-block;
  padding: 16px 38px;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: all 0.35s ease;
  cursor: pointer;
}

.btn-light {
  background: var(--color-white);
  color: var(--color-heading);
}
.btn-light:hover { background: transparent; color: var(--color-white); border-color: var(--color-white); }

.btn-dark {
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-body);
}
.btn-dark:hover { background: var(--color-heading); }

.btn-outline {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}
.btn-outline:hover { background: var(--color-white); color: var(--color-heading); }

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cta-btn-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* =================================================================
   STICKY MOBILE CTA BAR
   Fixed bar pinned to the bottom of the screen on small viewports so
   Call / Book Appraisal are always one tap away without scrolling.
   ================================================================= */
.mobile-cta-bar {
  display: none;
}

@media (max-width: 760px) {
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    left: 16px; right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 200;
    gap: 10px;
    background: transparent;
    padding: 0;
  }
  .mobile-cta-bar a {
    flex: 1;
    text-align: center;
    padding: 14px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  }
  .mobile-cta-bar a.mobile-cta-call {
    background: var(--color-white);
    border: 1.5px solid var(--color-heading);
    color: var(--color-heading);
  }
  .mobile-cta-bar a.mobile-cta-book {
    background: var(--color-heading);
    color: var(--color-white);
  }
  .mobile-cta-bar a.mobile-cta-book:hover { background: var(--color-accent); }
  /* Reserve space so the floating buttons don't sit on top of the very
     bottom of the page (footer / submit button) while scrolling. */
  body {
    padding-bottom: 76px;
  }
}

/* =================================================================
   STICKY NAV
   ================================================================= */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 350;
  background: transparent;
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
  padding: 26px 0;
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
  padding: 16px 0;
}

.nav-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.12em;
  color: var(--color-white);
  transition: color 0.4s ease;
}
.site-header.scrolled .logo { color: var(--color-heading); }
.logo span { color: var(--color-accent); }

.main-nav { display: flex; gap: 36px; z-index: 300; }

.main-nav a {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
  transition: color 0.4s ease, opacity 0.2s ease;
}
.main-nav a:hover { opacity: 0.6; }
.site-header.scrolled .main-nav a { color: var(--color-heading); }
.site-header.scrolled .main-nav a:hover { color: var(--color-accent); opacity: 1; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 24px; height: 1px;
  background: var(--color-white);
  transition: background 0.4s ease;
}
.site-header.scrolled .nav-toggle span { background: var(--color-heading); }

/* =================================================================
   1. HERO
   ================================================================= */

.hero {
  position: relative;
  height: 100vh;   /* fallback for older browsers */
  height: 100svh;  /* fits the visible viewport even when the mobile address bar is showing */
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,20,20,0.45) 0%, rgba(20,20,20,0.35) 50%, rgba(20,20,20,0.6) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 32px;
  color: var(--color-white);
}

.hero-content .eyebrow { color: rgba(255,255,255,0.8); }

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(42px, 7vw, 88px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  margin-bottom: 26px;
}

/* Official tagline strapline — sits between the headline and the intro line */
.hero-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.01em;
  margin-bottom: 20px;
}

.hero-sub {
  font-size: 18px;
  max-width: 480px;
  margin-bottom: 38px;
  color: rgba(255,255,255,0.88);
}

.scroll-cue {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 1px;
  height: 60px;
  background: rgba(255,255,255,0.35);
  overflow: hidden;
}
.scroll-cue span {
  position: absolute;
  top: -60px;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-white);
  animation: scrollCue 2.2s ease-in-out infinite;
}
@keyframes scrollCue {
  0% { top: -60px; }
  60% { top: 100%; }
  100% { top: 100%; }
}

/* Weather card */
.weather-card {
  position: absolute;
  bottom: 52px;
  right: 48px;
  z-index: 3;
  width: 200px;
  padding: 18px 14px;
  border-radius: 12px;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  background: rgba(30, 30, 30, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: default;
  transition: transform 0.4s ease;
}
.weather-card::before {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  background: rgb(144, 161, 255);
  border-radius: 50%;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  opacity: 0.55;
  filter: blur(18px);
  transition: transform 0.6s ease;
}
.weather-card:hover::before {
  transform: translateX(calc(-50% - 28px)) translateY(28px);
}
.wc-city {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #fff;
  text-transform: uppercase;
}
.wc-condition {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
  color: rgb(197, 197, 197);
  text-transform: uppercase;
}
.wc-icon {
  font-size: 36px;
  line-height: 1;
  margin: 2px 0;
}
.wc-temp {
  font-size: 2em;
  font-weight: 400;
  color: #fff;
  line-height: 1;
}
.wc-minmax {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.wc-min, .wc-max {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0 14px;
  gap: 3px;
}
.wc-max {
  align-items: flex-start;
  border-left: 1px solid rgba(255,255,255,0.35);
}
.wc-label {
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.5px;
}
.wc-val {
  font-size: 10px;
  font-weight: 400;
  color: rgb(197, 197, 197);
}
@media (max-width: 768px) {
  .weather-card {
    bottom: auto;
    top: auto;
    right: 50%;
    transform: translateX(50%);
    position: relative;
    margin: 24px auto 0;
    width: 180px;
  }
}

/* =================================================================
   2. ABOUT
   ================================================================= */

.about { padding: 140px 0; }

.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  align-items: center;
}

.about-image img {
  width: 100%;
  height: 560px;
  object-fit: cover;
}

.about-copy p { margin-bottom: 20px; color: var(--color-body); font-size: 17px; }

/* =================================================================
   3. LISTINGS
   ================================================================= */

.listings { padding: 140px 0; background: var(--color-bg-soft); }

.section-sub.center { margin-bottom: 64px; }

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

.listing-card {
  position: relative;
  background: var(--color-white);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.listing-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(0,0,0,0.12); }

/* Whole-card click target, added on top of the untouched photo/body markup
   so none of the existing inner elements need their layout changed. */
.listing-card-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.listing-card-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.listing-photo { position: relative; height: 260px; overflow: hidden; }
.listing-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.listing-card:hover .listing-photo img { transform: scale(1.06); }

.listing-tag {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 14px;
}


.listing-body { padding: 28px; }

.listing-body h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--color-heading);
  margin-bottom: 4px;
}

.listing-suburb {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: 22px;
}

.listing-specs {
  list-style: none;
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 12px;
}

.listing-specs li { font-size: 14px; color: var(--color-body); }
.listing-specs li span { display: block; color: var(--color-muted); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 3px; }
.listing-specs li strong { font-weight: 500; }
.listing-specs li:last-child { grid-column: 1 / -1; border-top: 1px solid var(--color-border); padding-top: 12px; margin-top: 2px; }
.listing-specs li:last-child strong { font-size: 20px; color: var(--color-accent); font-family: var(--font-display); }

/* =================================================================
   4. WHY WITWIT & CO
   ================================================================= */

.why-us { padding: 140px 0; }

.why-us .section-title { margin-bottom: 70px; }

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

.why-block { text-align: center; padding: 0 20px; }

.why-number {
  display: block;
  font-family: var(--font-display);
  font-size: 44px;
  color: var(--color-border);
  margin-bottom: 18px;
}

.why-block h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--color-heading);
  margin-bottom: 14px;
}

.why-block p { color: var(--color-body); font-size: 15px; }

/* =================================================================
   5. AREAS / LOCATION
   ================================================================= */

.areas {
  position: relative;
  padding: 180px 0;
  overflow: hidden;
}

.areas-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

@media (max-width: 900px) {
  .areas-bg { background-attachment: scroll; }
}

.areas-overlay { position: absolute; inset: 0; background: rgba(20,20,20,0.6); }

.areas-content { position: relative; z-index: 2; }
.areas .section-sub.light { margin: 0 auto; }

.areas-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

.areas-links a {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.5);
  padding: 10px 22px;
  color: var(--color-white);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.areas-links a:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.9);
}

/* =================================================================
   6. CONTACT
   ================================================================= */

.contact { padding: 140px 0; background: var(--color-bg-soft); }

.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
}

.contact-info .eyebrow { margin-bottom: 14px; }
.contact-info .section-title { margin-bottom: 18px; }
.contact-info > p { color: var(--color-body); margin-bottom: 40px; max-width: 380px; }

.contact-details { list-style: none; }
.contact-details li {
  padding: 18px 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 20px;
  font-size: 15px;
  color: var(--color-body);
}
.contact-details li:last-child { border-bottom: 1px solid var(--color-border); }
.contact-details li span {
  min-width: 90px;
  color: var(--color-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 2px;
}
.contact-details li a:hover { color: var(--color-accent); }

.contact-form { background: var(--color-white); padding: 48px; }

/* Info-only variant of the contact grid — used on suburb landing pages,
   where the primary appraisal form already lives in the hero and this
   section becomes a secondary "prefer to call/email" panel. */
.contact-grid--info-only { grid-template-columns: 1fr; }
.contact-grid--info-only .contact-info { max-width: 640px; }

.form-row { margin-bottom: 22px; }

.form-row label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 8px;
}

.form-row input,
.form-row textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  padding: 10px 2px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-heading);
  resize: vertical;
}
.form-row input:focus,
.form-row textarea:focus {
  outline: 2px solid var(--color-heading);
  outline-offset: 3px;
  border-color: var(--color-heading);
}

.form-note {
  margin-top: 16px;
  font-size: 14px;
  color: var(--color-accent);
}

/* =================================================================
   FOOTER
   ================================================================= */

.site-footer { padding: 70px 0 40px; text-align: center; background: var(--color-heading); color: var(--color-white); }

.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }

.site-footer .logo { color: var(--color-white); }

.footer-tag { font-family: var(--font-display); font-size: 20px; color: rgba(255,255,255,0.75); }

.footer-social {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 3px;
}
.footer-social:hover { opacity: 0.7; }

.footer-meta {
  font-size: 13px;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.65);
}
.footer-meta a:hover { opacity: 0.7; }

.footer-copy { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 20px; }
.footer-policy-link { color: rgba(255,255,255,0.4); text-decoration: underline; }
.footer-policy-link:hover { color: rgba(255,255,255,0.7); }

/* =================================================================
   FAQ
   ================================================================= */

.faq { padding: 110px 0; background: var(--color-bg-soft); }
.faq .section-title { margin-bottom: 56px; }

.faq-list { max-width: 760px; margin: 0 auto; }

.faq-item { border-top: 1px solid var(--color-border); }
.faq-item:last-child { border-bottom: 1px solid var(--color-border); }

.faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 22px 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--color-heading);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq-q::after {
  content: '+';
  font-size: 24px;
  font-weight: 300;
  color: var(--color-muted);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.faq-q[aria-expanded="true"]::after {
  transform: rotate(45deg);
}

.faq-a {
  display: none;
  padding-bottom: 22px;
}
.faq-a.open {
  display: block;
}

.faq-a p {
  font-size: 16px;
  color: var(--color-body);
  line-height: 1.75;
}

.faq-a a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ---- Custom dropdown (contact form) ---- */
.csd-wrap {
  position: relative;
}

.csd-trigger {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border-bottom: 1px solid var(--color-border);
  padding: 10px 2px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-heading);
  cursor: pointer;
  line-height: 1.4;
}
.csd-trigger:focus-visible {
  outline: 2px solid var(--color-heading);
  outline-offset: 3px;
}
.csd-trigger__value {
  flex: 1;
  line-height: 1.4;
}
.csd-trigger__chevron {
  flex-shrink: 0;
  display: block;
  color: var(--color-muted);
  transition: transform 0.2s ease;
}
.csd-trigger[aria-expanded="true"] .csd-trigger__chevron {
  transform: rotate(180deg);
}

/* Popover menu */
.eyebrow--light { color: rgba(255,255,255,0.8); }
.eyebrow--spaced { margin-top: 40px; }
.text-growth { color: #2a7d4f; }

.csd-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 300;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px;
  list-style: none;
  margin: 0;
}

.csd-option {
  padding: 10px 12px;
  border-radius: 5px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--color-heading);
  cursor: pointer;
  transition: background 0.15s ease;
  list-style: none;
}
.csd-option:hover {
  background: var(--color-bg-soft);
}
.csd-option--selected {
  font-weight: 500;
}
.csd-option--selected::after {
  content: ' ✓';
  color: var(--color-muted);
  font-weight: 400;
}

/* =================================================================
   SCROLL-REVEAL ANIMATION (paired with js/script.js)
   ================================================================= */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* stagger children slightly inside grids for a nicer effect */
.listing-grid .listing-card:nth-child(2) { transition-delay: 0.12s; }
.listing-grid .listing-card:nth-child(3) { transition-delay: 0.24s; }
.why-grid .why-block:nth-child(2) { transition-delay: 0.12s; }
.why-grid .why-block:nth-child(3) { transition-delay: 0.24s; }

/* =================================================================
   LOADING SCREEN
   ================================================================= */

.loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}

.wrapper {
  width: 200px;
  height: 60px;
  position: relative;
  z-index: 1;
}

.circle {
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  background-color: var(--color-heading);
  left: 15%;
  transform-origin: 50%;
  animation: circle7124 .5s alternate infinite ease;
}

@keyframes circle7124 {
  0% {
    top: 60px;
    height: 5px;
    border-radius: 50px 50px 25px 25px;
    transform: scaleX(1.7);
  }
  40% {
    height: 20px;
    border-radius: 50%;
    transform: scaleX(1);
  }
  100% {
    top: 0%;
  }
}

.circle:nth-child(2) {
  left: 45%;
  animation-delay: .2s;
}

.circle:nth-child(3) {
  left: auto;
  right: 15%;
  animation-delay: .3s;
}

.shadow {
  width: 20px;
  height: 4px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.15);
  position: absolute;
  top: 62px;
  transform-origin: 50%;
  z-index: -1;
  left: 15%;
  filter: blur(1px);
  animation: shadow046 .5s alternate infinite ease;
}

@keyframes shadow046 {
  0% { transform: scaleX(1.5); }
  40% { transform: scaleX(1); opacity: .7; }
  100% { transform: scaleX(.2); opacity: .4; }
}

.shadow:nth-child(4) {
  left: 45%;
  animation-delay: .2s;
}

.shadow:nth-child(5) {
  left: auto;
  right: 15%;
  animation-delay: .3s;
}

/* =================================================================
   SECTION DIVIDER
   ================================================================= */

.section-divider {
  display: flex;
  justify-content: center;
  padding: 0;
}

.section-divider span {
  display: block;
  width: 80px;
  height: 1px;
  background: var(--color-muted);
  opacity: 0.35;
}

/* =================================================================
   REVIEWS
   ================================================================= */

.reviews {
  padding: 110px 0;
  background: var(--color-white);
}

.reviews .section-title {
  margin-bottom: 48px;
}

.reviews-widget__powered-by {
  display: none !important;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 900px) {
  .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-image img { height: 380px; }
  .listing-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-form { padding: 32px; }
}

@media (max-width: 760px) {
  .main-nav {
    position: fixed;
    top: 0; right: 0;
    height: 100%;
    width: 78%;
    max-width: 320px;
    background: var(--color-heading);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
    padding: 40px;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 300;
    will-change: transform;
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav a { color: var(--color-white); font-size: 15px; }

  /* Backdrop */
  .nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 299;
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .nav-backdrop.visible {
    display: block;
    opacity: 1;
  }

  /* Lock scroll behind open menu */
  body.nav-open { overflow: hidden; }

  /* Hide weather card on mobile — hero overflow:hidden clips it */
  .weather-card { display: none; }

  /* Hide the decorative scroll-cue line on mobile — it's absolutely
     positioned from the bottom of .hero, which now auto-sizes to its
     content, so it overlapped the "Book Free Appraisal" button. */
  .scroll-cue { display: none; }

  /* Keep the toggle clickable above the backdrop/menu so it can re-close them */
  .nav-toggle { display: flex; position: relative; z-index: 301; }

  .about, .listings, .why-us, .contact { padding: 90px 0; }
  .areas { padding: 120px 0; }

  .hero-title { font-size: 44px; }

  /* Mobile browsers (Samsung Internet, Chrome) resize their address bar
     dynamically, which makes 100vh/100svh unreliable in practice — on some
     devices the box still renders taller than what's actually visible,
     pushing the second CTA button below the fold. Instead of depending on
     viewport units at all on mobile, size the hero to its own content with
     generous top/bottom padding, so both buttons are always guaranteed to
     be on-screen regardless of how the browser chrome behaves. */
  .hero {
    height: auto;
    min-height: 0;
    padding: 128px 0 64px;
  }
}

@media (max-width: 480px) {
  .container { padding: 0 22px; }
  .nav-inner { padding: 0 22px; }
  .contact-form { padding: 24px; }
  .listing-body { padding: 22px; }
}