/* sharonkaak.com — site stylesheet
 *
 * Tokens lifted from sharonkaak.com's most recent / polished pages
 * (Creative Financing, Cash Offers — May 2026 build):
 *
 *   Navy hero/heading:   #1B2A4A   rgb(27, 42, 74)
 *   Gold deep (eyebrow): #B8860B   rgb(184, 134, 11)
 *   Gold light (kicker): #D4A843   rgb(212, 168, 67)
 *   Cream paper bg:      #FAF6EE   rgb(250, 246, 238)
 *   Muted body:          #5A6B7D   rgb(90, 107, 125)
 *   Header / footer bg:  #000      (matches existing brand header)
 *
 * Display: Georgia 700 (real-estate-broker classical)
 * Body:    Open Sans 17/30 (matches existing)
 */

:root {
  /* surfaces */
  --color-paper:        #faf6ee;
  --color-paper-soft:   #f0ead9;
  --color-cream:        #fffaf0;
  --color-rule:         #e5dfd0;

  /* navy */
  --color-navy:         #1b2a4a;
  --color-navy-deep:    #14213a;

  /* gold */
  --color-gold-deep:    #b8860b;
  --color-gold:         #d4a843;
  --color-gold-soft:    rgba(184, 134, 11, 0.18);
  --color-gold-border:  rgba(184, 134, 11, 0.35);

  /* ink */
  --color-ink:          #1b2a4a;
  --color-ink-soft:     #5a6b7d;
  --color-ink-on-dark:  rgba(255, 255, 255, 0.82);
  --color-ink-on-dark-soft: rgba(255, 255, 255, 0.62);

  /* dark surfaces (header/footer) */
  --color-dark:         #000000;
  --color-dark-soft:    #0e0e0e;

  --shadow-sm: 0 1px 2px rgba(20, 33, 58, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 33, 58, 0.10);

  --max-width: 1180px;
  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  --rhythm: 1.5rem;

  --font-display: Georgia, "Times New Roman", "Iowan Old Style", serif;
  --font-body:    "Open Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, Tahoma, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--color-gold-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 134, 11, 0.4);
  transition: color 120ms ease, border-color 120ms ease;
}
a:hover, a:focus {
  color: var(--color-navy);
  border-bottom-color: var(--color-navy);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--color-navy);
  margin: 0 0 0.6em;
  line-height: 1.2;
}
h1 { font-size: clamp(2rem, 4.2vw, 2.625rem); }   /* ~42px */
h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); }   /* ~30px */
h3 { font-size: 1.3125rem; }                      /* 21px */
h4 { font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-gold-deep); }

p { margin: 0 0 1em; color: var(--color-ink-soft); }

strong { color: var(--color-navy); }
em, i { font-style: italic; }

/* layout ---------------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  position: fixed; left: 1rem; top: 1rem; width: auto; height: auto;
  background: var(--color-navy); color: var(--color-cream); padding: .5rem 1rem; z-index: 100;
}

.site-main { padding-bottom: 4rem; background: var(--color-paper); }
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container--narrow { max-width: 820px; }
.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section--alt { background: var(--color-paper-soft); }
.section--dark {
  background: var(--color-navy);
  color: var(--color-ink-on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #ffffff; }
.section--dark p { color: var(--color-ink-on-dark); }
.section--dark a { color: var(--color-gold); border-bottom-color: rgba(212, 168, 67, 0.45); }
.section--dark a:hover { color: #ffffff; border-bottom-color: #ffffff; }

/* eyebrows -------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;        /* 12px */
  letter-spacing: 0.2em;     /* ~2.5px */
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin-bottom: 0.85rem;
}
.eyebrow--pill {
  background: var(--color-gold-soft);
  border: 1px solid var(--color-gold-border);
  color: var(--color-gold);
  padding: 7px 20px;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}
.eyebrow--pill::before {
  content: "★";
  margin-right: 0.55em;
  color: var(--color-gold);
}

/* italic gold accent word inside a heading ("Sell Your Home Fast — On Your Terms") */
.kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  color: var(--color-gold);
}

.lede {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
}

/* header --------------------------------------------------------------- */
.site-header {
  background: var(--color-dark);
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.site-brand { text-decoration: none; display: block; line-height: 1.15; border: 0; }
.site-brand:hover { border: 0; }
.site-brand__name {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.15rem;
  color: #ffffff;
  letter-spacing: 0.02em;
}
.site-brand__tagline {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-top: 2px;
}

/* Legacy nav rules removed 2026-08-31 — superseded wholesale by the
   NAVIGATION block at the end of this file. They were still winning on
   specificity (.site-nav ul beats .nav-list) and forcing the mobile drawer
   to lay out as a horizontal row. */

/* hero ----------------------------------------------------------------- */
.hero {
  background: var(--color-paper);
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 4rem);
}
.hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.hero__inner--narrow { max-width: 880px; }
.hero h1 { margin-bottom: 0.3em; }
.hero .lede { max-width: 60ch; }

/* The signature navy hero block from /Cash-offers and /Creative-Financing.
   Use this for landing pages where you want the gold pill + serif heading
   on a navy plate. */
.hero--navy {
  padding: 0;
  background: var(--color-paper);
}
.hero--navy .hero__inner {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);
  border-radius: 12px;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  margin: clamp(1.5rem, 4vw, 3rem) auto;
  color: #ffffff;
}
.hero--navy h1 { color: #ffffff; max-width: 18ch; margin-left: auto; margin-right: auto; }
.hero--navy .lede {
  color: rgba(255, 255, 255, 0.82);
  max-width: 56ch;
  margin: 1.25rem auto 0;
}
.hero--navy .eyebrow--pill { color: var(--color-gold); }

/* The dark hero used for the homepage front door — black with brand photo
   over the top, paying homage to the existing PropertyMinder shell. */
.hero--dark {
  background: var(--color-dark);
  color: #ffffff;
  padding: clamp(4rem, 10vw, 7rem) 0 clamp(3rem, 8vw, 5rem);
  text-align: center;
}
.hero--dark h1 { color: #ffffff; font-size: clamp(2.25rem, 5vw, 3rem); margin: 0.5em auto; max-width: 18ch; }
.hero--dark .lede { color: rgba(255, 255, 255, 0.82); max-width: 56ch; margin: 0 auto; }
.hero--dark .eyebrow { color: var(--color-gold); }

/* buttons -------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  padding: 0.85rem 1.6rem;
  border-radius: 4px;
  text-decoration: none;
  border: 1.5px solid var(--color-navy);
  background: var(--color-navy);
  color: #ffffff;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, transform 80ms ease;
}
.btn:hover {
  transform: translateY(-1px);
  background: var(--color-gold-deep);
  border-color: var(--color-gold-deep);
  color: #ffffff;
}
.btn--ghost {
  background: transparent;
  color: var(--color-navy);
}
.btn--ghost:hover { background: var(--color-navy); color: #ffffff; }
.btn--gold {
  background: var(--color-gold-deep);
  border-color: var(--color-gold-deep);
  color: #ffffff;
}
.btn--gold:hover { background: var(--color-navy); border-color: var(--color-navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.5rem; }

/* cards ---------------------------------------------------------------- */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.card {
  background: var(--color-cream);
  border: 1px solid var(--color-rule);
  border-radius: 8px;
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--color-rule);
}
a.card:hover { background: var(--color-paper-soft); border-color: var(--color-gold-border); border-bottom-color: var(--color-gold-border); color: inherit; }
.card h3 { margin-top: 0; }
.card--feature { border-left: 4px solid var(--color-gold-deep); padding-left: 1.5rem; }

.callout {
  background: var(--color-paper);
  border-left: 3px solid var(--color-gold-deep);
  padding: 1rem 1.25rem;
  border-radius: 2px;
  margin: 1.5rem 0;
}
.callout strong { color: var(--color-navy); }
.callout em { font-style: italic; }

/* tables --------------------------------------------------------------- */
table.compare {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background: var(--color-cream);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-rule);
  font-size: 0.95rem;
}
table.compare th, table.compare td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-rule);
}
table.compare th {
  background: var(--color-navy);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
}
table.compare tbody tr:last-child td { border-bottom: none; }
table.compare tbody tr:nth-child(even) { background: var(--color-paper-soft); }
table.compare tbody td:last-child { color: var(--color-gold-deep); font-weight: 600; }

/* lists ---------------------------------------------------------------- */
.checklist { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.checklist li {
  position: relative;
  padding: 0.6rem 0 0.6rem 2rem;
  border-bottom: 1px dotted var(--color-rule);
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0.4rem; top: 0.6rem;
  color: var(--color-gold-deep);
  font-weight: 700;
}

/* testimonials --------------------------------------------------------- */
.testimonial {
  background: var(--color-cream);
  border-left: 3px solid var(--color-gold-deep);
  border-radius: 2px;
  padding: 1.5rem 1.75rem;
  margin: 0 0 1.5rem;
  box-shadow: var(--shadow-sm);
}
.testimonial p { color: var(--color-ink); }
.testimonial cite {
  display: block;
  margin-top: 0.7rem;
  font-style: italic;
  font-weight: 700;
  color: var(--color-gold-deep);
  font-family: var(--font-display);
  font-size: 1rem;
}
.testimonial p:last-of-type { margin-bottom: 0; }

/* listing card --------------------------------------------------------- */
.listing-card {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-cream);
  border: 1px solid var(--color-rule);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.listing-card__media {
  background: var(--color-navy);
  color: #ffffff;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-align: center;
  padding: 1rem;
}
.listing-card__body { padding: 1.75rem; }
.listing-card__address { font-family: var(--font-display); font-size: 1.4rem; color: var(--color-navy); margin: 0; font-weight: 700; }
.listing-card__city { font-size: 0.92rem; color: var(--color-ink-soft); margin-bottom: 0.5rem; }
.listing-card__status {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 3px;
  background: var(--color-paper-soft);
  color: var(--color-ink-soft);
  margin-bottom: 0.75rem;
}
.listing-card__status--active { background: var(--color-gold-deep); color: #ffffff; }
.listing-card__status--sold   { background: var(--color-navy); color: #ffffff; }

/* form ----------------------------------------------------------------- */
.form-grid { display: grid; gap: 1.1rem; max-width: 640px; }
.form-grid label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.35rem; color: var(--color-navy); }
.form-grid input, .form-grid textarea, .form-grid select {
  width: 100%;
  font: inherit;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  background: var(--color-cream);
  color: var(--color-ink);
}
.form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus {
  outline: 2px solid var(--color-gold-border);
  outline-offset: 1px;
  border-color: var(--color-gold-deep);
}
.form-grid textarea { min-height: 140px; }

/* IDX placeholder ------------------------------------------------------ */
.idx-placeholder {
  background: var(--color-paper-soft);
  border: 2px dashed var(--color-gold-border);
  border-radius: 8px;
  padding: 2.5rem;
  text-align: center;
  margin: 2rem 0;
}
.idx-placeholder h3 { margin-top: 0; color: var(--color-navy); }
.idx-placeholder code { background: var(--color-cream); padding: 0.1em 0.4em; border-radius: 3px; font-size: 0.92em; color: var(--color-gold-deep); }

/* footer --------------------------------------------------------------- */
.site-footer {
  background: var(--color-dark);
  color: #ffffff;
  margin-top: 0;
  padding-top: 3rem;
}
.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter) 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}
.site-footer__heading {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: 0.25rem 0; }
.site-footer a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  border: 0;
}
.site-footer a:hover { color: var(--color-gold); border: 0; }
.site-footer p { color: rgba(255, 255, 255, 0.78); }
.site-footer p strong { color: #ffffff; }
.site-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.5rem var(--gutter);
  font-size: 0.82rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}
.site-footer__small { color: rgba(255, 255, 255, 0.45); margin-top: 0.5em; }

/* utilities ------------------------------------------------------------ */
.center-text { text-align: center; }
.measure { max-width: 65ch; }
.muted { color: var(--color-ink-soft); }
.stack > * + * { margin-top: var(--rhythm); }
.flow > * + * { margin-top: 1rem; }
.divider { border: 0; border-top: 1px solid var(--color-rule); margin: 2.5rem 0; }

.stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  background: var(--color-cream);
  border: 1px solid var(--color-rule);
  padding: 2rem 1.5rem;
  border-radius: 8px;
  margin: 2rem 0;
  text-align: center;
}
.stat-band__num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-navy);
  display: block;
  line-height: 1;
}
.stat-band__label {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-top: 0.5rem;
  display: block;
}
.stat-band > div { padding: 0 0.5rem; border-right: 1px solid var(--color-rule); }
.stat-band > div:last-child { border-right: 0; }

/* circular feature blocks (echoes live site's three round photos under hero) */
.feature-circles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.5rem;
  margin: 0 auto;
  max-width: 1100px;
  text-align: center;
}
.feature-circle {
  text-decoration: none;
  color: inherit;
  border: 0;
  display: block;
}
.feature-circle:hover { color: inherit; border: 0; }
.feature-circle__media {
  width: 260px;
  height: 260px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  border: 4px solid var(--color-gold);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.feature-circle:hover .feature-circle__media {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.22);
}
.feature-circle__media img { width: 100%; height: 100%; object-fit: cover; }
.feature-circle__media--placeholder::after {
  content: attr(data-icon);
  font-size: 4rem;
  color: var(--color-gold);
  opacity: 0.7;
}
.feature-circle__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-gold);
  margin: 0 0 0.5rem;
}
.feature-circle__body {
  font-size: 0.97rem;
  color: var(--color-ink-soft);
  margin: 0 auto;
  max-width: 30ch;
}

.section--feature-circles {
  background: var(--color-dark);
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 6vw, 4rem);
}
.section--feature-circles .feature-circle__body { color: rgba(255, 255, 255, 0.78); }

/* numbered process steps (matches Cash Offer "1, 2, 3..." treatment) */
.process { list-style: none; padding: 0; counter-reset: step; }
.process > li {
  counter-increment: step;
  position: relative;
  padding: 1.25rem 1rem 1.25rem 4rem;
  border-bottom: 1px solid var(--color-rule);
}
.process > li:last-child { border-bottom: 0; }
.process > li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 1.1rem;
  width: 2.4rem; height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-navy);
  color: var(--color-gold);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50%;
}
.process > li strong { display: block; color: var(--color-navy); font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 0.2rem; }

@media (min-width: 720px) {
  .listing-card { grid-template-columns: 320px 1fr; }
  .listing-card__media { min-height: 100%; }
}

/* ======================================================================
   PHOTOGRAPHY LAYER  — added 2026-08-30
   All imagery is Sharon Kaak's own listing photography (one photographer
   across every shoot), processed to 2200px / 900px JPEG. Mobile-first:
   the -sm variant is served below 900px via <picture>.
   ====================================================================== */

/* Full-bleed photographic hero -------------------------------------- */
.hero--photo {
  position: relative;
  padding: 0;
  background: var(--color-dark);
  color: #fff;
  text-align: left;
  overflow: hidden;
}
.hero--photo .hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero--photo .hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
/* Legibility scrim — strong at the bottom where the text sits on mobile,
   angled on larger screens so the photograph stays visible. */
.hero--photo .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(6, 10, 20, 0.92) 0%, rgba(6, 10, 20, 0.72) 38%, rgba(6, 10, 20, 0.30) 68%, rgba(6, 10, 20, 0.34) 100%);
}
.hero--photo .hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(7rem, 26vw, 10rem) var(--gutter) clamp(2.25rem, 8vw, 4rem);
}
.hero--photo h1 {
  color: #fff;
  font-size: clamp(2.1rem, 8.5vw, 4rem);
  line-height: 1.08;
  margin: 0.35em 0 0.4em;
  max-width: 15ch;
  text-wrap: balance;
}
.hero--photo .lede {
  color: rgba(255, 255, 255, 0.9);
  max-width: 48ch;
  margin: 0;
  font-size: clamp(1rem, 3.4vw, 1.15rem);
}
.hero--photo .eyebrow { color: var(--color-gold); }
.hero--photo .btn-row { margin-top: 1.75rem; }
.hero--photo .hero__credit {
  position: absolute;
  right: var(--gutter);
  bottom: 0.6rem;
  z-index: 2;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}
@media (min-width: 768px) {
  .hero--photo .hero__inner {
    padding-top: clamp(8rem, 20vw, 12rem);
    padding-bottom: clamp(4rem, 9vw, 6rem);
  }
  .hero--photo .hero__media::after {
    background:
      linear-gradient(to top, rgba(6, 10, 20, 0.86) 0%, rgba(6, 10, 20, 0.42) 55%, rgba(6, 10, 20, 0.26) 100%),
      linear-gradient(to right, rgba(6, 10, 20, 0.68) 0%, rgba(6, 10, 20, 0.12) 62%, rgba(6, 10, 20, 0) 100%);
  }
}

/* Slimmer photographic band for interior pages ---------------------- */
.hero--band .hero__inner {
  padding-top: clamp(5.5rem, 20vw, 8rem);
  padding-bottom: clamp(1.75rem, 6vw, 3rem);
}
.hero--band h1 { font-size: clamp(1.9rem, 7vw, 3rem); max-width: 18ch; }

/* Full-width photographic band used between sections ---------------- */
.photo-band {
  position: relative;
  min-height: clamp(240px, 46vw, 420px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--color-navy-deep);
}
.photo-band__media { position: absolute; inset: 0; }
.photo-band__media img { width: 100%; height: 100%; object-fit: cover; }
.photo-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 30, 0.62);
}
.photo-band__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: clamp(2.5rem, 8vw, 4.5rem) var(--gutter);
  max-width: 760px;
}
.photo-band__inner h2 { color: #fff; }
.photo-band__inner .lede { color: rgba(255, 255, 255, 0.88); }

/* Editorial figure — image + caption, used in body copy ------------- */
.figure { margin: clamp(2rem, 5vw, 3rem) 0; }
.figure img { width: 100%; border-radius: 6px; }
.figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  line-height: 1.5;
}
.figure--wide img { border-radius: 0; }

/* Portrait block (About) -------------------------------------------- */
.portrait-block {
  display: grid;
  gap: clamp(1.5rem, 5vw, 3rem);
  align-items: center;
}
.portrait-block__media { margin: 0; }
.portrait-block__media img {
  width: 100%;
  border-radius: 8px;
  box-shadow: var(--shadow-md);
}
@media (min-width: 860px) {
  .portrait-block { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .portrait-block--flip .portrait-block__media { order: 2; }
}

/* Feature circles now carry real photography ------------------------ */
.feature-circle__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.feature-circle__media--placeholder::after { content: none; }

/* Area cards with photography --------------------------------------- */
.card--photo { padding: 0; overflow: hidden; }
.card--photo .card__media { margin: 0; aspect-ratio: 16 / 9; }
.card--photo .card__media img { width: 100%; height: 100%; object-fit: cover; }
.card--photo .card__body { padding: 1.25rem 1.25rem 1.5rem; }
.card--photo h3 { margin-top: 0; }

/* Mobile hygiene ---------------------------------------------------- */
img, picture, video, svg { max-width: 100%; }
.grid > * { min-width: 0; }


/* Owner / credential bar -------------------------------------------- */
.section--tight { padding-top: clamp(1.75rem, 4vw, 2.5rem); padding-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.owner-bar { background: var(--color-paper-soft); border-bottom: 1px solid var(--color-rule); }
.owner-bar__line {
  margin: 0;
  font-size: clamp(0.85rem, 2.9vw, 0.98rem);
  letter-spacing: 0.02em;
  color: var(--color-navy);
  line-height: 1.7;
}
.owner-bar__line strong { color: var(--color-gold-deep); }
.owner-bar__sep { color: var(--color-gold); padding: 0 0.5em; }
.owner-bar__note {
  margin: 0.5rem auto 0;
  max-width: 56ch;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}
@media (max-width: 600px) {
  .owner-bar__sep { display: block; height: 0; overflow: hidden; padding: 0; }
}

/* Button variant that sits on top of a photograph -------------------- */
.btn--on-photo {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.85);
  color: #ffffff;
  backdrop-filter: blur(3px);
}
.btn--on-photo:hover { background: rgba(255, 255, 255, 0.92); color: var(--color-navy); border-color: #fff; }

/* Tap targets: never below 44px on touch ---------------------------- */
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }


/* Header phone: real icon, not an emoji ------------------------------ */
.site-header__phone svg { width: 15px; height: 15px; margin-right: 0.45em; flex: none; }

/* Forms -------------------------------------------------------------- */
.form-note {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin-top: 0.75rem;
}
.form-status {
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.form-status--ok {
  background: rgba(27, 42, 74, 0.06);
  border-left: 4px solid var(--color-gold-deep);
  color: var(--color-navy);
}
.form-status--err {
  background: rgba(173, 0, 0, 0.06);
  border-left: 4px solid #ad0000;
  color: #7a1414;
}
.form-status p { margin: 0.25rem 0; }
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}
.field-error { color: #ad0000; font-size: 0.85rem; margin-top: 0.25rem; }

/* Enquiry panel — the lead-capture block that replaces the IDX shell -- */
.enquiry-panel {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);
  color: #fff;
  border-radius: 10px;
  padding: clamp(1.75rem, 5vw, 3rem);
  margin: clamp(2rem, 5vw, 3rem) 0;
}
.enquiry-panel h3 { color: #fff; margin-top: 0; font-size: clamp(1.3rem, 4.5vw, 1.75rem); }
.enquiry-panel p { color: rgba(255, 255, 255, 0.85); max-width: 60ch; }
.enquiry-panel .btn-row { margin-top: 1.5rem; }
.enquiry-panel__points {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  gap: 0.6rem;
}
.enquiry-panel__points li {
  padding-left: 1.5rem;
  position: relative;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
}
.enquiry-panel__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
}

/* Two-up field row inside forms ------------------------------------- */
.field-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 420px) { .field-row { grid-template-columns: 1fr; } }

/* Checklist used on the valuation page ------------------------------- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }
.checklist li { position: relative; padding-left: 1.75rem; line-height: 1.65; }
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 10px; height: 10px;
  border: 2px solid var(--color-gold-deep);
  border-top: 0; border-right: 0;
  transform: rotate(-45deg);
}

/* Screen-reader-only utility */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}


/* --------------------------------------------------------------------
   1024px header fix. At exactly 1024 the nav (now seven items, after
   "What's it worth?" was added) plus the phone number pushed the header
   29px past the viewport. Tighten the nav and drop the phone link a
   breakpoint earlier — the number is still in the footer, on every CTA,
   and one tap away in the mobile nav.
   -------------------------------------------------------------------- */

@media (max-width: 1100px) {
  
  .site-header__inner { grid-template-columns: auto 1fr; }
}

/* The skip link must not create a scrollbar before it is focused. */
.skip-link { left: 0; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }


/* Header brand must not wrap into a three-line stack on desktop. ------ */
@media (min-width: 861px) {
  .site-brand__name    { white-space: nowrap; }
  .site-brand__tagline { white-space: nowrap; }
}



/* ======================================================================
   NAVIGATION  — rebuilt 2026-08-31
   Mobile-first. The drawer is designed first; the desktop bar is the
   enhancement, not the other way round.
   ====================================================================== */

/* ---- Header shell -------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--color-dark);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.85rem var(--gutter);
}
.site-brand { flex: none; }

/* ---- Hamburger ----------------------------------------------------- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.5rem 0;
  min-height: 44px;
  z-index: 2;
}
.nav-toggle__box {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 26px;
  height: 20px;
}
.nav-toggle__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  transition: transform 220ms ease, opacity 160ms ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Scrim behind the drawer --------------------------------------- */
.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  z-index: 55;
  opacity: 0;
  transition: opacity 220ms ease;
}
.nav-scrim.is-visible { opacity: 1; }

/* ======================  MOBILE DRAWER  ============================== */
@media (max-width: 979px) {

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(90vw, 400px);
    background: #0b0b0b;
    border-left: 1px solid rgba(212, 168, 67, 0.28);
    z-index: 70;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 5.25rem 0 max(1.5rem, env(safe-area-inset-bottom));
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
    visibility: hidden;
  }
  .site-nav--open { transform: translateX(0); visibility: visible; }

  /* Actions pinned at the TOP of the drawer, thumb-reachable, before the
     links — calling and requesting a valuation are the two things a phone
     visitor is most likely to want. */
  .nav-actions {
    order: -1;
    display: grid;
    gap: 0.6rem;
    padding: 0 1.25rem 1.35rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .nav-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 50px;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
  }
  .nav-call svg { width: 17px; height: 17px; }
  .nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    border-radius: 6px;
    background: var(--color-gold-deep);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    padding: 0 1rem;
  }

  .nav-list { list-style: none; margin: 0; padding: 0 1.25rem; display: block; }
  .nav-item { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .nav-item:last-child { border-bottom: 0; }

  /* Section header row: the label links, the chevron expands. Two separate
     targets so tapping "Selling" goes to the sellers page rather than
     forcing everyone through an accordion. */
  .nav-item--has-panel,
  .nav-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .nav-item__link {
    flex: 1;
    display: block;
    padding: 0.95rem 0;
    color: #fff;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0;
    text-transform: none;
    border: 0;
    min-height: 48px;
  }
  .nav-item__link[aria-current] { color: var(--color-gold); }
  .nav-item__toggle {
    flex: none;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: var(--color-gold);
    cursor: pointer;
  }
  .nav-item__toggle svg { width: 13px; height: 8px; transition: transform 200ms ease; }
  .nav-item__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  .nav-panel { flex-basis: 100%; }
  .nav-panel__blurb { display: none; }
  .nav-panel__cols { display: block; padding: 0 0 0.85rem; }
  .nav-panel__col + .nav-panel__col { margin-top: 1rem; }
  .nav-panel__heading {
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin: 0 0 0.35rem;
  }
  .nav-panel ul { list-style: none; margin: 0; padding: 0; }
  .nav-panel a {
    display: block;
    padding: 0.6rem 0 0.6rem 0.9rem;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 0.95rem;
    border: 0;
    border-left: 2px solid rgba(212, 168, 67, 0.3);
    min-height: 44px;
  }
  .nav-panel a:hover, .nav-panel a:focus { color: #fff; border-left-color: var(--color-gold); }
}

/* ======================  DESKTOP BAR  =============================== */
@media (min-width: 980px) {

  .nav-toggle { display: none; }
  .nav-scrim  { display: none; }

  .site-nav {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.75rem);
    flex: 1;
    justify-content: flex-end;
    visibility: visible;
    transform: none;
  }

  .nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: clamp(0.35rem, 1.4vw, 1.1rem);
    margin: 0;
    padding: 0;
  }
  .nav-item { position: relative; display: flex; align-items: center; }

  .nav-item__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.15rem;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 0;
    border-bottom: 2px solid transparent;
  }
  .nav-item__link:hover { color: var(--color-gold); }
  .nav-item__link[aria-current] { color: var(--color-gold); border-bottom-color: var(--color-gold); }

  .nav-item__toggle {
    background: none;
    border: 0;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    padding: 0 0.15rem;
    height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .nav-item__toggle svg { width: 9px; height: 6px; transition: transform 180ms ease; }
  .nav-item__toggle:hover,
  .nav-item__toggle[aria-expanded="true"] { color: var(--color-gold); }
  .nav-item__toggle[aria-expanded="true"] { background: rgba(212, 168, 67, 0.12); border-radius: 4px; }
  .nav-item__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  /* --- Dropdown panel ---
     GEOMETRY, NOT A TIMER.
     The panel used to sit at `top: calc(100% + 0.6rem)`, which put a 9.6px
     dead zone between the trigger and the panel. Moving the pointer down
     crossed unhovered space and the panel closed before it could be reached,
     which made all 56 city pages unreachable by mouse.

     The fix: .nav-panel is now a TRANSPARENT WRAPPER flush against the
     trigger (top: 100%, no gap) whose top padding provides the visual
     offset. Because that padding belongs to the panel, it is part of the
     hover region and bridges the gap. All the visible styling moved to
     .nav-panel__inner, which was already in the markup.

     No setTimeout anywhere — a close delay makes a menu feel sticky and
     merely masks the geometry problem. */
  .nav-panel {
    position: absolute;
    top: 100%;                 /* flush — no dead zone */
    left: -1.25rem;
    padding-top: 0.6rem;       /* the visual gap, INSIDE the hover target */
    min-width: 260px;
    background: none;
    border: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 160ms ease, transform 160ms ease;
    pointer-events: none;
  }
  /* Widen the hover corridor either side so diagonal travel toward a far
     column does not slip out of the region sideways. Invisible, and it sits
     behind the panel so it never intercepts anything else. */
  .nav-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: -0.75rem;
    right: -0.75rem;
    height: 1.4rem;
    z-index: -1;
  }
  .nav-panel__inner {
    background: #0b0b0b;
    border: 1px solid rgba(212, 168, 67, 0.3);
    border-radius: 8px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    padding: 1.5rem;
  }
  .nav-panel[hidden] { display: block; }          /* animate instead of snap */

  /* CLICK TO OPEN — not hover.
     The panel is 620px wide but its trigger is only 149px, so the right two
     thirds of the panel sit underneath the SELLING and ABOUT triggers. Any
     pointer path that travels rightwards at trigger height crosses those
     siblings, opens their panels and closes this one. That is not a corridor
     that can be widened; it is the pattern being wrong for this geometry.

     Once a panel HAS been opened by click, hovering a sibling switches to it
     (see .nav-list.is-active below) — at that point moving between sections
     is deliberate, so the accidental-switch failure cannot happen. */
  .nav-panel.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  /* Menu is "armed": one panel was opened deliberately, so hover now switches. */
  .nav-list.is-active .nav-item--has-panel:hover > .nav-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* The Horse Property mega-panel: three columns, anchored so it cannot
     run off the right edge of the viewport. */
  .nav-panel--wide { left: 0; min-width: 620px; }
  .nav-panel--wide .nav-panel__inner { min-width: 620px; }
  .nav-panel--wide .nav-panel__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .nav-panel__blurb {
    margin: 0 0 1.1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.85rem;
    line-height: 1.6;
    max-width: 54ch;
  }
  .nav-panel__cols { display: grid; gap: 1.75rem; }
  .nav-panel__heading {
    font-family: var(--font-body);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin: 0 0 0.6rem;
  }
  .nav-panel ul { list-style: none; margin: 0; padding: 0; }
  .nav-panel a {
    display: block;
    padding: 0.4rem 0;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
    border: 0;
  }
  .nav-panel a:hover, .nav-panel a:focus { color: var(--color-gold); }

  /* --- Actions --- */
  .nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: none;
    padding-left: clamp(0.5rem, 1.5vw, 1.25rem);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }
  .nav-call {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #fff;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    border: 0;
    min-height: 44px;
  }
  .nav-call:hover { color: var(--color-gold); }
  .nav-call svg { width: 14px; height: 14px; flex: none; }
  .nav-cta {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 1.05rem;
    border-radius: 5px;
    background: var(--color-gold-deep);
    color: #fff;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 0;
    transition: background 140ms ease;
  }
  .nav-cta:hover { background: var(--color-gold); color: var(--color-navy-deep); }
}

/* Tablet band: keep the bar but shed the phone number before it wraps. */
@media (min-width: 980px) and (max-width: 1179px) {
  .nav-call span:not(.visually-hidden) { display: none; }
  .nav-call { padding: 0 0.35rem; }
  .nav-cta  { font-size: 0.74rem; padding: 0 0.8rem; }
  .nav-item__link { font-size: 0.76rem; letter-spacing: 0.06em; }
}

/* Lock the page behind an open drawer. */
body.nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .site-nav, .nav-panel, .nav-scrim, .nav-toggle__bar { transition: none !important; }
}


/* CTA label swaps to a short form in the narrow-desktop band, where the
   full sentence pushed the header 22px past the viewport at 1024. */
.nav-cta__short { display: none; }
@media (min-width: 980px) and (max-width: 1279px) {
  .nav-cta__long  { display: none; }
  .nav-cta__short { display: inline; }
}


/* The hamburger must sit ABOVE the drawer so it reads as the close (X)
   control once open — otherwise the drawer covers it and the only way out
   is the scrim, which is not discoverable. */
@media (max-width: 979px) {
  .site-header { z-index: 75; }
  .nav-toggle  { position: relative; z-index: 80; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__label { opacity: 0; }
  .site-nav { padding-top: 4.75rem; }
}


/* ----------------------------------------------------------------------
   Focus & hover inside the header.
   The global `a:hover, a:focus { color: var(--color-navy) }` was winning
   here, which rendered a focused nav link navy-on-black — invisible. The
   drawer moves focus to the first item on open, so this was the very first
   thing a keyboard or screen-reader user hit.
   ---------------------------------------------------------------------- */
.site-header a:hover,
.site-header a:focus,
.site-nav a:hover,
.site-nav a:focus { color: var(--color-gold); }

.nav-item__link:hover,
.nav-item__link:focus { color: var(--color-gold); }

.nav-panel a:hover,
.nav-panel a:focus { color: var(--color-gold); }

.nav-call:hover, .nav-call:focus { color: var(--color-gold); }
.nav-cta:hover, .nav-cta:focus  { color: #fff; background: var(--color-gold); }
@media (min-width: 980px) {
  .nav-cta:hover, .nav-cta:focus { color: var(--color-navy-deep); }
}

/* A focus ring that is actually visible on the dark header. The site had
   no explicit focus styling at all, so keyboard users were relying on the
   browser default over a black background. */
.site-header a:focus-visible,
.site-header button:focus-visible,
.nav-scrim:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 3px;
}
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-gold-deep);
  outline-offset: 2px;
}


/* ======================================================================
   UTILITY BAR + BRAND LOCKUP  — added 2026-08-31
   The phone moved out of the nav row into a persistent strip above the
   header. Quiet by design: it is a utility strip, not a second nav.
   ====================================================================== */
.utility-bar {
  background: #060606;
  border-bottom: 1px solid rgba(212, 168, 67, 0.18);
  font-size: 0.76rem;
  line-height: 1.4;
  position: relative;
  z-index: 61;
}
.utility-bar__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.45rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.utility-bar__cred {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.03em;
  min-width: 0;
}
.utility-bar__role { color: rgba(255, 255, 255, 0.78); font-weight: 600; }
.utility-bar__dot  { color: var(--color-gold); padding: 0 0.45em; }
.utility-bar__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-gold);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 0;
  white-space: nowrap;
  flex: none;
  min-height: 32px;
}
.utility-bar__phone svg { width: 13px; height: 13px; flex: none; }
.utility-bar__phone:hover, .utility-bar__phone:focus { color: #fff; }

/* Phone-sized: drop the long credential text, keep the number tappable and
   centre it. A 44px target, because this is the highest-intent action. */
@media (max-width: 719px) {
  .utility-bar__inner { justify-content: center; padding: 0.3rem var(--gutter); }
  .utility-bar__cred  { display: none; }
  .utility-bar__phone { font-size: 0.95rem; min-height: 40px; }
}
@media (min-width: 720px) and (max-width: 1099px) {
  .utility-bar__dot--area, .utility-bar__area { display: none; }
}

/* ---- Brand lockup: her name primary, brokerage as endorsement -------- */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex: none;
  min-width: 0;
}
.brand-lockup__rule {
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.18);
  flex: none;
}
.brand-lockup__brokerage {
  height: 26px;
  width: auto;
  flex: none;
  opacity: 0.92;
}
/* Below 900px the nav collapses to a drawer and the header needs its width
   back — the brokerage is still named in the utility bar and the footer. */
@media (max-width: 899px) {
  .brand-lockup__rule, .brand-lockup__brokerage { display: none; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .brand-lockup { gap: 0.7rem; }
  .brand-lockup__brokerage { height: 22px; }
  .brand-lockup__rule { height: 28px; }
}

/* The header is no longer the topmost element, so the drawer and its scrim
   must clear the utility bar too. */
@media (max-width: 979px) {
  .utility-bar { z-index: 40; }
}


/* ----------------------------------------------------------------------
   Narrow-desktop corrections (980–1279px).
   Adding the brokerage logo to the header took ~140px that the nav needed,
   pushing the bar 71px past the viewport at 1024. The logo is the thing to
   give up first: Triple Crown is still named in the utility bar directly
   above it and again in the footer, so nothing is lost but the mark.
   ---------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .brand-lockup__rule,
  .brand-lockup__brokerage { display: none; }
}

/* The 620px mega-panel also ran past the right edge at 1024. Constrain it to
   the viewport and drop to two columns; the third column ("Nearby") wraps
   underneath rather than being clipped. */
@media (min-width: 980px) and (max-width: 1279px) {
  /* Narrow the mega-panel rather than re-anchoring it.
     Right-anchoring was tried first and was worse: it put the panel at
     x -109 with two of its three columns off the left edge of the viewport,
     unreachable and invisible to an overflow check (scrollWidth does not
     grow for content overflowing leftwards). Left-anchored and narrower is
     the safe direction — the panel grows away from the edge it starts at. */
  .nav-panel--wide,
  .nav-panel--wide .nav-panel__inner { min-width: 0; }
  .nav-panel--wide { width: 430px; left: -1.25rem; right: auto; }
  .nav-panel--wide .nav-panel__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-panel--wide .nav-panel__blurb { max-width: none; }
}

/* Any panel near the right edge should open leftwards rather than overflow. */
@media (min-width: 980px) {
  .nav-item:nth-last-child(-n+2) .nav-panel:not(.nav-panel--wide) {
    left: auto;
    right: -1.25rem;
  }
}


/* Tap-target sizing in the header strip. The utility phone is the highest
   intent action on a phone, so it gets a full 44px there; on desktop it is a
   mouse target and 34px keeps the strip thin. */
@media (max-width: 719px) {
  .utility-bar__phone { min-height: 44px; }
  .utility-bar__inner { padding-top: 0.15rem; padding-bottom: 0.15rem; }
}
@media (min-width: 720px) {
  .utility-bar__phone { min-height: 34px; }
}
.site-brand { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }


/* ----------------------------------------------------------------------
   Header corrections after visual review (2026-08-31)

   1. The phone was appearing TWICE on desktop — once in the new utility bar
      and again in the nav row. Trevor asked for it to MOVE to a banner, not
      be duplicated. Removing the nav copy also frees ~130px, which is what
      the brokerage logo needed. It stays in the mobile drawer, where the
      utility bar is the only other place it appears and calling is the
      primary action.

   2. The Triple Crown lockup at 26px was illegible — "REAL ESTATE" rendered
      as mush. At 36px the wordmark reads properly while still sitting
      clearly secondary to her name.
   ---------------------------------------------------------------------- */
@media (min-width: 980px) {
  .nav-actions .nav-call { display: none; }
  .nav-actions { padding-left: clamp(0.75rem, 2vw, 1.5rem); }
}

@media (min-width: 1280px) {
  .brand-lockup { gap: 1.1rem; }
  .brand-lockup__rule { height: 40px; }
  .brand-lockup__brokerage { height: 36px; }
}

/* Breathing room between the brokerage lockup and the first nav item. */
@media (min-width: 980px) {
  .brand-lockup { margin-right: clamp(0.75rem, 2.5vw, 2rem); }
}


/* ======================================================================
   HEADER v3 — 2026-08-31
   Fixes the 1280px breakage and moves the brokerage mark to the left.

   THE BUG: two rules flipped at the SAME breakpoint in opposite directions.
   At >=1280 the brokerage logo appeared (+180px) while the CTA simultaneously
   switched from "Free valuation" to "What's my property worth?" (+90px).
   Together they overran the header and the CTA was clipped at the right edge.
   1280 is one of the commonest laptop widths, which is why it was the first
   thing Trevor saw. The two thresholds are now separated, and the mark is
   narrow enough (~33px) to carry at every width instead of appearing abruptly.
   ====================================================================== */

/* --- Lockup: [mark] | [Sharon Kaak / tagline] ------------------------ */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
  min-width: 0;
  text-decoration: none;
  border: 0;
  min-height: 44px;
}
.brand-lockup:hover { border: 0; }
.brand-lockup__mark {
  height: 38px;
  width: auto;
  flex: none;
  /* Optical, not geometric: the crown sits high in the artwork, so the mark's
     visual centre is below its box centre. Nudging down aligns it with the
     cap-height of "Sharon Kaak" rather than with the box. */
  position: relative;
  top: 1px;
}
.brand-lockup__rule {
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.22);
  flex: none;
}
.brand-lockup .site-brand { min-height: 0; }

/* The mark is small enough to keep on a phone — her name stays the same size
   and the header does not grow. */
@media (max-width: 599px) {
  .brand-lockup { gap: 0.55rem; }
  .brand-lockup__mark { height: 32px; }
  .brand-lockup__rule { height: 26px; }
}
@media (min-width: 600px) and (max-width: 1279px) {
  .brand-lockup__mark { height: 34px; }
}
/* Undo the older rules that hid the mark and reserved space for the wordmark */
@media (max-width: 1279px) {
  .brand-lockup__rule { display: block; }
}
.brand-lockup__brokerage { display: none; }   /* the wide wordmark is retired here */

@media (min-width: 980px) {
  .brand-lockup { margin-right: clamp(0.6rem, 2vw, 1.5rem); }
}

/* --- CTA label thresholds, separated from the logo threshold --------- */
@media (min-width: 980px) and (max-width: 1399px) {
  .nav-cta__long  { display: none; }
  .nav-cta__short { display: inline; }
}
@media (min-width: 1400px) {
  .nav-cta__long  { display: inline; }
  .nav-cta__short { display: none; }
}

/* --- Utility strip on a phone --------------------------------------
   Previously a 50px band containing nothing but a phone number, which read
   as empty rather than as a utility strip. Slimmer, and it now carries the
   ownership line that is the strongest credential she has. */
@media (max-width: 719px) {
  .utility-bar__inner {
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.2rem var(--gutter);
  }
  .utility-bar__cred { display: block; font-size: 0.63rem; letter-spacing: 0.02em; }
  .utility-bar__dre,
  .utility-bar__dot,
  .utility-bar__area { display: none; }
  .utility-bar__role { color: rgba(255,255,255,0.62); font-weight: 600; }
  .utility-bar__phone { font-size: 0.86rem; min-height: 44px; }
}
@media (max-width: 400px) {
  .utility-bar__cred  { font-size: 0.58rem; }
  .utility-bar__phone { font-size: 0.8rem; }
}

/* The mark was being cropped through the horse's head — the earlier slice
   took a fixed 26% of the lockup instead of finding the actual gutter between
   badge and wordmark (which is at 279/1188). Re-cut, it is a complete circular
   badge and can carry a little more size without looking like an afterthought. */
.brand-lockup__mark { height: 42px; top: 0; }
@media (min-width: 600px) and (max-width: 1279px) { .brand-lockup__mark { height: 38px; } }
@media (max-width: 599px) { .brand-lockup__mark { height: 34px; } }
.brand-lockup__rule { height: 34px; }
@media (max-width: 599px) { .brand-lockup__rule { height: 28px; } }

/* Phone: the full "Owner & Broker, Triple Crown Real Estate" wrapped to two
   lines and made the strip 52px of untidy text. The brokerage name is already
   carried by the mark in the header directly below, so the strip keeps only
   the distinctive half. */
@media (max-width: 719px) {
  .utility-bar__of { display: none; }
  .utility-bar__cred { white-space: nowrap; font-size: 0.68rem; }
  .utility-bar__inner { flex-wrap: nowrap; }
}
/* The tagline ran into MENU on narrow phones. Shrink it slightly and let the
   brand block flex rather than push. */
@media (max-width: 430px) {
  .site-brand__name    { font-size: 1.05rem; }
  .site-brand__tagline { font-size: 0.66rem; letter-spacing: 0.12em; }
}
@media (max-width: 979px) {
  .brand-lockup { min-width: 0; flex: 1 1 auto; }
  .site-brand   { min-width: 0; }
  .site-brand__name, .site-brand__tagline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-toggle { flex: none; margin-left: 0.75rem; }
}