/* ==========================================================================
   Free Land Division — Property Owners page
   Loads AFTER site.css. Every colour, font, radius and shadow comes from
   site.css tokens, so this page is unmistakably the same brand.

   What is new here is LAYOUT, not style:
     - a full-bleed dark hero, left aligned, instead of the home page's
       centred light hero
     - an address lookup and a suburb record card
     - the letter
     - an icon grid for "what you get from us"

   Nothing on this page repeats the home page. The money sums, the five
   steps, the worked example and the FAQ all live there and are linked, not
   copied.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero — dark, left aligned, full bleed
   The home page hero is light, centred, and carries the enquiry form inside
   it. This one is the opposite on purpose, so a visitor arriving from a
   letter knows at once they are somewhere else.
   -------------------------------------------------------------------------- */
.ph {
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
  padding: clamp(3.5rem, 9vw, 6.5rem) 0;
}

/* Capped so the lines stay readable on a wide screen without centring them. */
.ph__in { max-width: 44rem; }

.ph__eyebrow {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-on-dark);
  margin: 0 0 1.25rem;
}
.ph__eyebrow::before {
  content: ""; flex: none; width: 2rem; height: 1px; background: var(--accent-on-dark);
}

.ph h1 {
  color: var(--text-on-inverse);
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  line-height: 1.04;
  margin: 0 0 0.5em;
}
.ph h1 em { font-style: normal; color: var(--accent-on-dark); }

.ph__lede {
  font-size: clamp(1.0625rem, 1.8vw, 1.1875rem);
  line-height: 1.6;
  color: var(--text-on-inverse-muted);
  max-width: 34rem;
  margin: 0 0 2rem;
}

/* Buttons on a dark ground. site.css styles .btn for light surfaces only. */
.ph .btn {
  background: var(--accent-on-dark);
  color: var(--text-on-accent-dark);
  border-color: var(--accent-on-dark);
}
.ph .btn:hover {
  background: var(--accent-on-dark-hover);
  color: var(--text-on-accent-dark);
  border-color: var(--accent-on-dark-hover);
}
.ph .btn--secondary {
  background: transparent;
  color: var(--text-on-inverse);
  border-color: rgba(255, 255, 255, 0.28);
}
.ph .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-on-inverse);
  border-color: rgba(255, 255, 255, 0.45);
}

.ph__foot {
  font-size: 0.875rem;
  color: var(--text-on-inverse-muted);
  margin: 1.5rem 0 0;
}

/* --------------------------------------------------------------------------
   2. Address lookup
   -------------------------------------------------------------------------- */
.find { max-width: 34rem; margin: 2rem auto 0; text-align: left; }

.find__label {
  display: block;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 0.5rem;
}

.find__row { display: flex; gap: 0.5rem; }
.find__row .input { flex: 1 1 auto; min-width: 0; }
.find__row .btn { flex: none; }
@media (max-width: 519px) {
  .find__row { flex-direction: column; }
  .find__row .btn { width: 100%; }
}

.find__err {
  font-size: 0.9375rem; color: var(--danger);
  background: var(--danger-subtle);
  border-radius: var(--r-sm);
  padding: 0.75rem 1rem; margin: 1rem 0 0;
}
.find__err:empty { display: none; }

/* The collection notice. Quiet, but present — it has to be readable, so it
   uses the secondary text colour, never the faintest one. */
.find__privacy {
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.find__privacy a { color: inherit; text-decoration: underline; }
.find__privacy a:hover { color: var(--text); }

/* --------------------------------------------------------------------------
   3. Suburb record card
   -------------------------------------------------------------------------- */
.sub {
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: 2rem;
  text-align: left;
}

.sub__top {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.4rem 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--separator);
}
.sub__name { margin: 0; font-size: clamp(1.5rem, 3.5vw, 2rem); }
.sub__lga {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin: 0;
}

.sub__stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  margin: 0; padding: 0;
  border-bottom: 1px solid var(--separator);
}
.sub__stat { text-align: center; padding: 1.5rem 0.5rem; }
.sub__stat:nth-child(2n) { border-left: 1px solid var(--separator); }
.sub__stat:nth-child(n + 3) { border-top: 1px solid var(--separator); }
@media (min-width: 660px) {
  .sub__stats { grid-template-columns: repeat(4, 1fr); }
  .sub__stat:nth-child(n) { border-top: 0; border-left: 1px solid var(--separator); }
  .sub__stat:first-child { border-left: 0; }
}

.sub__figure {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sub__figure--accent { color: var(--accent); }
.sub__figure--down { color: var(--danger); }

.sub__cap {
  display: block;
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-tertiary); margin-top: 0.45rem;
}

.sub__split {
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--text-secondary); margin: 1.5rem 0 0;
}
.sub__split strong { color: var(--text); }
.sub__split-lead { display: block; margin-bottom: 0.3rem; color: var(--accent); }

/* The phone line that used to sit beside the button is gone, so the button
   is on its own and gets centred. It stays full width on a phone. */
.sub__cta {
  display: flex; justify-content: center;
  margin-top: 1.75rem;
}
@media (max-width: 519px) {
  .sub__cta .btn { width: 100%; }
}

.sub__note {
  font-size: 0.8125rem; line-height: 1.55; color: var(--text-tertiary);
  margin: 1.75rem 0 0; padding-top: 1.5rem;
  border-top: 1px solid var(--separator);
}

.sub__thin {
  background: var(--accent-subtle);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-md);
  padding: 1rem 1.25rem; margin: 1.5rem 0 0;
  font-size: 0.9375rem; line-height: 1.55; color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   4. What you get from us
   Three across, two down. No cards and no rules between items — the icon
   tile and the whitespace do the separating, so the block stays quiet next
   to the suburb card above it.
   -------------------------------------------------------------------------- */

/* The one coloured word in a heading on this site. It uses the brand accent,
   so no new colour is introduced. Say the word if you would rather the
   heading stayed one colour, like the home page. */
.h2__key { color: var(--accent); }

.gets {
  display: grid;
  gap: 2.75rem 3rem;
  margin-top: 2.75rem;
}
@media (min-width: 640px)  { .gets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gets { grid-template-columns: repeat(3, 1fr); } }

.get__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  margin-bottom: 1.1rem;
}
.get__icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.get h3 { font-size: 1.1875rem; margin-bottom: 0.45em; }
.get p { color: var(--text-secondary); margin: 0; line-height: 1.7; }

/* On a sunken section the white tile would disappear, so flip it. */
.section--sunken .get__icon { background: var(--bg); }

/* --------------------------------------------------------------------------
   5. The journey — a vertical timeline
   A line down the left with a circled icon on it, and a card beside each.
   The line is drawn on the list, not between items, so it never breaks
   where a card is a different height.
   -------------------------------------------------------------------------- */
.flow {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  position: relative;
  max-width: 54rem;
}

/* The line itself. It stops short at both ends so it does not run past the
   first and last icons. */
.flow::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 1px;
  background: var(--separator-strong);
}

.flow__step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 1.25rem;
}
.flow__step:last-child { margin-bottom: 0; }

.flow__dot {
  position: relative;      /* lifts the circle above the line */
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--accent-border);
  margin-top: 0.4rem;
}
.flow__dot svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The first and last circles get a solid ring, so the eye finds the start
   and the end of the run without reading anything. */
.flow__step:first-child .flow__dot,
.flow__step:last-child .flow__dot { border-color: var(--accent); }

.flow__card {
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.flow__n {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}
.flow__card h3 { font-size: 1.1875rem; margin-bottom: 0.4em; }
.flow__card p { color: var(--text-secondary); margin: 0; line-height: 1.65; }
/* Some steps run to two or three paragraphs. Without this they butt
   together and read as one wall. */
.flow__card p + p { margin-top: 0.8rem; }

/* On a phone the icons shrink and the line moves in with them. */
@media (max-width: 519px) {
  .flow::before { left: 17px; }
  .flow__step { grid-template-columns: 36px 1fr; gap: 0.85rem; }
  .flow__dot { width: 36px; height: 36px; margin-top: 0.3rem; }
  .flow__dot svg { width: 17px; height: 17px; }
}