/* ==========================================================================
   ISB / Phil Maisano — "Estate" design system
   Ground: cream. Ink: navy. Gilding: gold, hairline duty only.
   Rules that never bend: no border-radius, no drop shadows, no raw gold text
   on cream, no gradients except the navy band and the gold glow on dark.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */
:root {
  /* 60 — ground */
  --cream:        #E4E2D1;
  --cream-press:  #dcdac6;
  --cream-deep:   #d7d5c2;

  /* 30 — ink and dark bands */
  --navy:         #1F2F3C;
  --navy-deep:    #16232d;
  --slate:        #304251;

  /* 10 — accent, hairlines and CTAs only */
  --gold:         #D4C178;   /* on dark only */
  --gold-line:    #b09b4f;   /* rules and ticks on cream */
  --gold-text:    #8a7a3d;   /* type and links on cream */

  /* derived, on-dark text ramps */
  --on-dark:      rgba(228,226,209,1);
  --on-dark-body: rgba(228,226,209,.72);
  --on-dark-mute: rgba(228,226,209,.55);
  --on-dark-line: rgba(212,193,120,.25);

  /* derived, on-cream ramps */
  --on-cream-body: #304251;
  --hairline:      rgba(31,47,60,.25);
  --hairline-soft: rgba(31,47,60,.14);

  /* type */
  --display: 'Marcellus', 'Hoefler Text', 'Times New Roman', serif;
  --body:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* rhythm — one scale, used everywhere */
  --s1: 8px;  --s2: 14px; --s3: 22px; --s4: 32px;
  --s5: 48px; --s6: 72px; --s7: 104px;

  --gutter: 20px;
  --measure: 1280px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (min-width: 700px)  { :root { --gutter: 40px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }

/* --- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* the nav is sticky, so an anchor without this lands underneath it */
  scroll-padding-top: 100px;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

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

/* --- focus: visible on both grounds ------------------------------------- */
:focus-visible {
  outline: 2px solid var(--gold-line);
  outline-offset: 3px;
}
.on-dark :focus-visible { outline-color: var(--gold); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: var(--cream);
  padding: 14px 20px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* --- links -------------------------------------------------------------- */
a { color: var(--gold-text); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
.on-dark a { color: var(--gold); }
.on-dark a:hover { color: var(--cream); }
::selection { background: var(--gold); color: var(--navy); }

/* ==========================================================================
   BANDS — the 60/30/10 is enforced by page rhythm. Default band is cream;
   roughly every third band is navy.
   ========================================================================== */
.band { padding: var(--s6) 0; }
.band--tight { padding: var(--s5) 0; }
.band--navy  { background: var(--navy);      color: var(--on-dark); }
.band--slate { background: var(--slate);     color: var(--on-dark); }
.band--deep  { background: var(--navy-deep); color: var(--on-dark); }
.band--gradient {
  background: linear-gradient(160deg, var(--navy-deep), var(--navy) 60%, var(--slate));
  color: var(--on-dark);
  border-top: 4px solid var(--gold);
}
.band--rule { border-top: 1px solid var(--hairline-soft); }

.wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 820px; }

/* the striped caution motif — band seams only, never decoration */
.seam {
  height: 5px;
  background: repeating-linear-gradient(45deg, var(--gold) 0 14px, var(--navy) 14px 28px);
  opacity: .65;
}

/* ==========================================================================
   TYPE
   ========================================================================== */
.kicker {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-text);
}
.kicker::before {
  content: ""; display: block; width: 44px; height: 1px;
  background: var(--gold-line); flex: none;
}
.on-dark .kicker { color: var(--gold); }
.on-dark .kicker::before { background: var(--gold); }

.label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-text);
}
.on-dark .label { color: var(--gold); }

h1, .h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(34px, 6.2vw, 60px); line-height: 1.08;
  letter-spacing: -.005em;
}
h2, .h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(28px, 4.4vw, 44px); line-height: 1.14;
}
h3, .h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(19px, 2.2vw, 23px); line-height: 1.3;
}
.lede {
  font-size: clamp(16px, 1.6vw, 17px); line-height: 1.65;
  color: var(--on-cream-body); max-width: 52ch;
}
.on-dark .lede { color: var(--on-dark-body); }
.prose p { margin: 0 0 var(--s3); max-width: 68ch; }
.prose p:last-child { margin-bottom: 0; }

/* gold marker highlight — hero key phrase only */
.marker {
  background: linear-gradient(rgba(212,193,120,0) 66%, rgba(212,193,120,.55) 66%);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* ghost display type behind a heading */
.ghosted { position: relative; }
.ghosted > .ghost {
  position: absolute; left: -4px; top: -.52em;
  font-family: var(--display); font-size: clamp(56px, 9vw, 118px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(31,47,60,.09);
  white-space: nowrap; pointer-events: none; user-select: none;
}
.on-dark .ghosted > .ghost { -webkit-text-stroke-color: rgba(212,193,120,.13); }
.ghosted > :not(.ghost) { position: relative; }
/* the ghost is decoration; below 700px it crowds the heading, so it goes */
@media (max-width: 699px) { .ghosted > .ghost { display: none; } }

/* section head: heading left, monospace tag right */
.head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--s2) var(--s3);
  margin-bottom: var(--s3);
}
.head__note { font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-text); }
.on-dark .head__note { color: var(--gold); }
.head + .lede { margin-bottom: var(--s5); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-block; text-decoration: none; text-align: center;
  padding: 17px 32px; min-height: 48px;
  font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid transparent; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn--primary { background: var(--navy); color: var(--cream); }
.btn--primary:hover { background: var(--slate); color: var(--cream); transform: translateY(-2px); }

.btn--ghost { border-color: var(--navy); color: var(--navy); background: transparent; font-weight: 500; }
.btn--ghost:hover { background: rgba(31,47,60,.06); color: var(--navy); }

.on-dark .btn--primary { background: var(--gold); color: var(--navy); }
.on-dark .btn--primary:hover { background: var(--cream); color: var(--navy); }
.on-dark .btn--ghost { border-color: rgba(212,193,120,.6); color: var(--on-dark); }
.on-dark .btn--ghost:hover { border-color: var(--gold); background: rgba(212,193,120,.08); color: var(--on-dark); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ==========================================================================
   CARD GRID — hairline rules drawn by 1px gaps over a rule-coloured bed
   ========================================================================== */
.grid { display: grid; gap: var(--s4); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 950px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

.ruled {
  display: grid; gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .ruled { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px) { .ruled--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.on-dark .ruled { background: var(--on-dark-line); border-color: var(--on-dark-line); }

.cell {
  position: relative; overflow: hidden;
  background: var(--cream);
  padding: var(--s4) var(--s3) var(--s4);
  transition: background .3s var(--ease);
}
.on-dark .cell { background: var(--navy); }
a.cell { text-decoration: none; color: var(--navy); display: block; }
a.cell:hover { background: var(--cream-press); color: var(--navy); }
.on-dark a.cell { color: var(--on-dark); }
.on-dark a.cell:hover { background: var(--slate); }
.cell h3 { margin-bottom: var(--s1); }
.cell p { font-size: 14px; line-height: 1.6; color: var(--on-cream-body); }
.on-dark .cell p { color: var(--on-dark-body); }

/* oversized outlined numeral, top-right of a cell */
.cell__num {
  position: absolute; top: -.14em; right: 12px;
  font-family: var(--display); font-size: clamp(72px, 11vw, 110px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(176,155,79,.45);
  pointer-events: none; user-select: none;
}
.on-dark .cell__num { -webkit-text-stroke-color: rgba(212,193,120,.5); }

/* L-shaped registration marks — service cells */
.cell--ticks::before, .cell--ticks::after {
  content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none;
}
.cell--ticks::before { top: 12px; left: 12px;
  border-top: 1px solid var(--gold-line); border-left: 1px solid var(--gold-line); }
.cell--ticks::after { bottom: 12px; right: 12px;
  border-bottom: 1px solid var(--gold-line); border-right: 1px solid var(--gold-line); }

/* ==========================================================================
   STATS
   ========================================================================== */
.stat { border-top: 2px solid var(--gold); padding-top: var(--s3); }
.stat__n {
  font-family: var(--display); font-size: clamp(40px, 6vw, 76px);
  line-height: 1; letter-spacing: -.01em; color: var(--gold);
}
.stat__k {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  margin-top: var(--s1); color: var(--on-dark-mute);
}
.band:not(.on-dark) .stat { border-top-color: var(--gold-line); }
.band:not(.on-dark) .stat__n { color: var(--navy); }
.band:not(.on-dark) .stat__k { color: var(--on-cream-body); }

/* ==========================================================================
   FIGURE TAG + IMAGE FRAMES
   ========================================================================== */
.figtag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--navy); background: rgba(228,226,209,.92);
  padding: 8px 14px; border: 1px solid var(--gold-line);
}
.frame { position: relative; }
.frame__offset {
  position: absolute; inset: 0; transform: translate(10px, 10px);
  border: 1px solid var(--gold); pointer-events: none;
}
.frame__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.frame:has(.frame__img) { aspect-ratio: 3 / 4; }
.placeholder {
  display: grid; place-items: center; height: 100%; min-height: 260px;
  background: var(--cream-deep);
  background-image:
    repeating-linear-gradient(90deg, rgba(31,47,60,.05) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(0deg,  rgba(31,47,60,.05) 0 1px, transparent 1px 60px);
  color: var(--gold-text); font-family: var(--mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; text-align: center; padding: var(--s3);
}

/* surveyor's grid, used behind the hero copy */
.plot {
  background-image:
    repeating-linear-gradient(90deg, rgba(31,47,60,.05)  0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg,  rgba(31,47,60,.035) 0 1px, transparent 1px 120px);
}

/* ==========================================================================
   MARQUEES
   ========================================================================== */
.marquee { overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee--slow .marquee__track { animation-duration: 45s; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.ticker { background: var(--navy); position: relative; padding: 16px 0; }
.ticker__item {
  display: flex; align-items: center; gap: 26px; padding-right: 26px; white-space: nowrap;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-body);
}
.ticker__dot { color: var(--gold); font-size: 10px; }

.bigtype {
  font-family: var(--display); font-size: clamp(64px, 13vw, 130px); line-height: 1;
  white-space: nowrap; color: transparent;
  -webkit-text-stroke: 1px rgba(31,47,60,.25);
}

/* ==========================================================================
   MOTION — scroll reveal
   ========================================================================== */
[data-reveal] { opacity: 0; transform: translateY(30px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-in:nth-child(3n+2) { transition-delay: .12s; }
[data-reveal].is-in:nth-child(3n+3) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}
.no-js [data-reveal] { opacity: 1; transform: none; }

@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.coord {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--gold-text);
}
.coord::before {
  content: ""; width: 8px; height: 8px; flex: none;
  background: var(--gold-line); animation: blink 2.4s ease infinite;
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(228,226,209,.95);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(31,47,60,.2);
}
.nav__bar {
  display: flex; align-items: center; gap: var(--s3);
  padding: 12px var(--gutter);
  max-width: 1440px; margin: 0 auto;
}
.nav__brand { display: flex; align-items: center; gap: 16px; margin-right: auto; text-decoration: none; min-width: 0; flex: 0 1 auto; }
.nav__brand img { height: 44px; width: auto; flex: 0 0 auto; }
@media (min-width: 900px) { .nav__brand img { height: 60px; } }
.nav__rule { width: 1px; height: 34px; background: rgba(31,47,60,.3); display: none; }
.nav__name {
  font-family: var(--display); font-size: clamp(17px, 2vw, 24px); line-height: 1;
  color: var(--navy); white-space: nowrap;
}
@media (min-width: 560px) { .nav__rule { display: block; } }

.nav__links { display: none; align-items: center; gap: var(--s3); }
/* Raised from 1060px on 2026-08-29. At a 1060px viewport the brand wordmark
   overlapped the first nav link by 42px even with six links, before Guides
   existed; with seven it overlapped by 126px. Measured in a browser, not
   estimated. Below this width the drawer carries the full menu. */
@media (min-width: 1260px) { .nav__links { display: flex; } }
.nav__links a {
  text-decoration: none; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate); padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.nav__links a:hover { color: var(--navy); }
.nav__links a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--gold-line); }
/* .nav__links a (0,2,0) outranks .btn--primary (0,1,0), so the button colour
   has to be restated here or the CTA renders in link slate. */
.nav__links .btn { border-bottom: 0; padding: 12px 20px; font-size: 12px; white-space: nowrap; min-height: 0; }
.nav__links a.btn--primary { color: var(--cream); }
.nav__links a.btn--primary:hover { color: var(--cream); }

.nav__toggle {
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: 1px solid var(--navy); color: var(--navy);
  padding: 11px 16px; min-height: 44px; cursor: pointer;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
@media (min-width: 1260px) { .nav__toggle { display: none; } }

.nav__drawer { display: none; border-top: 1px solid rgba(31,47,60,.2); padding: var(--s2) var(--gutter) var(--s4); }
.nav__drawer[data-open="true"] { display: block; }
@media (min-width: 1260px) { .nav__drawer { display: none !important; } }
.nav__drawer a {
  display: block; text-decoration: none; color: var(--navy);
  font-size: 15px; letter-spacing: .12em; text-transform: uppercase;
  padding: 15px 0; border-bottom: 1px solid var(--hairline-soft);
}
.nav__drawer .btn { display: block; margin-top: var(--s3); border-bottom: 0; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; display: grid; grid-template-columns: 1fr; background: var(--cream); }
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.05fr 1fr; min-height: 84vh; }
}
.hero__copy { position: relative; display: flex; align-items: center; }
.hero__inner { position: relative; padding: var(--s6) var(--gutter); width: 100%; }
.hero__grid { position: absolute; inset: 0; }
.hero h1 { max-width: 18ch; margin: var(--s1) 0 var(--s3); }
.hero .lede { margin-bottom: var(--s4); }
.hero .coord { margin-top: var(--s5); }
.hero__media { position: relative; min-height: 320px; }
@media (min-width: 900px) { .hero__media { min-height: 0; } }
.hero__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hero__bleed {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, var(--cream), transparent 24%);
}
@media (min-width: 900px) {
  .hero__bleed { background: linear-gradient(90deg, var(--cream), transparent 30%); }
}
.hero__figtag { position: absolute; top: 20px; right: 20px; }

/* ==========================================================================
   FORMS
   ========================================================================== */
.field { display: block; margin-bottom: var(--s3); }
.field__label {
  display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate); margin-bottom: 8px;
}
.on-dark .field__label { color: var(--on-dark-mute); }
.field__req { color: var(--gold-text); }
.on-dark .field__req { color: var(--gold); }
.field__hint { font-size: 13px; color: var(--slate); margin-top: 7px; }
.on-dark .field__hint { color: var(--on-dark-mute); }

.input {
  display: block; width: 100%; min-height: 50px;
  background: rgba(31,47,60,.04);
  border: 1px solid rgba(31,47,60,.45);
  color: var(--navy); padding: 14px 16px; font-size: 16px;
  font-family: var(--body); outline: none;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.input:focus { border-color: var(--navy); background: rgba(31,47,60,.07); }
.input::placeholder { color: rgba(31,47,60,.45); }
select.input { appearance: none; background-image: none; }
textarea.input { min-height: 130px; resize: vertical; line-height: 1.6; }

.on-dark .input {
  background: rgba(228,226,209,.06); border-color: rgba(212,193,120,.4); color: var(--on-dark);
}
.on-dark .input:focus { border-color: var(--gold); background: rgba(228,226,209,.1); }
.on-dark .input::placeholder { color: rgba(228,226,209,.4); }

.field--error .input { border-color: #a63e33; }
.on-dark .field--error .input { border-color: #e08c80; }
.field__error {
  display: none; font-size: 13px; margin-top: 7px; color: #a63e33;
}
.on-dark .field__error { color: #e08c80; }
.field--error .field__error { display: block; }

.form-note { font-size: 13px; line-height: 1.6; color: var(--slate); }
.on-dark .form-note { color: var(--on-dark-mute); }

/* ==========================================================================
   WITHHELD — the signature. Non-public comp data, shown as withheld rather
   than faked. Real numbers stay behind a conversation.
   ========================================================================== */
.sheet { width: 100%; border-collapse: collapse; font-size: 14px; }
.sheet th, .sheet td { text-align: left; padding: 15px 14px; border-bottom: 1px solid var(--on-dark-line); }
.sheet th {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); font-weight: 400; border-bottom-color: var(--gold);
}
.sheet td { color: var(--on-dark-body); }
.sheet td:first-child { color: var(--on-dark); }
.withheld {
  display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--gold); background: repeating-linear-gradient(45deg,
    rgba(212,193,120,.16) 0 6px, rgba(212,193,120,.05) 6px 12px);
  border: 1px solid rgba(212,193,120,.45); padding: 4px 10px; white-space: nowrap;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: var(--s3) 0; min-height: 56px;
  font-family: var(--display); font-size: clamp(17px, 2.1vw, 21px); line-height: 1.35; color: var(--navy);
}
.faq__q:hover { color: var(--slate); }
.faq__sign { font-family: var(--mono); font-size: 20px; color: var(--gold-line); flex: none; line-height: 1.3; }
.faq__q[aria-expanded="true"] .faq__sign { color: var(--navy); }
.faq__a { display: none; padding: 0 0 var(--s3); }
.faq__a p { font-size: 15px; line-height: 1.7; color: var(--on-cream-body); max-width: 74ch; margin: 0 0 var(--s2); }
.faq__a p:last-child { margin-bottom: 0; }
.faq__item[data-open="true"] .faq__a { display: block; }
.no-js .faq__a { display: block; }

/* ==========================================================================
   LISTING CARD — address left, price right, stacked on a phone.
   The .head flex wraps unpredictably once an address runs long, so listings
   get their own two column head rather than borrowing that one.
   ========================================================================== */
.lhead { display: grid; gap: var(--s3); margin-bottom: var(--s4); }
@media (min-width: 820px) {
  .lhead { grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: var(--s5); }
  .lhead__price { text-align: right; }
}
.lhead__price .stat__n { display: block; font-size: clamp(26px, 3.2vw, 38px); }

/* highlight list. A gold rule per line, the same mark the kicker uses. */
.hilite { display: grid; gap: 10px; margin-top: var(--s4); }
.hilite li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s2); align-items: start;
  font-size: 15px; line-height: 1.65; color: var(--on-cream-body); }
.hilite li::before { content: ""; display: block; width: 22px; height: 1px; margin-top: 13px;
  background: var(--gold-line); }
.on-dark .hilite li { color: var(--on-dark-body); }
.on-dark .hilite li::before { background: var(--gold); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot { background: var(--navy-deep); color: var(--on-dark); }
.foot__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s5);
  padding: var(--s6) 0 var(--s5);
}
@media (min-width: 700px)  { .foot__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1050px) { .foot__grid { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.2fr); } }
.foot__h {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: var(--s3);
}
.foot__list { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.foot__list a { text-decoration: none; color: var(--on-dark-body); }
.foot__list a:hover { color: var(--gold); }
.foot p { font-size: 13px; line-height: 1.7; color: var(--on-dark-mute); }
.foot__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s3); }
.foot__chips a {
  text-decoration: none; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid rgba(212,193,120,.4); padding: 10px 14px; color: var(--gold);
}
.foot__chips a:hover { border-color: var(--gold); background: rgba(212,193,120,.08); }
.foot__base {
  border-top: 1px solid rgba(212,193,120,.15);
  padding: var(--s3) 0; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 12px;
  font-size: 12px; letter-spacing: .06em; color: rgba(228,226,209,.45);
}

/* ==========================================================================
   NUMBERED ADVANTAGE ROWS
   ========================================================================== */
.adv {
  display: grid; grid-template-columns: 1fr; gap: 0 var(--s6);
  border-top: 1px solid var(--on-dark-line);
}
@media (min-width: 900px) { .adv { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.adv__row {
  display: grid; grid-template-columns: 64px 1fr; gap: var(--s3);
  padding: var(--s4) 0; border-bottom: 1px solid rgba(212,193,120,.2);
}
@media (min-width: 900px) { .adv__row { grid-template-columns: 96px 1fr; gap: 26px; } }
.adv__n {
  font-family: var(--display); font-size: clamp(48px, 7vw, 76px); line-height: .9;
  color: transparent; -webkit-text-stroke: 1px rgba(212,193,120,.6);
}
.adv__row h3 { margin-bottom: var(--s1); }
.adv__row p { font-size: 14px; line-height: 1.65; color: var(--on-dark-body); }

/* ==========================================================================
   QUOTES
   ========================================================================== */
.quote {
  display: flex; flex-direction: column; gap: var(--s2);
  border-top: 2px solid var(--navy); padding-top: var(--s3); margin: 0;
}
.quote__mark { font-family: var(--display); font-size: 84px; line-height: .55; color: var(--gold-line); }
.quote blockquote { margin: 0; }
.quote blockquote p { font-size: 15px; line-height: 1.7; color: var(--on-cream-body); margin: 0; }
.quote figcaption { margin-top: auto; padding-top: var(--s2); }
.quote__who { display: block; font-family: var(--display); font-size: 17px; }
.quote__role {
  display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-text); margin-top: 4px;
}

/* ==========================================================================
   REPORT CARDS / MARKET CARDS
   ========================================================================== */
.report {
  display: flex; flex-direction: column; gap: var(--s2);
  text-decoration: none; color: var(--on-dark);
  border: 1px solid rgba(212,193,120,.3); padding: var(--s4) var(--s3);
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.report:hover { border-color: var(--gold); background: rgba(212,193,120,.05); color: var(--on-dark); transform: translateY(-4px); }
.report__t { font-family: var(--display); font-size: clamp(19px, 2.1vw, 22px); line-height: 1.3; }
.report__m { font-size: 13px; color: var(--on-dark-mute); margin-top: auto; padding-top: var(--s1); }

.market {
  display: block; text-decoration: none; color: var(--navy);
  border-top: 2px solid var(--gold-line); padding-top: var(--s3);
  transition: border-color .3s var(--ease);
}
.market:hover { border-top-color: var(--navy); color: var(--navy); }
.market__t { display: block; font-family: var(--display); font-size: 20px; margin-bottom: 6px; }
.market__s { display: block; font-size: 13px; color: var(--on-cream-body); }
/* --on-cream-body is the same value as --slate, so on a slate band the region
   label sat at contrast 1.00 and was invisible. Measured in Chrome 2026-08-30
   on the Markets next door band. */
.on-dark .market__s { color: var(--on-dark-body); }
.on-dark .market:hover { border-top-color: var(--gold); }
.on-dark .market:hover .market__s { color: var(--on-dark); }

/* The six asset guide links under What we broker and What we trade. Set as a
   row of doors rather than a run of underlined body copy, because six links
   separated only by spaces read as one blob. */
.assetguides {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s1) var(--s2); margin-top: var(--s5);
}
.assetguides > strong {
  flex: 0 0 auto; font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-text); font-weight: 600; margin-right: var(--s1);
}
.assetguides a {
  display: inline-block; text-decoration: none; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--navy);
  border: 1px solid var(--gold-line); padding: 10px 15px;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.assetguides a:hover, .assetguides a:focus-visible {
  background: var(--navy); border-color: var(--navy); color: var(--cream);
}
@media (max-width: 480px) { .assetguides a { white-space: normal; } }

/* ==========================================================================
   PROFILE / SPLIT / NEWSLETTER
   ========================================================================== */
.profile { display: grid; grid-template-columns: 1fr; gap: var(--s5); align-items: center; }
@media (min-width: 860px) { .profile { grid-template-columns: 300px 1fr; gap: var(--s6); } }
.profile .frame { max-width: 360px; }

.split { display: grid; grid-template-columns: 1fr; gap: var(--s4); align-items: center; }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s6); } }

.nl { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 520px) { .nl { grid-template-columns: 1fr auto; } }
.nl .btn { white-space: nowrap; }

/* ==========================================================================
   THE ASK — valuation page. Copy left, form right and visible on first paint.
   ========================================================================== */
.ask { display: grid; grid-template-columns: 1fr; gap: var(--s5); }
@media (min-width: 1000px) {
  .ask { grid-template-columns: minmax(0,1fr) minmax(400px, 460px); gap: var(--s6); align-items: start; }
  .ask__form { position: sticky; top: 104px; }
}
/* on a phone the form comes first — nobody scrolls a sales pitch to find it */
@media (max-width: 999px) {
  .ask__form { order: -1; }
}

.ticks { margin-top: var(--s4); display: grid; gap: 12px; }
.ticks li {
  position: relative; padding-left: 30px; font-size: 15px; color: var(--on-cream-body);
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 14px; height: 7px; border-left: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line); transform: rotate(-45deg);
}

.deliver { margin-top: var(--s5); border-top: 1px solid var(--hairline); padding-top: var(--s4); }
.deliver__list { margin-top: var(--s3); display: grid; gap: var(--s3); }
.deliver__list li { display: grid; grid-template-columns: 46px 1fr; gap: var(--s2); align-items: start; }
.deliver__n {
  font-family: var(--display); font-size: 30px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(176,155,79,.7);
}
.deliver__list strong { display: block; font-weight: 600; font-size: 15px; }
.deliver__list span { display: block; font-size: 14px; line-height: 1.6; color: var(--on-cream-body); margin-top: 3px; }

/* ==========================================================================
   FORM CARD
   ========================================================================== */
.formcard {
  background: var(--navy); color: var(--on-dark);
  border-top: 4px solid var(--gold);
  padding: var(--s4) var(--s3) var(--s4);
}
@media (min-width: 560px) { .formcard { padding: var(--s5) var(--s4); } }
.formcard .label, .formcard .field__label { color: var(--gold); }
.formcard .field__label { color: var(--on-dark-mute); }
.formcard h2 { font-family: var(--display); font-weight: 400; }
.formcard .form-note { color: var(--on-dark-mute); }
.formcard .form-note a { color: var(--gold); }
.formcard__head { margin-bottom: var(--s4); }

.formcard .input {
  background: rgba(228,226,209,.06); border-color: rgba(212,193,120,.4); color: var(--on-dark);
}
.formcard .input:focus { border-color: var(--gold); background: rgba(228,226,209,.1); }
.formcard .input::placeholder { color: rgba(228,226,209,.4); }
.formcard select.input option { background: var(--navy); color: var(--on-dark); }
.formcard :focus-visible { outline-color: var(--gold); }
.formcard .field__req { color: var(--gold); }
.formcard .field__hint { color: var(--on-dark-mute); }
.formcard .field__error { color: #e8a196; }
.formcard .field--error .input { border-color: #e8a196; }

.vform__row { display: grid; grid-template-columns: 1fr; gap: 0 var(--s2); }
@media (min-width: 460px) {
  .vform__row { grid-template-columns: 1fr 1fr; }
  .vform__row--3 { grid-template-columns: 2fr .8fr 1fr; }
}
.vform__submit { width: 100%; background: var(--gold); color: var(--navy); margin-top: var(--s2); }
.vform__submit:hover { background: var(--cream); color: var(--navy); }
.vform__submit[disabled] { opacity: .55; cursor: progress; transform: none; }

#form-error { margin-top: 0; }
#form-error:empty { display: none; }

.formcard__done p { color: var(--on-dark-body); font-size: 15px; line-height: 1.7; }
.formcard__done a { color: var(--gold); }

/* --- utilities ---------------------------------------------------------- */
.stack > * + * { margin-top: var(--s3); }
.center { text-align: center; }
.center .lede, .center .btn-row { margin-left: auto; margin-right: auto; }
.center .btn-row { justify-content: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   CLOSED DEALS
   No counts anywhere on this page and every card the same size. Both are
   Phil's instruction, 2026-08-29. Do not put a tally or a feature card back.
   ========================================================================== */

/* --- the record hero: an aerial, a scrim, the copy over it --------------- */
.rechero {
  position: relative; background: var(--navy-deep);
  display: grid; align-items: end; isolation: isolate;
  min-height: clamp(420px, 62vh, 660px);
  overflow: hidden;
}
.rechero__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
}
.rechero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(22,35,45,.97) 12%, rgba(22,35,45,.74) 52%, rgba(22,35,45,.38) 100%),
    linear-gradient(to right, rgba(22,35,45,.86) 0%, rgba(22,35,45,.10) 72%);
}
/* the surveyor's grid, laid over the photograph rather than under the copy */
.rechero__grid {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(212,193,120,.10) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg,  rgba(212,193,120,.07) 0 1px, transparent 1px 120px);
}
.rechero__copy { position: relative; z-index: 3; padding-top: var(--s7); padding-bottom: var(--s5); }
.rechero__copy .kicker { color: var(--gold); }
.rechero__copy .kicker::before { background: var(--gold); }
.rechero__copy .lede { color: var(--on-dark-body); max-width: 52ch; margin-top: var(--s3); }
.rechero__copy .coord { color: var(--on-dark-mute); margin-top: var(--s4); }
.rechero__copy .coord::before { background: var(--gold); }
.rechero__h {
  font-size: clamp(52px, 11vw, 132px); line-height: .92; letter-spacing: -.02em;
  color: var(--on-dark); margin-top: var(--s2); text-wrap: balance;
}
.rechero__h2 { color: var(--gold); }
.rechero--short { min-height: clamp(320px, 46vh, 460px); }

/* --- what he sells, and the way into each section ----------------------- */
.classnav { display: grid; gap: 1px; background: var(--on-dark-line);
  border: 1px solid var(--on-dark-line); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 700px)  { .classnav { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1040px) { .classnav { grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); } }
.classnav a {
  display: flex; align-items: center; min-height: 92px;
  background: var(--navy); padding: var(--s3); text-decoration: none;
  font-family: var(--display); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.15;
  color: var(--on-dark); text-wrap: balance;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.classnav a:hover { background: var(--slate); color: var(--gold); }

/* --- a class heading ---------------------------------------------------- */
.classhead {
  padding-bottom: var(--s3); margin-bottom: var(--s4);
  border-bottom: 2px solid var(--gold-line);
}

/* --- the deal cards, every one the same size --------------------------- *
 * Each card draws its own four borders and pulls a pixel back so adjacent
 * borders collapse. A row holding one card closes itself properly, which the
 * old gap-over-a-coloured-bed grid could not do.                            */
.deals { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 600px) { .deals { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px) { .deals { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.plate {
  background: var(--cream); display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--hairline); margin: 0 -1px -1px 0;
}
.plate__media { position: relative; aspect-ratio: 3 / 2; background: var(--cream-deep); overflow: hidden; }
.plate__media img { width: 100%; height: 100%; object-fit: cover; }
.plate__media .placeholder { min-height: 0; }
.plate__tag { position: absolute; top: 12px; left: 12px; }
.plate__body { padding: var(--s3); display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.plate h3 {
  font-size: clamp(20px, 2.3vw, 26px); line-height: 1.15; margin-top: 10px;
  text-wrap: balance; overflow-wrap: anywhere;
  /* two lines, always. Short names pad, long names clamp. */
  min-height: 2.3em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.plate__addr {
  font-family: var(--mono); font-size: 11px; line-height: 1.55; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-text); overflow-wrap: anywhere;
}
.plate__sum {
  margin-top: var(--s2); font-size: 14px; line-height: 1.6; color: var(--on-cream-body);
  min-height: 4.8em;                       /* three lines */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.plate__facts {
  margin: var(--s3) 0 0; padding-top: var(--s3); flex: 0 0 auto;
  border-top: 1px solid var(--hairline-soft);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2) var(--s3);
}
.plate__sum + .plate__facts { margin-top: auto; }
.plate__facts > div { min-width: 0; }
.plate__facts dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-text);
}
.plate__facts dd {
  margin: 5px 0 0; font-size: 14px; line-height: 1.4; font-variant-numeric: tabular-nums;
  min-height: 2.8em; overflow-wrap: anywhere;   /* two lines, so the row never jumps */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* dark bands. Without these a card keeps its cream ground while inheriting the
   band's light text, and the deal names disappear. */
.on-dark .plate { background: var(--navy); color: var(--on-dark); border-color: var(--on-dark-line); }
.on-dark .plate__addr { color: var(--gold); }
.on-dark .plate__sum { color: var(--on-dark-body); }
.on-dark .plate__facts { border-top-color: var(--on-dark-line); }
.on-dark .plate__facts dt { color: var(--gold); }
.on-dark .plate__media { background: var(--navy-deep); }
.on-dark .plate__media .placeholder {
  background: var(--navy-deep); color: var(--gold);
  background-image:
    repeating-linear-gradient(90deg, rgba(212,193,120,.09) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(0deg,  rgba(212,193,120,.09) 0 1px, transparent 1px 60px);
}

/* ==========================================================================
   LISTINGS: copy on the left, a spec card on the right
   The page used to be one column of prose with the whole right half empty and
   the price floating loose under it.
   ========================================================================== */
.rechero--short { min-height: clamp(320px, 46vh, 460px); }

.listing { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 940px) {
  .listing { grid-template-columns: minmax(0,1.5fr) minmax(320px,1fr); gap: var(--s6); }
}
.listing__copy { min-width: 0; }
.listing__copy h2 { margin-top: 10px; }
.listing__copy .kicker { margin-top: 14px; }
.listing__copy .hilite { margin-top: var(--s4); }

.spec {
  background: var(--navy); color: var(--on-dark);
  padding: var(--s4); align-self: start; min-width: 0;
  border-top: 2px solid var(--gold);
}
.band--slate .spec { background: var(--navy-deep); }
.spec__price {
  font-family: var(--display); font-size: clamp(28px, 3.2vw, 42px); line-height: 1.05;
  color: var(--gold); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.spec__note {
  font-family: var(--mono); font-size: 10px; line-height: 1.6; letter-spacing: .16em;
  text-transform: uppercase; color: var(--on-dark-mute); margin-top: 10px;
}
.spec__rows { margin-top: var(--s4); border-top: 1px solid var(--on-dark-line); }
.spec__row {
  display: flex; align-items: baseline; gap: 10px;
  padding: var(--s2) 0; border-bottom: 1px solid var(--on-dark-line);
}
.spec__row b {
  font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1;
  color: var(--on-dark); font-variant-numeric: tabular-nums;
}
.spec__row i {
  font-style: normal; font-family: var(--mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-body);
}
.spec__facts { margin: var(--s4) 0 0; display: grid; gap: var(--s3); }
.spec__facts dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold);
}
.spec__facts dd { margin: 5px 0 0; font-size: 15px; color: var(--on-dark); }
.spec .btn-row { flex-direction: column; }
.spec .btn { width: 100%; }
.spec .btn--primary { background: var(--gold); color: var(--navy); }
.spec .btn--primary:hover { background: var(--cream); color: var(--navy); }
.spec .btn--ghost { border-color: rgba(212,193,120,.55); color: var(--on-dark); }
.spec .btn--ghost:hover { border-color: var(--gold); background: rgba(212,193,120,.08); }
.spec .form-note { color: var(--on-dark-mute); }

/* ==========================================================================
   BREADCRUMB : one hairline row under a hero, on cream or on dark
   ========================================================================== */
.crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-text);
}
.crumb a { color: var(--gold-text); text-decoration: none; border-bottom: 1px solid transparent; }
.crumb a:hover { color: var(--navy); border-bottom-color: var(--gold-line); }
.crumb i { font-style: normal; color: var(--hairline); }
.on-dark .crumb, .on-dark .crumb a { color: var(--gold); }
.on-dark .crumb a:hover { color: var(--cream); border-bottom-color: var(--gold); }
.on-dark .crumb i { color: var(--on-dark-line); }

/* ==========================================================================
   MARKET PAGES
   ========================================================================== */

/* the quarter figures. Every number carries the source that published it. */
.mstat {
  display: grid; gap: 1px; background: var(--on-dark-line);
  border: 1px solid var(--on-dark-line); grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 980px) { .mstat { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.mstat > div { background: var(--navy); padding: var(--s4) var(--s3); min-width: 0; }
.mstat b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 4vw, 44px); line-height: 1; color: var(--gold);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.mstat i {
  display: block; font-style: normal; margin-top: 12px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-body);
}
.mstat s {
  display: block; text-decoration: none; margin-top: 10px;
  font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--on-dark-body);
}

/* submarkets. A name, and the one line that says why it matters. */
.subs {
  display: grid; gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline); grid-template-columns: repeat(1, minmax(0,1fr));
}
@media (min-width: 640px)  { .subs { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1000px) { .subs { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.subs > li { background: var(--cream); padding: var(--s3); min-width: 0; }
.subs b { display: block; font-family: var(--display); font-weight: 400; font-size: 19px; line-height: 1.25; text-wrap: balance; }
.subs span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--on-cream-body); }
.on-dark .subs { background: var(--on-dark-line); border-color: var(--on-dark-line); }
.on-dark .subs > li { background: var(--navy); }
.on-dark .subs span { color: var(--on-dark-body); }

/* the routes. The roads, ports and rail that actually set the value. */
.routes { display: grid; gap: var(--s2); }
.routes li {
  display: grid; grid-template-columns: 122px 1fr; gap: var(--s3);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--hairline-soft);
  font-size: 15px; line-height: 1.6; color: var(--on-cream-body);
}
.routes li b {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-text); padding-top: 4px; font-weight: 400;
}
@media (max-width: 620px) { .routes li { grid-template-columns: 1fr; gap: 4px; } }
.on-dark .routes li { color: var(--on-dark-body); border-bottom-color: var(--on-dark-line); }
.on-dark .routes li b { color: var(--gold); }

/* ==========================================================================
   ARTICLE : reports, and anything long enough to need a rail
   ========================================================================== */
.artcols { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 1040px) {
  .artcols { grid-template-columns: 232px minmax(0, 1fr); gap: var(--s7); align-items: start; }
}

.toc { border-top: 2px solid var(--gold-line); padding-top: var(--s3); }
@media (min-width: 1040px) { .toc { position: sticky; top: 116px; } }
.toc p {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-text); margin-bottom: var(--s2);
}
.toc a {
  display: block; padding: 12px 0; min-height: 44px; font-size: 14px; line-height: 1.4;
  color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--hairline-soft);
}
.toc a:hover { color: var(--gold-text); }

.art { max-width: 70ch; }
.art > * + * { margin-top: var(--s3); }
.art p { font-size: 17px; line-height: 1.75; color: var(--on-cream-body); }
.art h2 {
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid var(--hairline); scroll-margin-top: 116px;
}
.art h2, .art h3 { text-wrap: balance; }
.art h3 { margin-top: var(--s5); }
.art strong { font-weight: 600; color: var(--navy); }
.art ul { display: grid; gap: 12px; }
.art ul li {
  position: relative; padding-left: 38px;
  font-size: 16px; line-height: 1.7; color: var(--on-cream-body);
}
.art ul li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 22px; height: 1px; background: var(--gold-line);
}

.art__meta {
  display: flex; flex-wrap: wrap; gap: 8px var(--s3);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-text);
}
.art__meta i { font-style: normal; color: var(--hairline); }

/* the answer, before the argument. First block on every report. */
.tldr { border: 1px solid var(--gold-line); border-top: 4px solid var(--gold-line); padding: var(--s4); background: var(--cream-deep); }
.tldr > .label { display: block; margin-bottom: var(--s3); color: var(--navy); }
.tldr ol { display: grid; gap: var(--s3); counter-reset: t; }
.tldr ol li {
  counter-increment: t; position: relative; padding-left: 44px;
  font-size: 16px; line-height: 1.65; color: var(--navy);
}
.tldr ol li::before {
  content: counter(t, decimal-leading-zero); position: absolute; left: 0; top: 4px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--navy);
}

/* a figure lifted out of the prose */
.pull { border-left: 2px solid var(--gold-line); padding: var(--s1) 0 var(--s1) var(--s4); }
.pull b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(32px, 5vw, 50px); line-height: 1.05; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.pull span { display: block; margin-top: var(--s2); font-size: 14px; line-height: 1.6; color: var(--on-cream-body); max-width: 48ch; }

/* comparison bars. No library and no script: the width is an inline custom property. */
.bars { display: grid; gap: var(--s4); margin: 0; }
.bars > div { display: grid; gap: 10px; min-width: 0; }
.bars dt {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-text);
}
.bars dd { margin: 0; min-width: 0; }
.bars dd b {
  font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1; font-variant-numeric: tabular-nums; margin-right: var(--s2);
}
.bars dd em { font-style: normal; font-size: 13px; color: var(--on-cream-body); }
/* the track sits under its own label, so every bar shares one width and the
   proportions stay honest however long the caption runs */
.bars dd i {
  display: block; height: 13px; width: var(--v, 50%); max-width: 100%;
  margin-top: 12px; background: var(--navy);
}
.on-dark .bars dt { color: var(--gold); }
.on-dark .bars dd i { background: var(--gold); }
.on-dark .bars dd em { color: var(--on-dark-body); }

/* where every number on the page came from */
.srcs { display: grid; gap: var(--s2); counter-reset: s; }
.srcs li {
  counter-increment: s; position: relative; padding-left: 38px;
  font-size: 14px; line-height: 1.6; color: var(--on-cream-body);
}
.srcs li::before {
  content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 3px;
  font-family: var(--mono); font-size: 11px; color: var(--gold-text);
}
.on-dark .srcs li { color: var(--on-dark-body); }

/* the coverage note. Says plainly what Phil is, and is not, in a given market. */
.note {
  border: 1px solid var(--on-dark-line); border-left: 3px solid var(--gold);
  padding: var(--s4); background: rgba(212,193,120,.04);
}
.note > .label { display: block; margin-bottom: var(--s2); }
.note p { font-size: 15px; line-height: 1.7; color: var(--on-dark-body); max-width: 72ch; }
.note p + p { margin-top: var(--s2); }

/* ==========================================================================
   FLORIDA MAP: an inline SVG, no library. Drawn as a surveyor's plate —
   water ground, graticule, gold shoreline, the three interstates the freight
   actually moves on, and an inset that pulls the nine tri-county markets
   apart so each one is its own link. The full market list still sits
   underneath it, so the map is never the only route. Reworked 2026-08-30.
   ========================================================================== */
.famap__wrap { display: grid; gap: var(--s3); justify-items: center; width: 100%; }
.famap__scroll { width: 100%; overflow-x: auto; }
.famap { width: 100%; max-width: 860px; height: auto; margin: 0 auto; }

/* --- the plate ---------------------------------------------------------
   Real geometry, fetched 2026-08-30: the coastline and the Keys come from
   the public Florida GeoJSON, the internal lines are all 67 county
   boundaries clipped to the land, and every pin sits on the market's real
   latitude and longitude. Equirectangular, standard parallel 28 north. */
.famap__sea  { fill: #ccd4d6; stroke: rgba(31,47,60,.32); stroke-width: 1; }
.famap__halo { fill: none; stroke: #7d9aa6; stroke-width: 10; opacity: .30; }
.famap__land {
  fill: #e9e6d6;
  stroke: #6f8791; stroke-width: 1.1; stroke-linejoin: round;
}
/* the three tri-county core counties, tinted so the home market reads */
.famap__core { fill: rgba(176,155,79,.30); stroke: none; }
/* every other county boundary, hairline, clipped to the coast */
.famap__cty  { fill: none; stroke: rgba(31,47,60,.20); stroke-width: .8; }
.famap__cty--ins  { stroke-width: .62; stroke: rgba(31,47,60,.5); }
.famap__land--ins { stroke-width: .62; stroke: #56727d; }
.famap__water {
  font-family: var(--display); font-size: 19px; letter-spacing: .34em;
  fill: #5d7c88; opacity: .75;
}
.on-dark .famap__sea   { fill: #1d2c37; stroke: rgba(212,193,120,.28); }
.on-dark .famap__land  { fill: var(--slate); stroke: var(--gold); }
.on-dark .famap__halo  { stroke: var(--gold); opacity: .18; }
.on-dark .famap__cty   { stroke: rgba(212,193,120,.22); }
.on-dark .famap__water { fill: var(--gold); opacity: .5; }

/* --- interstates, schematic. Real corridors, not a surveyed alignment --- */
.famap__road {
  fill: none; stroke: var(--gold-text); stroke-width: 1.6;
  stroke-dasharray: 7 5; stroke-linecap: round; opacity: .5;
}
.famap__road-t {
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  fill: var(--on-cream-body);
}
/* the I-4 label falls on land, so it gets the land colour behind the type */
.famap__road-t--land {
  paint-order: stroke; stroke: #e8e6d8; stroke-width: 4px; stroke-linejoin: round;
}
.famap__north { fill: var(--gold-text); opacity: .65; }
.on-dark .famap__road { stroke: var(--gold); }
.on-dark .famap__road-t { fill: var(--on-dark-body); }
.on-dark .famap__north { fill: var(--gold); }

/* --- the tri-county bracket, and the inset it points at ---------------- */
.famap__box,
.famap__tie {
  fill: none; stroke: var(--gold-text); stroke-width: 1.2; stroke-dasharray: 5 5; opacity: .9;
}
.famap__lead { fill: none; stroke: var(--gold-text); stroke-width: .9; opacity: .55; }
.famap__pin:hover .famap__lead,
.famap__pin:focus-visible .famap__lead { opacity: 1; stroke-width: 1.4; }
.famap__box-t {
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  fill: var(--on-cream-body);
}
.famap__box-t--dim { font-size: 11px; opacity: .72; }
.on-dark .famap__box { stroke: var(--gold); }
.on-dark .famap__box-t { fill: var(--gold); }

/* the inset is a window on the same map, so it carries the same water and
   the same coast. The label gutter is a translucent slab over it, which is
   what a printed callout does, rather than a blank panel beside it. */
.famap__inset-bg  { fill: #ccd4d6; }
.famap__inset-gut {
  fill: rgba(238,240,234,.72);
  stroke: rgba(31,47,60,.18); stroke-width: 1;
}
.famap__core--ins { fill: rgba(176,155,79,.15); }
.famap__inset-fr {
  fill: none; stroke: var(--gold-text); stroke-width: 1; stroke-dasharray: 5 5; opacity: .85;
}
.famap__inset-h {
  font-family: var(--mono); font-size: 13px; letter-spacing: .18em; fill: var(--navy);
}
.famap__inset-s {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  fill: var(--on-cream-body); opacity: .82;
}
.famap__inset-rule { stroke: var(--gold-line); stroke-width: 1; opacity: .5; }
.on-dark .famap__inset-bg  { fill: var(--navy-deep); }
.on-dark .famap__inset-h   { fill: var(--on-dark); }
.on-dark .famap__inset-s   { fill: var(--on-dark-body); }

/* --- pins -------------------------------------------------------------- */
.famap__pin { cursor: pointer; }
.famap__d {
  fill: var(--navy); stroke: #fbfaf4; stroke-width: 1.8;
  transition: fill .25s var(--ease), r .25s var(--ease), stroke-width .25s var(--ease);
}
.famap__d.is-core   { fill: var(--gold-text); stroke: #fbfaf4; stroke-width: 1.8; }
.famap__d.is-static { pointer-events: none; }
.famap__pin:hover .famap__d,
.famap__pin:focus-visible .famap__d { fill: var(--gold-text); r: 8; stroke-width: 3; }
.famap__pin:hover .famap__d.is-core,
.famap__pin:focus-visible .famap__d.is-core { fill: var(--navy); stroke: var(--gold-line); }
.famap__t {
  font-family: var(--mono); font-size: 14px; letter-spacing: .04em;
  fill: var(--navy); pointer-events: none;
  paint-order: stroke; stroke: rgba(250,249,242,.92);
  stroke-width: 3.5px; stroke-linejoin: round;
}
.famap__t--ins { font-size: 13px; }
.famap__pin:hover .famap__t,
.famap__pin:focus-visible .famap__t { fill: var(--gold-text); }
.famap__pin:focus-visible { outline: none; }
.famap__pin:focus-visible .famap__d { stroke: var(--gold-text); stroke-width: 3.5; }
.on-dark .famap__d { stroke: var(--navy-deep); }
.on-dark .famap__t { fill: var(--on-dark); stroke: rgba(48,66,81,.88); }

/* --- legend and note --------------------------------------------------- */
.famap__key {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s2) var(--s4); margin: 0; padding: 0;
}
.famap__key li {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--on-cream-body);
}
.famap__key-s { width: 14px; height: 14px; flex: 0 0 auto; }
.famap__key-s--wide { width: 22px; }
.on-dark .famap__key li { color: var(--on-dark-body); }

.famap__note {
  font-family: var(--mono); font-size: 11px; line-height: 1.7; letter-spacing: .08em;
  color: var(--on-cream-body); max-width: 76ch; text-align: center;
}

.famap__swipe { display: none; }

/* narrow screens: the plate keeps its type and scrolls sideways inside its
   own box, rather than dropping every label and becoming a field of dots */
@media (max-width: 700px) {
  .famap { min-width: 780px; }
  .famap__wrap { justify-items: stretch; }
  .famap__key { justify-content: flex-start; }
  .famap__note { text-align: left; }
  .famap__swipe {
    display: block; margin: 0;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text);
  }
}

@media (prefers-reduced-motion: reduce) {
  .famap__d { transition: none; }
}

/* ==========================================================================
   HERO, FILM — full bleed aerial footage under a navy scrim, carrying the
   same survey overlay the rest of the site draws in hairlines. The still is
   always painted; isb.js decides whether the video is worth fetching.
   Appended 2026-08-29. Overrides the split hero above it.
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--navy-deep); color: var(--on-dark);
  min-height: 74vh; min-height: 74svh;
}
@media (min-width: 900px) {
  .hero { display: flex; min-height: 82vh; min-height: min(82svh, 800px); }
}

.hero__film { position: absolute; inset: 0; z-index: 0; }
.hero__film picture { display: block; position: absolute; inset: 0; }
.hero__still,
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 46%;
}
.hero__still,
.hero__video { filter: saturate(.74) brightness(.9) contrast(1.04); }
.hero__video { opacity: 0; transition: opacity 1.1s var(--ease); }
.hero__video[data-ready="true"] { opacity: 1; }

.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16,26,34,.72) 0%, rgba(16,26,34,.34) 26%,
                            rgba(16,26,34,.44) 58%, rgba(16,26,34,.92) 100%),
    linear-gradient(90deg,  rgba(16,26,34,.84) 0%, rgba(16,26,34,.52) 40%,
                            rgba(16,26,34,0) 76%);
}

/* the surveyor's grid, masked to the half the type sits on */
.hero__plot {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(212,193,120,.11) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg,  rgba(212,193,120,.08) 0 1px, transparent 1px 120px);
  -webkit-mask-image: linear-gradient(90deg, #000 0 44%, transparent 78%);
          mask-image: linear-gradient(90deg, #000 0 44%, transparent 78%);
}

/* corner registration marks, as on a plan sheet */
.hero__ticks i {
  position: absolute; width: 26px; height: 26px;
  border: 0 solid var(--gold); opacity: .5; pointer-events: none;
}
.hero__ticks i:nth-child(1) { top: 20px;    left: 20px;  border-top-width: 1px;    border-left-width: 1px; }
.hero__ticks i:nth-child(2) { top: 20px;    right: 20px; border-top-width: 1px;    border-right-width: 1px; }
.hero__ticks i:nth-child(3) { bottom: 88px; left: 20px;  border-bottom-width: 1px; border-left-width: 1px; }
.hero__ticks i:nth-child(4) { bottom: 88px; right: 20px; border-bottom-width: 1px; border-right-width: 1px; }

.hero__inner { position: relative; z-index: 1; width: 100%; padding: var(--s7) 0 var(--s6); }
.hero h1 { max-width: 17ch; margin: var(--s2) 0 var(--s3); text-wrap: balance; }
.hero .lede { max-width: 50ch; margin-bottom: var(--s4); }
.hero .coord { margin: 0; }

/* on dark the coordinate readout needs the bright gold, not the cream-ground one */
.on-dark .coord { color: var(--gold); }
.on-dark .coord::before { background: var(--gold); }

.hero__rail {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(212,193,120,.28);
  background: rgba(22,35,45,.55);
  padding: 13px 0;
}
.hero__rail__in {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s2) var(--s3);
}
.hero__rail__r { display: flex; align-items: center; gap: 12px; }

.figtag--film {
  background: transparent; color: var(--gold);
  border-color: rgba(212,193,120,.45);
}

/* pause control. Required: the loop runs longer than five seconds. */
.filmbtn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 16px;
  background: transparent; border: 1px solid rgba(212,193,120,.45);
  color: var(--on-dark);
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer; touch-action: manipulation;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
/* an author display value beats the UA sheet's [hidden] rule, so say it again */
.filmbtn[hidden] { display: none; }
.filmbtn:hover { border-color: var(--gold); background: rgba(212,193,120,.1); }
.filmbtn__g {
  display: block; width: 9px; height: 11px;
  border-left: 3px solid var(--gold); border-right: 3px solid var(--gold);
}
.filmbtn[aria-pressed="true"] .filmbtn__g {
  width: 0; height: 0; border: 0;
  border-left: 9px solid var(--gold);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}

/* Narrow: the copy runs the full width, so the side-weighted scrim would
   leave the right half of every line sitting on bright footage. Vertical only. */
@media (max-width: 899px) {
  .hero__scrim {
    background: linear-gradient(180deg, rgba(16,26,34,.74) 0%, rgba(16,26,34,.56) 26%,
                                        rgba(16,26,34,.72) 58%, rgba(16,26,34,.94) 100%);
  }
  .hero__plot { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 699px) {
  .hero__ticks i:nth-child(3), .hero__ticks i:nth-child(4) { bottom: 124px; }
  .hero__inner { padding: var(--s6) 0 var(--s5); }
  .hero__rail__in { justify-content: flex-start; }
}

/* ==========================================================================
   PRESS — publication names set as wordmarks, on one rail. Text rather than
   supplied logo files, so the weight is even and nothing is stretched. Drop
   real artwork in assets/img/press/ and swap the spans for <img> to change it.
   ========================================================================== */
.press {
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--hairline-soft);
  background: var(--cream);
}
.press__h {
  font-family: var(--mono); font-weight: 400;
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-text); text-align: center; margin-bottom: var(--s4);
}
.press__rail {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}
.press__mark {
  display: flex; align-items: center; white-space: nowrap;
  padding: 4px clamp(26px, 4.4vw, 58px);
  border-left: 1px solid var(--hairline-soft);
  color: rgba(31,47,60,.58);
}
.press__mark--serif {
  font-family: var(--display); font-size: clamp(18px, 2.1vw, 25px); letter-spacing: .005em;
}
.press__mark--block {
  font-family: var(--body); font-weight: 700; text-transform: uppercase;
  font-size: clamp(14px, 1.65vw, 19px); letter-spacing: .07em;
}

/* ==========================================================================
   ADVANTAGE — the proof line under each point
   ========================================================================== */
.adv__row .adv__proof {
  margin-top: var(--s2); padding-left: 14px;
  border-left: 1px solid rgba(212,193,120,.4);
  font-family: var(--mono); font-size: 11px; line-height: 1.75;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold);
}

/* ==========================================================================
   SERVICES — what each one actually includes
   ========================================================================== */
@media (min-width: 620px) { .ruled--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.svc { padding-bottom: var(--s5); }
.svc__list {
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px solid var(--hairline-soft);
}
.svc__list li {
  position: relative; padding-left: 20px; margin-top: 10px;
  font-size: 14px; line-height: 1.6; color: var(--on-cream-body);
}
.svc__list li:first-child { margin-top: 0; }
.svc__list li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 10px; height: 1px; background: var(--gold-line);
}

/* the marker slab is tuned for cream. Over footage it becomes a gold rule. */
.on-dark .marker {
  background: linear-gradient(
    rgba(212,193,120,0)   87%,
    rgba(212,193,120,.9)  87%,
    rgba(212,193,120,.9)  93%,
    rgba(212,193,120,0)   93%);
}
.hero .lede { text-wrap: pretty; }

/* ==========================================================================
   PRESS WORDMARKS. Appended 2026-08-30, recoloured the same day.
   Each name is set the way that publication actually sets its own masthead,
   INCLUDING its ground: three sit as dark type on the cream, three sit in
   their own coloured block, because that is how those three are drawn.

   Every colour below was read off the publication's own artwork or header on
   2026-08-30, not guessed:
     The Real Deal   #231F20 with REAL in #D83830   (their logo SVG)
     Bisnow          white on #F58320               (their site header)
     Commercial Obs. #000000 condensed serif caps   (co_logo_dark.png)
     IOS List        black, IOS | LIST with a rule  (their site header)
     Traded          #AAFF45 on #000000             (their site)
     Business Jrnls  white on #256788               (their masthead block)

   These are still type in the right colours, not the supplied logo files. If
   real artwork ever arrives it goes in assets/img/press/ and the spans
   become <img>. WCAG has no contrast floor for a logotype, which is why the
   Bisnow chip is allowed to stay their own white-on-orange.
   ========================================================================== */
.press__mark { padding: 4px clamp(20px, 3.4vw, 46px); color: #1a1a1a; }
.press__mark i,
.press__mark b { font-style: normal; }

/* a publication whose logo is type inside a coloured block gets one */
.press__chip {
  display: inline-flex; align-items: center;
  padding: 7px 14px 6px; white-space: nowrap;
}

/* The Real Deal — heavy caps, REAL in their red.
   display:block on purpose: .press__mark is a flex container, and a flex
   container eats the whitespace between "The", <b>Real</b> and "Deal". */
.press__mark--trd {
  display: block; line-height: 1.4;
  font-family: var(--body); font-weight: 700; text-transform: uppercase;
  font-size: clamp(15px, 1.75vw, 21px); letter-spacing: .005em; color: #231F20;
}
.press__mark--trd b { color: #D83830; }

/* Bisnow — white caps in their orange */
.press__mark--bisnow .press__chip {
  background: #F58320; color: #fff;
  font-family: var(--body); font-weight: 700; text-transform: uppercase;
  font-size: clamp(13px, 1.55vw, 18px); letter-spacing: .05em;
}

/* Commercial Observer — black newspaper serif, set tight like the masthead */
.press__mark--cobs {
  font-family: var(--display); text-transform: uppercase; color: #000;
  font-size: clamp(15px, 1.8vw, 21px); letter-spacing: .012em;
}

/* IOS List — black, with the thin rule their logo puts between the words */
.press__mark--ioslist {
  display: flex; align-items: center;
  font-family: var(--body); font-weight: 700; text-transform: uppercase;
  color: #111; font-size: clamp(15px, 1.75vw, 21px); letter-spacing: .045em;
}
.press__bar {
  width: 1px; height: 1.05em; background: currentColor;
  margin: 0 .55em; opacity: .5;
}

/* Traded — their acid green on black, lowercase as they set it */
.press__mark--traded .press__chip {
  background: #000; color: #AAFF45;
  font-family: var(--body); font-weight: 700;
  font-size: clamp(15px, 1.8vw, 21px); letter-spacing: -.012em;
}

/* The Business Journals — white caps in their teal block */
.press__mark--tbj .press__chip {
  background: #256788; color: #fff;
  font-family: var(--body); font-weight: 700; text-transform: uppercase;
  font-size: clamp(11px, 1.3vw, 15px); letter-spacing: .06em;
}

/* ==========================================================================
   PLATE CELLS — an asset class shown, not described in a coloured box.
   Photograph on top, hairline, then the copy. Appended 2026-08-30.
   ========================================================================== */
/* NB: .plate is already taken by the closed-deal card, so the asset-class
   photograph is .shot. Do not rename it back. */
.cell--plate { padding: 0; display: flex; flex-direction: column; }
.shot {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--navy-deep);
}
.shot img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.66) contrast(1.06) brightness(.96);
  transition: transform .7s var(--ease), filter .45s var(--ease);
}
.shot::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(31,47,60,.66) 0%, rgba(31,47,60,.12) 48%, rgba(31,47,60,0) 100%);
  transition: opacity .45s var(--ease);
}
.shot__tag {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  font-family: var(--mono); font-size: 10px; line-height: 1;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); background: rgba(22,35,45,.88);
  padding: 8px 13px 7px;
  border-top: 1px solid rgba(212,193,120,.45);
  border-right: 1px solid rgba(212,193,120,.45);
}
.cell--plate .cell__body {
  display: flex; flex-direction: column; gap: var(--s2);
  flex: 1 1 auto; padding: var(--s3) var(--s3) var(--s4);
  border-top: 1px solid var(--hairline-soft);
}
.cell--plate .cell__body h3 { margin-bottom: 0; }
.cell--plate .cell__body p { margin: 0; }
.cell__go {
  margin-top: auto; padding-top: var(--s2);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text);
  transition: color .25s var(--ease);
}
a.cell--plate:hover .shot img { transform: scale(1.045); filter: saturate(1) contrast(1.02) brightness(1); }
a.cell--plate:hover .shot::after { opacity: .55; }
a.cell--plate:hover .cell__go { color: var(--navy); }
@media (prefers-reduced-motion: reduce) {
  a.cell--plate:hover .shot img { transform: none; }
}

/* ==========================================================================
   FIGURE TILE — a photograph dropped into a ruled grid so a long run of text
   cells is broken by something to look at. Appended 2026-08-30.
   ========================================================================== */
.cell--fig {
  position: relative; overflow: hidden; margin: 0; padding: 0;
  min-height: 260px; background: var(--navy-deep);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.cell--fig picture { position: absolute; inset: 0; display: block; }
.cell--fig img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.66) contrast(1.05);
}
.cell--fig::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(22,35,45,.92) 0%, rgba(22,35,45,.34) 46%, rgba(22,35,45,.06) 100%);
}
.cell__cap {
  position: relative; z-index: 2; padding: var(--s3);
  font-family: var(--mono); font-size: 10px; line-height: 1.7;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
.cell__cap::before {
  content: ""; display: block; width: 26px; height: 1px;
  background: var(--gold); margin-bottom: 10px; opacity: .8;
}

/* ==========================================================================
   PHOTOGRAPHIC BAND — a dark band with a site under it instead of flat paint.
   The scrim is heavy on purpose: the text contrast must not move.
   Appended 2026-08-30.
   ========================================================================== */
.band--plate { position: relative; isolation: isolate; overflow: hidden; }
.band--plate > picture { position: absolute; inset: 0; z-index: 0; display: block; }
.band--plate > .wrap { position: relative; z-index: 3; }
/* the photograph is darkened at source as well as scrimmed, so no bright
   patch in the image can ever pull the body text under 4.5:1 */
.band__img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
  filter: brightness(.42) saturate(.32) contrast(1.05);
}
.band__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(31,47,60,.88) 0%, rgba(31,47,60,.72) 45%, rgba(22,35,45,.90) 100%),
    linear-gradient(to right,  rgba(22,35,45,.86) 0%, rgba(22,35,45,.40) 100%);
}
.band__grid {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(212,193,120,.10) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg,  rgba(212,193,120,.07) 0 1px, transparent 1px 120px);
}