/* =========================================================================
   The Brokerage Collective — brand stylesheet (brand build #2)

   Built to Brit's approved mock (tenant-sites/brokeragecollective/
   mock-2026-10-10/index.html, 2026-10-10): italic serif headlines with a short
   rule beneath, tracked small-caps labels, flat rectangular buttons, photos
   that fade into the text panel. Every class is `tbc-` prefixed — the shared
   site's global.css owns `.btn`, `.card`, `.section`, `.container` …

   Linked ONLY by this brand's build (BaseLayout, brand.branding.stylesheetUrl)
   and pruned from every other brand's dist/ — docs/site-brands.md "Brand build
   #2". A static file on purpose: the editorial chrome and pages are imported
   into shared modules (BaseLayout, the brand-page dispatcher), and a
   stylesheet Astro bundles from a component would land on Homestead pages too.

   The shared consumer surfaces (search, listing pages, legal pages, the
   inquiry form) are repainted by the palette overrides on <html>
   (brands.static.ts) plus the `body.tbc` type swap below; the section at the
   end adds a few touches for them.
   ========================================================================= */

/* ── Type: self-hosted OFL faces (latin subset, from @fontsource 5.3.0) ──── */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/brand/brokerage-collective/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/brand/brokerage-collective/fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('/brand/brokerage-collective/fonts/eb-garamond-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('/brand/brokerage-collective/fonts/eb-garamond-latin-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/brand/brokerage-collective/fonts/montserrat-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/brand/brokerage-collective/fonts/montserrat-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ── Tokens: the mock's palette, exactly ─────────────────────────────────── */
:root {
  --tbc-cream: #F1EDE4;
  --tbc-paper: #F8F6F0;
  --tbc-wash: #E5DFD2;
  --tbc-line: #D8D0C2;
  --tbc-walnut: #503524;
  --tbc-tan: #94704A;
  --tbc-tan-light: #D2BA9C;
  --tbc-oxblood: #2C0D0D;
  --tbc-navy: #071426;
  --tbc-slate: #18283E;
  --tbc-burgundy: #651D32;
  --tbc-burgundy-deep: #4A1525;
  --tbc-ink-soft: #4A3A2E;
  --tbc-rule-on-dark: #2B3A50;
  --tbc-on-dark-muted: #CFC8BB;
  /* The home hero's dark panel. Brit's open question: oxblood (the mock) or
     burgundy — a one-line change here. The fade below reads the same value. */
  --tbc-hero-panel: var(--tbc-oxblood);
  --tbc-hero-panel-rgb: 44, 13, 13;

  --tbc-display: 'Cormorant Garamond', Georgia, serif;
  --tbc-text: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --tbc-caps-font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --tbc-gutter: clamp(16px, 4vw, 56px);
  --tbc-h1: clamp(42px, 5.4vw, 78px);
  --tbc-h2: clamp(34px, 3.6vw, 52px);
  --tbc-h3: clamp(26px, 2.3vw, 32px);
}

body.tbc {
  /* The shared components read these — her type everywhere on her site. */
  --font-display: var(--tbc-display);
  --font-serif: var(--tbc-display);
  --font-sans: var(--tbc-text);
  background: var(--tbc-cream);
  color: var(--tbc-navy);
  font-family: var(--tbc-text);
  font-size: 18px;
  line-height: 1.6;
}
body.tbc h1,
body.tbc h2,
body.tbc h3 {
  font-family: var(--tbc-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.08;
  text-transform: none;
  text-wrap: balance;
  color: inherit;
}
body.tbc h4 { font-family: var(--tbc-display); font-weight: 500; letter-spacing: 0; text-transform: none; color: inherit; }
body.tbc a:hover { opacity: 1; }
body.tbc :focus-visible { outline: 1px solid var(--tbc-tan); outline-offset: 4px; border-radius: 0; }
body.tbc main { display: block; }

.tbc-caps {
  font-family: var(--tbc-caps-font); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; line-height: 1.7;
}
.tbc-eyebrow { display: block; color: var(--tbc-tan); margin-bottom: 20px; }
.tbc-dash { display: block; width: 30px; height: 1px; background: var(--tbc-tan); margin: 24px 0; border: 0; }
.tbc-dash--flush { margin-top: 0; }
.tbc-btn {
  display: inline-block; padding: 15px 28px; background: var(--tbc-burgundy); color: var(--tbc-cream);
  border: 1px solid var(--tbc-burgundy); border-radius: 0;
  font-family: var(--tbc-caps-font); font-size: 10.5px; font-weight: 500; letter-spacing: 0.24em;
  text-transform: uppercase; line-height: 1.4; cursor: pointer; text-align: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.tbc-btn:hover { background: var(--tbc-burgundy-deep); border-color: var(--tbc-burgundy-deep); }
.tbc-btn:disabled { opacity: 0.6; cursor: default; }
.tbc-btn--ghost { background: transparent; border-color: var(--tbc-tan-light); color: var(--tbc-cream); }
.tbc-btn--ghost:hover { background: var(--tbc-cream); border-color: var(--tbc-cream); color: var(--tbc-burgundy); }
.tbc-more {
  font-family: var(--tbc-caps-font); font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; border-bottom: 1px solid var(--tbc-tan); padding-bottom: 5px; white-space: nowrap;
}
a.tbc-more:hover { color: var(--tbc-tan); }
.tbc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.tbc-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }

.tbc-wrap { max-width: 1400px; margin: 0 auto; padding-inline: var(--tbc-gutter); }
.tbc-section { padding-block: clamp(64px, 8vw, 120px); }
.tbc-section--flush-top { padding-top: 0; }
/* The live listings strip stays hidden when search has nothing to show; the
   section after it then needs its own top spacing back. */
.tbc-featured[hidden] + .tbc-section--flush-top { padding-top: clamp(64px, 8vw, 120px); }
.tbc-lede { color: var(--tbc-ink-soft); max-width: 28em; font-size: 19px; }
.tbc-lede + .tbc-lede { margin-top: 1em; }
.tbc-body { color: var(--tbc-ink-soft); max-width: 30em; margin-bottom: 30px; }
.tbc-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.tbc-split > * { min-width: 0; }
.tbc-split h2 { font-size: var(--tbc-h2); }
.tbc-two { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.tbc-two > * { min-width: 0; }
.tbc-page-head h1 { font-size: var(--tbc-h1); }
.tbc-page-head--end { align-items: end; }
.tbc-page-head .tbc-eyebrow { color: var(--tbc-walnut); margin-bottom: 22px; }

/* ── Header: wordmark, then every page across one bar ────────────────────── */
.tbc-header { background: var(--tbc-cream); }
.tbc-header__brand { display: block; padding-block: 18px 14px; }
.tbc-header__brand img { width: 220px; height: auto; margin: 0 auto; }
.tbc-bar { max-width: 1400px; margin: 0 auto; padding-inline: var(--tbc-gutter); }
.tbc-bar__row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 2px clamp(16px, 2.6vw, 40px); padding-block: 10px;
  border-top: 1px solid var(--tbc-line); border-bottom: 1px solid var(--tbc-line);
}
.tbc-bar__row > a,
.tbc-drop summary {
  font-family: var(--tbc-caps-font); font-size: 10px; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; white-space: nowrap; padding: 8px 0;
}
.tbc-bar__row > a:hover, .tbc-drop summary:hover, .tbc-drop[open] summary { color: var(--tbc-tan); }
.tbc-bar__row > a[aria-current="page"], .tbc-drop summary.is-current { box-shadow: 0 1px 0 var(--tbc-tan); }
.tbc-bar__flat { display: none; }
.tbc-drop { position: relative; }
.tbc-drop summary { list-style: none; cursor: pointer; }
.tbc-drop summary::-webkit-details-marker { display: none; }
.tbc-drop summary::after {
  content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 9px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}
.tbc-drop__menu {
  position: absolute; z-index: 50; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  min-width: 230px; display: grid; background: var(--tbc-paper); border: 1px solid var(--tbc-line); padding: 8px 0;
}
.tbc-drop__menu a {
  padding: 13px 22px; text-align: center;
  font-family: var(--tbc-caps-font); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
}
.tbc-drop__menu a:hover, .tbc-drop__menu a[aria-current="page"] { color: var(--tbc-tan); }

/* Sign-in key (Brit's list 2026-10-12, C6): top right, level with the
   wordmark — a brass key beside SIGN IN, opening Client / Agent Login. */
.tbc-header { position: relative; }
.tbc-login { position: absolute; z-index: 60; top: 22px; right: var(--tbc-gutter); }
.tbc-login summary { display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.tbc-login summary::after { margin-left: 0; }
.tbc-login__key { color: var(--tbc-tan); flex-shrink: 0; }
.tbc-login .tbc-drop__menu { left: auto; right: 0; transform: none; min-width: 190px; }
.tbc-login .tbc-drop__menu a { white-space: nowrap; }

/* Below 760px the mock's wrap would stack three rows of links above the page.
   Instead: ONE line that scrolls sideways (fading at the edge to say so), and
   the drop-down's two links sit in the line itself — a menu inside a scroller
   would be clipped. */
@media (max-width: 760px) {
  .tbc-header__brand { padding-block: 14px 10px; }
  .tbc-header__brand img { width: 168px; }
  .tbc-bar { padding-inline: 0; }
  .tbc-bar__row {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
    gap: 0 22px; padding: 6px 28px 6px var(--tbc-gutter); scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }
  .tbc-bar__row::-webkit-scrollbar { display: none; }
  .tbc-bar__row > a { padding: 12px 0; flex: none; }
  .tbc-drop { display: none; }
  .tbc-bar__flat { display: inline; }
}
/* The key is NOT the nav drop-down the 760px rule hides; on a phone it sits
   on its own line above the wordmark, right-aligned (her mock). */
@media (max-width: 760px) { .tbc-header details.tbc-login { display: block; } }
@media (max-width: 600px) {
  .tbc-header details.tbc-login { position: relative; top: auto; right: auto; width: max-content; margin: 12px var(--tbc-gutter) 0 auto; }
}

/* ── Home hero: the photograph fades into the dark panel behind the copy ──── */
.tbc-hero { position: relative; overflow: hidden; background: var(--tbc-hero-panel); color: var(--tbc-cream); }
.tbc-hero__copy {
  position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  width: min(48%, 640px); min-height: clamp(540px, 48vw, 700px);
  padding: clamp(40px, 6vw, 88px) clamp(24px, 6vw, 96px);
}
.tbc-hero h1 { font-size: var(--tbc-h1); color: var(--tbc-cream); }
.tbc-hero__creed { font-family: var(--tbc-display); font-style: italic; font-weight: 500; font-size: clamp(21px, 2vw, 28px); line-height: 1.25; margin-top: 20px; }
.tbc-hero__trio { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 26px 0 34px; color: var(--tbc-tan-light); }
.tbc-hero__trio span:not(:last-child)::after { content: '|'; margin-left: 16px; color: var(--tbc-tan); }
.tbc-hero__place { color: var(--tbc-on-dark-muted); max-width: 12em; }
.tbc-hero__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 72%; margin: 0; }
.tbc-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tbc-hero__photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgb(var(--tbc-hero-panel-rgb)) 0%, rgba(var(--tbc-hero-panel-rgb), 0.82) 14%, rgba(var(--tbc-hero-panel-rgb), 0.45) 30%,
    rgba(var(--tbc-hero-panel-rgb), 0.12) 46%, rgba(var(--tbc-hero-panel-rgb), 0) 58%);
}

/* ── Search band ─────────────────────────────────────────────────────────── */
.tbc-search-band { background: var(--tbc-paper); border-bottom: 1px solid var(--tbc-line); }
.tbc-search { display: flex; align-items: center; gap: 24px; max-width: 1040px; margin: 0 auto; padding-block: 30px 10px; }
.tbc-search .tbc-caps { color: var(--tbc-walnut); white-space: nowrap; }
.tbc-search input {
  flex: 1 1 0%; min-width: 0; border: 0; border-bottom: 1px solid var(--tbc-navy); background: none; padding: 12px 0;
  font-family: var(--tbc-text); font-size: 22px; font-style: italic; color: var(--tbc-navy); border-radius: 0;
}
.tbc-search input::placeholder { color: var(--tbc-ink-soft); opacity: 0.75; }
.tbc-search input:focus { outline: none; border-bottom-color: var(--tbc-tan); }
.tbc-search-hint { max-width: 1040px; margin: 0 auto; padding-bottom: 24px; font-style: italic; font-size: 16px; color: var(--tbc-ink-soft); }

/* ── Buy / Sell / Build ──────────────────────────────────────────────────── */
.tbc-trio { display: grid; grid-template-columns: repeat(3, 1fr); }
.tbc-trio a { display: block; padding: 8px clamp(20px, 3.4vw, 52px); border-left: 1px solid var(--tbc-line); min-width: 0; }
.tbc-trio a:first-child { border-left: 0; padding-left: 0; }
.tbc-trio .tbc-caps { color: var(--tbc-tan); }
.tbc-trio h3 { font-size: var(--tbc-h3); margin-top: 16px; }
.tbc-trio p { margin: 14px 0 22px; color: var(--tbc-ink-soft); font-size: 17px; max-width: 24em; }
.tbc-trio a:hover h3 { color: var(--tbc-tan); }

/* ── Neighborhoods: the skyline fades into the page behind the heading ───── */
.tbc-hoods { background: var(--tbc-paper); border-top: 1px solid var(--tbc-line); border-bottom: 1px solid var(--tbc-line); }
.tbc-hoods__head { position: relative; min-height: clamp(400px, 38vw, 540px); }
.tbc-hoods__head > div { position: relative; z-index: 1; width: min(42%, 480px); padding-block: clamp(28px, 4.5vw, 64px); }
.tbc-hoods__head h2 { font-size: var(--tbc-h1); }
.tbc-hoods__head .tbc-caps { display: block; color: var(--tbc-walnut); margin-bottom: 22px; }
.tbc-hoods__head p { color: var(--tbc-ink-soft); max-width: 26em; margin-bottom: 30px; }
.tbc-hoods__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 76%; margin: 0; }
.tbc-hoods__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.tbc-hoods__photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(248, 246, 240) 0%, rgba(248, 246, 240, 0.85) 14%, rgba(248, 246, 240, 0.45) 30%, rgba(248, 246, 240, 0.12) 46%, rgba(248, 246, 240, 0) 58%);
}
.tbc-rail { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(4px, 1vw, 14px); margin-top: clamp(28px, 3.5vw, 48px); }
.tbc-rail__track {
  --tbc-rail-gap: clamp(12px, 1.6vw, 24px);
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--tbc-rail-gap)) / 4); gap: var(--tbc-rail-gap);
  min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.tbc-rail__track::-webkit-scrollbar { display: none; }
.tbc-rail__btn {
  width: 40px; height: 44px; border: 0; background: none; color: var(--tbc-navy);
  font-family: var(--tbc-text); font-size: 30px; line-height: 1; cursor: pointer; padding: 0 0 26px;
}
.tbc-rail__btn:hover { color: var(--tbc-tan); }
.tbc-rail__btn:disabled { opacity: 0.25; cursor: default; color: var(--tbc-navy); }
.tbc-hood { display: block; min-width: 0; scroll-snap-align: start; }
.tbc-hood__photo { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.tbc-hood__name { display: block; margin-top: 16px; text-align: center; }
.tbc-hood:hover .tbc-hood__name { color: var(--tbc-tan); }

/* ── New on the market (live LARMLS cards) ───────────────────────────────── */
.tbc-list-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: clamp(32px, 4vw, 52px); }
.tbc-list-head .tbc-caps { display: block; color: var(--tbc-tan); margin-bottom: 18px; }
.tbc-list-head h2 { font-size: var(--tbc-h2); }
.tbc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.tbc-card { display: block; min-width: 0; background: var(--tbc-paper); border: 1px solid var(--tbc-line); padding: 12px 12px 20px; }
.tbc-card__media { background: var(--tbc-wash); aspect-ratio: 4 / 3; overflow: hidden; display: grid; place-items: center; color: var(--tbc-walnut); }
.tbc-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tbc-card__addr { font-family: var(--tbc-display); font-style: italic; font-weight: 500; font-size: 23px; line-height: 1.2; margin: 18px 6px 0; }
.tbc-card__meta { font-size: 15px; color: var(--tbc-ink-soft); margin: 6px 6px 0; }
.tbc-card__price { font-size: 19px; margin: 10px 6px 0; font-variant-numeric: lining-nums tabular-nums; }
.tbc-card__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 16px 6px 0; padding-top: 14px; border-top: 1px solid var(--tbc-line); }
/* LAR IDX: the listing brokerage line is the SAME size as the card's other
   text (15px), never a recessed footnote. */
.tbc-card__courtesy { font-size: 15px; color: var(--tbc-ink-soft); }
.tbc-card:hover .tbc-more { color: var(--tbc-tan); }
.tbc-idx { margin-top: 40px; font-size: 13px; line-height: 1.6; color: var(--tbc-ink-soft); max-width: 70em; }
.tbc-idx p + p { margin-top: 6px; }

/* ── Portrait, paths, invitation, my home ────────────────────────────────── */
.tbc-portrait { width: 100%; max-width: 380px; justify-self: center; margin: 0; }
.tbc-portrait img { width: 100%; height: auto; aspect-ratio: 1320 / 1304; object-fit: cover; }
.tbc-portrait--tall img { aspect-ratio: 4 / 5; }
.tbc-portrait figcaption span { white-space: nowrap; }
.tbc-portrait figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 14px; color: var(--tbc-walnut); }

/* ── Home: Britllin walking (idea wMlrO8noWz2WiSUqkr9n, item 2) ───────────
   Applies only once photos/britllin-walking.jpg is in the repo (photos.ts);
   until then the spot keeps today's portrait. Shown whole at its own 3:2,
   never cropped, its left and right edges fading into the page (transparent
   0%, solid 20%-82%, transparent 100%); the caption sits under the solid part. */
.tbc-portrait.tbc-portrait--walk { max-width: 660px; }
.tbc-portrait--walk img {
  aspect-ratio: auto; object-fit: fill;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 82%, transparent 100%);
}
.tbc-portrait--walk figcaption { margin-inline: 20% 18%; }
@media (max-width: 760px) {
  .tbc-portrait.tbc-portrait--walk { max-width: none; justify-self: stretch; }
}
/* ── end: Home, Britllin walking ── */
.tbc-paths a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0;
  border-top: 1px solid var(--tbc-line); font-family: var(--tbc-display); font-style: italic; font-weight: 500; font-size: 23px;
}
.tbc-paths a:last-child { border-bottom: 1px solid var(--tbc-line); }
.tbc-paths a:hover { color: var(--tbc-tan); }
.tbc-paths span:last-child { font-style: normal; font-size: 18px; color: var(--tbc-tan); }
.tbc-agents-invite { border-top: 1px solid var(--tbc-line); }
.tbc-myhome { background: var(--tbc-walnut); color: var(--tbc-cream); }
.tbc-myhome .tbc-eyebrow { color: var(--tbc-tan-light); }
.tbc-myhome .tbc-body { color: #E4DCCF; }
.tbc-myhome .tbc-dash { background: var(--tbc-tan-light); }

/* ── In Their Words: the heading and the three Google reviews (no video) ── */
.tbc-stories-sec { background: var(--tbc-paper); border-top: 1px solid var(--tbc-line); }
.tbc-stories-top { display: block; }
.tbc-stories-top > * { min-width: 0; }
.tbc-stories-top h2 { font-size: var(--tbc-h1); }
.tbc-stories-top p { color: var(--tbc-ink-soft); max-width: 26em; }
.tbc-stories { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 48px); margin-top: clamp(40px, 5vw, 72px); }
.tbc-story { border-top: 1px solid var(--tbc-navy); padding-top: 22px; min-width: 0; margin: 0; }
.tbc-story blockquote { margin: 0; font-family: var(--tbc-display); font-style: italic; font-weight: 500; font-size: clamp(22px, 2vw, 27px); line-height: 1.3; color: var(--tbc-ink-soft); }
.tbc-story figcaption { display: block; margin-top: 18px; color: var(--tbc-walnut); }
.tbc-story--lead { grid-column: 1 / -1; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.tbc-story--lead > * { min-width: 0; }
.tbc-story .tbc-story__pull { font-size: clamp(27px, 3vw, 42px); line-height: 1.18; color: var(--tbc-navy); }
.tbc-story__full p { font-size: 18px; line-height: 1.65; color: var(--tbc-ink-soft); }
.tbc-story__full p + p { margin-top: 1em; }
.tbc-story__stars { color: var(--tbc-tan); letter-spacing: 0.12em; margin-right: 10px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.tbc-footer { background: var(--tbc-navy); color: var(--tbc-cream); padding-block: clamp(48px, 6vw, 80px) 28px; }
.tbc-footer__inner { max-width: 1400px; margin: 0 auto; padding-inline: var(--tbc-gutter); }
.tbc-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; }
.tbc-footer__top > * { min-width: 0; }
.tbc-footer__id { display: flex; gap: 24px; align-items: flex-start; }
.tbc-footer__id img { width: 112px; height: 112px; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.tbc-footer__id > div { min-width: 0; }
/* 22 TAC 535.155: the brokerage name stays large (28px) on every page. */
.tbc-footer__brand { font-family: var(--tbc-display); font-style: italic; font-weight: 500; font-size: 28px; line-height: 1.15; }
.tbc-footer__tag { color: var(--tbc-tan-light); margin-top: 8px; }
.tbc-footer__contact { font-style: normal; font-size: 16px; line-height: 1.6; color: var(--tbc-on-dark-muted); margin-top: 14px; overflow-wrap: anywhere; }
.tbc-footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 16px; }
.tbc-footer__links .tbc-caps { color: var(--tbc-tan-light); margin-bottom: 8px; }
.tbc-footer a:hover { color: var(--tbc-tan-light); }
.tbc-footer__social { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--tbc-rule-on-dark); }
.tbc-footer__social .tbc-caps:first-child { color: var(--tbc-tan-light); }
.tbc-footer__eho { display: flex; gap: 20px; align-items: flex-start; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--tbc-rule-on-dark); color: var(--tbc-on-dark-muted); }
.tbc-footer__eho img { width: 60px; height: auto; flex-shrink: 0; }
.tbc-footer__eho > div { min-width: 0; }
.tbc-footer__eho .tbc-caps { color: var(--tbc-cream); margin-bottom: 4px; }
.tbc-footer__eho p:not(.tbc-caps) { font-size: 15px; line-height: 1.55; max-width: 60em; }
/* TREC notices: never smaller than 12pt (16px), on every page. */
.tbc-footer__trec { display: flex; flex-wrap: wrap; gap: 10px 36px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--tbc-rule-on-dark); }
.tbc-footer__trec a { font-size: 16px; text-decoration: underline; text-underline-offset: 4px; }
.tbc-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--tbc-rule-on-dark); font-size: 14px; color: var(--tbc-on-dark-muted);
}
.tbc-footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }

/* ── Build ───────────────────────────────────────────────────────────────── */
.tbc-build-head { position: relative; min-height: clamp(460px, 42vw, 620px); }
.tbc-build-head > div:first-child { position: relative; z-index: 1; width: min(42%, 480px); padding-block: clamp(28px, 4.5vw, 64px); }
.tbc-build-head .tbc-eyebrow { color: var(--tbc-walnut); margin-bottom: 22px; }
.tbc-build-head h1 { font-size: var(--tbc-h1); }
.tbc-build-head p { color: var(--tbc-ink-soft); max-width: 26em; margin-bottom: 30px; }
.tbc-build-head__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 76%; margin: 0; }
.tbc-build-head__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.tbc-build-head__photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgb(241, 237, 228) 0%, rgba(241, 237, 228, 0.85) 14%, rgba(241, 237, 228, 0.45) 30%, rgba(241, 237, 228, 0.12) 46%, rgba(241, 237, 228, 0) 58%),
    linear-gradient(270deg, rgba(44, 13, 13, 0.88) 0%, rgba(44, 13, 13, 0.6) 14%, rgba(44, 13, 13, 0) 36%);
}
.tbc-build-words {
  position: absolute; z-index: 1; top: 0; bottom: 0; right: clamp(16px, 3vw, 44px);
  display: grid; gap: 22px; align-content: center; text-align: center; color: var(--tbc-cream);
}
.tbc-build-words .tbc-dash { margin: 6px auto; background: var(--tbc-tan-light); }
.tbc-build-words strong { font-weight: 500; color: var(--tbc-cream); }
.tbc-builder { background: var(--tbc-paper); border-top: 1px solid var(--tbc-line); border-bottom: 1px solid var(--tbc-line); }
.tbc-builder__plate { display: grid; place-items: center; min-height: 380px; padding: clamp(32px, 5vw, 72px); background: var(--tbc-cream); border: 1px solid var(--tbc-line); margin: 0; }
.tbc-builder__plate img { width: 100%; max-width: 400px; height: auto; }
.tbc-builder .tbc-eyebrow { color: var(--tbc-tan); }
/* Brit's revised featured-builder section (her list 2026-10-12, B3). */
.tbc-builder .tbc-split { align-items: start; }
.tbc-builder .tbc-split .tbc-body { margin-bottom: 1em; }
.tbc-builder__sub { font-family: var(--tbc-display); font-style: italic; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.25; margin-top: 10px; color: var(--tbc-walnut); }
.tbc-builder__kelly { display: flex; gap: 20px; align-items: center; margin: 26px 0; padding: 20px 0; border-top: 1px solid var(--tbc-line); border-bottom: 1px solid var(--tbc-line); }
.tbc-builder__kelly img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: center 12%; flex-shrink: 0; }
.tbc-builder__kelly p { min-width: 0; color: var(--tbc-ink-soft); max-width: 30em; }
.tbc-builder__close { font-family: var(--tbc-display); font-style: italic; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; margin-bottom: 28px; }
.tbc-builder__actions { gap: 14px; }
.tbc-btn--line { background: transparent; color: var(--tbc-burgundy); }
.tbc-btn--line:hover { background: var(--tbc-burgundy); border-color: var(--tbc-burgundy); color: var(--tbc-cream); }
.tbc-steps-head h2 { font-size: var(--tbc-h2); }
.tbc-steps-head .tbc-caps { display: block; color: var(--tbc-tan); margin-bottom: 18px; }
.tbc-steps-head p { color: var(--tbc-ink-soft); max-width: 32em; margin-top: 14px; }
.tbc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); margin-top: clamp(32px, 4vw, 52px); }
.tbc-step { border-top: 1px solid var(--tbc-navy); padding-top: 20px; min-width: 0; }
.tbc-step .tbc-caps { color: var(--tbc-tan); }
.tbc-step h3 { font-size: var(--tbc-h3); margin: 14px 0 10px; }
.tbc-step p { color: var(--tbc-ink-soft); font-size: 17px; }
.tbc-build-note {
  margin-top: clamp(40px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--tbc-line);
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; color: var(--tbc-ink-soft);
}
.tbc-sell-steps { background: var(--tbc-paper); border-top: 1px solid var(--tbc-line); border-bottom: 1px solid var(--tbc-line); }

/* ── Invest + forms ──────────────────────────────────────────────────────── */
.tbc-invest { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.tbc-invest > * { min-width: 0; }
.tbc-invest .tbc-eyebrow { color: var(--tbc-walnut); margin-bottom: 22px; }
.tbc-invest h1 { font-size: var(--tbc-h2); }
.tbc-direct { display: block; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--tbc-line); font-style: normal; line-height: 1.9; overflow-wrap: anywhere; }
.tbc-direct .tbc-caps { display: block; color: var(--tbc-tan); margin-bottom: 8px; }
.tbc-direct a { border-bottom: 1px solid var(--tbc-tan); }
.tbc-direct--flush { margin-top: 0; padding-top: 0; border-top: 0; }
.tbc-form-wrap { min-width: 0; }
.tbc-form { background: var(--tbc-paper); border: 1px solid var(--tbc-line); padding: clamp(22px, 3.4vw, 44px); display: grid; gap: 30px; }
.tbc-form[hidden] { display: none; }
.tbc-form h2 { font-size: var(--tbc-h3); }
.tbc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px clamp(18px, 2.4vw, 32px); }
.tbc-form__row > * { min-width: 0; }
.tbc-field { display: grid; gap: 6px; }
.tbc-field label, .tbc-q legend {
  font-family: var(--tbc-caps-font); font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; line-height: 1.6; color: var(--tbc-walnut);
}
.tbc-field input, .tbc-field textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--tbc-navy); background: none; padding: 8px 0;
  font-family: var(--tbc-text); font-size: 18px; color: var(--tbc-navy); border-radius: 0;
}
.tbc-field textarea { min-height: 96px; resize: vertical; border: 1px solid var(--tbc-line); padding: 10px 12px; background: var(--tbc-cream); }
.tbc-field input:focus, .tbc-field textarea:focus { outline: none; border-color: var(--tbc-tan); }
.tbc-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.tbc-q legend { padding: 0; margin-bottom: 12px; }
.tbc-q small { display: block; font-family: var(--tbc-text); font-style: italic; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--tbc-ink-soft); }
.tbc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tbc-chip { position: relative; display: inline-block; padding: 8px 15px; border: 1px solid var(--tbc-line); background: var(--tbc-cream); font-size: 16px; line-height: 1.3; cursor: pointer; }
.tbc-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tbc-chip:hover { border-color: var(--tbc-tan); }
.tbc-chip:has(input:checked) { background: var(--tbc-navy); border-color: var(--tbc-navy); color: var(--tbc-cream); }
.tbc-chip:has(input:focus-visible) { outline: 1px solid var(--tbc-tan); outline-offset: 3px; }
.tbc-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.tbc-form__sent { font-style: italic; color: var(--tbc-walnut); }
.tbc-form__sent a { border-bottom: 1px solid var(--tbc-tan); }
.tbc-form__fine { font-size: 14px; line-height: 1.55; color: var(--tbc-ink-soft); }
.tbc-form__fine a { text-decoration: underline; text-underline-offset: 3px; }
.tbc-form__error { padding: 10px 12px; font-size: 15px; color: var(--tbc-burgundy); border: 1px solid var(--tbc-line); border-left: 2px solid var(--tbc-burgundy); background: var(--tbc-cream); }
.tbc-form__error[hidden] { display: none; }

/* The shared ConsumerInquiryForm (Contact, Join, Sell) in the paper card.
   Its scoped styles are class + data-attribute (0,2,0); these out-rank them. */
.tbc-form--cif { gap: 0; }
body.tbc .tbc-form--cif .cif { margin-top: 0; }
body.tbc .tbc-form--cif .section-label {
  display: block; padding: 0; border: 0; color: var(--tbc-navy);
  font-family: var(--tbc-display); font-style: italic; font-weight: 500; font-size: var(--tbc-h3);
  letter-spacing: -0.01em; line-height: 1.08; text-transform: none;
}
body.tbc .tbc-form--cif .cif__form { gap: 22px; margin-top: 30px; }
body.tbc .tbc-form--cif .cif__label {
  font-family: var(--tbc-caps-font); font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; line-height: 1.6; color: var(--tbc-walnut);
}
body.tbc .tbc-form--cif .c-input,
body.tbc .tbc-form--cif .c-textarea {
  border: 0; border-bottom: 1px solid var(--tbc-navy); border-radius: 0; background: none; padding: 8px 0;
  font-family: var(--tbc-text); font-size: 18px; color: var(--tbc-navy); min-height: 0;
}
body.tbc .tbc-form--cif .c-input::placeholder { color: transparent; }
body.tbc .tbc-form--cif .c-textarea { min-height: 96px; resize: vertical; border: 1px solid var(--tbc-line); padding: 10px 12px; background: var(--tbc-cream); }
body.tbc .tbc-form--cif .c-input:focus,
body.tbc .tbc-form--cif .c-textarea:focus { border-color: var(--tbc-tan); }
body.tbc .tbc-form--cif .fine-print { font-family: var(--tbc-text); font-size: 14px; line-height: 1.55; color: var(--tbc-ink-soft); }
body.tbc .tbc-form--cif .fine-print a { text-decoration: underline; text-underline-offset: 3px; }
body.tbc .tbc-form--cif .cbtn--primary {
  align-self: flex-start; min-height: 0; padding: 15px 28px; border-radius: 0;
  background: var(--tbc-burgundy); border: 1px solid var(--tbc-burgundy); color: var(--tbc-cream);
  font-family: var(--tbc-caps-font); font-size: 10.5px; font-weight: 500; letter-spacing: 0.24em;
}
body.tbc .tbc-form--cif .cbtn--primary:hover { background: var(--tbc-burgundy-deep); border-color: var(--tbc-burgundy-deep); }
body.tbc .tbc-form--cif .cif__success-head { font-family: var(--tbc-display); font-style: italic; font-size: 26px; color: var(--tbc-navy); }
body.tbc .tbc-form--cif .cif__success-body { font-family: var(--tbc-text); font-size: 17px; color: var(--tbc-ink-soft); }

/* ── Our Story ───────────────────────────────────────────────────────────── */
.tbc-about { display: grid; grid-template-columns: 1.45fr 0.55fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.tbc-about > * { min-width: 0; }
.tbc-about .tbc-eyebrow { color: var(--tbc-walnut); margin-bottom: 22px; }
.tbc-about h1 { font-size: var(--tbc-h1); }
.tbc-about__text p { max-width: 34em; color: var(--tbc-ink-soft); font-size: 19px; line-height: 1.65; }
.tbc-about__text p + p { margin-top: 1.1em; }
.tbc-portrait--sticky { position: sticky; top: 24px; }
.tbc-creed { background: var(--tbc-navy); color: var(--tbc-cream); }
.tbc-creed p { font-family: var(--tbc-display); font-style: italic; font-weight: 500; font-size: clamp(30px, 4.2vw, 60px); line-height: 1.15; max-width: 18em; text-wrap: balance; }
.tbc-creed .tbc-dash { background: var(--tbc-tan-light); margin-top: 0; }
.tbc-about-close { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.tbc-about-close > * { min-width: 0; }
.tbc-about-close p { max-width: 32em; color: var(--tbc-ink-soft); font-size: 19px; line-height: 1.65; }
.tbc-about-close h2 { font-size: var(--tbc-h2); margin-bottom: 28px; }

/* ── Our Agents + bios ───────────────────────────────────────────────────── */
.tbc-wide-photo { margin: clamp(32px, 4.5vw, 64px) 0 0; }
.tbc-wide-photo img { width: 100%; height: auto; }
.tbc-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.2vw, 32px); }
.tbc-member { min-width: 0; }
.tbc-member__photo { aspect-ratio: 1320 / 1304; width: 100%; height: auto; object-fit: cover; }
.tbc-member__name { display: block; margin-top: 18px; font-size: 12px; letter-spacing: 0.2em; }
.tbc-member__role { font-family: var(--tbc-display); font-style: italic; font-weight: 500; font-size: 21px; line-height: 1.3; margin-top: 4px; }
.tbc-member__where { color: var(--tbc-ink-soft); font-size: 15px; margin: 4px 0 14px; }
.tbc-member--join { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 14px; padding: 28px 20px; background: var(--tbc-wash); }
.tbc-member--join h3 { font-size: var(--tbc-h3); }
.tbc-member--join p { color: var(--tbc-ink-soft); font-size: 16px; line-height: 1.5; }

/* ── Our Agents, softened (idea wMlrO8noWz2WiSUqkr9n, item 4) ──────────────
   Brit: "too squared off". Arched-top photos echoing the homepage doorway, a
   matching arch on the "There's a seat for you" tile, everything centered,
   and the conference-table photo fading out at its foot (and a little at its
   sides) with the card row rising into the fade, so there is no hard edge. */
.tbc-agents-top { padding-bottom: 0; }
.tbc-wide-photo--fade img {
  -webkit-mask-image: linear-gradient(180deg, #000 42%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 42%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-composite: intersect;
}
.tbc-team--rise { position: relative; z-index: 1; margin-top: calc(-1 * clamp(40px, 10vw, 150px)); }
.tbc-team--rise .tbc-member { text-align: center; }
.tbc-member__frame { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 50% 50% 0 0 / 36% 36% 0 0; }
.tbc-member__frame .tbc-member__photo { display: block; aspect-ratio: auto; height: 100%; }
/* A full-length original cropped by photos.ts: the inline width/margins place it. */
.tbc-member__frame--crop .tbc-member__photo { height: auto; max-width: none; object-fit: fill; }
/* The tile is a container so its arch can be sized off its WIDTH (36cqi), the
   same curve as the square photos beside it, however tall the tile grows. */
.tbc-team--rise .tbc-member--join { container-type: inline-size; display: block; padding: 0; background: none; }
.tbc-member__seat {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px;
  height: 100%; min-height: 100cqi; padding: 30cqi 20px 28px;
  background: var(--tbc-wash); border-radius: 50% 50% 0 0 / 36cqi 36cqi 0 0;
}
/* ── end: Our Agents, softened ── */
.tbc-back { margin-bottom: 28px; }
/* 22 TAC 535.155: on a bio page the agent's name (h1) is capped at 52px and
   the brokerage's name above it is 28px — more than half its size. */
.tbc-broker-name { font-family: var(--tbc-display); font-style: italic; font-weight: 500; font-size: 28px; line-height: 1.2; color: var(--tbc-burgundy); margin-bottom: 18px; }
body.tbc .tbc-bio h1 { font-size: clamp(38px, 4.2vw, 52px); }
.tbc-bio .tbc-about__text p.tbc-broker-name { font-size: 28px; color: var(--tbc-burgundy); }
.tbc-bio__cta { margin-top: 32px; }
/* An agent bio page's "Send Kelly a message." band (Brit's E10) — her mock's
   "Reach Kelly" layout: words left, form right, on the .tbc-join-talk paper
   band. The section id is the "Message Kelly" anchor. */
.tbc-agent-message { scroll-margin-top: 24px; }
.tbc-agent-message .tbc-lede { max-width: 30em; }

/* ── Join, Contact ───────────────────────────────────────────────────────── */
.tbc-join__words { margin-top: 28px; color: var(--tbc-walnut); }
.tbc-fits > div { display: block; padding: 22px 0; border-top: 1px solid var(--tbc-line); }
.tbc-fits > :last-child { border-bottom: 1px solid var(--tbc-line); }
.tbc-fits .tbc-caps { color: var(--tbc-tan); }
.tbc-fits h3 { font-size: var(--tbc-h3); margin: 10px 0 8px; }
.tbc-fits p { color: var(--tbc-ink-soft); font-size: 17px; }
.tbc-join-talk { background: var(--tbc-paper); border-top: 1px solid var(--tbc-line); border-bottom: 1px solid var(--tbc-line); }
.tbc-join-talk h2 { font-size: var(--tbc-h2); }
.tbc-join-talk .tbc-form { background: var(--tbc-cream); }
.tbc-faq { margin-top: 32px; }
.tbc-faq details { border-top: 1px solid var(--tbc-line); padding: 18px 0; }
.tbc-faq details:last-child { border-bottom: 1px solid var(--tbc-line); }
.tbc-faq summary { cursor: pointer; font-family: var(--tbc-display); font-style: italic; font-weight: 500; font-size: 23px; line-height: 1.3; }
.tbc-faq details p { color: var(--tbc-ink-soft); font-size: 17px; margin-top: 12px; max-width: 32em; }
.tbc-contact-photo { margin: 36px 0 0; max-width: 440px; }
.tbc-contact-photo img { width: 100%; height: auto; }
.tbc-notfound { min-height: 46vh; }
.tbc-notfound .tbc-lede { margin-bottom: 30px; }

/* ── En Español (held) ───────────────────────────────────────────────────── */
/* Brit's list 2026-10-12, A2: the photo fills the left half of the row, edge
   to edge, and its right edge fades into the cream page (the doorway /
   skyline treatment); the fade starts past her shoulder, so it only covers
   the cabinets to her right. The letter starts where the fade ends and its
   right edge lines up with the rest of the site's content. On a phone the
   photo sits on top, full width, and fades downward into the letter. */
.tbc-es-top { padding-bottom: clamp(64px, 8vw, 120px); }
.tbc-es-letter { display: grid; grid-template-columns: min(50%, 700px) minmax(0, 1fr); align-items: center; }
.tbc-es-letter__photo { margin: 0; min-width: 0; }
.tbc-es-letter__photo img {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(90deg, #000 66%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 66%, transparent 100%);
}
.tbc-es-letter > .tbc-page-head {
  min-width: 0;
  padding: clamp(32px, 4vw, 56px) max(var(--tbc-gutter), calc((100vw - 1400px) / 2 + var(--tbc-gutter))) clamp(32px, 4vw, 56px) clamp(12px, 2vw, 32px);
}
@media (max-width: 760px) {
  .tbc-es-letter__photo img {
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  }
  .tbc-es-letter > .tbc-page-head { padding: 0 var(--tbc-gutter); margin-top: -20px; position: relative; }
}
/* Brit's list 2026-10-12, A1: cropped from the bottom so her feet do not show
   — it ends at mid-shin, above the jean cuffs (row ~790 of the 666 x 1000
   file); top and sides unchanged. */
.tbc-es-letter__photo img { aspect-ratio: 666 / 790; object-fit: cover; object-position: center top; }
.tbc-es-letter .tbc-lede { max-width: 30em; }
.tbc-es-sign { margin-top: 28px; font-family: var(--tbc-display); font-style: italic; font-weight: 500; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.2; }
.tbc-es-sign__name { margin-top: 14px; color: var(--tbc-walnut); }
.tbc-es-h2 { font-size: var(--tbc-h2); }
.tbc-camino { background: var(--tbc-paper); border-top: 1px solid var(--tbc-line); border-bottom: 1px solid var(--tbc-line); }
.tbc-camino h2, .tbc-dudas h2 { font-size: var(--tbc-h2); }
.tbc-pasos { margin-top: clamp(28px, 4vw, 48px); counter-reset: tbc-paso; }
.tbc-paso { display: grid; grid-template-columns: 3.5rem 4fr 6fr; column-gap: clamp(16px, 3vw, 48px); align-items: baseline; padding: 22px 0; border-top: 1px solid var(--tbc-line); }
.tbc-paso:last-child { border-bottom: 1px solid var(--tbc-line); }
.tbc-paso > * { min-width: 0; }
.tbc-paso::before { counter-increment: tbc-paso; content: counter(tbc-paso, decimal-leading-zero); font-family: var(--tbc-caps-font); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; color: var(--tbc-tan); }
.tbc-paso h3 { font-size: var(--tbc-h3); }
.tbc-paso p { color: var(--tbc-ink-soft); font-size: 17px; }
.tbc-dudas .tbc-faq { margin-top: 28px; max-width: 46em; }
.tbc-es-note { margin-top: 28px; font-size: 15px; color: var(--tbc-ink-soft); max-width: 46em; }

/* ── Shared consumer surfaces under this brand ───────────────────────────── */
/* The IDX listing brokerage line on a listing page (MlsAttribution, LAR). */
body.tbc .ldp-listedby { font-size: 15px; color: var(--tbc-navy); }
/* The shared buttons wear her flat burgundy. */
body.tbc .cbtn { border-radius: 0; font-family: var(--tbc-caps-font); }
body.tbc .cbtn--primary { background: var(--tbc-burgundy); color: var(--tbc-cream); }
body.tbc .cbtn--primary:hover { background: var(--tbc-burgundy-deep); }
body.tbc .c-input, body.tbc .c-select, body.tbc .c-textarea { border-radius: 0; }
/* Legal pages (Privacy, Terms): her italic display title. */
body.tbc .legal__title { font-family: var(--tbc-display); font-style: italic; font-weight: 500; font-size: clamp(38px, 4.2vw, 52px); }
body.tbc .legal__eyebrow, body.tbc .legal__h { font-family: var(--tbc-caps-font); font-style: normal; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; font-size: 10.5px; color: var(--tbc-walnut); }

/* ── Breakpoints ─────────────────────────────────────────────────────────── */
@media (min-width: 761px) and (max-width: 1000px) {
  /* Tablet: tighter tracking keeps the whole bar on one row. */
  .tbc-bar__row { gap: 2px 14px; }
  .tbc-bar__row > a, .tbc-drop summary { letter-spacing: 0.16em; }
  .tbc-hero__copy { width: min(60%, 640px); }
}
@media (max-width: 1000px) {
  .tbc-rail__track { grid-auto-columns: calc((100% - var(--tbc-rail-gap)) / 2); }
  .tbc-cards { grid-template-columns: repeat(2, 1fr); }
  .tbc-team { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
}
@media (max-width: 900px) {
  .tbc-build-words { gap: 14px; }
}
@media (max-width: 860px) {
  .tbc-invest { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body.tbc { font-size: 17px; }
  .tbc-split, .tbc-two, .tbc-trio, .tbc-stories-top, .tbc-stories, .tbc-story--lead, .tbc-steps,
  .tbc-about, .tbc-about-close, .tbc-es-letter { grid-template-columns: 1fr; }

  .tbc-hero { display: flex; flex-direction: column; }
  .tbc-hero__photo { position: relative; order: -1; width: 100%; height: 320px; }
  .tbc-hero__photo::after {
    background: linear-gradient(180deg, rgba(var(--tbc-hero-panel-rgb), 0) 45%, rgba(var(--tbc-hero-panel-rgb), 0.6) 78%, rgb(var(--tbc-hero-panel-rgb)) 100%);
  }
  .tbc-hero__copy { width: 100%; min-height: 0; gap: 36px; padding-top: 12px; }

  .tbc-search { flex-wrap: wrap; gap: 12px 20px; }
  .tbc-search input { flex-basis: 100%; }
  .tbc-search .tbc-btn { width: 100%; }

  .tbc-trio a, .tbc-trio a:first-child { padding: 28px 0; border-left: 0; border-top: 1px solid var(--tbc-line); }
  .tbc-trio a:first-child { border-top: 0; padding-top: 0; }

  .tbc-hoods__head { display: flex; flex-direction: column; min-height: 0; }
  .tbc-hoods__head > div { width: 100%; padding-block: 0 20px; }
  .tbc-hoods__photo { position: relative; width: 100%; height: 260px; }
  .tbc-hoods__photo::after { background: linear-gradient(180deg, rgb(248, 246, 240) 0%, rgba(248, 246, 240, 0.5) 22%, rgba(248, 246, 240, 0) 50%); }
  .tbc-rail__track { grid-auto-columns: 80%; }

  .tbc-list-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .tbc-cards { grid-template-columns: 1fr; }

  .tbc-portrait { max-width: 260px; justify-self: start; }
  .tbc-portrait--sticky { position: static; order: -1; max-width: 240px; }

  .tbc-build-head { display: flex; flex-direction: column; min-height: 0; }
  .tbc-build-head > div:first-child { width: 100%; padding-block: 0 20px; }
  .tbc-build-head__photo { position: relative; width: 100%; height: 340px; }
  .tbc-build-head__photo::after {
    background: linear-gradient(180deg, rgb(241, 237, 228) 0%, rgba(241, 237, 228, 0.5) 20%, rgba(241, 237, 228, 0) 45%, rgba(44, 13, 13, 0) 60%, rgba(44, 13, 13, 0.85) 100%);
  }
  .tbc-build-words { top: auto; bottom: 18px; left: 16px; right: 16px; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
  .tbc-build-words .tbc-dash, .tbc-build-words strong { display: none; }
  .tbc-builder__plate { min-height: 240px; }

  .tbc-footer__top { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .tbc-footer__top > :first-child { grid-column: 1 / -1; }
  .tbc-footer__id img { width: 84px; height: 84px; }
  .tbc-footer__trec { flex-direction: column; }

  .tbc-paso { grid-template-columns: 2.6rem 1fr; }
  .tbc-paso p { grid-column: 2; margin-top: 6px; }
}
@media (max-width: 560px) {
  .tbc-form__row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .tbc-team { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  body.tbc * { transition: none !important; scroll-behavior: auto !important; }
}