/* =========================================================
   ERIKA BAEZ-GRIMES — ECOSYSTEM PLATFORM
   Design system: light background, gold accent, symmetrical grid
   ========================================================= */

html { scroll-behavior: smooth; max-width: 100%; overflow-x: hidden; }
body {
  overflow-x: hidden;
  max-width: 100%;
  background-color: #FFFFFF;
  color: #030913;
}
img { max-width: 100%; }

/* ============ Type hierarchy ============ */
.font-display { font-family: "Playfair Display", serif; }
.font-serif   { font-family: "Cormorant Garamond", serif; }
.font-slab    { font-family: "Roboto Slab", serif; }
.font-condensed { font-family: "Roboto Condensed", sans-serif; }
.font-sans    { font-family: "Montserrat", sans-serif; }
.font-signature { font-family: "Allura", cursive; }

.eyebrow {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: #C2AA72;
}
.eyebrow-dark { color: #887856; }

.h-hero {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  line-height: 1.12;
  color: #030913;
}
.h-section {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  line-height: 1.18;
  color: #030913;
}
.h-accent {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-style: italic;
  color: #030913;
}
.h-business {
  font-family: "Roboto Slab", serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #030913;
}
.subhead {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #292B2F;
}
.body-copy {
  font-family: "Roboto Condensed", sans-serif;
  color: #5D6164;
  line-height: 1.7;
}
.signature-mark {
  font-family: "Allura", cursive;
  color: #C2AA72;
}

/* ============ Layout helpers ============
   Sitewide content container. This single rule controls the left/right
   margin on every page (all 17 pages link this one stylesheet), so
   changing it here changes it everywhere at once.
   - Mobile: 16px side padding (per spec)
   - Tablet (>=768px): 24px side padding (per spec)
   - Desktop (>=1024px): 4% side padding each = content area is ~92% of the
     viewport width, with small, equal left/right margins, per explicit
     request — scales proportionally at any desktop size instead of a fixed
     pixel margin that's too wide on some screens and too narrow on others.
   - max-width is a generous ceiling (not a restrictive container) that only
     stops line lengths from becoming absurd on very large 4K+ displays;
     it does not kick in on any normal desktop/laptop width. */
.wrap { max-width: 1800px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
@media (min-width: 768px) { .wrap { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .wrap { padding-left: 4%; padding-right: 4%; } }

.section { padding-top: 6rem; padding-bottom: 6rem; }
@media (min-width: 1024px) { .section { padding-top: 8rem; padding-bottom: 8rem; } }

.bg-ivory { background-color: #FAF8F5; }
.bg-mist-tint { background-color: #F3F1EE; }
.bg-near-black { background-color: #030913; }
.bg-midnight { background-color: #141A22; }
.divider-line { border-color: rgba(3,9,19,0.08); }

/* ============ Charcoal section (full-bleed dark panel, executive feel) ============ */
.section-charcoal {
  background: linear-gradient(165deg, #1C1712 0%, #2B2622 55%, #1C1712 100%);
}
.section-charcoal .card-path {
  background: #FAF8F5;
  border: 1px solid rgba(255,255,255,0.06);
}
.section-charcoal .card-path:hover {
  border-color: rgba(194,170,114,0.6);
  box-shadow: 0 22px 44px rgba(0,0,0,0.35);
}

/* ============ Header / Nav ============ */
/* Solid pure white (not translucent) so the header bar's background matches
   the logo image's own solid-white canvas exactly — the logo blends in with
   no visible seam or box around it. This one shared #site-header rule
   applies identically on every page, so the bar stays consistent site-wide. */
#site-header {
  background: #FFFFFF;
  border-bottom: 1px solid rgba(3,9,19,0.08);
}
/* The source logo file (images/logo.jpg) is a 500x500 square canvas but the
   actual visible wordmark art only fills a thin horizontal band across its
   vertical middle, with large blank areas above and below. Scaling the whole
   square to the header's target height therefore shrinks the real logo art
   down to a sliver. Cropping the img to just that art band (via a
   fixed-size overflow:hidden container + an oversized, offset img) makes the
   visible logo mark itself match the gold header button's height, instead
   of the blank padding eating most of the allotted space. */
#site-header .brand-mark {
  height: 48px;
  width: 155px;
  overflow: hidden;
  display: block;
  position: relative;
}
#site-header .brand-mark img {
  height: 158px;
  width: 158px;
  max-width: none;
  position: absolute;
  top: -68px;
  left: -2px;
  display: block;
}

.nav-link {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 15pt;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #292B2F;
  position: relative;
  padding-bottom: 4px;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.nav-link:hover, .nav-link.active { color: #887856; }
/* Header nav items grew to 15pt (see .nav-link above); tighten the gap
   between them so "CEO CIRCLE" and the rest still fit on one line next to
   the "Join My Buyer Community" button at common desktop widths, instead of
   wrapping onto two lines. Scoped to the header's desktop nav only so the
   mobile menu (a different <nav>, already stacked vertically) is unaffected. */
#site-header nav.hidden.xl\:flex { gap: 0.9rem; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1.5px;
  background: #C2AA72;
  transition: width 0.25s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

.nav-dropdown-panel {
  position: absolute;
  top: 100%;
  right: 0;
  background: #FFFFFF;
  border: 1px solid rgba(3,9,19,0.08);
  box-shadow: 0 18px 40px rgba(3,9,19,0.12);
  min-width: 240px;
  padding: 0.5rem 0;
  border-radius: 4px;
}
.nav-dropdown-item {
  display: block;
  padding: 0.65rem 1.25rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.83rem;
  letter-spacing: 0.02em;
  color: #292B2F;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-dropdown-item:hover { background: #FAF8F5; color: #887856; }

.nav-link-mobile {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #292B2F;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(3,9,19,0.06);
  display: block;
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.95rem 2.1rem;
  border-radius: 2px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
  white-space: nowrap;
}
.btn-gold {
  background: linear-gradient(135deg, #C2AA72, #D8C08F);
  color: #030913;
  box-shadow: 0 10px 26px rgba(194,170,114,0.35);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(194,170,114,0.5); }
.btn-outline-dark {
  background: transparent;
  border: 1px solid #030913;
  color: #030913;
}
.btn-outline-dark:hover { background: #030913; color: #FFFFFF; }
.btn-outline-gold {
  background: transparent;
  border: 1px solid #C2AA72;
  color: #887856;
}
.btn-outline-gold:hover { background: #C2AA72; color: #030913; }
.btn-dark {
  background: #030913;
  color: #FFFFFF;
}
.btn-dark:hover { background: #141A22; transform: translateY(-2px); }
.btn-sm { padding: 0.7rem 1.5rem; font-size: 0.72rem; }
.btn-block { width: 100%; }
/* Long button labels (e.g. "Download the Buyer Search and Deal Sourcing Overview")
   must wrap on narrow screens — nowrap forced the button wider than the viewport,
   pushing/overflowing the whole page layout to one side. Excludes buttons inside
   .sticky-cta-bar, which needs to stay a compact, single-line pill so the fixed
   bar keeps its intended flex row height and never grows tall enough to cover
   the footer content beneath it. */
@media (max-width: 640px) {
  .btn:not(.sticky-cta-bar .btn) { white-space: normal; text-align: center; width: 100%; }
}

/* ============ Buyer Community funnel extras ============ */
.promo-bar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 70;
  background: linear-gradient(90deg, #1C1712, #2B2622);
  color: #FAF8F5;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.7rem 1rem;
}
.promo-bar a { color: #C2AA72; text-decoration: underline; margin-left: 0.5rem; }

.sticky-cta-bar {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  z-index: 60;
  background: #0D0D0D;
  padding: 0.85rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: 0 -10px 24px rgba(0,0,0,0.3);
}
.sticky-cta-bar p { color: #FAF8F5; font-family: "Montserrat", sans-serif; font-size: 0.78rem; font-weight: 600; margin: 0; }
@media (min-width: 1024px) { .sticky-cta-bar { display: none; } }
body.has-sticky-cta { padding-bottom: 74px; }

.lead-magnet-card {
  background: #FFFFFF;
  border: 1px solid rgba(3,9,19,0.08);
  border-radius: 6px;
  padding: 2.25rem;
  box-shadow: 0 24px 50px rgba(3,9,19,0.08);
}

/* ---- Gated-download lead modal (name/email capture before a PDF unlock) ---- */
body.modal-open-lock { overflow: hidden; }
.lead-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3,9,19,0.6);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.lead-modal-card {
  position: relative;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 2.25rem;
  max-width: 460px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 70px rgba(3,9,19,0.35);
}
.lead-modal-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5D6164;
  background: rgba(3,9,19,0.05);
  transition: background 0.2s ease, color 0.2s ease;
}
.lead-modal-close:hover { background: rgba(3,9,19,0.1); color: #030913; }

.faq-item { border-bottom: 1px solid rgba(3,9,19,0.08); padding: 1.1rem 0; }
.faq-item summary {
  cursor: pointer;
  font-family: "Roboto Slab", serif;
  font-weight: 700;
  font-size: 1rem;
  color: #030913;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  color: #C2AA72;
  font-size: 1.4rem;
  font-weight: 400;
  margin-left: 1rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin-top: 0.75rem; }

.mosaic-item {
  border-radius: 6px;
  overflow: hidden;
  height: 100%;
}
.mosaic-item img {
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.mosaic-item:hover img { transform: scale(1.05); }

/* ---- Full-width feel: this page previously felt like a narrow, boxed-in
   "template" because every section's content sat inside the sitewide 1280px
   wrap AND was further capped at max-w-3xl (768px) — leaving large dead
   margins on wide screens. Widen the page's own wrap and its content
   columns, and let the two feature photos bleed edge-to-edge on large
   screens so text and images both use the full width of the browser. ---- */
/* !important is required here because the Tailwind CDN injects its utility
   stylesheet dynamically, after this linked stylesheet, so same-specificity
   selectors like .max-w-3xl would otherwise win the cascade by source order. */
/* Match the new sitewide wrap treatment (was a special-cased 1600px when
   the sitewide default was still a narrow 1280px; the sitewide wrap is now
   wider itself, so this page's container no longer needs to be forced
   wider than every other page — it simply uses the same wide container). */
body.buyers-page .wrap { max-width: 1800px !important; }
body.buyers-page .max-w-xl  { max-width: 46rem !important; }  /* 576px -> 736px */
body.buyers-page .max-w-2xl { max-width: 56rem !important; }  /* 672px -> 896px */
body.buyers-page .max-w-3xl { max-width: 68rem !important; }  /* 768px -> 1088px */
body.buyers-page .max-w-4xl { max-width: 84rem !important; }  /* 896px -> 1344px */

/* Full-bleed photo bands: these two .media-frame elements are placed as direct
   children of their <section> (siblings of .wrap, not nested inside it) in
   the HTML, so they span the section's true full width with no dependency on
   negative-margin viewport math through nested, padded containers. */
.buyers-page #pathway-3 > .media-frame {
  width: 100%;
  max-width: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  overflow: hidden;
  height: 380px;
  /* 16pt gap between the picture/video and the body copy below it */
  margin-bottom: 16pt;
}
.buyers-page #pathway-3 > .media-frame img,
.buyers-page #pathway-3 > .media-frame video {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
}
@media (min-width: 640px) {
  .buyers-page #pathway-3 > .media-frame { height: 520px; }
}
@media (min-width: 1024px) {
  .buyers-page #pathway-3 > .media-frame { height: 640px; }
}
/* Pathway 1's ETA photo and Pathway 2's Buyer Search photo must show the
   whole picture with nothing cropped off the top or bottom. Rather than a
   fixed-height box with object-fit: contain (which exposes a black
   letterbox band whenever the box's aspect ratio doesn't exactly match the
   photo's own aspect ratio), each frame's height is now locked to the
   photo's real aspect ratio via aspect-ratio, so the box is ALWAYS exactly
   the same shape as the image — no leftover black bar is ever visible
   above, below, or beside the picture at any viewport width. */
.buyers-page #pathway-1 > .media-frame,
.buyers-page #pathway-2 > .media-frame {
  width: 100%;
  max-width: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  overflow: hidden;
  height: auto;
  background: #000000;
  /* 16pt gap between the picture and the body copy below it */
  margin-bottom: 16pt;
}
.buyers-page #pathway-1 > .media-frame { aspect-ratio: 1024 / 683; }
.buyers-page #pathway-2 > .media-frame { aspect-ratio: 1024 / 512; }
.buyers-page #pathway-1 > .media-frame img,
.buyers-page #pathway-2 > .media-frame img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
}

/* ============ Buyers pathway page: photo-shoot palette + charcoal accents ============
   Jet Black (suit) #0D0D0D · Slate Gray (backdrop) #8A8D90 · Charcoal Brown (floor) #2B2622
   Umber (hair) #1C1712 · Warm Beige (skin tone) #C9997A · Taupe (shadow transition) #5C5A56
   Charcoal accent (brand, this page only) #292B2F — used sparingly for eyebrows, buttons,
   icons & dividers (previously gold #C2AA72; swapped to charcoal per explicit request,
   scoped only to .buyers-page so no other page is affected).
   Each of the three pathways gets its own background treatment and accent color so 1 / 2 / 3
   read as visually distinct chapters instead of three repeats of the same template. ============ */
body.buyers-page { background: #FFFFFF; color: #0D0D0D; }
/* Hero background: dark brown from the existing photo-shoot palette
   (Charcoal Brown), replacing the previous flat slate gray. */
.buyers-page .hero-eco { background: #000000; }
.buyers-page .bg-near-black { background-color: #0D0D0D; }

/* Hero text must switch to light colors now that the hero sits on a dark
   brown background instead of the old light slate gray. */
.buyers-page .hero-eco .h-hero { color: #FFFFFF; }
.buyers-page .hero-eco .body-copy { color: rgba(255,255,255,0.82); font-size: 20pt; }

/* Small/running text set in Georgia, mirroring the buyer-community treatment */
.buyers-page .body-copy,
.buyers-page .subhead-copy,
.buyers-page .muted-copy,
.buyers-page .font-condensed,
.buyers-page .phase-list li,
.buyers-page .form-label,
.buyers-page .footer-link,
.buyers-page .footer-disclosure,
.buyers-page .photo-caption,
.buyers-page .guarantee-box p {
  font-family: Georgia, "Times New Roman", serif;
}

/* Charcoal accents (previously gold): eyebrows, links, dividers */
.buyers-page .eyebrow { color: #292B2F; }
.buyers-page .page-dark .eyebrow { color: #9A9DA1; }
.buyers-page .h-hero, .buyers-page .h-section, .buyers-page .h-business, .buyers-page .h-accent { color: #0D0D0D; }
.buyers-page .subhead-copy { color: #0D0D0D; }
.buyers-page .body-copy { color: #0D0D0D; }
.buyers-page a.underline.hover\:text-darkgold { color: #0D0D0D; }
.buyers-page a.underline.hover\:text-darkgold:hover { color: #292B2F; }

.buyers-page .nav-link:hover, .buyers-page .nav-link.active { color: #292B2F; }
.buyers-page .nav-link::after { background: #292B2F; }

.buyers-page .btn-outline-dark { border-color: #0D0D0D; color: #0D0D0D; }
.buyers-page .btn-outline-dark:hover { background: #0D0D0D; color: #FFFFFF; }

/* .btn-outline-gold (ETAEdu modal's "Download the Program Overview (PDF)"
   link) and .nav-dropdown-item:hover (header "More" dropdown) — previously
   gold, no .buyers-page override existed yet even though both are used on
   this page. Swapped to charcoal for consistency with every other accent
   on this page. */
.buyers-page .btn-outline-gold { border-color: #292B2F; color: #292B2F; }
.buyers-page .btn-outline-gold:hover { background: #292B2F; color: #FFFFFF; }
.buyers-page .nav-dropdown-item:hover { color: #292B2F; }

/* .form-input:focus (Buyer Advisory Application, Newsletter, and ETAEdu
   modal forms all use the base .form-input class) — previously gold focus
   ring, swapped to charcoal on this page only. */
.buyers-page .form-input:focus {
  border-color: #292B2F;
  box-shadow: 0 0 0 3px rgba(41,43,47,0.15);
}

/* Buttons: charcoal accent (previously gold) */
.buyers-page .btn-gold {
  background: linear-gradient(135deg, #292B2F, #4B4D51);
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(41,43,47,0.3);
}
.buyers-page .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(41,43,47,0.45); }
.buyers-page .btn-gold.whitespace-nowrap { background: linear-gradient(135deg, #292B2F, #4B4D51); color: #FFFFFF; }

.buyers-page .phase-num {
  width: 56px; height: 56px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 1.5rem;
  background: #FFFFFF;
  border: 2px solid #292B2F;
  color: #0D0D0D;
  box-shadow: 0 8px 18px rgba(13,13,13,0.08);
}
.buyers-page .card-capability {
  background: #FFFFFF;
  border: 1px solid #8A8D90;
  box-shadow: none;
}
.buyers-page .card-capability .cap-icon {
  background: #FFFFFF;
  border: 1px solid #292B2F;
  color: #292B2F;
}
.buyers-page .guarantee-box { background: rgba(41,43,47,0.06); border: 1px solid rgba(41,43,47,0.35); }
.buyers-page .guarantee-box i { color: #292B2F; }
.buyers-page .phase-list li { color: #0D0D0D; }
.buyers-page .phase-list li i { color: #292B2F; }

.buyers-page .media-frame {
  border: 1px solid #8A8D90;
  box-shadow: 0 20px 40px rgba(13,13,13,0.1);
}
.buyers-page .media-frame img { object-fit: contain; }
.buyers-page .divider-line { border-color: #8A8D90; }

/* ---- Pathway 1 — Acquisition Education: plain white, same as index.html's
   default page background, no gold divider border. Top padding is reduced
   so the intro block (number badge + heading + subhead) reads as a thin
   strip instead of a tall, mostly-empty band before the photo. ---- */
.buyers-page #pathway-1 {
  background: #FFFFFF;
  border-top: none;
  /* Header box is now a full-bleed element (like Pathway 3's), so the
     section itself carries no top padding — the box supplies its own
     vertical padding, keeping all three pathway header boxes the same size. */
  padding-top: 0 !important;
  /* Divider line stays flush against the bottom edge — padding-bottom is
     back to 0. The button row itself is moved up (see the translateY rule
     below) to open a gap above the divider, without moving the divider. */
  padding-bottom: 0;
}
@media (min-width: 1024px) {
  .buyers-page #pathway-1 {
    padding-top: 0 !important;
    padding-bottom: 0;
  }
}
/* Move the button row itself up 22px, off the divider line, using a
   transform (which doesn't affect layout flow) so the divider's position
   stays exactly where it was — only the box of buttons visually shifts up,
   opening a gap between the buttons and the line beneath them. */
.buyers-page #pathway-1 .body-copy > .flex.flex-col.sm\:flex-row {
  transform: translateY(-22px);
}
.buyers-page #pathway-1 .phase-num { border-color: #C9997A; color: #7A4E33; }
.buyers-page #pathway-1 .phase-list li i { color: #B97F5A; }
.buyers-page #pathway-1 .media-frame { border-top: 1px solid #292B2F; border-bottom: 1px solid #292B2F; border-left: none; border-right: none; }
.buyers-page #pathway-2 .media-frame { border-top: none; border-bottom: none; border-left: none; border-right: none; }

/* Pathway 1 & 3 header boxes now match Pathway 2's compact, content-hugging
   treatment: full-bleed edge-to-edge (each box is a direct child of its
   <section>, a sibling of .wrap, not nested inside it, so it can stretch
   full width), with the same tight 16pt top/bottom padding as box 2 —
   height is auto rather than a fixed pixel value, so each box hugs its own
   content instead of all three being forced to one fixed height. (Boxes 1
   and 3 may render a few px taller than box 2 purely because Pathway 1's
   heading wraps to two lines instead of one — the padding itself is
   identical on all three.) */
.buyers-page #pathway-1 .pathway1-header-box,
.buyers-page #pathway-3 .pathway3-header-box,
.buyers-page #pathway-4 .pathway4-header-box {
  display: flex;
  align-items: center;
  width: 100%;
  height: auto;
  padding-top: 16pt;
  padding-bottom: 16pt;
}
/* Fix: each header box is a flex container, so its inner .wrap — with no
   explicit width of its own — shrinks to fit only its own content width
   (a flex item's default sizing) instead of using the full 1088px design
   width, then re-centers itself via .wrap's own auto margins. Because the
   four pathway headings are different lengths (Pathway 4's short one-line
   "Deal Team Development" vs. Pathway 1's two-line, longer heading), each
   box's number+heading block was landing at a different, content-dependent
   left offset — this is exactly why the "4" wasn't lining up with the page
   the same way "1"/"2"/"3" do. Forcing width:100% makes every header box's
   .wrap occupy its full max-width consistently, so all four number badges
   start at the identical left edge, matching the body-copy/buttons wrap
   below them. */
.buyers-page #pathway-1 .pathway1-header-box > .wrap,
.buyers-page #pathway-2 .pathway2-header-box > .wrap,
.buyers-page #pathway-3 .pathway3-header-box > .wrap,
.buyers-page #pathway-4 .pathway4-header-box > .wrap {
  width: 100%;
}

/* ---- Pathway 4 — Deal Team Development: same plain-white treatment,
   header-box sizing, and top divider as Pathways 1/2/3, keeping all four
   pathway blocks visually consistent. ---- */
.buyers-page #pathway-4 {
  background: #FFFFFF;
  border-top: 1px solid #0D0D0D;
  border-bottom: 1px solid #0D0D0D;
  padding-top: 0 !important;
  padding-bottom: 0;
}
@media (min-width: 1024px) {
  .buyers-page #pathway-4 { padding-top: 0 !important; padding-bottom: 0; }
}
/* Pathway 4 header box: filled ivory (#FAF8F5, the site's documented Tailwind
   `ivory` color-palette token) — set directly here rather than via the
   `.bg-ivory` utility class, because that utility is overridden elsewhere on
   this page (see `.buyers-page .bg-ivory` below) to a warm taupe/beige
   gradient for the "Start With the Support You Need Today" section, and
   would not render as flat ivory if applied to this box. This matches the
   same direct-background-declaration pattern already used by Pathway 2
   (#8A8D90 slate gray) and Pathway 3 (#171310 near-black), so all four
   pathway header boxes now have their own explicit interior fill color.
   Text stays in the default dark ink (#030913 / #0D0D0D from .h-section /
   .subhead-copy), which reads cleanly against this light, warm background. */
.buyers-page #pathway-4 .pathway4-header-box {
  background: #FAF8F5;
}
.buyers-page #pathway-4 .phase-num { border-color: #8A8D90; color: #4B4D4F; }
.buyers-page #pathway-4 > .media-frame {
  width: 100%; max-width: none; border-left: none; border-right: none;
  border-top: none; border-bottom: none; border-radius: 0; overflow: hidden;
  height: auto; margin-bottom: 16pt;
}

/* ---- Pathway 2 — Buyer Search & Deal Sourcing: same plain-white treatment
   and thin charcoal top divider as Pathway 1's ETA box, so the two intro
   blocks match in both style and size. ---- */
.buyers-page #pathway-2 {
  background: #FFFFFF;
  border-top: 1px solid #0D0D0D;
  /* Header box is now full-bleed (like Pathway 3's) so the section carries
     no top padding — matches Pathway 1 & 3's flush treatment. */
  padding-top: 0 !important;
  /* Divider/panel boundary stays flush — padding-bottom is back to 0.
     The button row itself is moved up 20px (see the translateY rule below)
     to open a gap above the dark Pathway 3 panel, without moving the panel. */
  padding-bottom: 0;
}
@media (min-width: 1024px) {
  .buyers-page #pathway-2 { padding-top: 0 !important; padding-bottom: 0; }
}
/* Pathway 2's header box: "Slate Gray" (#8A8D90) from the documented
   photo-shoot palette above — this is the same gray already used for
   Pathway 2's own phase-num border and divider-line elsewhere on the
   page — replacing the earlier gold fill per user feedback. Text kept in
   dark ink for readability (contrast ratio ~6.3:1 against this mid-gray,
   noticeably better than white text's ~3.3:1). This box no longer shares
   Pathway 1/3's fixed 232px height — see the dedicated sizing rule below,
   which gives it its own tight 16pt top/bottom padding per explicit user
   request, so it will now be visibly shorter than boxes 1 & 3. */
.buyers-page #pathway-2 .pathway2-header-box {
  background: #8A8D90;
  border-bottom: 1px solid rgba(13,13,13,0.4);
  display: flex;
  align-items: center;
  width: 100%;
  height: auto;
  padding-top: 16pt;
  padding-bottom: 16pt;
}
.buyers-page #pathway-2 .pathway2-header-box .h-section { color: #0D0D0D; }
.buyers-page #pathway-2 .pathway2-header-box .subhead-copy { color: rgba(13,13,13,0.78); }
.buyers-page #pathway-2 .pathway2-header-box .phase-num { background: #FFFFFF; border-color: #0D0D0D; color: #0D0D0D; }
.buyers-page #pathway-2 .body-copy > .flex.flex-col.sm\:flex-row.justify-center {
  transform: translateY(-22px);
}
.buyers-page #pathway-3 .body-copy > .flex.flex-col.sm\:flex-row.justify-center {
  transform: translateY(-22px);
}
.buyers-page #pathway-2 .phase-num { border-color: #8A8D90; color: #4B4D4F; }
.buyers-page #pathway-2 .phase-list li i { color: #5C5A56; }
.buyers-page #pathway-2 .divider-line { border-color: #8A8D90; }
/* Pathway 2's Buyer Search photo now provides the same visual break between
   the intro block and the body copy that Pathway 1's ETA photo provides, so
   the .media-frame itself carries the thin charcoal top divider (see the
   shared #pathway-1 / #pathway-2 > .media-frame rules below) instead of a
   standalone divider element. */

/* ---- Pathway 3 — Buy-Side Representation: same plain-white background as
   Pathway 1 and Pathway 2 (all three pathway blocks share one light,
   consistent background), with the dark-on-light text-color overrides below
   replaced so all text reads in the same dark ink used elsewhere on the page. ---- */
.buyers-page #pathway-3 {
  background: #FFFFFF;
  border-top: 1px solid #0D0D0D;
  /* Header box is full-bleed (see the shared header-box rule above), so
     the section itself carries no top padding. */
  padding-top: 0 !important;
  /* Bottom padding reduced from the .section default (6rem/8rem) so the
     dark "You Don't Have to Build the Acquisition Team Alone" panel that
     follows sits much closer to this section's buttons, per user feedback
     that the gap below the buttons was too large. */
  padding-bottom: 0.75rem;
  /* Nudge the dark panel up by 1px so it always overlaps Pathway 2's very
     bottom edge — this closes a hairline sub-pixel seam that some browsers
     render at the boundary between two flat-color sections (the page's
     white background can flash through for a fraction of a pixel even
     when the two sections measure exactly 0px apart). */
  margin-top: -1px;
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) {
  .buyers-page #pathway-3 { padding-top: 0 !important; padding-bottom: 1rem; }
}
.buyers-page #pathway-3 .h-section,
.buyers-page #pathway-3 .h-business,
.buyers-page #pathway-3 .subhead-copy,
.buyers-page #pathway-3 .body-copy,
.buyers-page #pathway-3 .phase-list li,
.buyers-page #pathway-3 .phase-list li span,
.buyers-page #pathway-3 .price-highlight,
.buyers-page #pathway-3 .eyebrow {
  color: #0D0D0D;
}
.buyers-page #pathway-3 .phase-list li i { color: #292B2F; }
.buyers-page #pathway-3 .phase-num { background: #FFFFFF; border-color: #292B2F; color: #0D0D0D; }
/* Pathway 3 header box: filled near-black, full-bleed edge-to-edge (it's a
   direct child of the <section>, a sibling of .wrap, same pattern as the
   full-bleed .media-frame below it) with no surrounding light gap — the
   section's own top padding is removed so the box sits flush against the
   top of the section (see the shared #pathway-1/2/3 padding-top:0 rule
   above), and the box supplies its own vertical padding via the shared
   .pathway1/2/3-header-box rule above. */
.buyers-page #pathway-3 .pathway3-header-box {
  background: #171310;
}
.buyers-page #pathway-3 .pathway3-header-box .h-section { color: #FFFFFF; }
.buyers-page #pathway-3 .pathway3-header-box .subhead-copy { color: rgba(250,248,245,0.82); }
/* Per explicit request: only the "3" badge's circle background is white
   (not the whole dark header box) — border/number text switched to dark
   so the number stays legible against the new white circle fill. */
.buyers-page #pathway-3 .pathway3-header-box .phase-num { background: #FFFFFF; border-color: #292B2F; color: #0D0D0D; }
.buyers-page #pathway-3 .media-frame { margin-top: 0; }
/* Guarantee box: near-black card, widened to visually align with the
   two-button row below it (that row's buttons don't shrink to the
   640px body-copy column and naturally overflow it by ~56px each side
   at desktop widths; this matches that same overflow so both edges line up). */
.buyers-page #pathway-3 .guarantee-box {
  background: #171310;
  border-color: rgba(154,157,161,0.45);
}
@media (min-width: 640px) {
  .buyers-page #pathway-3 .guarantee-box {
    width: calc(100% + 120px);
    margin-left: -60px;
    margin-right: -60px;
  }
}
.buyers-page #pathway-3 .guarantee-box p { color: #F5F1EA; }
.buyers-page #pathway-3 .guarantee-box i { color: #9A9DA1; }
/* Bug fix: the shared #pathway-3 rule above forces .price-highlight to
   near-black (#0D0D0D) for readability against the section's white
   background — but the guarantee box itself is a near-black card
   (#171310), so "$5,000 retainer" / "success fee" rendered near-invisible
   (near-black text on a near-black box). Override to the same light shade
   already used for the guarantee box's own paragraph text. */
.buyers-page #pathway-3 .guarantee-box .price-highlight { color: #F5F1EA; }
.buyers-page #pathway-3 .media-frame { border-color: #8A8D90; box-shadow: 0 20px 40px rgba(13,13,13,0.1); }
.buyers-page #pathway-3 .btn-outline-dark { border-color: #0D0D0D; color: #0D0D0D; }
.buyers-page #pathway-3 .btn-outline-dark:hover { background: #0D0D0D; color: #FFFFFF; }
.buyers-page #pathway-3 a.underline.hover\:text-darkgold { color: #0D0D0D; }
.buyers-page #pathway-3 a.underline.hover\:text-darkgold:hover { color: #292B2F; }

.buyers-page .page-dark { background: linear-gradient(165deg, #2B2622 0%, #1C1712 55%, #0D0D0D 100%); }
.buyers-page .page-dark .h-hero, .buyers-page .page-dark .h-section, .buyers-page .page-dark .h-business, .buyers-page .page-dark .h-accent { color: #FFFFFF; }
.buyers-page .page-dark .body-copy, .buyers-page .page-dark .subhead-copy { color: rgba(250,248,245,0.75); }
.buyers-page .page-dark .card-capability { background: rgba(255,255,255,0.06); border-color: rgba(154,157,161,0.4); }
.buyers-page .page-dark .card-capability .cap-icon { background: #1C1712; border-color: #292B2F; color: #9A9DA1; }

/* Buyer form section: warm taupe/beige tint instead of flat slate */
.buyers-page .bg-ivory {
  background: linear-gradient(160deg, rgba(92,90,86,0.12) 0%, rgba(201,153,122,0.12) 100%);
}

.buyers-page #mobileMenu { background: #FFFFFF; }

/* "Tell Us Where You Are" (buyer-form) section: moved up by reducing its
   top gap to 48pt (the sitewide .section default of 6rem/8rem was pushing
   it much further down from the section above), per explicit request. */
.buyers-page #buyer-form {
  padding-top: 48pt !important;
}


/* "Start With the Support You Need Today" section: 28pt gap above (from
   Pathway 4's content above it) and 28pt gap below (before the Buyer Form
   section that follows), per explicit request — replacing the sitewide
   .section 6rem/8rem padding just for this one section. A thin black
   divider line sits right at the section's bottom edge, inside that 28pt
   bottom padding. */
.buyers-page #start-support {
  padding-top: 28pt !important;
  padding-bottom: 28pt !important;
  border-bottom: 1px solid #0D0D0D;
}


/* Opening statement above the hero headline: "How we work with buyers."
   This is named explicitly in the Prata heading list ("Do not substitute
   Playfair Display... for Prata"), so it now uses Prata Regular (weight
   400, never bold) with the same letter-spacing/line-height as the other
   major H1/H2 headings, falling back to Georgia/Times New Roman/serif
   if the Prata webfont hasn't loaded. */
.buyers-page .hero-opener-canela {
  display: block;
  font-family: "Prata", Georgia, "Times New Roman", serif;
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  letter-spacing: -0.035em;
  line-height: 1.05;
  /* Charcoal accent (previously gold #C2AA72) — lightened to #9A9DA1 so it
     still reads clearly against this section's black hero background
     (flat #292B2F would be nearly invisible there). */
  color: #9A9DA1;
}

/* "Erika the Broker is the Linchpin!" — visual emphasis using only the
   existing gold accent + existing heading font, no new color/typeface. */
/* Requested typography for this section: Canela Bold (headline) / Canela Bold
   Italic (gold emphasis line) / Montserrat SemiBold (supporting text).
   Canela is a licensed commercial typeface with no free CDN source, so it is
   requested first and falls back to Playfair Display (already loaded
   sitewide) if a Canela webfont file isn't installed. Send the licensed
   Canela .woff/.woff2 files and I will wire in an @font-face to load the
   real typeface — everything below is ready to pick it up automatically. */
.buyers-page .linchpin-lead {
  display: block;
  font-family: "Canela", "Playfair Display", serif;
  font-weight: 700;
  font-style: italic;
  font-size: 1.35rem;
  color: #292B2F;
  margin-bottom: 0.5rem;
}
.buyers-page .page-dark .linchpin-lead { color: #9A9DA1; }

/* "You Don't Have to Build the Acquisition Team Alone" section headline: Canela Bold */
.buyers-page #build-team-alone .h-section {
  font-family: "Canela", "Playfair Display", serif;
  font-weight: 700;
}

/* Supporting paragraph copy in that same section: Montserrat SemiBold */
.buyers-page #build-team-alone .body-copy,
.buyers-page #build-team-alone .subhead-copy {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}

/* Connected buyer-journey list (ordered <ol>, numbers rendered via existing
   .phase-num badge instead of default list markers) */
.buyers-page .journey-list { list-style: none; }
.buyers-page .journey-num { margin-left: auto; margin-right: auto; margin-bottom: 1rem; }

/* Three final buyer-stage selections presented as large, premium interactive
   choices — reuses .card-path (existing component) with a larger tap target. */
/* Per explicit request: make these 4 pathway-selector cards visually "pop"
   against the section's ivory-tinted background instead of blending in as
   plain white — filled with the brand near-black (matching Pathway 3's
   header-box treatment elsewhere on this page) and given bold, larger,
   uppercase heading text with a charcoal hover state for emphasis
   (previously gold, per explicit request — scoped only to .buyers-page). */
.buyers-page .final-choice {
  padding: 2.75rem 1.5rem;
  justify-content: center;
  background: #171310;
  border: 1px solid rgba(154,157,161,0.35);
}
.buyers-page .final-choice:hover {
  border-color: rgba(154,157,161,0.7);
  box-shadow: 0 22px 44px rgba(13,13,13,0.35);
}
.buyers-page .final-choice .h-business {
  color: #FFFFFF;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.buyers-page .final-choice:hover .h-business { color: #9A9DA1; }

.buyers-page footer.site-footer { background: #0D0D0D; color: rgba(255,255,255,0.7); }
.buyers-page .footer-link:hover { color: #9A9DA1; }
.buyers-page .footer-link, .buyers-page .footer-disclosure,
.buyers-page .signature-mark { color: rgba(255,255,255,0.7); }
.buyers-page .text-gold\/70 { color: #9A9DA1 !important; }
.buyers-page .hover\:text-gold:hover { color: #9A9DA1 !important; }

/* ==========================================================================
   BUYERS PAGE — "PRIVATE BANK / ADVISORY" TYPOGRAPHY SYSTEM
   Scoped entirely to `.buyers-page` — no other page is affected, no copy,
   structure, colors, images or links are changed. Prata (regular weight
   only) is used for major visual-statement headings; Manrope carries every
   functional/supporting role (eyebrows, subheads, body, buttons, pricing).
   ========================================================================== */

/* ---- Major headings (H1 hero lines + H2 section headings): Prata Regular ---- */
.buyers-page .h-hero,
.buyers-page .h-section {
  font-family: "Prata", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-transform: none;
}
/* H1 hero lines: 40–48px mobile, 64–72px desktop */
.buyers-page .hero-eco .h-hero {
  font-size: 44px;
}
@media (min-width: 1024px) {
  .buyers-page .hero-eco .h-hero { font-size: 68px; }
}
/* The four hero paragraph lines are marked up as .h-hero for structural
   reasons but are supporting copy, not a heading — per the body-copy spec
   they render in Manrope (not Prata, not Georgia). The inline <span> styles
   on the actual copy also set Manrope directly, matching this rule. */
.buyers-page .hero-eco .h-hero.hero-body-line {
  font-family: "Manrope", sans-serif;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.65;
  font-size: 18px;
}
/* Hero left-column paragraph spacing, per explicit request: a fixed 28pt
   gap between the "3 Ways to Transact!" heading and the first body
   paragraph below it, and the same 28pt gap between every subsequent
   body paragraph in the hero. Only spacing is changed here — wording,
   font-size, and color on this approved copy are untouched. */
.buyers-page .hero-eco-text-inner .h-hero:not(.hero-body-line) {
  margin-bottom: 28pt !important;
}
.buyers-page .hero-eco-text-inner .hero-body-line {
  margin-bottom: 28pt !important;
}
/* H2 section headings: 34–42px mobile, 44–56px desktop */
.buyers-page .h-section {
  font-size: 36px;
}
@media (min-width: 1024px) {
  .buyers-page .h-section { font-size: 50px; }
}

/* ---- Eyebrow text / section numbers / short labels: Manrope Medium ---- */
.buyers-page .eyebrow,
.buyers-page .phase-num {
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  line-height: 1.4;
}
.buyers-page .phase-num {
  letter-spacing: 0;
  text-transform: none;
  font-size: 1.35rem;
}

/* ---- Subheadings beneath a Prata heading: Manrope Medium ---- */
.buyers-page .subhead-copy {
  font-family: "Manrope", sans-serif !important;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
@media (min-width: 1024px) {
  .buyers-page .subhead-copy { font-size: 23px; }
}

/* ---- Body copy: paragraphs, bullet points, supporting language: Manrope Regular ---- */
.buyers-page .body-copy,
.buyers-page .phase-list li,
.buyers-page .guarantee-box p {
  font-family: "Manrope", sans-serif !important;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: normal;
}
@media (min-width: 1024px) {
  .buyers-page .body-copy,
  .buyers-page .phase-list li,
  .buyers-page .guarantee-box p {
    font-size: 17px;
  }
}
/* Pathway body-copy text now spans the same wide measure as the section's
   photo/header above it, instead of being capped to a narrow 640px column
   while the photo above stretches full width. Per explicit request, all
   four pathway boxes (1, 2, 3, 4) use the same wide, side-to-side treatment
   already established for Pathway 1's ".pathway1-body-wrap" — desktop only;
   mobile/tablet keep their normal, comfortably readable single-column width. */
.buyers-page .body-copy p,
.buyers-page #pathway-1 .body-copy,
.buyers-page #pathway-2 .body-copy,
.buyers-page #pathway-3 .body-copy,
.buyers-page #pathway-4 .body-copy {
  max-width: none;
}
.buyers-page #pathway-1 > .wrap > .body-copy,
.buyers-page #pathway-2 > .wrap > .body-copy,
.buyers-page #pathway-3 > .wrap > .body-copy,
.buyers-page #pathway-4 > .wrap > .body-copy {
  margin-left: auto;
  margin-right: auto;
}
/* Desktop only: widen each pathway's text-and-button wrapper to 90% of the
   viewport (capped at 1500px so lines never become unreadably long),
   centered, with ~48px side padding — this is the same treatment applied
   to Pathway 1 previously, now applied consistently to Pathways 2, 3 & 4 so
   all four boxes' text spans side to side in the same long, wide way.
   Nothing else (wording, fonts, sizes, colors, buttons, vertical spacing)
   is touched. */
@media (min-width: 1024px) {
  .buyers-page #pathway-1 .pathway1-body-wrap,
  .buyers-page #pathway-2 .pathway2-body-wrap,
  .buyers-page #pathway-3 .pathway3-body-wrap,
  .buyers-page #pathway-4 .pathway4-body-wrap {
    width: 90% !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

/* Hero body lines keep their own larger inline-styled size (set directly
   on the approved-copy spans) — the 600–650px measure applies to them too. */
.buyers-page .hero-eco .hero-body-line {
  max-width: 640px;
}

/* ---- Buttons & download links: Manrope Medium, all caps ---- */
.buyers-page .btn {
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---- Pricing & engagement details: Manrope Medium, prominent ---- */
.buyers-page .price-highlight {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  color: #292B2F;
}
/* .page-dark sections sit on a near-black background, so the price
   highlight needs the lighter charcoal shade to stay readable there;
   #pathway-3 itself has a white background (see its own darker-ink rule
   further up), so it keeps the standard dark charcoal. */
.buyers-page .page-dark .price-highlight {
  color: #9A9DA1;
}

/* ============ Buyer Community page: ivory/beige base with select dark panels ============ */
body.buyer-funnel {
  background: #FAF8F5;
  color: #030913;
}
/* .page-dark is now applied per-section (not on body) to create full-bleed
   dark panels inside the otherwise ivory/beige page — same visual language
   as the site's .section-charcoal panels used elsewhere. */
.page-dark {
  background: linear-gradient(165deg, #1C1712 0%, #2B2622 55%, #1C1712 100%);
}
.page-dark .h-hero, .page-dark .h-section, .page-dark .h-business, .page-dark .h-accent { color: #FAF8F5; }
.page-dark .body-copy { color: rgba(250,248,245,0.72); }
.page-dark .subhead { color: rgba(250,248,245,0.85); }
.page-dark .divider-line { border-color: rgba(255,255,255,0.1); }

.page-dark #site-header {
  background: rgba(13,13,13,0.92);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.page-dark .nav-link { color: #FAF8F5; }
.page-dark .nav-link:hover, .page-dark .nav-link.active { color: #C2AA72; }
.page-dark .nav-dropdown-panel { background: #1C1712; border-color: rgba(255,255,255,0.1); }
.page-dark .nav-dropdown-item { color: #FAF8F5; }
.page-dark .nav-dropdown-item:hover { background: rgba(255,255,255,0.06); color: #C2AA72; }
.page-dark #mobileMenu { background: #1C1712; border-color: rgba(255,255,255,0.08); }
.page-dark .nav-link-mobile { color: #FAF8F5; border-color: rgba(255,255,255,0.08); }
.page-dark #menuToggle { color: #FAF8F5; }

.page-dark .card-capability { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); padding: 2.5rem 2rem; }
.page-dark .card-capability .cap-icon { background: #1C1712; border-color: rgba(194,170,114,0.4); color: #C2AA72; width: 56px; height: 56px; font-size: 1.3rem; }

/* Subheadline-style copy: short, punchy supporting lines under a headline — uses the CTA button font (Montserrat) instead of the long-form body font. Color adapts to light vs. dark section context. */
.subhead-copy {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(3,9,19,0.72);
}
.page-dark .subhead-copy { color: rgba(250,248,245,0.88); }

/* Muted supporting copy (trust lines, stat-chip labels) — adapts to section context */
.muted-copy {
  font-family: "Montserrat", sans-serif;
  color: rgba(3,9,19,0.55);
}
.page-dark .muted-copy { color: rgba(250,248,245,0.6); }

/* Header logo on the Buyer Community page: the source logo asset has a
   baked-in white background that automated background-removal tools could
   not cleanly extract, so the header itself stays light/ivory — the logo's
   white background blends seamlessly into it with no visible box, and the
   logo is rendered noticeably larger than the sitewide 48px header logo.
   Same crop math as the sitewide rule above, scaled up to these taller
   target heights so the same visible logo-art band fills the container. */
.buyer-funnel #site-header .brand-mark { height: 72px; width: 232px; }
.buyer-funnel #site-header .brand-mark img { height: 238px; width: 238px; top: -103px; left: -4px; }
.buyer-funnel #site-header .wrap { padding-top: 0.4rem; padding-bottom: 0.4rem; }
@media (min-width: 640px) {
  .buyer-funnel #site-header .brand-mark { height: 128px; width: 413px; }
  .buyer-funnel #site-header .brand-mark img { height: 424px; width: 424px; top: -183px; left: -7px; }
}

.page-dark .stat-chip { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); box-shadow: none; }
.page-dark .stat-chip .text-slate { color: rgba(250,248,245,0.55); }

.page-dark .lead-magnet-card { background: #1C1712; border-color: rgba(255,255,255,0.1); }
.page-dark .form-label { color: rgba(250,248,245,0.6); }
.page-dark .form-input { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.18); color: #FAF8F5; }
.page-dark .form-input::placeholder { color: rgba(250,248,245,0.35); }
.page-dark .form-input option { color: #030913; }

.page-dark .faq-item { border-color: rgba(255,255,255,0.1); }
.page-dark .faq-item summary { color: #FAF8F5; }

.page-dark .pricing-card { background: #1C1712; border-color: rgba(255,255,255,0.12); }
.page-dark .pricing-card.featured { border-color: #C2AA72; }
.page-dark .pricing-card .price-tag { color: #FAF8F5; }
.page-dark .pricing-card .price-note { color: rgba(250,248,245,0.5); }
.page-dark .pricing-feature { color: rgba(250,248,245,0.75); }
.page-dark .pricing-feature i { color: #C2AA72; }

.page-dark .mosaic-item, .page-dark .hero-photo-frame, .page-dark .media-frame { border-color: rgba(255,255,255,0.15); }
.page-dark .hero-photo-frame::before { border-color: rgba(194,170,114,0.25); }
.page-dark .photo-caption { color: rgba(250,248,245,0.5); }

/* ---- Buyer Community page-wide type scale-up (scoped to .buyer-funnel body only,
   so shared components like .eyebrow, .faq-item, .form-label, .pricing-feature,
   .photo-caption used on every other page are never affected) ---- */
.buyer-funnel .eyebrow { font-size: 0.95rem; letter-spacing: 0.22em; }
.buyer-funnel .photo-caption { font-size: 0.95rem; }
.buyer-funnel .faq-item summary { font-size: 1.25rem; }
.buyer-funnel .faq-item p.body-copy { font-size: 1.1rem; }
.buyer-funnel .form-label { font-size: 0.88rem; }
.buyer-funnel .form-input { font-size: 1.05rem; padding: 0.95rem 1.1rem; }
.buyer-funnel .pricing-feature { font-size: 1.05rem; gap: 0.75rem; padding: 0.4rem 0; }
.buyer-funnel .pricing-card .price-tag { font-size: 3rem; }
.buyer-funnel .pricing-card .price-note { font-size: 1rem; }
.buyer-funnel .btn { font-size: 0.92rem; padding: 1.1rem 2.4rem; }
.buyer-funnel .btn-sm { font-size: 0.8rem; padding: 0.8rem 1.7rem; }
.buyer-funnel .h-business { font-size: 1.05em; }

/* ---- Body copy: Georgia serif (replacing Roboto Condensed), solid black on
   light/ivory sections, solid white on dark (.page-dark) sections and the
   footer — scoped to .buyer-funnel so no other page is affected ---- */
.buyer-funnel .body-copy,
.buyer-funnel .font-condensed,
.buyer-funnel .subhead-copy,
.buyer-funnel .muted-copy,
.buyer-funnel .value-stack-table th,
.buyer-funnel .value-stack-table td,
.buyer-funnel .value-stack-note,
.buyer-funnel .footer-link,
.buyer-funnel .footer-disclosure {
  font-family: Georgia, "Times New Roman", serif;
}

/* Light sections: solid black */
.buyer-funnel .body-copy,
.buyer-funnel .subhead-copy,
.buyer-funnel .muted-copy {
  color: #000000;
}

/* Dark sections (.page-dark panels + the always-dark footer): solid white */
.buyer-funnel .page-dark .body-copy,
.buyer-funnel .page-dark .subhead-copy,
.buyer-funnel .page-dark .muted-copy,
.buyer-funnel .value-stack-table td,
.buyer-funnel .value-stack-note,
.buyer-funnel footer.site-footer,
.buyer-funnel .footer-link,
.buyer-funnel .footer-disclosure,
.buyer-funnel footer.site-footer .font-condensed {
  color: #FFFFFF;
}

/* ---- Symmetrical, full-width deliverable grid (8 cards, 2 even rows of 4) ---- */
@media (min-width: 1024px) {
  .buyer-funnel .grid-even.included-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Full-width feel to match the sitewide 90% wrap: this page's text blocks
   were nested inside the sitewide wide .wrap but then re-capped by Tailwind's
   max-w-xl/3xl/4xl/5xl/6xl utilities, which boxed every paragraph and heading
   back down to a narrow fixed-pixel column and left large dead margins on
   wide screens, even though the outer .wrap itself was already wide. Widen
   those same utility classes so text flows out to the page's real 90% content
   width, matching the sitewide spacing guideline used on every other page.
   !important is required because the Tailwind CDN injects its utility
   stylesheet dynamically, after this linked stylesheet, so same-specificity
   selectors like .max-w-3xl would otherwise win the cascade by source order. */
.buyer-funnel .wrap.max-w-xl  { max-width: 46rem !important; }  /* 576px -> 736px */
.buyer-funnel .wrap.max-w-3xl { max-width: 68rem !important; }  /* 768px -> 1088px */
.buyer-funnel .wrap.max-w-4xl { max-width: 84rem !important; }  /* 896px -> 1344px */
.buyer-funnel .wrap.max-w-5xl { max-width: 96rem !important; }  /* 1024px -> 1536px */
/* Text-block max-widths that sit inside an already-wide .wrap (paragraphs,
   pricing card, media frames) get a smaller bump, purely so long lines of
   body copy don't stretch past a comfortable reading width, while still
   flowing noticeably wider than the old fixed caps. */
.buyer-funnel p.max-w-3xl,
.buyer-funnel .max-w-lg { max-width: 42rem !important; }        /* 512px -> 672px */
.buyer-funnel .media-frame.max-w-6xl { max-width: 78rem !important; } /* 1152px -> 1248px */

/* ---- Bigger deliverable/pain-point boxes everywhere on this page, regardless of
   whether the section they sit in is a light (ivory) or dark panel section ---- */
.buyer-funnel .card-capability { padding: 2.5rem 2rem; }
.buyer-funnel .card-capability .cap-icon { width: 56px; height: 56px; font-size: 1.3rem; }
.buyer-funnel .card-capability h3 { font-size: 1.3rem; }
.buyer-funnel .card-capability p.body-copy { font-size: 1.1rem; }

/* ---- Full, uncropped photo display: never crop a face, never write over a photo ---- */
.media-frame {
  width: 100%;
  border: 1px solid rgba(3,9,19,0.08);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}
.media-frame img { width: 100%; height: auto; display: block; }
.photo-caption {
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #869293;
  text-align: center;
  margin-top: 0.9rem;
}

/* ---- Value stack table ---- */
.value-stack-table { width: 100%; border-collapse: collapse; }
.value-stack-table th, .value-stack-table td {
  text-align: left;
  padding: 1.35rem 1.5rem;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.05rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.value-stack-table th {
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C2AA72;
}
.value-stack-table td { color: rgba(250,248,245,0.85); }
.value-stack-table td:last-child, .value-stack-table th:last-child { text-align: right; white-space: nowrap; font-weight: 600; }
.value-stack-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1.5rem 1.5rem 0;
  font-family: "Roboto Slab", serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: #FAF8F5;
}
.value-stack-note {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 0.95rem;
  color: rgba(250,248,245,0.55);
  margin-top: 1rem;
  line-height: 1.7;
  padding: 0 0.5rem;
}

/* ---- Guarantee badge ---- */
.guarantee-box {
  border: 1px solid rgba(194,170,114,0.4);
  border-radius: 6px;
  padding: 1.75rem;
  background: rgba(194,170,114,0.06);
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}
.guarantee-box i { font-size: 1.6rem; color: #C2AA72; margin-top: 0.2rem; }

/* ============ Hero ============ */
.hero-eco {
  background:
    radial-gradient(circle at 85% 12%, rgba(194,170,114,0.10), transparent 42%),
    radial-gradient(circle at 8% 90%, rgba(43,38,34,0.05), transparent 40%),
    #FFFFFF;
}
.hero-photo-frame {
  border: 1px solid rgba(194,170,114,0.5);
  padding: 10px;
  position: relative;
}

/* Deal Room section only: widen the content area to 94% of the viewport
   (3% side padding each) on desktop instead of the sitewide 92%/4% default,
   so the two-column layout uses more of the available width with no large
   empty margins on either side. Scoped to this section only — the sitewide
   .wrap padding used by every other section is untouched. */
@media (min-width: 1024px) {
  #deal-room-section .wrap { padding-left: 3%; padding-right: 3%; }
}

/* ============ Deal Room section (index.html) — requested typography ============ */
.deal-room-eyebrow {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 18pt;
  text-transform: none;
  letter-spacing: normal;
  color: #C2AA72;
}
.deal-room-heading {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 20pt;
  color: #FFFFFF;
  line-height: 1.2;
}
.deal-room-body {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 16pt;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
}
/* Deal Room photo: sized (via JS below) to be exactly as tall as the text
   column beside it — top and bottom of the image align with the top and
   bottom of the text, instead of the smaller max-w-sm box used before. */
.deal-room-photo-frame img { width: 100%; height: auto; object-fit: contain; display: block; }
.hero-photo-frame::before {
  content: '';
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(194,170,114,0.18);
  pointer-events: none;
}
.hero-photo-frame img { width: 100%; height: auto; object-fit: contain; display: block; }

/* Hero video: shown at its natural (full-body, uncropped) aspect ratio —
   width:100% + height:auto lets the box take whatever height the video's
   own dimensions produce, so nothing above/below the person is cropped
   off (object-fit:cover, used previously, was cutting off the lower body
   to force-fit a taller/shorter box — auto height avoids that entirely
   since the box always matches the video's real proportions). */
.hero-photo-frame video {
  width: 100%;
  height: auto;
  display: block;
}
/* The hero photo must never be bigger/taller than the text column beside
   it. Exact sizing (matching the photo's real box to the text column's
   rendered height AND the available column width, without stretching its
   aspect ratio or leaving empty letterbox space) needs real pixel
   measurements, which only JS can provide — see the sizeBuyersHeroPhoto()
   script at the bottom of buyers.html, which sets BOTH the frame's width
   and height inline. These rules just define how the frame/image fill
   that explicit box, plus the stacked mobile/tablet fallback where no
   height-matching applies. */
.buyers-page .hero-eco-video-col {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.buyers-page .hero-eco .hero-photo-frame.w-full {
  /* Compound selector (two classes) beats the single-class Tailwind ".w-full"
     utility on specificity, so this wins even though Tailwind's CDN script
     injects its own stylesheet after this one. JS (sizeBuyersHeroPhoto in
     buyers.html) sets an explicit inline width+height once it measures the
     text column and the image's own natural aspect ratio, so the frame is
     never stretched and never taller/wider than that computed box. */
  width: auto;
  max-width: 100%;
}
.buyers-page .hero-eco .hero-photo-frame img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  display: block;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1023px) {
  /* Stacked mobile/tablet layout: the height-matching rules above only make
     sense side-by-side on desktop — below 1024px (where the JS itself also
     bails out) the photo goes back to its normal full-width, natural-height
     behavior. */
  .buyers-page .hero-eco-video-col { display: block; }
  .buyers-page .hero-eco .hero-photo-frame.w-full {
    width: 100%;
    height: auto !important;
    max-width: 380px;
  }
  .buyers-page .hero-eco .hero-photo-frame img {
    width: 100%;
    height: auto;
  }
}

/* Mobile/stacked fallback: the button just gets its own top margin since
   there's no video to align against at this width. */
.buyers-page .hero-eco-cta { margin-top: 1.5rem; }

/* Hero row: on desktop, the video keeps its natural, uncropped size —
   nothing here resizes or crops it. The "Join the Buyer Community"
   button stays in normal document flow, but its top margin is set
   explicitly in pixels by js/site.js (alignHeroEcoCta), which measures
   exactly where the video frame's bottom edge lands and pushes the
   button down (via extra margin-top, not absolute positioning, so it
   can never overlap the paragraph text above it) until its own bottom
   edge reaches that same line — keeping the two parallel regardless of
   which column ends up taller. */
@media (min-width: 1024px) {
  .buyers-page .hero-eco-row {
    /* flex-start (not stretch): stretch would force the text column itself
       to grow to match the row's tallest column, which — combined with the
       JS below sizing the photo frame FROM that same text column's height —
       created a feedback loop where each grew to chase the other. Top-
       aligning both columns instead keeps the text column's height purely a
       function of its own content, giving the JS a stable, real measurement
       to size the photo against. */
    align-items: start;
    grid-template-columns: 0.88fr 1.12fr;
  }
}

.stat-chip {
  background: #FFFFFF;
  border: 1px solid rgba(3,9,19,0.08);
  box-shadow: 0 16px 34px rgba(3,9,19,0.08);
  padding: 1.1rem 1.5rem;
}
/* Home hero's $350M+ stat card only (not the 4 stat-chips further down the
   page in "Experience and Authority", which stay white) — black interior
   with white caption text per explicit request, gold figure kept as-is. */
.home-hero-stat-chip {
  background: #030913;
  border-color: rgba(194,170,114,0.35);
  /* Box grown slightly beyond the base .stat-chip padding — 2pt added to
     the top, 5pt added to the bottom — so it fully covers the video
     player's control bar/timestamp area along the bottom edge of the
     video frame. */
  padding-top: calc(1.1rem + 2pt);
  padding-bottom: calc(1.1rem + 5pt);
}
/* Home hero's two CTA buttons only — doubled from their natural
   (text-hugging) width so they read as a more prominent pair, with the
   label centered inside the wider box (.btn already centers via
   justify-content, this just gives it more room to center within). */
.home-hero-buttons .btn { width: 515px; max-width: 100%; }

/* Home hero (desktop): stretch both grid columns to the same height — the
   text column's own height, since with 4 bio paragraphs it is the taller,
   content-driven column. The video column, and the video itself, then fill
   100% of that stretched height, so the video's bottom edge always lands
   exactly level with the button row's bottom edge (the last thing in the
   text column) no matter how long the bio copy is — instead of the video
   keeping its natural (shorter) height and leaving a large empty gap below
   it. object-fit:cover lets the video fill that taller box without
   distorting its own aspect ratio (it crops the sides slightly instead,
   same tradeoff object-fit:cover always makes when the box ratio doesn't
   match the source's). */
@media (min-width: 1024px) {
  .home-hero-grid { align-items: stretch; }
  .home-hero-grid > .relative { height: 100%; }
}
/* Widened further per explicit request: +2 inches (192px) of extra width on
   each side (384px total) so less of the video is cropped off by
   object-fit:cover on the taller, height-matched box above, while the
   video's own column (inside the sitewide 90%-wide .wrap) still bounds how
   large it can actually get on any given screen — this max-width is a
   ceiling, not a forced size, so the hero content keeps using as much of
   that 90% width as the grid column allows. */
.home-hero-video-frame { max-width: 904px; }
@media (min-width: 1024px) {
  .home-hero-video-frame { height: 100%; box-sizing: border-box; }
  .home-hero-video-frame video { width: 100%; height: 100%; object-fit: cover; }
}

/* This element replaces the hero section's old top padding (previously
   Tailwind's pt-36/lg:pt-44 = 144px mobile/tablet, 176px desktop, which
   only cleared the fixed #site-header with empty space). It reserves that
   exact same total height — so the hero content (headline/video) below it
   still starts at exactly the same vertical position as before, nothing
   moves down further.
   The #site-header itself is `position:fixed`, so it sits ON TOP of this
   box's first ~73px (48px logo + 12px top/bottom padding + 1px border) —
   that portion is visually covered by the header, not empty space the
   strip should center within. padding-top pushes the flex-centering area
   down past the header, so the strip centers only in the space that is
   actually visible between the header's bottom edge and the hero content
   that follows (71px mobile/tablet, 103px desktop) — matching the
   requested "centered between the divider line and the top of the video"
   placement, using normal flex layout so nothing clips at any viewport. */
.hero-top-spacer {
  /* padding-top (73px) clears the fixed header and stays fixed — it is
     covered by the header, not visible whitespace. The remaining height
     below padding-top is the visible box the strip centers within; doubling
     that (144-73=71 -> 142 mobile, 176-73=103 -> 206 desktop) doubles the
     visible gap both above and below the centered "Buy | Build | Scale |
     Exit" strip, since flex centering splits it evenly on both sides. */
  height: 215px;
  padding-top: 73px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .hero-top-spacer { height: 279px; }
}

/* ============ Lifecycle strip (BUY | BUILD | INVEST | SCALE | EXIT) ============
   38pt on tablet/desktop per explicit request; scaled down on narrow phones
   only so the line still fits on one row instead of wrapping into 5 stacked
   lines (38pt does not fit a 390px-wide phone screen on one line). */
.lifecycle-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 0.3rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 14pt;
  color: #887856;
}
@media (min-width: 480px) {
  .lifecycle-strip { font-size: 18pt; gap: 0.4rem; }
}
@media (min-width: 640px) {
  /* letter-spacing/gap are tightened here — at the small 0.72rem size,
     0.22em letter-spacing is a few px; at 38pt that same 0.22em becomes
     wide enough (~11px per character) to push the line past the
     container width and force an unwanted wrap onto two lines. */
  .lifecycle-strip {
    font-size: 38pt;
    letter-spacing: 0.06em;
    gap: 0.4rem;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}
.lifecycle-strip .sep { color: #C2AA72; margin: 0 0.3em; }

/* ============ Symmetrical Card Grids ============ */
.grid-even {
  display: grid;
  gap: 1.5rem;
}
.card-path {
  background: #FFFFFF;
  border: 1px solid rgba(3,9,19,0.08);
  padding: 2.4rem 2rem;
  text-align: center;
  border-radius: 4px;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.card-path:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px rgba(3,9,19,0.10);
  border-color: rgba(194,170,114,0.5);
}
.card-path .path-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #FAF8F5;
  border: 1px solid rgba(194,170,114,0.35);
  color: #887856;
  font-size: 1.3rem;
  margin-bottom: 1.25rem;
}

.card-capability {
  background: #FAF8F5;
  border: 1px solid rgba(3,9,19,0.06);
  padding: 1.75rem 1.5rem;
  border-radius: 4px;
  height: 100%;
}

/* ============ Choose Your Path — 6-box grid (homepage only) ============
   Black section background, 92%-wide 3x3 grid (3 over 3), white boxes with
   icon / gold italic title / body copy / gold button, per explicit spec. */
.choose-path-section {
  background: #030913;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.choose-path-header {
  margin-bottom: 3rem;
}
.choose-path-title {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 48pt;
  line-height: 1;
  color: #FFFFFF;
  margin: 0;
}
.choose-path-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 92%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .choose-path-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .choose-path-grid { grid-template-columns: 1fr; }
}
.choose-path-card {
  background: #FFFFFF;
  border-radius: 4px;
  padding: 2.4rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.choose-path-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px rgba(0,0,0,0.28);
}
.choose-path-icon {
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  color: #C2AA72;
  font-size: 1.7rem;
  margin-bottom: 1.1rem;
}
.choose-path-card-title {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 18pt;
  color: #C2AA72;
  margin-bottom: 0.85rem;
  line-height: 1.25;
}
.choose-path-card-body {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 15pt;
  color: #030913;
  line-height: 1.55;
  margin-bottom: 1.5rem;
}
.card-capability .cap-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF;
  border: 1px solid rgba(194,170,114,0.4);
  color: #887856;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.card-brand {
  background: #FFFFFF;
  border: 1px solid rgba(3,9,19,0.08);
  border-radius: 4px;
  padding: 2rem 1.75rem;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card-brand:hover { box-shadow: 0 20px 40px rgba(3,9,19,0.1); transform: translateY(-4px); }
.card-brand .brand-mark-badge {
  width: 100%;
  height: 64px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.card-brand .brand-logo-img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  border-radius: 4px;
}
.card-brand .brand-mark-badge.brand-mark-logo {
  height: 80px;
}

/* ============ Logo Marquee ============ */
.logo-marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  animation: logo-marquee-scroll 32s linear infinite;
}
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
.logo-marquee-item {
  flex: 0 0 auto;
  height: 128px;
  width: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}
.logo-marquee-item img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  border-radius: 4px;
}
@keyframes logo-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============ Linchpin Section — native HTML/CSS ecosystem diagram ============
   Recreates the user's reference graphic (black background, gold accents,
   "The Linchpin" hub linking Buyer-side and Owner-side pathway cards) as
   crisp markup instead of a raster image, so it never looks blurry/
   compressed at any size or zoom level. */
.linchpin-section {
  background: #030913;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}
.linchpin-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3rem;
  align-items: center;
  max-width: 92%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1024px) {
  .linchpin-grid { grid-template-columns: 1fr; }
}
.linchpin-headline {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.18;
  color: #FFFFFF;
}
@media (min-width: 768px) {
  .linchpin-headline { font-size: 2.9rem; }
}
.linchpin-sub {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
  max-width: 30rem;
}
.linchpin-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: #FFFFFF;
  color: #030913;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  padding: 0.95rem 1.8rem;
  border-radius: 2px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.linchpin-cta i { color: #C2AA72; }
.linchpin-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.35); }

.linchpin-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.linchpin-branch {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  flex: 1 1 0;
  min-width: 0;
}
.linchpin-trunk {
  width: 2rem;
  height: 1px;
  background: rgba(194,170,114,0.55);
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  .linchpin-trunk { width: 0.9rem; }
}
.linchpin-node {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: #FFFFFF;
  border-radius: 6px;
  padding: 0.85rem 1.1rem;
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}
.linchpin-node i {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #C2AA72;
  border-radius: 6px;
  color: #C2AA72;
  font-size: 0.95rem;
  position: relative;
}
.linchpin-node i::after {
  content: '';
  position: absolute;
  right: -0.55rem;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: rgba(194,170,114,0.5);
}
.linchpin-node span {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  color: #030913;
  line-height: 1.25;
}
.linchpin-hub {
  flex: 0 0 auto;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 1px solid #C2AA72;
  box-shadow: inset 0 0 0 10px rgba(194,170,114,0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  position: relative;
}
.linchpin-hub::before {
  content: '';
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px solid rgba(194,170,114,0.6);
}
.linchpin-hub-title {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 2.4rem;
  color: #FFFFFF;
  line-height: 1.1;
}
.linchpin-hub-sub {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 1rem;
  color: #C2AA72;
}
@media (max-width: 1024px) {
  .linchpin-diagram { margin-top: 2.5rem; flex-wrap: nowrap; }
  .linchpin-hub { width: 260px; height: 260px; }
  .linchpin-hub-title { font-size: 1.9rem; }
  .linchpin-hub-sub { font-size: 0.8rem; }
}
@media (max-width: 640px) {
  .linchpin-diagram { flex-direction: column; gap: 1.25rem; }
  .linchpin-trunk { width: 1px; height: 1.25rem; }
  .linchpin-branch { width: 100%; }
  .linchpin-hub { width: 220px; height: 220px; }
  .linchpin-hub-title { font-size: 1.6rem; }
  .linchpin-hub-sub { font-size: 0.72rem; }
}

/* ============ Authority Bar — full-width scrolling credentials marquee ============
   Matches the "Featured On" belt above it: same light-gray background,
   same top/bottom hairline borders. Gold stat line set to 16pt (matching
   the "Featured On:" label size), caption set to 12pt Montserrat. */
.authority-bar-section {
  background: #F5F5F5;
  border-top: 1px solid rgba(3,9,19,0.08);
  border-bottom: 1px solid rgba(3,9,19,0.08);
}
.authority-bar-band {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 190px;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
@media (min-width: 1024px) {
  .authority-bar-band { min-height: 220px; }
}
.authority-bar-band:focus { outline: none; }
.authority-bar-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: authority-bar-scroll 65s linear infinite;
  padding: 0 3rem;
}
.authority-bar-band:hover .authority-bar-track,
.authority-bar-band:focus .authority-bar-track,
.authority-bar-band:focus-within .authority-bar-track {
  animation-play-state: paused;
}
.authority-bar-item {
  flex: 0 0 auto;
  text-align: center;
  padding: 0 2.75rem;
  border-right: 1px solid rgba(194,170,114,0.5);
  max-width: 340px;
}
.authority-bar-item:last-child { border-right: none; }
.authority-bar-stat {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 16pt;
  color: #C2AA72;
  line-height: 1.2;
  margin: 0 0 0.5rem;
  white-space: nowrap;
}
.authority-bar-caption {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 12pt;
  letter-spacing: 0.02em;
  color: #292B2F;
  line-height: 1.4;
  margin: 0;
  white-space: normal;
}
@keyframes authority-bar-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .authority-bar-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding: 1rem;
  }
  .authority-bar-band {
    overflow: visible;
    min-height: 0;
  }
  .authority-bar-item[aria-hidden="true"] { display: none; }
  .authority-bar-item {
    padding: 1.25rem 1.5rem;
    border-right: none;
    border-bottom: 1px solid rgba(194,170,114,0.3);
    max-width: 100%;
  }
}
@media (max-width: 640px) {
  .authority-bar-stat { font-size: 13pt; }
  .authority-bar-caption { font-size: 10.5pt; }
  .authority-bar-item { padding: 0 1.5rem; max-width: 240px; }
  .authority-bar-band { min-height: 150px; }
}

/* ============ Featured On — dark scrolling belt ============ */
.featured-on-belt-wrap {
  background: #030913;
  padding: 2.4rem 0;
}
/* Homepage-only variant: light gray background, narrower centered area
   (scoped so the media.html dark belt is unaffected). */
.home-featured-on-belt-wrap {
  background: #F5F5F5;
  border-top: 1px solid rgba(3,9,19,0.08);
  border-bottom: 1px solid rgba(3,9,19,0.08);
}
.home-featured-on-belt-wrap .home-featured-on-belt {
  max-width: 92%;
  margin-left: auto;
  margin-right: auto;
}
.home-featured-on-belt-wrap .featured-on-item {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.featured-on-belt {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.featured-on-track {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  animation: featured-on-scroll 46s linear infinite;
}
/* Belt keeps scrolling continuously — intentionally NOT paused on hover,
   so it never appears to freeze/stop while a visitor's cursor is over it. */
.featured-on-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #292B2F;
  white-space: nowrap;
  background: #FFFFFF;
  border-radius: 999px;
  padding: 0.65rem 1.3rem;
  transition: color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.featured-on-item:hover { color: #887856; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.18); }
.featured-on-item.is-static { cursor: default; }
.featured-on-item.is-static:hover { color: #292B2F; transform: none; box-shadow: none; }
/* Yahoo Finance item shows its real logo instead of text — drop the white
   pill/padding used by the text items (a logo needs no pill background)
   and size the logo image itself so it never distorts. All belt logos are
   sized to match the Enterprising Women wordmark (68pt tall). */
.featured-on-item-logo { background: none; padding: 0; border-radius: 0; }
.featured-on-item-logo:hover { box-shadow: none; transform: translateY(-2px); }
.featured-on-item-logo img { height: 68pt; width: auto; display: block; }
.featured-on-item-logo-large img { height: 68pt; }
/* Business Success Consulting Group's logo file has extra transparent
   padding baked into its canvas (visible logo content fills only ~88% of
   the image height, vs ~98-99% for other belt logos like Yahoo Finance and
   Enterprising Women), so at the shared 68pt height its actual artwork
   renders visibly smaller than the rest of the belt. Bump this one image's
   height so its visible logo content matches the others' size exactly. */
.featured-on-item-logo img[src*="business-success-consulting-group"] { height: 77pt; }
/* Women Business Collaborative (WBC) logo file has very large transparent
   padding below the logo content (visible content fills only ~46% of the
   image height, vs ~98-99% for other belt logos), so at the shared 68pt
   height its actual artwork renders much smaller than the rest of the
   belt. Bump this one image's height so its visible logo content matches
   the others' size. */
.featured-on-item-logo img[src*="wbc.png"] { height: 143pt; }
/* Best Payments & Healthcare Integrations (BPH) logo file has large
   transparent padding above/below its wordmark (visible content fills only
   ~38% of the image height, vs ~87% for Business Connection Alliance in the
   same "Our Portfolio Companies" belt), so at the shared 68pt height its
   actual artwork renders noticeably smaller than BCA. Bump this one image's
   height so its visible logo content matches BCA's size. That same padding
   also sits to the left/right of the wordmark, and scaling the image up to
   155pt tall scales that side padding up too -- turning it into a huge slab
   of "invisible" horizontal space that made the belt's flex gap look wildly
   uneven around this one item (RX Scale Partners and Business Connection
   Alliance appeared to sit much further away than every other pair). Pull
   the image in with negative side margins to cancel out that baked-in
   padding so the visual gap to each neighbor matches the belt's normal
   3rem gap everywhere else. */
.featured-on-item-logo img[src*="bph-integrations-final"] { height: 155pt; max-width: none; margin-left: -64pt; margin-right: -55pt; }
/* Our Portfolio Companies belt: The Silver Tsunami Group, Silver Tsunami
   Transitions and RX Scale Partners logo files each have extra transparent
   padding baked into their canvas (visible content fills only ~74-75% of
   the image height, vs ~87% for Business Connection Alliance in the same
   belt), so at the shared 68pt height their actual artwork renders
   noticeably smaller/weaker than BCA. Bump each one's height so its visible
   logo content matches BCA's size, per explicit request that every logo in
   this belt look as large and strong as the Business Connection Alliance
   logo. (BizBuyLeads and ETAEdu already fill their canvas at least as much
   as BCA at the shared height, so they're left untouched.) */
.featured-on-item-logo img[src*="silver-tsunami-group-transparent"] { height: 80pt; }
.featured-on-item-logo img[src*="silver-tsunami-transitions"] { height: 79pt; }
.featured-on-item-logo img[src*="rx-scale-partners-transparent"] { height: 78pt; }
/* Voyage Baltimore / McLean Living / The NOVA Living logo files are plain
   white text with a transparent background. On the dark press belt
   (media.html) the white text is legible as-is; on the homepage's
   light-gray belt it needs to invert to dark so it stays readable while
   keeping a fully transparent background. */
.home-featured-on-belt-wrap .featured-on-item-logo-invert img { filter: invert(1) brightness(0.35); }
/* The Growth Ceiling Podcast supplies full-bleed square cover art (its own
   teal background is part of the design, not a plain logo on white) —
   show it as a small rounded square instead of a bare wordmark so it reads
   as podcast cover art rather than a stretched/cropped logo. */
.featured-on-item-logo-cover img { height: 68pt; width: 68pt; object-fit: cover; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
/* ETAEdu and BPH Integrations logo files still carry their own solid-color
   backgrounds (background removal made their text illegible), so — like the
   podcast cover-art item above — show them as a small rounded chip with a
   soft shadow instead of a bare wordmark, so the color block reads as an
   intentional logo tile rather than a stray box floating on the belt. */
.featured-on-item-logo-chip img { height: 68pt; width: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
/* Empowering Women in Commercial Real Estate mixes white text with hot-pink
   text/icon on a transparent background — a full invert (used for pure-white
   logos above) would wreck the pink, so instead add a thin dark outline via
   drop-shadow just to keep the white portions legible on the light-gray
   belt while leaving the pink exactly as designed. */
.home-featured-on-belt-wrap .featured-on-item-logo-outline img { filter: drop-shadow(0 0 1px rgba(3,9,19,0.55)) drop-shadow(0 0 1px rgba(3,9,19,0.55)); }
@keyframes featured-on-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Plain text link (no button box/border) used under the "Our Portfolio
   Companies" belt so the belt reads as one continuous light-gray section
   rather than ending in a boxed button. */
.portfolio-companies-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #292B2F;
  text-decoration: none;
  border-bottom: 1px solid rgba(41,43,47,0.35);
  padding-bottom: 0.2rem;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.portfolio-companies-link:hover { color: #887856; border-color: #887856; transform: translateY(-1px); }
.portfolio-companies-link i { font-size: 0.7rem; }

.badge-relationship {
  display: inline-flex;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #887856;
  border: 1px solid rgba(194,170,114,0.45);
  background: #FAF8F5;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}

/* ============ Steps / process ============ */
.step-num {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #030913;
  color: #C2AA72;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* "How the Ecosystem Works" section — black background, white/gold text,
   scoped to #how-ecosystem-works only so no other page's shared .h-section /
   .body-copy / .h-business / .step-num rules are affected. Body text sized
   up to at least 18pt per explicit request. */
#how-ecosystem-works .h-section { color: #FFFFFF; }
#how-ecosystem-works .body-copy { color: rgba(255,255,255,0.78); font-size: 18pt; }
#how-ecosystem-works .step-num { background: #C2AA72; color: #030913; }
/* The white body-copy text inside each of the 4 numbered step cards
   (sections 1-4): Cormorant Garamond, per explicit request. Scoped to
   .grid-even only so the intro paragraph above (explicitly Montserrat,
   per an earlier separate request) is unaffected. */
#how-ecosystem-works .grid-even .body-copy {
  font-family: "Cormorant Garamond", serif;
}
/* Gold step numbers (01/02/03/04): Cormorant Garamond Italic at 18pt
   (closest available match to the requested "Garamond Premier Pro
   Italic", an Adobe desktop font with no free web-embeddable version). */
#how-ecosystem-works .step-num {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 18pt;
}
/* Words below each number (e.g. "Start With Your Objective"): Montserrat
   Regular at 16pt, gold, per explicit spec. */
#how-ecosystem-works .h-business {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 16pt;
  letter-spacing: 0.01em;
  color: #C2AA72;
}
/* The four step cards already sit in equal-width CSS Grid columns via
   .grid-even + the existing grid-cols-1/sm:grid-cols-2/lg:grid-cols-4
   utility classes (CSS Grid's default 1fr tracks are equal by
   definition), so the four spaces are already symmetrical at every
   breakpoint — no extra override needed here. */

/* ============ How the Ecosystem Works — intro block ============
   Scoped overrides for this section's intro only (eyebrow/heading/body),
   per explicit spec: eyebrow moved up + resized to 18pt, heading in
   Cormorant Garamond italic at 20pt (closest available match to the
   requested "Garamond Premier Pro Italic", which is an Adobe font not
   available for web embedding), body in Montserrat Regular / light gray,
   and the whole block spanning 92% of the section width edge-to-edge. */
.how-ecosystem-intro {
  max-width: 92%;
  width: 92%;
  margin-left: auto;
  margin-right: auto;
}
.how-ecosystem-eyebrow {
  font-size: 18pt;
  margin-top: -38pt;
  margin-bottom: 16pt;
}
.how-ecosystem-heading {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 28pt;
  color: #FFFFFF;
  margin-top: 0;
  line-height: 1.3;
}
.how-ecosystem-body {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  color: #D6D6D6;
  line-height: 1.7;
}

/* ============ Ecosystem diagram ============ */
.ecosystem-diagram {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1/1;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(194,170,114,0.08) 0%, rgba(194,170,114,0.02) 55%, transparent 70%);
}
.eco-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(194,170,114,0.4);
}
.eco-ring.ring-1 { inset: 16%; }
.eco-ring.ring-2 { inset: 0%; }
.eco-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 34%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #030913;
  color: #FFFFFF;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 0.5rem;
  box-shadow: 0 20px 45px rgba(3,9,19,0.25);
  z-index: 3;
}
.eco-node {
  position: absolute;
  transform: translate(-50%, -50%);
  background: #FFFFFF;
  border: 1px solid rgba(3,9,19,0.1);
  box-shadow: 0 10px 24px rgba(3,9,19,0.1);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #292B2F;
  white-space: nowrap;
  z-index: 2;
}

/* Buyers page hero: small ecosystem diagram filling the empty brown
   space below the intro copy. Three longer pathway labels need to wrap
   instead of forcing the pill to a single very-wide nowrap line. */
.buyers-page .hero-eco-diagram-wrap { display: flex; justify-content: center; width: 100%; }
.buyers-page .hero-eco-diagram {
  max-width: 320px;
}
.buyers-page .hero-eco-diagram .eco-node {
  white-space: normal;
  text-align: center;
  width: 36%;
  max-width: 130px;
  border-radius: 16px;
  line-height: 1.25;
  font-size: 0.64rem;
  padding: 0.4rem 0.65rem;
}
/* Remove the navy/near-black tint from the rings + center hub, and
   swap the white pill backgrounds for the brand's ivory + charcoal, so
   this diagram reads as brand charcoal/ivory instead of blue-black/white
   (previously gold, per explicit request — scoped only to .buyers-page). */
.buyers-page .hero-eco-diagram .eco-ring {
  border-color: rgba(154,157,161,0.65);
}
.buyers-page .hero-eco-diagram .eco-center {
  background: linear-gradient(135deg, #292B2F, #4B4D51);
  color: #FFFFFF;
  box-shadow: 0 20px 45px rgba(41,43,47,0.35);
}
.buyers-page .hero-eco-diagram .eco-node {
  background: #FAF8F5;
  border: 2px solid #292B2F;
  box-shadow: 0 6px 16px rgba(41,43,47,0.3);
  color: #292B2F;
}
@media (max-width: 640px) {
  .buyers-page .hero-eco-diagram { max-width: 260px; }
  .buyers-page .hero-eco-diagram .eco-node {
    font-size: 0.58rem;
    padding: 0.35rem 0.5rem;
    width: 40%;
    max-width: 100px;
  }
}

/* ============ Forms ============ */
.form-label {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5D6164;
  margin-bottom: 0.4rem;
}
.form-input {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(3,9,19,0.15);
  color: #030913;
  padding: 0.75rem 0.9rem;
  border-radius: 3px;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 0.92rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus {
  outline: none;
  border-color: #C2AA72;
  box-shadow: 0 0 0 3px rgba(194,170,114,0.15);
}

/* ============ Footer ============ */
footer.site-footer {
  background: #030913;
  color: rgba(255,255,255,0.7);
}
/* Footer logo: same 500x500 source file as the header logo, with the same
   thin wordmark band centered in a mostly-blank square canvas. Cropped with
   the same technique (fixed-size overflow:hidden box + oversized, offset
   img) scaled down proportionally to the footer's smaller height, so the
   visible logo mark fills its box instead of shrinking to a sliver. */
.footer-logo-wrap {
  height: 40px;
  width: 129px;
  overflow: hidden;
  position: relative;
  display: inline-block;
}
.footer-logo-wrap .footer-logo {
  height: 132px;
  width: 132px;
  max-width: none;
  position: absolute;
  top: -57px;
  left: -2px;
  display: block;
}
.footer-heading {
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.footer-link {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.72);
  transition: color 0.2s ease;
  display: inline-block;
}
.footer-link:hover { color: #C2AA72; }
.footer-disclosure {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 0.78rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.45);
}

/* ============ Reveal (progressive enhancement, visible by default) ============ */
[data-reveal] { opacity: 1; transform: translateY(0); }
[data-reveal].pre-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].pre-reveal.revealed { opacity: 1; transform: translateY(0); }

/* ============ Scrollbar ============ */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #FAF8F5; }
::-webkit-scrollbar-thumb { background: #C2AA72; border-radius: 5px; }

/* ============ Utility ============ */
.divider-gold { height: 1px; width: 64px; background: #C2AA72; margin: 0 auto; }
.tag-pill {
  display: inline-flex;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: #292B2F;
  background: #FAF8F5;
  border: 1px solid rgba(3,9,19,0.08);
  padding: 0.55rem 1rem;
  border-radius: 999px;
}

/* ============ Journey phase cards (Prepare / Exit / Post-Integration) ============ */
.phase-card {
  background: #FFFFFF;
  border: 1px solid rgba(3,9,19,0.08);
  border-radius: 4px;
  padding: 2.25rem 1.75rem;
  height: 100%;
  position: relative;
}
.phase-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #FAF8F5;
  border: 1px solid rgba(194,170,114,0.45);
  color: #887856;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
}
.phase-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 0.88rem;
  color: #5D6164;
  padding: 0.3rem 0;
}
.phase-list li i { color: #887856; margin-top: 3px; flex-shrink: 0; }

/* ============ Pricing cards ============ */
.pricing-card {
  background: #FFFFFF;
  border: 1px solid rgba(3,9,19,0.08);
  border-radius: 4px;
  padding: 2.1rem 1.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.pricing-card.featured {
  border: 1px solid #C2AA72;
  box-shadow: 0 24px 50px rgba(194,170,114,0.2);
  position: relative;
}
.pricing-card .price-ribbon {
  position: absolute;
  top: 0; right: 0;
  background: linear-gradient(135deg, #C2AA72, #887856);
  color: #FFFFFF;
  font-family: "Montserrat", sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: 0 4px 0 8px;
}
.pricing-card .price-tag {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 2.1rem;
  color: #030913;
  line-height: 1;
}
.pricing-card .price-note {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 0.78rem;
  color: #869293;
  margin-top: 0.25rem;
}
.price-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 0.8rem;
  color: #5D6164;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(3,9,19,0.06);
  text-align: left;
}
.price-row:last-child { border-bottom: none; }
.price-row span:last-child { color: #292B2F; font-weight: 600; white-space: nowrap; }
.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 0.85rem;
  color: #5D6164;
  padding: 0.28rem 0;
  text-align: left;
}
.pricing-feature i { color: #887856; margin-top: 3px; flex-shrink: 0; }

/* ============ Slate / near-black accent card (variant, kept on light card bg) ============ */
.card-brand .brand-mark-badge i.text-slate,
.card-capability .cap-icon i.text-slate { color: #5D6164; }
.card-brand .brand-mark-badge i.text-nearblack,
.card-capability .cap-icon i.text-nearblack { color: #030913; }
.card-capability.accent-slate { border-color: rgba(93,97,100,0.25); }
.card-capability.accent-slate .cap-icon { border-color: rgba(93,97,100,0.35); }
.card-brand.accent-nearblack { border-color: rgba(3,9,19,0.16); }

/* ============ Speaking extra slots (slate/near-black icons, neutral card background) ============ */
.cap-icon.icon-slate { border-color: rgba(93,97,100,0.4); color: #5D6164; background: #FFFFFF; }
.cap-icon.icon-nearblack { border-color: rgba(3,9,19,0.32); color: #030913; background: #FFFFFF; }

/* ============ Press feature cards & wordmark strip ============ */
.press-card {
  background: #FFFFFF;
  border: 1px solid rgba(3,9,19,0.08);
  border-radius: 4px;
  padding: 1.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.press-card .press-type {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #887856;
  margin-bottom: 0.75rem;
}
.press-card .press-outlet {
  font-family: "Roboto Slab", serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: #030913;
  margin-bottom: 0.4rem;
}
.press-card .press-title {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 0.9rem;
  color: #5D6164;
  line-height: 1.55;
  margin-bottom: 0.75rem;
  flex-grow: 1;
}
.press-card .press-date {
  font-family: "Montserrat", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #869293;
}
.press-wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #FAF8F5;
  border: 1px solid rgba(3,9,19,0.08);
  border-radius: 4px;
  padding: 1.4rem 1rem;
  height: 100%;
  min-height: 92px;
  font-family: "Roboto Slab", serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: #292B2F;
  line-height: 1.3;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.press-wordmark:hover { border-color: rgba(194,170,114,0.5); transform: translateY(-3px); }
.press-wordmark.press-wordmark-logo { padding: 1.1rem 1.25rem; }
.press-wordmark img {
  max-height: 46px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(15%);
  transition: filter 0.2s ease;
}
.press-wordmark:hover img { filter: grayscale(0%); }

/* ============ CEO Circle section (index.html) — final black/white redesign ============
   FONT FLAG: the requested "Garamond Premier Pro Italic" is a licensed Adobe
   desktop font with no free/CDN-embeddable web version. Per explicit
   instruction not to substitute a different typeface, the headline,
   network headline, experience titles and closing headline below target
   font-family: "Garamond Premier Pro" FIRST, falling back only to
   "Cormorant Garamond" (already loaded site-wide) as a visible placeholder
   until licensed Garamond Premier Pro .woff/.woff2 files are supplied —
   at that point an @font-face for that exact family name can be added and
   every rule below will pick the real font up automatically with no other
   changes needed.
   COLOR SPEC: very light gray background (#F5F5F5); all text, numbers,
   borders, dividers and button outlines are pure black (#000000) — no
   near-black, charcoal, gray text, or gold anywhere in this section.
   PHOTOS: authentic event photographs supplied by the client (private CEO
   dinner/roundtable settings), not stock or generated images. */
#ceo-circle-section {
  background: #F5F5F5;
  /* Uses its own padding (not margin) for vertical spacing, so the
     section's #F5F5F5 background fills the gap itself instead of a
     margin exposing the page's white body background as a stray pale
     stripe right under the Deal Room section above (the bug reported). */
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* Content spans 92% of the section width on desktop: remove the max-width
   cap entirely and let the sitewide .wrap side padding (already 4% each
   side at >=1024px = 92% content width) govern it directly, instead of
   the previous 1280px ceiling which fell well short of 92% on wide
   screens. */
#ceo-circle-section .wrap { max-width: none; }

.ceo-circle-inner > * + * { margin-top: 4rem; }

/* ---- Universal photo box: every photo in this section (hero + the two
   feature rows below) uses this SAME class, SAME aspect-ratio (4:3), and
   object-fit: cover -- so every photo is cropped to an identical size and
   shape as every other photo. This is true, guaranteed symmetry (not just
   matching CSS containers around differently-scaled letterboxed images).
   object-position is tuned per photo (via the img-* class added on each
   <img> in the markup) so nobody's head or face is ever cropped off --
   verified photo by photo before these values were set. ---- */
.ceo-circle-photo-box {
  /* A single, viewport-relative width formula applied to EVERY photo box
     in this section (hero + both feature rows). Because the surrounding
     grids use "auto" (not "1fr") for the photo-box column (see .ceo-circle-hero
     and .ceo-circle-feature-row below), each track sizes itself to fit this
     box exactly -- so all 4 boxes render at the identical pixel width and,
     combined with the shared aspect-ratio, the identical pixel height too,
     regardless of whether the box sits in the hero's 3-column row or a
     feature row's 2-column row. */
  width: clamp(260px, 24vw, 380px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #F5F5F5;
}
.ceo-circle-photo-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Per-photo focal points, tuned so no head/face is cropped: */
.ceo-circle-photo-box img.img-celebration { object-position: center 30%; }
.ceo-circle-photo-box img.img-forum { object-position: center 22%; }
.ceo-circle-photo-box img.img-solo-toast { object-position: center 20%; }
.ceo-circle-photo-box img.img-dinner-table { object-position: center 25%; }

/* ---- Hero: high-five photo (left) / headline (center) / forum photo
   (right). celebration.jpg and forum.jpg share the same native aspect
   ratio as each other, so cropping both to the shared 4:3 photo-box needs
   almost no trim and keeps them visually even. ---- */
.ceo-circle-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2.5rem;
  align-items: center;
  justify-content: center;
}

/* ---- Heading block: headline first, "By Application Only" underneath ---- */
.ceo-circle-heading-block { max-width: 980px; margin-left: auto; margin-right: auto; }
.ceo-circle-headline {
  font-family: "Garamond Premier Pro", "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 70px;
  line-height: 1.15;
  color: #000000;
  margin-bottom: 1.25rem;
  text-wrap: balance;
}
.ceo-circle-eyebrow {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #000000;
}

/* ---- Shared body copy ---- */
.ceo-circle-body {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.6;
  color: #000000;
}
.ceo-circle-body + .ceo-circle-body { margin-top: 1.25rem; }
/* Intro paragraphs span the section's full 92% content width — no
   narrower centered column — per explicit instruction. */
.ceo-circle-intro { width: 100%; }

/* ---- "An Exceptional Network" headline + copy: centered, full-width
   editorial block introducing the two mirrored photo/text feature rows
   below (no divider borders anywhere in this section). ---- */
.ceo-circle-network-intro { max-width: 900px; margin-left: auto; margin-right: auto; }
.ceo-circle-network-headline {
  font-family: "Garamond Premier Pro", "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 42px;
  line-height: 1.2;
  color: #000000;
  margin-bottom: 1.25rem;
}

/* ---- Feature rows: photo + text side by side, symmetric with the
   section's 92% outer edges (no extra padding/border). Row 2 uses the
   *-reverse modifier and reversed markup order so it displays as a
   text/photo mirror of row 1 on desktop. ---- */
.ceo-circle-feature-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem;
  align-items: center;
}
.ceo-circle-feature-row-reverse { grid-template-columns: 1fr auto; }
.ceo-circle-feature-text .ceo-circle-num { margin-bottom: 1.1rem; }

/* ---- Executive Mastery & Peer Advisory / Quarterly CEO Forums: plain
   2-column, description-only row -- no photos, no borders, no grid/chart
   look (removed per explicit instruction) -- just generous spacing so the
   section flows as clean editorial copy. ---- */
.ceo-circle-experiences {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 4rem;
  row-gap: 3.5rem;
}
.ceo-circle-experience { padding: 0; }
.ceo-circle-num {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: #000000;
  margin-bottom: 1.1rem;
}
.ceo-circle-exp-title {
  font-family: "Garamond Premier Pro", "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 34px;
  color: #000000;
  line-height: 1.25;
  margin-bottom: 1.1rem;
}
.ceo-circle-experience .ceo-circle-body { font-size: 20px; }
.ceo-circle-experience .ceo-circle-body + .ceo-circle-body { margin-top: 1rem; }

/* ---- Closing invitation: full-bleed black section ---- */
/* Per explicit instruction, the closing invitation (headline + supporting
   line + the two CTA buttons) is now its own full-width <section> — the
   black background spans corner to corner (the entire browser width), not
   just a small centered box. This section sits directly against the
   light-gray #ceo-circle-section above it and the "Featured On" belt below
   it (see .ceo-circle-forms-wrap below), with no gap, so the belt's own
   top hairline reads as the exact line where the black stops and the
   scrolling belt begins right underneath it. */
.ceo-circle-cta-section {
  background: #000000;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.ceo-circle-cta-section .wrap { max-width: none; }
.ceo-circle-cta {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.ceo-circle-closing-headline {
  font-family: "Garamond Premier Pro", "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 40px;
  line-height: 1.25;
  color: #FFFFFF;
  margin-bottom: 1.25rem;
}
.ceo-circle-cta .ceo-circle-body { margin-bottom: 2rem; color: #FFFFFF; }

/* ---- Wrapper for the two embedded application forms, sitting between the
   black CTA section and the "Featured On" belt. Both forms are hidden by
   default, so this wrapper naturally collapses to zero height/padding —
   nothing is rendered between the black section and the belt below it —
   and only gains the section's usual light-gray background + padding once
   a form is actually expanded (via :has()), matching the rest of the CEO
   Circle section's design system while it's open. */
.ceo-circle-forms-wrap { background: transparent; }
.ceo-circle-forms-wrap.is-open,
.ceo-circle-forms-wrap:has(#ceo-circle-application:not(.hidden)),
.ceo-circle-forms-wrap:has(#ceo-circle-event-application:not(.hidden)) {
  background: #F5F5F5;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.ceo-circle-forms-wrap .wrap { max-width: none; }

/* Two closing CTA buttons ("Apply to Join the CEO Circle" and "Request an
   Invitation to the Next Event") sit side by side, same exact size, both
   gold -- per explicit instruction. */
.ceo-circle-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1.25rem;
}
.ceo-circle-cta-buttons .ceo-circle-btn {
  flex: 1 1 320px;
  max-width: 380px;
}

/* ---- Large outlined application button: black text, black border, no fill ---- */
.ceo-circle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #000000;
  border: 1.5px solid #000000;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1.15rem 3rem;
  min-height: 60px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  text-align: center;
  border-radius: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ceo-circle-btn:hover {
  background: #000000;
  color: #FFFFFF;
}
@media (prefers-reduced-motion: reduce) {
  .ceo-circle-btn { transition: none; }
}

/* ---- Gold variant: used for the two closing CTA buttons ("Apply to Join
   the CEO Circle" / "Request an Invitation to the Next Event") per explicit
   instruction, matching the sitewide gold accent (#C2AA72) used elsewhere
   (e.g. .btn-gold) rather than the section's default black-outline style. ---- */
.ceo-circle-btn-gold {
  background: linear-gradient(135deg, #C2AA72, #D8C08F);
  color: #030913;
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(194,170,114,0.35);
}
.ceo-circle-btn-gold:hover {
  background: linear-gradient(135deg, #C2AA72, #D8C08F);
  color: #030913;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(194,170,114,0.5);
}

/* ---- Tablet (641–1023px): stack hero to photo/headline/photo vertically,
   and stack each feature row to photo-then-text vertically. ---- */
@media (max-width: 1023px) {
  .ceo-circle-headline { font-size: 52px; }
  .ceo-circle-network-headline { font-size: 38px; }
  .ceo-circle-exp-title { font-size: 32px; }
  .ceo-circle-closing-headline { font-size: 36px; }
  .ceo-circle-hero { grid-template-columns: 1fr; gap: 2rem; }
  .ceo-circle-photo-box { width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; }
  .ceo-circle-feature-row,
  .ceo-circle-feature-row-reverse { grid-template-columns: 1fr; gap: 2rem; }
  /* Reversed row's markup order is text-then-photo; force the photo back
     on top visually so every stacked row reads photo-then-text, matching
     row 1, instead of the reversed row showing text first. */
  .ceo-circle-feature-row-reverse .ceo-circle-photo-box { order: -1; }
}

/* ---- Mobile (<=640px): stack panels, full-width button ---- */
@media (max-width: 640px) {
  .ceo-circle-inner > * + * { margin-top: 3rem; }
  .ceo-circle-headline { font-size: 38px; line-height: 1.18; }
  .ceo-circle-eyebrow { font-size: 15px; letter-spacing: 0.16em; }
  .ceo-circle-body { font-size: 18px; }
  .ceo-circle-hero { gap: 1.5rem; }
  .ceo-circle-photo-box { max-width: 100%; }
  .ceo-circle-feature-row,
  .ceo-circle-feature-row-reverse { gap: 1.5rem; }
  .ceo-circle-network-headline { font-size: 30px; }
  .ceo-circle-experiences { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .ceo-circle-exp-title { font-size: 30px; }
  .ceo-circle-experience .ceo-circle-body { font-size: 18px; }
  .ceo-circle-closing-headline { font-size: 28px; }
  .ceo-circle-btn { width: 100%; }
  .ceo-circle-cta-buttons { flex-direction: column; }
  .ceo-circle-cta-buttons .ceo-circle-btn { flex: 1 1 auto; max-width: 100%; }
}

/* ============ CEO Circle: embedded Membership Application form ============
   Same design system as the rest of #ceo-circle-section: light gray
   background, pure black (#000000) text, white input fields, Montserrat
   Regular for labels/body, Garamond Premier Pro Italic for the heading.
   Two equally-sized columns for short fields on desktop, one column on
   mobile; long written responses (textareas) and the priorities checkbox
   group always span the full width. Labels stay visible above every field
   at all times (no placeholder-as-label pattern). The form is hidden by
   default (JS in js/ceo-circle-application.js toggles the .hidden class and
   scrolls it into view when "Apply to Join the CEO Circle" is clicked). */
.ceo-circle-application {
  background: #EDEDED;
  padding: 3rem clamp(1.25rem, 4vw, 3rem);
}
/* 20px spacing between the application block and the section content
   immediately above/below it, overriding the section's default 4rem
   inter-child spacing for these two specific blocks only (ID selector
   gives this the specificity it needs to win over ".ceo-circle-inner > * + *"). */
.ceo-circle-inner > * + #ceo-circle-application,
.ceo-circle-inner > * + #ceo-circle-event-application {
  margin-top: 20px;
}
.ceo-circle-application-inner { max-width: 900px; margin: 0 auto; }
.ceo-circle-application-heading {
  font-family: "Garamond Premier Pro", "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 600;
  font-size: 42px;
  line-height: 1.2;
  color: #000000;
  margin-bottom: 1rem;
}
.ceo-circle-application-intro {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  color: #000000;
  max-width: 700px;
  margin: 0 auto 2.5rem;
}

.ceo-circle-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 2rem;
  text-align: left;
}
.ceo-circle-form-field--full { grid-column: 1 / -1; }
.ceo-circle-form-label {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #000000;
  margin-bottom: 0.5rem;
}
.ceo-circle-form-input {
  display: block;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.25);
  color: #000000;
  padding: 0.85rem 1rem;
  border-radius: 2px;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ceo-circle-form-input:focus {
  outline: none;
  border-color: #000000;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.12);
}
textarea.ceo-circle-form-input { resize: vertical; min-height: 120px; }
.ceo-circle-form-helper {
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  color: #3A3A3A;
  margin: -0.25rem 0 0.85rem;
}

/* "Select up to three" business priorities checkboxes */
.ceo-circle-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem 1.5rem;
}
.ceo-circle-checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  color: #000000;
  cursor: pointer;
}
.ceo-circle-checkbox-item input {
  margin-top: 0.2rem;
  width: 16px;
  height: 16px;
  accent-color: #000000;
  flex-shrink: 0;
  cursor: pointer;
}
.ceo-circle-checkbox-item input:disabled { cursor: not-allowed; }
.ceo-circle-checkbox-item input:disabled + span { color: rgba(0,0,0,0.35); }
.ceo-circle-priority-other { margin-top: 1rem; max-width: 420px; }
.ceo-circle-form-note {
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  font-style: italic;
  color: #000000;
  margin-top: 0.85rem;
}
.ceo-circle-form-error {
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  color: #B00020;
  margin-top: 0.85rem;
}

/* Required consent checkbox row */
.ceo-circle-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  color: #000000;
  cursor: pointer;
  text-align: left;
}
.ceo-circle-consent-checkbox {
  margin-top: 0.25rem;
  width: 18px;
  height: 18px;
  accent-color: #000000;
  flex-shrink: 0;
  cursor: pointer;
}

.ceo-circle-form-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
}
.ceo-circle-form-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.ceo-circle-form-status {
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  margin: 0;
}
.ceo-circle-btn-small {
  padding: 0.85rem 1.75rem;
  min-height: auto;
  font-size: 15px;
}

.ceo-circle-event-application { margin-top: 20px; }

@media (max-width: 640px) {
  .ceo-circle-application { padding: 2.25rem 1.25rem; }
  .ceo-circle-application-heading { font-size: 30px; }
  .ceo-circle-application-intro { font-size: 16px; }
  .ceo-circle-form-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .ceo-circle-checkbox-grid { grid-template-columns: 1fr; }
  .ceo-circle-form-submit-row { flex-direction: column; align-items: stretch; }
  .ceo-circle-form-status-row { flex-direction: column; align-items: stretch; }
  .ceo-circle-btn-small { width: 100%; }
}