/* ──────────────────────────────────────────────────────────────────────────
   Proposal page components — prop.hdas.com.au
   Extends harcourts.css. ONLY var(--h-*) tokens here — no raw hex, no fonts.
   Every class is .h-prop-* so it can't collide with the shared library.
   ────────────────────────────────────────────────────────────────────────── */

.h-prop {
  background: var(--h-white);
  color: var(--h-ink);
}

/* Scroll-reveal: sections fade/rise in as they enter view (JS toggles .is-in). */
.h-prop-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--h-ease), transform .7s var(--h-ease);
  will-change: opacity, transform;
}
.h-prop-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .h-prop-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.h-prop-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--h-white);
  overflow: hidden;
}
.h-prop-hero__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
/* Navy wash so white text always reads, brand-dominant (60% blue) */
.h-prop-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    var(--h-blue) 0%,
    rgba(0, 31, 73, 0.72) 32%,
    rgba(0, 31, 73, 0.20) 70%,
    rgba(0, 31, 73, 0.45) 100%);
}
.h-prop-hero__top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--h-s-6) var(--h-s-6) 0;
}
.h-prop-hero__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--h-container);
  margin: 0 auto;
  padding: var(--h-s-8) var(--h-s-6) var(--h-s-12);
}
.h-prop-hero__prepared {
  font-size: var(--h-fs-sm);
  letter-spacing: var(--h-tracking-wide);
  text-transform: uppercase;
  color: var(--h-cyan);
  font-weight: var(--h-fw-semibold);
  margin: 0 0 var(--h-s-3);
}
.h-prop-hero__address {
  font-size: var(--h-fs-5xl);
  line-height: var(--h-lh-tight);
  letter-spacing: var(--h-tracking-tight);
  font-weight: var(--h-fw-light);
  margin: 0;
}
.h-prop-hero__address strong { font-weight: var(--h-fw-bold); }
.h-prop-hero__suburb {
  display: block;
  font-size: var(--h-fs-2xl);
  font-weight: var(--h-fw-regular);
  margin-top: var(--h-s-1);
  color: var(--h-paper);
}
.h-prop-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--h-s-5);
  margin-top: var(--h-s-6);
  font-size: var(--h-fs-lg);
}
.h-prop-hero__meta span { display: inline-flex; align-items: center; gap: var(--h-s-2); }
.h-prop-hero__meta b { font-weight: var(--h-fw-semibold); }
.h-prop-hero__cue {
  position: absolute;
  left: 50%;
  bottom: var(--h-s-5);
  transform: translateX(-50%);
  z-index: 2;
  width: 26px; height: 26px;
  border-left: 2px solid var(--h-cyan);
  border-bottom: 2px solid var(--h-cyan);
  rotate: -45deg;
  animation: h-prop-bob 1.8s var(--h-ease) infinite;
}
@keyframes h-prop-bob { 0%,100%{ translate:0 0 } 50%{ translate:0 8px } }

/* ── Section scaffold ─────────────────────────────────────────────────────── */
.h-prop-section { padding: var(--h-s-16) 0; }
.h-prop-section--tint { background: var(--h-paper); }
.h-prop-section--navy { background: var(--h-blue); color: var(--h-white); }
.h-prop-wrap { width: 100%; max-width: var(--h-container); margin: 0 auto; padding: 0 var(--h-s-6); }
.h-prop-wrap--narrow { max-width: var(--h-container-narrow); }
.h-prop-kicker {
  font-size: var(--h-fs-sm);
  letter-spacing: var(--h-tracking-wide);
  text-transform: uppercase;
  color: var(--h-cyan);
  font-weight: var(--h-fw-semibold);
  margin: 0 0 var(--h-s-3);
}
.h-prop-h2 {
  font-size: var(--h-fs-4xl);
  line-height: var(--h-lh-tight);
  letter-spacing: var(--h-tracking-tight);
  font-weight: var(--h-fw-light);
  color: var(--h-blue);
  margin: 0 0 var(--h-s-5);
}
.h-prop-section--navy .h-prop-h2 { color: var(--h-white); }
.h-prop-h2 strong { font-weight: var(--h-fw-bold); }

/* ── Letter / greeting ────────────────────────────────────────────────────── */
.h-prop-letter p {
  font-size: var(--h-fs-lg);
  line-height: var(--h-lh-base);
  color: var(--h-charcoal);
  margin: 0 0 var(--h-s-4);
  max-width: 62ch;
}
.h-prop-letter__sign {
  margin-top: var(--h-s-6);
  font-weight: var(--h-fw-semibold);
  color: var(--h-blue);
}

/* ── Your-home feature chips ──────────────────────────────────────────────── */
.h-prop-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--h-s-3);
  margin-top: var(--h-s-5);
  list-style: none;
  padding: 0;
}
.h-prop-features li {
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius-pill);
  padding: var(--h-s-2) var(--h-s-4);
  font-size: var(--h-fs-sm);
  color: var(--h-charcoal);
  background: var(--h-white);
}

/* ── Market stat tiles ────────────────────────────────────────────────────── */
.h-prop-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--h-s-4);
}
.h-prop-stat {
  background: var(--h-white);
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius-lg);
  padding: var(--h-s-5);
}
.h-prop-stat__label {
  font-size: var(--h-fs-xs);
  letter-spacing: var(--h-tracking-wide);
  text-transform: uppercase;
  color: var(--h-grey-50);
  font-weight: var(--h-fw-semibold);
  margin: 0 0 var(--h-s-2);
}
.h-prop-stat__value {
  font-size: var(--h-fs-3xl);
  font-weight: var(--h-fw-bold);
  color: var(--h-blue);
  line-height: var(--h-lh-tight);
}
.h-prop-stat__sub { font-size: var(--h-fs-sm); color: var(--h-grey-50); margin-top: var(--h-s-1); }
.h-prop-statnote { font-size: var(--h-fs-sm); color: var(--h-grey-50); margin-top: var(--h-s-4); }

/* ── Recent-sales bar chart (honest: built from the actual comps) ─────────── */
.h-prop-bars { display: flex; align-items: flex-end; gap: var(--h-s-3); height: 180px; margin-top: var(--h-s-5); }
.h-prop-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--h-s-2); height: 100%; justify-content: flex-end; }
.h-prop-bar__fill {
  width: 100%;
  background: var(--h-blue);
  border-radius: var(--h-radius-sm) var(--h-radius-sm) 0 0;
  transition: height .9s var(--h-ease);
}
.h-prop-bar--subject .h-prop-bar__fill { background: var(--h-cyan); }
.h-prop-bar__val { font-size: var(--h-fs-xs); font-weight: var(--h-fw-semibold); color: var(--h-blue); }
.h-prop-bar__lbl { font-size: var(--h-fs-xs); color: var(--h-grey-50); text-align: center; }

/* ── 3-year median price trend (PropTrack data) ───────────────────────────── */
.h-prop-trend { margin-top: var(--h-s-6); }
.h-prop-trend__title {
  font-size: var(--h-fs-sm); font-weight: var(--h-fw-semibold);
  color: var(--h-grey-50); text-transform: uppercase;
  letter-spacing: var(--h-tracking-wide); margin: 0 0 var(--h-s-3);
}
.h-prop-trend__svg {
  width: 100%; height: 220px; display: block;
  background: var(--h-paper); border: 1px solid var(--h-border);
  border-radius: var(--h-radius-lg); padding: var(--h-s-2);
}
.h-prop-section--tint .h-prop-trend__svg { background: var(--h-white); }
.h-prop-trend__line {
  fill: none; stroke: var(--h-cyan); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.h-prop-trend__axis {
  display: flex; justify-content: space-between;
  font-size: var(--h-fs-xs); color: var(--h-grey-50); margin-top: var(--h-s-2);
}

/* ── Comparable cards ─────────────────────────────────────────────────────── */
.h-prop-comps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--h-s-5); }
.h-prop-comp {
  background: var(--h-white);
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--h-shadow-sm);
  transition: box-shadow .3s var(--h-ease), transform .3s var(--h-ease);
}
.h-prop-comp:hover { box-shadow: var(--h-shadow-lg); transform: translateY(-3px); }
.h-prop-comp__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--h-blue-10) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.h-prop-comp__placeholder { color: var(--h-blue-20); font-size: var(--h-fs-sm); }
.h-prop-comp__sold {
  position: absolute; top: var(--h-s-3); left: var(--h-s-3);
  background: var(--h-blue); color: var(--h-white);
  font-size: var(--h-fs-xs); font-weight: var(--h-fw-bold);
  letter-spacing: var(--h-tracking-wide); text-transform: uppercase;
  padding: var(--h-s-1) var(--h-s-3); border-radius: var(--h-radius-pill);
}
.h-prop-comp__body { padding: var(--h-s-4); display: flex; flex-direction: column; gap: var(--h-s-2); flex: 1; }
.h-prop-comp__addr { font-weight: var(--h-fw-semibold); color: var(--h-blue); font-size: var(--h-fs-base); }
.h-prop-comp__sub { font-size: var(--h-fs-sm); color: var(--h-grey-50); }
.h-prop-comp__price { font-size: var(--h-fs-2xl); font-weight: var(--h-fw-bold); color: var(--h-blue); margin-top: auto; }
.h-prop-comp__attrs { display: flex; flex-wrap: wrap; gap: var(--h-s-3); font-size: var(--h-fs-sm); color: var(--h-charcoal); }
.h-prop-comp__attrs span { display: inline-flex; align-items: center; gap: 4px; }
.h-prop-comp__foot { display: flex; justify-content: space-between; font-size: var(--h-fs-xs); color: var(--h-grey-50); border-top: 1px solid var(--h-border); padding-top: var(--h-s-2); }
.h-prop-comp__src { font-size: var(--h-fs-xs); color: var(--h-grey-30); padding: 0 var(--h-s-4) var(--h-s-3); }

/* ── Map ──────────────────────────────────────────────────────────────────── */
.h-prop-map {
  height: 460px;
  border-radius: var(--h-radius-lg);
  overflow: hidden;
  border: 1px solid var(--h-border);
  background: var(--h-paper);
}
.h-prop-map__fallback { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--h-grey-50); font-size: var(--h-fs-sm); padding: var(--h-s-6); text-align: center; }

/* ── Price guide band ─────────────────────────────────────────────────────── */
.h-prop-guide { text-align: center; }
.h-prop-guide__range {
  font-size: var(--h-fs-5xl);
  font-weight: var(--h-fw-bold);
  color: var(--h-white);
  letter-spacing: var(--h-tracking-tight);
  margin: var(--h-s-4) 0;
}
.h-prop-guide__note { font-size: var(--h-fs-lg); color: var(--h-paper); max-width: 60ch; margin: 0 auto; line-height: var(--h-lh-base); }

/* ── Marketing plan steps ─────────────────────────────────────────────────── */
.h-prop-plan { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--h-s-5); }
.h-prop-step {
  display: flex; gap: var(--h-s-4);
  padding: var(--h-s-5);
  background: var(--h-white);
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius-lg);
}
.h-prop-step__n {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: var(--h-radius-pill);
  background: var(--h-blue); color: var(--h-white);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--h-fw-bold);
}
.h-prop-step__t { font-weight: var(--h-fw-semibold); color: var(--h-blue); margin: 0 0 var(--h-s-1); }
.h-prop-step__d { font-size: var(--h-fs-sm); color: var(--h-charcoal); margin: 0; line-height: var(--h-lh-base); }

/* ── Agent ────────────────────────────────────────────────────────────────── */
.h-prop-agent { display: flex; gap: var(--h-s-6); align-items: center; }
.h-prop-agent__photo {
  flex: 0 0 auto;
  width: 132px; height: 132px;
  border-radius: var(--h-radius-pill);
  object-fit: cover;
  border: 3px solid var(--h-cyan);
}
.h-prop-agent__name { font-size: var(--h-fs-2xl); font-weight: var(--h-fw-bold); color: var(--h-white); margin: 0; }
.h-prop-agent__role { color: var(--h-cyan); font-weight: var(--h-fw-semibold); margin: var(--h-s-1) 0 var(--h-s-3); }
.h-prop-agent__contact { display: flex; flex-direction: column; gap: var(--h-s-1); font-size: var(--h-fs-base); color: var(--h-paper); }
.h-prop-agent__contact a { color: var(--h-paper); text-decoration: none; }

/* ── CTA ──────────────────────────────────────────────────────────────────── */
.h-prop-cta { text-align: center; }
.h-prop-cta__actions { display: flex; gap: var(--h-s-4); justify-content: center; flex-wrap: wrap; margin-top: var(--h-s-6); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.h-prop-foot { background: var(--h-blue); color: var(--h-paper); text-align: center; padding: var(--h-s-8) var(--h-s-6); font-size: var(--h-fs-sm); }
.h-prop-foot__office { color: var(--h-cyan); font-weight: var(--h-fw-semibold); margin-bottom: var(--h-s-2); }
.h-prop-disclaimer { font-size: var(--h-fs-xs); color: var(--h-grey-50); max-width: var(--h-container-narrow); margin: var(--h-s-6) auto 0; line-height: var(--h-lh-base); }
.h-prop-section--navy .h-prop-disclaimer { color: var(--h-blue-20); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .h-prop-stats { grid-template-columns: repeat(2, 1fr); }
  .h-prop-comps { grid-template-columns: repeat(2, 1fr); }
  .h-prop-plan { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .h-prop-hero__address { font-size: var(--h-fs-4xl); }
  .h-prop-h2 { font-size: var(--h-fs-3xl); }
  .h-prop-comps { grid-template-columns: 1fr; }
  .h-prop-stats { grid-template-columns: 1fr 1fr; }
  .h-prop-agent { flex-direction: column; text-align: center; }
  .h-prop-guide__range { font-size: var(--h-fs-4xl); }
}