/*
Theme Name: BayfordBridge
Theme URI: https://bayfordbridge.com
Author: BayfordBridge
Author URI: https://bayfordbridge.com
Description: BayfordBridge — Land Entitlement, Powered by Technology. A pixel-faithful WordPress port of the BayfordBridge Next.js site, built as an Elementor-compatible classic theme with a drafting-board / blueprint design language, scroll-scrubbed hero, animated pipeline, count-ups, mega-nav, and a sitewide landowner capture. Includes a one-click demo importer.
Version: 2.7.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bayfordbridge
Tags: business, real-estate, elementor, one-page, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =====================================================================
   BayfordBridge — Design System
   Ported 1:1 from the original Next.js + Tailwind v4 theme tokens.
   ===================================================================== */

:root {
  /* Brand */
  --color-brand: #1d3fa8;
  --color-brand-bright: #3b5fd9;

  /* Ink & paper */
  --color-ink: #0c111f;
  --color-ink-2: #141b30;
  --color-paper: #f6f6f2;
  --color-surface: #ffffff;

  /* Supporting */
  --color-muted: #5a5f6e;
  --color-line: #e3e3dc;
  --color-line-dark: rgba(255, 255, 255, 0.12);

  /* Fonts (loaded via Google Fonts in functions.php) */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Archivo", var(--font-sans);
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --header-h: 80px;
  --maxw: 80rem; /* max-w-7xl */
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bb-main { flex: 1 1 auto; padding-top: var(--header-h); }
/* Hero pulls up under the fixed header */
.bb-main.has-scrub-hero { padding-top: 0; }

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
p { margin: 0; }

::selection { background-color: var(--color-brand); color: #fff; }

/* ---- Utility color/text helpers used inline in templates ---- */
.text-brand { color: var(--color-brand); }
.text-brand-bright { color: var(--color-brand-bright); }
.font-mono { font-family: var(--font-mono); }
.font-display { font-family: var(--font-display); }
.muted { color: var(--color-muted); }

/* ---- Container ---- */
.bb-container {
  margin-inline: auto;
  max-width: var(--maxw);
  padding-inline: 1.25rem;
  width: 100%;
}
@media (min-width: 640px) { .bb-container { padding-inline: 2rem; } }
@media (min-width: 1024px) { .bb-container { padding-inline: 2.5rem; } }

/* ---- Section ---- */
.bb-section { padding-block: 5rem; }
@media (min-width: 1024px) { .bb-section { padding-block: 8rem; } }
.bb-section--surface { background: var(--color-surface); }
.bb-section--paper { background: var(--color-paper); }
.bb-section--dark {
  background-color: var(--color-ink);
  color: #fff;
}
.bb-section--dark.dark-sheet { border-top: 1px solid color-mix(in srgb, var(--color-brand) 55%, transparent); }
.border-b-line { border-bottom: 1px solid var(--color-line); }
.border-y-line { border-block: 1px solid var(--color-line); }
.border-t-line { border-top: 1px solid var(--color-line); }

/* Blueprint grid textures — drafting-board DNA */
.bg-blueprint {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
}
.bg-blueprint-light {
  background-image:
    linear-gradient(rgba(12, 17, 31, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 17, 31, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ---- Type primitives ---- */
.bb-kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-muted);
}
.bb-section--dark .bb-kicker { color: rgba(255,255,255,0.55); }
.bb-kicker .num { color: var(--color-brand); }
.bb-section--dark .bb-kicker .num { color: var(--color-brand-bright); }

.bb-sheet-tag {
  display: inline-block;
  border: 1px solid var(--color-line);
  padding: 0.5rem 0.875rem;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted);
}
.bb-section--dark .bb-sheet-tag { border-color: var(--color-line-dark); color: rgba(255,255,255,0.6); }

.bb-heading {
  margin-top: 1.25rem;
  max-width: 56rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5.2vw, 4.75rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.bb-lede { margin-top: 1.25rem; max-width: 42rem; font-size: clamp(1rem, 2.6vw, 1.125rem); line-height: 1.7; color: var(--color-muted); }
.bb-section--dark .bb-lede { color: rgba(255,255,255,0.7); }

.ghost-index {
  pointer-events: none;
  position: absolute;
  user-select: none;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(12,17,31,0.05);
}
.bb-section--dark .ghost-index { color: rgba(255,255,255,0.06); }

/* ---- Buttons / CTAs ---- */
.bb-cta {
  display: inline-block;
  padding: 1rem 1.75rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  transition: background-color .2s, color .2s, border-color .2s;
  cursor: pointer;
  border: 1px solid transparent;
}
.bb-cta--primary { background: var(--color-brand); color: #fff; }
.bb-cta--primary:hover { background: var(--color-brand-bright); }
.bb-cta--ghost { border-color: rgba(12,17,31,0.2); color: var(--color-ink); }
.bb-cta--ghost:hover { border-color: var(--color-ink); }
.bb-cta--ghost-dark { border-color: var(--color-line-dark); color: rgba(255,255,255,0.85); }
.bb-cta--ghost-dark:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.bb-cta--dark { background: var(--color-ink); color: #fff; }
.bb-cta--dark:hover { background: var(--color-ink-2); }

/* ---- Stat ---- */
.bb-stat { border-top: 2px solid rgba(12,17,31,0.15); padding-top: 1.75rem; }
.bb-section--dark .bb-stat { border-top-color: rgba(255,255,255,0.2); }
.bb-stat__value { font-family: var(--font-display); font-size: clamp(3.5rem,6vw,6rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.bb-stat__label { margin-top: 1rem; font-family: var(--font-mono); font-size: 14px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-muted); }
.bb-section--dark .bb-stat__label { color: rgba(255,255,255,0.85); }

/* ---- Grid helpers ---- */
.bb-grid { display: grid; gap: 1.5rem; }
.bb-grid-px { display: grid; gap: 1px; border: 1px solid var(--color-line); background: var(--color-line); }
@media (min-width: 1024px) {
  .lg-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lg-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 640px) {
  .sm-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sm-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ---- Cards common ---- */
.bb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  padding: 1.5rem;
  transition: background-color .3s, border-color .3s;
}
@media (min-width: 640px) { .bb-card { padding: 2rem; } }
.bb-card:hover { background: var(--color-paper); }
.bb-card__stage { position: relative; font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-brand); }
.bb-card__title { margin-top: 1rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.bb-card__body { margin-top: 0.75rem; flex: 1 1 auto; font-size: 15px; line-height: 1.7; color: var(--color-muted); }
.bb-card__arrow { margin-top: 1.5rem; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-muted); }
.bb-card__arrow .glyph { color: var(--color-brand); }

/* =====================================================================
   Header / Nav
   ===================================================================== */
.bb-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--color-line-dark);
  background: var(--color-ink);
  transition: background-color .5s cubic-bezier(0.16,1,0.3,1), border-color .5s cubic-bezier(0.16,1,0.3,1);
}
/* Floating over the hero (home): transparent until scrolled. */
.bb-header.is-floating { background: transparent; border-color: transparent; }
/* Condense on scroll (desktop). */
@media (min-width: 1024px) {
  .bb-header.is-scrolled .bb-header__bar { height: 72px; transition: height .5s cubic-bezier(0.16,1,0.3,1); }
}
.bb-header__bar {
  margin-inline: auto;
  display: flex;
  height: var(--header-h);
  max-width: var(--maxw);
  align-items: center;
  justify-content: space-between;
  padding-inline: 1.25rem;
}
@media (min-width: 640px) { .bb-header__bar { padding-inline: 2rem; } }
@media (min-width: 1024px) { .bb-header__bar { padding-inline: 2.5rem; } }
.bb-logo { display: inline-flex; align-items: center; line-height: 0; }
.bb-logo img { display: block; height: 20px; width: auto; }
@media (min-width: 1024px) { .bb-logo img { height: 24px; } }

/* WordPress custom-logo output (the_custom_logo) ships its own inline
   width/height + .custom-logo class that can override the rule above and
   render the mark oversized. Force it to the header size. */
.bb-header .bb-logo img,
.bb-header .bb-logo .custom-logo,
.bb-header .custom-logo-link img,
.bb-header a.custom-logo-link .custom-logo {
  height: 20px !important;
  width: auto !important;
  max-height: 20px !important;
  max-width: 260px !important;
  object-fit: contain;
}
@media (min-width: 1024px) {
  .bb-header .bb-logo img,
  .bb-header .bb-logo .custom-logo,
  .bb-header .custom-logo-link img,
  .bb-header a.custom-logo-link .custom-logo {
    height: 24px !important;
    max-height: 24px !important;
  }
}

.bb-nav { display: none; align-items: center; gap: 1.5rem; }
@media (min-width: 1280px) { .bb-nav { gap: 2rem; } }
@media (min-width: 1024px) { .bb-nav { display: flex; } }
.bb-nav a.bb-nav__link, .bb-nav .bb-nav__link {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.6);
  transition: color .2s;
  cursor: pointer;
  white-space: nowrap;
}
.bb-nav .bb-nav__link:hover, .bb-nav .bb-nav__link.is-active, .bb-nav .bb-nav__link.is-open { color: #fff; }
.bb-nav__caret { margin-left: 0.375rem; display: inline-block; transition: transform .2s; }
.bb-nav__item.is-open .bb-nav__caret { transform: rotate(180deg); }
.bb-nav__inquire {
  margin-left: 0.5rem;
  background: var(--color-brand);
  padding: 0.55rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #fff;
  transition: background-color .2s;
  white-space: nowrap;
}
.bb-nav__inquire:hover { background: var(--color-brand-bright); }

/* Mega panel */
.bb-panel {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  display: none;
  border-bottom: 1px solid var(--color-line-dark);
  background: var(--color-ink);
  box-shadow: 0 24px 48px rgba(4,7,16,0.45);
}
@media (min-width: 1024px) { .bb-panel.is-open { display: block; } }
.bb-panel__inner {
  margin-inline: auto;
  display: grid;
  max-width: var(--maxw);
  grid-template-columns: 1fr 1.1fr 360px;
  gap: 3rem;
  padding: 3rem 2.5rem;
}
.bb-panel__eyebrow { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255,255,255,0.45); }
.bb-panel__blurb { margin-top: 1.25rem; max-width: 24rem; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.7); }
.bb-panel__links { list-style: none; margin: 0; padding: 0; }
.bb-panel__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--color-line-dark);
  padding-block: 1rem;
  transition: color .2s;
}
.bb-panel__link .label { display: block; font-size: 1rem; font-weight: 500; color: rgba(255,255,255,0.85); transition: color .2s; }
.bb-panel__link:hover .label { color: #fff; }
.bb-panel__link .desc { margin-top: 0.25rem; display: block; font-size: 13px; color: rgba(255,255,255,0.4); }
.bb-panel__link .go { color: rgba(255,255,255,0.3); transition: transform .2s, color .2s; }
.bb-panel__link:hover .go { transform: translateX(4px); color: #fff; }
.bb-panel__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--color-line-dark);
  background: var(--color-ink-2);
  padding: 1.5rem;
  transition: border-color .2s;
}
.bb-panel__card:hover { border-color: rgba(255,255,255,0.3); }
.bb-panel__card .clabel { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255,255,255,0.45); }
.bb-panel__card .ctitle { margin-top: 1rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.3; color: #fff; }
.bb-panel__card .cbody { margin-top: 0.625rem; font-size: 0.875rem; line-height: 1.7; color: rgba(255,255,255,0.55); }
.bb-panel__card .ccta { margin-top: 1.5rem; font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-brand-bright); transition: color .2s; }
.bb-panel__card:hover .ccta { color: #fff; }

/* Mobile toggle + menu */
.bb-burger { display: flex; height: 40px; width: 40px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: 0; cursor: pointer; }
@media (min-width: 1024px) { .bb-burger { display: none; } }
.bb-burger span { height: 1px; width: 20px; background: #fff; transition: transform .2s; }
.bb-burger.is-open span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.bb-burger.is-open span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.bb-mobile {
  position: fixed;
  inset-inline: 0;
  top: var(--header-h);
  bottom: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
  background: var(--color-ink);
  padding: 2rem 1.5rem 2.5rem;
}
.bb-mobile.is-open { display: flex; }
@media (min-width: 1024px) { .bb-mobile { display: none !important; } }
.bb-mobile__link { display: flex; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--color-line-dark); padding-block: 1rem; color: rgba(255,255,255,0.7); }
.bb-mobile__link.is-active { color: #fff; }
.bb-mobile__num { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.4); }
.bb-mobile__label { font-family: var(--font-display); font-size: 1.875rem; font-weight: 500; }
.bb-mobile__actions { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.bb-mobile__actions a { padding: 1rem 1.25rem; text-align: center; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; }
.bb-mobile__actions .primary { background: var(--color-brand); color: #fff; }
.bb-mobile__actions .ghost { border: 1px solid var(--color-line-dark); color: rgba(255,255,255,0.8); }

/* =====================================================================
   Footer
   ===================================================================== */
.bb-footer { position: relative; isolation: isolate; background: var(--color-ink); color: #fff; border-top: 1px solid color-mix(in srgb, var(--color-brand) 55%, transparent); }
.bb-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 280px 280px, 280px 280px, 56px 56px, 56px 56px;
  -webkit-mask-image: radial-gradient(130% 120% at 15% 0%, #000 25%, transparent 100%);
  mask-image: radial-gradient(130% 120% at 15% 0%, #000 25%, transparent 100%); }
.bb-footer__cta { margin-inline: auto; max-width: var(--maxw); border-bottom: 1px solid var(--color-line-dark); padding: 4rem 1.25rem; }
@media (min-width: 1024px) { .bb-footer__cta { padding: 6rem 2rem; } }
.bb-footer__cta .eyebrow { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.5); }
.bb-footer__cta .row { margin-top: 1rem; display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 1024px) { .bb-footer__cta .row { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.bb-footer__cta h2 { max-width: 48rem; font-family: var(--font-display); font-size: clamp(2.25rem,4vw,4rem); font-weight: 600; line-height: 1.06; }
.bb-footer__cta .actions { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .bb-footer__cta .actions { flex-direction: row; } }
.bb-footer__cta .actions a { padding: 1.125rem 1.75rem; text-align: center; font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.18em; transition: background-color .2s,color .2s,border-color .2s; }
.bb-footer__cta .actions .primary { background: var(--color-brand); color: #fff; }
.bb-footer__cta .actions .primary:hover { background: var(--color-brand-bright); }
.bb-footer__cta .actions .ghost { border: 1px solid var(--color-line-dark); color: rgba(255,255,255,0.8); }
.bb-footer__cta .actions .ghost:hover { border-color: rgba(255,255,255,0.4); color: #fff; }

.bb-footer__map { margin-inline: auto; display: grid; max-width: var(--maxw); grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2.5rem; border-bottom: 1px solid var(--color-line-dark); padding: 3rem 1.25rem; }
@media (min-width: 768px) { .bb-footer__map { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.bb-footer__map h3 { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.45); font-weight: 400; }
.bb-footer__map ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.bb-footer__map a { font-size: 1rem; color: rgba(255,255,255,0.75); transition: color .2s; }
.bb-footer__map a:hover { color: #fff; }
.bb-footer__map .addr { margin-top: 1rem; font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,0.75); }
.bb-footer__map a, .bb-footer__map .addr { overflow-wrap: anywhere; word-break: break-word; }
.bb-footer__base { margin-inline: auto; max-width: var(--maxw); padding: 2.5rem 1.25rem; }
.bb-footer__base .top { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 768px) { .bb-footer__base .top { flex-direction: row; align-items: center; justify-content: space-between; } }
.bb-footer__base img { height: 24px; width: auto; }
.bb-footer__meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.75rem 3rem; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,255,255,0.4); }
@media (min-width: 640px) { .bb-footer__meta { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.bb-footer__meta dd { margin: 0; color: rgba(255,255,255,0.7); }
.bb-footer__copy { margin-top: 2.5rem; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,255,255,0.4); }

/* =====================================================================
   Hero scrub
   ===================================================================== */
.hero-scrub { position: relative; margin-top: calc(-1 * var(--header-h)); height: 88svh; min-height: 560px; border-bottom: 1px solid var(--color-line); background: #fff; }
.js .hero-scrub { height: calc(78svh + 60vh); min-height: calc(560px + 60vh); }
.hero-scrub__sticky { position: sticky; top: 0; height: 78svh; min-height: 560px; overflow: hidden; }
.hero-scrub__poster, .hero-scrub__canvas { position: absolute; inset: 0; height: 100%; width: 100%; }
.hero-scrub__poster { object-fit: cover; object-position: 50% 70%; }
.hero-scrub__grade { position: absolute; inset: 0; background:
    linear-gradient(90deg, rgba(6,9,18,0.72) 0%, rgba(6,9,18,0.45) 42%, rgba(6,9,18,0.20) 100%),
    linear-gradient(0deg, rgba(6,9,18,0.62) 0%, rgba(6,9,18,0.28) 38%, rgba(6,9,18,0.30) 100%); }
.hero-scrub__layer { position: absolute; inset: 0; }
/* Slide 1 (intro) rests fully visible; hero-scrub.js only ever fades it OUT on
   scroll, never in. If the script is slow or blocked, the copy still shows at
   full opacity instead of the washed-out state seen on the live host. The
   mid/outro layers keep their inline opacity:0 (they are meant to be hidden
   until their scroll beat). */
.hero-scrub__layer[data-hero-intro] { opacity: 1; }
.hero-scrub__inner { margin-inline: auto; display: flex; height: 100%; width: 100%; max-width: var(--maxw); flex-direction: column; justify-content: center; padding: 4.5rem 1.25rem 3.5rem; }
@media (min-width: 640px) { .hero-scrub__inner { padding-inline: 2rem; } }
@media (min-width: 1024px) { .hero-scrub__inner { padding-inline: 2.5rem; } }
.hero-scrub h1 { position: relative; max-width: 56rem; font-family: var(--font-display); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; color: #fff; font-size: clamp(2.125rem, 4.6vw, 4.375rem); text-shadow: 0 2px 20px rgba(6,9,18,0.72), 0 1px 3px rgba(6,9,18,0.6); }
.hero-scrub__sub { position: relative; margin-top: 1.25rem; max-width: 34rem; font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.6; color: rgba(255,255,255,0.92); text-shadow: 0 1px 12px rgba(6,9,18,0.66); }
.hero-scrub__actions { position: relative; margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .hero-scrub__actions { flex-direction: row; } }
.hero-beat { pointer-events: none; }
.hero-beat p { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 12px rgba(6,9,18,0.55); }
.hero-beat--mid p { font-size: clamp(1.5rem,3.2vw,2.5rem); }
.hero-beat--outro p { max-width: 48rem; font-size: clamp(1.75rem,4vw,3.25rem); line-height: 1.06; }
.hero-hint { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; transition: opacity .5s; }
.hero-hint .word { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.8); text-shadow: 0 1px 2px rgba(6,9,18,0.8); }
.hero-hint .track { display: block; height: 32px; width: 1px; overflow: hidden; background: rgba(255,255,255,0.3); }
.hero-hint .track > span { display: block; height: 100%; width: 100%; background: rgba(255,255,255,0.9); }
.hero-bar { position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--color-line); }
.hero-bar > span { display: block; height: 100%; transform-origin: left; background: var(--color-brand); transform: scaleX(0); }
.hero-static { position: relative; margin-top: calc(-1 * var(--header-h)); min-height: 78svh; border-bottom: 1px solid var(--color-line); background: #fff; }
.hero-static img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: 50% 70%; }
.hero-static__grade { position: absolute; inset: 0; background:
    linear-gradient(90deg, rgba(6,9,18,0.72) 0%, rgba(6,9,18,0.45) 42%, rgba(6,9,18,0.20) 100%),
    linear-gradient(0deg, rgba(6,9,18,0.62) 0%, rgba(6,9,18,0.28) 38%, rgba(6,9,18,0.30) 100%); }

/* =====================================================================
   Pipeline scroller
   ===================================================================== */
.pipeline { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .pipeline { grid-template-columns: 320px 1fr; gap: 6rem; } }
.pipeline__rail { display: none; }
@media (min-width: 1024px) { .pipeline__rail { display: block; } }
.pipeline__rail-inner { position: sticky; top: 8rem; }
.pipeline__bignum { font-family: var(--font-display); font-size: 9rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: rgba(12,17,31,0.1); }
.pipeline__railtitle { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-brand); }
.pipeline__progress { margin-top: 1.5rem; height: 1px; width: 100%; background: var(--color-line); }
.pipeline__progress > span { display: block; height: 100%; background: var(--color-brand); transition: width .5s; }
.pipeline__count { margin-top: 0.75rem; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-muted); }
.pipeline__phase { border-top: 1px solid var(--color-line); padding-block: 2.5rem; transition: opacity .5s; }
@media (min-width: 1024px) { .pipeline__phase { padding-block: 3rem; } .pipeline__phase.is-dim { opacity: 0.4; } }
.pipeline__phase-meta { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-muted); }
@media (min-width: 1024px) { .pipeline__phase-meta { display: none; } }
.pipeline__phase h3 { font-family: var(--font-display); font-size: 1.875rem; font-weight: 600; letter-spacing: -0.02em; max-width: 20ch; }
@media (min-width: 640px) { .pipeline__phase h3 { font-size: 2.25rem; } }
.pipeline__phase p { margin-top: 1rem; max-width: 36rem; font-size: 1.125rem; line-height: 1.7; color: var(--color-muted); }
.pipeline__phase p.pipeline__deliverable { margin-top: 1.25rem; display: inline-block; width: auto; max-width: 100%; white-space: normal; overflow-wrap: break-word; border: 1px solid var(--color-line); padding: 0.3rem 0.55rem; font-family: var(--font-mono); font-size: 8px; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.04em; color: rgb(90,95,110); }
@media (max-width: 600px) { .pipeline__phase p.pipeline__deliverable { font-size: 7px; letter-spacing: 0.03em; } }

/* =====================================================================
   Media band
   ===================================================================== */
.media-band { position: relative; min-height: 58svh; overflow: hidden; border-block: 1px solid var(--color-line); background: var(--color-ink); }
@media (min-width: 1024px) { .media-band { min-height: 74svh; } }
.media-band__media { position: absolute; inset: 0; }
.media-band__media video, .media-band__media img { height: 100%; width: 100%; object-fit: cover; }
.media-band__grade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12,17,31,0.25), transparent, rgba(12,17,31,0.7)); }
.media-band__cap { position: absolute; inset-inline: 0; bottom: 0; }
.media-band__cap-inner { margin-inline: auto; display: flex; max-width: var(--maxw); flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem; padding: 0 1.25rem 1.75rem; }
@media (min-width: 640px) { .media-band__cap-inner { padding-inline: 2rem; } }
@media (min-width: 1024px) { .media-band__cap-inner { padding-inline: 2.5rem; } }
.media-band__caption { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.85); }
.media-band__tag { display: none; border: 1px solid rgba(255,255,255,0.25); padding: 0.5rem 0.875rem; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255,255,255,0.7); }
@media (min-width: 640px) { .media-band__tag { display: inline-block; } }

/* =====================================================================
   Marquee
   ===================================================================== */
.marquee-band { border-bottom: 1px solid var(--color-line); background: var(--color-paper); padding-block: 1.75rem; overflow: hidden; }
.marquee { display: flex; width: max-content; }
.marquee__track { display: flex; align-items: center; animation: bb-marquee var(--marquee-duration, 46s) linear infinite; }
.marquee__item { display: flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem; font-family: var(--font-mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--color-muted); }
.marquee__item .dot { color: var(--color-brand); }
@keyframes bb-marquee { to { transform: translateX(-50%); } }

/* =====================================================================
   Reveal / mask-reveal motion  — ALWAYS-VISIBLE, SELF-COMPLETING
   The resting state is fully visible. The entrance is a pure CSS animation
   that plays once on load and ENDS at the visible state (forwards). It does
   not depend on the .is-in class or on any JavaScript, so text can never be
   left hidden — even if motion.js fails to load. When motion.js IS present it
   still adds .is-in (harmless; the element is already visible).
   ===================================================================== */
@keyframes bb-reveal-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes bb-mask-in  { from { transform: translateY(110%); } to { transform: none; } }

/* Resting state: visible. */
.reveal,
[data-reveal]:not(.mask-reveal) { opacity: 1; transform: none; }
.mask-reveal { display: inline-block; overflow: hidden; vertical-align: top; }
.mask-reveal > span { display: inline-block; transform: none; }

/* Entrance animation (JS confirmed via .js class → animate; no-JS → just visible).
   Uses fill-mode `forwards` (not `both`): the animation ends on the visible state
   and, crucially, does NOT back-fill the hidden `from` state before it starts. If
   the animation is ever delayed, throttled, or blocked on a live/slow host, the
   element simply shows its visible resting state instead of being stuck at
   opacity:0. Content can never be left hidden. */
.js .reveal,
.js [data-reveal]:not(.mask-reveal) {
  animation: bb-reveal-in .7s cubic-bezier(0.16,1,0.3,1) forwards;
}
.js .mask-reveal > span {
  animation: bb-mask-in .9s cubic-bezier(0.16,1,0.3,1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js [data-reveal]:not(.mask-reveal),
  .js .mask-reveal > span { animation: none; opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

/* =====================================================================
   Hero copy — STATIC, ALWAYS VISIBLE (home + sell-my-parcel heroes)
   The scroll-reveal entrance was leaving the hero headline and copy hidden
   on the live host (the animation could stall on its first, invisible frame).
   Inside a .hero-copy-static section the reveal/mask animations are disabled
   entirely and the text simply renders in its final, visible state. No fade,
   no mask, no dependency on JS or the animation timeline — the copy can never
   be hidden. Scroll reveals elsewhere on the site are unaffected.
   ===================================================================== */
.hero-copy-static [data-reveal]:not(.mask-reveal),
.js .hero-copy-static [data-reveal]:not(.mask-reveal),
.hero-copy-static .reveal,
.js .hero-copy-static .reveal {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
.hero-copy-static .mask-reveal { overflow: visible !important; }
.hero-copy-static .mask-reveal > span,
.js .hero-copy-static .mask-reveal > span {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* scroll-cue keyframe */
@keyframes bb-scroll-cue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.hero-hint .track > span { animation: bb-scroll-cue 2.2s cubic-bezier(0.65,0,0.35,1) infinite; }
@media (prefers-reduced-motion: reduce) { .hero-hint .track > span { animation: none; } }

/* overlay/panel-in keyframes for popup */
@keyframes bb-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bb-panel-in { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }

/* =====================================================================
   Landowner capture bar + modal
   ===================================================================== */
.landowner-spacer { height: 2.5rem; }
.landowner-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  display: flex; min-height: 2.5rem; align-items: center; justify-content: center; gap: 0.75rem;
  background: var(--color-brand); color: #fff; border: 0; cursor: pointer;
  padding: 0 1rem calc(env(safe-area-inset-bottom));
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em;
  transition: background-color .2s;
}
.landowner-bar:hover { background: var(--color-brand-bright); }
.landowner-modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 1rem; animation: bb-overlay-in .22s ease-out both; }
.landowner-modal.is-open { display: flex; }
@media (min-width: 640px) { .landowner-modal { padding: 2rem; } }
.landowner-modal__scrim { position: absolute; inset: 0; background: rgba(12,17,31,0.6); backdrop-filter: blur(4px); border: 0; cursor: pointer; }
.landowner-modal__panel { position: relative; display: grid; max-height: 92svh; width: 100%; max-width: 48rem; overflow: hidden; border: 1px solid var(--color-line); background: var(--color-paper); box-shadow: 0 40px 100px rgba(4,7,16,0.5); animation: bb-panel-in .42s cubic-bezier(0.16,1,0.3,1) both; }
@media (min-width: 768px) { .landowner-modal__panel { grid-template-columns: 0.85fr 1.15fr; } }
.landowner-modal__visual { position: relative; display: none; background: var(--color-brand); }
@media (min-width: 768px) { .landowner-modal__visual { display: block; } }
.landowner-modal__visual .mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.landowner-modal__visual .mark img { width: 62%; height: auto; }
.landowner-modal__visual .foot { position: absolute; inset-inline: 0; bottom: 0; padding: 1.5rem; }
.landowner-modal__visual .foot .k { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.8); }
.landowner-modal__visual .foot .t { margin-top: 0.5rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: #fff; }
.landowner-modal__form { position: relative; overflow-y: auto; }
.landowner-modal__mbanner { display: flex; height: 3.5rem; align-items: center; background: var(--color-brand); padding-inline: 1.25rem; }
@media (min-width: 768px) { .landowner-modal__mbanner { display: none; } }
.landowner-modal__mbanner p { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: #fff; }
.landowner-modal__body { padding: 1.5rem; }
@media (min-width: 640px) { .landowner-modal__body { padding: 2rem; } }
.landowner-modal__body .k { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-brand); }
.landowner-modal__body h2 { margin-top: 0.75rem; font-family: var(--font-display); font-size: 1.875rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.landowner-modal__body .lede { margin-top: 0.75rem; font-size: 15px; line-height: 1.7; color: var(--color-muted); }
.landowner-modal__foot { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; border-top: 1px solid var(--color-line); padding-top: 1rem; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-muted); }
.landowner-modal__foot a:hover { color: var(--color-brand); }
.landowner-modal__close { position: absolute; right: 0.75rem; top: 0.75rem; z-index: 10; display: flex; height: 40px; width: 40px; align-items: center; justify-content: center; border: 1px solid var(--color-line); background: rgba(246,246,242,0.8); font-family: var(--font-mono); font-size: 0.875rem; color: var(--color-ink); cursor: pointer; }
.landowner-modal__close:hover { border-color: var(--color-ink); }

/* =====================================================================
   Lead form
   ===================================================================== */
.lead-form { display: grid; gap: 0.625rem; }
.lead-form label { display: grid; gap: 0.25rem; }
.lead-form .field-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-muted); }
.lead-form input, .lead-form textarea, .lead-form select {
  width: 100%; border: 1px solid var(--color-line); background: var(--color-surface);
  padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.4; font-family: var(--font-sans); color: var(--color-ink);
}
.lead-form textarea { min-height: 4.5rem; }
.lead-form__note { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.6; color: var(--color-muted); }
.lead-form input::placeholder, .lead-form textarea::placeholder { color: rgba(90,95,110,0.6); }
.lead-form input:focus, .lead-form textarea:focus, .lead-form select:focus { border-color: var(--color-brand); outline: none; }
.lead-form button[type="submit"] { margin-top: 0.5rem; background: var(--color-brand); border: 0; padding: 1rem 1.5rem; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: #fff; cursor: pointer; transition: background-color .2s; }
.lead-form button[type="submit"]:hover { background: var(--color-brand-bright); }
.lead-form button[type="submit"]:disabled { opacity: 0.6; }
.lead-form .hp { position: absolute; left: -9999px; }
.lead-form__ok { border: 1px solid var(--color-line); background: var(--color-surface); padding: 2rem; }
.lead-form__ok .k { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-brand); }
.lead-form__ok h3 { margin-top: 0.75rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.lead-form__ok p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.7; color: var(--color-muted); }
.lead-form__err { color: #b91c1c; font-size: 0.8125rem; }

/* =====================================================================
   Generic list / prose helpers used by inner pages
   ===================================================================== */
.checklist { list-style: none; margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--color-line); display: grid; gap: 0.625rem; }
.checklist li { display: flex; gap: 0.75rem; font-size: 0.875rem; color: var(--color-ink); }
.checklist li .arrow { font-family: var(--font-mono); color: var(--color-brand); }

.county-chips { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.county-chips li { border: 1px solid var(--color-line); background: var(--color-surface); padding: 0.25rem 0.625rem; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-muted); transition: border-color .3s,color .3s; }
.county-chips li:hover { border-color: rgba(12,17,31,0.3); color: var(--color-ink); }

/* Team — leadership cards */
.lead-grid { display: grid; gap: 1.5rem; margin-top: 3rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .lead-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .lead-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.lead-card { display: flex; flex-direction: column; border: 1px solid var(--color-line); background: var(--color-surface); transition: background-color .3s, border-color .3s; }
.lead-card:hover { background: var(--color-paper); border-color: rgba(12,17,31,0.25); }
.lead-card__photo { position: relative; aspect-ratio: 1/1; overflow: hidden; border-bottom: 1px solid var(--color-line); background: #fff; }
.lead-card__ghost { position: absolute; right: -0.5rem; top: -1.5rem; font-family: var(--font-display); font-weight: 600; font-size: 7.5rem; line-height: 1; color: rgba(12,17,31,0.05); pointer-events: none; transition: color .5s; }
.lead-card:hover .lead-card__ghost { color: rgba(29,63,168,0.09); }
.lead-card__grade { position: absolute; inset-inline: 0; bottom: 0; height: 33%; background: linear-gradient(to top, rgba(29,63,168,0.10), transparent); z-index: 1; }
.lead-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; filter: grayscale(1); image-rendering: auto; transition: transform .7s ease, filter .7s ease; }
.lead-card:hover .lead-card__photo img { transform: scale(1.03); filter: grayscale(0); }
.lead-card__idx { position: absolute; left: 1rem; top: 1rem; z-index: 2; font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-muted); }
.lead-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; }
.lead-card__name { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; transition: color .3s; }
.lead-card:hover .lead-card__name { color: var(--color-brand); }
.lead-card__title { margin-top: 0.5rem; font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-brand); }
.lead-card__bio { margin-top: 1rem; font-size: 0.9375rem; line-height: 1.7; color: var(--color-muted); }
.lead-card__email { margin-top: auto; padding-top: 1.5rem; word-break: break-all; font-size: 12px; letter-spacing: 0.02em; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-line); text-underline-offset: 4px; transition: color .2s; }
.lead-card__email:hover { color: var(--color-brand); text-decoration-color: var(--color-brand); }

/* Team — roster rail */
.team-rail { margin-top: 3rem; }
.team-rail__viewport { margin-inline: calc(50% - 50vw); }
.team-rail__scroller { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; padding-inline: max(1.25rem, calc(50vw - 37.5rem)); scroll-snap-type: x mandatory; scroll-padding-left: max(1.25rem, calc(50vw - 37.5rem)); cursor: grab; scrollbar-width: none; outline: none; }
.team-rail__scroller::-webkit-scrollbar { display: none; }
.team-rail__scroller.is-dragging { cursor: grabbing; user-select: none; }
@media (min-width: 640px) { .team-rail__scroller { gap: 1.5rem; } }
.rail-card { flex: 0 0 auto; width: 210px; scroll-snap-align: start; border: 1px solid var(--color-line); background: var(--color-paper); transition: border-color .3s; }
@media (min-width: 640px) { .rail-card { width: 248px; } }
.rail-card:hover { border-color: rgba(12,17,31,0.25); }
.rail-card__btn { display: flex; flex-direction: column; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.rail-card__photo { position: relative; display: block; aspect-ratio: 4/5; width: 100%; overflow: hidden; border-bottom: 1px solid var(--color-line); background: var(--color-surface); }
.rail-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; filter: grayscale(1); transition: transform .7s ease, filter .7s ease; }
.rail-card:hover .rail-card__photo img { transform: scale(1.03); filter: grayscale(0); }
.rail-card__idx { position: absolute; left: 0.875rem; top: 0.875rem; font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-muted); }
.rail-card__meta { display: flex; flex-direction: column; padding: 1rem; }
@media (min-width: 640px) { .rail-card__meta { padding: 1.25rem; } }
.rail-card__name { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; transition: color .3s; }
@media (min-width: 640px) { .rail-card__name { font-size: 1.25rem; } }
.rail-card:hover .rail-card__name { color: var(--color-brand); }
.rail-card__title { margin-top: 0.375rem; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--color-brand); }
@media (min-width: 640px) { .rail-card__title { font-size: 12px; } }

.team-rail__controls { margin-top: 1.5rem; display: flex; align-items: center; gap: 1.5rem; }
.team-rail__arrows { display: flex; gap: 0.5rem; }
.team-rail__arrow { border: 1px solid var(--color-line); background: transparent; padding: 0.75rem 1.125rem; font-family: var(--font-mono); font-size: 13px; color: var(--color-ink); cursor: pointer; transition: border-color .3s, background-color .3s, color .3s; }
.team-rail__arrow:hover:not(:disabled) { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.team-rail__arrow:disabled { opacity: 0.3; cursor: default; }
.team-rail__track { height: 1px; flex: 1; background: var(--color-line); }
.team-rail__bar { height: 100%; width: 6%; background: var(--color-brand); transition: width .3s cubic-bezier(0.16,1,0.3,1); }
.team-rail__hint { font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-muted); }
@media (max-width: 639px) { .team-rail__hint { display: none; } }

/* Team — expanding profile modal */
.rail-modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 0.75rem; animation: bb-overlay-in .22s ease-out both; }
@media (min-width: 640px) { .rail-modal { padding: 1.5rem; } }
@media (min-width: 1024px) { .rail-modal { padding: 2.5rem; } }
.rail-modal[hidden] { display: none; }
.rail-modal__scrim { position: absolute; inset: 0; background: rgba(12,17,31,0.5); backdrop-filter: blur(8px); border: 0; cursor: pointer; }
.rail-modal__dialog { position: relative; display: flex; flex-direction: column; height: min(92svh, 52rem); width: 100%; max-width: 72rem; overflow: hidden; border: 1px solid var(--color-line); background: var(--color-paper); box-shadow: 0 40px 120px rgba(4,7,16,0.35); animation: bb-panel-in .42s cubic-bezier(0.16,1,0.3,1) both; }
@media (min-width: 768px) { .rail-modal__dialog { display: grid; grid-template-columns: 1fr 1.15fr; height: min(88svh, 46rem); } }
.rail-modal__photo { position: relative; height: 34svh; flex-shrink: 0; overflow: hidden; border-bottom: 1px solid var(--color-line); background: #fff; }
@media (min-width: 768px) { .rail-modal__photo { height: auto; border-bottom: 0; border-right: 1px solid var(--color-line); } }
.rail-modal__grade { position: absolute; inset-inline: 0; bottom: 0; height: 33%; z-index: 1; background: linear-gradient(to top, rgba(29,63,168,0.10), transparent); }
.rail-modal__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.rail-modal__body { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow-y: auto; padding: 1.5rem; }
@media (min-width: 640px) { .rail-modal__body { padding: 2.25rem; } }
@media (min-width: 1024px) { .rail-modal__body { padding: 3rem; } }
.rail-modal__index { font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-muted); }
@media (min-width: 640px) { .rail-modal__index { font-size: 13px; } }
.rail-modal__name { margin-top: 1rem; font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.rail-modal__title { margin-top: 0.75rem; font-size: 13px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-brand); }
.rail-modal__rule { margin-top: 1.5rem; height: 1px; width: 100%; background: var(--color-line); }
.rail-modal__bio { margin-top: 1.5rem; max-width: 36rem; font-size: 1rem; line-height: 1.7; color: var(--color-muted); }
@media (min-width: 640px) { .rail-modal__bio { font-size: 1.125rem; } }
.rail-modal__email { margin-top: 1.5rem; width: fit-content; font-size: 0.875rem; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-line); text-underline-offset: 4px; transition: color .2s; }
.rail-modal__email:hover { color: var(--color-brand); text-decoration-color: var(--color-brand); }
.rail-modal__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 2.5rem; }
.rail-modal__close { position: absolute; right: 0.75rem; top: 0.75rem; z-index: 20; display: flex; height: 2.75rem; width: 2.75rem; align-items: center; justify-content: center; border: 1px solid var(--color-line); background: rgba(246,246,242,0.8); font-size: 14px; color: var(--color-ink); cursor: pointer; transition: border-color .2s; }
.rail-modal__close:hover { border-color: var(--color-ink); }
@media (min-width: 640px) { .rail-modal__close { right: 1rem; top: 1rem; } }
@keyframes bb-overlay-in { from { opacity: 0; } to { opacity: 1; } }

/* Team — careers row */
.team-careers-row { margin-top: 4rem; display: flex; flex-direction: column; gap: 0.75rem; border-top: 1px solid var(--color-line); padding-top: 2rem; }
@media (min-width: 640px) { .team-careers-row { flex-direction: row; align-items: baseline; justify-content: space-between; } }
.team-careers-row p { font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-muted); }
.team-careers-row__link { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; transition: color .3s; }
@media (min-width: 640px) { .team-careers-row__link { font-size: 1.5rem; } }
.team-careers-row__link:hover { color: var(--color-brand); }
.team-careers-row__link span { display: inline-block; transition: transform .3s; }
.team-careers-row__link:hover span { transform: translateX(0.25rem); }

/* Feature/process rows */
.feature-rows { border-bottom: 1px solid var(--color-line); margin-top: 3.5rem; }
.feature-row { display: grid; gap: 0.5rem; border-top: 1px solid var(--color-line); padding-block: 1.75rem; transition: border-color .3s; }
@media (min-width: 640px) { .feature-row { grid-template-columns: repeat(12, minmax(0,1fr)); gap: 1.5rem; } }
.feature-row:hover { border-top-color: rgba(12,17,31,0.3); }
.feature-row .num { font-family: var(--font-mono); font-size: 11px; color: var(--color-muted); }
@media (min-width: 640px) { .feature-row .num { grid-column: span 1; padding-top: 0.375rem; } }
.feature-row h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; transition: color .3s; }
@media (min-width: 640px) { .feature-row h3 { grid-column: span 4; } }
.feature-row:hover h3 { color: var(--color-brand); }
.feature-row p { line-height: 1.7; color: var(--color-muted); }
@media (min-width: 640px) { .feature-row p { grid-column: span 7; } }

/* Simple values grid (dark) */
.values-grid { display: grid; gap: 2.5rem; margin-top: 3.5rem; }
@media (min-width: 640px) { .values-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .values-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.value-item { border-top: 1px solid var(--color-line-dark); padding-top: 1.5rem; transition: border-color .3s; }
.value-item:hover { border-top-color: rgba(255,255,255,0.3); }
.value-item .num { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.4); }
.value-item h3 { margin-top: 0.75rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-brand-bright); }
.value-item p { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.7; color: rgba(255,255,255,0.6); }

/* FAQ */
.faq-list { max-width: 48rem; border-bottom: 1px solid var(--color-line); margin-top: 3rem; }
.faq-item { border-top: 1px solid var(--color-line); padding-block: 1.75rem; }
.faq-item h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
@media (min-width: 640px) { .faq-item h3 { font-size: 1.75rem; } }
.faq-item p { margin-top: 0.75rem; font-size: 1rem; line-height: 1.7; color: var(--color-muted); }
@media (min-width: 640px) { .faq-item p { font-size: 1.125rem; } }

/* generic two-up cta cards */
.cta-cards { display: grid; gap: 1.5rem; margin-top: 3rem; }
@media (min-width: 768px) { .cta-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.cta-card { display: flex; flex-direction: column; border: 1px solid var(--color-line); background: var(--color-surface); padding: 2rem; transition: background-color .3s, border-color .3s; }
@media (min-width: 1024px) { .cta-card { padding: 2.5rem; } }
.cta-card:hover { background: var(--color-paper); border-color: rgba(12,17,31,0.25); }
.cta-card .k { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-muted); }
.cta-card h3 { margin-top: 1rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; transition: color .3s; }
.cta-card:hover h3 { color: var(--color-brand); }
.cta-card p { margin-top: 0.75rem; font-size: 15px; line-height: 1.7; color: var(--color-muted); }
.cta-card .spacer { flex: 1 1 auto; }
.cta-card .actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Page hero (inner pages) */
.page-hero { padding-top: 5rem; }
@media (min-width: 1024px) { .page-hero { padding-top: 7rem; } }
h1.page-hero, .page-hero h1 { margin-top: 2rem; max-width: 62rem; font-family: var(--font-display); font-size: clamp(2.6rem, 6.5vw, 80px); font-weight: 600; line-height: 1.0125; letter-spacing: -0.02em; }
@media (min-width: 1280px) { h1.page-hero, .page-hero h1 { font-size: 80px; line-height: 81px; } }
h1.page-hero .mask-reveal { display: block; }
@media (min-width: 1024px) { h1.page-hero .mask-reveal:first-child { white-space: nowrap; } }
.page-hero .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.hero-figures { margin-top: 3.5rem; display: grid; grid-template-columns: 1fr; gap: 1rem; border-top: 1px solid var(--color-line); padding-top: 1.5rem; }
@media (min-width: 640px) { .hero-figures { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2rem; } }
.hero-figures p { display: flex; align-items: baseline; gap: 0.75rem; }
.hero-figures .val { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
@media (min-width: 1024px) { .hero-figures .val { font-size: 1.875rem; } }
.hero-figures .lab { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-muted); }

/* Sticky call bar (sell page, mobile) */
.sticky-call { position: fixed; inset-inline: 0; bottom: 0; z-index: 45; display: flex; gap: 0.5rem; border-top: 1px solid var(--color-line-dark); background: var(--color-ink); padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .sticky-call { display: none; } }
.sticky-call a { flex: 1 1 0; text-align: center; padding: 0.875rem; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; }
.sticky-call .primary { background: var(--color-brand); color: #fff; }
.sticky-call .ghost { border: 1px solid var(--color-line-dark); color: #fff; }

/* WP alignment + admin bar safety */
.admin-bar .bb-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .bb-header { top: 46px; } }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* WP core block editor width for Elementor-free pages */
.bb-page-content { margin-inline: auto; max-width: var(--maxw); padding: 3rem 1.25rem 5rem; }
.bb-page-content img { height: auto; }

/* =====================================================================
   Acquisitions carousel (Sell page)
   ===================================================================== */
.bb-carousel__viewport { overflow: hidden; }
.bb-carousel__track { display: flex; gap: 1px; transition: transform .5s cubic-bezier(0.16,1,0.3,1); background: var(--color-line); }
.bb-carousel__slide { flex: 0 0 100%; background: var(--color-surface); }
@media (min-width: 640px) { .bb-carousel__slide { flex-basis: 50%; } }
@media (min-width: 1024px) { .bb-carousel__slide { flex-basis: 33.3333%; } }
.bb-carousel__slide .team-card { background: var(--color-surface); }
.bb-carousel__nav { margin-top: 1.5rem; display: flex; gap: 0.75rem; }
.bb-carousel__btn { display: flex; height: 44px; width: 44px; align-items: center; justify-content: center; border: 1px solid var(--color-line); background: var(--color-surface); font-family: var(--font-mono); font-size: 1rem; cursor: pointer; transition: border-color .2s, color .2s; }
.bb-carousel__btn:hover { border-color: var(--color-ink); color: var(--color-brand); }
.bb-carousel__btn:disabled { opacity: 0.35; cursor: default; }

/* Visibility helpers */
.bb-hide-mobile { display: none; }
@media (min-width: 640px) { .bb-hide-mobile { display: block; } }
.bb-desktop-only { display: none !important; }
@media (min-width: 1024px) { .bb-desktop-only { display: flex !important; } }

/* =====================================================================
   v2 — Hero improvements, editable-nav, Elementor canvas
   ===================================================================== */

/* Ensure the static fallback is truly hidden unless JS reveals it */
[hidden] { display: none !important; }
.hero-static[hidden] { display: none !important; }

/* Stronger, cleaner scrim so hero copy stays legible over any frame */
.hero-scrub__sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12,17,31,0.72) 0%, rgba(12,17,31,0.34) 42%, rgba(12,17,31,0) 72%),
    linear-gradient(0deg, rgba(12,17,31,0.55) 0%, rgba(12,17,31,0) 40%);
}
.hero-scrub__layer, .hero-hint, .hero-bar { z-index: 2; }
.hero-scrub__grade { z-index: 1; }

.hero-scrub__copy { max-width: 60rem; }

.hero-scrub__eyebrow {
  display: inline-block;
  margin-bottom: 1.25rem;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-brand-bright);
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(12,17,31,0.35);
  backdrop-filter: blur(4px);
}
.hero-scrub__eyebrow > span { display: inline-block; }

.hero-scrub__trust {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.6);
}
.hero-scrub__trust .dot { color: var(--color-brand-bright); }

/* Editable WP-menu nav in the built-in header */
.bb-nav--wp .bb-nav__wp-list {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bb-nav--wp .bb-nav__wp-list > li { position: relative; }
.bb-nav--wp .bb-nav__wp-list a,
.bb-nav--wp .bb-nav__link {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.6);
  transition: color .2s;
  white-space: nowrap;
}
.bb-nav--wp .bb-nav__wp-list a:hover,
.bb-nav--wp .bb-nav__wp-list .current-menu-item > a { color: #fff; }
/* Submenus */
.bb-nav--wp .bb-nav__wp-list ul.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  list-style: none;
  margin: 0;
  padding: 0.75rem 0;
  background: var(--color-ink);
  border: 1px solid var(--color-line-dark);
  box-shadow: 0 24px 48px rgba(4,7,16,0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 60;
}
.bb-nav--wp .bb-nav__wp-list > li:hover > ul.sub-menu { opacity: 1; visibility: visible; transform: none; }
.bb-nav--wp .bb-nav__wp-list ul.sub-menu a {
  display: block;
  padding: 0.6rem 1.25rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.75);
}
.bb-nav--wp .bb-nav__wp-list ul.sub-menu a:hover { color: #fff; background: var(--color-ink-2); }

.bb-mobile__wp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bb-mobile__wp-list a { display: block; border-bottom: 1px solid var(--color-line-dark); padding-block: 1rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; color: rgba(255,255,255,0.8); }
.bb-mobile__wp-list ul.sub-menu { list-style: none; margin: 0 0 0 1rem; padding: 0; }
.bb-mobile__wp-list ul.sub-menu a { font-size: 1.05rem; color: rgba(255,255,255,0.55); }

/* Footer WP menu (horizontal columns fallback) */
.bb-footer__wp-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; }
.bb-footer__wp-menu a { font-size: 1rem; color: rgba(255,255,255,0.75); transition: color .2s; }
.bb-footer__wp-menu a:hover { color: #fff; }
.bb-footer__logo img { height: 24px; width: auto; }

/* Elementor canvas / full-width bodies */
body.bb-elementor-canvas { padding: 0; margin: 0; }
.bb-elementor-full { width: 100%; }
.bb-elementor-full .elementor { width: 100%; }

/* Give Elementor full-width sections room under the fixed header */
.bb-main .elementor-section.elementor-section-full_width { width: 100%; }

/* =====================================================================
   v2.2 — Fixes: hero-wash, plates, careers hero grid + monogram,
   sell "meet the people" grid, bridge copy, one-line trust builders,
   contact figure, about market map.
   ===================================================================== */

/* Blueprint wash in a light hero's upper-right corner (careers/about hero) */
.hero-wash { position: relative; isolation: isolate; }
.hero-wash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(12,17,31,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12,17,31,0.05) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 60%);
          mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 60%);
}

/* Mounted-photo "plate": registration marks + inner frame line */
.plate { position: relative; }
.plate::before, .plate::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--color-brand);
  pointer-events: none;
}
.plate::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.plate::after  { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
.plate-dark::before, .plate-dark::after { border-color: rgba(255,255,255,0.4); }
.plate > .plate__inner { border: 1px solid var(--color-line); background: var(--color-surface); padding: 1.25rem; overflow: hidden; transition: border-color .3s; }
@media (min-width: 1024px) { .plate > .plate__inner { padding: 1.5rem; } }
.plate:hover > .plate__inner { border-color: rgba(12,17,31,0.25); }
.plate img { display: block; width: 100%; height: auto; transition: transform .7s cubic-bezier(0.16,1,0.3,1); }
.plate:hover img { transform: scale(1.02); }

/* Careers hero: text + monogram two-up */
.careers-hero__grid { display: grid; align-items: center; gap: 2.5rem; }
@media (min-width: 1024px) { .careers-hero__grid { grid-template-columns: 1.15fr 1fr; gap: 4rem; } }
.careers-hero__mono { margin-inline: auto; width: 100%; max-width: 300px; perspective: 1100px; }
@media (min-width: 1024px) { .careers-hero__mono { max-width: 420px; } }
.careers-hero__mono img { width: 100%; height: auto; display: block; transform-style: preserve-3d; transform: rotateX(12deg) rotateY(-18deg); animation: bb-mono-float 7s ease-in-out infinite; filter: drop-shadow(10px 14px 18px rgba(12,17,31,0.28)) drop-shadow(2px 3px 3px rgba(12,17,31,0.22)); will-change: transform; }
@keyframes bb-mono-float {
  0%   { transform: rotateX(12deg) rotateY(-18deg) translateY(0); }
  50%  { transform: rotateX(12deg) rotateY(18deg) translateY(-10px); }
  100% { transform: rotateX(12deg) rotateY(-18deg) translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .careers-hero__mono img { animation: none; transform: rotateX(8deg) rotateY(-12deg); } }
.careers-hero__meta { margin-top: 4rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; border-top: 1px solid var(--color-line); padding-top: 1rem; }
.careers-hero__meta .brand { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-brand); }
.careers-hero__meta .muted { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-muted); }

/* Careers "offer" image plate */
.careers-offer-figure { margin: 2.5rem 0 0; }
.careers-offer-figure .frame { aspect-ratio: 21 / 9; overflow: hidden; }
@media (max-width: 640px) { .careers-offer-figure .frame { aspect-ratio: 4 / 3; } }
.careers-offer-figure img { width: 100%; height: 100%; object-fit: cover; }

/* Careers "Schedule a conversation" plate card */
.schedule-card { margin-inline: auto; max-width: 48rem; border: 1px solid var(--color-line); background: var(--color-surface); padding: 3.5rem 1.5rem; text-align: center; }
@media (min-width: 640px) { .schedule-card { padding: 3.5rem 2.5rem; } }
@media (min-width: 1024px) { .schedule-card { padding: 4rem 2.5rem; } }
.schedule-card h2 { margin-top: 1.5rem; font-family: var(--font-display); font-size: clamp(1.875rem, 4vw, 3rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.schedule-card p.lede { margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.7; color: var(--color-muted); }
@media (min-width: 640px) { .schedule-card p.lede { font-size: 1.25rem; } }
.schedule-card .actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.schedule-card .foot { margin-top: 1.5rem; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-muted); }

/* Sell page — "Meet the People" grid (replaces carousel look on desktop) */
.people-grid { display: grid; gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); margin-top: 3rem; }
@media (min-width: 768px) { .people-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.people-card { position: relative; display: flex; flex-direction: column; background: var(--color-surface); padding: 1.5rem; transition: background-color .3s; }
@media (min-width: 640px) { .people-card { padding: 2rem; } }
.people-card:hover { background: var(--color-paper); }
.people-card__idx { display: none; }
.people-card__ghost { position: absolute; top: -0.5rem; right: -0.25rem; font-family: var(--font-display); font-size: 6rem; font-weight: 700; line-height: 1; color: rgba(12,17,31,0.05); pointer-events: none; }
.people-card__photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #ecece6; filter: grayscale(1); transition: filter .4s; }
.people-card:hover .people-card__photo { filter: grayscale(0); }
.people-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.people-card__name { margin-top: 1.25rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.people-card__title { margin-top: 0.25rem; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-brand); }
.people-card__bio { margin-top: 0.75rem; flex: 1 1 auto; font-size: 14px; line-height: 1.7; color: var(--color-muted); }
.people-card__cta { margin-top: 1.5rem; display: block; text-align: center; background: var(--color-brand); color: #fff; padding: 0.75rem 1rem; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; transition: background-color .2s; }
.people-card__cta:hover { background: var(--color-brand-bright); }

/* Sell page — "bridge copy" two-column block below the team */
.bridge-copy { display: grid; gap: 2rem; margin-top: 3.5rem; }
@media (min-width: 1024px) { .bridge-copy { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.bridge-copy .lead { border-left: 2px solid var(--color-ink); padding-left: 1.5rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }
@media (min-width: 640px) { .bridge-copy .lead { font-size: 1.75rem; } }
.bridge-copy .body { font-size: 1.0625rem; line-height: 1.8; color: var(--color-muted); }
.bridge-copy .body p + p { margin-top: 1rem; }

/* One-line trust builders (sell page "how we add value" numbers) */
.trust-builders { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2.5rem 1.5rem; }
@media (min-width: 900px) { .trust-builders { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2rem; } }
.trust-builders .bb-stat { border-top: 2px solid rgba(255,255,255,0.25); padding-top: 1.25rem; }
.trust-builders .bb-stat__value { font-size: clamp(2.5rem, 4.5vw, 3.75rem); }
.trust-builders .bb-stat__label { font-size: 12px; letter-spacing: 0.14em; }

/* Contact page — left figure (Galleria sketch) */
.contact-figure { border: 1px solid var(--color-line); background: var(--color-surface); padding: 1rem; }
.contact-figure img { display: block; width: 100%; height: auto; }
.contact-figure figcaption { margin-top: 0.75rem; display: flex; justify-content: space-between; gap: 1rem; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-muted); }

/* About market map — active/expansion market rows */
.market-rows { margin-top: 3rem; border-bottom: 1px solid var(--color-line-dark); }
.market-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--color-line-dark); padding-block: 1.5rem; transition: background-color .3s; }
.market-row:hover { background: rgba(255,255,255,0.03); }
.market-row__main { display: flex; align-items: center; gap: 1.25rem; }
.market-row__dot { display: flex; height: 3rem; width: 3rem; flex: 0 0 auto; align-items: center; justify-content: center; border: 1px solid var(--color-line-dark); background: var(--color-ink-2); }
.market-row__dot.is-active { border-color: var(--color-brand-bright); background: var(--color-brand); }
.market-row__eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(246,246,242,0.5); }
.market-row__dot.is-active + div .market-row__eyebrow, .market-row__main .is-active-eyebrow { color: var(--color-brand-bright); }
.market-row__name { margin-top: 0.25rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--color-paper); }
@media (min-width: 640px) { .market-row__name { font-size: 1.5rem; } }
.market-row__status { margin-top: 0.375rem; display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(246,246,242,0.55); }
.market-row__status .pip { display: inline-block; height: 6px; width: 6px; border: 1px solid rgba(246,246,242,0.5); }
.market-row__status .pip.is-active { background: var(--color-brand-bright); border-color: var(--color-brand-bright); }
.market-row__arrow { color: rgba(246,246,242,0.3); transition: transform .3s, color .3s; }
.market-row:hover .market-row__arrow { transform: translateX(4px); color: var(--color-brand-bright); }
.market-map svg { width: 100%; height: auto; }

/* FAQ accordion (sell page — item 11) */
.faq-accordion { margin-top: 3rem; border-bottom: 1px solid var(--color-line); }
.faq-acc { border-top: 1px solid var(--color-line); }
.faq-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.75rem; transition: color .3s; }
.faq-acc > summary::-webkit-details-marker { display: none; }
.faq-acc__q { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; transition: color .3s; }
@media (min-width: 640px) { .faq-acc__q { font-size: 1.5rem; } }
.faq-acc:hover .faq-acc__q, .faq-acc[open] .faq-acc__q { color: var(--color-brand); }
.faq-acc__icon { position: relative; flex: 0 0 auto; width: 18px; height: 18px; }
.faq-acc__icon::before, .faq-acc__icon::after { content: ""; position: absolute; background: var(--color-ink); transition: transform .3s, opacity .3s; }
.faq-acc__icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq-acc__icon::after  { left: 8px; top: 0; width: 2px; height: 18px; }
.faq-acc[open] .faq-acc__icon::after { transform: scaleY(0); opacity: 0; }
.faq-acc[open] .faq-acc__icon::before { background: var(--color-brand); }
.faq-acc__body { overflow: hidden; padding-bottom: 1.75rem; }
.faq-acc__body p { max-width: 60rem; font-size: 1rem; line-height: 1.75; color: var(--color-muted); }
@media (min-width: 640px) { .faq-acc__body p { font-size: 1.0625rem; } }
.faq-acc[open] .faq-acc__body { animation: bb-faq-open .4s cubic-bezier(0.16,1,0.3,1); }
@keyframes bb-faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .faq-acc[open] .faq-acc__body { animation: none; } }

/* =====================================================================
   v2.2 — Header / hero / footer hardening
   (defensive: survive WP admin bar + third-party CSS resets on the
   dev host; the live build already renders these correctly.)
   ===================================================================== */

/* WP admin bar: offset the fixed header AND the scrub hero's negative pull
   so the hero copy and canvas never slide under the admin bar / logo. */
.admin-bar { --admin-bar-h: 32px; }
@media (max-width: 782px) { .admin-bar { --admin-bar-h: 46px; } }
.admin-bar .bb-header { top: var(--admin-bar-h); }
.admin-bar .hero-scrub { margin-top: calc(-1 * (var(--header-h) - var(--admin-bar-h))); }
.admin-bar .hero-scrub__sticky { top: var(--admin-bar-h); }

/* Hero headline — lock size/weight/colour so it can't fall back to a huge
   unstyled serif if the base rule is overridden. */
.bb-main .hero-scrub h1,
.hero-scrub .hero-scrub__copy h1 {
  position: relative;
  max-width: 56rem;
  margin: 0;
  font-family: var(--font-display), "Archivo", system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
  font-size: clamp(2.125rem, 4.6vw, 4.375rem);
  text-shadow: 0 2px 20px rgba(6,9,18,0.72), 0 1px 3px rgba(6,9,18,0.6);
  /* v2.2.7 — the size/weight/colour lock above already survives a base-rule
     override, but not an external "fade up on scroll" reset that zeroes
     heading opacity by default. That left the first hero line invisible on
     the live host while the (data-reveal-protected) eyebrow/sub/buttons and
     the plain <p> mid/outro beats rendered fine. Locking opacity here fixes
     slide 1 the same way; the scroll-scrub crossfade between the 3 hero
     beats still works because that fade is driven by the *parent* layer's
     opacity, not the h1's own. */
  opacity: 1 !important;
  visibility: visible !important;
}
.hero-scrub h1 .text-brand,
.hero-scrub h1 .text-brand-bright { color: var(--color-brand-bright); }

/* Nav: never let the primary nav wrap or collide with the logo on desktop. */
@media (min-width: 1024px) {
  .bb-header__bar { flex-wrap: nowrap; }
  .bb-nav, .bb-nav--wp .bb-nav__wp-list { flex-wrap: nowrap; white-space: nowrap; }
  .bb-nav__link { white-space: nowrap; }
}

/* Footer columns: hold the multi-column grid even if a reset zeroes it. */
.bb-footer .bb-footer__map { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 768px) { .bb-footer .bb-footer__map { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.bb-footer .bb-footer__base .top { display: flex; }
@media (min-width: 768px) { .bb-footer .bb-footer__base .top { flex-direction: row; align-items: center; justify-content: space-between; } }

/* =====================================================================
   v2.2.6 — Hero stagger (layers onto the unified reveal animation above).
   The unified .js .mask-reveal / [data-reveal] rules already animate the hero
   copy in with `both` fill (ends visible). Here we only add a pleasing stagger
   to the hero lines; no separate keyframes, so nothing can conflict or stick. */
.js .hero-scrub h1 .mask-reveal:nth-child(1) > span { animation-delay: .10s; }
.js .hero-scrub h1 .mask-reveal:nth-child(2) > span { animation-delay: .22s; }
.js .hero-scrub h1 .mask-reveal:nth-child(3) > span { animation-delay: .34s; }
.js .hero-scrub .hero-scrub__eyebrow { animation-delay: .06s; }
.js .hero-scrub .hero-scrub__sub { animation-delay: .40s; }
.js .hero-scrub .hero-scrub__actions { animation-delay: .52s; }
.js .hero-scrub .hero-scrub__trust { animation-delay: .64s; }

/* Sell hero — recorded plat background (blueprint linework) */
.sell-hero__plat {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: -16%;
  height: 100%;
  width: 95%;
  object-fit: cover;
  object-position: left center;
  filter: invert(1);
  opacity: 0.16;
  z-index: 0;
}
@media (min-width: 640px) { .sell-hero__plat { right: -8%; width: 72%; } }
@media (min-width: 1024px) { .sell-hero__plat { right: -4%; width: 62%; opacity: 0.22; } }
.sell-hero__grade {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, var(--color-ink) 0%, rgba(12,17,31,0.7) 55%, transparent 100%),
    linear-gradient(0deg, var(--color-ink) 0%, transparent 45%);
}

/* Sell "Meet the People" — scroll-snap carousel (3 visible, all reps) */
.people-carousel { position: relative; margin-top: 3rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; }
/* Full-bleed: break the carousel out of .bb-container to span the viewport */
.people-carousel { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-inline: 1.25rem; box-sizing: border-box; }
@media (min-width: 640px) { .people-carousel { padding-inline: 2rem; } }
@media (min-width: 1024px) { .people-carousel { padding-inline: 2.5rem; } }
.people-carousel__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.people-carousel__viewport::-webkit-scrollbar { display: none; }
.people-carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: 85%; gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); }
@media (min-width: 640px) { .people-carousel__track { grid-auto-columns: 46%; } }
@media (min-width: 1024px) { .people-carousel__track { grid-auto-columns: calc(33.333% - 0.67px); } }
@media (min-width: 1440px) { .people-carousel__track { grid-auto-columns: calc(25% - 0.75px); } }
.people-carousel .people-card { scroll-snap-align: start; }
.people-carousel__btn { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-ink); font-size: 1rem; cursor: pointer; transition: background-color .2s, border-color .2s; }
.people-carousel__btn:hover { background: var(--color-paper); border-color: rgba(12,17,31,.25); }
@media (max-width: 639px) { .people-carousel { grid-template-columns: 1fr; } .people-carousel__btn { display: none; } }

/* Careers BB monogram scroll-scrub */
.logo-scrub { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.logo-scrub__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .4s ease; }
.logo-scrub__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Static careers monogram — fixed, always-visible (matches the live site).
   No scroll-scrub canvas, so the still is the authoritative image and can
   never be hidden or left blank. */
.logo-scrub--static .logo-scrub__still { position: static; opacity: 1 !important; transition: none; }

/* =====================================================================
   v2.3.1 — Hero slide 1 (intro) FULL-VISIBILITY FIX  (CSS-only, authoritative)
   ---------------------------------------------------------------------
   Symptom on the live host: the first hero slide's headline + copy rendered
   at a low, washed-out opacity (and the mixed white / brand-blue words read as
   a broken "half-visible" split), while slides 2 and 3 looked fine.

   Root cause: hero-scrub.js writes an INLINE opacity onto the intro layer every
   animation frame. An inline style outranks an ordinary class rule, so any
   normal CSS floor we set was being overridden — and when the section loads
   under the fixed header (negative margin-top) the computed progress starts
   slightly above 0, so that inline opacity was written as a partial value.

   Fix: pin the intro layer and its copy to full opacity with !important, which
   an inline style cannot beat. Slide 1 now simply stays lit; the handoff to
   slides 2 and 3 still works because those beats fade IN on top of it at their
   own scroll position and cover it. Also hardens the text-shadow so the white
   and brand-blue words both stay legible over the bright render.
   ===================================================================== */
/* Floor applies only at the top (before the intro has scrolled past). Once the
   layer gets .is-past, hero-scrub.js drives its opacity down so it fades out and
   hands off to slides 2 and 3 — it no longer stays stuck on screen. */
.hero-scrub__layer[data-hero-intro] { transition: opacity .35s ease; }
.hero-scrub__layer[data-hero-intro]:not(.is-past) {
  opacity: 1 !important;
  visibility: visible !important;
}
.hero-scrub__layer[data-hero-intro]:not(.is-past) .hero-scrub__copy,
.hero-scrub__layer[data-hero-intro]:not(.is-past) .hero-scrub__copy h1,
.hero-scrub__layer[data-hero-intro]:not(.is-past) .hero-scrub__copy .hero-scrub__eyebrow,
.hero-scrub__layer[data-hero-intro]:not(.is-past) .hero-scrub__copy .hero-scrub__sub,
.hero-scrub__layer[data-hero-intro]:not(.is-past) .hero-scrub__copy .hero-scrub__actions,
.hero-scrub__layer[data-hero-intro]:not(.is-past) .hero-scrub__copy .hero-scrub__trust {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}
/* Keep both the white and the brand-blue words readable over the photo. */
.hero-scrub__layer[data-hero-intro] .hero-scrub__copy h1 {
  color: #fff !important;
  text-shadow: 0 2px 22px rgba(6,9,18,0.82), 0 1px 4px rgba(6,9,18,0.7) !important;
}
.hero-scrub__layer[data-hero-intro] .hero-scrub__copy h1 .text-brand,
.hero-scrub__layer[data-hero-intro] .hero-scrub__copy h1 .text-brand-bright {
  color: #6f8dff !important; /* brighter brand tint so it doesn't read as dim over the render */
  text-shadow: 0 2px 22px rgba(6,9,18,0.85), 0 1px 4px rgba(6,9,18,0.75) !important;
}