/* GroupMB site styles. Values come from the GroupMB Design System
   (https://claude.ai/artifact/QK1Xf5FYNUNVEapcaDWBRs), 2026 refresh:
   black, paper, concrete and International Orange; Instrument Sans + IBM Plex Mono. */
:root {
  --brand-black: #111111;
  --brand-paper: #f2f1ee;
  --concrete: #cfccc6;
  --brand-orange: #ff4f00;      /* fills and marks only; black text on it */
  --surface: #f2f1ee;
  --surface-inverse: #111111;
  --ink: #111111;
  --ink-inverse: #f2f1ee;
  --ink-muted: #5e5b57;
  --ink-muted-inverse: #a8a49d;
  --accent: #c8360a;            /* orange for links and small text on paper */
  --accent-inverse: #ff4f00;
  --hairline: #cfccc6;
  --hairline-inverse: #2e2d2b;
  --line: #8a8782;

  --font-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Menlo, Consolas, monospace;

  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 48px; --space-6: 80px;
  --page: 1200px;
  --gutter: max(var(--space-3), env(safe-area-inset-left, 0px));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 16px/26px var(--font-body); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brand-black); outline-offset: 3px; }
.inverse :focus-visible, .site-header :focus-visible, .call-bar :focus-visible { outline-color: var(--brand-paper); }

/* Type styles (names match the design system) */
.t-headline { font: 600 40px/44px var(--font-display); letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.t-name     { font: 600 20px/28px var(--font-display); margin: 0; }
.t-subhead  { font: 500 14px/20px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.t-specs    { font: 400 14px/20px var(--font-mono); letter-spacing: .02em; text-transform: uppercase; }
.t-label    { font: 500 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.t-listing  { font: 400 17px/26px var(--font-body); }
.muted { color: var(--ink-muted); }
.inverse .muted { color: var(--ink-muted-inverse); }

.wrap { max-width: var(--page); margin: 0 auto; padding-inline: var(--gutter); }
.inverse { background: var(--surface-inverse); color: var(--ink-inverse); }

/* Buttons: square, mono caps */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-4);
  font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--brand-black); background: var(--brand-black); color: var(--brand-paper); }
.btn:hover { background: transparent; color: var(--brand-black); }
.btn.ghost { background: transparent; color: var(--brand-black); }
.btn.ghost:hover { background: var(--brand-black); color: var(--brand-paper); }
.inverse .btn { background: var(--brand-paper); color: var(--brand-black); border-color: var(--brand-paper); }
.inverse .btn:hover { background: transparent; color: var(--brand-paper); }
.inverse .btn.ghost { background: transparent; color: var(--brand-paper); }
.inverse .btn.ghost:hover { background: var(--brand-paper); color: var(--brand-black); }

/* Orange signal: status tags and short rules, about 5% of any page */
.status, .status-chip { background: var(--brand-orange); color: var(--brand-black); }
.rule { display: block; width: 48px; height: 4px; background: var(--brand-orange); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--brand-black); color: var(--brand-paper); }
.site-header .wrap { display: flex; align-items: center; gap: var(--space-4); min-height: 72px; }
.site-header .logo img { width: 200px; }
.nav { display: flex; gap: var(--space-4); margin-left: auto; }
.nav a { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: var(--space-2) 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--brand-paper); }
.nav a[aria-current] { border-bottom-color: var(--brand-orange); }
.header-phone { font: 500 13px/1 var(--font-mono); letter-spacing: .04em; text-decoration: none; white-space: nowrap; padding-left: var(--space-4); border-left: 1px solid var(--hairline-inverse); }
.menu-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--brand-paper); color: var(--brand-paper);
  min-height: 40px; padding: 0 var(--space-3); font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }

/* Hero: photo with a paper copy panel */
.hero { position: relative; background: var(--brand-black); }
.hero-photo { width: 100%; height: min(72vh, 680px); min-height: 420px; object-fit: cover; }
.hero-panel { position: absolute; left: max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter))); bottom: var(--space-5);
  background: var(--brand-paper); color: var(--brand-black); padding: var(--space-5); max-width: 540px; display: grid; gap: var(--space-3); }
.hero-panel .t-headline { font-size: 48px; line-height: 50px; }
.hero-panel .t-listing { margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.photo-credit { position: absolute; right: var(--gutter); bottom: var(--space-3); color: var(--brand-paper); background: rgba(17, 17, 17, .6); padding: 4px 8px; }

/* Sections */
section { padding-block: var(--space-6); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.section-head .t-subhead { margin-top: var(--space-2); }

/* Listing cards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
.card { display: grid; gap: var(--space-2); text-decoration: none; }
.card-photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--concrete); }
.card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card:hover .card-photo img { transform: scale(1.03); }
.card .status { position: absolute; left: 0; top: 0; padding: 6px 10px; }
.card h3 { font: 600 20px/26px var(--font-display); letter-spacing: -.01em; margin: var(--space-2) 0 0; }
.card .addr { margin: 0; font: 400 13px/20px var(--font-mono); letter-spacing: .02em; text-transform: uppercase; color: var(--ink-muted); }
.facts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0; padding: 0; list-style: none;
  font: 400 13px/20px var(--font-mono); letter-spacing: .02em; text-transform: uppercase; }
.facts li + li::before { content: "·"; margin-right: var(--space-2); color: var(--ink-muted); }

/* Yerba Buena Lofts band */
.ybl { padding: 0; }
.ybl .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; padding: 0; max-width: none; }
.ybl-photo img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.ybl-copy { padding: var(--space-6) var(--space-5); display: grid; gap: var(--space-3); align-content: center; max-width: 560px; }
.ybl-copy p { margin: 0; }
.stat { display: flex; gap: var(--space-5); padding-block: var(--space-3); border-block: 1px solid var(--hairline-inverse); }
.stat b { display: block; font: 600 44px/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-bottom: var(--space-1); }

/* About + review, on concrete */
.about { background: var(--concrete); }
.about .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.about .muted { color: var(--ink); }
.about-copy { display: grid; gap: var(--space-3); }
.about-copy p { margin: 0; max-width: 60ch; }
.quote { margin: 0; display: grid; gap: var(--space-3); }
.quote blockquote { margin: 0; font: 500 28px/36px var(--font-display); letter-spacing: -.01em; text-wrap: pretty; }

/* Contact band */
.contact-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.contact-band .t-specs a { text-decoration: none; }
.contact-band .t-specs a:hover { color: var(--accent-inverse); }

/* Footer */
.site-footer { padding-block: var(--space-5); border-top: 1px solid var(--hairline); }
.site-footer .wrap { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-5); align-items: start; }
.site-footer .logo img { width: 180px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { color: var(--accent); }
.footer-meta { display: grid; gap: var(--space-1); text-align: right; font: 400 12px/18px var(--font-mono); letter-spacing: .02em; text-transform: uppercase; color: var(--ink-muted); }
.legal { font-size: 11px; line-height: 16px; color: var(--ink-muted); margin-top: var(--space-4); grid-column: 1 / -1; }

@media (max-width: 960px) {
  .nav, .header-phone { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; }
  .site-header.open .nav { display: grid; position: absolute; top: 72px; left: 0; right: 0; background: var(--brand-black); padding: var(--space-3) var(--gutter) var(--space-4); gap: var(--space-3); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ybl .wrap, .about .wrap { grid-template-columns: 1fr; }
  .about .wrap { gap: var(--space-5); }
  .ybl-copy { padding: var(--space-5) var(--gutter); max-width: none; }
  .ybl-photo img { min-height: 280px; max-height: 420px; }
  .site-footer .wrap { grid-template-columns: 1fr; }
  .footer-meta { text-align: left; }
}
@media (max-width: 600px) {
  .site-header .logo img { width: 160px; }
  .hero-photo { height: 56vh; min-height: 320px; }
  .hero-panel { position: static; max-width: none; padding: var(--space-5) var(--gutter); }
  .hero-panel .t-headline { font-size: 36px; line-height: 40px; }
  .photo-credit { display: none; }
  .t-headline { font-size: 32px; line-height: 36px; }
  .cards { grid-template-columns: 1fr; }
  section { padding-block: var(--space-5); }
  .quote blockquote { font-size: 23px; line-height: 31px; }
}
@media (prefers-reduced-motion: reduce) { .card-photo img { transition: none; } }

/* ---------- Listing page ---------- */
.listing-cover { background: var(--brand-black); }
.listing-cover img { width: 100%; height: min(70vh, 720px); min-height: 360px; object-fit: cover; }
.listing-top { padding-top: var(--space-5); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--ink-muted); margin-bottom: var(--space-4); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.listing-title { display: grid; gap: var(--space-3); justify-items: start; padding-bottom: var(--space-5); border-bottom: 1px solid var(--hairline); }
.status-chip { padding: 6px 10px; margin: 0; }
.listing-title .t-headline { font-size: 56px; line-height: 58px; letter-spacing: -.025em; }
.facts-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); list-style: none; margin: var(--space-2) 0 0; padding: 0;
  font: 400 16px/24px var(--font-mono); letter-spacing: .02em; text-transform: uppercase; }
.facts-row li + li::before { content: "·"; margin-right: var(--space-3); color: var(--ink-muted); }

.listing-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-6); padding-block: var(--space-5) var(--space-6); align-items: start; }
.description { max-width: 68ch; }
.description p { margin: 0 0 var(--space-4); }
.description strong.lead { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; margin-right: 6px; }
.description a:not(.btn) { color: var(--accent); text-underline-offset: 3px; }
.video-links { padding: 0; list-style: none; }
.listing-side { position: sticky; top: 96px; display: grid; gap: var(--space-4); }
.side-box { padding: var(--space-4); display: grid; gap: var(--space-2); background: var(--concrete); }
.side-box p { margin: 0; }
.contact-box { background: var(--surface-inverse); padding: var(--space-5) var(--space-4); }
.contact-box .t-specs a { text-decoration: none; font-size: 18px; }
.side-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.text-link { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.gallery-section { padding-top: 0; }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.g-item { padding: 0; border: 0; background: var(--concrete); aspect-ratio: 4 / 3; overflow: hidden; cursor: zoom-in; }
.g-item:first-child { grid-column: span 2; grid-row: span 2; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.g-item:hover img { opacity: .88; }

.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(17, 17, 17, .97); color: var(--brand-paper); }
.lightbox::backdrop { background: rgba(17, 17, 17, .9); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: calc(100vw - 140px); max-height: calc(100vh - 120px); object-fit: contain; }
.lb-count { position: absolute; left: var(--space-4); top: var(--space-4); margin: 0; }
.lb-close { position: absolute; right: var(--space-4); top: var(--space-3); background: none; color: var(--brand-paper); border: 1px solid var(--brand-paper); min-height: 40px; padding: 0 var(--space-3); cursor: pointer; }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 72px; background: none; border: 0; color: var(--brand-paper); font: 300 48px/1 var(--font-display); cursor: pointer; }
.lb-prev { left: var(--space-2); } .lb-next { right: var(--space-2); }

.similar { border-top: 1px solid var(--hairline); }

@media (max-width: 960px) {
  .listing-body { grid-template-columns: 1fr; gap: var(--space-5); }
  .listing-side { position: static; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .listing-cover img { height: 46vh; min-height: 260px; }
  .listing-title .t-headline { font-size: 36px; line-height: 40px; }
  .facts-row { font-size: 14px; gap: var(--space-1) var(--space-2); }
  .facts-row li + li::before { margin-right: var(--space-2); }
  .lightbox img { max-width: 100vw; max-height: calc(100vh - 140px); }
  .lb-prev, .lb-next { top: auto; bottom: var(--space-3); transform: none; }
}

/* Call / Text / Email bar on listing pages, phones only */
.call-bar { display: none; }
@media (max-width: 600px) {
  .call-bar { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--brand-black); border-top: 1px solid var(--hairline-inverse); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .call-bar a { display: flex; align-items: center; justify-content: center; min-height: 56px; color: var(--brand-paper); text-decoration: none;
    font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
  .call-bar a + a { border-left: 1px solid var(--hairline-inverse); }
  .call-bar a:first-child { background: var(--brand-orange); color: var(--brand-black); }
  .call-bar a:active { opacity: .85; }
  body:has(.call-bar) { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Content pages ---------- */
.page-hero { background: var(--brand-black); }
.page-hero img { width: 100%; height: min(52vh, 520px); min-height: 280px; object-fit: cover; }
.page-intro { padding-block: var(--space-5) var(--space-4); }
.page-intro .wrap { display: grid; gap: var(--space-3); justify-items: start; }
.page-intro .t-headline { font-size: 56px; line-height: 58px; letter-spacing: -.025em; }
.page-intro .t-listing { margin: 0; max-width: 60ch; }
.page-intro a:not(.btn) { color: var(--accent); }
.page-body { padding-bottom: var(--space-6); }
.page-body.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-6); align-items: start; }
.prose { max-width: 68ch; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--space-4); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: var(--space-2); }
.prose h2 { font: 600 28px/34px var(--font-display); letter-spacing: -.02em; margin: var(--space-5) 0 var(--space-3); }
.prose h3 { font: 500 14px/20px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; margin: var(--space-4) 0 var(--space-2); }
.prose a:not(.btn) { color: var(--accent); text-underline-offset: 3px; }
.prose img { margin: var(--space-4) 0; }
.prose strong.lead { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; margin-right: 6px; }
.page-aside { position: sticky; top: 96px; display: grid; gap: var(--space-4); }
.page-aside .side-box { gap: var(--space-2); }
.page-aside .side-box .t-label.muted { margin-top: var(--space-2); }
.page-aside .side-box .t-label.muted:first-child { margin-top: 0; }
.page-aside a { color: inherit; }
.headshot { width: 120px; height: 120px; object-fit: cover; margin-bottom: var(--space-2); }

.reviews { background: var(--concrete); }
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); }
.review-grid blockquote { font: 500 19px/28px var(--font-display); letter-spacing: -.005em; }

/* Forms */
.field { display: grid; gap: var(--space-1); }
.field input, .field select, .field textarea { font: 400 16px/24px var(--font-body); color: var(--ink); background: var(--brand-paper);
  border: 1px solid var(--line); border-radius: 2px; padding: 10px 12px; min-height: 44px; width: 100%; }
.field textarea { resize: vertical; }
.contact-form { background: var(--concrete); gap: var(--space-3); }
.contact-form .btn { justify-self: start; }

/* Listings index */
.listings { padding-top: 0; }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3) var(--space-4); padding: var(--space-4) 0; border-block: 1px solid var(--hairline); margin-bottom: var(--space-3); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-right: auto; }
.chip { min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer;
  font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.chip span { color: var(--ink-muted); margin-left: 4px; }
.chip[aria-pressed="true"] { background: var(--brand-black); border-color: var(--brand-black); color: var(--brand-paper); }
.chip[aria-pressed="true"] span { color: var(--ink-muted-inverse); }
.filters .field { min-width: 220px; }
.result-count { margin: 0 0 var(--space-4); }
.no-results { padding-block: var(--space-5); }
.no-results .text-link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; }
.more-wrap { display: flex; justify-content: center; margin-top: var(--space-5); }
.card.is-hidden { display: none; }
.no-photo { display: grid; place-items: center; width: 100%; height: 100%; background: var(--concrete); }
.no-photo img { width: 56px; height: 56px; opacity: .8; }
.listing-cover.no-cover { height: 16px; background: var(--brand-black); }

@media (max-width: 960px) {
  .page-body.with-aside { grid-template-columns: 1fr; gap: var(--space-5); }
  .page-aside { position: static; }
  .review-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .page-intro .t-headline { font-size: 38px; line-height: 42px; }
  .page-hero img { height: 36vh; min-height: 220px; }
  .filters .field { min-width: 0; flex: 1 1 100%; }
  .chips { margin-right: 0; }
}

/* Price (set in the admin screen) */
.price { margin: 0; font: 600 20px/26px var(--font-display); letter-spacing: -.01em; }
.listing-title .price { font-size: 28px; line-height: 34px; }
.card .price { font-size: 17px; line-height: 22px; }