/* ==========================================================================
   Commercial Connect Group — listing site template (LIGHT THEME)
   Warm paper base, navy ink, gold accent. Same token names as the dark
   build so script.js and index.html are unchanged.
     --navy-000 page base / --navy-100 card / --ink-000 primary text
     --gold accent (subject)  --teal (best comp)  --steel (other comps)
   Contrast checked vs #fbfaf8: ink-000 16.2:1, ink-100 5.8:1,
   gold-text 5.2:1, teal 5.6:1, steel 5.4:1. Markers >=3:1.
   ========================================================================== */

:root {
  /* surfaces (token names kept from the dark build) */
  --navy-000: #faf8f4;   /* page base */
  --navy-050: #ffffff;   /* lightest */
  --navy-100: #ffffff;   /* cards / panels */
  --navy-150: #f3efe7;   /* hover / raised */

  /* ink */
  --ink-000: #0b1b22;    /* headlines, primary text */
  --ink-100: #545f64;    /* body / secondary */
  --ink-200: #8b949c;    /* labels, tertiary */

  --hairline: rgba(11, 27, 34, 0.13);
  --hairline-strong: rgba(11, 27, 34, 0.24);

  /* accents */
  /* ONE gold, and it is the logo gold. #ffc000 is 1.8:1 on this paper, so it is
     a FILL / RULE / MARKER colour and on navy only. Small labels that used to be
     a muddy brown now use --label; key figures use ink. No brown anywhere. */
  --gold: #ffc000;
  --gold-bright: #ffc000;
  --gold-soft: rgba(255, 192, 0, 0.18);
  --label: #545f64;        /* small uppercase labels on light */
  --teal: #0d7350;
  --teal-soft: rgba(13, 115, 80, 0.13);
  --steel: #2166c4;
  --steel-soft: rgba(33, 102, 196, 0.12);

  --shadow-sm: 0 1px 2px rgba(22,29,41,0.06), 0 2px 8px rgba(22,29,41,0.04);
  --shadow-md: 0 2px 6px rgba(22,29,41,0.08), 0 12px 28px rgba(22,29,41,0.08);

  --serif: -apple-system, "Segoe UI", system-ui, sans-serif;
  --content-max: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--serif);
  background: var(--navy-000);
  color: var(--ink-000);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 88px 0; }
@media (max-width: 640px) {
  section { padding: 56px 0; }
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 600;
  color: var(--label);
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(32px, 6vw, 52px); line-height: 1.08; }
h2 { font-size: clamp(24px, 4vw, 34px); line-height: 1.15; }
h3 { font-size: 18px; }
p { margin: 0; }

.section-head { max-width: 640px; margin-bottom: 40px; }
.section-head .eyebrow { display: block; margin-bottom: 10px; }
.section-head p { margin-top: 14px; color: var(--ink-100); font-size: 16px; }

/* ---------- reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- header / nav ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(251, 250, 248, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
}
.brand-lockup { display: flex; align-items: center; gap: 10px; }
.brand-lockup img { height: 28px; width: auto; }
.brand-lockup span { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; }
.site-header nav { display: flex; gap: 22px; }
.site-header nav a {
  color: var(--ink-100);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.site-header nav a:hover { color: var(--ink-000); }
@media (max-width: 720px) { .site-header nav { display: none; } }

/* ---------- hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 120px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 560px at 80% -12%, rgba(184,135,31,0.12), transparent 62%),
    linear-gradient(180deg, #ffffff, var(--navy-000));
}
.hero-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 32%;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(251,250,248,0.62) 0%,
    rgba(251,250,248,0.72) 34%,
    rgba(251,250,248,0.88) 62%,
    rgba(251,250,248,0.97) 84%,
    rgba(251,250,248,1) 100%
  );
}
.hero:not(.has-photo) .hero-photo,
.hero:not(.has-photo) .hero-scrim { display: none; }
.hero-content { max-width: 620px; position: relative; z-index: 1; }
.hero-address { margin-top: 18px; font-size: 15px; color: var(--ink-100); }
.hero-address strong { color: var(--ink-000); }
.hero h1 { margin-top: 14px; }
.hero-sub { margin-top: 22px; font-size: 17px; color: var(--ink-100); max-width: 520px; }
.hero-stats { display: flex; gap: 32px; margin-top: 40px; flex-wrap: wrap; }
.hero-stat .num { font-size: 26px; font-weight: 700; color: var(--ink-000); }
.hero-stat .label { font-size: 12px; color: var(--ink-100); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }
.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 24px;
  font-size: 12px;
  color: var(--ink-200);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
@media (max-width: 720px) {
  /* Phone hero shows the photo's full height (no vertical cropping), so the
     sky band at top gets more exposure than on desktop — deepen the top of
     the gradient slightly rather than washing the whole image again. */
  .hero-scrim {
    background: linear-gradient(
      180deg,
      rgba(251,250,248,0.72) 0%,
      rgba(251,250,248,0.80) 26%,
      rgba(251,250,248,0.92) 54%,
      rgba(251,250,248,0.98) 76%,
      rgba(251,250,248,1) 100%
    );
  }
}

/* ---------- photo slots ---------- */
.photo-slot {
  border: 1px dashed var(--hairline-strong);
  border-radius: 10px;
  background: var(--navy-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-200);
  font-size: 12px;
  text-align: center;
  padding: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.photo-slot span { max-width: 200px; }

/* ---------- property / story ---------- */
.story-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: start; }
@media (max-width: 860px) { .story-grid { grid-template-columns: 1fr; } }
.story-copy p + p { margin-top: 16px; }
.story-copy { color: var(--ink-100); font-size: 16px; max-width: 720px; }
.fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
@media (max-width: 640px) { .fact-grid { grid-template-columns: 1fr 1fr; } }
.fact { border-top: 1px solid var(--hairline); padding-top: 10px; }
.fact .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-200); }
.fact .v { margin-top: 4px; font-size: 15px; font-weight: 600; }
.feature-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .feature-list { grid-template-columns: 1fr; } }
.feature-list li { font-size: 14px; color: var(--ink-100); padding-left: 18px; position: relative; }
.feature-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }

/* ---------- property gallery ---------- */
.property-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  grid-auto-flow: dense;
  gap: 14px;
}
@media (max-width: 860px) {
  .property-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
}
@media (max-width: 560px) {
  .property-gallery { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .gallery-photo.is-featured { grid-column: span 1; grid-row: span 1; }
}
.gallery-photo {
  position: relative;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--navy-100);
  border: 1px solid var(--hairline);
  cursor: zoom-in;
}
.gallery-photo.is-featured { grid-column: span 2; grid-row: span 2; }
.gallery-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-photo figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 12px 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-000);
  background: linear-gradient(180deg, rgba(14,19,28,0) 0%, rgba(14,19,28,0.86) 65%);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gallery-photo:focus-visible { outline: 2px solid var(--ink-000); outline-offset: 2px; }
.property-gallery .photo-slot { height: 100%; }

/* ---------- gallery lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(14, 19, 28, 0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox-figure { margin: 0; max-width: min(1100px, 92vw); max-height: 88vh; display: flex; flex-direction: column; align-items: center; }
.lightbox-figure img { max-width: 100%; max-height: 76vh; width: auto; object-fit: contain; border-radius: 8px; }
.lightbox-figure figcaption { margin-top: 14px; color: var(--ink-100); font-size: 14px; text-align: center; max-width: 640px; }
.lightbox-btn {
  position: absolute;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid var(--hairline-strong);
  color: var(--ink-000);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-btn:hover { background: rgba(255, 255, 255, 0.26); }
.lightbox-btn:focus-visible { outline: 2px solid var(--ink-000); outline-offset: 2px; }
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
@media (max-width: 560px) {
  .lightbox-btn { width: 40px; height: 40px; font-size: 17px; }
  .lightbox-close { top: 10px; right: 10px; }
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
}

/* ---------- park diagram ---------- */
.park-diagram { display: flex; gap: 10px; margin-top: 22px; }
.park-bldg {
  flex: 1;
  border-radius: 8px;
  padding: 18px 14px;
  border: 1px solid var(--hairline);
  background: var(--navy-100);
  font-size: 13px;
  color: var(--ink-100);
}
.park-bldg .label { font-weight: 700; color: var(--ink-000); font-size: 14px; }
.park-bldg.is-subject { background: var(--gold-soft); border-color: rgba(184,135,31,0.55); }
.park-bldg.is-subject .label { color: var(--ink-000); }
.park-note { margin-top: 10px; font-size: 12px; color: var(--ink-200); }

/* ---------- lease status ---------- */
.status-panel {
  background: var(--navy-100);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 28px;
}
.status-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; }
.status-row:last-child { border-bottom: none; }
.status-row .k { color: var(--ink-100); }
.status-row .v { font-weight: 600; text-align: right; }
.caveat-list { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.caveat-list li {
  font-size: 13.5px;
  color: var(--ink-100);
  padding: 12px 14px;
  border-left: 2px solid var(--gold);
  background: var(--gold-soft);
  border-radius: 0 8px 8px 0;
}

/* ---------- comps ---------- */
.asking-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gold-soft);
  border: 1px solid rgba(255,192,0,0.55);
  color: var(--ink-000);
  font-size: 13.5px;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 28px;
}
.asking-banner strong { color: var(--ink-000); }

.toggle-row { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; flex-wrap: wrap; }
.toggle {
  display: inline-flex;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 4px;
  background: var(--navy-100);
}
.toggle button {
  border: none;
  background: transparent;
  color: var(--ink-100);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.toggle button.active { background: var(--gold); color: var(--ink-000); }
.toggle-note { font-size: 12.5px; color: var(--ink-200); }

.plot-wrap { margin-bottom: 48px; }
.plot-legend { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; font-size: 12.5px; color: var(--ink-100); }
.plot-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.dot-subject { background: var(--gold); }
.dot-best { background: var(--teal); }
.dot-other { background: var(--steel); }

.plot-track {
  position: relative;
  height: 132px;
  margin: 0 4px;
}
.plot-band {
  position: absolute;
  top: 44px;
  height: 30px;
  background: rgba(22, 29, 41, 0.06);
  border-radius: 6px;
}
.plot-band-label {
  position: absolute;
  top: 6px;
  font-size: 11px;
  color: var(--ink-200);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.plot-axis {
  position: absolute;
  top: 59px;
  left: 0; right: 0;
  height: 1px;
  background: var(--hairline-strong);
}
.plot-tick { position: absolute; top: 66px; font-size: 11px; color: var(--ink-200); transform: translateX(-50%); }
.plot-point {
  position: absolute;
  top: 47px;
  width: 14px; height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  border: 2px solid #ffffff;
  transition: left 0.5s cubic-bezier(.4,0,.2,1), background 0.3s;
}
.plot-point.other { width: 10px; height: 10px; background: var(--steel); opacity: 0.85; }
.plot-point.best { width: 16px; height: 16px; background: var(--teal); z-index: 3; }
.plot-point.subject { width: 20px; height: 20px; background: var(--gold); z-index: 4; box-shadow: 0 0 0 4px var(--gold-soft); }
.plot-point-label {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ink-000);
}
.plot-point-label.below { top: auto; bottom: -24px; }
.plot-tooltip {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy-150);
  border: 1px solid var(--hairline-strong);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink-100);
  width: 220px;
  display: none;
  z-index: 10;
  box-shadow: var(--shadow-md);
}
.plot-tooltip strong { color: var(--ink-000); display: block; margin-bottom: 2px; }
.plot-point:hover .plot-tooltip, .plot-point:focus .plot-tooltip { display: block; }

.comps-table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: 12px; }
table.comps-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 760px; }
.comps-table th, .comps-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--hairline); }
.comps-table thead th {
  background: var(--navy-100);
  color: var(--ink-100);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.comps-table thead th:hover { color: var(--ink-000); }
.comps-table thead th.sorted::after { content: " " attr(data-dir); font-size: 9px; }
.comps-table tbody tr.is-subject { background: var(--gold-soft); }
.comps-table tbody tr.is-best { background: var(--teal-soft); }
.comps-table td.rate { font-variant-numeric: tabular-nums; font-weight: 600; }
.comps-table td.notes { color: var(--ink-100); font-size: 12.5px; max-width: 280px; }
.badge { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; }
.badge-subject { background: var(--gold); color: var(--ink-000); }
.badge-best { background: var(--teal); color: var(--navy-000); }

.analysis-notes { display: grid; gap: 16px; margin-top: 40px; }
.analysis-notes p { color: var(--ink-100); font-size: 15px; }
.verify-box {
  margin-top: 32px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 22px 24px;
  background: var(--navy-100);
}
.verify-box h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-200); margin-bottom: 12px; }
.verify-box ul { margin: 0; padding-left: 18px; color: var(--ink-100); font-size: 13.5px; display: grid; gap: 8px; }

/* ---------- location ---------- */
.location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .location-grid { grid-template-columns: 1fr; } }
.location-chip-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.chip { border: 1px solid var(--hairline-strong); border-radius: 999px; padding: 8px 14px; font-size: 12.5px; color: var(--ink-100); }

/* ---------- location map ---------- */
.map-card { border: 1px solid var(--hairline); border-radius: 14px; padding: 18px; background: var(--navy-100); }
.map-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-100); margin-bottom: 14px; }
.map-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.map-zoom-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.map-zoom-btn {
  border: 1px solid var(--hairline-strong);
  background: var(--navy-150);
  color: var(--ink-100);
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px 16px;
  min-height: 40px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.map-zoom-btn.active { background: var(--gold); color: var(--ink-000); border-color: var(--gold); }
.map-frame {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  background: var(--navy-000);
}
.map-frame img { width: 100%; height: auto; display: block; }
.map-pins { position: absolute; inset: 0; }
.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.map-pin .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9);
  background: var(--steel);
}
.map-pin.subject .dot { width: 20px; height: 20px; background: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.map-pin.best .dot { width: 17px; height: 17px; background: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.map-pin.is-active .dot { outline: 2px solid var(--ink-000); outline-offset: 2px; }
.map-attribution {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 9.5px;
  color: rgba(255,255,255,0.92);
  background: rgba(14,19,28,0.55);
  padding: 3px 7px;
  border-radius: 5px;
}
.map-hint { margin-top: 14px; font-size: 12px; color: var(--ink-200); }
.map-detail {
  margin-top: 8px;
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
  font-size: 13.5px;
  color: var(--ink-100);
  min-height: 20px;
}
.map-detail .name { font-weight: 700; color: var(--ink-000); }
.map-plotted-note { margin-top: 14px; font-size: 11.5px; color: var(--ink-200); }
.drive-times { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.drive-time {
  flex: 1;
  min-width: 150px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--navy-150);
}
.drive-time .time { font-size: 22px; font-weight: 700; color: var(--ink-000); }
.drive-time.strong { border-color: rgba(13,115,80,0.45); background: var(--teal-soft); }
.drive-time.strong .time { color: var(--teal); }
.drive-time .label { font-size: 12px; color: var(--ink-100); margin-top: 4px; }

/* ---------- marketing ---------- */
.marketing-intro { color: var(--ink-100); font-size: 16px; max-width: 640px; margin-bottom: 36px; }
.deliverables-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .deliverables-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .deliverables-grid { grid-template-columns: 1fr; } }
.deliverable-card {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 20px;
  background: var(--navy-100);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.deliverable-card:hover, .deliverable-card.is-open { border-color: rgba(184,135,31,0.55); background: var(--navy-150); }
.deliverable-card h3 { font-size: 15px; }
.deliverable-card .summary { font-size: 12.5px; color: var(--ink-200); margin-top: 6px; }
.deliverable-card .detail {
  font-size: 13px;
  color: var(--ink-100);
  margin-top: 12px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.deliverable-card.is-open .detail { max-height: 200px; }
.deliverable-card .plus { float: right; color: var(--ink-000); font-weight: 700; }

/* ---------- CTA / footer ---------- */
.cta-section { text-align: center; }
.cta-section h2 { max-width: 520px; margin: 0 auto; }
.cta-section p { margin-top: 16px; color: var(--ink-100); max-width: 480px; margin-left: auto; margin-right: auto; }
.cta-details { margin-top: 32px; display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; }
.cta-agent { min-width: 200px; }
.cta-agent-name { font-size: 16px; font-weight: 700; color: var(--ink-000); }
.cta-agent-title { margin-top: 4px; font-size: 13px; color: var(--ink-100); }
.cta-agent-contact { margin-top: 8px; font-size: 14px; color: var(--ink-100); }
.cta-agent-contact a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: 1px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.cta-agent-contact a:hover,
.cta-agent-contact a:focus-visible { color: var(--ink-000); border-bottom-color: var(--gold); }
.cta-agent-contact.needs { color: var(--ink-000); font-style: italic; background: var(--gold-soft); padding: 1px 6px; border-radius: 4px; }

.site-footer { border-top: 1px solid var(--hairline); padding: 32px 0; }
.footer-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-brands { display: flex; align-items: center; gap: 18px; }
.footer-brands img { height: 22px; }
.footer-legal { font-size: 11.5px; color: var(--ink-200); max-width: 520px; line-height: 1.6; }

.divider { height: 1px; background: var(--hairline); margin: 0; }

/* ==========================================================================
   LIGHT THEME ADJUSTMENTS
   Appended last so these win without editing each base block. On a light page
   panels can no longer be separated from the page by darkness alone — they
   need a hairline plus a soft shadow instead.
   ========================================================================== */

/* --- panels get real elevation --- */
.comps-table-wrap,
.plot-wrap,
.deliverable-card,
.park-bldg,
.status-panel,
.verify-box,
.map-card {
  box-shadow: var(--shadow-sm);
}

/* --- toggle / zoom pills: gold fill needs dark ink, not the page color --- */
.toggle button.active,
.map-zoom-btn.active {
  background: var(--gold-bright);
  color: #1a1206;
  border-color: var(--gold-bright);
  font-weight: 700;
}

/* --- table header: inverted bar reads as structure on paper --- */
.comps-table thead th {
  background: var(--ink-000);
  color: #ffffff;
  border-bottom: none;
}
.comps-table thead th:hover { color: #ffffff; }
.comps-table tbody tr:nth-child(even):not(.is-subject):not(.is-best) td {
  background: #f7f5f2;
}

/* --- hero over a photo: light scrim means dark ink, keep it strong --- */
.hero h1 { color: var(--ink-000); }
.hero.has-photo .hero-sub,
.hero.has-photo .hero-address { color: #3d4653; }

/* --- header sits over content while scrolling --- */
.site-header { box-shadow: 0 1px 0 var(--hairline); }

/* --- gallery captions and the lightbox stay dark: they sit ON photos --- */
.gallery-photo figcaption { color: #ffffff; }

/* --- footer anchors the page --- */
.site-footer {
  background: var(--ink-000);
  color: rgba(255,255,255,0.72);
  border-top: none;
}
.site-footer a { color: #ffffff; }
.footer-legal { color: rgba(255,255,255,0.55); }

/* unconfirmed values render unmistakably, per the template's [NEEDS: ] rule */
.status-row .v.needs { color: var(--ink-000); font-style: italic; background: var(--gold-soft); padding: 1px 6px; border-radius: 4px; }

/* Executed leases are a different class of evidence than asking rates —
   give them their own left rule so the distinction survives a skim. */
.comps-table tbody tr.is-executed td { background: #eef4fb; }
.comps-table tbody tr.is-executed td:first-child {
  box-shadow: inset 3px 0 0 var(--steel);
  font-weight: 600;
}

/* `hidden` must win over .reveal's opacity/transform, which otherwise gives
   the element a layout box and keeps it visible. */
[hidden] { display: none !important; }

/* With real photography the light scrim washed the building out. Keep the
   top/right readable for the photo and concentrate the wash behind the text
   column on the left, so the headline still clears contrast. */
.hero.has-photo .hero-scrim {
  background:
    linear-gradient(100deg,
      rgba(251,250,248,0.96) 0%,
      rgba(251,250,248,0.92) 38%,
      rgba(251,250,248,0.55) 62%,
      rgba(251,250,248,0.30) 100%),
    linear-gradient(180deg,
      rgba(251,250,248,0.25) 0%,
      rgba(251,250,248,0.10) 45%,
      rgba(251,250,248,0.55) 88%,
      rgba(251,250,248,0.92) 100%);
}
@media (max-width: 720px) {
  /* Phone: text sits over the middle of the photo, so fall back to a
     vertical wash rather than a side-weighted one. */
  .hero.has-photo .hero-scrim {
    background: linear-gradient(180deg,
      rgba(251,250,248,0.80) 0%,
      rgba(251,250,248,0.88) 40%,
      rgba(251,250,248,0.96) 72%,
      rgba(251,250,248,1) 100%);
  }
}

/* The CB&A Commercial mark is a tall stacked lockup (404x505) — at the old
   22px cap the "COMMERCIAL" wordmark rendered ~2px tall and disappeared.
   Give it real height and align both marks on their optical baseline. */
.footer-brands { align-items: flex-end; gap: 22px; }
.footer-brands img { height: auto; }
/* CC is the primary brand and must read larger than the brokerage lockup.
   These were 34px vs 46px, which made CB&A dominate Jacob's own mark.
   The CC horizontal is 4.78:1 so height is the controlling dimension. */
.footer-brands #footer-mark { height: 38px; width: auto; }
.footer-brands #footer-brokerage { height: 30px; width: auto; }

/* Hero photo is now the wide yard shot: the building sits in a horizontal
   band across the middle and the foreground is open pavement. Pull the
   framing up so the building band is not cropped low, and lighten the wash
   so the yard and building actually read. Text sits left over pavement,
   which is already low-contrast, so it needs less help than the previous
   shot did. */
.hero-photo { background-position: center 46%; }

.hero.has-photo .hero-scrim {
  background:
    linear-gradient(100deg,
      rgba(251,250,248,0.90) 0%,
      rgba(251,250,248,0.82) 34%,
      rgba(251,250,248,0.42) 60%,
      rgba(251,250,248,0.14) 100%),
    linear-gradient(180deg,
      rgba(251,250,248,0.10) 0%,
      rgba(251,250,248,0.04) 42%,
      rgba(251,250,248,0.48) 86%,
      rgba(251,250,248,0.92) 100%);
}
@media (max-width: 720px) {
  .hero.has-photo .hero-scrim {
    background: linear-gradient(180deg,
      rgba(251,250,248,0.78) 0%,
      rgba(251,250,248,0.86) 40%,
      rgba(251,250,248,0.95) 72%,
      rgba(251,250,248,1) 100%);
  }
}

/* ==========================================================================
   PRINT / PDF
   The page is a scrolling web document; a PDF of it has to become a paged
   one. Rules below: kill anything interactive or navigational, force the
   scroll-reveal animations into their visible state (they are opacity:0 by
   default and would print blank), and keep tables and cards off page seams.
   ========================================================================== */
@media print {
  @page { size: Letter; margin: 0.55in 0.5in; }

  html, body {
    background: #fff !important;
    font-size: 10.5pt;
  }

  /* Scroll-reveal must not print invisible. */
  .reveal, .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Screen-only furniture. */
  .site-header,
  .hero-scroll-cue,
  #rate-toggle,
  .toggle-row,
  #map-zoom-tabs,
  .comps-table thead th[role="button"]::after { display: none !important; }

  /* Links: show the destination for phone/email, not for in-page anchors. */
  a { text-decoration: none; color: inherit; }
  a[href^="tel:"]::after,
  a[href^="mailto:"]::after { content: ""; }

  /* Hero becomes a cover block rather than a viewport-height panel. */
  .hero {
    min-height: 0 !important;
    height: auto !important;
    padding: 0.3in 0 0.35in !important;
    page-break-after: always;
  }
  .hero-photo {
    position: relative !important;
    height: 3.6in !important;
    margin-bottom: 0.3in;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .hero.has-photo .hero-scrim { display: none !important; }
  .hero-content { max-width: none !important; }

  /* Section rhythm. */
  section { page-break-inside: auto; padding: 0.25in 0 !important; }
  h1, h2, h3 { page-break-after: avoid; }
  h2 { font-size: 16pt; }
  h3 { font-size: 12pt; }

  /* Keep atomic blocks whole. */
  table, .fact, .status-panel, .verify-box, .analysis-notes,
  .cta-agent, .deliverable, .park-bldg { page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr { page-break-inside: avoid; }

  /* Photos: print them, but smaller and never split. */
  .property-gallery {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.18in !important;
  }
  .gallery-item { page-break-inside: avoid; }
  .gallery-photo {
    height: 2.1in !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Colour-critical UI must not be dropped by the print engine. */
  .asking-banner, .is-executed, .is-subject, .badge,
  .footer-brands img, .site-footer { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  .site-footer { page-break-inside: avoid; }
  .cta-section { page-break-before: auto; }
}

/* ---- print fixes after first proof ---- */
@media print {
  /* 1. The scroll cue is absolutely positioned and was overlapping the hero
        stats. It is screen-only furniture. */
  .hero-scroll, .hero-scroll-cue, .scroll-cue,
  [class*="scroll"] { display: none !important; }

  /* 2. The hero photo was dropping out: the element is a background-image on
        an absolutely positioned div, which the print engine was collapsing.
        Force it into flow above the text as a cover image. */
  .hero { display: block !important; position: relative !important; }
  .hero-photo {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 3.4in !important;
    margin: 0 0 0.28in 0 !important;
    background-size: cover !important;
    background-position: center 46% !important;
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }

  /* 3. The comps table overflowed the page and truncated the Notes column.
        Reflow it: smaller type, fixed layout, wrapped cells, and drop the
        two lowest-value columns so the analysis survives. */
  .comps-table-wrap, .table-scroll, .comps-scroll {
    overflow: visible !important;
    width: 100% !important;
  }
  .comps-table {
    width: 100% !important;
    table-layout: fixed !important;
    font-size: 7.2pt !important;
    border-collapse: collapse !important;
  }
  .comps-table th, .comps-table td {
    padding: 4pt 3pt !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    vertical-align: top !important;
  }
  .comps-table th:nth-child(2), .comps-table td:nth-child(2),
  .comps-table th:nth-child(6), .comps-table td:nth-child(6) {
    display: none !important;   /* Distance + Type: lowest signal in print */
  }
  .comps-table th:nth-child(1), .comps-table td:nth-child(1) { width: 15% !important; }
  .comps-table th:nth-child(3), .comps-table td:nth-child(3) { width: 13% !important; }
  .comps-table th:nth-child(4), .comps-table td:nth-child(4) { width: 13% !important; }
  .comps-table th:nth-child(5), .comps-table td:nth-child(5) { width: 12% !important; }
  .comps-table th:nth-child(7), .comps-table td:nth-child(7) { width: 47% !important; }

  /* A tall comp row is better split than pushed to a near-empty page. */
  .comps-table tr { page-break-inside: auto !important; }

  /* 4. Sections were breaking early and leaving half-empty pages. Only the
        cover forces a break; everything else flows. */
  section { page-break-before: auto !important; page-break-after: auto !important; }
  .property-gallery { page-break-inside: auto !important; }
}

@media print {
  /* Captions were line-clamped for the screen grid and printed truncated
     with an ellipsis mid-sentence. In print there is no hover, so the full
     caption has to be on the page. */
  .gallery-caption, .gallery-item figcaption, .property-gallery figcaption {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-height: none !important;
    white-space: normal !important;
    font-size: 6.8pt !important;
    line-height: 1.35 !important;
  }
}


/* ---------- floor plan + downloads (tenant-facing listing site) ---------- */
#floorplan .fp-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:28px}
#floorplan .fp{margin:0;background:var(--card,#fff);border:1px solid var(--line,rgba(23,38,56,.13));
  border-radius:8px;padding:14px;box-shadow:0 1px 3px rgba(23,38,56,.05)}
#floorplan .fp img{width:100%;height:auto;display:block;background:#fff}
#floorplan .fp figcaption{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--label);margin-top:11px;line-height:1.45}
#floorplan .fp-note{font-size:12px;line-height:1.6;color:var(--ink-100);margin-top:18px}
.dl-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.dl{display:block;text-decoration:none;border:1px solid var(--line,rgba(23,38,56,.13));border-radius:8px;
  padding:14px 18px;min-width:220px;background:#fff;transition:.15s}
.dl:hover{border-color:var(--gold);transform:translateY(-1px)}
.dl .dl-t{display:block;font-size:14px;font-weight:800;color:var(--ink-000)}
.dl .dl-d{display:block;font-size:12px;color:var(--ink-100);margin-top:3px}
@media(max-width:760px){#floorplan .fp-grid{grid-template-columns:1fr}}


/* ---------- drive-time card (replaces the comp-plotted map card) ---------- */
.drive-card{background:#fff;border:1px solid var(--line,rgba(23,38,56,.13));border-radius:10px;
  padding:22px 24px;box-shadow:0 1px 3px rgba(23,38,56,.05)}
.drive-card-h{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--label);margin-bottom:14px}
.drive-card .drive-times{display:flex;flex-direction:column;gap:0}
.drive-card .drive-time{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-top:1px solid rgba(23,38,56,.1)}
.drive-card .drive-time:first-child{border-top:0}
.drive-card .drive-time .time{font-size:17px;font-weight:800;color:var(--ink-000);order:2;white-space:nowrap}
.drive-card .drive-time .label{font-size:13px;color:var(--ink-100);order:1;line-height:1.4}


/* ---------- Commercial Connect lockups (sized by height, never width) ---------- */
.site-header .brand-lockup #header-mark { height: 30px; width: auto; display: block; }
.cta-lockup { height: 46px; width: auto; display: block; margin: 0 auto 26px; }
@media (max-width: 760px) {
  .site-header .brand-lockup #header-mark { height: 24px; }
  .cta-lockup { height: 38px; }
}