/*
 * Stairway Real Estate — base stylesheet. Mobile-first, minimal JS.
 *
 * Brand colors below are the owner's official supplied palette (2026-10-06),
 * NOT sampled/approximated from the live site — an earlier pass here used a
 * manually-darkened shade of the main purple (#2d0064) for hover states and
 * near-black (#1a1a1a text / #000 footer) instead of the real secondary
 * purple and the official grey, both close enough to look right in a
 * side-by-side screenshot but not actually correct.
 *
 * Fonts: DM Sans (headings, menu, buttons, labels) and Alegreya Sans (body
 * text), self-hosted; see the theme layer and the @font-face rules near the
 * end of this file. The original site's fonts (Open Sans, Arial, Playfair,
 * Outfit) are no longer used anywhere.
 */

:root {
  --color-primary: #4e0094;      /* Main Purple */
  --color-primary-dark: #940090; /* Secondary Purple — was a darkened shade
    of Main Purple (#2d0064), not the real brand color, until corrected */
  --color-ink: #383838;          /* Brand grey, replacing near-black (#1a1a1a) */
  --color-ink-soft: #555;
  --color-bg: #ffffff;
  --color-bg-soft: #f6f7f7;
  --color-border: #d8d8d8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.5;
  /* The .hero/.wave/.cta-band/.testimonials full-bleed sections use the
     standard full-bleed technique (width + calc(50% - width/2) margins) — but 100vw measures
     the viewport INCLUDING the scrollbar track in some browsers, while a
     block element's normal 100% width excludes it. That mismatch makes
     those sections a few pixels wider than the true visible area, which
     both introduces a faint horizontal scroll range and makes elements that
     DON'T use the 100vw trick (like the footer, which doesn't need to —
     it's already a full-width body child) look clipped/short by comparison.
     Suppressing horizontal overflow at the body level is the standard fix. */
  overflow-x: hidden;
}

a {
  color: var(--color-text-accent);
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Thin purple contact bar above the header — present on every page on the
   live site, missing from an earlier pass here. */
.top-bar {
  background: var(--color-primary);
  color: #fff;
  font-size: var(--fs-xs);
  padding: 0.4rem 1rem;
  text-align: right;
}

.top-bar a {
  color: #fff;
  text-decoration: none;
  margin-left: 1rem;
}

.top-bar a:hover {
  text-decoration: underline;
}

.site-header {
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.logo img {
  display: block;
  height: 40px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  color: var(--color-ink);
}

.nav-links a:hover {
  color: var(--color-text-accent);
}

/* "Buy" dropdown (For Sale / Off Market Property) — CSS-only hover/focus
   reveal, matching the live site's own dropdown there, no JS needed. */
.nav-item-dropdown {
  position: relative;
}

.nav-dropdown {
  display: none;
  position: absolute;
  /* No top margin — a gap here breaks :hover the moment the mouse leaves
     "Buy" to travel down to the dropdown. The 0.5rem visual gap instead
     comes from padding-top below, which stays inside the hoverable box. */
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0.5rem 0;
  min-width: 200px;
  list-style: none;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.nav-dropdown::before {
  /* Invisible bridge filling the space between the nav link's bottom edge
     and the dropdown's own top edge (line-height/padding on the link),
     so the hoverable area is continuous with no gap to lose :hover in. */
  content: "";
  position: absolute;
  top: -0.75rem;
  left: 0;
  right: 0;
  height: 0.75rem;
}

.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown {
  display: block;
}

.nav-dropdown a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

.nav-dropdown a:hover {
  background: var(--color-bg-soft);
}

.btn {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  border-radius: 999px; /* pill shape, matching the live site's buttons — an
    earlier pass here used a plain 4px-rounded rectangle */
  border: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--color-primary-dark);
}

main {
  position: relative;
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
  /* Deliberately NOT overflow:hidden here — that was clipping full-bleed
     children (.hero/.wave/.cta-band/.testimonials, which break out to
     100vw) back down to main's own 1200px box, defeating the full-bleed
     technique entirely (confirmed bug: hero wasn't actually full width).
     Decorative blobs get their own local overflow:hidden instead, on
     whichever section/wrapper each one sits in. */
}

/* Small wrapper purely to give the "Properties For Sale" heading's
   decorative blob something to clip against, now that main itself doesn't. */
.blob-clip {
  position: relative;
  overflow: hidden;
}

/*
 * Decorative background "blobs" — soft organic shapes behind page sections,
 * matching the live site's own homepage decoration. Pure CSS (an asymmetric
 * border-radius, the standard lightweight blob technique), not image assets:
 * no extra HTTP request, trivially recolourable, keeps pages fast per
 * CLAUDE.md's "minimal JavaScript" / "keep it fast" constraints.
 * Colors sampled directly from the live site's own decorative PNGs, not
 * guessed: cyan from BG-home-new4.png, indigo from BG-FAQ-Services.png.
 * Opacity raised from an earlier pass (0.08-0.12) to 0.18-0.30 — the first
 * version was confirmed essentially invisible against plain white once
 * screenshotted, per direct side-by-side comparison with the live site.
 */
.decor-blob {
  position: absolute;
  z-index: 0;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  pointer-events: none;
}

.decor-blob-cyan { background: #09baeb; opacity: 0.22; }
.decor-blob-indigo { background: #3a3ad7; opacity: 0.16; }

.decor-blob-promo1 { top: -30px; right: -70px; width: 260px; height: 220px; }
.decor-blob-testimonials { bottom: -60px; left: -60px; width: 260px; height: 240px; }
.decor-blob-properties { top: -20px; left: -80px; width: 240px; height: 220px; }

main > h1,
main > h2,
.hero-segments,
.listing-grid,
.testimonials,
.promo {
  position: relative;
  z-index: 1;
}

/*
 * Hero — full-bleed photo (the live site's own, an Elementor "background
 * slideshow" with a single image, reused directly) with a dark overlay and
 * centered white text, matching the live site's layout.
 */
.hero {
  position: relative;
  /* True full-bleed, not just cancelling main's own padding (an earlier pass
     here only did that, which still left it capped at main's 1200px
     max-width on wide screens) — breaks out to the full viewport width
     regardless of main's own constraints. */
  width: var(--bleed-w);
  margin-left: calc(50% - var(--bleed-w) / 2 - var(--bleed-shift));
  margin-right: calc(50% - var(--bleed-w) / 2 + var(--bleed-shift));
  margin-top: -1rem;
  margin-bottom: 2rem;
  padding: 5rem 1rem;
  background-size: cover;
  background-position: center;
  text-align: center;
  color: #fff;
}

.hero::before {
  /* Dark tint across the whole photo for text legibility, not a boxed
     overlay behind just the text — matches the live site's look, where the
     heading sits directly on the (darkened) photo. */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.hero-overlay {
  position: relative;
  z-index: 1; /* sit above .hero::before's dark tint */
  max-width: 700px;
  margin: 0 auto;
}

.hero h1 {
  margin: 0 0 0.5rem;
  font-size: var(--fs-h1);
  color: #fff;
}

.hero-subtitle {
  margin: 0 0 1.5rem;
  color: #fff;
  opacity: 0.9;
}

/* "I'm a" segmentation — a white pill/capsule with vertical dividers between
   links, matching the live site's styling exactly (an earlier version here
   used boxed cards, then a plain stacked list — corrected after directly
   comparing screenshots against the live site, see CLAUDE.md "Design").
   Extended with Landlord/Tenant since this rebuild is dual-type. */
.hero-segments {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.2rem;
  background: #fff;
  border-radius: 999px;
  font-weight: 600;
}

.hero-segments-label {
  color: var(--color-ink);
  padding-right: 0.4rem;
  border-right: 1px solid var(--color-border);
}

.hero-segments a {
  text-decoration: none;
  color: var(--color-ink);
  padding: 0 0.3rem;
}

.hero-segments a:not(:last-child) {
  border-right: 1px solid var(--color-border);
}

.hero-segments a:hover {
  color: var(--color-text-accent);
}

/* "What our clients say" testimonial section */
.testimonials {
  /* Full-bleed, same viewport-width technique as .hero/.wave/.cta-band — an
     earlier pass here left this as an inset rounded "card" (visible side
     margins + rounded corners), inconsistent with the rest of the page and
     with the live site's own edge-to-edge version. */
  position: relative;
  overflow: hidden;
  width: var(--bleed-w);
  margin-left: calc(50% - var(--bleed-w) / 2 - var(--bleed-shift));
  margin-right: calc(50% - var(--bleed-w) / 2 + var(--bleed-shift));
  padding: 2rem 1rem;
  background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%);
  text-align: center;
}

.testimonials h2 {
  color: var(--color-text-accent);
}

.section-heading-centered {
  text-align: center;
}

/* Two video testimonials side by side at the top of the reviews page,
   matching the live site's own layout there. Full-bleed like .reviews-grid
   below it (was centered with a 1100px cap) — made 50% bigger per owner
   request, which a 1100px cap inside main's own 1200px box had no real
   room to deliver, so it now breaks out to the full viewport width the
   same way. */
.video-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  width: var(--bleed-w);
  margin-left: calc(50% - var(--bleed-w) / 2 - var(--bleed-shift));
  margin-right: calc(50% - var(--bleed-w) / 2 + var(--bleed-shift));
  padding: 0 2rem;
  box-sizing: border-box;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.video-pair .video-embed {
  max-width: none;
  margin: 0;
}

@media (max-width: 700px) {
  .video-pair { grid-template-columns: 1fr; }
}

.video-embed {
  position: relative;
  max-width: 900px; /* was 640px — confirmed too small against the live
    site's much larger, more prominent video */
  margin: 1rem auto;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
}

.video-embed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-embed-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-embed-play:hover {
  background: var(--color-primary-dark);
}

/* Promo sections (What's my property worth? / Off-Market Properties / About
   Us) — same real photos/copy as the live site, alternating image/text
   layout matching its own arrangement. */
.promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* keeps text vertically level with the photo, not
    stacked underneath */
  gap: 2rem;
  padding: 1.5rem 0;
  overflow: hidden; /* clips this section's own decorative blob, now that
    main no longer does it globally */
}

.promo-reverse {
  flex-direction: row-reverse;
}

.promo-image {
  flex: 0 1 390px; /* flex-grow:0 — was 1, which let the image grow to fill
    half the row; the live site's photos are deliberately small, not
    half-width. 390px = owner-requested 50% bigger than the 260px this was
    first set to. */
  max-width: 390px;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Organic "shapely" mask, same technique as the .decor-blob shapes above —
     doesn't need to match the live site's exact shape (owner: "the shape
     does not have to be exactly the same"), just read as deliberately
     non-rectangular the way the live site's photos do. */
  border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
  display: block;
}

.promo-image-round {
  border-radius: 50%;
  max-width: 330px; /* 50% bigger than the 220px this was first set to,
    same scaling applied to the other promo images */
}

.promo-text {
  flex: 1 1 320px;
}

.promo-text h2 {
  color: var(--color-text-accent);
  margin-top: 0;
  font-size: var(--fs-h2);
}

.promo-text p:first-of-type {
  /* The subheading is always the first <p> (the second wraps the button) —
     simpler and more broadly supported than a :has() exclusion. */
  font-size: var(--fs-lead);
}

.promo-text .btn {
  font-size: var(--fs-base);
  padding: 0.875rem 2rem;
}

.promo-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0.5rem 0;
}

/* Purple wave transition into the CTA band — missing entirely from an
   earlier pass here. An inline SVG (tiny, no extra HTTP request, matches
   "keep it fast") rather than a photo; the exact curve doesn't need to match
   the live site's (owner: "the shape does not have to be exactly the
   same"), just read as the same kind of wave transition. Full-bleed, same
   viewport-width technique as .hero. */
.wave {
  display: block;
  width: var(--bleed-w);
  margin-left: calc(50% - var(--bleed-w) / 2 - var(--bleed-shift));
  margin-right: calc(50% - var(--bleed-w) / 2 + var(--bleed-shift));
  margin-bottom: -1px; /* avoid a hairline gap between the wave and the band below */
}

/* "Check Out Our 5.0 Rating" section (reviews page only) — same real copy/
   link as the live site's own section there. Full-bleed like .hero/.wave,
   with a lighter-to-darker purple gradient (sampled from the live site's
   own generated CSS: linear-gradient(138deg, #BA5DCC 65%, #5F1AAB 20%))
   and a simplified chevron top / rippling-wave bottom rather than trying
   to pixel-match the live site's exact diagonal/layered wave art. */
.rating-band {
  position: relative;
  width: var(--bleed-w);
  margin-left: calc(50% - var(--bleed-w) / 2 - var(--bleed-shift));
  margin-right: calc(50% - var(--bleed-w) / 2 + var(--bleed-shift));
  background: linear-gradient(138deg, #ba5dcc 0%, #5f1aab 100%);
  overflow: hidden;
}

.rating-band-wave-top {
  display: block;
  width: 100%;
  margin-bottom: -1px;
}

.rating-band-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 1rem 1rem 3rem;
}

.rating-band h2 {
  font-weight: 800;
  font-size: var(--fs-h2);
  color: #fff;
  text-transform: capitalize;
  line-height: 1.2;
  margin: 0 0 1rem;
}

.rating-star {
  margin: 0 0.15em;
}

.rating-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  max-width: 700px;
  margin: 0 auto 1.5rem;
  color: #fff;
}

.rating-divider-line {
  flex: 1;
  height: 1px;
  background: #fff;
  opacity: 0.6;
}

.rating-divider-icon {
  font-size: var(--fs-lead);
}

.rating-band-ripples {
  display: block;
  margin-top: -1px;
}

.rating-band-ripples svg {
  display: block;
  width: 100%;
  margin-top: -1px;
}

/* Bottom CTA band — "Explore Your Selling Opportunities", same copy/links
   as the live site. Dark purple, matching the live site's own band here
   and its dark footer immediately below it. Full-bleed, same as .hero/.wave. */
.cta-band {
  position: relative;
  z-index: 1;
  width: var(--bleed-w);
  margin-left: calc(50% - var(--bleed-w) / 2 - var(--bleed-shift));
  margin-right: calc(50% - var(--bleed-w) / 2 + var(--bleed-shift));
  margin-top: 0;
  padding: 3rem 1rem;
  background: var(--color-primary);
  color: #fff;
  text-align: center;
}

.cta-band h2 {
  margin-top: 0;
  color: #fff;
}

.cta-band p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.btn-light {
  background: #fff;
  color: var(--color-text-accent);
}

.btn-light:hover {
  background: var(--color-bg-soft);
}

/* Footer — owner-specified dark purple-grey (#1B141D, 2026-10-06; replaces
   an earlier #383838 brand-grey pass). */
.site-footer {
  /* Same explicit full-bleed technique as .hero/.wave/.cta-band, rather than
     relying on it being a plain body-level block that "should" already be
     full width by default — owner reported it visibly narrower than those,
     so matching the mechanism exactly removes any ambiguity. */
  width: var(--bleed-w);
  margin-left: calc(50% - var(--bleed-w) / 2 - var(--bleed-shift));
  margin-right: calc(50% - var(--bleed-w) / 2 + var(--bleed-shift));
  margin-top: 0;
  /* No bottom padding — .footer-bottom-bar below handles its own compact
     padding and needs to sit flush against the very bottom of the page. */
  padding: 2rem 1rem 0;
  background: #1b141d;
  color: #fff;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Logo sits left of the link columns (owner-requested — was stacked above,
   full-width, in an earlier pass). */
.footer-top {
  /* Deliberately NOT flex-wrap:wrap here — with that, any browser width
     under ~1100px (not unusual, not just "mobile") made the whole
     footer-links block drop below the logo, looking identical to the
     old "logo stacked above links" bug it was supposed to fix. The logo
     now always stays on the left down to the 700px breakpoint below;
     .footer-links (which has its own flex-wrap:wrap) wraps its 5 columns
     into multiple rows within the remaining space instead, so only the
     columns reflow, not the logo. */
  display: flex;
  gap: 1.5rem; /* was 2.5rem — tightened, along with .footer-links' own gap
    below, to give the 5 link columns a better chance of fitting on one row
    beside the logo at typical widths (owner reported "Contact us" — the
    5th column — wrapping to its own row at their working width) */
  align-items: flex-start;
  margin-bottom: 0.75rem; /* tightened from 1.5rem — minimal gap down to
    .footer-bottom-bar now that the licence/copyright line lives there
    instead of directly below as a footer-inner sibling */
}

@media (max-width: 700px) {
  /* Below this, there's no longer enough room beside a fixed 330px-wide
     logo for the link columns to read sensibly — revert to stacked, same
     as a normal narrow-viewport layout. */
  .footer-top {
    flex-direction: column;
  }
}

.footer-brand {
  flex-shrink: 0;
  max-width: 170px; /* the tagline wraps under the small logo instead of widening this column */
}

.footer-logo {
  display: block;
}

.footer-tagline {
  margin: 0.4rem 0 0;
  font-size: var(--fs-sm);
  color: #fff; /* owner: all footer text white except business
    name/licence/copyright — was a muted #ccc */
  font-style: italic;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.75rem; /* was 2rem all round — tightened, see .footer-top */
  flex: 1 1 auto;
}

.footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin-bottom: 0.3rem;
}

/* Every column's first item bolded the same way — "Contact us" already was
   (it's a plain heading); Buy/Sell/Rent/About are each also the first <li>
   of their own column, so this makes them read as column headers too, even
   though — unlike "Contact us" — they're still clickable links. */
.footer-links li:first-child {
  font-weight: 700;
}

.footer-contact-heading {
  color: #fff;
  margin-bottom: 0.5rem !important;
}

.footer-links a {
  color: #fff; /* owner: all footer text white except business
    name/licence/copyright — was a muted light purple (#d9c7f0) */
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline; /* was just a color change to #fff, which did
    nothing now that the resting color already is #fff */
}

/* Business name/licence/copyright, now one line in its own full-width
   black strip at the very bottom of the page (2026-10-07) — was two
   separate lines directly inside .footer-inner. Deliberately NOT white —
   owner explicitly excluded this text from the all-footer-text-white
   instruction. */
.footer-bottom-bar {
  width: var(--bleed-w);
  margin-left: calc(50% - var(--bleed-w) / 2 - var(--bleed-shift));
  margin-right: calc(50% - var(--bleed-w) / 2 + var(--bleed-shift));
  background: #000;
  padding: 0.4rem 1rem;
  text-align: center;
}

.footer-bottom-line {
  margin: 0;
  font-size: var(--fs-sm);
  color: #aaa;
}

/* --- Listing grid / cards (for_sale, properties-for-rent, recent_sales, homepage) --- */

.listing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
}

@media (min-width: 640px) {
  .listing-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .listing-grid { grid-template-columns: repeat(3, 1fr); }
}

.listing-card {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-bg);
}

.listing-card-thumb {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-soft);
}

.listing-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.listing-card-status {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.6rem;
  border-radius: 3px;
}

.listing-card-body {
  padding: 1rem;
}

.listing-card-price {
  margin: 0 0 0.25rem;
  font-weight: 700;
  color: var(--color-text-accent);
  font-size: var(--fs-base);
}

.listing-card-address {
  margin: 0 0 0.15rem;
  font-size: var(--fs-base);
}

.listing-card-address a {
  color: var(--color-ink);
  text-decoration: none;
}

.listing-card-address a:hover {
  color: var(--color-text-accent);
}

.listing-card-suburb {
  margin: 0 0 0.6rem;
  font-size: var(--fs-xs);
  color: var(--color-ink-soft);
  letter-spacing: 0.03em;
}

.listing-card-stats {
  margin: 0 0 0.6rem;
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

.listing-card-excerpt {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

/* --- Listing detail page --- */

.listing-detail-status {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.7rem;
  border-radius: 3px;
  margin-bottom: 0.5rem;
}

.listing-detail h1 {
  margin: 0 0 0.25rem;
  font-size: var(--fs-h3);
}

.listing-detail h2 {
  font-size: var(--fs-h4);
}

.listing-detail-suburb {
  color: var(--color-ink-soft);
  letter-spacing: 0.03em;
  margin: 0 0 0.75rem;
}

.listing-detail-price {
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--color-text-accent);
  margin: 0 0 0.75rem;
}

.listing-detail-stats {
  font-size: var(--fs-base);
  margin: 0 0 1.5rem;
}

.listing-detail-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .listing-detail-gallery { grid-template-columns: repeat(3, 1fr); }
}

.listing-detail-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
}

.listing-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.listing-detail-badges li {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.3rem 0.7rem;
  font-size: var(--fs-sm);
}

.listing-detail-description p {
  margin: 0 0 1rem;
}

.listing-detail-agent {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--color-bg-soft);
  border-radius: 6px;
}

.listing-detail-agent p {
  margin: 0 0 0.3rem;
}

/* --- Forms (contact, appraisal request) --- */

.honeypot-field {
  /* Off-screen, not display:none — some spam bots specifically skip
     display:none/visibility:hidden fields when autofilling, since those are
     an obvious tell. Positioning off-screen catches more of them while
     staying invisible/unreachable for a real visitor. */
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.form-field {
  margin-bottom: 1.2rem;
}

.form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font: inherit;
  font-size: var(--fs-base); /* 16px or more: iPhones zoom into smaller form boxes */
}

.form-field select {
  font: inherit;
  font-size: var(--fs-base);
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.form-message {
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
}

.form-message-success {
  background: #e8f7ee;
  color: #1a5c33;
  border: 1px solid #b7e4c7;
}

.form-message-error {
  background: #fdecea;
  color: #8a2c22;
  border: 1px solid #f3b8b1;
}

/* --- About page --- */

/* A wave used as the BOTTOM edge of a colored section (flipped vertically,
   and margin-top instead of -bottom to close the gap on the opposite
   side) — the homepage's .wave is always a top edge, this is the first use
   of one as a closing edge too. */
.wave-flip {
  transform: scaleY(-1);
  margin-bottom: 0;
  margin-top: -1px;
}

.about-banner {
  position: relative;
  z-index: 1;
  width: var(--bleed-w);
  margin-left: calc(50% - var(--bleed-w) / 2 - var(--bleed-shift));
  margin-right: calc(50% - var(--bleed-w) / 2 + var(--bleed-shift));
  padding: 3rem 1rem;
  background: var(--color-primary);
  color: #fff;
  text-align: center;
}

.about-banner h2 {
  margin-top: 0;
  color: #fff;
}

.about-banner-divider {
  font-size: var(--fs-lead);
  opacity: 0.7;
  margin: 0.5rem 0;
}

.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Grid items stretch to the row's tallest by default, which made every
     card in a row match the height of the longest review. align-items:
     start lets each card size to its own content instead. */
  align-items: start;
  gap: 1.5rem;
  margin: 1.5rem 0;
  /* Full-bleed like .hero/.wave/.cta-band, so the 3-column grid uses the
     whole viewport width instead of being capped at main's 1200px — the
     grid's own gap plus this padding is the "small margin" around cards. */
  width: var(--bleed-w);
  margin-left: calc(50% - var(--bleed-w) / 2 - var(--bleed-shift));
  margin-right: calc(50% - var(--bleed-w) / 2 + var(--bleed-shift));
  padding: 0 2rem;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .reviews-grid { grid-template-columns: repeat(3, 1fr); }
}

.review-card {
  border: 1px solid var(--color-border);
  border-radius: 32px; /* doubled again from 16px (8px originally) */
  padding: 1.25rem;
  background: var(--color-bg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.review-card h3 {
  margin-top: 0;
  font-size: var(--fs-h4);
  text-transform: capitalize;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.review-card > p {
  font-size: var(--fs-lead);
}

/* Two-column row: avatar sits at the card's bottom-left, tags start at
   the card's horizontal center (left edge of the second column) — fixed
   columns rather than flex so the tags column starts at exactly 50% of
   the card regardless of whether an avatar is present. */
.review-card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  margin-top: 1rem;
}

.review-card-meta img {
  grid-column: 1;
  justify-self: start;
  width: 88px; /* 100% bigger than the original 44px */
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Tags stacked one per line, plain text + icon (no pill/tab background —
   matches the original site's look), starting at the card's horizontal
   center per the grid column above. */
.review-tags {
  grid-column: 2;
  justify-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.review-card-meta-line {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.review-meta-icon {
  width: 1.1em;
  height: 1.1em;
  fill: var(--color-primary);
  flex-shrink: 0;
}

.review-card-meta p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

.selling-intro { max-width: 700px; margin-left: auto; margin-right: auto; }

/* "What's my property worth": long-form copy on the left, a compact request
   form on the right that stays in view while the copy scrolls (sticky).
   Stacks (copy first, form below) on narrow screens. */
.worth-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; margin: 1rem 0 2rem; }
.worth-copy { max-width: 760px; }
.worth-copy h1 { color: var(--color-text-accent); margin-top: 0; }
.worth-copy h2 { color: var(--color-text-accent); font-size: var(--fs-h3); margin: 2rem 0 0.5rem; }
.worth-copy h3 { font-size: var(--fs-lead); margin: 1.2rem 0 0.2rem; }
.worth-copy h3 + p { margin-top: 0.2rem; }
.worth-copy ol { padding-left: 1.4rem; }
.worth-copy li { margin-bottom: 0.5rem; }
.worth-form { background: #f3e6fb; padding: 1rem 1.1rem; border-radius: 24px 24px 60px 24px; font-size: var(--fs-sm); }
.worth-form h2 { margin: 0 0 0.6rem; font-size: var(--fs-h4); color: var(--color-text-accent); }
.worth-form .form-field { margin-bottom: 0.55rem; }
.worth-form .form-field label { font-size: var(--fs-sm); margin-bottom: 0.15rem; }
.worth-form input[type="text"], .worth-form input[type="tel"], .worth-form input[type="email"], .worth-form textarea, .worth-form select { padding: 0.35rem 0.55rem; font-size: var(--fs-base); }
.worth-form textarea { min-height: 0; }
.worth-form select { width: 100%; border: 1px solid var(--color-border); border-radius: 4px; font-family: inherit; background: #fff; }
.worth-form .btn { padding: 0.45rem 1.4rem; font-size: var(--fs-base); }
.worth-form .form-message { padding: 0.6rem; margin-bottom: 0.6rem; }
.worth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.6rem; }
.worth-topics { border: 0; padding: 0; margin: 0 0 0.6rem; }
.worth-topics legend { font-weight: 600; padding: 0; margin-bottom: 0.1rem; font-size: var(--fs-sm); }
.worth-topics label { display: block; line-height: 1.5; }
.worth-form .req { color: #c00; }
@media (min-width: 900px) {
  .worth-layout { grid-template-columns: 1fr 330px; }
  .worth-form { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
}

/* Tenants document grid: A4-ratio first-page preview, title, View/Download. */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2rem 1.5rem; margin: 2rem 0; }
.doc-card { text-align: center; }
.doc-card h2 { font-size: var(--fs-base); margin: 0.8rem 0 0.6rem; }
.doc-preview { display: block; aspect-ratio: 210 / 297; background: #fff; border: 1px solid var(--color-border); border-radius: 4px; box-shadow: 0 3px 10px rgba(0,0,0,0.12); overflow: hidden; }
.doc-preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.doc-preview-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2rem; font-weight: 700; color: var(--color-text-accent); }
.doc-actions { display: flex; gap: 0.5rem; justify-content: center; margin: 0; }
.btn-small { padding: 0.4rem 1rem; font-size: var(--fs-base); }
.btn-danger { background: #b00020; }

/* Admin area */
body.admin { background: #f6f4f8; }
.admin-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; padding: 0.8rem 1.5rem; background: var(--color-primary); color: #fff; }
.admin-bar a, .admin-bar .link-button { color: #fff; margin-left: 1rem; }
.admin-brand { font-weight: 700; margin-left: 0 !important; text-decoration: none; }
.inline-form { display: inline; }
.link-button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }
.admin-main { max-width: 900px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.admin-card { background: #fff; border: 1px solid var(--color-border); border-radius: 8px; padding: 1.2rem; margin-bottom: 1rem; }
.admin-login { max-width: 380px; margin: 3rem auto; }
.admin-sections { list-style: none; padding: 0; }
.admin-sections li { margin-bottom: 0.8rem; }
.admin-hint { color: var(--color-ink-soft); font-size: 0.9rem; min-height: 1.2em; }
.admin-doc { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.admin-doc-rename { display: flex; gap: 0.5rem; flex: 1 1 280px; }
.admin-doc-rename input { flex: 1; padding: 0.4rem 0.6rem; border: 1px solid var(--color-border); border-radius: 4px; font: inherit; }
.admin-qr { text-align: center; margin: 1rem 0; }
.admin-qr img { max-width: 100%; height: auto; }

/* Property management page: blob variants, bullet lists, fee tables. */
.promo-blob-0 { border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%; }
.promo-blob-1 { border-radius: 40% 60% 65% 35% / 60% 35% 65% 40%; }
.promo-blob-2 { border-radius: 70% 30% 45% 55% / 40% 55% 45% 60%; }
.lease-text h2 { font-size: var(--fs-h2); }
.lease-text p:first-of-type { font-size: var(--fs-lead); }
.lease-text ul { padding-left: 1.2rem; margin: 0.5rem 0; }
.lease-text li { margin-bottom: 0.3rem; }
.lease-note { font-style: italic; font-size: var(--fs-base); }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.admin-table th, .admin-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--color-border-soft); text-align: right; white-space: nowrap; }
.admin-table th:first-child, .admin-table td:first-child { text-align: left; }
.admin-type-row { display: grid; grid-template-columns: 1fr; gap: 0 1.2rem; padding: 0.8rem 0; border-bottom: 1px solid var(--color-border-soft); }
.admin-type-row .form-field { margin: 0; }
.admin-type-row input { width: 6rem; padding: 0.5rem 0.6rem; border: 1px solid var(--color-border); border-radius: 4px; font: inherit; font-size: var(--fs-base); }
.admin-type-use { margin: 0 0 0.3rem; color: var(--color-ink-soft); font-size: var(--fs-sm); }
.admin-type-sample { margin: 0; line-height: 1.2; overflow-wrap: anywhere; }
.admin-type-group { margin: 1.5rem 0 0.2rem; }
@media (min-width: 700px) { .admin-type-row { grid-template-columns: 11rem 1fr; } }
.admin-picker { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
.admin-card select { width: 100%; padding: 0.6rem 0.8rem; border: 1px solid var(--color-border); border-radius: 4px; font: inherit; background: #fff; }
@media (min-width: 700px) { .admin-picker { grid-template-columns: 1fr 2fr; } }
.policy { max-width: 800px; margin: 0 auto; }
.policy h2 { color: var(--color-text-accent); font-size: var(--fs-h3); margin: 1.8rem 0 0.4rem; }
.policy ul { padding-left: 1.4rem; }
.policy li { margin-bottom: 0.3rem; }

/* ==========================================================================
   Theme layer (2026-10-15): look and feel modelled on charitycatalyst.org.au
   at the owner's request — its type pairing (DM Sans headings / Alegreya Sans
   body), generous section spacing, pill buttons that lift on hover, rounded
   cards with a top accent bar, accent bars under section headings, a sticky
   frosted header, glowing gradient bands and fade-up scroll reveals.
   Brand colours are deliberately unchanged: Main Purple #4E0094, Secondary
   Purple #940090, grey #383838 — the reference site's teal/navy roles are
   mapped onto them (and darker shades of Main Purple). Everything is in this
   one block, overriding the rules above, so it can be reviewed or reverted
   as a unit.
   ========================================================================== */

:root {
  --color-primary-deep: #36006a;   /* darker shade of Main Purple, for gradients */
  --color-page: #fcfbfe;           /* near-white with a faint brand tint */
  --color-tint: #f5effb;           /* soft lavender section background */
  --color-border-soft: #e8e0f0;
  --font-heading: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Alegreya Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Type scale: every text size on the site is one of these nine. Change a
     value here to change that size everywhere. Phones shrink the three
     largest (see the media query below this block). */
  --fs-xs: 12px;    /* eyebrow labels, badges, utility bar */
  --fs-sm: 14px;    /* form labels, footer, card details, review dates */
  --fs-base: 16px;  /* buttons, form boxes, listing card address and price */
  --fs-body: 18px;  /* body text, tick lists, card text */
  --fs-lead: 20px;  /* intro text, card titles, review text */
  --fs-h4: 24px;    /* form headings, review titles, listing headline and price */
  --fs-h3: 30px;    /* page subheadings, listing address */
  --fs-h2: 40px;    /* section and purple-band headings, promo headings, big numbers */
  --fs-h1: 56px;    /* home hero and banner headings */
  --shadow-sm: 0 2px 8px rgba(54, 0, 106, 0.07);
  --shadow-md: 0 6px 24px rgba(54, 0, 106, 0.1);
  --shadow-lg: 0 20px 60px rgba(54, 0, 106, 0.16);
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (max-width: 767px) {
  :root {
    --fs-h1: 36px;
    --fs-h2: 30px;
    --fs-h3: 24px;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.7;
  background: var(--color-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h3, h4 { font-weight: 700; }

main > h1,
main > h2 {
  color: var(--color-text-accent);
}

main > h1 { font-size: var(--fs-h1); }

/* Short accent bar under section headings (the reference site's signature
   detail), growing on hover. */
h1.section-heading-centered::after,
h2.section-heading-centered::after,
.testimonials h2::after,
.cta-band h2::after,
.about-banner h2::after,
.promo-text h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin: 0.9rem auto 0;
  border-radius: 2px;
  background: var(--color-primary-dark);
  transition: width 0.5s ease;
}

h1.section-heading-centered:hover::after,
h2.section-heading-centered:hover::after,
.testimonials h2:hover::after,
.promo-text h2:hover::after {
  width: 120px;
}

.promo-text h2::after { margin-left: 0; }
.cta-band h2::after,
.about-banner h2::after { background: rgba(255, 255, 255, 0.75); }

h2.section-heading-centered { margin-top: 2.5rem; }

/* --- Top bar + header --- */

.top-bar {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.45rem 1.5rem;
}

.site-header {
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--color-border-soft);
  box-shadow: 0 1px 12px rgba(54, 0, 106, 0.06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Sticky only where there's room — on a phone the wrapped nav would take
   too much of the screen. */
@media (min-width: 900px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
  }
}

.logo img { transition: transform 0.3s ease; }
.logo img:hover { transform: scale(1.04); }

.nav-links {
  gap: 0.15rem;
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 600;
}

@media (max-width: 899px) {
  .nav-links {
    flex-wrap: wrap;
    font-size: var(--fs-base);
  }
}

.nav-links > li > a {
  position: relative;
  display: block;
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  transition: color 0.3s ease, background 0.3s ease;
}

.nav-links > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 60%;
  height: 2px;
  background: var(--color-primary-dark);
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.3s ease;
}

.nav-links > li > a:hover {
  color: var(--color-text-accent);
  background: rgba(78, 0, 148, 0.06);
}

.nav-links > li > a:hover::after,
.nav-item-dropdown:hover > a::after {
  transform: translateX(-50%) scaleX(1);
}

.nav-dropdown {
  padding: 0.5rem;
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-base);
}

.nav-dropdown a {
  border-radius: 8px;
  color: var(--color-ink);
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-dropdown a:hover {
  background: var(--color-tint);
  color: var(--color-text-accent);
}

/* --- Buttons --- */

.btn {
  padding: 0.8rem 1.8rem;
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 24px rgba(78, 0, 148, 0.25);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s ease, color 0.3s ease;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(148, 0, 144, 0.32);
}

.btn-light {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.btn-light:hover {
  background: #fff;
  color: var(--color-text-accent);
}

.btn-small {
  padding: 0.45rem 1.1rem;
  font-size: var(--fs-base);
}

.btn-danger:hover { background: #8a0019; }

/* --- Hero --- */

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(82vh, 760px);
  margin-bottom: 0;
  padding: 6rem 1.5rem 8rem;
  overflow: hidden;
}

/* Brand-tinted gradient over the photo instead of a flat grey tint — the
   reference site's hero is a deep coloured gradient. */
.hero::before {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(148, 0, 144, 0.25) 0%, transparent 55%),
    linear-gradient(160deg, rgba(30, 0, 60, 0.85) 0%, rgba(78, 0, 148, 0.62) 50%, rgba(148, 0, 144, 0.5) 100%);
}

/* Soft fade from the photo into the section below. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 140px;
  background: linear-gradient(to top, var(--color-tint) 0%, rgba(245, 239, 251, 0.5) 40%, transparent 100%);
}

.hero-overlay {
  max-width: 950px;
  z-index: 2;
}

.hero h1 {
  margin-bottom: 1rem;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.hero-subtitle {
  margin-bottom: 2.25rem;
  font-size: var(--fs-lead);
  opacity: 0.92;
}

.hero-segments {
  gap: 0.75rem;
  padding: 0.8rem 1.6rem;
  font-size: var(--fs-base);
  font-family: var(--font-heading);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.25);
}

.hero-segments a { transition: color 0.2s ease; }

@media (prefers-reduced-motion: no-preference) {
  .hero h1 { animation: fade-in-up 1s ease-out 0.15s both; }
  .hero-subtitle { animation: fade-in-up 1s ease-out 0.35s both; }
  .hero-segments { animation: fade-in-up 1s ease-out 0.55s both; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Testimonials + video --- */

.testimonials {
  padding: 4.5rem 1.5rem 5rem;
  background: linear-gradient(180deg, var(--color-tint) 0%, var(--color-page) 100%);
}

.testimonials h2,
h2.section-heading-centered,
.cta-band h2,
.about-banner h2 {
  font-size: var(--fs-h2);
}

.video-embed {
  margin: 2rem auto;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
}

/* Small and see-through so it doesn't hide a face in the video's opening
   frame (owner, 2026-10-18); solid on hover. */
.video-embed-play {
  width: 52px;
  height: 52px;
  font-size: 1.1rem;
  background: rgba(78, 0, 148, 0.5);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.18), 0 6px 18px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.video-embed-play:hover,
.video-embed-play:focus-visible {
  background: rgba(78, 0, 148, 0.9);
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.3), 0 10px 26px rgba(0, 0, 0, 0.3);
}

/* --- Promo sections --- */

.promo {
  gap: 3rem;
  padding: 3.5rem 0;
}

.promo-image {
  /* Mostly-downward shadow: .promo is overflow:hidden (for its blob), which
     would cut a wide shadow off square at the section's side edges. */
  box-shadow: 0 18px 30px -12px rgba(54, 0, 106, 0.3);
  transition: transform 0.5s var(--ease);
}

.promo:hover .promo-image { transform: scale(1.03) rotate(-1deg); }

.promo-divider {
  border-top-color: var(--color-border-soft);
  margin: 0;
}

/* --- Gradient bands --- */

/* The wave SVG above is a flat #4e0094, so the band starts at exactly that
   colour and deepens downwards, with soft glows like the reference site. */
.cta-band {
  padding: 4.5rem 1.5rem 5rem;
  background:
    radial-gradient(ellipse at 25% 55%, rgba(148, 0, 144, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 45%),
    linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
  overflow: hidden;
}

.cta-band p { gap: 1.25rem; margin-top: 2rem; }

/* Waves on both edges are flat #4e0094, so only edge-transparent glows here. */
.about-banner {
  padding: 4rem 1.5rem;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(148, 0, 144, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 50%, rgba(54, 0, 106, 0.4) 0%, transparent 55%),
    var(--color-primary);
}

/* --- Listing cards --- */

.listing-grid { gap: 2rem; margin: 2rem 0; }

.listing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-soft);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s ease;
}

.listing-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 4px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.listing-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(78, 0, 148, 0.35);
}

.listing-card:hover::before { transform: scaleX(1); }

.listing-card-thumb { overflow: hidden; }
.listing-card-thumb img { transition: transform 0.6s var(--ease); }
.listing-card:hover .listing-card-thumb img { transform: scale(1.05); }

.listing-card-status,
.listing-detail-status {
  border-radius: 50px;
  padding: 0.3rem 0.85rem;
  font-family: var(--font-heading);
  letter-spacing: 0.08em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.listing-card-body { padding: 1.25rem 1.4rem 1.5rem; }

.listing-card-price,
.listing-detail-price {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.listing-card-suburb,
.listing-detail-suburb {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: var(--font-heading);
  font-weight: 600;
}

/* --- Listing detail --- */

.listing-detail-gallery { gap: 0.75rem; }
.listing-detail-gallery img { border-radius: 14px; }

.listing-detail-badges li {
  border-color: var(--color-border-soft);
  border-radius: 50px;
  padding: 0.35rem 0.9rem;
  background: var(--color-tint);
}

.listing-detail-agent {
  padding: 1.25rem 1.5rem;
  background: var(--color-tint);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 14px 14px 0;
}

/* --- Reviews --- */

.review-card {
  border-color: var(--color-border-soft);
  background: #fff;
  box-shadow: var(--shadow-md);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.review-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* --- Forms --- */

.form-field label {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
}

.form-field input,
.form-field textarea,
.form-field select,
.worth-form select {
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--color-border-soft);
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus,
.worth-form select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(78, 0, 148, 0.12);
}

.form-message { border-radius: 14px; }

.worth-form {
  background: var(--color-tint);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-md);
}

.worth-form input[type="text"],
.worth-form input[type="tel"],
.worth-form input[type="email"],
.worth-form textarea,
.worth-form select {
  padding: 0.4rem 0.65rem;
  border-radius: 10px;
}

/* Clear the sticky header (its real height is set by footer.php's script). */
@media (min-width: 900px) {
  .worth-form {
    top: calc(var(--header-h, 0px) + 1rem);
    max-height: calc(100vh - var(--header-h, 0px) - 2rem);
  }
}

/* --- Tenant documents --- */

.doc-preview {
  border-radius: 14px;
  border-color: var(--color-border-soft);
  box-shadow: var(--shadow-md);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.doc-card:hover .doc-preview {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* --- Footer --- */

.site-footer {
  border-top: 3px solid var(--color-primary-dark);
  padding-top: 3rem;
}

.footer-links { font-size: var(--fs-sm); }

.footer-links li:first-child,
.footer-contact-heading {
  font-family: var(--font-heading);
}

.footer-links a { transition: opacity 0.2s ease; }
.footer-links a:hover { opacity: 0.8; }

.footer-bottom-bar { padding: 0.6rem 1rem; }

/* --- Scroll reveal (see includes/footer.php) ---
   Uses the separate `translate` property, not `transform`, so it never
   fights with the hover lift effects below. */

.js-reveal :is(.promo, .testimonials, .listing-card, .review-card, .video-pair, .doc-card, .section-header, .icon-card, .image-card, .service-card, .num-card, .quote-card, .split, .contact-layout, .steps li) {
  opacity: 0;
  translate: 0 40px;
  transition: opacity 0.8s var(--ease), translate 0.8s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s ease;
}

.js-reveal :is(.promo, .testimonials, .listing-card, .review-card, .video-pair, .doc-card, .section-header, .icon-card, .image-card, .service-card, .num-card, .quote-card, .split, .contact-layout, .steps li).is-visible {
  opacity: 1;
  translate: none;
}

/* ==========================================================================
   Components (2026-10-15, second pass): the reference site's "graphics" —
   eyebrow labels, big outlined numbers, icon cards, check
   lists, callouts and purple page banners.
   ========================================================================== */

.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.125em;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

.btn .icon { transition: transform 0.3s ease; }
.btn:hover .icon { transform: translateX(3px); }

/* Top bar: tagline left, contact links right. */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
}

.top-bar a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0;
}

.top-bar-tagline {
  margin-right: auto;
  /* Alegreya Sans italic: a true italic (DM Sans has none, so the browser
     used to slant it artificially); matches the footer tagline. */
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  opacity: 0.95;
}

.top-bar-flag {
  display: inline-block;
  width: 28px;
  height: 14px;
  margin-left: 0.5rem;
  vertical-align: -2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55); /* keeps the dark-blue flags' edges visible on the purple bar */
}

.top-bar-flag + .top-bar-flag { margin-left: 0.35rem; }

@media (max-width: 700px) {
  .top-bar { justify-content: center; }
  .top-bar-tagline { display: none; }
}

/* Eyebrow label: small uppercase text with a pulsing dot. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-accent);
}

.eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  animation: dot-pulse 3s ease-in-out infinite;
}

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

@keyframes dot-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}

/* --- Sections --- */

.section {
  position: relative;
  padding: 4.5rem 0;
}

/* Full-width tinted band; content stays within the normal 1200px column. */
.section-tint {
  width: var(--bleed-w);
  margin-left: calc(50% - var(--bleed-w) / 2 - var(--bleed-shift));
  margin-right: calc(50% - var(--bleed-w) / 2 + var(--bleed-shift));
  padding-left: calc(var(--content-pad) + max(1rem, calc((100vw - var(--content-pad)) / 2 - 600px)));
  padding-right: max(1rem, calc((100vw - var(--content-pad)) / 2 - 600px));
  background: linear-gradient(180deg, var(--color-tint) 0%, var(--color-page) 100%);
}

.section-header {
  max-width: 820px;
  margin: 0 auto 3rem;
  text-align: center;
}

.section-header-tight { margin: 3.5rem auto 1.75rem; }

.section-heading {
  margin: 0 0 1rem;
  font-size: var(--fs-h2);
  color: var(--color-text-accent);
}

.section-heading em,
.promo-text h2 em {
  font-style: normal;
  color: var(--color-text-accent);
}

.section-heading::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin: 0.9rem auto 0;
  border-radius: 2px;
  background: var(--color-primary-dark);
  transition: width 0.5s ease;
}

.section-heading:hover::after { width: 120px; }

.section-desc {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--color-ink-soft);
}

.section-more {
  margin-top: 2.5rem;
  text-align: center;
}

.button-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* --- Homepage hero extras --- */

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
  padding: 0.55rem 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-line { display: block; }

.hero-highlight {
  background: linear-gradient(135deg, #ffffff 0%, #ead2ff 55%, #ffc2f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-badge { animation: fade-in-up 1s ease-out both; }
}

/* --- Inner-page banner --- */

.page-hero {
  position: relative;
  overflow: hidden;
  width: var(--bleed-w);
  margin: -1rem calc(50% - var(--bleed-w) / 2 + var(--bleed-shift)) 1rem calc(50% - var(--bleed-w) / 2 - var(--bleed-shift));
  padding: 5rem 1.5rem 6.5rem;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(ellipse at 15% 40%, rgba(148, 0, 144, 0.45) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 45%),
    linear-gradient(160deg, #1e003c 0%, var(--color-primary) 55%, var(--color-primary-dark) 125%);
}

/* Faint "plus" pattern, as on the reference site's hero. */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}

.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 90px;
  background: linear-gradient(to top, var(--color-page) 0%, transparent 100%);
}

.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
}

.page-hero h1 {
  margin: 0 0 1rem;
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
}

.page-hero-lead {
  max-width: 680px;
  margin: 0 auto;
  font-size: var(--fs-lead);
  opacity: 0.9;
}

.page-hero-actions { margin: 2rem 0 0; }

@media (prefers-reduced-motion: no-preference) {
  .page-hero-inner { animation: fade-in-up 0.9s ease-out both; }
}

/* --- Shared bits: icon tile, card link, check list, callout --- */

.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 1.4rem;
  border-radius: 16px;
  background: rgba(78, 0, 148, 0.08);
  color: var(--color-text-accent);
  font-size: 1.6rem;
  transition: transform 0.4s ease, background 0.4s ease;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-accent);
  transition: gap 0.3s ease;
}

.check-list {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}

.check-list li {
  position: relative;
  margin-bottom: 0.55rem;
  padding-left: 1.9rem;
  line-height: 1.55;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.15em;
  height: 1.15em;
  background: var(--color-primary-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.callout {
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--color-primary-dark);
  border-radius: 0 14px 14px 0;
  background: rgba(78, 0, 148, 0.06);
  font-size: var(--fs-base);
}

/* First paragraph as a bold lead-in. */
.lead-first p:first-of-type {
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-text-accent);
}

/* --- Icon cards (homepage "How can we help", selling page) --- */

.icon-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .icon-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .icon-cards-3 { grid-template-columns: repeat(3, 1fr); }
  .icon-cards-4 { grid-template-columns: repeat(4, 1fr); }
}

.icon-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 2.25rem 1.75rem;
  border: 1px solid var(--color-border-soft);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: var(--color-ink);
  text-decoration: none;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s ease;
}

.icon-card::before,
.image-card::before,
.service-card::before,
.quote-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 4px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.icon-card:hover,
.image-card:hover,
.service-card:hover,
.quote-card:hover,
.num-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(78, 0, 148, 0.35);
}

.icon-card:hover::before,
.image-card:hover::before,
.service-card:hover::before,
.quote-card:hover::before { transform: scaleX(1); }

.icon-card:hover .icon-tile,
.image-card:hover .icon-tile,
.service-card:hover .icon-tile,
.contact-card:hover .icon-tile {
  transform: scale(1.1) rotate(-5deg);
}

.icon-card:hover .card-link { gap: 0.9rem; }

.icon-card h3 {
  margin: 0 0 0.6rem;
  font-size: var(--fs-lead);
  color: var(--color-text-accent);
}

.icon-card p {
  margin: 0 0 1.25rem;
  line-height: 1.65;
  color: var(--color-ink-soft);
}

/* Big outlined number in the corner. */
.icon-card-number {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(4, 0, 148, 0.3);
  transition: color 0.4s ease;
}

.icon-card:hover .icon-card-number { color: rgba(4, 0, 148, 0.12); }


/* --- Image cards (About: the three differences) --- */

.image-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

@media (min-width: 900px) {
  .image-cards { grid-template-columns: repeat(3, 1fr); }
}

.image-card,
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s ease;
}

.image-card > img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.image-card-body,
.service-card-body {
  position: relative;
  flex: 1;
  padding: 0 1.75rem 2rem;
}

/* Icon tile overlapping the photo's bottom edge. */
.image-card-body .icon-tile,
.service-card-body .icon-tile {
  margin-top: -30px;
  background: #fff;
  box-shadow: var(--shadow-md);
}

.image-card h3,
.service-card h3 {
  margin: 0 0 0.75rem;
  font-size: var(--fs-lead);
  color: var(--color-text-accent);
}

.image-card p { margin: 0 0 0.75rem; line-height: 1.7; }

/* --- Service cards (Property Management) --- */

.service-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: start;
}

@media (min-width: 860px) {
  .service-cards { grid-template-columns: repeat(2, 1fr); }
}

.service-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background: var(--color-tint);
}

.service-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.service-card:hover .service-card-media img { transform: scale(1.05); }

.service-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 25%, rgba(54, 0, 106, 0.7) 100%);
}

.service-card-number {
  position: absolute;
  right: 1.25rem;
  bottom: 0.6rem;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px #fff;
}

.service-card .check-list li { font-size: var(--fs-body); }
.service-card .callout { margin: 1rem 0 0; }

/* --- Split layout (About: photo stays put while the text scrolls) --- */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
  padding: 3.5rem 0 4.5rem;
}

.split-media .promo-image {
  max-width: 100%;
  margin: 0 auto;
}

.split-text p { line-height: 1.8; }

@media (min-width: 900px) {
  .split { grid-template-columns: 380px 1fr; gap: 4rem; }
  .split-media {
    position: sticky;
    top: calc(var(--header-h, 0px) + 2rem);
  }
}

/* --- Quote cards (homepage) --- */

.quote-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 1100px;
  margin: 2.5rem auto;
  text-align: left;
}

@media (min-width: 800px) {
  .quote-cards { grid-template-columns: repeat(3, 1fr); }
}

.quote-card {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 2rem 1.75rem 1.75rem;
  border: 1px solid var(--color-border-soft);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-md);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s ease;
}

.quote-mark {
  position: absolute;
  top: 1.1rem;
  right: 1.4rem;
  width: 2.75rem;
  height: 2.75rem;
  color: rgba(78, 0, 148, 0.12);
}

.quote-stars {
  display: flex;
  gap: 0.15rem;
  margin: 0 0 0.9rem;
  color: var(--color-text-accent);
}

.quote-card blockquote {
  margin: 0 0 1.25rem;
  font-size: var(--fs-body);
  line-height: 1.65;
}

.quote-card figcaption {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-accent);
}

/* --- Contact + off-market layouts --- */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
  margin: 2rem 0 4rem;
}

@media (min-width: 900px) {
  .contact-layout { grid-template-columns: 340px 1fr; }
}

.contact-cards {
  display: grid;
  gap: 1rem;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--color-border-soft);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: var(--color-ink);
  text-decoration: none;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s ease;
}

a.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(78, 0, 148, 0.35);
}

.contact-card .icon-tile {
  width: 50px;
  height: 50px;
  margin: 0;
  font-size: 1.25rem;
}

.contact-card strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-accent);
}

.form-card {
  padding: 2rem;
  border: 1px solid var(--color-border-soft);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-md);
}

.form-card h2 {
  margin-top: 0;
  font-size: var(--fs-h4);
  color: var(--color-text-accent);
}

.offmarket-aside .promo-image {
  max-width: 100%;
  margin: 0 auto 1.75rem;
}

/* --- Empty states (no listings / documents) --- */

.empty-state {
  max-width: 560px;
  margin: 2rem auto 4rem;
  padding: 3rem 2rem;
  border: 1.5px dashed rgba(78, 0, 148, 0.25);
  border-radius: 24px;
  background: #fff;
  text-align: center;
}

.empty-state .icon-tile { margin: 0 auto 1rem; }
.empty-state p { margin: 0 0 1rem; font-size: var(--fs-body); }

/* --- Appraisal page: numbered reason cards and step timeline --- */

.worth-copy h2 { font-size: var(--fs-h3); }

.num-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 1.5rem 0 2.5rem;
}

@media (min-width: 640px) {
  .num-cards { grid-template-columns: repeat(2, 1fr); }
}

.num-card {
  position: relative;
  padding: 1.5rem 1.4rem 1.25rem;
  border: 1px solid var(--color-border-soft);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s ease;
}

.num-card-n,
.steps li::before {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--color-text-accent);
  transition: color 0.4s ease, transform 0.4s ease;
}

.num-card-n {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: var(--fs-h2);
}

.num-card:hover .num-card-n {
  color: var(--color-text-accent);
  transform: rotate(-3deg) scale(1.08);
}

.worth-copy .num-card h3 {
  margin: 0 0 0.4rem;
  font-size: var(--fs-lead);
  color: var(--color-text-accent);
}

.num-card p { margin: 0; font-size: var(--fs-body); }

.worth-copy .steps {
  list-style: none;
  counter-reset: step;
  margin: 1.75rem 0 2rem;
  padding: 0;
}

.worth-copy .steps li {
  position: relative;
  counter-increment: step;
  min-height: 3.5rem;
  margin: 0;
  padding: 0.2rem 0 1.6rem 4.75rem;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 3.5rem;
  text-align: center;
  font-size: 2.2rem;
}

.steps li:hover::before { color: var(--color-text-accent); }

/* Connector line between step numbers. */
.steps li::after {
  content: "";
  position: absolute;
  left: 1.75rem;
  top: 2.6rem;
  bottom: 0.3rem;
  width: 2px;
  background: linear-gradient(var(--color-primary-dark), transparent);
  opacity: 0.35;
}

.steps li:last-child::after { display: none; }

/* The closing "Ready to find out..." heading, as a highlighted panel. */
.worth-copy > h2:last-child {
  padding: 1.5rem 1.75rem;
  border-left: 4px solid var(--color-primary-dark);
  border-radius: 0 18px 18px 0;
  background: var(--color-tint);
}

/* --- Small fixes for the new layouts --- */

.cta-band-inner { position: relative; z-index: 1; }
.about-banner .eyebrow { margin-bottom: 0.5rem; }
.testimonials .eyebrow { margin-bottom: 0.25rem; }
.doc-card h2 { font-size: var(--fs-base); color: var(--color-text-accent); }

/* ==========================================================================
   Round 3 (2026-10-15, owner's list): blue text, fixed left-hand menu,
   photo hero without purple, cleaner photos, maps on For Sale panels.
   ========================================================================== */

:root {
  --color-text-accent: #040094; /* owner: all purple TEXT becomes this blue;
    purple backgrounds, buttons and bands stay brand purple */
  --color-sidebar: #fffee5;
  --sidebar-w: 260px;
  --bleed-w: 100vw; /* full-bleed sections span the whole window, running
    under the translucent menu on wide screens */
  /* Offsets from the old solid menu column. The page is now centred on the
     whole window, ignoring the menu (owner, 2026-10-16), so both are 0. */
  --bleed-shift: 0px;
  --content-pad: 0px;
}

/* Icons stay brand purple; only text turned blue. */
.icon-tile { color: var(--color-primary); }

/* Utility bar: flat Main Purple. */
.top-bar { background: #4e0094; }

/* --- Left-hand menu (wide screens) --- */

@media (min-width: 1024px) {
  .site-header {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
    width: var(--sidebar-w);
    padding: 2rem 1.25rem;
    border-right: 1px solid rgba(235, 232, 196, 0.7);
    border-bottom: 0;
    background: rgba(255, 254, 229, 0.82); /* #FFFEE5, semi-transparent */
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .site-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2rem;
    height: 100%;
    max-width: none;
  }

  .logo img { height: 48px; }

  .nav-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75rem;
  }

  .nav-links {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.1rem;
    width: 100%;
  }

  .nav-links > li { position: relative; }

  .nav-links > li > a { padding: 0.6rem 0.9rem; }

  /* Underline grows from the left in a vertical menu. */
  .nav-links > li > a::after {
    left: 0.9rem;
    bottom: 6px;
    width: 40%;
    transform: scaleX(0);
    transform-origin: left;
  }

  .nav-links > li > a:hover::after,
  .nav-item-dropdown:hover > a::after {
    transform: scaleX(1);
  }

  /* Chevron marks the items with a submenu. */
  .nav-item-dropdown > a { padding-right: 2rem; }

  .nav-item-dropdown::after {
    content: "\203A";
    position: absolute;
    top: 0.45rem;
    right: 0.9rem;
    font-size: 1.2rem;
    color: var(--color-ink-soft);
    pointer-events: none;
  }

  /* Submenus pop out to the right of the sidebar. */
  .nav-dropdown {
    top: -0.5rem;
    left: 100%;
    margin-left: 1.5rem;
  }

  /* Invisible bridge across the gap, so moving the mouse to the submenu
     doesn't lose the hover. */
  .nav-dropdown::before {
    top: 0;
    bottom: 0;
    left: -1.5rem;
    width: 1.5rem;
    height: auto;
  }

}

/* --- Menu on phones / tablets: top bar with a Menu button --- */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border: 1px solid #e1ddb4;
  border-radius: 50px;
  background: #fff;
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-ink);
  cursor: pointer;
}

.nav-toggle .icon { font-size: 1.3rem; }

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
}

@media (max-width: 1023px) {
  .site-header {
    position: relative;
    background: var(--color-sidebar);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .site-nav { flex-wrap: wrap; }

  .nav-panel {
    display: none;
    width: 100%;
    padding: 0.5rem 0 1rem;
  }

  .nav-panel.is-open { display: block; }

  .nav-links {
    flex-direction: column;
    flex-wrap: nowrap;
    font-size: var(--fs-base);
  }

  /* No hover on touch screens: list sub-items under their heading. */
  .nav-dropdown {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 0.25rem 1rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: var(--fs-base);
  }

  .nav-dropdown::before { display: none; }
  .nav-dropdown a:hover { background: transparent; }

  .btn-header { margin-top: 1rem; }
}

/* --- Homepage hero: the photo with a light dark tint, no purple --- */

.hero::before { background: rgba(0, 0, 0, 0.4); }

.hero-highlight {
  background: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.hero::after {
  height: 90px;
  background: linear-gradient(to top, var(--color-tint) 0%, transparent 100%);
}

/* --- Landlords: service photos without the purple overlay --- */

.service-card-media::after { display: none; }

.service-card-number { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); }

/* Two independently stacked columns (see property-management/index.php). */
@media (min-width: 860px) {
  .service-cards {
    display: flex;
    align-items: flex-start;
    gap: 1.75rem;
  }

  .service-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    min-width: 0;
  }
}

@media (max-width: 859px) {
  .service-cards {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  .service-col { display: contents; }
}

/* --- About: show the faces in the "Reasonable fees" photo --- */

.image-card-diff-3 > img { object-position: 50% 0; }

/* --- For Sale panels: map at the bottom --- */

.listing-card-body { flex: 1; }

.listing-card-map {
  aspect-ratio: 16 / 10;
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-tint);
}

.listing-card-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Rent page note --- */

.listing-note {
  margin: 2rem 0 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--color-primary);
  border-radius: 0 14px 14px 0;
  background: var(--color-tint);
  font-size: var(--fs-base);
}

/* --- Photo banners on inner pages (owner's photos, assets/img/banners/) ---
   Replaces the purple gradient with the page's photo plus a light dark tint
   (same treatment as the homepage hero) so the white heading stays readable. */

.page-hero-photo {
  background-color: #2b2b2b;
  background-position: center;
  background-size: cover;
  padding-top: 6rem;
  padding-bottom: 7rem;
}

.page-hero-photo::before {
  background: rgba(0, 0, 0, 0.45);
}

.page-hero-photo h1,
.page-hero-photo .page-hero-lead {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* --- Floating menu (2026-10-16): full-bleed sections run under the
   translucent menu; their content keeps clear of it via --content-pad. --- */

.hero,
.page-hero,
.testimonials,
.cta-band,
.about-banner {
  padding-left: calc(1.5rem + var(--content-pad));
  padding-right: 1.5rem;
}

.site-footer,
.footer-bottom-bar {
  padding-left: calc(1rem + var(--content-pad));
}

.video-pair,
.reviews-grid {
  padding-left: calc(2rem + var(--content-pad));
}

.rating-band-inner { padding-left: calc(1rem + var(--content-pad)); }

/* Utility bar runs under the menu too. */
.top-bar {
  margin-left: calc(-1 * var(--content-pad));
  padding-left: calc(1.5rem + var(--content-pad));
}

/* --- Homepage hero: same height as the inner-page photo banners --- */

.hero,
.page-hero-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding-top: 4.5rem;
  padding-bottom: 6rem;
}

.hero-line { display: inline; }
.hero-badge { margin-bottom: 1.1rem; }
.hero-subtitle { margin-bottom: 1.5rem; }

/* --- Wide-screen menu (2026-10-16): no background, large white text with a
   shadow, floating over the photo banner (owner's reference). The logo moves
   to the top-right corner and the Free Appraisal button is gone. --- */

.logo-corner { display: none; }

@media (min-width: 1024px) {
  .site-header {
    padding-top: 4.5rem; /* clear the utility bar */
    border: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none; /* only the links themselves catch clicks */
  }

  .site-header .logo { display: none; }

  .nav-links {
    font-size: var(--fs-lead); /* same as the pop-out submenus (owner, 2026-10-18) */
    font-weight: 500;
    line-height: 1.25;
    pointer-events: auto;
    /* Only as wide as the longest item, so the arrows and the pop-out
       submenus sit just after the text instead of at the sidebar's edge. */
    width: max-content;
  }

  .nav-links > li > a {
    padding: 0.2rem 2.2rem 0.2rem 1rem;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 14px rgba(0, 0, 0, 0.35);
    transition: color 0.3s ease, text-shadow 0.3s ease;
  }

  .nav-links > li > a:hover {
    color: #fff;
    background: none;
  }

  .nav-links > li > a::after {
    left: 1rem;
    bottom: 0;
    background: currentColor;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }

  .nav-item-dropdown::after {
    top: 0.2rem;
    right: 1rem;
    font-size: 1.15rem;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  }

  .nav-dropdown { pointer-events: auto; }

  /* Dark text while neither the photo banner nor the footer is behind the
     menu (set by the script in includes/footer.php). */
  body.menu-dark .nav-links > li > a,
  body.menu-dark .nav-item-dropdown::after {
    color: var(--color-ink);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
  }

  .logo-corner {
    display: block;
    position: absolute;
    top: 3.5rem;
    right: 2rem;
    z-index: 150;
  }

  .logo-corner img {
    display: block;
    height: 60px;
    width: auto;
  }

  .logo-corner .logo-light { filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.35)); }
  .logo-corner .logo-dark { display: none; height: 50px; }

  body:not(:has(.hero, .page-hero)) .logo-corner .logo-light { display: none; }
  body:not(:has(.hero, .page-hero)) .logo-corner .logo-dark { display: block; }
}

/* Every page is at least one screen tall, so on short pages the dark footer
   starts below the menu instead of half behind it (and no blank strip shows
   below the footer). */
@media (min-width: 1024px) {
  main { min-height: calc(100vh - 2.2rem); }
}

/* --- Submenus to match the large white menu (2026-10-16): white text with
   the same shadow, on a translucent dark glass panel so they read over the
   photo banners and the white page alike. --- */
@media (min-width: 1024px) {
  .nav-dropdown {
    top: -0.35rem;
    margin-left: 0.75rem;
    min-width: 270px;
    padding: 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    background: rgba(20, 14, 30, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
    font-family: var(--font-heading);
    font-size: var(--fs-lead);
    font-weight: 500;
    line-height: 1.25;
  }

  .nav-dropdown::before {
    left: -0.75rem;
    width: 0.75rem;
  }

  .nav-item-dropdown:hover .nav-dropdown,
  .nav-item-dropdown:focus-within .nav-dropdown {
    animation: submenu-in 0.2s ease-out;
  }

  .nav-dropdown a {
    padding: 0.45rem 1rem;
    border-radius: 10px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  }

  .nav-dropdown a:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
  }
}

@keyframes submenu-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Reviews (and About) videos and review cards keep to the normal page width,
   like every other page, instead of running the full window width under the
   menu. */
.video-pair,
.reviews-grid {
  width: auto;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Selling banner: a widened copy of the gears photo (blurred extension at
   the sides) so "intelligent selling" shows in full on the short, wide
   banner. Narrow screens are tall enough for the original photo. */
@media (max-width: 1023px) {
  .page-hero-img-selling-wide {
    background-image: url(/assets/img/banners/selling.webp) !important;
  }
}

/* Fit the widened selling photo to the banner's height (it is 12:1, wider
   than the banner at almost any desktop size), so the whole gears picture shows,
   and shift it right so "intelligent selling" sits clear of the centred
   heading rather than behind it. */
@media (min-width: 1024px) {
  .page-hero-img-selling-wide {
    background-size: auto 100%;
    background-position: calc(50% + 34vw) center;
    background-repeat: no-repeat;
    background-color: #1f2723; /* the picture's own edge colour, for very wide windows */
  }
}

.review-card > p { font-size: var(--fs-lead); line-height: 1.55; }

/* ==========================================================================
   Speed (2026-10-17): self-hosted fonts, banner photos as <img>, map facade
   ========================================================================== */

/* Latin character set only (the site is English); font-display: swap shows
   text straight away in a fallback font while the web font loads. Licences:
   assets/fonts/OFL-*.txt. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-v17-variable.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Alegreya Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/alegreya-sans-v28-400.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Alegreya Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/alegreya-sans-v28-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Alegreya Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/alegreya-sans-v28-500.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Alegreya Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/alegreya-sans-v28-700.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Banner and homepage photos are <img> elements behind the text (layers:
   photo 0, tint/fade 1, text 2). */
.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.page-hero-photo::before,
.page-hero-photo::after,
.hero::before,
.hero::after {
  z-index: 1;
}
.page-hero-photo .page-hero-inner,
.hero .hero-overlay {
  z-index: 2;
}
.page-hero-photo,
.hero {
  background: #2b2b2b; /* while the photo loads */
}
/* Widened selling photo (desktop): fit to the banner height and shift right,
   exactly as the old background-position did. */
@media (min-width: 1024px) {
  .page-hero-img-selling-wide .page-hero-bg {
    object-position: calc(50% + 34vw) center;
  }
}

/* Click-to-load map on For Sale cards */
.map-facade {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--color-tint);
  cursor: pointer;
  overflow: hidden;
}
.map-facade img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.map-facade:hover img,
.map-facade:focus-visible img {
  transform: scale(1.03);
}
.map-facade-label {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  background: #fff;
  box-shadow: var(--shadow-md);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}
.map-facade-empty .map-facade-label {
  bottom: 50%;
  transform: translate(-50%, 50%);
}


/* --- 404 page (2026-10-19): the homepage hero with the banana-skin photo,
   filling the screen, text at the top so the banana and shoe stay in view. */
.hero-404 {
  align-items: flex-start;
  min-height: calc(100vh - 2.2rem);
  padding-top: 4rem;
}

.hero-404 .page-hero-bg { object-position: 60% 75%; }