/* HDAS public website — marketing styles on top of harcourts.css.
   Tokens only (var(--h-*)); no raw hex, no decorative gradients, radius <= 8px. */

.hdas-site { margin: 0; color: var(--h-ink); background: var(--h-white);
  font-family: var(--h-font-sans); line-height: var(--h-lh-base); }
.site-container { max-width: var(--h-container); margin: 0 auto; padding: 0 var(--h-s-5); }

/* ── Nav ───────────────────────────────────────────────────────────────── */
.site-nav { position: sticky; top: 0; z-index: 50; background: var(--h-blue);
  box-shadow: var(--h-shadow-sm); }
.site-nav__inner { max-width: var(--h-container); margin: 0 auto; padding: 0 var(--h-s-5);
  display: flex; align-items: center; gap: var(--h-s-4); min-height: 68px; }
.site-nav__brand { display: flex; align-items: center; margin-right: auto; }
.site-nav__logo { height: 34px; width: auto; display: block; }
.site-nav__links { display: flex; align-items: center; gap: var(--h-s-5); }
.site-nav__links a { color: var(--h-white); text-decoration: none; font-size: var(--h-fs-sm);
  font-weight: var(--h-fw-semibold); letter-spacing: var(--h-tracking-body); }
.site-nav__links a:hover { color: var(--h-cyan); }
.site-nav__cta { color: var(--h-blue) !important; }
.site-nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: var(--h-s-2);
  flex-direction: column; gap: 5px; }
.site-nav__toggle span { display: block; width: 24px; height: 2px; background: var(--h-white); }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { position: relative; background: var(--h-blue); color: var(--h-white);
  padding: var(--h-s-16) 0; overflow: hidden; }
.hero__overlay { position: absolute; inset: 0; background: var(--h-blue-90); opacity: .35; }
.hero__inner { position: relative; max-width: var(--h-container-narrow); margin: 0 auto;
  padding: 0 var(--h-s-5); text-align: center; }
.hero__eyebrow { text-transform: uppercase; letter-spacing: var(--h-tracking-wide);
  font-size: var(--h-fs-xs); font-weight: var(--h-fw-semibold); color: var(--h-cyan); margin: 0 0 var(--h-s-3); }
.hero__title { font-size: var(--h-fs-5xl); line-height: var(--h-lh-tight); font-weight: var(--h-fw-bold);
  margin: 0 0 var(--h-s-4); }
.hero__script { color: var(--h-cyan); font-size: 1.15em; }
.hero__sub { font-size: var(--h-fs-lg); color: var(--h-white); opacity: .92; max-width: 46rem;
  margin: 0 auto var(--h-s-6); }
.hero__search { background: var(--h-white); border-radius: var(--h-radius-lg); padding: var(--h-s-3);
  max-width: 40rem; margin: 0 auto var(--h-s-5); box-shadow: var(--h-shadow-lg); }
.hero__search-tabs { display: flex; gap: var(--h-s-1); margin-bottom: var(--h-s-2); }
.hero__search-tabs a { flex: 1; text-align: center; padding: var(--h-s-2); text-decoration: none;
  color: var(--h-grey-70); font-weight: var(--h-fw-semibold); font-size: var(--h-fs-sm);
  border-radius: var(--h-radius-sm); }
.hero__search-tabs a.is-active { background: var(--h-blue-10); color: var(--h-blue); }
.hero__search-row { display: flex; gap: var(--h-s-2); }
.hero__search-input { flex: 1; padding: var(--h-s-3) var(--h-s-4); border: 1px solid var(--h-border);
  border-radius: var(--h-radius); font: inherit; color: var(--h-ink); }
.hero__cta { display: flex; flex-direction: column; align-items: center; gap: var(--h-s-2); }
.hero__cta-note { font-size: var(--h-fs-sm); color: var(--h-white); opacity: .8; }

/* ── Proof bar ─────────────────────────────────────────────────────────── */
.proofbar { background: var(--h-paper); border-bottom: 1px solid var(--h-border); }
.proofbar__inner { max-width: var(--h-container); margin: 0 auto; padding: var(--h-s-5);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--h-s-10); text-align: center; }
.proofbar__item { display: flex; flex-direction: column; }
.proofbar__item strong { font-size: var(--h-fs-2xl); color: var(--h-blue); font-weight: var(--h-fw-bold); }
.proofbar__item span { font-size: var(--h-fs-sm); color: var(--h-grey-70); }

/* ── Section heads ─────────────────────────────────────────────────────── */
.h-section { padding: var(--h-s-12) 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--h-s-4);
  margin-bottom: var(--h-s-6); flex-wrap: wrap; }
.sec-head__title { font-size: var(--h-fs-3xl); font-weight: var(--h-fw-bold); color: var(--h-blue); margin: 0; }
.sec-head__link { color: var(--h-blue); font-weight: var(--h-fw-semibold); text-decoration: none;
  font-size: var(--h-fs-sm); white-space: nowrap; }
.sec-head__link:hover { color: var(--h-cyan); }
.sec-lead { font-size: var(--h-fs-lg); color: var(--h-grey-70); max-width: 52rem; margin: 0 0 var(--h-s-6); }

/* ── Property cards ────────────────────────────────────────────────────── */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--h-s-5); }
.pcard { display: block; text-decoration: none; color: var(--h-ink); background: var(--h-white);
  border: 1px solid var(--h-border); border-radius: var(--h-radius-lg); overflow: hidden;
  transition: box-shadow var(--h-duration) var(--h-ease), transform var(--h-duration) var(--h-ease); }
.pcard:hover { box-shadow: var(--h-shadow-lg); transform: translateY(-2px); }
.pcard__img { aspect-ratio: 4 / 3; background: var(--h-grey-10) center/cover no-repeat; position: relative; }
.pcard__badge { position: absolute; top: var(--h-s-2); left: var(--h-s-2); background: var(--h-blue);
  color: var(--h-white); font-size: var(--h-fs-xs); font-weight: var(--h-fw-semibold);
  padding: var(--h-s-1) var(--h-s-2); border-radius: var(--h-radius-sm); text-transform: uppercase; }
.pcard__body { padding: var(--h-s-4); }
.pcard__price { font-size: var(--h-fs-lg); font-weight: var(--h-fw-bold); color: var(--h-blue); margin: 0 0 var(--h-s-1); }
.pcard__addr { font-size: var(--h-fs-sm); color: var(--h-grey-70); margin: 0 0 var(--h-s-2); }
.pcard__specs { display: flex; gap: var(--h-s-3); margin: 0; }
.pcard__specs span { font-size: var(--h-fs-sm); color: var(--h-charcoal); }

/* ── Sold cards ────────────────────────────────────────────────────────── */
.sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--h-s-5); }
.scard { display: block; text-decoration: none; color: var(--h-ink); background: var(--h-white);
  border: 1px solid var(--h-border); border-radius: var(--h-radius-lg); overflow: hidden;
  transition: box-shadow var(--h-duration) var(--h-ease); }
.scard--story:hover { box-shadow: var(--h-shadow-lg); }
.scard__img { aspect-ratio: 4 / 3; background: var(--h-grey-10) center/cover no-repeat; position: relative; }
.scard__sold { position: absolute; top: var(--h-s-2); left: var(--h-s-2); background: var(--h-cyan);
  color: var(--h-blue); font-size: var(--h-fs-xs); font-weight: var(--h-fw-bold);
  padding: var(--h-s-1) var(--h-s-2); border-radius: var(--h-radius-sm); letter-spacing: var(--h-tracking-wide); }
.scard__body { padding: var(--h-s-4); }
.scard__price { font-size: var(--h-fs-lg); font-weight: var(--h-fw-bold); color: var(--h-blue); margin: 0 0 var(--h-s-1); }
.scard__addr { font-size: var(--h-fs-sm); color: var(--h-grey-70); margin: 0 0 var(--h-s-2); }
.scard__stats { display: flex; flex-wrap: wrap; gap: var(--h-s-2); margin: 0 0 var(--h-s-2); }
.scard__stats span { font-size: var(--h-fs-xs); background: var(--h-blue-10); color: var(--h-blue);
  padding: var(--h-s-1) var(--h-s-2); border-radius: var(--h-radius-pill); font-weight: var(--h-fw-semibold); }
.scard__more { font-size: var(--h-fs-sm); color: var(--h-cyan); font-weight: var(--h-fw-semibold); }

/* ── Agent cards ───────────────────────────────────────────────────────── */
.agrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--h-s-5); }
.acard { display: block; text-decoration: none; color: var(--h-ink); text-align: center; }
.acard__img { aspect-ratio: 3 / 4; background: var(--h-grey-10) center/cover no-repeat;
  border-radius: var(--h-radius-lg); margin-bottom: var(--h-s-3); }
.acard__name { font-weight: var(--h-fw-bold); color: var(--h-blue); margin: 0; }
.acard__title { font-size: var(--h-fs-sm); color: var(--h-grey-70); margin: 0; }
.acard__rating { font-size: var(--h-fs-sm); color: var(--h-charcoal); margin: var(--h-s-1) 0 0; }

/* ── Review cards ──────────────────────────────────────────────────────── */
.reviews-band { background: var(--h-paper); }
.rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--h-s-5); }
.rcard { margin: 0; background: var(--h-white); border: 1px solid var(--h-border);
  border-radius: var(--h-radius-lg); padding: var(--h-s-5); }
.rcard__stars { color: var(--h-cyan); font-size: var(--h-fs-lg); margin-bottom: var(--h-s-2); }
.rcard__text { margin: 0 0 var(--h-s-3); font-size: var(--h-fs-base); color: var(--h-charcoal); }
.rcard__by { font-size: var(--h-fs-sm); color: var(--h-grey-70); font-weight: var(--h-fw-semibold); }
.rcard__agent { display: block; font-weight: var(--h-fw-regular); color: var(--h-grey-50); }

/* ── Bands ─────────────────────────────────────────────────────────────── */
.sell-band { background: var(--h-paper); }
.suburb-chips { display: flex; flex-wrap: wrap; gap: var(--h-s-2); }
.suburb-chip { text-decoration: none; background: var(--h-blue-10); color: var(--h-blue);
  padding: var(--h-s-2) var(--h-s-4); border-radius: var(--h-radius-pill); font-weight: var(--h-fw-semibold);
  font-size: var(--h-fs-sm); }
.suburb-chip:hover { background: var(--h-cyan); color: var(--h-blue); }
.cta-band { background: var(--h-blue); color: var(--h-white); padding: var(--h-s-12) 0; text-align: center; }
.cta-band__title { font-size: var(--h-fs-3xl); font-weight: var(--h-fw-bold); margin: 0 0 var(--h-s-2); }
.cta-band__sub { font-size: var(--h-fs-lg); opacity: .9; margin: 0 0 var(--h-s-5); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer { background: var(--h-blue); color: var(--h-white); }
.site-footer__inner { max-width: var(--h-container); margin: 0 auto; padding: var(--h-s-12) var(--h-s-5);
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: var(--h-s-8); }
.site-footer__logo { height: 32px; margin-bottom: var(--h-s-3); }
.site-footer__tag { font-size: var(--h-fs-sm); opacity: .85; margin: 0 0 var(--h-s-4); max-width: 22rem; }
.site-footer__col h4 { font-size: var(--h-fs-sm); text-transform: uppercase; letter-spacing: var(--h-tracking-wide);
  color: var(--h-cyan); margin: 0 0 var(--h-s-3); }
.site-footer__col a { display: block; color: var(--h-white); text-decoration: none; opacity: .9;
  font-size: var(--h-fs-sm); padding: var(--h-s-1) 0; }
.site-footer__col a:hover { color: var(--h-cyan); }
.site-footer__office { margin-bottom: var(--h-s-3); font-size: var(--h-fs-sm); }
.site-footer__office strong { display: block; }
.site-footer__office span { display: block; opacity: .85; }
.site-footer__office a { display: inline; opacity: .9; }
.site-footer__bar { border-top: 1px solid var(--h-blue-80); padding: var(--h-s-4) var(--h-s-5);
  max-width: var(--h-container); margin: 0 auto; display: flex; justify-content: space-between;
  font-size: var(--h-fs-xs); opacity: .75; flex-wrap: wrap; gap: var(--h-s-2); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pgrid, .sgrid, .rgrid { grid-template-columns: repeat(2, 1fr); }
  .agrid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .site-nav__toggle { display: flex; }
  .site-nav__links { position: absolute; top: 68px; left: 0; right: 0; background: var(--h-blue);
    flex-direction: column; align-items: stretch; gap: 0; padding: var(--h-s-3) var(--h-s-5) var(--h-s-5);
    display: none; box-shadow: var(--h-shadow-lg); }
  .site-nav__links.is-open { display: flex; }
  .site-nav__links a { padding: var(--h-s-3) 0; border-bottom: 1px solid var(--h-blue-80); }
  .site-nav__cta { margin-top: var(--h-s-3); text-align: center; }
  .hero__title { font-size: var(--h-fs-4xl); }
  .pgrid, .sgrid, .rgrid, .agrid { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .sec-head__title, .cta-band__title { font-size: var(--h-fs-2xl); }
}