/* My Property Goals — measured off the live WordPress/Elementor site, 2026-09-10.
   Every value here was taken from the live page, not chosen. */

:root {
  /* Palette, sampled from live */
  --navy:    #071b26;   /* rgb(7,27,38)    — dark bands, button text */
  --yellow:  #fff200;   /* rgb(255,242,0)  — accent, buttons, footer links */
  --grey:    #e4e4e4;   /* rgb(228,228,228)— band 1 ground */
  --ink:     #333333;   /* rgb(51,51,51)   — body copy */
  --black:   #000000;   /* headings on light grounds */
  --white:   #ffffff;

  /* Fluid type, fitted to live's OWN measurements rather than chosen.
     Live's body size is exactly 0.75rem + 0.8vw between 390 and 1920 — that
     formula reproduces 15.12 / 16.48 / 18.14 / 21.60 / 23.52 / 27.36px at
     390 / 560 / 768 / 1200 / 1440 / 1920 with zero error.
     h2 is exactly 2x body at every width; h1 is 3.5x, flooring at 50px below
     roughly 768 where live stops scaling it. */
  /* --scale is the desktop curve and never changes; headings key off it so the
     mobile body override below cannot inflate them. */
  --scale:   clamp(0.945rem, 0.75rem + 0.8vw, 1.71rem);       /* 15.12 → 27.36 */
  --step-0:  var(--scale);                                    /* body */
  --step-1:  calc(var(--scale) * 1.276);                      /* 30px @1440 */
  --step-2:  calc(var(--scale) * 2);                          /* h2    30.24 → 54.72 */
  --step-3:  clamp(2.75rem, calc(var(--scale) * 3.5), 95.76px); /* h1  44 → 95.76, no step */
  --step--1: max(1rem,     calc(var(--scale) * 0.75));        /* UI: 16px floor */
  --step--2: max(0.9375rem, calc(var(--scale) * 0.7));         /* UI: 15px floor */
  --step--3: max(0.75rem,   calc(var(--scale) * 0.5));         /* 12px floor */
  --lede:    max(calc(var(--scale) * 1.15), calc(var(--step-0) * 1.05)); /* hero intro */

  --shell: 1140px;       /* measured .e-con-inner width */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --font: 'Crimson Pro', Georgia, 'Times New Roman', serif;
}

/* The type scale above is fluid in its own right, so the root stays 16px —
   a fluid root on top of fluid steps scales every size twice. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.5;              /* 35.28/23.52 measured */
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 500; line-height: 1; margin: 0 0 0.5em; }
h1 { font-size: var(--step-3); color: var(--white); }
h2 { font-size: var(--step-2); color: var(--black); }
p  { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }
a  { color: inherit; }

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  background: var(--yellow);
  color: var(--navy);
  font-size: 1.25rem;            /* 20px measured */
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1em 1.9em;
  border: 0; border-radius: 2px;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.btn:hover, .btn:focus-visible { background: #ffe600; transform: translateY(-2px); }
.btn--sm { font-size: var(--step--2); padding: 0.85em 1.5em; line-height: 1; }

/* ── Header ──────────────────────────────────────────────────────────── */
/* Measured off live: 147px band, logo 150x92, navy ground (not an overlay on
   the hero photo), nav links yellow, active item underlined. */
.site-header {
  position: relative; z-index: 10;
  block-size: 147px; display: grid; align-items: center;
  background: var(--navy);
  border-block-end: 5px solid var(--yellow);   /* measured on live */
}
.site-header__in { display: flex; align-items: center; gap: 2rem; }
.site-header__logo img { width: 150px; height: 92px; }

.nav { margin-inline-start: auto; }
.nav__list { display: flex; align-items: center; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.nav__list a {
  color: var(--yellow); text-decoration: none;
  font-size: var(--step--1); line-height: 1.2;
  padding-block-end: .25em; border-block-end: 2px solid transparent;
}
/* The active marker is an inset underline rather than a full-width border,
   so it reads as marking the word, not the whole item. */
.nav__list a { position: relative; display: inline-block; border-block-end-color: transparent; }
.nav__list a[aria-current='page']::after,
.nav__list a:hover::after, .nav__list a:focus-visible::after {
  /* Sized to the text itself, not the item box: the link is inline-block so
     the pseudo-element spans exactly the words it underlines. */
  content: ''; position: absolute; inset-inline: 0; inset-block-end: 0;
  block-size: 2px; background: currentColor;
}
.nav__list a[aria-current='page']::after { background: var(--white); }
.nav__list a.btn::after { display: none; }

/* The button in the nav keeps its own navy-on-yellow (measured on live:
   rgb(7,27,38) on rgb(255,242,0)). Without this the nav's white wins and the
   text renders white-on-yellow, which axe correctly flags. */
/* The nav gives links a bottom padding for the active underline; a button
   must keep its own symmetric padding instead. */
.nav__list a.btn, .nav__list a.btn:hover, .nav__list a.btn:focus-visible {
  color: var(--navy); padding: .85em 1.5em; border-block-end: 0;
}

.nav__item--has-children { position: relative; }
.nav__toggle {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--yellow);
  font: inherit; font-size: var(--step--1); display: inline-flex; align-items: center; gap: .35em;
}
/* No top margin: an 8px gap between the trigger and the panel meant the menu
   closed as the pointer crossed it. The panel now butts against the item and
   carries a yellow edge to bound it. */
.nav__sub {
  position: absolute; inset-block-start: 100%; inset-inline-start: 0;
  min-width: 15rem; background: var(--navy); padding: .5rem 0; margin: 0;
  border: 1px solid rgba(255,255,255,.55); border-radius: 2px;
  list-style: none; display: none;
}
.nav__item--has-children:hover .nav__sub,
.nav__item--has-children:focus-within .nav__sub { display: block; }
.nav__sub a { display: block; padding: .5rem 1.25rem; }

/* Only one of the two icons shows at a time. */
.nav-toggle { display: none; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__close { display: block; }

/* ── Bands ───────────────────────────────────────────────────────────── */
.band { position: relative; }
.band__in { position: relative; z-index: 1; }

/* Band 0 — hero, 1000px, photo with a dark overlay */
/* Live's hero fills the viewport (measured 1000px in a 1000px window). Minus
   the 147px header so the two together are one screen. */
.hero { min-height: calc(100svh - 147px); display: grid; align-items: center;
        background: var(--navy) center/cover no-repeat; }
/* Live: .elementor-background-overlay, black at 0.5 opacity. */
.hero::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.5); z-index: 1; }
.hero__copy { max-width: 760px; padding: 30px 0; }
/* Inner heroes use the full shell width, as live does (h1 1120px, one line). */
.hero--inner .hero__copy { max-width: none; }
.hero--inner.band--centre .hero__copy p { max-width: 62ch; margin-inline: auto; }
.hero p { color: var(--white); font-size: var(--lede); max-width: 46ch; }
.hero--inner p { max-width: none; }

/* Band 1 — grey, 1000px */
.band--grey { background: var(--grey); min-height: 1000px; display: grid; align-items: center; }
.band--grey h2 { color: var(--ink); max-width: 26ch; }
/* Measured: the three points sit in a navy card (432x366, 25px radius,
   60/40 padding) to the RIGHT of the copy, not stacked beneath it. */
.band--grey .band__in { display: grid; gap: 3rem; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 432px); }
.band--grey__copy p:last-child { margin-block-end: 0; }
.band--grey .points {
  background: var(--navy); color: var(--white);
  border-radius: 25px; padding: 60px 40px; margin: 0;
}
.band--grey .points .ico { color: var(--white); }

.points { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.points li { display: flex; gap: .85rem; align-items: flex-start; }
.points .ico { flex: none; margin-block-start: .18em; color: var(--navy); }

/* Band 2 — navy strip, 350px */
.band--navy { background: var(--navy); min-height: 350px; display: grid; align-items: center;
              color: var(--white); }
.band--navy p { color: var(--white); margin: 0; text-align: center;
  font-size: calc(var(--step-0) * 1.4); }   /* 32.93px @1440, matches live */

/* Band 3 — testimonials. Live runs a Swiper carousel showing ONE quote at a
   time (slide 1064x361 at 1440), with prev/next arrows. Reproduced as a
   scroll-snap track: no library, keyboard operable, and without JS it stays a
   readable horizontally-scrollable list rather than collapsing. */
.band--quotes { min-height: 421px; display: grid; align-items: center;
  padding-block-start: 5rem; }
.quotes {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.quotes::-webkit-scrollbar { display: none; }
.quote { scroll-snap-align: center; margin: 0; text-align: center;
  padding-inline: clamp(0rem, 4vw, 3.5rem); }
.quote__text p { font-style: italic; }   /* measured on live */
.quote__text { margin: 0 0 1rem; }
.quote__text p { margin: 0; }
.quote__name { font-size: var(--step-1); font-weight: 700; display: block; line-height: 1.5; }
.quote__place { font-size: 1.625rem; display: block; line-height: 1.5; }

/* Dot markers rather than arrows, and the track auto-advances. */
.quotes-nav { display: flex; justify-content: center; gap: .6rem; margin-block-start: 1.75rem; }
.quotes-nav button {
  inline-size: .55rem; block-size: .55rem; padding: 0; border-radius: 50%;
  border: 0; background: rgba(51,51,51,.28); cursor: pointer;
  transition: background-color .25s ease, transform .25s ease;
}
.quotes-nav button[aria-current='true'] { background: var(--navy); transform: scale(1.25); }
.quotes-nav button:hover, .quotes-nav button:focus-visible { background: var(--navy); }

/* Band 4 — photo band, 1250px with 250px bottom padding (measured) */
.band--photo {
  min-height: 1250px; padding-block-end: 250px;
  background: var(--navy) center/cover no-repeat;
  display: grid; align-items: center;
}
.band--photo::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.92) 42%, rgba(255,255,255,0) 78%); }
.band--photo h2 { color: var(--black); text-align: center; }
.band--photo h2::after {
  content: ''; display: block; inline-size: 3.5rem; block-size: 2px;
  background: currentColor; margin: 1rem auto 0;
}
.band--photo li, .band--photo p { color: var(--ink); }
.band--photo .points .ico { color: var(--navy); }
.band--photo .card { max-width: 700px; margin-inline: auto; }
.band--photo .card > p:last-child { text-align: center; margin-block-start: 2.5rem; }
.band--photo .card .btn { font-size: var(--step-0); padding: 1em 2.2em; }

/* ── Footer ──────────────────────────────────────────────────────────── */
/* Measured off live: 150px top / 100px bottom at 1440, 195/19.5 at 390,
   a 5px yellow bottom border, and a 30px angled yellow shape across the top. */
.site-footer {
  position: relative;
  background: var(--navy); color: var(--white);
  padding-block: 150px 100px;
}
.site-footer__shape {
  position: absolute; inset-block-start: 0; inset-inline: 0;
  block-size: 18px; line-height: 0; overflow: hidden; pointer-events: none;
}
.site-footer__shape svg { display: block; inline-size: 100%; block-size: 18px; }
.site-footer a { color: var(--yellow); }
/* Same trap as the header: a blanket link colour turns the button's own text
   yellow-on-yellow and it renders blank. Buttons keep their measured navy. */
.site-footer a.btn {
  color: var(--navy); font-size: var(--step--2);
  padding: 1em 2.1em; margin-block-start: 2.75rem;
}
/* Live's footer is a single centred column at every width — no nav list. */
.site-footer__grid {
  display: grid; gap: 1.75rem; justify-items: center; text-align: center;
  max-width: 46rem; margin-inline: auto;
}
.site-footer__grid img { margin-inline: auto; }
.site-footer__meta span { justify-content: center; }
.site-footer__blurb {
  max-width: 52ch; font-size: var(--step--1); line-height: 1.6;
  margin: 1.5rem 0 0;
}
.site-footer h3 { font-size: var(--step-0); color: var(--white); margin-block-end: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
/* Phone, address and hours sit on one line, as live does. */
.site-footer__meta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .75rem 2.25rem; font-size: var(--step--1);
}
.site-footer__meta span { display: inline-flex; gap: .55rem; align-items: center; }
.socials { display: flex; gap: 1.25rem; justify-content: center; margin-block-start: 1.75rem; }
.socials a { display: inline-flex; color: var(--white); transition: color .2s ease; }
.socials a:hover, .socials a:focus-visible { color: var(--yellow); }
.colophon {
  margin-block-start: 3rem; padding-block-start: 1.5rem;
  border-block-start: 1px solid rgba(255,255,255,.15);
  font-size: var(--step--3); font-weight: 200; text-transform: capitalize;
  text-align: center;
}
.colophon p { margin: 0; }

/* ── Reveals: one-way, short travel, respects reduced motion ─────────── */
[data-reveal] { opacity: 0; transform: translateY(18px); }
[data-reveal].is-in { opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s ease; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].is-in { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}

/* ── Skip link ───────────────────────────────────────────────────────── */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: var(--white); padding: .75rem 1.25rem; }
.skip-link:focus { left: 0; }

/* ── Responsive ──────────────────────────────────────────────────────── */

/* At and below 1024 live stops following the desktop trend and makes body copy
   LARGER for reading on small screens: 26.25px @1024, 23.07px @560, 21.17px
   @390, against a desktop trend that would give 20.19 / 16.48 / 15.12.
   Measured, not invented — its own curve has small breakpoint steps in it, so
   this single fluid rule is within ~0.6px of live across the range. */
@media (max-width: 1024px) {
  :root { --step-0: clamp(1.323rem, 1.1276rem + 0.8015vw, 1.6406rem); }
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex; margin-inline-start: auto; background: none; border: 0;
    color: var(--yellow); cursor: pointer; padding: .5rem;
    position: relative; z-index: 30;      /* must stay above the open panel */
  }
  /* The panel is fixed over the page, so it sits BELOW the header — otherwise
     the toggle is unclickable and the menu cannot be closed. Starting it below
     the header bar also keeps the logo in place while the menu is open. */
  .nav { position: fixed; inset: 142px 0 0; z-index: 20; background: var(--navy);
         display: none; padding: 1.5rem var(--gutter) 2rem; overflow-y: auto; margin: 0; }
  .site-header { position: relative; z-index: 30; }
  .site-header__logo { position: relative; z-index: 31; }
  .nav[data-open='true'] { display: block; }
  .nav__list { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .nav__list > li { inline-size: 100%; }
  .nav__list a, .nav__toggle { font-size: 1.375rem; padding-block: .6em; }
  .nav__list a { display: block; }
  .nav__sub { position: static; display: block; background: none; padding: 0 0 .5rem 1.25rem; }
  .nav__sub a { font-size: 1.125rem; padding-block: .7em; min-block-size: 44px; }
  .nav__list a.btn { display: inline-block; margin-block-start: 1rem; font-size: 1.125rem; }
  .site-footer { padding-block: 195px 20px; }
  /* Live at 390: hero stays 1000px; band 1 is 60/30 padded; band 4 is 50/20. */
  .band--grey { min-height: auto; padding: 60px 30px; }
  .band--grey .band__in { grid-template-columns: 1fr; }
  .band--photo { min-height: auto; padding: 50px 20px; }
  .band--navy { padding-block: 3rem; }
}

/* ── Inner pages ─────────────────────────────────────────────────────── */
/* Each page's hero height is measured off live and set per page via --hero-h;
   a blanket 600px was wrong on five of eight pages (live ranges 102 → 907). */
.hero--inner { min-height: var(--hero-h, 600px); }
.hero--inner .hero__copy { padding-block: 2.5rem; }
.hero--inner { align-items: center; }
/* A title-only hero (live's /about is 102px) should not carry hero padding. */
.hero--inner[style*="--hero-h:102px"] .hero__copy { padding-block: 0; }
.hero--inner[style*="--hero-h:102px"] { align-items: end; padding-block: 0; }
.hero--inner[style*="--hero-h:102px"].band--clear { padding-block: 0; }
.hero--inner[style*="--hero-h:102px"] h1 { margin-block-end: 0; }
.hero--plain { background: var(--grey); min-height: auto; padding-block: 6rem 3rem; }
.hero--plain::before { display: none; }
.hero--plain h1 { color: var(--black); }
.hero--plain p { color: var(--ink); }

.band--plain { padding-block: 5rem; }
.prose { max-width: 68ch; }
.prose h2 { margin-block: 2rem .75rem; }
.prose h2:first-child { margin-block-start: 0; }
.prose h3 { font-size: calc(var(--step-0) * 1.25); margin-block: 1.75rem .5rem; }
.prose p { margin-block-end: 1em; }

/* about / property-investors: image beside copy */
.split { display: grid; gap: 3rem; align-items: center;
         grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
.split--tight { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }
/* Live: 520x390 image, 5px radius, in a band with no padding of its own. */
.hero--inner .split--tight img { inline-size: 520px; max-inline-size: 100%;
  block-size: 390px; object-fit: cover; border-radius: 5px; }
.hero--inner.band--clear:has(.split--tight) { padding-block: 0; }
.hero--inner .split--tight { align-items: center; }
.hero--inner .split--tight .hero__copy { padding-block: 0; }
.split img { inline-size: 100%; height: auto; }

/* the points list as a navy card, reused from the homepage */
.points--card { background: var(--navy); color: var(--white);
  border-radius: 25px; padding: 60px 40px; margin: 0; max-width: 46rem; }
.points--card .ico { color: var(--white); }

/* CTA band. The ground comes from the spec class (band--clear /
   band--navyfull), never from here — this used to force grey. */
.band--cta { padding-block: 3.5rem; text-align: center; }
.band--cta p + p { margin-block-start: 41px; }
/* Live measures 41px between the CTA copy and its button. */
.cta__lead + p { margin-block-start: 41px; }
.band--cta p { margin: 0; }
.band--cta p + p { margin-block-start: 41px; }
/* Live sets the CTA lead at 35.28px = 1.5x body. Keyed to the paragraph
   itself, not to a section class — the section class was stripped by a later
   pass and this rule silently stopped matching. */
.cta__lead { font-size: calc(var(--step-0) * 1.5); line-height: 1.3; }
.band--cta p:first-child { font-size: calc(var(--step-0) * 1.5); line-height: 1.3; }

/* process: numbered steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 3rem;
         counter-reset: step; }
.steps > li { display: grid; gap: .5rem 1.5rem;
              grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.steps__n {
  grid-row: 1 / span 2; inline-size: 3rem; block-size: 3rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--yellow); color: var(--navy);
  font-weight: 800; font-size: var(--step-0);
}
.steps h2 { font-size: calc(var(--step-0) * 1.5); margin: 0; align-self: center; }
.steps ul { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: .4rem; }

/* engagement: three tiers */
.tiers { display: grid; gap: 2.5rem; }
.tier { border: 1px solid rgba(51,51,51,.18); border-radius: 25px; padding: 2.5rem; }
.tier h2 { margin-block-start: 0; }
.tier__sub { font-size: calc(var(--step-0) * 1.1); margin-block-end: 1.5rem; }
.tier .points { margin: 0; }

/* contact form */
.contact { display: grid; gap: 3rem;
           grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); align-items: start; }
.form__row { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: .4rem; margin: 0 0 1.25rem; }
.field label { font-size: var(--step--1); font-weight: 700; }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--step--1); color: var(--ink);
  padding: .7em .8em; border: 1px solid rgba(51,51,51,.35); border-radius: 2px;
  background: var(--white); inline-size: 100%;
}
/* The native select arrow sits hard against the edge; draw our own and inset
   it so it lines up with the field's own padding. */
.field select {
  appearance: none; -webkit-appearance: none;
  padding-inline-end: 2.75em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%23333'%3E%3Cpath d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 12px 8px;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy);
}
.field textarea { resize: vertical; }
.form__actions { margin-block-start: 1.5rem; }
.form__status { margin-block: 0 1.25rem; font-size: var(--step--1); }
.form__status[data-state='error'] { color: #b00020; }
.contact__aside { display: grid; gap: .75rem; justify-items: start; }
.contact__aside p { margin: 0; }
.cf-turnstile { margin-block: 1.25rem; }

.band--legal .prose h2 { font-size: calc(var(--step-0) * 1.45); }

@media (max-width: 900px) {
  .split, .split--tight, .contact { grid-template-columns: 1fr; }
  .split--tight img { order: -1; }
  .form__row { grid-template-columns: 1fr; }
  .hero--inner { min-height: auto; padding-block: 3rem; }
  .points--card { padding: 40px 26px; }
  .tier { padding: 1.75rem; }
  .steps > li { grid-template-columns: 1fr; }
  .steps__n { grid-row: auto; }
}

/* ── home-buyers: full-width feature band ────────────────────────────── */
/* Live band 2 is a full-bleed navy band, centred, with 240px icon boxes
   laid out 8 across at 1440 — not a checklist card. */
.band--features {
  background: var(--navy); color: var(--white);
  padding-block: 4.5rem; text-align: center;
}
.band--features h2 { color: var(--white); text-align: center; margin-block-end: 3rem; }
.features {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2.5rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
.features li { display: grid; gap: .9rem; justify-items: center; }
.feature__ico { color: var(--yellow); line-height: 0; }
.feature__label { font-size: var(--step--1); line-height: 1.35; max-width: 16ch; }


/* ── Band backgrounds and alignment, driven by the live spec ─────────────
   Measured per band on every page (capture/livespec.json). Live uses only
   three grounds — transparent, navy rgb(7,27,38) and a light rgb(225,225,225)
   — and centres most bands. Getting these wrong was 29 mismatches. */
.band--clear    { background: transparent; padding-block: 5rem; }
.band--navyfull { background: var(--navy); color: var(--white); padding-block: 5rem; }
.band--grey225  { background: rgb(225, 225, 225); padding-block: 5rem; }

.band--navyfull h1, .band--navyfull h2, .band--navyfull h3,
.band--navyfull p, .band--navyfull li, .band--navyfull strong { color: var(--white); }
.band--navyfull .points .ico, .band--navyfull .steps ul { color: var(--white); }
.band--navyfull .tier { border-color: rgba(255,255,255,.25); }
.band--navyfull .points--card { background: transparent; padding: 0; }

.band--centre { text-align: center; }
.band--centre .prose, .band--centre .points, .band--centre .hero__copy {
  margin-inline: auto;
}
.band--centre .points li { justify-content: center; }
.band--centre .steps > li { text-align: start; }
.band--centre .split { text-align: start; }

/* Inner heroes have no ground of their own on live — the page background
   shows through, and the copy is centred. */
.hero--inner.band--clear { background-color: transparent; }
.hero--inner.band--clear h1 { color: var(--black); }
.hero--inner.band--clear p  { color: var(--ink); }
.hero--inner.band--clear::before { display: none; }
/* ...unless the band carries a photo, where the overlay and white type stay. */
.hero--inner:has(.hero__bg) { color: var(--white); }
.hero--inner:has(.hero__bg) h1 { color: var(--white); }
.hero--inner:has(.hero__bg) p  { color: var(--white); }
.hero--inner:has(.hero__bg)::before { display: block; }

/* Every content image carries live's 5px radius. */
.split img, .contact__aside img, .prose img { border-radius: 5px; }

/* Two-column prose at wider widths, where live flows text across columns. */
.prose--cols { max-width: none; }
.prose--cols > p:first-child { margin-block-end: 1.5rem; }
@media (min-width: 900px) {
  .prose--cols__flow { columns: 2; column-gap: 3.5rem; }
  .prose--cols__flow p { margin-block-start: 0; break-inside: avoid; }
}

/* ── Hero bottom shape ───────────────────────────────────────────────────
   Live closes each photo hero with a 50px angled navy shape — the same
   motif as the footer's, mirrored. */
.hero__shape {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  block-size: 50px; line-height: 0; z-index: 2; pointer-events: none;
}
.hero__shape svg { display: block; inline-size: 100%; block-size: 50px; }

/* home-buyers feature grid: live lays it out 8 across at 1440; cap at four
   per row so it reads as 4x2 rather than a single thin line. */
.features { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
            max-inline-size: 60rem; margin-inline: auto; }
@media (min-width: 900px) { .features { grid-template-columns: repeat(4, 1fr); } }
.feature__ico svg { inline-size: 54px; block-size: 54px; }
.feature__label { font-size: var(--step-0); max-width: 14ch; }

/* ── Parallax, in CSS ────────────────────────────────────────────────────
   background-attachment: fixed gives the same effect with no scroll handler.
   It is ignored on most touch browsers (which is the behaviour we want) and
   turned off explicitly for reduced motion. */
/* ── Hero parallax ───────────────────────────────────────────────────────
   The photo sits on its own layer, taller than the hero, and rises more
   slowly than the page. A background-position animation was too subtle to
   read (16% of travel), and background-attachment:fixed sizes the image to
   the viewport rather than the band. */
.hero:has(.hero__bg) { overflow: hidden; }
.hero:has(.hero__bg)::before { content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,.5); z-index: 1; }
.hero:has(.hero__bg) .band__in { position: relative; z-index: 2; }
.hero__bg {
  position: absolute; inset-block-start: -12%; inset-inline: 0;
  block-size: 124%;
  background-position: center center; background-size: cover;
  background-repeat: no-repeat; z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero__bg {
      animation: hero-rise linear both;
      /* view() barely advances for a hero already at the top of the page,
         which is exactly where these sit. Drive it from the document's own
         scroll instead so the photo moves from the first pixel. */
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }
    @keyframes hero-rise {
      from { transform: translate3d(0, 0, 0); }
      to   { transform: translate3d(0, -14%, 0); }
    }
  }
}

/* Two-column prose inside a navy band keeps its white type. */
.band--navyfull .prose--cols__flow p { color: var(--white); }
/* The hero's closing shape reads as the NEXT band's top edge, so it must point
   the same way as that band's own divider. */
.hero__shape svg { transform: scaleY(-1); }

/* ── why-mpg ─────────────────────────────────────────────────────────────
   Measured: band 0 is transparent with NO card, h1 centred 10px from the top,
   list items 650px wide and left-aligned within a centred column. Band 1 is a
   photo with a white-to-transparent gradient over it (top opaque). */
/* Live puts the h1 10px from the band top and gives the band no padding. */
.hero--inner[style*="--hero-h:907px"] { align-items: start; padding-block: 0; }
.hero--inner[style*="--hero-h:907px"] .hero__copy { padding-block: 64px 0; }
.hero--inner[style*="--hero-h:907px"] .band__in { padding-block: 0; }
.hero--inner[style*="--hero-h:907px"] h1 { margin-block-start: 0; }
.reasons {
  /* 48px below the lede puts the first item at live's 206px from the band top. */
  list-style: none; margin: 48px auto 0; padding: 0;
  inline-size: min(100%, 650px); display: grid; gap: 1rem; text-align: start;
}
.reasons li { display: flex; gap: .85rem; align-items: flex-start; }
.reasons .ico { flex: none; margin-block-start: .2em; color: var(--navy); }

.band--photoband {
  position: relative; min-block-size: 684px; padding: 0;
  background-position: center top; background-size: cover; background-repeat: no-repeat;
}
.band--photoband::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgb(255,255,255) 100%);
}

/* why-mpg text, measured off live at 1440:
   h1 82.32 at top 10 · lede 35.28 w500 at 112 · list starts 206
   · trust line 35.28 italic at 749 · button at 861 */
.why__lede {
  font-size: calc(var(--step-0) * 1.5); font-weight: 500; line-height: 1.3;
  margin-block: 1.25rem 0;
}
.why__trust {
  font-size: calc(var(--step-0) * 1.5); font-style: italic; line-height: 1.3;
  margin-block: 1.75rem 0;
}
.hero--inner[style*="--hero-h:907px"] h1 { margin-block-end: 0; }
.hero--inner[style*="--hero-h:907px"] .why__trust + p { margin-block-start: 1.75rem; }

/* Subtle zoom on the photo band, as live does, alongside the parallax. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .band--photoband {
      animation: band-zoom linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes band-zoom {
      from { background-size: 108% auto; background-position: center 44%; }
      to   { background-size: 118% auto; background-position: center 56%; }
    }
  }
}

/* vendor-advocacy: the intro heading needs air before the two-column body. */
.prose--cols h2 { margin-block-end: 2.25rem; }

/* ── process: 2x2 step grid (live columns measure 570px) ────────────────── */
.steps-grid {
  display: grid; gap: 3rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  text-align: start; margin-block-end: 3.5rem;
}
@media (min-width: 900px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
.step__ico { color: var(--yellow); line-height: 0; display: block; margin-block-end: 1rem; }
.step h2 { font-size: calc(var(--step-0) * 1.5); margin-block: 0 1rem; }
.step ul { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: .5rem; }

/* ── engagement: 373 / 747 two-column split, measured off live ──────────── */
.tier-split { display: grid; gap: 2rem 3rem; align-items: start; text-align: start; }
@media (min-width: 900px) { .tier-split { grid-template-columns: 373px minmax(0, 747px); } }
.tier-split h2 { margin-block: 0 .5rem; }
.tier-split .points { margin: 0; }
.tier-split .tier__sub { margin: 0; }

/* engagement list icons, measured off live: fa-dot-circle at 25px, yellow on
   the navy bands and rgb(51,51,51) on the light ones. */
.tier-split .points .ico { color: var(--ink); }
.band--navyfull .tier-split .points .ico { color: var(--yellow); }
.tier-split .points li { align-items: flex-start; gap: 1rem; }
.tier-split .points .ico svg { display: block; }

/* A CTA that belongs to the band above it — two stacked sections meant two
   lots of section padding, which is what left a ~136px gap on home-buyers. */
.cta-inline { margin-block-start: 41px; text-align: center; }
.cta-inline p { margin: 0; }

/* ── contact ─────────────────────────────────────────────────────────────
   Live splits this band diagonally: linear-gradient(120deg, white 50%,
   navy 50%) — a hard edge, not a blend. The aside sits on the navy half. */
.band--contact { background: linear-gradient(120deg, #fff 50%, var(--navy) 50%); }
.band--contact .contact { align-items: center; }
/* Left-aligned beside the form; centred once the columns fold. */
.band--contact .contact__aside { color: var(--white); justify-items: start; text-align: start; }
.band--contact .contact__aside a { color: var(--white); }
.contact__line { display: flex; align-items: center; gap: .75rem; justify-content: flex-start; }
@media (max-width: 900px) {
  .band--contact .contact__aside { justify-items: center; text-align: center; }
  .contact__line { justify-content: center; }
}
.contact__line .ico { color: var(--white); line-height: 0; flex: none; }
@media (max-width: 900px) {
  .band--contact { background: linear-gradient(180deg, #fff 55%, var(--navy) 55%); }
}

/* The status sits above the fields so a validation error is read before the
   form, not after it. On success the fields hide but the form keeps its
   height, so the grid does not collapse and the contact details stay on the
   navy half. */
/* :empty does not match an element holding whitespace, so the JS marks it. */
.form__status:not([data-shown]) { display: none; }
.form.is-sent { display: grid; place-content: center; text-align: center; }
.form.is-sent .form__status {
  font-size: calc(var(--step-0) * 1.15); line-height: 1.4; max-width: 28ch;
  margin-inline: auto;
}
.form.is-sent .form__status::before {
  content: ''; display: block; inline-size: 3rem; block-size: 3rem;
  margin: 0 auto 1rem; border-radius: 50%;
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23071b26'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/1.75rem no-repeat;
}