/*
Theme Name: Brad Johnson Real Estate Group
Theme URI:
Description: Standalone WordPress theme for Brad Johnson Real Estate Group, Iowa. Primary Navy, Heritage Red, warm white, with a Special Elite / Montserrat / Cormorant Garamond type system. No framework dependencies.
Author: Automotive Integrations
Author URI: https://automotiveintegrations.com
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: brad-johnson
Tags: real-estate, editorial, custom-menu, custom-colors, featured-images, two-columns
*/

/* ==========================================================
   SELF-HOSTED FONTS — no external requests, no font flash
   ========================================================== */
/* ==========================================================
   BRAD JOHNSON REAL ESTATE GROUP - DESIGN TOKENS
   Navy #0F2D5C / Heritage Red #B32025 / Charcoal #2E2E2E
   on Warm White #FAF9F6. Red is an accent, never a surface.
   ========================================================== */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/anton.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('assets/fonts/special-elite.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url('assets/fonts/montserrat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: optional;
  src: url('assets/fonts/cormorant-garamond.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bj-ink: #2E2E2E;
  --bj-ink-soft: #4a4a4a;
  --bj-paper: #FAF9F6;
  --bj-paper-2: #F1EFE8;
  --bj-rule: rgba(46,46,46,0.10);
  --bj-rule-strong: rgba(46,46,46,0.18);
  --bj-muted: #6b6b6b;

  /* Heritage Red: accents and calls to action only. The guide budgets it at ~8%. */
  --bj-red: #B32025;
  --bj-red-soft: #d2564f;

  /* Primary Navy: logo, headlines, signage */
  --bj-navy: #0F2D5C;
  --bj-navy-soft: #2a4a7d;
  --bj-navy-deep: #091d3d;

  /* Inherited accent scale, repointed into the navy family.
     Brad's palette is only four colors, so these want consolidating in the design pass. */
  --bj-indigo: #2a4a7d;
  --bj-blue: #4a6c9b;
  --bj-sky: #8fa8c6;
  --bj-gold: #0F2D5C;
  --bj-gold-soft: #E8EDF4;
  --bj-gold-deep: #091d3d;

  /* Display is Cormorant Garamond, taking the editorial role Fraunces held.
     Special Elite is the distressed typewriter face: wordmark, eyebrows, small labels.
     The guide says use it sparingly, so it is deliberately not the headline face. */
  --bj-f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --bj-f-body: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bj-f-mono: "Special Elite", "Courier New", Courier, monospace;
  --bj-f-accent: "Special Elite", "Courier New", Courier, monospace;

  --bj-maxw: 1360px;
  --bj-gut: clamp(24px, 3vw, 56px);
}

/* ===================== RESET ===================== */
body.brad-johnson * { box-sizing: border-box; }
body.brad-johnson {
  margin: 0;
  font-family: var(--bj-f-body);
  background: var(--bj-paper);
  color: var(--bj-ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.brad-johnson a { color: inherit; text-decoration: none; }
body.brad-johnson img { max-width: 100%; height: auto; display: block; }

/* ===================== TYPE ===================== */
.bj-eyebrow {
  font-family: var(--bj-f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bj-muted);
  font-weight: 500;
}
.bj-eyebrow--paper { color: rgba(251,250,247,0.75); }

.bj-display {
  font-family: var(--bj-f-display);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin: 0;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.bj-display em, .bj-display i {
  font-style: italic;
  font-weight: 400;
  color: var(--bj-ink-soft);
}
.bj-display--xl { font-size: clamp(52px, 7.2vw, 104px); letter-spacing: -0.025em; }
.bj-display--lg { font-size: clamp(42px, 5.4vw, 78px); letter-spacing: -0.02em; }
.bj-display--md { font-size: clamp(32px, 3.8vw, 54px); }
.bj-display--sm { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.01em; line-height: 1.15; }

.bj-lead {
  font-weight: 400;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--bj-ink-soft);
}
.bj-hl-red { color: var(--bj-red); }

/* Subtle underline: thin red rule beneath the word, not a highlight block */
.bj-underline-red {
  position: relative;
  display: inline-block;
  padding-bottom: 0.06em;
  background-image: linear-gradient(var(--bj-red), var(--bj-red));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 3px;
}
.bj-hl-gold {
  position: relative;
  display: inline-block;
  padding-bottom: 0.06em;
  background-image: linear-gradient(var(--bj-gold), var(--bj-gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 3px;
}

.bj-frame { max-width: var(--bj-maxw); margin: 0 auto; padding: 0 var(--bj-gut); }
.bj-rule { height: 1px; background: var(--bj-ink); opacity: 0.1; width: 100%; }
.bj-muted { color: var(--bj-muted); }

/* ===================== BUTTONS ===================== */
.brad-johnson .wp-block-button__link,
.bj-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--bj-f-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  border: 1px solid var(--bj-ink);
  border-radius: 2px;
  background: var(--bj-ink);
  color: var(--bj-paper);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.brad-johnson .wp-block-button__link:hover,
.bj-btn:hover { background: var(--bj-ink-soft); border-color: var(--bj-ink-soft); }

.brad-johnson .is-style-outline .wp-block-button__link,
.bj-btn--ghost {
  background: transparent;
  color: var(--bj-ink);
  border-color: var(--bj-rule-strong);
}
.bj-btn--ghost:hover { background: transparent; color: var(--bj-ink); border-color: var(--bj-ink); }

/* Red button = primary CTA only, used sparingly */
a.bj-btn--red, button.bj-btn--red, .bj-btn--red {
  background: var(--bj-red); border-color: var(--bj-red); color: #fff !important;
}
a.bj-btn--red:hover, button.bj-btn--red:hover, .bj-btn--red:hover {
  background: #a31414; border-color: #a31414; color: #fff !important;
}
.bj-btn--red .bj-arrow, .bj-btn--red svg { stroke: #fff; color: #fff; }

.bj-btn--paper { background: var(--bj-paper); color: var(--bj-ink); border-color: var(--bj-paper); }
.bj-btn--paper:hover { background: transparent; color: var(--bj-paper); border-color: var(--bj-paper); }

/* ===================== COMMUNITY CARDS ===================== */
.bj-communities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.bj-community {
  display: block;
  text-decoration: none;
  color: var(--bj-ink);
  background: var(--bj-paper);
  border: 1px solid var(--bj-rule);
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease;
  cursor: pointer;
}
.bj-community:hover { transform: translateY(-2px); border-color: var(--bj-ink); }
.bj-community__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bj-paper-2);
  position: relative;
}
.bj-community__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(20,20,20,0.18) 100%);
  pointer-events: none;
}
.bj-community .bj-community__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
  display: block;
}
.bj-community:hover .bj-community__media img { transform: scale(1.04); }
.bj-community__body { padding: 22px 24px 26px; }
.bj-community__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 10px;
}
.bj-community__row h3 {
  font-family: var(--bj-f-display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.015em;
  margin: 0;
}
.bj-community__row span {
  font-family: var(--bj-f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--bj-muted);
  text-transform: uppercase;
}
.bj-community p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--bj-ink-soft, #2a2a2a);
  margin: 0;
}
.bj-communities-more {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 0;
}
.bj-communities-more__label { margin-right: 16px; }
.bj-communities-more__link {
  font-family: var(--bj-f-display);
  font-size: 17px;
  color: var(--bj-ink);
  text-decoration: none;
  transition: color .2s ease;
}
.bj-communities-more__link:hover { color: var(--bj-red); }
.bj-communities-more__link:not(:last-child)::after {
  content: "·";
  margin: 0 11px;
  color: var(--bj-muted);
}

a.bj-btn--indigo, button.bj-btn--indigo, .bj-btn--indigo { background: var(--bj-indigo); border-color: var(--bj-indigo); color: #fff !important; }
a.bj-btn--indigo:hover, button.bj-btn--indigo:hover, .bj-btn--indigo:hover { background: #46457c; border-color: #46457c; }

a.bj-btn--gold, button.bj-btn--gold, .bj-btn--gold {
  background: var(--bj-gold); border-color: var(--bj-gold); color: #fff !important;
}
a.bj-btn--gold:hover, button.bj-btn--gold:hover, .bj-btn--gold:hover {
  background: var(--bj-gold-deep); border-color: var(--bj-gold-deep); color: #fff !important;
}
.bj-btn--gold .bj-arrow, .bj-btn--gold svg { stroke: #fff; color: #fff; }

.bj-arrow { width: 13px; height: 13px; transition: transform .25s ease; }
.bj-btn:hover .bj-arrow, .wp-block-button__link:hover .bj-arrow { transform: translateX(3px); }

/* ===================== PLACEHOLDER IMAGERY ===================== */
.bj-ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.035) 0 2px, transparent 2px 14px),
    #ebe8e1;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 14px;
}
.bj-ph--dark {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 14px),
    #1e1e1e;
  color: #9a9a9a;
}
.bj-ph__label {
  font-family: var(--bj-f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a7a7a;
  background: rgba(251,250,247,0.9);
  padding: 4px 8px;
  border-radius: 2px;
}
.bj-ph--dark .bj-ph__label { background: rgba(0,0,0,0.55); color: #c0c0c0; }

/* ===================== SITE HEADER / NAV ===================== */
.brad-johnson .site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251,250,247,0.94);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--bj-rule);
  padding: 0;
}
.brad-johnson .site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--bj-maxw); margin: 0 auto;
  height: 84px; padding: 0 var(--bj-gut);
}
.brad-johnson .site-title,
.bj-logo {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--bj-f-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.015em;
  margin: 0;
}
.brad-johnson .site-title a { color: var(--bj-ink); }
.brad-johnson .site-title::before,
.bj-logo .mark {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--bj-red);
  border-radius: 50%;
}
.brad-johnson .site-description { display: none; }
.brad-johnson .bj-custom-logo { display: flex; align-items: center; }
.brad-johnson .bj-custom-logo img { height: 64px !important; width: auto !important; max-width: none !important; display: block; }

.brad-johnson .genesis-nav-menu,
.brad-johnson .nav-primary ul {
  display: flex; gap: 32px; list-style: none; margin: 0; padding: 0;
}
.brad-johnson .genesis-nav-menu a,
.brad-johnson .nav-primary a,
.brad-johnson .bj-nav a {
  font-size: 14px; font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--bj-ink-soft);
  padding: 6px 0;
  position: relative;
  transition: color .15s ease;
}
.brad-johnson .genesis-nav-menu a:hover,
.brad-johnson .nav-primary a:hover,
.brad-johnson .bj-nav a:hover,
.brad-johnson .genesis-nav-menu .current-menu-item a,
.brad-johnson .nav-primary .current-menu-item > a,
.brad-johnson .bj-nav .current-menu-item > a { color: var(--bj-ink); }
.brad-johnson .genesis-nav-menu a::after,
.brad-johnson .nav-primary a::after,
.brad-johnson .bj-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--bj-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s ease;
}
.brad-johnson .genesis-nav-menu a:hover::after,
.brad-johnson .nav-primary a:hover::after,
.brad-johnson .bj-nav a:hover::after { transform: scaleX(1); }
.brad-johnson .genesis-nav-menu .current-menu-item a::after,
.brad-johnson .nav-primary .current-menu-item > a::after,
.brad-johnson .bj-nav .current-menu-item > a::after { transform: scaleX(1); }

.bj-header-cta { display: flex; align-items: center; gap: 14px; }
.bj-header-cta .bj-phone {
  font-family: var(--bj-f-mono);
  font-size: 12px; letter-spacing: 0.02em; color: var(--bj-ink-soft);
}

/* Hamburger toggle — hidden on desktop, shown via media query */
.bj-nav-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.bj-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--bj-ink);
  border-radius: 1px;
  transition: transform .22s ease, opacity .15s ease;
  pointer-events: none;
}
.bj-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bj-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.bj-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===================== HERO ===================== */
.bj-hero {
  padding: 72px 0 0;
  border-bottom: 1px solid var(--bj-rule);
}
.bj-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: stretch;
}
.bj-hero__copy { padding: 24px 0 96px; display: flex; flex-direction: column; justify-content: space-between; }
.bj-hero__eyebrow-row {
  display: flex; align-items: center; gap: 14px; margin-bottom: 40px;
}
.bj-hero__eyebrow-row .bj-rule { max-width: 80px; }
.bj-hero__image {
  position: relative;
  min-height: 580px;
  min-width: 0; /* prevent aspect-ratio from overflowing grid column */
  background: var(--bj-ink);
  overflow: hidden;
}
.bj-hero__image > img,
.bj-hero__image .bj-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.bj-hero__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.18) 45%, transparent 72%);
  pointer-events: none;
  z-index: 1;
}
.bj-hero__image-meta {
  position: absolute; left: 24px; right: 24px; bottom: 24px;
  display: flex; justify-content: space-between; align-items: flex-end;
  color: var(--bj-paper);
  z-index: 2;
}
.bj-hero__bottom-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; margin-top: 56px; max-width: 640px;
}
.bj-hero__ctas { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* ===================== QUIET TAGLINE STRIP (replaces marquee) ===================== */
.bj-tagline-strip {
  border-top: 1px solid var(--bj-rule);
  border-bottom: 1px solid var(--bj-rule);
  padding: 22px 0;
  background: var(--bj-paper);
}
.bj-tagline-strip__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.bj-tagline-strip__item {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--bj-f-mono);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bj-muted);
}
.bj-tagline-strip__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bj-gold);
}

/* ===================== STATS ===================== */
.bj-stats { border-bottom: 1px solid var(--bj-rule); }
.bj-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.bj-stats__cell {
  padding: 48px 28px;
  border-left: 1px solid var(--bj-rule);
}
.bj-stats__cell:first-child { border-left: none; }
.bj-stats__cell .bj-display {
  font-size: clamp(36px, 4vw, 56px);
  font-variation-settings: "opsz" 144;
}
.bj-stats__cell:hover { border-top: 2px solid var(--bj-gold); }

/* ===================== SECTIONS ===================== */
.bj-section { padding: 56px 0; border-bottom: 1px solid var(--bj-rule); }
.bj-section--dark { background: var(--bj-ink); color: var(--bj-paper); }
.bj-section--dark .bj-eyebrow { color: rgba(251,250,247,0.6); }
.bj-section--dark .bj-muted { color: rgba(251,250,247,0.6); }
.bj-section--paper2 { background: var(--bj-paper-2); }
.bj-section--gold { background: var(--bj-gold-soft); }

.bj-section__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 64px;
  gap: 40px;
}

/* ===================== LISTINGS ===================== */
.bj-listings-grid { display: grid; gap: 40px; }
.bj-listings-grid--featured { grid-template-columns: 1.4fr 1fr; margin-bottom: 40px; }
.bj-listings-grid--2 { grid-template-columns: 1fr 1fr; }
.bj-listings-grid--3 { grid-template-columns: repeat(3, 1fr); }

.bj-listing { cursor: pointer; }
.bj-listing__media { position: relative; margin-bottom: 20px; }
.bj-listing__status {
  position: absolute; top: 14px; left: 14px;
  background: var(--bj-paper);
  color: var(--bj-ink);
  font-family: var(--bj-f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 2px;
}
.bj-listing__status--hot { background: var(--bj-red); color: #fff; }
.bj-listing__row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.bj-listing__row .bj-display--sm { font-size: 28px; }
.bj-listing__addr { font-weight: 500; font-size: 16px; color: var(--bj-ink); }
.bj-listing__desc {
  font-size: 15px; line-height: 1.65; color: #444;
  margin: 16px 0 0; padding: 0;
}
.bj-listing__details {
  list-style: none; padding: 0; margin: 20px 0 0;
  display: flex; flex-wrap: wrap; gap: 6px 24px;
}
.bj-listing__details li {
  font-size: 13px; color: var(--bj-ink);
  font-family: var(--bj-f-mono); letter-spacing: .04em;
}
.bj-listing__detail-label {
  color: var(--bj-muted); margin-right: 6px; text-transform: uppercase; font-size: 11px; letter-spacing: .08em;
}
.bj-listing__cta {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px;
}

/* Buy page — row layout for Trestle cards */
.bj-buy-listings .bj-trestle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.bj-buy-listings .bj-trestle-card {
  display: grid;
  grid-template-columns: 420px 1fr;
  border: 1px solid var(--bj-rule);
  background: var(--bj-paper);
  overflow: hidden;
}
.bj-buy-listings .bj-trestle-card__photo {
  grid-row: 1;
  min-height: 320px;
  background-size: cover;
  background-position: center;
}
.bj-buy-listings .bj-trestle-card__body {
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
}
.bj-buy-listings .bj-trestle-card__type {
  font-family: var(--bj-f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bj-muted);
  margin-bottom: 10px;
}
.bj-buy-listings .bj-trestle-card__price {
  font-family: var(--bj-f-display);
  font-size: 40px;
  font-weight: 700;
  color: var(--bj-ink);
  margin-bottom: 10px;
}
.bj-buy-listings .bj-trestle-card__address {
  font-size: 18px;
  font-weight: 600;
  color: var(--bj-ink);
  text-decoration: none;
  display: block;
}
.bj-buy-listings .bj-trestle-card__address:hover { text-decoration: underline; }
.bj-buy-listings .bj-trestle-card__location {
  font-size: 14px;
  color: var(--bj-muted);
  margin-top: 4px;
}
.bj-buy-listings .bj-trestle-card__meta {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--bj-rule);
}
.bj-buy-listings .bj-trestle-card__meta span {
  font-family: var(--bj-f-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--bj-ink);
}
.bj-buy-listings .bj-trestle-card__footer {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.bj-buy-listings .bj-trestle-card__footer span {
  font-size: 12px;
  color: var(--bj-muted);
  font-family: var(--bj-f-mono);
}
.bj-buy-listings .bj-trestle-card__desc {
  font-size: 15px;
  line-height: 1.65;
  color: #444;
  margin-top: 20px;
}
.bj-buy-listings .bj-trestle-card__details {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
}
.bj-buy-listings .bj-trestle-card__details li {
  font-size: 13px;
  font-family: var(--bj-f-mono);
  letter-spacing: .04em;
  color: var(--bj-ink);
}
.bj-buy-listings .bj-trestle-card__detail-label {
  color: var(--bj-muted);
  margin-right: 6px;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .08em;
}
.bj-buy-listings .bj-trestle-card__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 28px;
}
.bj-trestle-count {
  font-family: var(--bj-f-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--bj-muted);
  margin-bottom: 24px;
}

/* Buy page — row layout (CPT fallback cards) */
.bj-buy-listings .bj-listings-grid--featured {
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 0;
}
.bj-buy-listings .bj-listing {
  display: grid;
  grid-template-columns: 420px 1fr;
  grid-template-rows: auto auto auto 1fr;
  border: 1px solid var(--bj-rule);
  background: var(--bj-paper);
  overflow: hidden;
}
.bj-buy-listings .bj-listing__media {
  grid-column: 1;
  grid-row: 1 / -1;
  margin-bottom: 0;
}
.bj-buy-listings .bj-listing__media a,
.bj-buy-listings .bj-listing__media > a { display: block; height: 100%; }
.bj-buy-listings .bj-listing__media img,
.bj-buy-listings .bj-listing__media .bj-ph {
  width: 100%;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: unset !important;
  min-height: 300px;
  display: block;
}
.bj-buy-listings .bj-listing__row {
  grid-column: 2;
  padding: 40px 48px 16px;
  margin-bottom: 0;
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
}
.bj-buy-listings .bj-listing__row .bj-display--sm { font-size: 40px; }
.bj-buy-listings .bj-listing__addr {
  grid-column: 2;
  padding: 0 48px;
  font-size: 18px;
}
.bj-buy-listings .bj-listing .bj-muted {
  grid-column: 2;
  padding: 6px 48px 0;
  font-size: 15px;
}
.bj-buy-listings .bj-listing__desc {
  grid-column: 2;
  margin: 20px 0 0;
  padding: 0 48px;
}
.bj-buy-listings .bj-listing__details {
  grid-column: 2;
  padding: 0 48px;
  margin-top: 20px;
}
.bj-buy-listings .bj-listing__cta {
  grid-column: 2;
  padding: 0 48px 44px;
  margin-top: 28px;
  align-items: center;
}

/* ===================== PILLARS ===================== */
.bj-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin-top: 72px; }
.bj-pillar { border-top: 1px solid var(--bj-rule-strong); padding-top: 28px; }
.bj-pillar__head { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.bj-pillar__dot {
  width: 5px; height: 5px; background: var(--bj-red);
  border-radius: 50%;
}

/* ===================== TESTIMONIALS ===================== */
.bj-testimonials {
  display: grid; grid-template-columns: 1fr 1.7fr; gap: 80px;
  align-items: flex-start;
}
.bj-testimonial__quote-mark {
  font-family: var(--bj-f-display);
  font-weight: 400; font-style: italic;
  font-size: 120px;
  line-height: 0.5;
  color: var(--bj-red);
  margin-bottom: 24px;
  opacity: 0.85;
}
.bj-testimonial__body {
  font-family: var(--bj-f-display);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.25; letter-spacing: -0.01em;
  margin: 0 0 40px;
  color: var(--bj-paper);
}
.bj-testimonial__foot { display: flex; justify-content: space-between; align-items: flex-end; }

/* ===================== BIG CTA (softened — paper bg, not red) ===================== */
.bj-bigcta {
  padding: 140px 0; background: var(--bj-paper-2);
  text-align: center;
  border-bottom: 1px solid var(--bj-rule);
}
.bj-bigcta__ctas { display: flex; gap: 14px; justify-content: center; }

/* ===================== IDX / BUY ===================== */
.bj-idx-tabs {
  background: var(--bj-paper-2);
  border-bottom: 1px solid var(--bj-rule);
}
.bj-idx-tab-bar {
  display: flex; flex-wrap: wrap; gap: 0;
  border-bottom: 1px solid var(--bj-rule);
  padding-top: 20px;
}
.bj-idx-tab {
  appearance: none; background: transparent; border: 0;
  padding: 16px 22px 14px; margin-bottom: -1px;
  font-family: var(--bj-f-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bj-muted); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.bj-idx-tab:hover { color: var(--bj-ink); }
.bj-idx-tab.is-active {
  color: var(--bj-ink);
  border-bottom-color: var(--bj-red);
}
.bj-idx-panel { display: none; }
.bj-idx-panel.is-active { display: block; }
.bj-idx-embed { padding: 28px 0; }
/* Prevent theme resets from conflicting with IDX plugin output */
.bj-idx-embed * { box-sizing: revert; }
.bj-idx-embed a { color: revert; text-decoration: revert; }
.bj-idx-embed img { max-width: revert; height: revert; display: revert; }

.bj-idx-searchbar {
  background: var(--bj-paper-2);
  padding: 28px 0;
  border-bottom: 1px solid var(--bj-rule);
}
.bj-idx-searchbar__grid {
  display: grid; grid-template-columns: 2.2fr 1fr 1fr .8fr .8fr auto;
  gap: 20px; align-items: end;
}
.bj-idx-searchbar label {
  font-family: var(--bj-f-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bj-muted); margin-bottom: 6px; display: block;
}
.bj-idx-searchbar input,
.bj-idx-searchbar select {
  width: 100%; background: transparent;
  border: none; border-bottom: 1px solid var(--bj-rule-strong);
  color: var(--bj-ink); padding: 8px 0;
  font-family: var(--bj-f-body); font-size: 15px;
  outline: none; /* focus ring restored in the accessibility layer below */
}
.bj-idx-searchbar input:focus,
.bj-idx-searchbar select:focus { border-bottom-color: var(--bj-ink); }

/* ===================== SELL: PROCESS ===================== */
.bj-process-row {
  display: grid;
  grid-template-columns: 100px 280px 1fr 40px;
  gap: 40px; align-items: baseline;
  padding: 36px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.bj-process-row:first-child { border-top: 1px solid rgba(255,255,255,0.25); }
.bj-process-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.bj-process-num {
  font-family: var(--bj-f-display);
  font-weight: 400; font-style: italic;
  font-size: clamp(32px, 3.6vw, 54px);
  line-height: 1; letter-spacing: -0.02em;
  color: var(--bj-red-soft);
}

/* ===================== CONTACT ===================== */
.bj-contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 72px; }
.bj-contact-directory > div { padding: 28px 0; border-bottom: 1px solid var(--bj-rule); }
.bj-contact-directory > div:first-child { padding-top: 0; }
.bj-contact-form {
  background: var(--bj-paper);
  border: 1px solid var(--bj-rule);
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}
.bj-contact-form > div { padding-bottom: 28px; }
.bj-contact-form .bj-contact-form__full { grid-column: 1 / -1; }
.bj-contact-form label {
  display: block;
  font-family: var(--bj-f-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bj-muted);
  margin-bottom: 10px;
}
/* Required marker: a true red on purpose, --bj-red now remaps to rust. */
.bj-contact-form .bj-req { color: #B3261E; }
.bj-contact-form input,
.bj-contact-form select,
.bj-contact-form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--bj-rule-strong, var(--bj-ink));
  color: var(--bj-ink);
  padding: 10px 0;
  font-family: var(--bj-f-body);
  font-size: 16px;
  outline: none; /* focus ring restored in the accessibility layer below */
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}
.bj-contact-form input:focus,
.bj-contact-form select:focus,
.bj-contact-form textarea:focus {
  border-bottom-color: var(--bj-red);
  outline: none; /* focus ring restored in the accessibility layer below */
}
.bj-contact-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23222' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 24px;
  cursor: pointer;
}
.bj-contact-form textarea {
  border: 1px solid var(--bj-rule);
  padding: 14px;
  min-height: 140px;
  resize: vertical;
  border-radius: 0;
}
.bj-contact-form textarea:focus { border-color: var(--bj-red); }
.bj-contact-form button { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }

/* ===================== FOOTER ===================== */
.brad-johnson .site-footer {
  background: var(--bj-ink); color: var(--bj-paper);
  padding: 88px var(--bj-gut) 40px;
}
.bj-footer-inner { max-width: var(--bj-maxw); margin: 0 auto; }
.bj-footer-brand {
  font-family: var(--bj-f-display);
  font-weight: 400;
  font-size: clamp(44px, 5.2vw, 72px);
  line-height: 1.02; letter-spacing: -0.025em;
  margin-bottom: 64px;
  color: var(--bj-paper);
}
.bj-footer-brand em { font-style: italic; color: var(--bj-red-soft); }
.bj-footer-brand .bj-hl-red { color: var(--bj-red-soft); font-style: italic; }
.bj-footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px; padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.bj-footer-grid h4 {
  font-family: var(--bj-f-mono);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #888;
  margin: 0 0 18px; font-weight: 500;
}
.bj-footer-grid a {
  display: block; padding: 4px 0;
  font-size: 14px; color: #c8c8c8;
}
.bj-footer-grid a:hover { color: var(--bj-paper); }
.bj-footer-bottom {
  display: flex; justify-content: space-between;
  padding-top: 32px;
  font-family: var(--bj-f-mono); font-size: 11px;
  color: #777; letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ===================== FAQ ACCORDION ===================== */
.bj-faq { border-top: 1px solid var(--bj-rule); }
.bj-faq__item { border-bottom: 1px solid var(--bj-rule); }
.bj-faq__q {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 28px 0; gap: 24px; text-align: left;
  font-family: var(--bj-f-display); font-size: 20px; font-weight: 500;
  color: var(--bj-ink); line-height: 1.3;
}
.bj-faq__q:hover { color: var(--bj-red); }
.bj-faq__q--gold:hover { color: var(--bj-gold); }
.bj-faq__chevron { flex-shrink: 0; transition: transform .2s ease; }
.bj-faq__item[data-open] .bj-faq__chevron { transform: rotate(180deg); }
.bj-faq__a { padding: 0 0 28px; }
.bj-faq__a p { font-size: 17px; line-height: 1.75; color: #2a2a2a; margin: 0; }

/* ===================== GENESIS BLOCKS OVERRIDES ===================== */
.brad-johnson .gb-block-container { max-width: var(--bj-maxw); margin-left: auto; margin-right: auto; }
.brad-johnson .gb-block-container--full { max-width: none; }
.brad-johnson .wp-block-separator { background: var(--bj-ink); opacity: 0.1; border: none; height: 1px; }

/* ===================== RESOURCES PAGE ===================== */
.bj-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.bj-resource-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border: 1px solid var(--bj-rule);
  background: var(--bj-paper);
  transition: border-color .25s ease, transform .25s ease;
}
.bj-resource-card:hover { border-color: var(--bj-ink); transform: translateY(-2px); }
.bj-resource-card__icon {
  display: inline-flex;
  color: var(--bj-red);
  margin-bottom: 20px;
}
.bj-resource-card__icon svg { width: 32px; height: 32px; }
.bj-resource-card__title {
  font-family: var(--bj-f-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.bj-resource-card__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--bj-ink-soft);
  margin: 0 0 24px;
}
.bj-resource-card__cta { margin-top: auto; align-self: flex-start; }

.bj-homebot {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: center;
  padding: 48px;
  background: var(--bj-gold-soft);
  border: 1px solid var(--bj-rule);
}
.bj-homebot__media { margin: 0; }
.bj-homebot__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--bj-rule);
  background: var(--bj-paper);
}
.bj-homebot__title {
  font-family: var(--bj-f-display);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
}
.bj-homebot__desc {
  font-size: 17px;
  line-height: 1.65;
  color: var(--bj-ink-soft);
  margin: 0;
  max-width: 560px;
}

@media (max-width: 960px) {
  .bj-resource-grid { grid-template-columns: 1fr 1fr; }
  .bj-homebot { grid-template-columns: 1fr; gap: 28px; padding: 36px; }
  .bj-homebot__media { max-width: 320px; }
}
@media (max-width: 640px) {
  .bj-resource-grid { grid-template-columns: 1fr; gap: 20px; }
  .bj-homebot { padding: 28px; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1080px) {
  .bj-hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .bj-hero__image { aspect-ratio: 4/5; min-height: 0; max-height: 75vh; }
  .bj-process-row { grid-template-columns: 80px 220px 1fr 40px; gap: 24px; }
}

@media (max-width: 960px) {
  /* Tame section padding on tablets */
  .bj-section { padding: 32px 0; }
  .bj-section__head { flex-direction: column; align-items: flex-start; gap: 24px; }

  /* Class-based grids collapse */
  .bj-hero__bottom-row,
  .bj-listings-grid--featured,
  .bj-listings-grid--2,
  .bj-listings-grid--3,
  .bj-pillars,
  .bj-testimonials,
  .bj-contact-grid,
  .bj-footer-grid,
  .bj-communities { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }

  .bj-stats__grid { grid-template-columns: 1fr 1fr; }
  .bj-stats__cell { border-top: 1px solid var(--bj-rule); border-left: none; }
  .bj-idx-searchbar__grid { grid-template-columns: 1fr 1fr !important; gap: 16px; }
  .bj-idx-searchbar__grid > .bj-btn,
  .bj-idx-searchbar__grid > button[type="submit"] { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
  .bj-idx-tab-bar { flex-wrap: wrap; }
  .bj-process-row { grid-template-columns: 60px 1fr !important; gap: 16px; }
  .bj-process-row > *:nth-child(3) { grid-column: 1 / -1; }
  .bj-process-row > *:nth-child(4) { display: none; }

  /* Inline-styled grids in templates — flatten or 2-col */
  [style*="grid-template-columns:1.3fr 1fr"],
  [style*="grid-template-columns:1fr 1.3fr"],
  [style*="grid-template-columns:1fr 1.4fr"],
  [style*="grid-template-columns:0.9fr 1.1fr"],
  [style*="grid-template-columns:1.15fr 1fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns:1fr 1.7fr"] { grid-template-columns: 1fr !important; gap: 40px !important; }

  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"] { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }

  /* 4-column grids (e.g. weather forecast) → 2 columns at tablet */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; gap: 0 !important; }

  /* Community hero thumbnail column — collapse below fixed 380px */
  [style*="grid-template-columns:1fr 380px"] { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Header — hamburger pattern */
  .bj-nav-toggle { display: flex; }
  .brad-johnson .site-header .wrap {
    height: auto; padding: 14px var(--bj-gut);
    gap: 12px;
  }
  /* Nav collapses; opens as a block below header strip */
  .brad-johnson .nav-primary {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: rgba(251,250,247,0.98);
    border-bottom: 1px solid var(--bj-rule);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    padding: 8px var(--bj-gut) 20px;
    z-index: 50;
  }
  .brad-johnson .nav-primary.is-open { display: block; }
  .brad-johnson .nav-primary.is-open .bj-nav,
  .brad-johnson .nav-primary.is-open .genesis-nav-menu { flex-direction: column; gap: 0; }
  .brad-johnson .nav-primary.is-open .bj-nav li,
  .brad-johnson .nav-primary.is-open .genesis-nav-menu li { margin: 0; }
  .brad-johnson .nav-primary.is-open .bj-nav a,
  .brad-johnson .nav-primary.is-open .genesis-nav-menu a {
    display: block; padding: 14px 0; font-size: 16px;
    border-bottom: 1px solid var(--bj-rule);
  }
  .brad-johnson .nav-primary.is-open .bj-nav a::after,
  .brad-johnson .nav-primary.is-open .genesis-nav-menu a::after { display: none; }

  /* Hero image meta corners shouldn't overlap on small */
  .bj-hero__image-meta { padding: 18px; }

  /* Footer */
  .bj-footer-brand { font-size: clamp(36px, 8vw, 56px) !important; line-height: 1; }

  /* Big horizontal section heads (e.g. testimonials title row) */
  [style*="grid-template-columns:1fr 2fr"] { text-align: left; }
  [style*="grid-template-columns:1fr 2fr"] > div:last-child { text-align: left !important; }
}

@media (max-width: 640px) {
  /* Mobile: collapse everything to single column */
  .bj-section { padding: 24px 0; }

  .bj-hero { padding-top: 40px; }
  .bj-hero__copy { padding-bottom: 32px; }
  .bj-hero__bottom-row,
  .bj-stats__grid,
  .bj-pillars,
  .bj-listings-grid--featured,
  .bj-listings-grid--2,
  .bj-listings-grid--3,
  .bj-communities,
  .bj-footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Buy page row listing — revert to stacked on mobile */
  .bj-buy-listings .bj-trestle-card,
  .bj-buy-listings .bj-listing { grid-template-columns: 1fr; grid-template-rows: auto; }
  .bj-buy-listings .bj-trestle-card__photo { min-height: 220px; }
  .bj-buy-listings .bj-trestle-card__body { padding: 24px; }
  .bj-buy-listings .bj-trestle-card__price { font-size: 28px; }
  .bj-buy-listings .bj-listing__media { grid-row: auto; }
  .bj-buy-listings .bj-listing__media img,
  .bj-buy-listings .bj-listing__media .bj-ph { min-height: 0; aspect-ratio: 4/3 !important; }
  .bj-buy-listings .bj-listing__row { padding: 24px 24px 12px; }
  .bj-buy-listings .bj-listing__row .bj-display--sm { font-size: 28px; }
  .bj-buy-listings .bj-listing__addr { padding: 0 24px; }
  .bj-buy-listings .bj-listing .bj-muted { padding: 6px 24px 0; }
  .bj-buy-listings .bj-listing__desc { padding: 0 24px; }
  .bj-buy-listings .bj-listing__details { padding: 0 24px; }
  .bj-buy-listings .bj-listing__cta { padding: 0 24px 32px; }

  .bj-idx-searchbar__grid { grid-template-columns: 1fr !important; }

  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"],
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* Contact info + form stack on mobile */
  .bj-contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* Community hero padding reduced + thumbnail hidden on mobile */
  .bj-community-hero { padding: 48px 0 40px; }
  [style*="grid-template-columns:1fr 380px"] { grid-template-columns: 1fr !important; gap: 24px !important; }
  [style*="grid-template-columns:1fr 380px"] > div:last-child { display: none; }

  /* Two-col specialty + about-stats grid: keep a tight 2-col on phone (small cards) */
  [data-bj-grid="2-col-tight"] { grid-template-columns: 1fr 1fr !important; gap: 1px !important; }

  /* Hero typography breathing room */
  .bj-hero__image { aspect-ratio: 3/4; min-height: 0; max-height: 75vh; }
  .bj-hero__ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .bj-hero__ctas .bj-btn { justify-content: center; text-align: center; }

  /* Buttons stack */
  .bj-bigcta__ctas { flex-direction: column; align-items: stretch; }
  .bj-bigcta__ctas .bj-btn { justify-content: center; }

  /* Tagline strip wraps */
  .bj-tagline-strip__row { flex-direction: column; align-items: flex-start; gap: 0; justify-content: flex-start; }
  .bj-tagline-strip__item { padding: 12px 0; border-bottom: 1px solid var(--bj-rule); width: 100%; }
  .bj-tagline-strip__item:last-child { border-bottom: none; }

  /* Listing media never huge */
  .bj-listing__media .bj-ph { aspect-ratio: 4/3 !important; }

  /* Process numbers smaller */
  .bj-process-num { font-size: 32px !important; }
  .bj-process-row { padding: 24px 0; }

  /* Hide phone number — too cramped on mobile */
  .bj-header-cta .bj-phone { display: none; }

  /* Stop tiny buttons & form inputs from overflowing */
  .bj-btn { font-size: 13px; padding: 14px 18px; }
  .bj-idx-searchbar input,
  .bj-idx-searchbar select,
  .bj-contact-form { grid-template-columns: 1fr; padding: 32px 24px; }
  .bj-contact-form input,
  .bj-contact-form select,
  .bj-contact-form textarea { font-size: 16px; /* prevent iOS zoom */ }

  /* Community page inline-padded sections */
  .bj-community-hero,
  .bj-community-api-section { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* Footer brand */
  .bj-footer-brand { font-size: clamp(32px, 11vw, 48px) !important; }
}

@media (max-width: 420px) {
  /* Specialties + about-stats: still 1 col on tiny phones */
  [data-bj-grid="2-col-tight"] { grid-template-columns: 1fr !important; }
}

/* About page stat cards */
.bj-about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 40px;
}
.bj-about-stats__cell {
  padding: 20px;
  border: 1px solid var(--bj-rule);
}
.bj-about-stats__cell + .bj-about-stats__cell { border-left: none; }
@media (max-width: 640px) {
  .bj-about-stats { grid-template-columns: 1fr; }
  .bj-about-stats__cell + .bj-about-stats__cell { border-left: 1px solid var(--bj-rule); border-top: none; }
}

/* ===================== FOOTER SOCIAL LINKS ===================== */
.bj-footer-social { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.bj-footer-social a {
  display: block; padding: 4px 0;
  font-size: 14px; color: #c8c8c8;
}
.bj-footer-social a:hover { color: var(--bj-paper); }

/* ===================== COMMUNITY PAGE ===================== */
.bj-community-hero {
  padding: 80px 0 64px;
  border-bottom: 1px solid var(--bj-rule);
}
.bj-community-hero__back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--bj-f-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bj-muted);
  transition: color .15s ease;
}
.bj-community-hero__back:hover { color: var(--bj-ink); }
.bj-community-hero__back svg { flex-shrink: 0; }

.bj-community-data-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--bj-rule);
}
.bj-community-data-cell {
  padding: 40px 36px;
  border-left: 1px solid var(--bj-rule);
}
.bj-community-data-cell:first-child { border-left: none; }

.bj-community-api-section {
  padding: 96px 0;
  border-bottom: 1px solid var(--bj-rule);
}
.bj-community-api-section__head { margin-bottom: 48px; }

.bj-community-narrative {
  max-width: 720px;
  font-size: 17px; line-height: 1.75; color: var(--bj-ink-soft);
}
.bj-community-narrative p { margin: 0 0 20px; }
.bj-community-narrative p:last-child { margin-bottom: 0; }

/* Demographics grid */
.bj-community-demo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--bj-rule);
}
.bj-community-demo-cell {
  padding: 40px 36px;
  border-left: 1px solid var(--bj-rule);
}
.bj-community-demo-cell:first-child { border-left: none; }

/* Walk/bike/transit score cards */
.bj-community-score-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.bj-community-score-cell {
  padding: 40px 36px;
  border: 1px solid var(--bj-rule);
  background: var(--bj-paper);
}
.bj-community-score-cell__num {
  font-family: var(--bj-f-display);
  font-size: clamp(56px, 6vw, 80px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Google Places business cards */
.bj-community-biz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.bj-community-biz-card {
  padding: 28px;
  border: 1px solid var(--bj-rule);
  background: var(--bj-paper);
}
.bj-community-biz-card__name {
  font-family: var(--bj-f-display);
  font-size: 20px;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

/* GreatSchools embed wrapper */
.bj-community-schools-embed { max-width: 860px; }

/* Community page responsive */
@media (max-width: 960px) {
  .bj-community-data-grid,
  .bj-community-demo-grid,
  .bj-community-score-grid,
  .bj-community-biz-grid { grid-template-columns: 1fr 1fr !important; }

  .bj-community-data-cell,
  .bj-community-demo-cell { border-top: 1px solid var(--bj-rule); border-left: none !important; }
  .bj-community-data-cell:nth-child(odd),
  .bj-community-demo-cell:nth-child(odd) { border-left: none; }
  .bj-community-data-cell:nth-child(even),
  .bj-community-demo-cell:nth-child(even) { border-left: 1px solid var(--bj-rule) !important; }
  .bj-community-data-cell:first-child,
  .bj-community-demo-cell:first-child { border-top: none; }
}

@media (max-width: 640px) {
  .bj-community-data-grid,
  .bj-community-demo-grid,
  .bj-community-score-grid,
  .bj-community-biz-grid { grid-template-columns: 1fr !important; }

  .bj-community-data-cell,
  .bj-community-demo-cell { border-left: none !important; }
  .bj-community-api-section { padding: 56px 0; }
}

/* ===================== HOME: HERO TRIO ===================== */
.bj-herotrio {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--bj-rule-strong);
}
.bj-herotrio__item {
  padding: 28px 32px 28px 0;
  border-right: 1px solid var(--bj-rule);
  text-decoration: none; color: inherit; display: block;
  transition: background .18s ease;
}
.bj-herotrio__item:last-child { border-right: none; }
.bj-herotrio__item:hover { background: var(--bj-paper-2); }
.bj-herotrio__label {
  font-family: var(--bj-f-mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--bj-red); display: block; margin-bottom: 10px;
}
.bj-herotrio__text {
  font-family: var(--bj-f-display); font-size: 22px;
  line-height: 1.25; color: var(--bj-ink);
}
@media (max-width: 860px) {
  .bj-herotrio { grid-template-columns: 1fr; }
  .bj-herotrio__item { border-right: none; border-bottom: 1px solid var(--bj-rule); padding-right: 0; }
}

/* ===================== HOME: IDX TABS ===================== */
.bj-idx-tab-bar { display: flex; gap: 28px; margin-bottom: 22px; flex-wrap: wrap; }
.bj-idx-tab {
  font-family: var(--bj-f-mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--bj-muted); background: none; border: none;
  padding: 0 0 6px; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.bj-idx-tab[aria-selected="true"] { color: var(--bj-ink); border-bottom-color: var(--bj-red); }

/* ===================== HOME: TRUST PILLARS (4-up) ===================== */
.bj-pillars--4 { grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 0; }
@media (max-width: 1000px) { .bj-pillars--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .bj-pillars--4 { grid-template-columns: 1fr; } }

/* ===================== HOME: 10-UP COMMUNITY GRID ===================== */
.bj-communities--ten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px; }
.bj-community-card {
  border-top: 1px solid var(--bj-rule-strong); padding-top: 22px;
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: inherit;
}
.bj-community-card h3 { font-family: var(--bj-f-display); font-size: 26px; line-height: 1.15; margin: 0; }
.bj-community-card p { font-size: 15px; line-height: 1.6; color: var(--bj-muted); margin: 0; }
.bj-community-card__cta {
  font-family: var(--bj-f-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bj-red);
  margin-top: auto;
}
.bj-community-card:hover h3 { color: var(--bj-red); }

@media (max-width: 1100px) { .bj-idx-searchbar__grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 700px)  { .bj-idx-searchbar__grid { grid-template-columns: 1fr 1fr; } }

/* =========================================================================
   CONCEPT-MATCH LAYER
   Aligns the theme with the approved site concept's visual system:
   navy headings on white/cool grounds, Impact display, Georgia-class serif
   for secondary headings, red uppercase eyebrows, bordered cards.
   Kept as a final override layer so it can be lifted in one block.
   ========================================================================= */
:root {
  --bj-paper:      #FFFFFF;
  --bj-paper-2:    #F7F9FC;
  --bj-mist:       #F3F6F9;
  --bj-ink:        #202933;
  --bj-muted:      #66707C;
  --bj-line:       #DDE3E9;
  --bj-rule:       #E8ECF1;
  --bj-rule-strong:#DCE2E8;
  --bj-navy:       #0F2D5C;
  --bj-navy-dark:  #08213F;
  --bj-red:        #B32025;
  --bj-shadow:     0 18px 44px rgba(15,45,92,.12);
  --bj-f-display:  "Anton", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --bj-f-serif:    "Cormorant Garamond", Georgia, serif;
}

body { background: #fff; color: var(--bj-ink); }

/* --- display type --- */
.bj-display {
  font-family: var(--bj-f-display);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.07;
  color: var(--bj-navy);
  font-weight: 400;
}
.bj-display--xl { font-size: clamp(48px, 6vw, 80px); }
.bj-display--lg { font-size: clamp(34px, 4.4vw, 54px); }
.bj-display--md { font-size: clamp(30px, 3.6vw, 44px); }
.bj-display--sm {
  font-family: "Montserrat", sans-serif; font-weight: 800;
  text-transform: none; letter-spacing: 0;
  font-size: 20px; color: var(--bj-navy);
}
.bj-display em, .bj-display i { font-style: normal; color: var(--bj-red); }

/* Secondary headings keep the editorial serif, as the concept does. */
.bj-lead {
  font-family: var(--bj-f-serif);
  font-size: 21px; line-height: 1.5; color: #293748;
}

/* --- eyebrows --- */
.bj-eyebrow {
  font-family: "Montserrat", sans-serif;
  font-size: 12px; font-weight: 900;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--bj-red);
}
.bj-eyebrow--paper { color: #fff; }

/* --- buttons --- */
.bj-btn {
  border-radius: 2px; font-weight: 800;
  font-family: "Montserrat", sans-serif;
  padding: 13px 20px; letter-spacing: .02em;
  text-transform: none; font-size: 14px;
}
.bj-btn--red   { background: var(--bj-red); color: #fff; border: 1px solid var(--bj-red); }
.bj-btn--ghost { background: #fff; color: var(--bj-navy); border: 1px solid var(--bj-navy); }

/* --- dark sections become navy, not charcoal --- */
.bj-section--dark, .bj-bigcta { background: var(--bj-navy); color: #fff; }
.bj-section--dark .bj-display, .bj-bigcta .bj-display { color: #fff; }
.bj-section--paper2 { background: var(--bj-mist); }

/* --- hero --- */
.bj-hero { background: linear-gradient(135deg,#FFFFFF 0%,#F7F9FC 58%,#EEF3F8 100%); }

/* --- cards --- */
.bj-resource-card, .bj-community-card {
  background: #fff; border: 1px solid var(--bj-line);
  padding: 22px; box-shadow: 0 8px 22px rgba(15,45,92,.05);
}
.bj-community-card { border-top: 1px solid var(--bj-line); }
.bj-community-card h3 {
  font-family: "Montserrat", sans-serif; font-weight: 800;
  font-size: 18px; color: var(--bj-navy); text-transform: none;
}
.bj-resource-card__title { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 18px; color: var(--bj-navy); }

/* --- trust pillars as the concept's navy band --- */
.bj-pillars--4 .bj-pillar { border-top: none; }

/* --- search bar --- */
.bj-idx-searchbar { background: var(--bj-mist); }
.bj-idx-searchbar__grid {
  background: #fff; border: 1px solid var(--bj-rule-strong);
  box-shadow: var(--bj-shadow); padding: 14px;
}
.bj-idx-tab {
  font-family: "Montserrat", sans-serif; font-weight: 800;
  letter-spacing: .08em;
}

/* --- hero trio matches the concept's hero actions --- */
.bj-herotrio__label { font-family: "Montserrat", sans-serif; font-weight: 900; color: var(--bj-navy); font-size: 18px; letter-spacing: 0; text-transform: none; }
.bj-herotrio__text  { font-family: "Montserrat", sans-serif; font-size: 13px; color: #536070; }

/* --- topbar --- */
.bj-topbar {
  background: var(--bj-navy); color: #fff;
  padding: 9px 0; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  font-family: "Montserrat", sans-serif;
}
.bj-topbar__row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.bj-topbar a { color: #fff; text-decoration: none; }
.bj-topbar__cta {
  background: var(--bj-red); padding: 7px 14px; border-radius: 2px;
  font-weight: 800; letter-spacing: .08em;
}

/* --- header sits on white, as the concept does --- */
.brad-johnson .site-header { background: #fff; border-bottom: 1px solid #eef0f3; }
.brad-johnson .site-header .bj-nav a,
.brad-johnson .site-header .site-title { color: var(--bj-navy); }
.brad-johnson .site-header .bj-nav a { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 14px; }
.bj-phone { font-family: "Montserrat", sans-serif; font-weight: 700; color: var(--bj-navy); }

/* --- hero broker badge --- */
.bj-hero__image-meta { background: none; }
.bj-hero-badge {
  position: absolute; right: 0; bottom: 28px;
  background: var(--bj-navy); color: #fff;
  padding: 12px 16px; font-family: "Montserrat", sans-serif;
  line-height: 1.35; letter-spacing: .04em;
}
.bj-hero-badge b { display: block; font-weight: 800; font-size: 14px; }
.bj-hero-badge span { display: block; font-size: 12px; font-weight: 600; opacity: .9; }

/* --- badge and header phone: raise specificity over earlier rules --- */
.bj-hero__image .bj-hero-badge,
.bj-hero__image .bj-hero-badge b,
.bj-hero__image .bj-hero-badge span { color: #fff; }
.bj-hero__image .bj-hero-badge span { opacity: .92; }
.brad-johnson .site-header .bj-phone {
  font-family: "Montserrat", sans-serif; font-weight: 700;
  color: var(--bj-navy); font-size: 14px; letter-spacing: 0;
}

/* --- placeholder listing cards --- */
.bj-listing-placeholders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bj-listing-placeholder { background: #fff; border: 1px solid var(--bj-line); box-shadow: 0 8px 22px rgba(15,45,92,.05); }
.bj-listing-placeholder__body { padding: 18px 20px 22px; }
.bj-listing-placeholder__price { font-family: "Montserrat", sans-serif; font-weight: 900; font-size: 24px; color: var(--bj-navy); }
.bj-listing-placeholder__name { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 14px; color: var(--bj-muted); margin: 6px 0 4px; }
.bj-listing-placeholder__meta { font-size: 13px; color: #536070; }
@media (max-width: 900px) { .bj-listing-placeholders { grid-template-columns: 1fr; } }

/* --- trust band: the concept runs this on navy with divider rules --- */
.bj-section--dark .bj-pillars--4 .bj-pillar { border-top: none; text-align: center; padding: 0 26px; border-right: 1px solid rgba(255,255,255,.24); }
.bj-section--dark .bj-pillars--4 .bj-pillar:last-child { border-right: none; }
.bj-section--dark .bj-pillars--4 .bj-pillar__head { justify-content: center; }
.bj-section--dark .bj-pillars--4 .bj-display--sm { color: #fff; }
.bj-section--dark .bj-pillars--4 .bj-lead { color: rgba(255,255,255,.85); }
@media (max-width: 1000px) { .bj-section--dark .bj-pillars--4 .bj-pillar { border-right: none; } }

/* --- Special Elite is reserved for the logo lockup; UI text uses Montserrat --- */
.bj-community-card__cta,
.bj-resource-card__cta,
.bj-listing__status,
.bj-process-num,
.bj-tagline-strip__item,
.bj-footer-bottom,
.bj-idx-searchbar label {
  font-family: "Montserrat", sans-serif; font-weight: 800; letter-spacing: .12em;
}
.bj-process-num { font-weight: 900; color: var(--bj-red); }

/* --- footer: the concept's two lines, plus a copyright --- */
.brad-johnson .site-footer { background: var(--bj-navy); color: #fff; padding: 44px 0 36px; }
.bj-footer-serving {
  font-family: "Montserrat", sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: .04em; margin: 0 0 18px; color: #fff;
}
.bj-footer-sep { margin: 0 10px; opacity: .55; }
.brad-johnson .site-footer a.bj-footer-phone { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
.brad-johnson .site-footer a.bj-footer-phone:hover { border-bottom-color: #fff; }
.bj-footer-legal {
  font-size: 12px; line-height: 1.75; color: rgba(255,255,255,.7);
  max-width: 860px; margin: 0 0 18px;
}
.bj-footer-copyright { font-size: 12px; color: rgba(255,255,255,.55); margin: 0; }

/* --- contact details awaiting client confirmation --- */
.bj-contact-pending {
  font-size: 15px; line-height: 1.6; color: var(--bj-muted);
  font-style: italic;
}
.bj-contact-pending span { font-style: normal; font-size: 13px; opacity: .85; }

/* --- contact form notices and honeypot --- */
.bj-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bj-form-notice {
  grid-column: 1 / -1; padding: 16px 18px; margin-bottom: 8px;
  font-family: "Montserrat", sans-serif; font-size: 15px; border-radius: 2px;
}
.bj-form-notice strong { display: block; font-weight: 800; margin-bottom: 2px; }
.bj-form-notice span { opacity: .85; }
.bj-form-notice--ok  { background: #EEF3F8; border-left: 3px solid var(--bj-navy); color: var(--bj-navy); }
.bj-form-notice--err { background: #FBEDED; border-left: 3px solid var(--bj-red);  color: var(--bj-red); }

/* --- 404 --- */
.bj-404-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--bj-line); margin-top: 48px; border: 1px solid var(--bj-line); }
.bj-404-link { background: #fff; padding: 26px 28px; text-decoration: none; color: inherit; display: block; transition: background .15s ease; }
.bj-404-link:hover { background: var(--bj-mist); }
.bj-404-link__title { display: block; font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 18px; color: var(--bj-navy); margin-bottom: 6px; }
.bj-404-link__desc { display: block; font-size: 14px; color: var(--bj-muted); }
@media (max-width: 720px) { .bj-404-links { grid-template-columns: 1fr; } }

/* =========================================================================
   ACCESSIBILITY
   ========================================================================= */

/* Skip link: visible only once focused. */
.bj-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--bj-navy); color: #fff;
  padding: 12px 18px; font-family: "Montserrat", sans-serif;
  font-weight: 800; font-size: 14px; text-decoration: none;
}
.bj-skip-link:focus { left: 8px; top: 8px; }

/* Screen-reader-only text that still carries structure. */
.bj-sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Visible focus for everything interactive. The form rules above set
   outline:none, which removed the only keyboard affordance. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--bj-red);
  outline-offset: 2px;
  border-radius: 1px;
}
.bj-section--dark a:focus-visible,
.bj-section--dark button:focus-visible,
.site-footer a:focus-visible,
.bj-topbar a:focus-visible,
.bj-bigcta a:focus-visible { outline-color: #fff; }

.bj-contact-form input:focus-visible,
.bj-contact-form textarea:focus-visible,
.bj-contact-form select:focus-visible,
.bj-idx-searchbar input:focus-visible,
.bj-idx-searchbar select:focus-visible {
  outline: 3px solid var(--bj-red); outline-offset: 2px;
}

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

/* =========================================================================
   RESPONSIVE FIXES
   Audit across 320/375/768/1024/1440 found horizontal overflow on every
   page below 900px: .bj-header-cta ran to 441px inside a 320px viewport
   because the "Work with Brad" button never collapsed, only the phone
   beside it did.
   ========================================================================= */
@media (max-width: 900px) {
  /* The top bar already carries the phone and LET'S TALK, so the header
     button is redundant here and is what was forcing the overflow. */
  .bj-header-cta .bj-btn { display: none; }
  .bj-header-cta { gap: 0; }
  .brad-johnson .site-header .wrap { gap: 12px; }
}

@media (max-width: 600px) {
  /* Top bar stacks rather than pushing the row wide. */
  .bj-topbar__row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .bj-topbar { font-size: 11px; letter-spacing: .06em; }

  /* Nothing may exceed the viewport. */
  .bj-frame { padding-left: 16px; padding-right: 16px; }
  .bj-btn { max-width: 100%; }
  .bj-hero__grid,
  .bj-contact-grid { grid-template-columns: 1fr; }
}

/* Belt and braces: no element may create a sideways scroll. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, iframe, table { max-width: 100%; }

/* Tap targets: phone and back links were 17-22px tall. */
.bj-phone, .bj-footer-phone, .bj-community-hero__back,
.bj-idx-tab, .bj-communities-more__link {
  display: inline-block; min-height: 34px; line-height: 34px;
}
.bj-idx-tab { padding-left: 4px; padding-right: 4px; }
/* Top bar phone has no class of its own; give every top bar link a target. */
.bj-topbar a { display: inline-flex; align-items: center; min-height: 32px; }

/* =========================================================================
   DARK-SECTION CONTRAST
   The concept-match layer moved .bj-section--dark and .bj-bigcta onto navy
   and set the container to white, but several children carry their own
   explicit colours and kept them. Measured on the rendered pages:
     .bj-lead paragraph   1.12:1
     .bj-eyebrow (red)    2.03:1
     .bj-skip-link        1.09:1
   All well under the 4.5:1 body-text minimum. Fixed here rather than by
   editing the light-context rules, so the light palette is untouched.
   ========================================================================= */
:root {
  /* Heritage Red is unreadable on navy at 2.03:1. This is the same hue
     lightened until it clears AA on both navy (5.59:1) and charcoal (6.07:1). */
  --bj-red-on-dark: #F08A82;
  --bj-on-dark:     #D9DEE6;
}

.bj-section--dark .bj-lead,
.bj-bigcta .bj-lead,
.bj-section--dark p,
.bj-bigcta p { color: var(--bj-on-dark); }

.bj-section--dark .bj-muted,
.bj-bigcta .bj-muted { color: var(--bj-on-dark); }

.bj-section--dark .bj-eyebrow,
.bj-bigcta .bj-eyebrow { color: var(--bj-red-on-dark); }

.bj-section--dark .bj-display,
.bj-bigcta .bj-display { color: #fff; }

.bj-section--dark .bj-display em,
.bj-section--dark .bj-display i,
.bj-bigcta .bj-display em,
.bj-bigcta .bj-display i { color: var(--bj-red-on-dark); }

/* The highlight underline is drawn in --bj-gold, which is navy, so it
   vanished against a navy ground. */
.bj-section--dark .bj-hl-gold,
.bj-bigcta .bj-hl-gold {
  background-image: linear-gradient(var(--bj-red-on-dark), var(--bj-red-on-dark));
}
.bj-section--dark .bj-hl-red,
.bj-bigcta .bj-hl-red { color: var(--bj-red-on-dark); }

/* body.brad-johnson a { color: inherit } outranks a single class, so the
   skip link inherited body ink on its own navy ground. */
body.brad-johnson .bj-skip-link { color: #fff; }

/* Placeholder captions sat at 4.11:1 on the paper ground. */
.bj-ph__label { color: #6B6B6B; }

/* Buttons are anchors, so body.brad-johnson a { color: inherit } beat the
   single-class .bj-btn rules too. On light sections the inherited ink
   happened to look right; inside a dark section the ghost button inherited
   white onto its own white fill and disappeared entirely (1:1). */
body.brad-johnson .bj-btn--red   { color: #fff; }
body.brad-johnson .bj-btn--ghost { color: var(--bj-navy); }

/* On navy, a solid white fill reads as a second primary button. A true
   outline treatment is both lighter and legible at 13.55:1. */
body.brad-johnson .bj-section--dark .bj-btn--ghost,
body.brad-johnson .bj-bigcta .bj-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
body.brad-johnson .bj-section--dark .bj-btn--ghost:hover,
body.brad-johnson .bj-bigcta .bj-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #fff;
}

/* =========================================================================
   CONCEPT TYPE HIERARCHY
   Measured from the approved concept:
     h1  Impact / condensed, uppercase, navy   — hero only
     h2  Georgia serif, 48px, sentence case, navy
     h3  Montserrat 700, 18px, sentence case
   The build was setting every heading in the condensed display face in
   caps, which is the editorial treatment inherited from the source theme,
   not the concept. Cormorant Garamond stands in for Georgia: it is the
   brand guide's editorial serif and is already self-hosted.
   ========================================================================= */
.bj-display--lg,
.bj-display--md {
  font-family: var(--bj-f-serif);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.005em;
  line-height: 1.12;
  color: var(--bj-navy);
}
.bj-display--lg { font-size: clamp(32px, 3.9vw, 48px); }
.bj-display--md { font-size: clamp(28px, 3.2vw, 40px); }

/* In a serif, italic is emphasis enough; the concept's headings are a
   single colour throughout. */
.bj-display--lg em, .bj-display--md em,
.bj-display--lg i,  .bj-display--md i { color: inherit; font-style: italic; }

.bj-section--dark .bj-display--lg,
.bj-section--dark .bj-display--md,
.bj-bigcta .bj-display--lg,
.bj-bigcta .bj-display--md { color: #fff; }

/* The highlight underline belongs to the condensed hero face, not the
   serif headings. */
.bj-display--lg .bj-hl-gold,
.bj-display--md .bj-hl-gold { background-image: none; }

/* =========================================================================
   CTA BAND
   The concept's closing CTA is a compact horizontal band roughly 208px
   tall: kicker and serif heading left, copy centre, button right. The
   build had a 665px centred stack, which is the source theme's editorial
   treatment rather than the concept's.
   ========================================================================= */
.bj-bigcta { padding: 46px 0; text-align: left; border-bottom: none; }
.bj-bigcta__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.bj-bigcta__lede { flex: 0 1 34%; min-width: 260px; }
.bj-bigcta__lede .bj-display { margin: 10px 0 0; }
.bj-bigcta__body {
  flex: 1 1 320px; max-width: 520px; margin: 0;
  font-family: var(--bj-f-body); font-size: 15px; line-height: 1.6;
  color: var(--bj-on-dark);
}
.bj-bigcta__ctas { flex: 0 0 auto; justify-content: flex-start; }

@media (max-width: 900px) {
  .bj-bigcta { padding: 40px 0; }
  .bj-bigcta__row { flex-direction: column; align-items: flex-start; gap: 22px; }
  .bj-bigcta__ctas { width: 100%; }
  .bj-bigcta__ctas .bj-btn { width: 100%; justify-content: center; }
}

/* =========================================================================
   COMMUNITY TILES
   The concept renders communities as a five-across grid of 260px tiles
   with the name and description over a photograph. The build had a
   three-across grid of bordered white cards, which ran to 1371px against
   the concept's 825px.
   Photography has not been supplied, so a tile with no image falls back to
   a navy ground. Dropping a photo into the customizer field turns it into
   the concept's treatment with no further change.
   ========================================================================= */
.bj-section__head--center { text-align: center; }
.bj-section__head--center .bj-display { margin-left: auto; margin-right: auto; }

.bj-communities-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  margin-top: 40px;
}
.bj-community-tile {
  position: relative; height: 260px; overflow: hidden;
  background-size: cover; background-position: center;
  text-decoration: none; color: #fff; display: block;
}
.bj-community-tile--noimg { background-color: var(--bj-navy); }
.bj-community-tile__scrim {
  position: absolute; inset: 28% 0 0;
  background: linear-gradient(transparent, rgba(6, 29, 57, 0.97));
}
.bj-community-tile__copy {
  position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px;
  display: block; color: #fff;
}
.bj-community-tile__name {
  display: block; font-family: "Montserrat", sans-serif; font-weight: 800;
  font-size: 18px; line-height: 1.2; margin-bottom: 6px; color: #fff;
}
.bj-community-tile__desc {
  display: block; font-size: 11px; line-height: 1.35; margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.92);
}
.bj-community-tile__cta {
  display: block; font-family: "Montserrat", sans-serif; font-weight: 800;
  font-size: 11px; letter-spacing: .04em; color: var(--bj-red-on-dark);
}
.bj-community-tile:hover .bj-community-tile__cta { color: #fff; }
.bj-community-tile:focus-visible { outline: 3px solid var(--bj-red); outline-offset: 2px; }

@media (max-width: 1100px) { .bj-communities-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .bj-communities-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .bj-communities-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   SPLIT SECTION + SERVICE STACK
   The concept carries the About copy and the three services as one
   two-column section, with the services as horizontal rows: image left,
   title and description right. The build had them as two stacked
   sections with a three-column text grid.
   ========================================================================= */
.bj-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start;
}
.bj-split__copy p {
  font-family: var(--bj-f-body); font-size: 15px; line-height: 1.65;
  color: var(--bj-ink); margin: 0 0 16px; max-width: 46em;
}
.bj-split__copy .bj-display { margin: 12px 0 20px; }
.bj-split__copy .bj-btn { margin-top: 8px; }

/* Red rule to the left of the heading, as the concept has it. */
.bj-rule-left { border-left: 4px solid var(--bj-red); padding-left: 20px; }

.bj-callout {
  border-left: 4px solid var(--bj-red);
  background: #fff; padding: 18px 22px; margin: 24px 0 8px;
}
.bj-callout h3 {
  font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 17px;
  color: var(--bj-navy); margin: 0 0 8px; line-height: 1.3;
}
.bj-callout p { margin: 0; font-size: 15px; line-height: 1.6; }

.bj-service-stack { display: grid; gap: 8px; }
.bj-service {
  display: grid; grid-template-columns: 210px 1fr;
  background: #fff; min-height: 104px; text-decoration: none; color: inherit;
  border: 1px solid var(--bj-line);
  transition: border-color .15s ease;
}
.bj-service:hover { border-color: var(--bj-navy); }
.bj-service__media { background-size: cover; background-position: center; display: block; }
.bj-service__media--noimg {
  background-color: var(--bj-navy);
  background-image: linear-gradient(135deg, var(--bj-navy), var(--bj-navy-dark));
}
.bj-service__copy { padding: 15px 18px; display: block; }
.bj-service__title {
  display: block; font-family: "Montserrat", sans-serif; font-weight: 800;
  font-size: 18px; text-transform: uppercase; letter-spacing: .02em;
  color: var(--bj-navy); margin-bottom: 5px;
}
.bj-service__desc { display: block; font-size: 13px; line-height: 1.55; color: var(--bj-muted); }

@media (max-width: 1000px) { .bj-split { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 560px)  { .bj-service { grid-template-columns: 120px 1fr; } }

/* =========================================================================
   VERTICAL RHYTHM
   The concept fits the hero, the buy/sell/invest trio, the search bar and
   the trust band into roughly 726px. The build used 1340px for the same
   four, which is the source theme's editorial spacing rather than the
   concept's density. Concept reference: .hero-copy padding 44px 0 55px,
   .trust padding 24px 26px, .searchbar padding 10px, section 58px 0.
   ========================================================================= */
.bj-hero { padding: 40px 0 0; }
.bj-hero__grid { gap: 48px; }
.bj-hero__copy { padding: 8px 0 32px; }
.bj-hero__bottom-row { margin-top: 28px; }

.bj-herotrio__item { padding: 18px 28px 18px 0; }

.bj-idx-searchbar { padding: 20px 0; }
.bj-idx-searchbar__grid { padding: 10px; gap: 12px; }
.bj-idx-tab-bar { margin-bottom: 14px; }

/* Trust band: the concept runs this at 24px 26px per cell. */
.bj-section--dark .bj-pillars--4 .bj-pillar { padding: 24px 26px; }
.bj-section--dark .bj-pillars--4 { gap: 0; }
.bj-section--dark .bj-pillars--4 .bj-display--sm { font-size: 17px; margin-bottom: 8px; }
.bj-section--dark .bj-pillars--4 .bj-lead { font-size: 13px; line-height: 1.5; }
.bj-section--dark .bj-pillars--4 .bj-pillar__head { margin-bottom: 12px; }

/* Section rhythm matches the concept's 58px. */
.bj-section { padding: 58px 0; }

/* Trust band body is Montserrat in the concept, not the editorial serif,
   and carries no numbering. */
.bj-section--dark .bj-pillars--4 .bj-lead {
  font-family: "Montserrat", sans-serif;
}

/* =========================================================================
   SHANNON'S DIRECTION — 2026-09-17 rendering
   Palette and type sampled directly from
   "Home page rendering for BJohnson.png": warm cream grounds, a softer
   navy, and a terracotta accent in place of Heritage Red. Serif display
   type rather than the condensed face. Kept as the final layer so the
   previous direction is recoverable in one block.
   Contrast verified: navy 13.04:1 and rust 5.96:1 on the page ground,
   rust 5.48:1 on the cream band, white 11.58:1 on the top bar.
   ========================================================================= */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/dancing-script.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bj-navy:        #1B2F47;
  --bj-navy-dark:   #142438;
  --bj-topbar:      #273A52;
  --bj-paper:       #FBFAF8;
  --bj-paper-2:     #F5F0E9;
  --bj-mist:        #F5F0E9;
  --bj-rust:        #895341;
  --bj-rust-deep:   #6E4234;
  --bj-line:        #E4DDD2;
  --bj-rule:        #EAE4DA;
  --bj-rule-strong: #D9D1C4;
  --bj-ink:         #2F2B27;
  --bj-muted:       #6B635A;
  --bj-on-dark:     #E6E1D8;
  --bj-red-on-dark: #D89A82;
  --bj-f-script:    "Dancing Script", "Brush Script MT", cursive;
}

body { background: var(--bj-paper); color: var(--bj-ink); }

/* --- display type is the serif, not the condensed face --- */
.bj-display {
  font-family: var(--bj-f-serif);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.012em;
  line-height: 1.08;
  color: var(--bj-navy);
}
.bj-display--xl { font-size: clamp(40px, 5vw, 66px); }
.bj-display--lg { font-size: clamp(32px, 3.9vw, 48px); }
.bj-display--md { font-size: clamp(28px, 3.2vw, 40px); }
.bj-display--sm {
  font-family: var(--bj-f-serif); font-weight: 700;
  font-size: 21px; letter-spacing: 0; color: var(--bj-navy);
}
.bj-display em, .bj-display i { color: var(--bj-rust); font-style: normal; }

.bj-eyebrow { color: var(--bj-rust); letter-spacing: .2em; font-weight: 700; }
.bj-lead { font-family: var(--bj-f-serif); color: #4A443C; }
.bj-faq__q { font-family: var(--bj-f-serif); font-weight: 600; font-size: 21px; color: var(--bj-navy); }

/* --- header sits on the warm ground --- */
.brad-johnson .site-header { background: var(--bj-paper); border-bottom: 1px solid var(--bj-rule); }
.brad-johnson .site-header .bj-nav a,
.brad-johnson .site-header .site-title,
.brad-johnson .site-header .bj-phone { color: var(--bj-navy); }
.bj-topbar { background: var(--bj-topbar); }

/* --- buttons: navy primary, outlined secondary --- */
body.brad-johnson .bj-btn--red {
  background: var(--bj-navy); border-color: var(--bj-navy); color: #fff;
}
body.brad-johnson .bj-btn--red:hover { background: var(--bj-navy-dark); border-color: var(--bj-navy-dark); }
body.brad-johnson .bj-btn--ghost {
  background: transparent; border-color: var(--bj-rule-strong); color: var(--bj-navy);
}
body.brad-johnson .bj-btn--ghost:hover { border-color: var(--bj-navy); }
.bj-topbar__cta { background: var(--bj-rust); }

/* --- dark sections take the softer navy --- */
.bj-section--dark, .bj-bigcta { background: var(--bj-navy); }
.bj-section--paper2 { background: var(--bj-paper-2); }
.brad-johnson .site-footer { background: var(--bj-navy); }

/* --- accents that were Heritage Red --- */
.bj-rule-left, .bj-callout { border-left-color: var(--bj-rust); }
.bj-community-tile__cta { color: var(--bj-red-on-dark); }
.bj-pillar__dot { background: var(--bj-rust); }

/* --- hero: full-bleed banner with overlaid copy, per the rendering --- */
.bj-hero {
  position: relative; padding: 0;
  background-size: cover; background-position: center;
  background-repeat: no-repeat; border-bottom: none;
  min-height: 560px; display: flex; align-items: center;
}
.bj-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(251,250,248,0.96) 0%, rgba(251,250,248,0.90) 32%, rgba(251,250,248,0.45) 52%, rgba(251,250,248,0) 68%);
}
.bj-hero__inner { position: relative; z-index: 2; width: 100%; padding-top: 56px; padding-bottom: 56px; }
.bj-hero__copy { max-width: 620px; }
.bj-hero__eyebrow {
  display: block; border-left: 3px solid var(--bj-rust);
  padding-left: 14px; margin-bottom: 22px;
}
.bj-hero__lead {
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55;
  margin: 24px 0 30px; max-width: 30em;
}
.bj-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
body.brad-johnson .bj-btn--on-photo { background: rgba(251,250,248,0.92); border-color: var(--bj-rule-strong); }
body.brad-johnson .bj-btn--on-photo:hover { background: #fff; border-color: var(--bj-navy); }

@media (max-width: 900px) {
  .bj-hero { min-height: 480px; }
  .bj-hero__veil { background: linear-gradient(180deg, rgba(251,250,248,0.95) 0%, rgba(251,250,248,0.88) 55%, rgba(251,250,248,0.72) 100%); }
}

/* --- four-item band with the script tagline --- */
.bj-quadband { background: var(--bj-paper-2); border-bottom: 1px solid var(--bj-rule); padding: 26px 0; }
.bj-quadband__row { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; justify-content: space-between; }
.bj-quadband__items {
  display: grid; grid-template-columns: repeat(4, 1fr);
  flex: 1 1 620px; min-width: 300px;
}
.bj-quad {
  text-align: center; padding: 6px 18px; text-decoration: none; color: inherit;
  border-right: 1px solid var(--bj-rule-strong); display: block;
}
.bj-quad:last-child { border-right: none; }
.bj-quad__icon { display: block; color: var(--bj-rust); margin: 0 auto 10px; width: 26px; height: 26px; }
.bj-quad__icon svg { width: 26px; height: 26px; }
.bj-quad__label {
  display: block; font-family: var(--bj-f-serif); font-weight: 700;
  font-size: 17px; color: var(--bj-navy); margin-bottom: 4px;
}
.bj-quad__text { display: block; font-size: 13px; line-height: 1.45; color: var(--bj-muted); }
.bj-quad:hover .bj-quad__label { color: var(--bj-rust); }

.bj-script {
  flex: 0 1 auto; margin: 0; text-align: center;
  font-family: var(--bj-f-script); font-weight: 600;
  font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25;
  color: var(--bj-navy);
  border-bottom: 2px solid var(--bj-rust); padding-bottom: 10px;
}

@media (max-width: 1100px) { .bj-script { flex-basis: 100%; } }
@media (max-width: 700px) {
  .bj-quadband__items { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .bj-quad:nth-child(2) { border-right: none; }
}

/* Hero CTAs sit side by side, as the rendering has them. */
.bj-hero__ctas { flex-direction: row; align-items: center; }
@media (max-width: 560px) {
  .bj-hero__ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .bj-hero__ctas .bj-btn { justify-content: center; }
}
/* "Explore Communities" fits on one line at desktop. */
.bj-quad__label { white-space: nowrap; }
@media (max-width: 1240px) { .bj-quad__label { white-space: normal; } }

/* --- interior page heroes carry their own banner --- */
.bj-page-hero {
  position: relative;
  padding: 88px 0 72px;
  background-size: cover; background-position: center;
  border-bottom: 1px solid var(--bj-rule);
}
.bj-page-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(251,250,248,0.96) 0%, rgba(251,250,248,0.90) 38%, rgba(251,250,248,0.52) 60%, rgba(251,250,248,0.12) 78%);
}
.bj-page-hero > .bj-frame { position: relative; z-index: 2; }
@media (max-width: 900px) {
  .bj-page-hero { padding: 64px 0 52px; }
  .bj-page-hero__veil { background: linear-gradient(180deg, rgba(251,250,248,0.95) 0%, rgba(251,250,248,0.90) 60%, rgba(251,250,248,0.80) 100%); }
}

/* The community hero already had its own padding; keep it and layer the banner. */
.bj-community-hero.bj-page-hero { padding-top: 72px; padding-bottom: 56px; }
.bj-community-hero.bj-page-hero > .bj-frame { position: relative; z-index: 2; }

/* .bj-eyebrow--paper must outrank the rust default on dark grounds. */
.bj-eyebrow.bj-eyebrow--paper,
.bj-section--dark .bj-eyebrow--paper,
.bj-bigcta .bj-eyebrow--paper { color: var(--bj-on-dark); }

/* =========================================================================
   LEGACY TOKEN REMAP
   Templates and the customizer still reference --bj-red, --bj-gold and
   friends in 27 places across buy, sell, invest, resources and the
   community pages. Pointing the old tokens at the new palette updates
   every one of them at once, rather than hunting individual usages and
   leaving the next one to slip through.
   ========================================================================= */
:root {
  --bj-red:        var(--bj-rust);
  --bj-red-soft:   #A9705C;
  --bj-red-deep:   var(--bj-rust-deep);
  --bj-gold:       var(--bj-rust);
  --bj-gold-soft:  #EFE6D9;
  --bj-gold-deep:  var(--bj-rust-deep);
  --bj-indigo:     var(--bj-navy);
  --bj-navy-soft:  #3C5470;
  --bj-blue:       #4E6B8A;
  --bj-sky:        #9DB0C6;
  --bj-ink-soft:   #514A42;
  --bj-paper-3:    #EFE9E0;
}

/* =========================================================================
   PAGE HERO LEGIBILITY
   Interior heroes carry real copy across most of the width, unlike the
   home hero whose text is capped at 620px. The original veil faded out at
   60% and left the sell lead and the community narrative sitting on the
   bright part of the photograph. The veil now stays near-solid to 70% and
   the hero content is capped so text never reaches the exposed edge.
   ========================================================================= */
.bj-page-hero__veil {
  background: linear-gradient(100deg,
    rgba(251,250,248,0.97) 0%,
    rgba(251,250,248,0.96) 56%,
    rgba(251,250,248,0.80) 72%,
    rgba(251,250,248,0.24) 90%,
    rgba(251,250,248,0.10) 100%);
}
/* The frame keeps the site's standard width so hero copy stays aligned
   with every other section; only the text inside is capped. */

/* Cap the text column so it stops short of the exposed right edge. */
.bj-page-hero .bj-display,
.bj-page-hero .bj-lead,
.bj-page-hero p { max-width: 62ch; }
.bj-page-hero > .bj-frame > div[style*="display:flex"],
.bj-page-hero > .bj-frame > div[style*="display:grid"] { max-width: 74%; }

@media (max-width: 1000px) {
  .bj-page-hero > .bj-frame > div[style*="display:flex"],
  .bj-page-hero > .bj-frame > div[style*="display:grid"] { max-width: 100%; }
}
@media (max-width: 900px) {
  .bj-page-hero__veil {
    background: linear-gradient(180deg, rgba(251,250,248,0.96) 0%, rgba(251,250,248,0.94) 70%, rgba(251,250,248,0.86) 100%);
  }
}

/* =========================================================================
   HEADER CTA
   Shannon's mockup uses a deeper brick for the two header calls to action
   than the terracotta used for headline accents. Sampled from the
   rendering: both "Work with Brad" and "LET'S TALK" are #8D3F33, while
   the headline accent is #895341. White on brick measures 7.26:1.
   ========================================================================= */
:root { --bj-brick: #8D3F33; --bj-brick-deep: #75332A; }

body.brad-johnson .bj-header-cta .bj-btn--red,
body.brad-johnson .bj-topbar__cta {
  background: var(--bj-brick);
  border-color: var(--bj-brick);
  color: #fff;
}
body.brad-johnson .bj-header-cta .bj-btn--red:hover,
body.brad-johnson .bj-topbar__cta:hover {
  background: var(--bj-brick-deep);
  border-color: var(--bj-brick-deep);
}

/* --- About: portrait beside the story --- */
.bj-about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; }
.bj-about-portrait img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.bj-about-story .bj-eyebrow { display: block; margin-bottom: 20px; }
.bj-about-story p {
  font-family: var(--bj-f-body); font-size: 16px; line-height: 1.72;
  color: var(--bj-ink); margin: 0 0 20px; max-width: 62ch;
}
.bj-about-lead {
  font-family: var(--bj-f-serif) !important;
  font-size: clamp(19px, 1.6vw, 23px) !important;
  line-height: 1.5 !important; color: #4A443C !important;
  margin-bottom: 26px !important;
}
.bj-about-closing {
  border-top: 1px solid var(--bj-rule); padding-top: 22px;
  font-weight: 600 !important; color: var(--bj-navy) !important;
  margin-bottom: 28px !important;
}
@media (max-width: 900px) { .bj-about-grid { grid-template-columns: 1fr; gap: 36px; } }