/* ==========================================================================
   Stevens & Briant — "Ink & Air"
   White-dominant, hairline-ruled, Area Specialist mother-brand language.
   Flagship pass (Sep 2026): a 12-column editorial grid, two-column section
   heads, image-led team and approach sections, a count-aware listings grid,
   swipe rails on phones and a full-width wordmark footer.
   ========================================================================== */

/* ---- Fonts: self-hosted, latin subset (assets/fonts, SIL OFL 1.1) -------
   Google Fonts' own latin files (Source Serif 4 v15, Hanken Grotesk v12),
   served from our origin so first paint waits on no third party. The
   weight axis is trimmed to the weights the site uses (fontTools:
   `fonttools varLib.instancer <file> wght=300:400`, and wght=400:700 for
   the sans), which cuts a third of the bytes; the optical-size axis stays.
   The weight ranges below match the faces Google declared, so every weight
   renders as before. The "Fallback" faces resize the local system font to
   the web font's width and line metrics (measured from the files: headline
   optical size for the serif, weight 500 for the sans), so text barely
   moves when the web font swaps in. */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url("../assets/fonts/source-serif-4-v15-latin-300-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;
}

/* The italic is the accent voice of the cinematic pass (Oct 2026): a word or
   two inside a serif headline ("across *Greater Shepparton*"). Same family,
   same trimmed weight axis (wght=300:400), not preloaded: it is never the
   largest paint, and Georgia Italic stands in until it lands. */
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url("../assets/fonts/source-serif-4-v15-latin-italic-300-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: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk-v12-latin-400-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;
}

@font-face {
  font-family: "Source Serif 4 Fallback";
  src: local("Georgia");
  size-adjust: 93%;
  ascent-override: 111.4%;
  descent-override: 36%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Hanken Grotesk Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 102.5%;
  ascent-override: 97.6%;
  descent-override: 29.6%;
  line-gap-override: 0%;
}

:root {
  --paper: #FCFCFB;
  --ink: #101010;
  --ink-soft: #2A2A2A;
  --black: #000000;
  --grey: #666666;
  --hairline: #E0E0E0;
  --steel: #B3B2B5;        /* decorative only: separators, borders */
  --steel-text: #908F92;   /* steel-toned large numerals: 3.1:1 on paper (AA large text) */
  --sand: #EAE6DC;
  --star: #FCCA36;
  --grey-on-black: #9A9A9A; /* AA-contrast muted text on the black footer */
  --grey-on-ink: #A3A3A3;   /* AA-contrast muted text on the ink band */
  --serif: "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
  --sans: "Hanken Grotesk", "Hanken Grotesk Fallback", Arial, sans-serif;
  --ink-hair: rgba(255, 255, 255, 0.16); /* hairline on ink/black surfaces */
  --container: 1440px;
  --gutter: clamp(24px, 4.2vw, 64px);
  --col-gap: clamp(16px, 2.2vw, 32px);
  --section-pad: clamp(88px, 10vw, 160px);
  --header-h: 88px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Cinematic pass (Oct 2026): golden-hour sky, soft radii, pill controls. */
  --sky-high: #C9D8E6;     /* pale morning blue, top of the sky panels */
  --sky-low: #F4E4D0;      /* warm haze where the sky meets the cloud bank */
  --glow: #E9B97A;         /* golden-hour accent: progress lines, focus glints */
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --pill: 999px;
  /* Shared type scale (Oct 2026): every page's headings come from these,
     so the inner pages read at the homepage's sizes. */
  --text-display: clamp(44px, 6.4vw, 104px);  /* inner-page h1 */
  --text-display-md: clamp(38px, 5.6vw, 84px); /* long h1s: guides, addresses */
  --text-title: clamp(36px, 4.3vw, 64px);     /* section titles */
  --text-title-sm: clamp(32px, 3.4vw, 50px);  /* titles beside a column of copy */
  --text-subhead: clamp(21px, 1.8vw, 25px);   /* h3 in prose, cards and lists */
  --text-lede: clamp(21px, 2.2vw, 28px);      /* serif lede under a title */
  --text-prose: 17px;                         /* long-form reading copy */
  --masthead-pad: clamp(48px, 6.5vw, 104px);  /* space above an inner-page title */
  --focus-ring: var(--ink);                   /* white on dark surfaces */
}

/* The accent voice: a word or two of italic inside a serif headline. */
h1 em, h2 em, h3 em, .statement em, .footer-statement em {
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.01em;
}

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

/* Anchor jumps are instant: smooth-scrolling several thousand px stalls
   behind lazy image loads and feels broken. The reveal sweep handles
   jumped-past content. */

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: #fff; }

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

/* A phone number never breaks across two lines. */
a[href^="tel:"] { white-space: nowrap; }

p { text-wrap: pretty; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-feature-settings: "lnum" 1, "pnum" 1;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.container-narrow { max-width: 880px; }

/* ---- Type system ---------------------------------------------------- */

.eyebrow {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 28px;
}

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

/* Section index: "01 ——— CURRENT LISTINGS". The rule is drawn, not typed. */
.eyebrow-num {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-right: 14px;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.eyebrow-num::after {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}
.section-ink .eyebrow-num,
.eyebrow-light .eyebrow-num { color: #fff; }

.statement {
  font-size: clamp(34px, 4.1vw, 62px);
  line-height: 1.1;
  max-width: 24ch;
  letter-spacing: -0.016em;
  text-wrap: balance;
}

.section-title {
  font-size: var(--text-title);
  line-height: 1.04;
  max-width: 22ch;
  letter-spacing: -0.02em;
  margin-bottom: clamp(48px, 5vw, 72px);
  text-wrap: balance;
}

/* Two-column section head: eyebrow + title on the left, a short lede and
   the section's link on the right, bottom-aligned. */
.sec-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: end;
  margin-bottom: clamp(48px, 5.5vw, 88px);
}
.sec-head-main { grid-column: 1 / span 7; }
.sec-head-aside { grid-column: 9 / -1; padding-bottom: 8px; }
.sec-head .section-title { margin-bottom: 0; max-width: 16ch; }
.sec-lede {
  color: var(--grey);
  font-size: 16px;
  line-height: 1.65;
  max-width: 42ch;
}
.sec-lede + .text-link { margin-top: 22px; }

/* ---- Buttons --------------------------------------------------------- */

/* Pills (cinematic pass, Oct 2026): sentence-case labels in a rounded
   capsule, like the controls on the reference sites. */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.1px;
  text-transform: none;
  text-decoration: none;
  padding: 16px 30px;
  border: 1px solid transparent;
  border-radius: var(--pill);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Frosted glass pill for use over photos. */
.btn-glass {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
.btn-glass:hover { background: rgba(255, 255, 255, 0.26); border-color: rgba(255, 255, 255, 0.7); }

.btn-solid {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn-solid:hover { background: var(--ink-soft); border-color: var(--ink-soft); }

.btn-light {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.btn-light:hover { background: transparent; color: #fff; }

.btn-ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}
.btn-ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* The second choice beside a solid button, on paper or sand. */
.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: #fff; }

/* An arrow that leans forward on hover. */
.btn-arrow::after {
  content: "\2192";
  display: inline-block;
  margin-left: 14px;
  transition: transform 0.35s var(--ease);
}
.btn-arrow:hover::after { transform: translateX(5px); }

/* ---- Text links: underline slides in from left ----------------------- */

.text-link {
  position: relative;
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 4px;
  overflow: hidden;
}
.text-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: translateX(-101%);
  transition: transform 0.3s ease;
}
.text-link:hover::after { transform: translateX(0); }
/* Touch: a 44px tap area around the label, with the text and underline
   where they were (the negative margins give the padding back). */
@media (pointer: coarse) {
  .text-link { padding-top: 12px; padding-bottom: 16px; margin-top: -12px; margin-bottom: -12px; }
  .text-link::after { bottom: 12px; }
  .sec-lede + .text-link { margin-top: 10px; }
  .ledger a.text-link { margin-top: 28px; }
}

/* Plain inline links inside running copy: quiet, never browser blue. */
.report-consent a,
.footer-brand a,
.source-line a,
.aside-note a,
.legal a:not([class]),
.thanks-wrap p a:not([class]),
.appraisal-support a:not([class]) {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---- Header: a floating frosted pill (every page) ----------------------- */

/* Homepage: transparent over the hero film (ink type over its bright sky,
   css/cinema.css); the pill fades in once the page scrolls (.scrolled,
   main.js). It stays on screen while the film plays and hides on the way
   down after it.
   Inner pages (.site-header-pinned): the pill and ink type from the first
   paint, and it never hides, so a phone always keeps its menu button.
   The glass sits on .header-inner::before, a pseudo-element, so the
   backdrop-filter never becomes the containing block for the fixed phone
   menu (a sibling of the pseudo-element, not its child). */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: color 0.3s ease, transform 0.45s var(--ease);
  color: #fff;
}
.site-header.scrolled,
.site-header-pinned { color: var(--ink); }
.site-header.hidden { transform: translateY(-120%); }

.header-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  transition: padding 0.35s var(--ease);
}
.site-header.scrolled .header-inner { padding-top: 16px; padding-bottom: 16px; }

.header-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 10px;
  bottom: 10px;
  left: calc(var(--gutter) - 22px);
  right: calc(var(--gutter) - 22px);
  border-radius: var(--pill);
  background: rgba(252, 252, 251, 0.8);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
  box-shadow: 0 14px 40px -18px rgba(16, 16, 16, 0.28), inset 0 0 0 1px rgba(16, 16, 16, 0.06);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.35s ease, transform 0.5s var(--ease), box-shadow 0.35s ease;
}
.site-header.scrolled .header-inner::before,
.site-header-pinned .header-inner::before { opacity: 1; transform: none; }
/* Pinned at the top of an inner page the pill sits flat on the paper; the
   shadow arrives once there is content to float over. */
.site-header-pinned:not(.scrolled) .header-inner::before { box-shadow: inset 0 0 0 1px rgba(16, 16, 16, 0.08); }
body.nav-open .site-header .header-inner::before { opacity: 0; }

.wordmark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  text-decoration: none;
  color: inherit;
  line-height: 1.3;
  position: relative;
  z-index: 96;
}
.wordmark-names {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
}
.wordmark-brand {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  opacity: 0.7;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav-link {
  position: relative;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  padding-bottom: 4px;
  overflow: hidden;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: translateX(-101%);
  transition: transform 0.3s ease;
}
.nav-link:hover::after { transform: translateX(0); }

.nav-link,
.nav-cta { white-space: nowrap; }
.nav-cta { padding: 12px 22px; font-size: 14px; }
/* Over the homepage photo the appraisal button is a white keyline; in the
   pill it is the solid ink button it is everywhere else. (Desktop only: on
   phones it lives in the menu.) */
@media (min-width: 1101px) {
  .site-header:not(.scrolled):not(.site-header-pinned) .nav-cta {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.75);
    color: #fff;
  }
  .site-header:not(.scrolled):not(.site-header-pinned) .nav-cta:hover { background: #fff; color: var(--ink); }
}

/* Contact block the phone menu gains from main.js. Hidden on desktop. */
.nav-contact { display: none; }

/* A 44px button around the two-line icon. The negative margin keeps the
   icon's right edge on the page gutter. */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--pill);
  cursor: pointer;
  color: inherit;
  position: relative;
  z-index: 96;
}
.nav-toggle span {
  display: block;
  width: 28px; height: 1px;
  background: currentColor;
  transition: transform 0.3s ease;
}
.nav-toggle.open span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle.open span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ---- Homepage body ------------------------------------------------------
   The hero (the scroll film) lives in css/cinema.css; the page follows it. */

.page {
  position: relative;
  z-index: 1;
  background: var(--paper);
}

/* ---- Sections ---------------------------------------------------------- */

.section {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

.section-ruled { border-top: 1px solid var(--hairline); }

.section-ink {
  background: var(--ink);
  color: #fff;
}

.section-sand { background: var(--sand); }

/* ---- Intro — statement + proof row --------------------------------------- */

.intro-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
}
.intro-rail {
  grid-column: 1 / span 3;
  padding-top: 0.9em;
  margin: 0;
  color: var(--ink);
}
.intro-rail span {
  display: block;
  margin-top: 6px;
  color: var(--grey);
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: none;
  font-size: 14px;
}
.intro-grid .statement { grid-column: 4 / -1; max-width: 26ch; }

.intro-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 40px;
  margin-top: 48px;
}
.intro-foot .source-line { margin: 0; }

/* ---- Stats: numerals on rounded tiles of paper (every page) -------------- */

/* minmax(0, 1fr): a wide numeral must not push the row past a small screen. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--col-gap);
  margin-top: clamp(56px, 6vw, 96px);
}

.stat {
  min-width: 0;
  padding: 34px 30px 32px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: #fff;
}

.stat-number {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-feature-settings: "lnum" 1, "pnum" 1;
  font-size: clamp(48px, 5.8vw, 88px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}

.stat-label {
  display: block;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--grey);
}

.source-line {
  margin-top: 48px;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--grey);
}

/* ---- Property cards ------------------------------------------------------ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px var(--col-gap);
}

.prop-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.prop-media {
  position: relative;
  aspect-ratio: 10 / 7;
  overflow: hidden;
  background: #EDEDEB;
  border-radius: var(--radius-md);
  isolation: isolate; /* keeps the rounded clip on Safari while the photo scales */
}

.prop-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease), filter 0.5s var(--ease);
}

.prop-card:hover .prop-media img { transform: scale(1.045); }

/* A "View" pill rises into the photo corner on hover. */
a.prop-link .prop-media::after {
  content: "View \2192";
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 2;
  background: rgba(252, 252, 251, 0.92);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.2px;
  padding: 12px 18px;
  border-radius: var(--pill);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(14px);
  transition: transform 0.45s var(--ease), opacity 0.3s ease;
}
a.prop-link:hover .prop-media::after,
a.prop-link:focus-visible .prop-media::after { transform: none; opacity: 1; }

.chip {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  background: rgba(252, 252, 251, 0.9);
  color: var(--ink);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: var(--pill);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.prop-card-soon .prop-media img { filter: blur(5px); transform: scale(1.06); }
.prop-card-soon:hover .prop-media img { filter: blur(0); transform: scale(1.04); }

.prop-meta { padding-top: 22px; }

.prop-meta h3 {
  font-weight: 400;
  font-size: 21px;
  line-height: 1.3;
  margin-bottom: 6px;
}

.prop-price {
  font-family: var(--serif);
  font-weight: 300;
  font-feature-settings: "lnum" 1, "pnum" 1;
  font-size: 18px;
  color: var(--ink);
}

.prop-facts {
  display: flex;
  flex-wrap: wrap;
  margin-top: 12px;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--grey);
}
.prop-facts span + span::before {
  content: "\00b7";
  margin: 0 10px;
  color: var(--steel);
}

/* Feature-only children: hidden on standard cards */
.prop-headline {
  display: none;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.45;
  color: var(--grey);
  max-width: 30ch;
  margin-top: 24px;
}
.prop-cta {
  display: none;
  margin-top: 32px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  width: fit-content;
  padding-bottom: 4px;
  overflow: hidden;
}
.prop-cta::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: translateX(-101%);
  transition: transform 0.3s ease;
}
.prop-card:hover .prop-cta::after { transform: translateX(0); }

/* Homepage "For sale" grid: the first card is an editorial feature (large
   photo, facts column); the rest share one row. The column count follows
   the number of cards so the row never leaves an orphan. */
.card-grid-feature { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px var(--col-gap); }
.card-grid-feature:has(> .prop-card:nth-child(4):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid-feature:has(> .prop-card:nth-child(3):last-child),
.card-grid-feature:has(> .prop-card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card-grid-feature > .prop-card:first-child {
  grid-column: 1 / -1;
  margin-bottom: clamp(8px, 2vw, 32px);
}
.card-grid-feature > .prop-card:first-child .prop-link {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: end;
}
.card-grid-feature > .prop-card:first-child .prop-media {
  grid-column: 1 / span 8;
  aspect-ratio: 3 / 2;
}
.card-grid-feature > .prop-card:first-child .prop-meta {
  grid-column: 9 / -1;
  padding: 0 0 6px;
}
.card-grid-feature > .prop-card:first-child .prop-meta h3 {
  font-size: clamp(30px, 2.9vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
}
.card-grid-feature > .prop-card:first-child .prop-price { font-size: 24px; }
.card-grid-feature > .prop-card:first-child .prop-facts {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.card-grid-feature > .prop-card:first-child .prop-headline,
.card-grid-feature > .prop-card:first-child .prop-cta { display: block; }

/* Four across is tight for two-line addresses: step the titles down. */
.card-grid-feature > .prop-card:not(:first-child) .prop-meta h3 { font-size: 20px; }

.rail-hint { display: none; }

/* ---- Ledger -------------------------------------------------------------- */

.ledger-link {
  color: inherit;
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  display: inline-block;
  vertical-align: baseline;
  line-height: inherit;
}
/* The underline scales in from the left rather than sliding under an
   overflow clip: a clipped inline-block sits on its bottom edge, which
   lifted the address off the row's baseline. */
.ledger-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.ledger-link:hover::after,
.ledger-link:focus-visible::after { transform: scaleX(1); }
/* Touch: a 44px tap area round each address and source link, with the
   text and its underline where they were. */
@media (pointer: coarse) {
  .ledger-link { padding: 10px 0 12px; margin: -10px 0 -12px; }
  .ledger-link::after { bottom: 10px; }
  .source-line a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}

.ledger { margin-top: 112px; }

.ledger-eyebrow { margin-bottom: 8px; }

.ledger-list { list-style: none; }

.ledger-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 120px;
  align-items: baseline;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline);
}
.ledger-list li:first-child { border-top: 1px solid var(--hairline); }

.ledger-addr {
  font-family: var(--serif);
  font-weight: 400;
  font-feature-settings: "lnum" 1, "pnum" 1;
  font-size: 21px;
  line-height: 1.3;
  min-width: 0;
}

.chip-inline {
  position: static;
  display: inline-block;
  background: transparent;
  color: var(--grey);
  border: 1px solid var(--hairline);
  border-radius: var(--pill);
  font-size: 11px;
  padding: 5px 10px;
}

.ledger-price {
  font-family: var(--serif);
  font-weight: 300;
  font-feature-settings: "lnum" 1, "pnum" 1;
  font-size: 23px;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.ledger-date {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--grey);
  text-align: right;
}

.ledger .text-link { margin-top: 40px; }

/* Homepage ledger: a sticky count on the left, the typeset list on the right. */
.ledger-block {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
  margin-top: clamp(88px, 10vw, 150px);
}
.ledger-side {
  grid-column: 1 / span 3;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.ledger-side .eyebrow { margin-bottom: 12px; }
.ledger-count {
  font-family: var(--serif);
  font-weight: 300;
  font-feature-settings: "lnum" 1, "pnum" 1;
  font-size: clamp(96px, 11vw, 176px);
  line-height: 0.86;
  letter-spacing: -0.045em;
  margin-left: -0.04em;
}
.ledger-count-label {
  margin: 20px 0 14px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--grey);
  max-width: 18ch;
}
.ledger-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--grey);
  max-width: 26ch;
  margin-bottom: 32px;
}
.ledger-side-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.ledger-block > .ledger { grid-column: 5 / -1; margin-top: 0; }
.ledger-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 120px;
  gap: 24px;
  padding-bottom: 14px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--grey);
}
.ledger-head span:not(:first-child) { text-align: right; }

/* ---- 03 — How we sell ------------------------------------------------------ */

.approach-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
}
.approach-media {
  grid-column: 1 / span 5;
  position: sticky;
  top: calc(var(--header-h) + 24px);
  margin: 0;
  aspect-ratio: 4 / 5;
  max-height: calc(100vh - var(--header-h) - 64px);
  width: 100%;
  overflow: hidden;
  background: #DAD8D2;
}
.approach-media picture { display: block; width: 100%; height: 100%; }
.approach-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.approach-copy { grid-column: 7 / -1; padding-top: 4px; }
.approach-copy .section-title { max-width: 15ch; }

.method-list {
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.method {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 20px;
  padding: 36px 0 38px;
  border-bottom: 1px solid var(--hairline);
}

.method-num {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-feature-settings: "lnum" 1, "pnum" 1;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--steel-text);
}

.method h3 {
  font-weight: 400;
  font-size: clamp(23px, 2vw, 28px);
  line-height: 1.22;
  margin-bottom: 12px;
  max-width: 22ch;
}

.method p {
  color: var(--grey);
  max-width: 46ch;
}

.method-cta { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }

/* ---- 04 — Team ------------------------------------------------------------- */

.team-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: center;
}
.team-photo { grid-column: 1 / span 5; margin: 0; }
.team-photo picture {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #1A1A1A;
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
  filter: grayscale(100%) contrast(1.06);
  transition: filter 0.8s var(--ease), transform 1.2s var(--ease);
}
.team-photo:hover img { filter: grayscale(0%) contrast(1); transform: scale(1.02); }
.team-photo figcaption {
  margin-top: 16px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--grey-on-ink);
}
.team-copy { grid-column: 7 / -1; }
.team-copy .section-title { margin-bottom: clamp(40px, 4.5vw, 64px); }

.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px var(--col-gap);
}

.agent-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #1A1A1A;
}

.agent-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: grayscale(100%) contrast(1.05);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.agent-card:hover .agent-media img {
  filter: grayscale(0%) contrast(1);
  transform: scale(1.02);
}

.agent-info { border-top: 1px solid var(--ink-hair); padding-top: 28px; }

.agent-info h3 {
  font-weight: 400;
  font-size: clamp(26px, 2.2vw, 32px);
  line-height: 1.15;
  margin-bottom: 10px;
}

.agent-role {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--grey-on-ink);
  margin-bottom: 20px;
}

.agent-bio {
  color: rgba(255, 255, 255, 0.76);
  font-size: 15px;
  line-height: 1.7;
  max-width: 44ch;
  margin-bottom: 26px;
}

.agent-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agent-contact a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.3px;
  width: fit-content;
  position: relative;
  padding-bottom: 2px;
  overflow: hidden;
}
.agent-contact a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: translateX(-101%);
  transition: transform 0.3s ease;
}
.agent-contact a:hover::after { transform: translateX(0); }

/* ---- 05 — Reviews -------------------------------------------------------------- */

.review-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
  margin-bottom: clamp(72px, 8vw, 120px);
}
.review-score { grid-column: 1 / span 4; }
.feature-quote { grid-column: 6 / -1; }

.score-number {
  font-family: var(--serif);
  font-weight: 300;
  font-feature-settings: "lnum" 1, "pnum" 1;
  font-size: clamp(88px, 10.5vw, 160px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 4px 0 22px -0.04em;
}

.stars { display: flex; gap: 4px; margin-bottom: 20px; }
.stars svg { width: 18px; height: 18px; fill: var(--star); }
.review .stars svg { width: 13px; height: 13px; }

.feature-quote { max-width: none; margin-bottom: 0; padding-top: 10px; }

.feature-quote p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.18;
  letter-spacing: -0.014em;
  max-width: 24ch;
  margin-bottom: 30px;
  text-indent: -0.42em; /* hang the opening quote mark */
}

.feature-quote cite,
.review cite {
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--grey);
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--col-gap);
}

.review {
  padding: 34px 32px 30px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: #fff;
}

.review p {
  color: var(--grey);
  margin-bottom: 20px;
}

.review-anchor { margin-top: 48px; }

.review-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
}

.review-rating {
  font-family: var(--serif);
  font-weight: 400;
  font-feature-settings: "lnum" 1, "pnum" 1;
  font-size: 19px;
  margin-bottom: 12px;
}

.review-traits {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--grey);
}

/* ---- 06 — Areas ------------------------------------------------------------------ */

.area-list { list-style: none; }

/* Each suburb row is one whole-row link: number, suburb, one line, "Explore". */
.area-row { border-bottom: 1px solid var(--hairline); }
.area-row:first-child { border-top: 1px solid var(--hairline); }
.area-link {
  display: grid;
  grid-template-columns: 64px minmax(0, 4fr) minmax(0, 6fr) auto;
  align-items: baseline;
  column-gap: var(--col-gap);
  padding: 34px 0;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.4s ease;
}
.area-num {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.8px;
  color: var(--grey);
  font-feature-settings: "tnum" 1;
}
.area-link h3 {
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  transition: transform 0.5s var(--ease);
}
.area-link:hover h3 { transform: translateX(12px); }
.area-link p { color: var(--grey); max-width: 46ch; }
.area-go {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  white-space: nowrap;
}
.area-go span {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.35s var(--ease);
}
.area-link:hover .area-go span { transform: translateX(5px); }
.area-list:has(.area-link:hover) .area-link:not(:hover) { opacity: 0.45; }

/* Cursor-following suburb photo (motion.js, fine pointers only). */
.area-preview {
  position: fixed;
  top: 0; left: 0;
  z-index: 40;
  width: 300px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background: #DAD8D2;
}
.area-preview img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.area-more {
  margin-top: 40px;
  color: var(--grey);
  font-size: 15px;
}

/* ---- 07 — Market report ---------------------------------------------------------- */

#report .section-title { margin-bottom: 18px; }
#report .sec-head .section-title { margin-bottom: 0; max-width: 18ch; }
.report-lede {
  color: var(--grey);
  font-size: 17px;
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 0 52px;
}
.sec-head .report-lede { font-size: 16px; margin: 0; max-width: 42ch; }
.report-feature {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 40px;
  align-items: start;
}
.report-cover-wrap { grid-column: 1 / span 4; position: relative; }
.report-card { grid-column: 6 / -1; }
.report-badge {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--hairline);
  padding: 6px 14px;
  margin-bottom: 28px;
}
.report-cover {
  position: relative;
  margin: 0;
  width: 300px;
  max-width: calc(100% - 14px);
}
.report-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(14px, 14px);
  background: var(--ink);
}
.report-cover img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--hairline);
}

.report-card {
  background: var(--paper);
  padding: 44px 44px 36px;
  border: 1px solid var(--ink);
}
.report-card-head {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 6px;
}
.report-card-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--grey);
  margin: 0 0 26px;
}
.report-form { margin-bottom: 0; }
.report-card .btn-form { width: 100%; }
.optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--grey);
}
.report-consent {
  font-size: 12px;
  line-height: 1.5;
  color: var(--grey);
  margin-top: 16px;
}

.report-includes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  list-style: none;
  margin: 72px 0 0;
  padding: 44px 0 0;
  border-top: 1px solid var(--hairline);
}
.report-includes li {
  position: relative;
  padding-top: 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.report-includes li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 1px;
  background: var(--ink);
}
.report-sources {
  margin: 26px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--grey);
  max-width: 64ch;
}

/* ---- 08 — Appraisal --------------------------------------------------------------- */

.appraisal-support {
  color: var(--grey);
  max-width: 52ch;
  margin-bottom: 56px;
}

.section-sand .section-title { margin-bottom: 24px; }

.appraisal-container { max-width: 1120px; }

.appraisal-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
}

.appraisal-choice {
  display: flex;
  flex-direction: column;
  min-height: 430px;
  padding: 44px;
  background: var(--paper);
  border: 1px solid rgba(16, 16, 16, 0.16);
  transition: border-color 0.3s ease;
}
.appraisal-choice:hover { border-color: var(--ink); }

.appraisal-choice-primary { border-color: var(--ink); }

.choice-kicker {
  color: var(--grey);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.appraisal-choice h3 {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.22;
  margin-bottom: 16px;
  max-width: 20ch;
}

.appraisal-choice > p:not(.choice-kicker) {
  color: var(--grey);
  max-width: 46ch;
}

.choice-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
  margin: 28px 0 36px;
}

.choice-proof li {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.choice-proof li::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  margin: 0 10px 4px 0;
  background: var(--ink);
}

.choice-cta {
  align-self: flex-start;
  margin-top: auto;
  text-align: center;
}

.choice-cta-outline {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}

.choice-cta-outline:hover {
  background: var(--ink);
  color: #fff;
}

.appraisal-next {
  border-top: 1px solid rgba(16, 16, 16, 0.2);
  border-bottom: 1px solid rgba(16, 16, 16, 0.2);
  padding: 30px 0;
  margin-bottom: 28px;
}

.appraisal-next .choice-kicker { margin-bottom: 18px; }

.appraisal-next ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
}

.appraisal-next li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.4;
}

.appraisal-next li span {
  color: var(--grey);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
}

.appraisal-fallback {
  font-size: 14px;
  color: var(--grey);
}
.appraisal-fallback a { color: var(--ink); }

/* Homepage split: the pitch holds still on the left while the two choices
   stack on the right. */
.appraisal-split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: start;
}
.appraisal-intro {
  grid-column: 1 / span 5;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.appraisal-intro .section-title { max-width: 13ch; }
.appraisal-intro .appraisal-support { margin-bottom: 44px; }
.appraisal-split .appraisal-next ol { grid-template-columns: 1fr; gap: 14px; }
.appraisal-split .appraisal-choice-grid {
  grid-column: 7 / -1;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 0;
}
.appraisal-split .appraisal-choice { min-height: 0; padding: 48px; }
.appraisal-split .choice-proof { margin: 26px 0 34px; }

/* ---- On this page: jump links to a long page's sections ------------------------- */

.page-toc { margin-top: clamp(32px, 4vw, 48px); }
.page-toc-label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 14px;
}
.page-toc ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.page-toc a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--pill);
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color 0.3s ease;
}
.page-toc a:hover { border-color: var(--ink); }
.page-toc a span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--grey);
  font-feature-settings: "tnum" 1;
}

/* ---- Appraisal band (inner pages) -------------------------------------------------- */

/* Every inner page closes on the same sand band (scripts/site_chrome.py
   appraisal_band, lib/render.ts renderAppraisalBand): the pitch on the left,
   a paper card on the right with what happens next, the two appraisal
   paths and both agents' numbers. */
.appraisal-band {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 40px;
  align-items: center;
}
.appraisal-band-intro { grid-column: 1 / span 5; }
.appraisal-band-intro .section-title { max-width: 16ch; margin-bottom: 24px; }
.appraisal-band-intro .appraisal-support { margin-bottom: 0; }

.appraisal-band-card {
  grid-column: 7 / -1;
  padding: clamp(28px, 3.4vw, 48px);
  background: var(--paper);
  border: 1px solid rgba(16, 16, 16, 0.1);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -40px rgba(16, 16, 16, 0.4);
}

.appraisal-steps {
  list-style: none;
  display: grid;
  gap: 12px;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--hairline);
}
.appraisal-steps li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.4;
}
.appraisal-steps li span {
  color: var(--grey);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  font-feature-settings: "tnum" 1;
}

.appraisal-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px var(--col-gap);
}
.appraisal-path .choice-kicker { margin-bottom: 12px; }
.appraisal-path .btn { display: block; width: 100%; text-align: center; padding-left: 18px; padding-right: 18px; }
.appraisal-band .appraisal-fallback { margin-top: 26px; }

@media (max-width: 900px) {
  .appraisal-band-intro,
  .appraisal-band-card { grid-column: 1 / -1; }
  .appraisal-band-intro .section-title { max-width: 18ch; }
}
@media (max-width: 560px) {
  .appraisal-paths { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Forms -------------------------------------------------------------------------- */

.appraisal-form { margin-bottom: 32px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.form-row label { display: block; }

.form-label {
  display: block;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 10px;
}

.appraisal-form input,
.appraisal-form select {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.25s ease;
}

.appraisal-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23101010' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.appraisal-form input:hover,
.appraisal-form select:hover { border-color: var(--steel); }

.appraisal-form input:focus,
.appraisal-form select:focus { border-color: var(--ink); }

.btn-form { margin-top: 8px; }

/* ---- Footer ----------------------------------------------------------------------- */

.site-footer {
  position: relative;
  z-index: 1;
  background: var(--black);
  color: #fff;
  padding: var(--section-pad) 0 0; /* the full-width wordmark closes it */
  overflow: hidden;
}

.footer-top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 40px;
  align-items: end;
  margin-bottom: 36px;
}
.footer-top .footer-statement { grid-column: 1 / span 8; margin-bottom: 0; }
.footer-cta {
  grid-column: 9 / -1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-cta .btn { text-align: center; padding-left: 24px; padding-right: 24px; }

.footer-statement {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(38px, 5.4vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 16ch;
  margin-bottom: 32px;
}

.footer-coverage {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--grey-on-black);
  margin-bottom: 96px;
}
.footer-coverage span { margin: 0 12px; color: #444; }

.footer-columns {
  display: grid;
  /* Five groups. Columns size to their longest link (the email addresses)
     and spread across the row, so nothing is squeezed. */
  grid-template-columns: repeat(5, auto);
  justify-content: space-between;
  gap: 48px 40px;
  border-top: 1px solid #262626;
  padding-top: 56px;
  margin-bottom: 96px;
}

@media (max-width: 1280px) {
  .footer-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
}

.footer-heading {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--grey-on-black);
  margin-bottom: 20px;
}

.footer-col a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  margin-bottom: 10px;
  width: fit-content;
  position: relative;
  padding-bottom: 2px;
  overflow: hidden;
}
.footer-col a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: translateX(-101%);
  transition: transform 0.3s ease;
}
.footer-col a:hover::after { transform: translateX(0); }
/* Touch: each footer link is a 44px row, the underline under its word. */
@media (pointer: coarse) {
  .footer-col a { display: flex; align-items: center; min-height: 44px; margin-bottom: 0; padding-bottom: 0; }
  .footer-col a::after { bottom: 10px; }
}

.footer-brand {
  border-top: 1px solid #262626;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-brand img { width: 225px; }

.footer-brand p {
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--grey-on-black);
}

/* The closing wordmark runs the full width of the screen. */
.footer-mark {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 15.8vw;
  line-height: 0.78;
  letter-spacing: -0.05em;
  white-space: nowrap;
  text-align: center;
  color: #fff;
  margin: clamp(56px, 7vw, 110px) -0.1em 0;
  padding-bottom: 0.07em;
  user-select: none;
}

/* Read by screen readers, not shown (motion.js puts the full sentence of a
   split paragraph here; aria-label is not allowed on a <p>). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Every page's first tab stop; hidden until it has focus. */
.skip-link {
  position: fixed;
  top: -100px; left: 16px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: var(--pill);
  transition: top 0.2s ease;
}
.skip-link:focus-visible { top: 16px; }
/* The skip links' targets take focus without drawing a ring round the page
   (the homepage's skip links land on the sales figures, #results). */
main[tabindex="-1"]:focus,
#results[tabindex="-1"]:focus { outline: none; }
/* Pinned-header pages: the skip link and anchor jumps land below the pill. */
.site-header-pinned ~ main,
.site-header-pinned ~ main [id],
.site-header-pinned ~ .site-footer { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---- Focus visibility --------------------------------------------------- */

/* One ring for every keyboard stop: 2px, 3px clear of the element, in
   --focus-ring. Dark surfaces flip it to white, so a solid ink button on
   paper gets an ink ring and a white one on the ink band a white ring (a
   ring in the text colour vanished around solid buttons). Mouse clicks do
   not match :focus-visible, so nothing changes for pointer users. */
.section-ink,
.site-footer,
.story,
.moments,
.lp-hero,
.site-header:not(.scrolled):not(.site-header-pinned) { --focus-ring: #fff; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.nav-link:focus-visible::after,
.text-link:focus-visible::after,
.agent-contact a:focus-visible::after,
.footer-col a:focus-visible::after {
  transform: translateX(0);
}

.mobile-cta { display: none; }

/* ---- Reveal animation -------------------------------------------------------------- */

/* Hiding is scoped to .js (set by main.js): if JS never runs, everything renders. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .prop-media img, .agent-media img, .team-photo img, .btn, .nav-link::after, .text-link::after,
  a.prop-link .prop-media::after, .area-link h3 { transition: none; }

  /* Everything else too: the header's hide-on-scroll slide, the menu, the
     photo viewer, hover zooms on every page. State changes still happen,
     just without the movement. */
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Motion mode (GSAP layer active — html.motion set by motion.js) ------ */

/* GSAP drives all reveal styles inline; CSS transitions would fight it. */
.motion .reveal { transition: none; }

/* Split-line headlines: hidden until their masked line reveal fires. */
.motion .feature-quote cite { opacity: 0; }

/* Ledger: rows cascade in while their hairline draws itself left-to-right. */
.motion .ledger-list li {
  position: relative;
  border-bottom-color: transparent;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.motion .ledger-list li::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--hairline);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease) 0.15s;
}
.motion .ledger-list li.drawn {
  opacity: 1;
  transform: none;
}
.motion .ledger-list li.drawn::after { transform: scaleX(1); }

/* ---- Capture mode (?noanim=1): a still hero, header in the flow for full-page shots --- */

.noanim .site-header { position: absolute; }

/* ---- Responsive --------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .card-grid-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid-feature:has(> .prop-card:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid-feature > .prop-card:first-child .prop-media { grid-column: 1 / span 7; }
  .card-grid-feature > .prop-card:first-child .prop-meta { grid-column: 8 / -1; }
}

@media (max-width: 1080px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 28px; }
  .footer-columns { grid-template-columns: repeat(2, 1fr); }
  .review-score, .feature-quote { grid-column: 1 / -1; }
  .feature-quote { margin-top: 48px; }
  .review-grid { grid-template-columns: 1fr; }
  .area-link { grid-template-columns: 48px minmax(0, 1fr) auto; row-gap: 8px; }
  .area-link p { grid-column: 2 / 3; grid-row: 2; }
  .area-go { grid-column: 3; grid-row: 1; }
  .team-photo { grid-column: 1 / span 5; }
  .team-copy { grid-column: 6 / -1; }
  .team-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* Nav collapses at 1100px: the full desktop nav needs ~1140px before it
   overflows. The phone menu is a full-screen ink panel: serif links, the
   appraisal button, then both agents' numbers (main.js adds them). */
@media (max-width: 1100px) {
  .header-inner::before { left: 10px; right: 10px; top: 8px; bottom: 8px; }
  .site-nav {
    position: fixed;
    inset: 0;
    background: var(--ink);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
    padding: 118px var(--gutter) calc(28px + env(safe-area-inset-bottom));
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden; /* keep closed-menu links out of the tab order */
    transition: transform 0.5s var(--ease), visibility 0s 0.5s;
    z-index: 90;
  }
  .site-nav.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.5s var(--ease), visibility 0s 0s;
  }
  .site-nav > * { flex-shrink: 0; } /* short screens scroll the menu instead */
  .site-nav .nav-link {
    color: #fff;
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(32px, 8.4vw, 52px);
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-transform: none;
    padding: 4px 0 6px; /* at least 44px to tap */
  }
  .site-nav .nav-link::after { height: 1px; }
  .site-nav .nav-cta {
    margin-top: 28px;
    margin-bottom: 40px;
    border-color: #fff;
    background: #fff;
    color: var(--ink);
  }
  .nav-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px var(--col-gap);
    width: 100%;
    margin-top: auto;
    padding-top: 28px;
    border-top: 1px solid var(--ink-hair);
  }
  .nav-contact p {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--grey-on-ink);
    line-height: 1.5;
  }
  .nav-contact a {
    display: flex;
    align-items: center;
    width: fit-content;
    min-height: 44px;
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: none;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    text-underline-offset: 5px;
  }

  body.nav-open .site-header { color: #fff; --focus-ring: #fff; }
  .nav-toggle { display: flex; }
}

@media (max-width: 900px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stat { padding: 26px 22px; }

  .sec-head-main, .sec-head-aside { grid-column: 1 / -1; }
  .sec-head-aside { padding: 22px 0 0; }
  .sec-head .section-title { max-width: 18ch; }

  .intro-rail, .intro-grid .statement { grid-column: 1 / -1; }
  .intro-rail { padding-top: 0; margin-bottom: 24px; }

  .ledger-side, .ledger-block > .ledger { grid-column: 1 / -1; }
  .ledger-side {
    position: static;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    column-gap: 20px;
    margin-bottom: 36px;
  }
  .ledger-side .eyebrow { grid-column: 1 / -1; }
  .ledger-count { font-size: clamp(84px, 24vw, 120px); }
  .ledger-count-label { margin: 0 0 8px; }
  .ledger-note { grid-column: 1 / -1; max-width: none; margin: 18px 0 0; }
  .ledger-side-links { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 12px 28px; margin-top: 28px; }

  .approach-media, .approach-copy { grid-column: 1 / -1; }
  .approach-media { position: relative; top: 0; aspect-ratio: 16 / 10; max-height: none; margin-bottom: 48px; }

  .team-photo, .team-copy { grid-column: 1 / -1; }
  .team-photo { margin-bottom: 48px; }
  .team-photo picture { aspect-ratio: 5 / 4; }
  .team-photo img { object-position: 50% 8%; }
  .team-grid { grid-template-columns: 1fr 1fr; }

  .report-cover-wrap, .report-card { grid-column: 1 / -1; }
  .report-cover-wrap { justify-self: center; text-align: center; }

  .appraisal-intro, .appraisal-split .appraisal-choice-grid { grid-column: 1 / -1; }
  .appraisal-intro { position: static; margin-bottom: 40px; }
  .appraisal-intro .section-title { max-width: 18ch; }

  .footer-top .footer-statement, .footer-cta { grid-column: 1 / -1; }
  .footer-cta { flex-direction: row; flex-wrap: wrap; }
  .footer-cta .btn { flex: 1 1 220px; }
}

@media (max-width: 820px) {
  :root { --gutter: 24px; --header-h: 76px; }
  .header-inner { padding-top: 16px; padding-bottom: 16px; }
  .site-header.scrolled .header-inner { padding-top: 12px; padding-bottom: 12px; }

  .card-grid { grid-template-columns: 1fr; gap: 44px; }

  /* Listing rails: cards sit side by side and swipe, with the next card
     peeking in, instead of stacking into a very long page. */
  .card-grid-feature,
  .card-grid-sold {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 6px;
    scrollbar-width: none;
  }
  /* The desktop count rules out-rank the rail; kept apart so a browser
     without :has() still gets the rail above. */
  .card-grid-feature:has(> .prop-card:nth-child(4):last-child),
  .card-grid-feature:has(> .prop-card:nth-child(3):last-child),
  .card-grid-feature:has(> .prop-card:nth-child(2):last-child) { grid-template-columns: none; }
  .card-grid-feature::-webkit-scrollbar,
  .card-grid-sold::-webkit-scrollbar { display: none; }
  .card-grid-feature > .prop-card,
  .card-grid-sold > .prop-card { scroll-snap-align: start; }
  .card-grid-feature > .prop-card:first-child { grid-column: auto; margin-bottom: 0; }
  .card-grid-feature > .prop-card:first-child .prop-link { display: block; }
  .card-grid-feature > .prop-card:first-child .prop-media { aspect-ratio: 10 / 7; }
  .card-grid-feature > .prop-card:first-child .prop-meta { padding-top: 22px; }
  .card-grid-feature > .prop-card:first-child .prop-meta h3 { font-size: 21px; line-height: 1.3; margin-bottom: 6px; letter-spacing: 0; }
  .card-grid-feature > .prop-card:first-child .prop-price { font-size: 18px; }
  .card-grid-feature > .prop-card:first-child .prop-facts { margin-top: 12px; padding-top: 0; border-top: 0; }
  .card-grid-feature > .prop-card:first-child .prop-headline,
  .card-grid-feature > .prop-card:first-child .prop-cta { display: none; }
  .card-grid-feature:has(> .prop-card:only-child) { grid-auto-columns: 100%; }
  .rail-hint {
    display: block;
    margin-top: 18px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--grey);
  }
  .card-grid-feature:has(> .prop-card:only-child) + .rail-hint { display: none; }
  a.prop-link .prop-media::after { display: none; }

  .ledger-head { display: none; }
  .ledger-block .ledger-list li:nth-child(n + 9) { display: none; }

  .method { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 28px 0 30px; }
  .method-num { font-size: 26px; }

  .team-grid { grid-template-columns: 1fr; gap: 36px; }

  .area-link { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 26px 0; }
  .area-link h3 { font-size: 30px; }
  .area-go { font-size: 11px; }

  .form-row { grid-template-columns: 1fr; }
  .appraisal-choice-grid,
  .appraisal-next ol { grid-template-columns: 1fr; }
  .appraisal-choice,
  .appraisal-split .appraisal-choice { min-height: 0; padding: 30px 24px; }
  .appraisal-choice-primary { padding-top: 27px; }
  .appraisal-choice h3 { font-size: 26px; }
  .choice-cta { align-self: stretch; }
  .appraisal-next ol { gap: 14px; }
  .appraisal-next li { padding-bottom: 14px; border-bottom: 1px solid rgba(16, 16, 16, 0.12); }
  .appraisal-next li:last-child { padding-bottom: 0; border-bottom: 0; }

  .ledger-list li {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "addr price" "tags date";
    row-gap: 6px;
    gap: 16px;
  }
  .ledger-addr { grid-area: addr; font-size: 18px; }
  .ledger-tags { grid-area: tags; }
  .ledger-price { grid-area: price; font-size: 19px; }
  .ledger-date { grid-area: date; }
  .ledger-list li:not(:has(.ledger-tags > *)) .ledger-tags { display: none; }

  .review { padding: 28px 24px 24px; }
  .feature-quote p { text-indent: 0; }

  .footer-columns { grid-template-columns: 1fr 1fr; gap: 40px 24px; margin-bottom: 64px; }
  .footer-coverage { margin-bottom: 64px; }
  .footer-coverage span { margin: 0 6px; }
  .home .site-footer { padding-bottom: calc(68px + env(safe-area-inset-bottom)); } /* clears the call bar */

  /* Sticky call bar: appears once the hero has scrolled away. */
  .mobile-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: 1fr 1fr 1.15fr;
    gap: 8px;
    background: rgba(252, 252, 251, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--hairline);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    transform: translateY(110%);
    transition: transform 0.45s var(--ease);
  }
  body.past-hero .mobile-cta { transform: none; }
  body.nav-open .mobile-cta { transform: translateY(110%); }
  .mobile-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 0 6px;
    border: 1px solid var(--ink);
    color: var(--ink);
    white-space: nowrap;
  }
  .mobile-cta-primary { background: var(--ink); color: #fff !important; }
}

@media (max-width: 860px) {
  .report-includes { grid-template-columns: 1fr 1fr; gap: 24px 30px; }
}

@media (max-width: 480px) {
  /* Two tiles across a 375px phone: smaller numerals and labels so
     "realestate.com.au" still fits on one line. */
  .stat { padding: 22px 14px 20px; }
  .stat-number { font-size: clamp(34px, 10.5vw, 48px); margin-bottom: 12px; }
  .stat-label { font-size: 11.5px; letter-spacing: 0.8px; overflow-wrap: anywhere; }
}

@media (max-width: 560px) {
  .choice-proof { flex-direction: column; gap: 8px; margin-bottom: 28px; }
  .report-card { padding: 28px 22px 24px; }
  .report-includes { grid-template-columns: 1fr; }
  /* Each agent gets a full row (the email addresses are long); the link
     groups sit two across. */
  .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-columns > .footer-col:nth-child(-n + 2) { grid-column: 1 / -1; }
  .nav-contact { grid-template-columns: 1fr; }
}

/* iOS focus-zoom guard: iOS Safari (and every iOS WebView) zooms the page in
   when a form control whose font-size is under 16px takes focus, and never
   zooms back out. Floor text-entry controls at 16px on touch pointers so
   tapping a field never zooms; mouse/desktop type scales are untouched.
   Deliberately NOT fixed with `maximum-scale=1` on the viewport meta — that
   also kills pinch-to-zoom for low-vision users. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Visible breadcrumb (Home / Suburb / Address on listing pages, Home / Page
   on the results, suburb and listings index pages): the same trail as the
   BreadcrumbList JSON-LD. Wraps on phones; the address may break anywhere. */
.breadcrumb { margin-bottom: 20px; }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.5;
  color: var(--grey);
}
.breadcrumb li { min-width: 0; overflow-wrap: anywhere; }
.breadcrumb li + li::before { content: "/"; margin: 0 10px; color: var(--steel); }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
/* Touch: a 44px tap area round each crumb, with nothing moving. */
@media (pointer: coarse) {
  .breadcrumb a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}
.breadcrumb [aria-current="page"] { color: var(--ink); }