/* =====================================================================
   THEME v2 — shared upgrade layer
   ---------------------------------------------------------------------
   Loaded AFTER site.css. Every colour here comes from tokens.css, so this
   one file re-skins itself per site: warm retail on Consignment, cool
   industrial on Warehousing, navy/brass and sage/terracotta on the two
   real estate sites.

   Additive by design — no existing class is redefined out from under
   site.css, so nothing in the FSWD renderer breaks.

   Also carries the components the brief asks for that site.css has no
   vocabulary for:
     .inv-*    inventory card + sold badge      (raw.pdf p4, p6)
     .flow     Next Move Program service flow   (Realtor PDF 5)
     .aud-*    audience cards                   (raw.pdf p15, Realtor PDF 5)
     .tstrip   trust strip
   ===================================================================== */

/* ---------- fluid type: no breakpoint jumps ------------------------- */
:root {
  --fs-xs:   clamp(.75rem,  .72rem + .15vw, .8125rem);
  --fs-sm:   clamp(.875rem, .85rem  + .15vw, .9375rem);
  --fs-base: clamp(1rem,    .97rem  + .18vw, 1.0625rem);
  --fs-lg:   clamp(1.125rem,1.07rem + .3vw,  1.25rem);
  --fs-xl:   clamp(1.25rem, 1.15rem + .5vw,  1.5rem);
  --fs-2xl:  clamp(1.5rem,  1.32rem + .9vw,  2rem);
  --fs-3xl:  clamp(1.875rem,1.55rem + 1.6vw, 2.75rem);
  --fs-4xl:  clamp(2.25rem, 1.7rem  + 2.7vw, 3.75rem);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: .16s;
  --dur: .28s;

  --shadow-lg: 0 12px 32px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.04);
  --shadow-xl: 0 24px 56px rgba(0,0,0,.13), 0 8px 16px rgba(0,0,0,.05);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

h1, h2, h3, h4 { text-wrap: balance; letter-spacing: -.022em; }
h1 { letter-spacing: -.032em; }
h2 { letter-spacing: -.026em; }
p  { text-wrap: pretty; }
p, li { max-width: 72ch; }

::selection { background: var(--green-050); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--green-text);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------- eyebrow ------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-size: var(--fs-xs); font-weight: 650;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-text);
  margin-bottom: var(--s2);
}
.eyebrow::before {
  content: ""; width: 1.75rem; height: 2px; border-radius: 2px;
  background: var(--ribbon);
}
.eyebrow--on-dark { color: var(--on-dark-2); }

.lede { font-size: var(--fs-lg); line-height: 1.6; color: var(--ink-2); }

/* ---------- buttons: lift + shadow ---------------------------------- */
.btn, .button, a.btn {
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn:active { transform: translateY(0); }

/* ---------- cards --------------------------------------------------- */
.card {
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }

/* ---------- trust strip --------------------------------------------- */
.tstrip {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s2) var(--s5);
  padding: var(--s3) 0;
  border-block: 1px solid var(--line);
}
.tstrip__item {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
}
.tstrip__item svg, .tstrip__item i { color: var(--green-text); flex: none; }

/* =====================================================================
   INVENTORY CARD — Consignment
   raw.pdf p4/p6: photo, name, price, dimensions, condition, brand,
   available/sold, category, item number. Sold badge required.
   ===================================================================== */
.inv-grid {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.inv-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.inv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.inv-card__media {
  position: relative; aspect-ratio: 4 / 3;
  background: var(--surface-3); overflow: hidden;
}
.inv-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease-out);
}
.inv-card:hover .inv-card__media img { transform: scale(1.04); }
.inv-card__body { padding: var(--s2) var(--s2) var(--s3); display: grid; gap: 6px; }
.inv-card__name { font-size: var(--fs-base); font-weight: 650; color: var(--ink); margin: 0; }
.inv-card__meta { font-size: var(--fs-xs); color: var(--ink-3); }
.inv-card__price {
  font-family: var(--font-head);
  font-size: var(--fs-lg); font-weight: 700; color: var(--green-text);
}

/* status badges — sold must be unmistakable */
.inv-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: .3em .7em;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px;
  background: var(--surface); color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
.inv-badge--new  { background: var(--green-text); color: #fff; }
.inv-badge--sold { background: var(--ink); color: #fff; }
.inv-card--sold .inv-card__media img { filter: grayscale(1) opacity(.55); }
.inv-card--sold .inv-card__price { color: var(--ink-3); text-decoration: line-through; }

/* =====================================================================
   SERVICE FLOW — "The Next Move Program"
   Realtor PDF 5: Real Estate -> Moving -> Storage -> Consignment/Delivery
   Also used by raw.pdf p20's designer workflow.
   ===================================================================== */
.flow {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: var(--s2);
  list-style: none; margin: 0; padding: 0;
  counter-reset: flow;
}
.flow__step {
  counter-increment: flow;
  flex: 1 1 12rem; min-width: 11rem;
  position: relative;
  padding: var(--s3) var(--s2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.flow__step::before {
  content: counter(flow);
  display: grid; place-items: center;
  width: 2.1rem; aspect-ratio: 1; margin: 0 auto var(--s1);
  border-radius: 999px;
  background: var(--green-050); color: var(--green-text);
  font-weight: 700; font-size: var(--fs-sm);
}
/* connector chevron — hidden when the row wraps and on mobile */
.flow__step:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: calc(var(--s2) * -1);
  width: var(--s2); height: 2px; background: var(--line);
}
@media (max-width: 720px) { .flow__step:not(:last-child)::after { display: none; } }
.flow__title { font-size: var(--fs-base); font-weight: 650; color: var(--ink); }
.flow__note  { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 4px; }

/* =====================================================================
   AUDIENCE CARDS — "Who We Help" / "Choose Your Situation"
   raw.pdf p15 (designers, builders, Realtors, businesses, homeowners)
   Realtor PDF 5 (four situation cards)
   ===================================================================== */
.aud-grid {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.aud-card {
  display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.aud-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--green);
}
.aud-card__icon {
  display: grid; place-items: center;
  width: 2.75rem; aspect-ratio: 1; margin-bottom: var(--s1);
  border-radius: var(--radius-sm);
  background: var(--green-050); color: var(--green-text);
  font-size: 1.25rem;
}
.aud-card__title { font-size: var(--fs-lg); font-weight: 650; color: var(--ink); margin: 0; }
.aud-card__body  { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }
.aud-card__cta {
  margin-top: auto; padding-top: var(--s2);
  font-size: var(--fs-sm); font-weight: 650; color: var(--green-text);
}
.aud-card__cta::after { content: " \2192"; transition: transform var(--dur) var(--ease-out); display: inline-block; }
.aud-card:hover .aud-card__cta::after { transform: translateX(3px); }

/* =====================================================================
   MEDIA
   ===================================================================== */
.media-frame {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md); background: var(--surface-3);
}
.media-frame img, .media-frame video { display: block; width: 100%; height: auto; }
figure { margin: 0; }
figcaption { font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--s1); }

/* =====================================================================
   DARK / MESH BANDS
   ===================================================================== */
.band-dark { background: var(--dark); color: var(--on-dark); }
.band-dark h1, .band-dark h2, .band-dark h3 { color: var(--on-dark); }
.band-dark p { color: var(--on-dark-2); }

.band-mesh { position: relative; isolation: isolate; background: var(--dark); color: var(--on-dark); }
.band-mesh::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background:
    radial-gradient(60rem 30rem at 8% 0%,   var(--green-050), transparent 60%),
    radial-gradient(50rem 26rem at 92% 100%, var(--amber-050), transparent 60%);
}
.band-mesh h2 { color: var(--on-dark); }
.band-mesh p  { color: var(--on-dark-2); }

/* =====================================================================
   ACCESSIBILITY
   ===================================================================== */
.skip-link {
  position: absolute; left: var(--s2); top: -100%; z-index: 999;
  padding: var(--s2) var(--s3);
  background: var(--ink); color: #fff;
  border-radius: var(--radius-sm); font-weight: 650;
  transition: top var(--dur-fast);
}
.skip-link:focus { top: var(--s2); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =====================================================================
   PRINT
   ===================================================================== */
@media print {
  .btn, .btn-row, .tstrip, .skip-link { display: none !important; }
  body { color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* =====================================================================
   BRAND LOCKUP
   brand.logo_mark is TODO_ on every new site until real marks exist.
   A deliberate monogram reads as a design decision; a broken <img> does not.
   Swap automatically once brand.logo_mark is filled in — no CSS change needed.
   ===================================================================== */
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }

.brand__monogram {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border-radius: 10px;
  background: var(--green);
  color: #fff;
  font-family: var(--font-head);
  font-size: .95rem; font-weight: 700; letter-spacing: .02em;
  box-shadow: var(--shadow-sm);
}

.brand__name {
  font-family: var(--font-head);
  font-weight: 650;
  font-size: 1.02rem;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ink);
  max-width: 15ch;
}
.brand[style*="#fff"] .brand__name { color: #fff; }

@media (max-width: 900px) { .brand__name { max-width: 11ch; font-size: .95rem; } }

/* =====================================================================
   EQUAL HOUSING OPPORTUNITY / REALTOR COMPLIANCE BLOCK
   Real estate sites only. Must be legible, not buried — this is a
   regulatory notice, so it does not get 10px grey treatment.
   The EHO mark is a regulated logo: never recolour, distort or crop it.
   ===================================================================== */
.compliance {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) 0;
  margin-top: var(--s3);
  border-top: 1px solid rgba(255,255,255,.12);
}
.compliance__eho {
  flex: none; width: 46px; height: auto;
  color: var(--on-dark);
  opacity: .92;
}
.compliance__text p {
  font-size: .78rem;
  line-height: 1.6;
  color: var(--on-dark-2);
  margin: 0 0 .5em;
  max-width: 92ch;
}
.compliance__text p:last-child { margin-bottom: 0; }
.compliance__text strong { color: var(--on-dark); font-weight: 650; }

@media (max-width: 640px) {
  .compliance { flex-direction: column; gap: var(--s2); }
}

/* checkbox rows in the Plan My Move form */
fieldset.field { border: 0; padding: 0; margin: 0 0 var(--s3); }
fieldset.field legend {
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
  padding: 0; margin-bottom: var(--s1);
}
.check {
  display: flex; align-items: center; gap: .55rem;
  font-size: var(--fs-sm); font-weight: 400; color: var(--ink-2);
  padding: .3rem 0; cursor: pointer;
}
.check input { width: auto; margin: 0; }

/* =====================================================================
   SESSION 7 — stgeorgeutahhomesforsale.com only.
   Appended; shared rules above are untouched.
   ===================================================================== */

/* Territory note in the footer. Greater Southern Utah is the whole service
   area; the St. George metro core links to the sibling domain instead. */
.footer__area {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: var(--fs-xs);
  color: var(--on-dark-2);
  max-width: 80ch;
}
.footer__area strong { color: var(--on-dark); font-weight: 600; }

/* Town lists on /areas/. */
.area-group { margin-bottom: var(--s5); }
.area-group:last-child { margin-bottom: 0; }
.area-group__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}
.area-group__head h3 { margin: 0; font-size: var(--fs-lg); }
.area-group__meta { font-size: var(--fs-xs); color: var(--ink-3); }
.area-list {
  list-style: none; margin: var(--s3) 0 0; padding: 0;
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.area-list li {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: var(--s2) var(--s3);
}
.area-list b { display: block; font-size: var(--fs-base); font-weight: 650; color: var(--ink); }
.area-list span { display: block; margin-top: 3px; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }

/* Land due-diligence checklists — written as questions to ask, never as
   answers, because Utah water law varies by basin and these are material
   facts a buyer acts on financially. */
.dd-list { list-style: none; margin: var(--s4) 0 0; padding: 0; }
.dd-list > li {
  border-left: 3px solid var(--accent, #b5642f);
  background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--s3);
  margin-bottom: var(--s2);
}
.dd-list b { display: block; font-size: var(--fs-base); color: var(--ink); margin-bottom: 4px; }
.dd-list span { display: block; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }

/* Pre-publication notice for anything not cleared to go live. */
.hold-note {
  border: 2px dashed var(--accent, #b5642f);
  border-radius: var(--radius);
  padding: var(--s4);
  margin-top: var(--s4);
  background: var(--surface-2);
}
.hold-note__flag {
  display: inline-block;
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #7a3f1b; background: rgba(181,100,47,.18);
  border-radius: var(--radius-sm); padding: .3rem .6rem; margin: 0 0 var(--s3);
}
.hold-note p { font-size: var(--fs-sm); color: var(--ink-2); max-width: 68ch; margin: 0 0 var(--s2); }
.hold-note ul { font-size: var(--fs-xs); color: var(--ink-3); padding-left: 1.15rem; margin: 0 0 var(--s2); }

/* ---------------------------------------------------------------------
   Two-step Plan My Move form.
   The indicator is aria-hidden: each step already announces itself in the
   <h2> above it, and a screen reader does not need the same thing twice.
   --------------------------------------------------------------------- */
.form-steps {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3);
  margin: 0 0 var(--s2);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-3);
}
.form-steps > span { display: flex; align-items: center; gap: .4rem; }
/* The bar under the live step is the only colour in the row, so the eye
   lands on where you are rather than on the row itself. */
.form-steps__on {
  color: var(--green-text);
  box-shadow: inset 0 -2px 0 var(--green);
  padding-bottom: 2px;
}
.form-steps__done { color: var(--ink-3); }
.form-steps__done::before {
  content: "\2713";           /* tick: this step is banked */
  font-weight: 700;
  color: var(--green);
}

/* "Your details are already with me, Sarah." Reassurance that step 1 landed,
   which is what makes the rest of the form feel optional rather than lost. */
.form-known {
  margin-top: var(--s2);
  padding: var(--s2);
  border-left: 3px solid var(--green);
  background: var(--green-050);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

/* The way out of step 2. Deliberately quiet — it is an honest exit, not a
   competing call to action. */
.form-skip {
  margin-top: var(--s2);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.form-skip a { color: var(--ink-3); text-decoration: underline; }
.form-skip a:hover { color: var(--green-text); }

/* ---------------------------------------------------------------------
   Checkbox rows — specificity fix, not a redesign.

   The .check rules further up this file were being beaten by site.css's
   `.field label { display: block }` and `.field input { min-height: 48px }`,
   because the rows live inside <fieldset class="field"> and those selectors
   are one class deeper. The result: every checkbox rendered as a 48px-tall
   box on its own line ABOVE the words it labels. That has been true of the
   Plan My Move form since it was built.

   One level deeper again, so it wins without editing either file's existing
   rules — site.css stays the shared renderer, and the .check block above
   stays as the two real estate sites share it.
   --------------------------------------------------------------------- */
.field .check {
  display: flex; align-items: center; gap: .55rem;
  font-size: var(--fs-sm); font-weight: 400; color: var(--ink-2);
  margin-bottom: 0;
}
.field .check input[type="checkbox"] {
  flex: none;
  width: 1.05rem; height: 1.05rem; min-height: 0;
  padding: 0; margin: 0;
  accent-color: var(--green);
}

/* ---------------------------------------------------------------------
   BRAND LOCKUP AT 1.5x

   The mark goes from 38px to 57px. Both the monogram and the <img> are
   scaled, so the size survives brand.logo_mark being filled in with the
   real Keller Williams lockup — otherwise site.css's `.brand img {38px}`
   would silently shrink it back the day the TODO_ is resolved.

   The header gaps come down from 24px to 16px in the same breath, and that
   is not cosmetic. The bar is a flex row of brand + nav + CTA that at
   desktop widths is already at capacity: enlarging the mark alone squeezes
   .brand__name, which rewraps from four lines to five, which pushes the
   header from 75px to 94px and tips 1280px into horizontal overflow. The
   19px the mark takes has to be given back, and the gaps are the cheapest
   place to find it.

   Measured across 1600/1440/1366/1300/1280/950/768/390: header height
   stays 75px and horizontal overflow is zero at every desktop width — and
   1265px and 390px, both of which overflow TODAY, each improve. See the
   note in the handover about the header overflowing between roughly 950px
   and 1300px on its own; that predates this rule and is not fixed by it.
   --------------------------------------------------------------------- */
/* The initials were never actually centred. theme.css asks for
   `display:grid; place-items:center` up in the BRAND LOCKUP block, but
   site.css line 85 — `@media (min-width:480px){ .brand span{display:inline} }`
   — is a class plus a type selector and outranks a single class, so the
   monogram has been a blockified inline box with its initials sitting
   top-left this whole time. At 38px the glyphs nearly filled the square and
   it read as centred; at 57px the gap is obvious. Two classes outrank one
   class and a type, so this is the first rule that has actually won.

   Deliberately scoped to the SAME 480px breakpoint as the site.css rule it
   is correcting. Unscoped it would also beat `.brand span{display:none}`
   below 480px and switch the monogram on where it is currently hidden —
   which is arguably a bug worth fixing, but it is not this change, and it
   would add 57px to a header that already overflows on a phone. */
@media (min-width: 480px) {
  .brand .brand__monogram {
    display: grid;
    place-items: center;
    line-height: 1;
  }
}

/* The 1.5x itself, held back to the width where the desktop nav appears
   (site.css switches .nav on at 980px). Below that the header is brand +
   phone + CTA + burger in a row that ALREADY overflows at phone widths;
   adding 19px there would deepen an existing bug to make a logo bigger on
   the one screen size where there is no room for it. Above it, measured at
   1600/1440/1366/1300/1280: header height unchanged at 75px, overflow zero. */
@media (min-width: 980px) {
  .brand .brand__monogram {
    width: 57px; height: 57px;
    border-radius: 15px;
    font-size: 1.425rem;
  }
  .brand img {
    width: 57px; height: 57px;
    border-radius: 14px;
  }
}

/* Reclaims the 19px the mark takes. Global rather than scoped: the tighter
   gaps also shave width off the overflowing mobile header, so every width
   is equal or better than before. */
.site-header__bar { gap: 16px; }
.nav { gap: 22px; }

/* =====================================================================
   PHOTOGRAPHY LAYER  —  stgeorgeutahhomesforsale.com
   ---------------------------------------------------------------------
   Every photograph on this site is an AI-generated illustration from the
   client's own brand pack (www/branding), cropped out of the marketing
   squares. They are decoration, never inventory: nothing here captions an
   image as a property, an address or a sold result, and the templates
   print a standing "illustrative imagery" line under each one.

   Contrast rule for anything sitting on a photo: the text never trusts the
   picture. A scrim element carries the contrast, so copy stays legible over
   a bright sky or a dark doorway alike.
   ===================================================================== */

/* ---------- photographic hero -------------------------------------- */
.hero--photo {
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center 62%;
  color: var(--on-dark);
  padding-block: clamp(64px, 10vw, 128px);
}
/* Kills site.css's dotted pattern overlay, which reads as dirt on a photo. */
.hero--photo::before { display: none; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,25,16,.62) 0%, rgba(20,25,16,.52) 45%, rgba(20,25,16,.80) 100%),
    linear-gradient(90deg, rgba(20,25,16,.55) 0%, rgba(20,25,16,0) 72%);
}
.hero--photo h1,
.hero--photo .lede,
.hero--photo .hero__note { color: #fff; }
.hero--photo .lede { color: rgba(255,255,255,.90); }
.hero--photo .hero__note { color: rgba(255,255,255,.78); }
.hero--photo .eyebrow { color: #d9c9a8; }
.hero--photo .ticks li { color: rgba(255,255,255,.92); }
.hero--photo .ticks li::before { border-color: rgba(255,255,255,.55); }
.hero--photo .hero__note a { color: #fff; }
/* The hero aside is a white card; on a photo it needs a lift to read as
   deliberate rather than as a hole punched in the picture. */
.hero--photo .card { box-shadow: 0 18px 50px rgba(0,0,0,.34); border-color: transparent; }

/* ---------- full-bleed showcase band -------------------------------- */
.showcase {
  position: relative;
  background-image: var(--showcase-image);
  background-size: cover;
  background-position: center 60%;
  color: #fff;
  padding-block: clamp(72px, 11vw, 132px);
  overflow: hidden;
}
.showcase--tall { padding-block: clamp(112px, 17vw, 208px); }
.showcase__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(18,23,14,.74) 0%, rgba(18,23,14,.58) 50%, rgba(18,23,14,.82) 100%);
}
.showcase__inner { position: relative; }
.showcase h2 { color: #fff; max-width: 20ch; }
.showcase .lede { color: rgba(255,255,255,.90); max-width: 56ch; }
.showcase .eyebrow { color: #d9c9a8; }
.showcase .btn--secondary {
  border-color: rgba(255,255,255,.62); color: #fff; background: transparent;
}
.showcase .btn--secondary:hover { background: rgba(255,255,255,.14); color: #fff; }
.showcase__credit {
  position: absolute; right: var(--gutter); bottom: 10px;
  margin: 0;
  font-size: .625rem; letter-spacing: .03em;
  color: rgba(255,255,255,.46);
}

/* ---------- inline photo band (figure inside a section) ------------- */
.band { margin: 0; }
.band img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.band figcaption {
  margin-top: .5rem;
  font-size: .625rem; letter-spacing: .03em;
  color: var(--ink-3);
}
.section--dark .band figcaption { color: rgba(255,255,255,.45); }

/* ---------- cards with a photo -------------------------------------- */
.card--photo { padding-top: 0; overflow: hidden; }
.card__photo {
  display: block;
  margin: 0 calc(var(--s3) * -1) var(--s3);
  background: var(--surface-3);
}
.card__photo img {
  display: block; width: 100%; height: 190px;
  object-fit: cover;
}
.card--photo.card--link:hover .card__photo img { transform: scale(1.03); }
.card__photo img { transition: transform .45s ease; }

/* ---------- richer dark sections ------------------------------------ */
/* The flat #1E2419 band was reading as a black box. A little warmth and a
   hairline top edge make it look like a deliberate panel. */
.section--dark,
.cta-band {
  background:
    radial-gradient(120% 140% at 12% 0%, #2f3826 0%, rgba(47,56,38,0) 58%),
    linear-gradient(180deg, #232a1c 0%, #1a1f14 100%);
  border-top: 1px solid rgba(255,255,255,.08);
}
.section--dark .lede { color: rgba(255,255,255,.82); }

/* ---------- corrections found on the first photographic render ------- */

/* 1. Secondary buttons on a photo were --ink text on a --ink border: a dark
      outline button on a dark picture, effectively invisible. */
.hero--photo .btn--secondary,
.showcase .btn--secondary {
  border-color: rgba(255,255,255,.66);
  color: #fff;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(2px);
}
.hero--photo .btn--secondary:hover,
.showcase .btn--secondary:hover { background: rgba(255,255,255,.18); color: #fff; }

/* 2. .hero--photo sets a light colour on the whole section, and the hero
      aside is a WHITE card sitting inside it — so the card inherited white
      text on a white background and its body copy vanished. Everything
      inside a card goes back to ink. */
.hero--photo .card,
.hero--photo .card p,
.hero--photo .card li,
.hero--photo .card span { color: var(--ink-2); }
.hero--photo .card h1,
.hero--photo .card h2,
.hero--photo .card h3,
.hero--photo .card h4,
.hero--photo .card strong,
.hero--photo .card b { color: var(--ink); }
.hero--photo .card .ticks li { color: var(--ink-2); }
.hero--photo .card .ticks li::before { border-color: var(--green); }
.hero--photo .card em { color: inherit; }

/* 3. Nav labels are short now; they should never wrap mid-item. Wrapping was
      what made the old header three rows deep. */
.nav a { white-space: nowrap; }

/* Active page marker — a sage underline that grows on hover. */
.nav a { position: relative; padding-block: 4px; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--green); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav a:hover::after { transform: scaleX(1); }
.nav a.is-active { color: var(--ink); font-weight: 650; }
.nav a.is-active::after { transform: scaleX(1); }

.mobile-nav a.is-active { color: var(--green-text); font-weight: 650; }
.mobile-nav__cta { font-weight: 700; color: var(--green-text); }

/* A background-image has no <picture> fallback, so both photographic surfaces
   carry a dark background-COLOUR underneath. If the file 404s or the format is
   unsupported, the scrim lands on this instead of on the light page background
   and the white copy stays legible instead of going white-on-near-white. */
.hero--photo { background-color: #232a1c; }
.showcase    { background-color: #232a1c; }

/* Scrim strength, set by contrast maths rather than by eye.
   White text needs 4.5:1 for AA at body size. Over a scrim of rgb(20,25,16)
   at alpha a, sitting on the worst case the photo can present (a blown-out
   white sky), the result is 255 - 235a per channel; 4.5:1 against white needs
   that at or below ~118, i.e. a >= 0.58. The mid-stops were 0.52 and 0.58,
   which measured 3.63:1 — fine for the h1, short of AA for the lede under it.
   Raised to 0.60 and 0.64, which measure 4.9:1 and 5.4:1 in the same worst
   case, and look richer besides. */
.hero__scrim {
  background:
    linear-gradient(180deg, rgba(20,25,16,.68) 0%, rgba(20,25,16,.60) 45%, rgba(20,25,16,.82) 100%),
    linear-gradient(90deg, rgba(20,25,16,.55) 0%, rgba(20,25,16,0) 72%);
}
.showcase__scrim {
  background:
    linear-gradient(180deg, rgba(18,23,14,.76) 0%, rgba(18,23,14,.64) 50%, rgba(18,23,14,.84) 100%);
}

/* ---------------------------------------------------------------------
   MOBILE HEADER: show the brand, drop the duplicate phone button.

   Below 480px site.css hides BOTH .brand spans, so a phone showed a header
   with no brand in it at all — just a phone button, a CTA and a burger. The
   two buttons are the same two actions the sticky bottom bar already carries
   ("Call now" / "Plan my move") on every screen, so the phone button was
   costing ~150px to say a second time what is permanently pinned to the
   bottom of the viewport.

   Trading it for the mark puts the brand back in the header at every width
   and still leaves the page free of horizontal scroll.
   --------------------------------------------------------------------- */
.brand .brand__monogram {
  display: grid;
  place-items: center;
  line-height: 1;
}
@media (max-width: 979px) {
  .header-cta .btn--secondary { display: none; }
}

/* Phones get the 800px crop, not the 1600px one. --*-sm is only emitted when
   that variant actually exists on disk, and the fallback inside each var() is
   the full-size image, so a photo with no small version still renders. */
@media (max-width: 800px) {
  .hero--photo { background-image: var(--hero-image-sm, var(--hero-image)); }
  .showcase    { background-image: var(--showcase-image-sm, var(--showcase-image)); }
}

/* ---------------------------------------------------------------------
   PHONE NUMBERS — readable figures.

   site.css puts every .btn in var(--font-head), which resolves to Fraunces:
   a high-contrast display serif whose figures have varying heights and thin
   joins. At the 15px of the header button, "435-553-3361" was genuinely
   hard to read — thin strokes, digits sitting at different heights, and no
   separation between the repeated 3s and 5s.

   A phone number is data, not display type. It goes into the body face with
   tabular lining figures, which are monospaced, all one height, and sit on
   the baseline. Applied by [href^="tel:"] so every phone link on the site
   picks it up - header, footer, sticky bar and inline body copy alike.
   --------------------------------------------------------------------- */
a[href^="tel:"] {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-weight: 650;
  letter-spacing: .015em;
}
/* The header button is the smallest instance, so it gets a touch more size. */
.header-cta a[href^="tel:"] { font-size: 1rem; }
.sticky-cta a[href^="tel:"] { font-family: var(--font-body); font-weight: 650; }

/* The brokerage licence number in the footer is the same problem at an even
   smaller size - serif figures at ~12px inside a legal line. */
.compliance__text p { font-variant-numeric: tabular-nums lining-nums; }

/* Inter's figures are wider than Fraunces's, and tabular spacing widens them
   again, so the readable phone button grew ~14px and started touching the
   last nav item. 15px Inter is still far more legible than 15px Fraunces was,
   and the CTA group is pinned so it can never be squeezed into the nav. */
.header-cta a[href^="tel:"] { font-size: .9375rem; letter-spacing: .01em; }
.header-cta { flex: none; }
.nav { min-width: 0; }

/* Measured at 1440px: brand 230 + nav 539 + cta 298 + two 16px gaps = 1099
   inside a 1100px bar. Zero slack, so the nav could not fit its own content
   and "About" spilled 2px under the phone button. Six nav gaps at 18px
   instead of 22px returns 24px, which is the slack the row needs. */
.nav { gap: 18px; }